调整路径

2025-05-12 13:34:00 +08:00
parent 748ea70c0d
commit 11d503ab49
4 changed files with 1 additions and 1 deletions
--- a/tone-page-web/app/console/(with-menu)/user/list/page.tsx
+++ b/tone-page-web/app/console/(with-menu)/user/list/page.tsx
@@ -0,0 +1,117 @@
+'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";
+
+
+export default function Page() {
+    const { users, isLoading, error, total, page, pageSize, mutate } = useUserList();
+    const [editorUserId, setEditorUserId] = useState("");
+
+    const handleUserUpdate = 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 handleUserDelete = async (userId: string) => {
+        await mutate(
+            (data) => {
+                if (!data) return data;
+                return {
+                    ...data,
+                    items: data.items.filter((user) => user.userId !== userId),
+                };
+            },
+            {
+                revalidate: false,
+            }
+        )
+    }
+
+    return (
+        <>
+            <div>
+                <CreateUserEditor >
+                    <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>
+                                    <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={handleUserUpdate}
+                onUserDelete={handleUserDelete}
+            />
+        </>
+    )
+}