feat(settings): 设置与个人信息模块审计重构 — i18n + 服务注入解耦 + Error Boundary + 流式渲染
- 新增 SettingsService 接口 + Context 注入，组件层不再直接 import users/messaging actions - 新增 resolveRoleSettingsConfig 配置驱动角色路由，删除 parent/student/teacher-settings-view 冗余文件 - 新增 SettingsSectionErrorBoundary，每个 TabsContent + profile 角色概览区块均包裹 - 新增 ProfileStudentOverview/ProfileTeacherOverview 异步 Server Component + 骨架屏，支持流式渲染 - 抽取 buildStudentOverviewData 等纯函数到 lib/student-overview-data.ts，便于单元测试 - 新增 settings.json 翻译文件（zh-CN + en），所有组件改用 useTranslations/getTranslations - 重构 profile/page.tsx：i18n 适配 + Suspense 分区加载 + 业务逻辑抽离 - 同步更新架构图 004/005
This commit is contained in:
SpecialX
@@ -1,40 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import { useTransition } from "react"
|
||||
import { useTransition, type ReactElement } from "react"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useForm, type Resolver } from "react-hook-form"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
import { Loader2, Save } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/shared/components/ui/card"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
|
||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/shared/components/ui/form"
|
||||
import { UserProfile } from "@/modules/users/data-access"
|
||||
import { updateUserProfile } from "@/modules/users/actions"
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Form } from "@/shared/components/ui/form"
|
||||
import { TextField } from "@/shared/components/form-fields/text-field"
|
||||
import { SelectField } from "@/shared/components/form-fields/select-field"
|
||||
import type { UserProfile } from "@/modules/users/data-access"
|
||||
import { useSettingsService } from "@/modules/settings/components/settings-service-context"
|
||||
|
||||
const profileFormSchema = z.object({
|
||||
name: z.string().min(2, "Name must be at least 2 characters."),
|
||||
email: z.string().email().optional(), // Read only
|
||||
role: z.string().optional(), // Read only
|
||||
email: z.string().email().optional(),
|
||||
role: z.string().optional(),
|
||||
phone: z.string().optional(),
|
||||
address: z.string().optional(),
|
||||
gender: z.string().optional(),
|
||||
age: z.preprocess(
|
||||
(v) => (v === "" || v === null || v === undefined ? undefined : Number(v)),
|
||||
z.number().min(0).optional()
|
||||
),
|
||||
age: z.string().optional(),
|
||||
})
|
||||
|
||||
type ProfileFormValues = z.infer<typeof profileFormSchema>
|
||||
|
||||
export function ProfileSettingsForm({ user }: { user: UserProfile }) {
|
||||
const GENDER_OPTIONS = [
|
||||
{ value: "male", label: "Male" },
|
||||
{ value: "female", label: "Female" },
|
||||
{ value: "other", label: "Other" },
|
||||
{ value: "prefer_not_to_say", label: "Prefer not to say" },
|
||||
]
|
||||
|
||||
export function ProfileSettingsForm({ user }: { user: UserProfile }): ReactElement {
|
||||
const t = useTranslations("settings.profile")
|
||||
const { profile } = useSettingsService()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const form = useForm<ProfileFormValues>({
|
||||
resolver: zodResolver(profileFormSchema) as Resolver<ProfileFormValues>,
|
||||
resolver: zodResolver(profileFormSchema),
|
||||
defaultValues: {
|
||||
name: user.name ?? "",
|
||||
email: user.email ?? "",
|
||||
@@ -42,27 +49,28 @@ export function ProfileSettingsForm({ user }: { user: UserProfile }) {
|
||||
phone: user.phone ?? "",
|
||||
address: user.address ?? "",
|
||||
gender: user.gender ?? "",
|
||||
age: user.age ?? undefined,
|
||||
age: user.age !== undefined && user.age !== null ? String(user.age) : "",
|
||||
},
|
||||
})
|
||||
|
||||
function onSubmit(data: ProfileFormValues) {
|
||||
function onSubmit(data: ProfileFormValues): void {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const result = await updateUserProfile({
|
||||
const ageNum = data.age ? Number(data.age) : undefined
|
||||
const result = await profile.updateProfile({
|
||||
name: data.name,
|
||||
phone: data.phone || undefined,
|
||||
address: data.address || undefined,
|
||||
gender: data.gender || undefined,
|
||||
age: data.age || undefined,
|
||||
age: ageNum !== undefined && !Number.isNaN(ageNum) ? ageNum : undefined,
|
||||
})
|
||||
if (result.success) {
|
||||
toast.success("Profile updated successfully")
|
||||
toast.success(t("success"))
|
||||
} else {
|
||||
toast.error(result.message || "Failed to update profile")
|
||||
toast.error(result.message || t("failure"))
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to update profile")
|
||||
toast.error(t("failure"))
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -70,114 +78,59 @@ export function ProfileSettingsForm({ user }: { user: UserProfile }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profile Information</CardTitle>
|
||||
<CardDescription>Update your personal information.</CardDescription>
|
||||
<CardTitle>{t("title")}</CardTitle>
|
||||
<CardDescription>{t("description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Your name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.name")}
|
||||
placeholder={t("fields.namePlaceholder")}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled />
|
||||
</FormControl>
|
||||
<FormDescription>Email cannot be changed.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.email")}
|
||||
disabled
|
||||
description={t("fields.emailDisabled")}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Phone</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="+1 234 567 890" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.phone")}
|
||||
placeholder={t("fields.phonePlaceholder")}
|
||||
/>
|
||||
<FormField
|
||||
<SelectField
|
||||
control={form.control}
|
||||
name="gender"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Gender</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select gender" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="male">Male</SelectItem>
|
||||
<SelectItem value="female">Female</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
<SelectItem value="prefer_not_to_say">Prefer not to say</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.gender")}
|
||||
placeholder={t("fields.genderPlaceholder")}
|
||||
options={GENDER_OPTIONS}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="age"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Age</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" placeholder="Age" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.age")}
|
||||
type="number"
|
||||
placeholder={t("fields.age")}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Role</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled className="capitalize" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.role")}
|
||||
disabled
|
||||
inputClassName="capitalize"
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="address"
|
||||
render={({ field }) => (
|
||||
<FormItem className="col-span-1 sm:col-span-2">
|
||||
<FormLabel>Address</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="123 Main St, City, Country" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("fields.address")}
|
||||
placeholder={t("fields.addressPlaceholder")}
|
||||
itemClassName="col-span-1 sm:col-span-2"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -186,12 +139,12 @@ export function ProfileSettingsForm({ user }: { user: UserProfile }) {
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
{t("saving")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Save Changes
|
||||
{t("save")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user