5d42495480
- 新增 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
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
"use client"
|
|
import { Monitor, Moon, Sun } from "lucide-react"
|
|
import { useTheme } from "next-themes"
|
|
import { useTranslations } from "next-intl"
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import { Label } from "@/shared/components/ui/label"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/shared/components/ui/select"
|
|
|
|
type ThemeChoice = "system" | "light" | "dark"
|
|
|
|
export function ThemePreferencesCard() {
|
|
const t = useTranslations("settings.appearance.theme")
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
const value: ThemeChoice = theme === "light" || theme === "dark" || theme === "system" ? theme : "system"
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("title")}</CardTitle>
|
|
<CardDescription>{t("description")}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 sm:max-w-md">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="theme">{t("label")}</Label>
|
|
<Select value={value} onValueChange={(v) => setTheme(v)}>
|
|
<SelectTrigger id="theme" suppressHydrationWarning>
|
|
<SelectValue placeholder={t("title")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="system">
|
|
<div className="flex items-center gap-2">
|
|
<Monitor className="h-4 w-4 text-muted-foreground" />
|
|
{t("system")}
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="light">
|
|
<div className="flex items-center gap-2">
|
|
<Sun className="h-4 w-4 text-muted-foreground" />
|
|
{t("light")}
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="dark">
|
|
<div className="flex items-center gap-2">
|
|
<Moon className="h-4 w-4 text-muted-foreground" />
|
|
{t("dark")}
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|