feat: 优化项目目录结构
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from "@/components/ui/drawer"
|
||||
import { useState } from "react";
|
||||
import { AdminApi } from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
import { ApiError } from "next/dist/server/api-utils";
|
||||
|
||||
interface CreateUserEditorProps {
|
||||
children: React.ReactNode;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
export function CreateUserEditor({ children, onRefresh }: CreateUserEditorProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.currentTarget);
|
||||
try {
|
||||
await AdminApi.user.create({
|
||||
username: formData.get("username")?.toString() || null,
|
||||
nickname: formData.get("nickname")?.toString() || null,
|
||||
email: formData.get("email")?.toString() || null,
|
||||
phone: formData.get("phone")?.toString() || null,
|
||||
password: formData.get("password")?.toString() || null,
|
||||
});
|
||||
setOpen(false);
|
||||
toast.success('创建成功')
|
||||
onRefresh();
|
||||
} catch (error) {
|
||||
toast.error((error as ApiError).message || '创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div onClick={() => setOpen(true)} className="cursor-pointer">
|
||||
{children}
|
||||
</div>
|
||||
<Drawer open={open} onClose={() => setOpen(false)}>
|
||||
<DrawerContent>
|
||||
<DrawerHeader className="text-left">
|
||||
<DrawerTitle>新增用户</DrawerTitle>
|
||||
<DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
|
||||
<form className="grid items-start gap-4 px-4" onSubmit={handleSubmit}>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="username">账户</Label>
|
||||
<Input id="username" name="username" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="nickname">昵称</Label>
|
||||
<Input id="nickname" name="nickname" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">电子邮箱</Label>
|
||||
<Input id="email" name="email" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone">手机号</Label>
|
||||
<Input id="phone" name="phone" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password">密码</Label>
|
||||
<Input id="password" name="password" />
|
||||
</div>
|
||||
<Button type="submit">创建</Button>
|
||||
</form>
|
||||
|
||||
<DrawerFooter className="pt-2">
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">关闭</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
'use client';
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from "@/components/ui/drawer"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { useUser } from "@/hooks/admin/user/use-user";
|
||||
import { User } from "@/lib/types/user";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { AdminApi } from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/components/ui/alert"
|
||||
import { AlertCircle } from "lucide-react";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
|
||||
export function UserInfoEditor({
|
||||
onClose,
|
||||
onUserUpdate,
|
||||
onUserSoftDelete,
|
||||
userId,
|
||||
}: {
|
||||
onClose: () => void,
|
||||
onUserUpdate: (user: User) => void,
|
||||
onUserSoftDelete: (userId: string) => void,
|
||||
userId: string
|
||||
}) {
|
||||
const { user, isLoading, error } = useUser(userId);
|
||||
|
||||
// const [saveLoading, setSaveLoading] = React.useState(false);
|
||||
const handleSave = async (user: {
|
||||
username: string;
|
||||
nickname: string;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
}) => {
|
||||
try {
|
||||
// setSaveLoading(true);
|
||||
const res = await AdminApi.user.update(userId, user);
|
||||
if (res) {
|
||||
toast.success("保存成功");
|
||||
onUserUpdate(res);
|
||||
onClose();
|
||||
} else {
|
||||
throw new Error();
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error((error as Error).message || "保存失败");
|
||||
} finally {
|
||||
// setSaveLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// const [removeLoading, setRemoveLoading] = React.useState(false);
|
||||
const handleRemove = async (userId: string) => {
|
||||
try {
|
||||
// setRemoveLoading(true);
|
||||
await AdminApi.user.remove(userId, true);
|
||||
toast.success("注销成功");
|
||||
onUserSoftDelete(userId);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
toast.error((error as Error).message || "注销失败");
|
||||
} finally {
|
||||
// setRemoveLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const [passwordDialogOpen, setPasswordDialogOpen] = React.useState(false);
|
||||
// const [setPasswordLoading, setSetPasswordLoading] = React.useState(false);
|
||||
const handleSetPassword = async (userId: string, password: string) => {
|
||||
try {
|
||||
// setSetPasswordLoading(true);
|
||||
await AdminApi.user.setPassword(userId, password);
|
||||
toast.success("密码修改成功");
|
||||
setPasswordDialogOpen(false);
|
||||
} catch (error) {
|
||||
toast.error((error as Error).message || "密码修改失败");
|
||||
} finally {
|
||||
// setSetPasswordLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer open={!!userId} onClose={onClose} >
|
||||
<DrawerContent>
|
||||
<DrawerHeader className="text-left">
|
||||
<DrawerTitle>编辑用户信息</DrawerTitle>
|
||||
<DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
|
||||
{user && <ProfileForm className="px-4"
|
||||
user={user}
|
||||
onSetPassword={handleSetPassword}
|
||||
onRemove={handleRemove}
|
||||
passwordDialogOpen={passwordDialogOpen}
|
||||
setPasswordDialogOpen={setPasswordDialogOpen}
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
const formData = new FormData(e.currentTarget);
|
||||
handleSave({
|
||||
username: formData.get("username")?.toString() as unknown as string,
|
||||
nickname: formData.get("nickname")?.toString() as unknown as string,
|
||||
email: formData.get("email")?.toString() || null,
|
||||
phone: formData.get("phone")?.toString() || null,
|
||||
})
|
||||
}} />}
|
||||
|
||||
{isLoading &&
|
||||
[...Array(5)].map((_, i) => (
|
||||
<Skeleton className="h-20 mx-4 my-1" key={i} />
|
||||
))
|
||||
}
|
||||
|
||||
{
|
||||
error && (
|
||||
<Alert variant="destructive" className="mx-4">
|
||||
<AlertCircle className="h-6 w-6" />
|
||||
<AlertTitle>出错啦!</AlertTitle>
|
||||
<AlertDescription>{error.message}</AlertDescription>
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
<DrawerFooter className="pt-2">
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">关闭</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
function ProfileForm({ className, user, onSetPassword, onRemove, passwordDialogOpen, setPasswordDialogOpen, ...props }:
|
||||
React.ComponentProps<"form"> & {
|
||||
user: User;
|
||||
onSetPassword: (userId: string, password: string) => Promise<void>;
|
||||
onRemove: (userId: string) => Promise<void>;
|
||||
passwordDialogOpen: boolean;
|
||||
setPasswordDialogOpen: (s: boolean) => void;
|
||||
}) {
|
||||
const [newPassword, setNewPassword] = React.useState<string>("");
|
||||
|
||||
return (
|
||||
<form className={cn("grid items-start gap-4", className)} {...props}>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="userId">UserId</Label>
|
||||
<Input id="userId" name="userId" defaultValue={user.userId} disabled />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="username">账户</Label>
|
||||
<Input id="username" name="username" defaultValue={user.username} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="nickname">昵称</Label>
|
||||
<Input id="nickname" name="nickname" defaultValue={user.nickname} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">电子邮箱</Label>
|
||||
<Input id="email" name="email" defaultValue={user.email} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone">手机号</Label>
|
||||
<Input id="phone" name="phone" defaultValue={user.phone} />
|
||||
</div>
|
||||
<div className="w-full flex gap-5">
|
||||
<Dialog open={passwordDialogOpen} onOpenChange={setPasswordDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button type="button" variant="secondary" className="flex-1" onClick={() => setNewPassword('')}>修改密码</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]" >
|
||||
<DialogHeader>
|
||||
<DialogTitle>修改密码</DialogTitle>
|
||||
<DialogDescription>
|
||||
新密码长度在6-32位之间，且至少包含一个字母和一个数字，可以包含特殊字符
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="password" className="text-right">
|
||||
新密码
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
className="col-span-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" onClick={() => onSetPassword(user.userId, newPassword)}>保存密码</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button type="button" variant="destructive" className="flex-1">注销</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>是否要注销该账号?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
该操作无法撤销，稍后可通过删除来彻底清理该用户信息
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => onRemove(user.userId)}>注销</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
<Button type="submit">保存</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
156
apps/frontend/app/console/(with-menu)/user/list/page.tsx
Normal file
156
apps/frontend/app/console/(with-menu)/user/list/page.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
|
||||
import { useUserList } from "@/hooks/admin/user/use-user-list";
|
||||
import { useState } from "react";
|
||||
import { UserInfoEditor } from "./components/user-info-editor";
|
||||
import { User } from "@/lib/types/user";
|
||||
import { CreateUserEditor } from "./components/create-user-editor";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
import { AdminApi } from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
import { ApiError } from "next/dist/server/api-utils";
|
||||
|
||||
|
||||
export default function Page() {
|
||||
const { users, isLoading, error, mutate, refresh } = useUserList();
|
||||
const [editorUserId, setEditorUserId] = useState("");
|
||||
|
||||
const handleUserUpdateLocal = async (newUser: User) => {
|
||||
await mutate(
|
||||
(data) => {
|
||||
if (!data) return data;
|
||||
return {
|
||||
...data,
|
||||
items: data.items.map((user) =>
|
||||
user.userId === newUser.userId ? newUser : user
|
||||
),
|
||||
};
|
||||
},
|
||||
{
|
||||
revalidate: false,
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const handleUserDeleteLocal = async (userId: string, soft: boolean) => {
|
||||
await mutate(
|
||||
(data) => {
|
||||
if (!data) return data;
|
||||
return soft ? {
|
||||
...data,
|
||||
items: data.items.map(u => u.userId === userId ? { ...u, deletedAt: new Date().toLocaleString() } : u)
|
||||
} : {
|
||||
...data,
|
||||
items: data.items.filter((user) => user.userId !== userId),
|
||||
};
|
||||
},
|
||||
{
|
||||
revalidate: false,
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const [deletedUserId, setDeletedUserId] = useState('');
|
||||
const handleUserDelete = async (userId: string) => {
|
||||
try {
|
||||
await AdminApi.user.remove(userId, false);
|
||||
toast.success('删除成功');
|
||||
handleUserDeleteLocal(userId, false);
|
||||
setDeletedUserId('');
|
||||
} catch (error) {
|
||||
toast.error((error as ApiError).message || '删除失败');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<CreateUserEditor onRefresh={() => refresh()}>
|
||||
<Button >新增用户</Button>
|
||||
</CreateUserEditor>
|
||||
</div>
|
||||
<Table>
|
||||
{error && <TableCaption>{error.message}</TableCaption>}
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">userId</TableHead>
|
||||
<TableHead>账户</TableHead>
|
||||
<TableHead>昵称</TableHead>
|
||||
<TableHead>邮箱</TableHead>
|
||||
<TableHead>手机号</TableHead>
|
||||
<TableHead>操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
users.map((user) => (
|
||||
<TableRow key={user.userId}>
|
||||
<TableCell className="font-medium">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="max-w-[100px] overflow-hidden text-ellipsis">{user.userId}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{user.userId}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</TableCell>
|
||||
<TableCell>{user.username}</TableCell>
|
||||
<TableCell>{user.nickname}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>{user.phone}</TableCell>
|
||||
<TableCell>
|
||||
{user.deletedAt
|
||||
? <Button className="cursor-pointer" variant='destructive' size='sm'
|
||||
onClick={() => setDeletedUserId(user.userId)}>删除</Button>
|
||||
: <Button className="cursor-pointer" variant='outline' size='sm'
|
||||
onClick={() => setEditorUserId(user.userId)}>编辑</Button>
|
||||
}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
|
||||
{isLoading && (
|
||||
<TableRow>
|
||||
{
|
||||
Array.from({ length: 6 }).map((_, index) => (
|
||||
<TableCell key={index}>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</TableCell>
|
||||
))
|
||||
}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table >
|
||||
|
||||
<UserInfoEditor
|
||||
onClose={() => setEditorUserId('')}
|
||||
userId={editorUserId}
|
||||
onUserUpdate={handleUserUpdateLocal}
|
||||
onUserSoftDelete={userId => handleUserDeleteLocal(userId, true)}
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!deletedUserId} onOpenChange={o => !o && setDeletedUserId('')}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>是否要彻底删除账号?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
该操作无法撤销，会彻底删除该账号相关连的所有数据
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => handleUserDelete(deletedUserId)}>删除</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user