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,6 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { z } from "zod"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
@@ -9,17 +10,16 @@ import { Loader2, Save, Sparkles } from "lucide-react"
|
||||
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Checkbox } from "@/shared/components/ui/checkbox"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/shared/components/ui/form"
|
||||
import { TextField } from "@/shared/components/form-fields/text-field"
|
||||
import { SelectField } from "@/shared/components/form-fields/select-field"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -42,13 +42,6 @@ const AiProviderFormSchema = z.object({
|
||||
|
||||
type AiProviderFormValues = z.infer<typeof AiProviderFormSchema>
|
||||
|
||||
const providerLabels: Record<z.infer<typeof ProviderSchema>, string> = {
|
||||
zhipu: "Zhipu",
|
||||
openai: "OpenAI",
|
||||
gemini: "Gemini",
|
||||
custom: "Custom",
|
||||
}
|
||||
|
||||
const NEW_PROVIDER_VALUE = "__new__"
|
||||
|
||||
export function AiProviderSettingsCard({
|
||||
@@ -58,6 +51,7 @@ export function AiProviderSettingsCard({
|
||||
onProvidersChanged?: (rows: AiProviderSummary[]) => void
|
||||
initialMode?: "new" | "first"
|
||||
}) {
|
||||
const t = useTranslations("settings.ai.providers")
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [providers, setProviders] = useState<AiProviderSummary[]>([])
|
||||
const [selectedId, setSelectedId] = useState<string>("")
|
||||
@@ -112,7 +106,7 @@ export function AiProviderSettingsCard({
|
||||
try {
|
||||
const result = await getAiProviderSummaries()
|
||||
if (!result.success || !result.data) {
|
||||
toast.error(result.message ?? "Failed to load AI providers")
|
||||
toast.error(result.message ?? t("loadFailure"))
|
||||
return
|
||||
}
|
||||
const rows = result.data
|
||||
@@ -135,10 +129,10 @@ export function AiProviderSettingsCard({
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to load AI providers")
|
||||
toast.error(t("loadFailure"))
|
||||
}
|
||||
})
|
||||
}, [form, selectedId, onProvidersChanged, initialMode, resetToNew])
|
||||
}, [form, selectedId, onProvidersChanged, initialMode, resetToNew, t])
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
if (value === NEW_PROVIDER_VALUE) {
|
||||
@@ -175,7 +169,7 @@ export function AiProviderSettingsCard({
|
||||
const values = form.getValues()
|
||||
const apiKey = values.apiKey?.trim()
|
||||
if (!apiKey && !values.id?.trim()) {
|
||||
toast.error("Please enter API key to test")
|
||||
toast.error(t("needKey"))
|
||||
return
|
||||
}
|
||||
setTestStatus("testing")
|
||||
@@ -192,10 +186,10 @@ export function AiProviderSettingsCard({
|
||||
if (result.success) {
|
||||
setTestStatus("passed")
|
||||
setLastTestedSignature(buildSignature(values))
|
||||
toast.success(result.message ?? "Test passed")
|
||||
toast.success(result.message ?? t("testSuccess"))
|
||||
} else {
|
||||
setTestStatus("failed")
|
||||
toast.error(result.message ?? "Test failed")
|
||||
toast.error(result.message ?? t("testFailure"))
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -203,7 +197,7 @@ export function AiProviderSettingsCard({
|
||||
const onSubmit = (values: AiProviderFormValues) => {
|
||||
const signature = buildSignature(values)
|
||||
if (testStatus !== "passed" || signature !== lastTestedSignature) {
|
||||
toast.error("Please test the configuration before saving")
|
||||
toast.error(t("needTest"))
|
||||
return
|
||||
}
|
||||
startTransition(async () => {
|
||||
@@ -217,12 +211,12 @@ export function AiProviderSettingsCard({
|
||||
}
|
||||
const result = await upsertAiProviderAction(payload)
|
||||
if (result.success) {
|
||||
toast.success(result.message ?? "Saved")
|
||||
toast.success(result.message ?? t("saveSuccess"))
|
||||
setTestStatus("idle")
|
||||
setLastTestedSignature("")
|
||||
const summariesResult = await getAiProviderSummaries()
|
||||
if (!summariesResult.success || !summariesResult.data) {
|
||||
toast.error(summariesResult.message ?? "Failed to load AI providers")
|
||||
toast.error(summariesResult.message ?? t("loadFailure"))
|
||||
return
|
||||
}
|
||||
const rows = summariesResult.data
|
||||
@@ -242,7 +236,7 @@ export function AiProviderSettingsCard({
|
||||
})
|
||||
}
|
||||
} else {
|
||||
toast.error(result.message ?? "Failed to save")
|
||||
toast.error(result.message ?? t("saveFailure"))
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -252,34 +246,34 @@ export function AiProviderSettingsCard({
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-purple-500" />
|
||||
AI Providers
|
||||
{t("title")}
|
||||
</CardTitle>
|
||||
<CardDescription>Manage AI vendors and default model configuration.</CardDescription>
|
||||
<CardDescription>{t("description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<FormLabel>Existing Providers</FormLabel>
|
||||
<FormLabel>{t("existing")}</FormLabel>
|
||||
<Select value={selectedId || NEW_PROVIDER_VALUE} onValueChange={handleSelectChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Create new or select existing" />
|
||||
<SelectValue placeholder={t("selectPlaceholder")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NEW_PROVIDER_VALUE}>Create new</SelectItem>
|
||||
<SelectItem value={NEW_PROVIDER_VALUE}>{t("createNew")}</SelectItem>
|
||||
{providers.map((item) => (
|
||||
<SelectItem key={item.id} value={item.id}>
|
||||
{providerLabels[item.provider]} · {item.model}
|
||||
{item.provider} · {item.model}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<FormLabel>Key Status</FormLabel>
|
||||
<FormLabel>{t("keyStatus")}</FormLabel>
|
||||
<div className="rounded-md border px-3 py-2 text-sm text-muted-foreground">
|
||||
{selectedProvider?.apiKeyLast4
|
||||
? `Stored • ****${selectedProvider.apiKeyLast4}`
|
||||
: "No key stored"}
|
||||
? `${t("stored")} • ****${selectedProvider.apiKeyLast4}`
|
||||
: t("noKey")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -287,82 +281,46 @@ export function AiProviderSettingsCard({
|
||||
<Form {...form}>
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value ?? ""} disabled />
|
||||
</FormControl>
|
||||
<FormDescription>Auto-generated for each provider.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("id")}
|
||||
disabled
|
||||
description={t("idDesc")}
|
||||
/>
|
||||
<FormField
|
||||
<SelectField
|
||||
control={form.control}
|
||||
name="provider"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Provider</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select provider" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="zhipu">Zhipu</SelectItem>
|
||||
<SelectItem value="openai">OpenAI</SelectItem>
|
||||
<SelectItem value="gemini">Gemini</SelectItem>
|
||||
<SelectItem value="custom">Custom</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("provider")}
|
||||
placeholder={t("providerPlaceholder")}
|
||||
options={[
|
||||
{ value: "zhipu", label: "Zhipu" },
|
||||
{ value: "openai", label: "OpenAI" },
|
||||
{ value: "gemini", label: "Gemini" },
|
||||
{ value: "custom", label: "Custom" },
|
||||
]}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="baseUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>API URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="https://open.bigmodel.cn/api/paas/v4" />
|
||||
</FormControl>
|
||||
<FormDescription>Enter base URL without /chat/completions suffix.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("baseUrl")}
|
||||
placeholder={t("baseUrlPlaceholder")}
|
||||
description={t("baseUrlDesc")}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="model"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Model</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="gpt-4o-mini" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("model")}
|
||||
placeholder={t("modelPlaceholder")}
|
||||
/>
|
||||
<FormField
|
||||
<TextField
|
||||
control={form.control}
|
||||
name="apiKey"
|
||||
render={({ field }) => (
|
||||
<FormItem className="sm:col-span-2">
|
||||
<FormLabel>API Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} placeholder="Paste new key to replace" />
|
||||
</FormControl>
|
||||
<FormDescription>Existing key won't be displayed. Leave blank to keep current.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
label={t("apiKey")}
|
||||
type="password"
|
||||
placeholder={t("apiKeyPlaceholder")}
|
||||
description={t("apiKeyDesc")}
|
||||
itemClassName="sm:col-span-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -374,7 +332,7 @@ export function AiProviderSettingsCard({
|
||||
<FormControl>
|
||||
<Checkbox checked={!!field.value} onCheckedChange={(value) => field.onChange(value === true)} />
|
||||
</FormControl>
|
||||
<FormLabel>Set as default</FormLabel>
|
||||
<FormLabel>{t("setDefault")}</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
@@ -384,12 +342,12 @@ export function AiProviderSettingsCard({
|
||||
{testStatus === "testing" ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Testing...
|
||||
{t("testing")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
Test
|
||||
{t("test")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
@@ -397,12 +355,12 @@ export function AiProviderSettingsCard({
|
||||
{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