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: '',
+      avatar: user.avatar,
-      nickname: '',
+      username: user.username,
-      subtitle: '',
+      nickname: user.nickname,
+      subtitle: user.subtitle,
     },
     validators: {
       onBlur: formSchema,
@@ -39,13 +46,12 @@ export function EditProfileDialog() {
       value,
     }) => {
       try {
-        toast(
+        await mutateAsync(value);
-          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
+        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>
+      <DialogContent className="sm:max-w-[425px]">
         <form
           onSubmit={(e) => {
             e.preventDefault();
             e.stopPropagation();
             void form.handleSubmit();
           }}
+          className="grid gap-4"
         >
-        <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>编辑个人资料</DialogTitle>
           </DialogHeader>
+          <form.Field name="username">
+            {field => (
               <Field>
-            <FieldLabel htmlFor="email">Email</FieldLabel>
+                <FieldLabel htmlFor="username">用户名</FieldLabel>
                 <Input
-              id="email"
+                  id="username"
-              name="email"
+                  name="username"
-              placeholder="noa@requiem.garden"
+                  placeholder={user.username}
-              value={form.getFieldValue('email')}
+                  value={field.state.value}
-              onChange={e => form.setFieldValue('email', e.target.value)}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
                 />
-            <FieldError />
+                <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="Noa Virellia"
+                  placeholder={user.nickname}
-              value={form.getFieldValue('nickname')}
+                  value={field.state.value}
-              onChange={e => form.setFieldValue('nickname', e.target.value)}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
                 />
-            <FieldError />
+                <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="天生骄傲"
+                  placeholder={user.subtitle}
-              value={form.getFieldValue('subtitle')}
+                  value={field.state.value}
-              onChange={e => form.setFieldValue('subtitle', e.target.value)}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
                 />
-            <FieldError />
+                <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>
+            <DialogClose asChild>
               <Button type="submit">保存</Button>
+            </DialogClose>
           </DialogFooter>
-        </DialogContent>
         </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 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 gap-4 mt-2">
+      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
-        <Avatar className="size-16 rounded-full border-2 border-muted">
+        <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">
+              <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>
-      <EditProfileDialog />
+            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
-      <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>
+          </div>
-      <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">
+          <EditProfileDialog />
+        </div>
+      </div>
+      <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>

client/cms/src/hooks/data/useUpdateUser.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { axiosClient } from '@/lib/axios';
+
+interface UpdateUserPayload {
+  avatar?: string;
+  bio?: string;
+  nickname?: string;
+  subtitle?: string;
+  username?: string;
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload: UpdateUserPayload) => {
+      return axiosClient.patch<{ status: string }>('/user/update', payload);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['userInfo'] });
+    },
+  });
+}

client/cms/src/hooks/data/useUserInfo.ts

@@ -6,6 +6,7 @@ export function useUserInfo() {
     queryKey: ['userInfo'],
     queryFn: async () => {
       const response = await axiosClient.get<{
+        username: string;
         user_id: string;
         email: string;
         type: string;

client/cms/src/routes/_sidebarLayout/profile.tsx

@@ -7,7 +7,7 @@ export const Route = createFileRoute('/_sidebarLayout/profile')({
 
 function RouteComponent() {
   return (
-    <div className="flex min-h-[560px] flex-col gap-6 px-4 py-6">
+    <div className="flex h-full flex-col gap-6 px-4 py-6">
       <MainProfile />
     </div>
   );