完成admin-user-get

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

@@ -14,6 +14,9 @@ import {
 } 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";
 
 export function UserInfoEditor({
     onClose,
@@ -22,6 +25,8 @@ export function UserInfoEditor({
     onClose: () => void,
     userId: string
 }) {
+    const { user, isLoading, error } = userId ? useUser(userId) : {};
+
     return (
         <Drawer open={!!userId} onClose={onClose} >
             <DrawerContent>
@@ -29,7 +34,17 @@ export function UserInfoEditor({
                     <DrawerTitle>编辑用户信息</DrawerTitle>
                     <DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
                 </DrawerHeader>
-                <ProfileForm className="px-4" />
+
+                {user && <ProfileForm className="px-4" user={user} onSubmit={(e) => {
+                    e.preventDefault();
+                }} />}
+
+                {isLoading &&
+                    [...Array(5)].map((_, i) => (
+                        <Skeleton className="h-20 mx-4 my-1" key={i} />
+                    ))
+                }
+                
                 <DrawerFooter className="pt-2">
                     <DrawerClose asChild>
                         <Button variant="outline">关闭</Button>
@@ -40,28 +55,28 @@ export function UserInfoEditor({
     )
 }
 
-function ProfileForm({ className }: React.ComponentProps<"form">) {
+function ProfileForm({ className, user, ...props }: React.ComponentProps<"form"> & { user: User }) {
     return (
-        <form className={cn("grid items-start gap-4", className)}>
+        <form className={cn("grid items-start gap-4", className)} {...props}>
             <div className="grid gap-2">
                 <Label htmlFor="email">UserId</Label>
-                <Input id="email" defaultValue="adijasiodjoi2q" disabled />
+                <Input id="email" defaultValue={user.userId} disabled />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="username">账户</Label>
-                <Input id="username" defaultValue="username" />
+                <Input id="username" defaultValue={user.username} />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="nickname">昵称</Label>
-                <Input id="nickname" defaultValue="nickname" />
+                <Input id="nickname" defaultValue={user.nickname} />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="email">电子邮箱</Label>
-                <Input id="email" defaultValue="email" />
+                <Input id="email" defaultValue={user.email} />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="phone">手机号</Label>
-                <Input id="phone" defaultValue="phone" />
+                <Input id="phone" defaultValue={user.phone} />
             </div>
             <Button type="submit">保存</Button>
         </form>