完成管理员user-list

tone-page-web/app/console/(with-menu)/page.tsx

@@ -1,3 +1,7 @@
 export default function Page() {
-    return <div>console</div>
+    return (
+        <div>
+            page
+        </div>
+    )
 }

tone-page-web/app/console/(with-menu)/user/components/user-info-editor.tsx

@@ -0,0 +1,69 @@
+'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"
+
+export function UserInfoEditor({
+    onClose,
+    userId,
+}: {
+    onClose: () => void,
+    userId: string
+}) {
+    return (
+        <Drawer open={!!userId} onClose={onClose} >
+            <DrawerContent>
+                <DrawerHeader className="text-left">
+                    <DrawerTitle>编辑用户信息</DrawerTitle>
+                    <DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
+                </DrawerHeader>
+                <ProfileForm className="px-4" />
+                <DrawerFooter className="pt-2">
+                    <DrawerClose asChild>
+                        <Button variant="outline">关闭</Button>
+                    </DrawerClose>
+                </DrawerFooter>
+            </DrawerContent>
+        </Drawer>
+    )
+}
+
+function ProfileForm({ className }: React.ComponentProps<"form">) {
+    return (
+        <form className={cn("grid items-start gap-4", className)}>
+            <div className="grid gap-2">
+                <Label htmlFor="email">UserId</Label>
+                <Input id="email" defaultValue="adijasiodjoi2q" disabled />
+            </div>
+            <div className="grid gap-2">
+                <Label htmlFor="username">账户</Label>
+                <Input id="username" defaultValue="username" />
+            </div>
+            <div className="grid gap-2">
+                <Label htmlFor="nickname">昵称</Label>
+                <Input id="nickname" defaultValue="nickname" />
+            </div>
+            <div className="grid gap-2">
+                <Label htmlFor="email">电子邮箱</Label>
+                <Input id="email" defaultValue="email" />
+            </div>
+            <div className="grid gap-2">
+                <Label htmlFor="phone">手机号</Label>
+                <Input id="phone" defaultValue="phone" />
+            </div>
+            <Button type="submit">保存</Button>
+        </form>
+    )
+}

tone-page-web/app/console/(with-menu)/user/page.tsx

@@ -1,5 +1,73 @@
+'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";
+
+
 export default function Page() {
+    const { users, isLoading, error, total, page, pageSize } = useUserList();
+    const [editorUserId, setEditorUserId] = useState("");
+
     return (
-        <div>user</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} />
+        </>
     )
 }

tone-page-web/app/console/login/page.tsx

@@ -15,6 +15,7 @@ import { LoginFormData, SendCodeFormData, SubmitMode } from "./components/types"
 import { useCallback, useState } from "react";
 import LoginBG from './components/login-bg.jpg';
 import Image from "next/image";
+import { ApiError } from "@/lib/api/fetcher";
 
 export default function Login() {
     const router = useRouter();
@@ -25,6 +26,7 @@ export default function Login() {
     }, []);
 
     const handleSendCode = async (data: SendCodeFormData) => {
+        try {
             const res = await verificationApi.send({
                 type: 'login',
                 targetType: data.type,
@@ -32,27 +34,34 @@ export default function Login() {
                 email: data.email,
             })
 
-        if (res.statusCode === 200) {
+            if (res) {
                 toast.success('验证码已发送，请注意查收');
                 return true;
             } else {
-            toast.error(res.message || '验证码发送失败，请稍后再试');
+                throw new Error();
+            }
+        } catch (error) {
+            toast.error((error as ApiError).message || '验证码发送失败，请稍后再试');
             return false;
         }
     }
 
     const handleSubmit = async (data: LoginFormData) => {
+        try {
             const res = await authApi.login({
                 ...data,
             });
 
-        if (res.statusCode === 200 && res.data) {
+            if (res.token) {
                 toast.success('登录成功');
-            localStorage.setItem('token', res.data.token);
+                localStorage.setItem('token', res.token);
                 router.replace('/console');
                 return true;
             } else {
-            toast.error(res.message || '登录失败，请稍后再试');
+                throw new Error();
+            }
+        } catch (error) {
+            toast.error((error as ApiError).message || '登录失败，请稍后再试');
             return false;
         }
     }

tone-page-web/components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

tone-page-web/components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

tone-page-web/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

tone-page-web/hooks/admin/user/use-user-list.ts

@@ -0,0 +1,32 @@
+"use client"
+
+import { list, UserListParams, UserListResponse } from '@/lib/api/admin/user'
+import { ApiError } from '@/lib/api/fetcher'
+import { toast } from 'sonner'
+import useSWR from 'swr'
+
+export function useUserList(params?: UserListParams) {
+    const { data, error, isLoading, mutate } = useSWR<UserListResponse>(
+        ['/api/admin/user', params],
+        () => list(params),
+        {
+            onError: (err) => {
+                if (err instanceof ApiError) {
+                    toast.error(err.message)
+                } else {
+                    toast.error('请求失败')
+                }
+            }
+        }
+    )
+
+    return {
+        users: data?.items ?? [],
+        total: data?.total ?? 0,
+        page: data?.page ?? 1,
+        pageSize: data?.pageSize ?? 20,
+        isLoading,
+        error,
+        mutate,
+    }
+}

tone-page-web/lib/api/admin/index.ts

@@ -0,0 +1 @@
+export * as user from './user/index';

tone-page-web/lib/api/admin/user/index.ts

@@ -0,0 +1 @@
+export * from './list';

tone-page-web/lib/api/admin/user/list.ts

@@ -0,0 +1,22 @@
+import { User } from "@/lib/types/user"
+import fetcher from "../../fetcher"
+
+export interface UserListParams {
+    page?: number
+    pageSize?: number
+}
+
+export interface UserListResponse {
+    items: User[],
+    total: number
+    page: number
+    pageSize: number
+}
+
+export function list(params?: UserListParams): Promise<UserListResponse> {
+    const searchParams = new URLSearchParams()
+    if (params?.page) searchParams.set('page', params.page.toString())
+    if (params?.pageSize) searchParams.set('pageSize', params.pageSize.toString())
+
+    return fetcher<UserListResponse>('/api/admin/user')
+}

tone-page-web/lib/api/auth/login.ts

@@ -1,4 +1,4 @@
-import fetcher, { StanderResponse } from "../fetcher"
+import fetcher, { ApiError } from "../fetcher"
 
 interface LoginParams {
     type: 'password' | 'phone' | 'email';
@@ -9,39 +9,39 @@ interface LoginParams {
     code?: string;
 }
 
-export const login = async (data: LoginParams): Promise<StanderResponse<{ token: string }>> => {
+export const login = async (data: LoginParams): Promise<{ token: string }> => {
     if (data.type === 'password') {
         if (!data.account || !data.password) {
-            return { statusCode: 400, message: '请输入账户和密码' }
+            throw new ApiError(400, '请输入账户和密码')
         }
         if (data.account.length < 1 || data.account.length > 254) {
-            return { statusCode: 400, message: '请输入正确的账户' }
+            throw new ApiError(400, '请输入正确的账户')
         }
         if (data.password.length < 6 || data.password.length > 32) {
-            return { statusCode: 400, message: '请输入正确的密码' }
+            throw new ApiError(400, '请输入正确的密码')
         }
     } else if (data.type === 'phone') {
         if (!data.phone || !data.code) {
-            return { statusCode: 400, message: '请输入手机号和验证码' }
+            throw new ApiError(400, '请输入手机号和验证码')
         }
         if (data.phone.length !== 11) {
-            return { statusCode: 400, message: '请输入正确的手机号' }
+            throw new ApiError(400, '请输入正确的手机号')
         }
         if (data.code.length != 6) {
-            return { statusCode: 400, message: '请输入正确的验证码' }
+            throw new ApiError(400, '请输入正确的验证码')
         }
     } else if (data.type === 'email') {
         if (!data.email || !data.code) {
-            return { statusCode: 400, message: '请输入邮箱和验证码' }
+            throw new ApiError(400, '请输入邮箱和验证码')
         }
         if (data.email.length < 1 || data.email.length > 254) {
-            return { statusCode: 400, message: '请输入正确的邮箱' }
+            throw new ApiError(400, '请输入正确的邮箱')
         }
         if (data.code.length != 6) {
-            return { statusCode: 400, message: '请输入正确的验证码' }
+            throw new ApiError(400, '请输入正确的验证码')
         }
     } else {
-        return { statusCode: 400, message: '登录方式异常' }
+        throw new ApiError(400, '登录方式异常')
     }
 
     return fetcher<{

tone-page-web/lib/api/fetcher.ts

@@ -4,7 +4,18 @@ export interface StanderResponse<T> {
     data?: T;
 }
 
-const fetcher = async<T>(url: string, options?: RequestInit): Promise<StanderResponse<T>> => {
+export class ApiError extends Error {
+    constructor(
+        public statusCode: number,
+        message: string,
+        public data?: unknown,
+    ) {
+        super(message);
+        this.name = 'ApiError';
+    }
+}
+
+const fetcher = async<T>(url: string, options?: RequestInit): Promise<T> => {
     const res = await fetch(url, {
         method: 'GET',
         headers: {
@@ -17,11 +28,12 @@ const fetcher = async<T>(url: string, options?: RequestInit): Promise<StanderRes
         ...options,
     });
 
-    if (!res.ok) {
+    const result = await res.json();
-        return await res.json();
+    if (result.statusCode !== 200) {
+        throw new ApiError(result.statusCode, result.message, result.data);
     }
 
-    return await res.json();
+    return result.data as T;
 }
 
 export default fetcher

tone-page-web/lib/api/index.ts

@@ -1,2 +1,3 @@
 export * as authApi from './auth/index';
 export * as verificationApi from './verification/index';
+export * as AdminApi from './admin/index';

tone-page-web/lib/api/verification/send.ts

@@ -8,7 +8,7 @@ interface SendVerificationCodeParam {
 }
 
 export const send = async (data: SendVerificationCodeParam) => {
-    return fetcher('/api/verification/send', {
+    return fetcher<boolean>('/api/verification/send', {
         method: 'POST',
         body: JSON.stringify(data),
     })

tone-page-web/lib/types/user.ts

@@ -0,0 +1,10 @@
+export interface User {
+    userId: string;
+    username: string;
+    nickname: string;
+    email?: string;
+    phone?: string;
+    avatar?: string;
+    createdAt: string;
+    updatedAt: string;
+}