nixcn/cms-server
1
0
Fork 1
Code Pull Requests Activity

feat(client): update userinfo

Browse Source 
Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
Noa Virellia
2026-01-20 21:08:19 +08:00
parent 27ac4d9b4a
commit 4e45a9b6d0
6 changed files with 138 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
client/cms/src/components/profile/edit-profile-dialog.tsx
View File

@@ -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>
);
}