feat(client): update userinfo

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/profile/edit-profile-dialog.tsx

@@ -19,18 +19,25 @@ import {
 import {
   Input,
 } from '@/components/ui/input';
+import { useUpdateUser } from '@/hooks/data/useUpdateUser';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
 
 const formSchema = z.object({
-  email: z.string(),
+  username: z.string().min(5),
   nickname: z.string().min(1),
   subtitle: z.string().min(1),
+  avatar: z.url().min(1),
 });
 export function EditProfileDialog() {
+  const { data: user } = useUserInfo();
+  const { mutateAsync } = useUpdateUser();
+
   const form = useForm({
     defaultValues: {
-      email: '',
-      nickname: '',
-      subtitle: '',
+      avatar: user.avatar,
+      username: user.username,
+      nickname: user.nickname,
+      subtitle: user.subtitle,
     },
     validators: {
       onBlur: formSchema,
@@ -39,13 +46,12 @@ export function EditProfileDialog() {
       value,
     }) => {
       try {
-        toast(
-          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
-        );
+        await mutateAsync(value);
+        toast.success('个人资料更新成功');
       }
       catch (error) {
         console.error('Form submission error', error);
-        toast.error('Failed to submit the form. Please try again.');
+        toast.error('更新个人资料失败，请重试');
       }
     },
   });
@@ -53,60 +59,94 @@ export function EditProfileDialog() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline" className="w-full mt-4" size="lg">编辑个人资料</Button>
+        <Button variant="outline" className="w-full" size="lg">编辑个人资料</Button>
       </DialogTrigger>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          void form.handleSubmit();
-        }}
-      >
-        <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px]">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void form.handleSubmit();
+          }}
+          className="grid gap-4"
+        >
           <DialogHeader>
             <DialogTitle>编辑个人资料</DialogTitle>
           </DialogHeader>
-          <Field>
-            <FieldLabel htmlFor="email">Email</FieldLabel>
-            <Input
-              id="email"
-              name="email"
-              placeholder="noa@requiem.garden"
-              value={form.getFieldValue('email')}
-              onChange={e => form.setFieldValue('email', e.target.value)}
-            />
-            <FieldError />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="nickname">昵称</FieldLabel>
-            <Input
-              id="nickname"
-              name="nickname"
-              placeholder="Noa Virellia"
-              value={form.getFieldValue('nickname')}
-              onChange={e => form.setFieldValue('nickname', e.target.value)}
-            />
-            <FieldError />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
-            <Input
-              id="subtitle"
-              name="subtitle"
-              placeholder="天生骄傲"
-              value={form.getFieldValue('subtitle')}
-              onChange={e => form.setFieldValue('subtitle', e.target.value)}
-            />
-            <FieldError />
-          </Field>
+          <form.Field name="username">
+            {field => (
+              <Field>
+                <FieldLabel htmlFor="username">用户名</FieldLabel>
+                <Input
+                  id="username"
+                  name="username"
+                  placeholder={user.username}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
+                />
+                <FieldError errors={field.state.meta.errors} />
+              </Field>
+            )}
+          </form.Field>
+          <form.Field name="nickname">
+            {field => (
+              <Field>
+                <FieldLabel htmlFor="nickname">昵称</FieldLabel>
+                <Input
+                  id="nickname"
+                  name="nickname"
+                  placeholder={user.nickname}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
+                />
+                <FieldError errors={field.state.meta.errors} />
+              </Field>
+            )}
+          </form.Field>
+          <form.Field name="subtitle">
+            {field => (
+              <Field>
+                <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
+                <Input
+                  id="subtitle"
+                  name="subtitle"
+                  placeholder={user.subtitle}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
+                />
+                <FieldError errors={field.state.meta.errors} />
+              </Field>
+            )}
+          </form.Field>
+          <form.Field name="avatar">
+            {field => (
+              <Field>
+                <FieldLabel htmlFor="avatar">头像链接</FieldLabel>
+                <Input
+                  id="avatar"
+                  name="avatar"
+                  placeholder={user.avatar}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
+                />
+                <FieldError errors={field.state.meta.errors} />
+              </Field>
+            )}
+          </form.Field>
           <DialogFooter>
             <DialogClose asChild>
               <Button variant="outline">取消</Button>
             </DialogClose>
-            <Button type="submit">保存</Button>
+            <DialogClose asChild>
+              <Button type="submit">保存</Button>
+            </DialogClose>
           </DialogFooter>
-        </DialogContent>
-      </form>
+        </form>
+      </DialogContent>
     </Dialog>
   );
 }

client/cms/src/components/profile/edit-profile-form.tsx

@@ -1,102 +0,0 @@
-import {
-  useForm,
-} from '@tanstack/react-form';
-import {
-  toast,
-} from 'sonner';
-import {
-  z,
-} from 'zod';
-import {
-  Button,
-} from '@/components/ui/button';
-import {
-  Field,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
-import {
-  Input,
-} from '@/components/ui/input';
-
-const formSchema = z.object({
-  email: z.string(),
-  nickname: z.string().min(1),
-  subtitle: z.string().min(1),
-});
-
-export default function EditProfileForm() {
-  const form = useForm({
-    defaultValues: {
-      email: '',
-      nickname: '',
-      subtitle: '',
-    },
-    validators: {
-      onBlur: formSchema,
-    },
-    onSubmit: async ({
-      value,
-    }) => {
-      try {
-        toast(
-          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
-        );
-      }
-      catch (error) {
-        console.error('Form submission error', error);
-        toast.error('Failed to submit the form. Please try again.');
-      }
-    },
-  });
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        void form.handleSubmit();
-      }}
-    >
-      <Field>
-        <FieldLabel htmlFor="email">Email</FieldLabel>
-        <Input
-          id="email"
-          name="email"
-          placeholder="noa@requiem.garden"
-
-          value={form.getFieldValue('email')}
-          onChange={e => form.setFieldValue('email', e.target.value)}
-        />
-        <FieldError />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="nickname">昵称</FieldLabel>
-        <Input
-          id="nickname"
-          name="nickname"
-          placeholder="Noa Virellia"
-
-          value={form.getFieldValue('nickname')}
-          onChange={e => form.setFieldValue('nickname', e.target.value)}
-        />
-
-        <FieldError />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
-        <Input
-          id="subtitle"
-          name="subtitle"
-          placeholder="天生骄傲"
-
-          value={form.getFieldValue('subtitle')}
-          onChange={e => form.setFieldValue('subtitle', e.target.value)}
-        />
-
-        <FieldError />
-      </Field>
-      <Button type="submit">提交</Button>
-    </form>
-  );
-}

client/cms/src/components/profile/main-profile.tsx

@@ -8,25 +8,29 @@ import { EditProfileDialog } from './edit-profile-dialog';
 export function MainProfile() {
   const { data: user } = useUserInfo();
   return (
-    <div className="flex flex-col w-full">
-      <div className="flex w-full flex-row gap-4 mt-2">
-        <Avatar className="size-16 rounded-full border-2 border-muted">
-          <AvatarImage src={user.avatar} alt={user.nickname} />
-          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-        </Avatar>
-        <div className="flex flex-1 flex-col justify-center">
-          <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
-          <span className="text-[20px] text-muted-foreground" aria-hidden="true">{user.subtitle}</span>
+    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
+      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
+        <div className="flex flex-col w-full gap-3">
+          <div className="flex flex-col w-full gap-3">
+            <div className="flex flex-row gap-3 w-full lg:flex-col">
+              <Avatar className="size-16 rounded-full border-2 border-muted lg:size-64">
+                <AvatarImage src={user.avatar} alt={user.nickname} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-1 flex-col justify-center lg:mt-3">
+                <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
+                <span className="text-[20px] text-muted-foreground" aria-hidden="true">{user.subtitle}</span>
+              </div>
+            </div>
+            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
+              <Mail className="h-4 w-4 stroke-muted-foreground" />
+              {user.email}
+            </div>
+          </div>
+          <EditProfileDialog />
         </div>
       </div>
-      <EditProfileDialog />
-      <section className="px-2 mt-4">
-        <div className="flex flex-row gap-2 items-center text-sm">
-          <Mail className="h-4 w-4 stroke-muted-foreground" />
-          {user.email}
-        </div>
-      </section>
-      <section className="rounded-md border border-muted w-full min-h-72 mt-4 p-6 prose dark:prose-invert max-w-[1012px] self-center">
+      <section className="rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 p-6 prose dark:prose-invert max-w-[1012px] self-center">
         {/* Bio */}
         <Markdown>{base64ToUtf8(user.bio)}</Markdown>
       </section>