feat: 剩余页面 useT() + 页脚 SystemConfig 动态渲染

- 学习分析/学习路径/设置/收藏/提示词工坊页面 useT() - 页脚联系邮箱/ICP备案号从 GET /public/config 动态获取 - 翻译键补齐: discover.viewCount/likeCount/postStats
2026-05-22 18:09:15 +08:00
parent 477226ac15
commit 03b500b778
5 changed files with 104 additions and 243 deletions
@@ -4,58 +4,33 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { apiFetch } from '@/lib/auth';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useT } from '@/i18n';

-interface Domain {
-  id: string;
-  name: string;
-  sessionCount: number;
-  mastery: number;
-  lastActive: string | null;
-  weak: boolean;
-}
-
-interface Recommendation {
-  title: string;
-  url: string;
-}
-
-interface Analytics {
-  domains: Domain[];
-  totalSessions: number;
-  weakDomains: string[];
-  recommendations: Recommendation[];
-}
+interface Domain { id: string; name: string; sessionCount: number; mastery: number; lastActive: string | null; weak: boolean }
+interface Recommendation { title: string; url: string }
+interface Analytics { domains: Domain[]; totalSessions: number; weakDomains: string[]; recommendations: Recommendation[] }

 export default function LearningAnalyticsPage() {
+  const t = useT();
  const [data, setData] = useState<Analytics | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

-  useEffect(() => {
-    loadAnalytics();
-  }, []);
+  useEffect(() => { loadAnalytics(); }, []);

  async function loadAnalytics() {
    try {
      const res = await apiFetch('/learning/analytics');
      if (!res.ok) throw new Error('加载失败');
-      const json = await res.json();
-      setData(json);
-    } catch (e: any) {
-      setError(e.message);
-    }
+      setData(await res.json());
+    } catch (e: any) { setError(e.message); }
    setLoading(false);
  }

  if (loading) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <Skeleton className="h-8 w-48 mb-2" />
-      <Skeleton className="h-5 w-72 mb-8" />
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <Skeleton className="h-24 rounded-xl" />
-        <Skeleton className="h-24 rounded-xl" />
-        <Skeleton className="h-24 rounded-xl" />
-      </div>
+      <Skeleton className="h-8 w-48 mb-2" /><Skeleton className="h-5 w-72 mb-8" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">{[1,2,3].map(i => <Skeleton key={i} className="h-24 rounded-xl" />)}</div>
      <Skeleton className="h-64 rounded-xl" />
    </div>
  );
@@ -63,65 +38,55 @@ export default function LearningAnalyticsPage() {
  if (error) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
      <p className="text-red-500 mb-4">{error}</p>
-      <button onClick={loadAnalytics} className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">重试</button>
+      <button onClick={loadAnalytics} className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">{t.common.retry}</button>
    </div>
  );

  const coveredDomains = data?.domains.filter(d => d.sessionCount > 0) || [];
  const weakDomains = data?.domains.filter(d => d.weak) || [];
-  const avgMastery = data?.domains.length
-    ? Math.round(data.domains.reduce((sum, d) => sum + d.mastery, 0) / data.domains.length)
-    : 0;
+  const avgMastery = data?.domains.length ? Math.round(data.domains.reduce((sum, d) => sum + d.mastery, 0) / data.domains.length) : 0;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
-        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
-          &larr; 返回我的
-        </Link>
-        <h1 className="text-3xl font-bold text-foreground">学情分析</h1>
-        <p className="mt-2 text-muted-foreground">基于 AI 沙盒对话分析你的学习情况</p>
+        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">&larr; {t.path.back}</Link>
+        <h1 className="text-3xl font-bold text-foreground">{t.learning.analytics}</h1>
+        <p className="mt-2 text-muted-foreground">{t.learning.analyticsDesc}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div className="bg-card rounded-xl border border-border p-6">
-          <div className="text-sm text-muted-foreground mb-1">AI 对话次数</div>
+          <div className="text-sm text-muted-foreground mb-1">{t.learning.totalSessions}</div>
          <div className="text-2xl font-bold text-foreground">{data?.totalSessions || 0}</div>
        </div>
        <div className="bg-card rounded-xl border border-border p-6">
-          <div className="text-sm text-muted-foreground mb-1">涉及知识领域</div>
+          <div className="text-sm text-muted-foreground mb-1">{t.learning.domainsCovered}</div>
          <div className="text-2xl font-bold text-foreground">{coveredDomains.length}/{data?.domains.length || 0}</div>
        </div>
        <div className="bg-card rounded-xl border border-border p-6">
-          <div className="text-sm text-muted-foreground mb-1">平均掌握度</div>
+          <div className="text-sm text-muted-foreground mb-1">{t.learning.avgMastery}</div>
          <div className="text-2xl font-bold text-foreground">{avgMastery}%</div>
        </div>
      </div>

      {data && data.domains.length > 0 && (
        <div className="bg-card rounded-2xl border border-border p-6 mb-8">
-          <h2 className="text-lg font-semibold text-foreground mb-4">知识领域覆盖</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-4">{t.learning.knowledgeDomains}</h2>
          <div className="space-y-4">
            {data.domains.map(domain => (
              <div key={domain.id}>
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-foreground truncate min-w-0">{domain.name}</span>
-                    {domain.weak && (
-                      <span className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded">待加强</span>
-                    )}
+                    {domain.weak && <span className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded">{t.learning.toStrengthen}</span>}
                  </div>
                  <div className="flex items-center gap-3">
-                    <span className="text-xs text-muted-foreground">{domain.sessionCount} 次对话</span>
-                    <span className={`text-xs font-medium tabular-nums ${
-                      domain.mastery >= 60 ? 'text-green-600' : domain.mastery >= 30 ? 'text-amber-600' : 'text-red-500'
-                    }`}>{domain.mastery}%</span>
+                    <span className="text-xs text-muted-foreground">{t.learning.conversations.replace('{count}', String(domain.sessionCount))}</span>
+                    <span className={`text-xs font-medium tabular-nums ${domain.mastery >= 60 ? 'text-green-600' : domain.mastery >= 30 ? 'text-amber-600' : 'text-red-500'}`}>{domain.mastery}%</span>
                  </div>
                </div>
                <div className="w-full bg-muted rounded-full h-2">
-                  <div className={`h-2 rounded-full transition-all ${
-                    domain.mastery >= 60 ? 'bg-green-500' : domain.mastery >= 30 ? 'bg-amber-500' : 'bg-red-500'
-                  }`} style={{ width: `${domain.mastery}%` }} />
+                  <div className={`h-2 rounded-full transition-all ${domain.mastery >= 60 ? 'bg-green-500' : domain.mastery >= 30 ? 'bg-amber-500' : 'bg-red-500'}`} style={{ width: `${domain.mastery}%` }} />
                </div>
              </div>
            ))}
@@ -131,15 +96,11 @@ export default function LearningAnalyticsPage() {

      {weakDomains.length > 0 && (
        <div className="bg-card rounded-2xl border border-border p-6 mb-8">
-          <h2 className="text-lg font-semibold text-foreground mb-2">薄弱环节</h2>
-          <p className="text-sm text-muted-foreground mb-4">
-            以下领域你较少涉及，建议加强学习：
-          </p>
+          <h2 className="text-lg font-semibold text-foreground mb-2">{t.learning.weakAreas}</h2>
+          <p className="text-sm text-muted-foreground mb-4">{t.learning.weakDesc}</p>
          <div className="flex flex-wrap gap-2">
            {weakDomains.map(d => (
-              <span key={d.id} className="px-3 py-1.5 text-sm bg-amber-50 text-amber-700 rounded-lg border border-amber-200">
-                {d.name}
-              </span>
+              <span key={d.id} className="px-3 py-1.5 text-sm bg-amber-50 text-amber-700 rounded-lg border border-amber-200">{d.name}</span>
            ))}
          </div>
        </div>
@@ -147,18 +108,15 @@ export default function LearningAnalyticsPage() {

      {data && data.recommendations.length > 0 && (
        <div className="bg-card rounded-2xl border border-border p-6">
-          <h2 className="text-lg font-semibold text-foreground mb-2">推荐学习</h2>
-          <p className="text-sm text-muted-foreground mb-4">根据你的薄弱环节推荐以下内容</p>
+          <h2 className="text-lg font-semibold text-foreground mb-2">{t.learning.recommendations}</h2>
+          <p className="text-sm text-muted-foreground mb-4">{t.learning.recDesc}</p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {data.recommendations.map((rec, i) => (
-              <Link key={i} href={rec.url}
-                className="flex items-center gap-3 p-4 rounded-xl border border-border hover:bg-accent transition-colors group">
-                <div className="w-10 h-10 bg-brand-100 rounded-lg flex items-center justify-center text-brand-600 font-bold shrink-0">
-                  {rec.title[0]}
-                </div>
+              <Link key={i} href={rec.url} className="flex items-center gap-3 p-4 rounded-xl border border-border hover:bg-accent transition-colors group">
+                <div className="w-10 h-10 bg-brand-100 rounded-lg flex items-center justify-center text-brand-600 font-bold shrink-0">{rec.title[0]}</div>
                <div>
                  <div className="text-sm font-medium text-foreground group-hover:text-brand-600 transition-colors">{rec.title}</div>
-                  <div className="text-xs text-muted-foreground mt-0.5">点击前往</div>
+                  <div className="text-xs text-muted-foreground mt-0.5">{t.learning.clickToGo}</div>
                </div>
              </Link>
            ))}
@@ -4,75 +4,47 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { apiFetch } from '@/lib/auth';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useT } from '@/i18n';

-interface Task {
-  label: string;
-  action: string;
-  keyword: string;
-}
-
-interface StageLink {
-  title: string;
-  url: string;
-}
-
-interface Stage {
-  id: string;
-  title: string;
-  icon: string;
-  description: string;
-  tasks: Task[];
-  links: StageLink[];
-  completedCount: number;
-  totalTasks: number;
-  progress: number;
-  unlocked: boolean;
-}
+interface Task { label: string; action: string; keyword: string }
+interface StageLink { title: string; url: string }
+interface Stage { id: string; title: string; icon: string; description: string; tasks: Task[]; links: StageLink[]; completedCount: number; totalTasks: number; progress: number; unlocked: boolean }

 export default function LearningPathPage() {
+  const t = useT();
  const [stages, setStages] = useState<Stage[]>([]);
  const [loading, setLoading] = useState(true);

-  useEffect(() => {
-    loadPath();
-  }, []);
+  useEffect(() => { loadPath(); }, []);

  async function loadPath() {
-    try {
-      const res = await apiFetch('/learning/path');
-      if (res.ok) setStages(await res.json());
-    } catch {}
+    try { const res = await apiFetch('/learning/path'); if (res.ok) setStages(await res.json()); } catch {}
    setLoading(false);
  }

  if (loading) return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <Skeleton className="h-8 w-48 mb-2" />
-      <Skeleton className="h-5 w-64 mb-8" />
+      <Skeleton className="h-8 w-48 mb-2" /><Skeleton className="h-5 w-64 mb-8" />
      {[1,2,3,4].map(i => <Skeleton key={i} className="h-40 w-full rounded-xl mb-4" />)}
    </div>
  );

-  const totalProgress = stages.length
-    ? Math.round(stages.reduce((s, st) => s + st.progress, 0) / stages.length)
-    : 0;
+  const totalProgress = stages.length ? Math.round(stages.reduce((s, st) => s + st.progress, 0) / stages.length) : 0;
  const totalCompleted = stages.reduce((s, st) => s + st.completedCount, 0);
  const totalTasks = stages.reduce((s, st) => s + st.totalTasks, 0);

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
-        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
-          &larr; 返回我的
-        </Link>
-        <h1 className="text-3xl font-bold text-foreground">学习路径</h1>
-        <p className="mt-2 text-muted-foreground">从入门到精通，系统掌握 AI 技能</p>
+        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">&larr; {t.path.back}</Link>
+        <h1 className="text-3xl font-bold text-foreground">{t.learning.path}</h1>
+        <p className="mt-2 text-muted-foreground">{t.learning.pathDesc}</p>
      </div>

      <div className="bg-card rounded-2xl border border-border p-6 mb-8">
        <div className="flex items-center justify-between mb-2">
-          <span className="text-sm font-medium text-foreground">总进度</span>
-          <span className="text-sm text-muted-foreground">{totalCompleted}/{totalTasks} 任务</span>
+          <span className="text-sm font-medium text-foreground">{t.path.totalProgress}</span>
+          <span className="text-sm text-muted-foreground">{t.path.taskCount.replace('{completed}', String(totalCompleted)).replace('{total}', String(totalTasks))}</span>
        </div>
        <div className="w-full bg-muted rounded-full h-3">
          <div className="bg-brand-600 h-3 rounded-full transition-all" style={{ width: `${totalProgress}%` }} />
@@ -81,18 +53,14 @@ export default function LearningPathPage() {

      <div className="relative">
        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-muted hidden md:block" />
-
        <div className="space-y-8">
          {stages.map((stage, index) => (
            <div key={stage.id} className="relative md:pl-20">
              <div className="hidden md:flex absolute left-0 top-0 w-16 items-center justify-center">
-                <div className={`w-12 h-12 rounded-full flex items-center justify-center text-xl border-2 z-10 bg-card ${
-                  stage.progress === 100 ? 'border-green-500' : 'border-brand-600'
-                }`}>
+                <div className={`w-12 h-12 rounded-full flex items-center justify-center text-xl border-2 z-10 bg-card ${stage.progress === 100 ? 'border-green-500' : 'border-brand-600'}`}>
                  {stage.progress === 100 ? '✅' : stage.icon}
                </div>
              </div>
-
              <div className="bg-card rounded-2xl border border-border p-6">
                <div className="flex items-start justify-between mb-3">
                  <div>
@@ -102,25 +70,17 @@ export default function LearningPathPage() {
                    </div>
                    <p className="text-sm text-muted-foreground">{stage.description}</p>
                  </div>
-                  <span className="text-xs text-muted-foreground tabular-nums shrink-0">
-                    {stage.completedCount}/{stage.totalTasks}
-                  </span>
+                  <span className="text-xs text-muted-foreground tabular-nums shrink-0">{stage.completedCount}/{stage.totalTasks}</span>
                </div>
-
                <div className="w-full bg-muted rounded-full h-1.5 mb-4">
-                  <div className={`h-1.5 rounded-full transition-all ${
-                    stage.progress === 100 ? 'bg-green-500' : 'bg-brand-600'
-                  }`} style={{ width: `${stage.progress}%` }} />
+                  <div className={`h-1.5 rounded-full transition-all ${stage.progress === 100 ? 'bg-green-500' : 'bg-brand-600'}`} style={{ width: `${stage.progress}%` }} />
                </div>
-
                <div className="space-y-1.5 mb-4">
                  {stage.tasks.map((task, ti) => {
                    const done = ti < stage.completedCount;
                    return (
                      <div key={ti} className="flex items-center gap-2 text-sm">
-                        <span className={`w-4 h-4 rounded-full border flex items-center justify-center shrink-0 ${
-                          done ? 'bg-green-500 border-green-500 text-white' : 'border-muted-foreground'
-                        }`}>
+                        <span className={`w-4 h-4 rounded-full border flex items-center justify-center shrink-0 ${done ? 'bg-green-500 border-green-500 text-white' : 'border-muted-foreground'}`}>
                          {done && <span className="text-[10px]">✓</span>}
                        </span>
                        <span className={done ? 'text-muted-foreground line-through' : 'text-foreground'}>{task.label}</span>
@@ -129,13 +89,9 @@ export default function LearningPathPage() {
                    );
                  })}
                </div>
-
                <div className="flex flex-wrap gap-2">
                  {stage.links.map((link, li) => (
-                    <Link key={li} href={link.url}
-                      className="text-xs px-3 py-1.5 rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors">
-                      {link.title}
-                    </Link>
+                    <Link key={li} href={link.url} className="text-xs px-3 py-1.5 rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors">{link.title}</Link>
                  ))}
                </div>
              </div>
@@ -4,50 +4,30 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { apiFetch } from '../../../lib/auth';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useT } from '@/i18n';

-interface FavoritePrompt {
-  id: number;
-  promptId: number;
-  prompt: {
-    id: number;
-    title: string;
-    description: string;
-    likeCount: number;
-  };
-}
+interface FavoritePrompt { id: number; promptId: number; prompt: { id: number; title: string; description: string; likeCount: number } }

 export default function FavoritesPage() {
+  const t = useT();
  const [items, setItems] = useState<FavoritePrompt[]>([]);
  const [loading, setLoading] = useState(true);

-  useEffect(() => {
-    loadData();
-  }, []);
+  useEffect(() => { loadData(); }, []);

  async function loadData() {
-    try {
-      const res = await apiFetch('/prompts/favorites');
-      const data = await res.json();
-      setItems(data.items || []);
-    } catch (e) { console.error(e) }
+    try { const res = await apiFetch('/prompts/favorites'); const data = await res.json(); setItems(data.items || []); } catch (e) { console.error(e) }
    setLoading(false);
  }

  async function removeFavorite(promptId: number) {
-    try {
-      await apiFetch(`/prompts/${promptId}/favorite`, { method: 'POST' });
-      setItems(items.filter(i => i.promptId !== promptId));
-    } catch (e) { console.error(e) }
+    try { await apiFetch(`/prompts/${promptId}/favorite`, { method: 'POST' }); setItems(items.filter(i => i.promptId !== promptId)); } catch (e) { console.error(e) }
  }

  if (loading) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Skeleton className="h-8 w-48 mb-6" />
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <Skeleton className="h-24 rounded-xl" />
-        <Skeleton className="h-24 rounded-xl" />
-        <Skeleton className="h-24 rounded-xl" />
-      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">{[1,2,3].map(i => <Skeleton key={i} className="h-24 rounded-xl" />)}</div>
      <Skeleton className="h-64 w-full rounded-xl" />
    </div>
  );
@@ -55,34 +35,24 @@ export default function FavoritesPage() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
-        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
-          &larr; 返回我的
-        </Link>
-        <h1 className="text-3xl font-bold text-foreground">我的收藏</h1>
-        <p className="mt-2 text-muted-foreground">收藏的提示词和课程内容</p>
+        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">&larr; {t.favorites.back}</Link>
+        <h1 className="text-3xl font-bold text-foreground">{t.favorites.title}</h1>
+        <p className="mt-2 text-muted-foreground">{t.favorites.desc}</p>
      </div>

      {items.length === 0 ? (
        <div className="text-center py-20">
-          <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center mx-auto mb-4">
-            ❤️
-          </div>
-          <p className="text-muted-foreground mb-4">还没有收藏任何内容</p>
-          <Link href="/prompts" className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">
-            浏览提示词
-          </Link>
+          <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center mx-auto mb-4">❤️</div>
+          <p className="text-muted-foreground mb-4">{t.favorites.empty}</p>
+          <Link href="/prompts" className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">{t.favorites.browsePrompts}</Link>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {items.map(item => (
            <div key={item.id} className="bg-card rounded-xl border border-border p-5 hover:shadow-md transition-shadow">
              <div className="flex items-start justify-between mb-2">
-                <Link href={`/prompts/${item.prompt.id}`} className="font-semibold text-foreground hover:text-brand-600">
-                  {item.prompt.title}
-                </Link>
-                <button onClick={() => removeFavorite(item.promptId)} className="text-muted-foreground hover:text-red-500 text-sm">
-                  ❤️
-                </button>
+                <Link href={`/prompts/${item.prompt.id}`} className="font-semibold text-foreground hover:text-brand-600">{item.prompt.title}</Link>
+                <button onClick={() => removeFavorite(item.promptId)} className="text-muted-foreground hover:text-red-500 text-sm">❤️</button>
              </div>
              <p className="text-sm text-muted-foreground mb-2 line-clamp-2">{item.prompt.description}</p>
              <div className="text-xs text-muted-foreground">❤️ {item.prompt.likeCount}</div>
@@ -4,15 +4,12 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { apiFetch } from '../../../lib/auth';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useT } from '@/i18n';

-interface Profile {
-  nickname: string;
-  email: string;
-  phone: string;
-  avatar: string;
-}
+interface Profile { nickname: string; email: string; phone: string; avatar: string }

 export default function SettingsPage() {
+  const t = useT();
  const router = useRouter();
  const [profile, setProfile] = useState<Profile>({ nickname: '', email: '', phone: '', avatar: '' });
  const [loading, setLoading] = useState(true);
@@ -20,17 +17,13 @@ export default function SettingsPage() {
  const [nickname, setNickname] = useState('');
  const [email, setEmail] = useState('');

-  useEffect(() => {
-    loadProfile();
-  }, []);
+  useEffect(() => { loadProfile(); }, []);

  async function loadProfile() {
    try {
      const res = await apiFetch('/dashboard/profile');
      const data = await res.json();
-      setProfile(data);
-      setNickname(data.nickname || '');
-      setEmail(data.email || '');
+      setProfile(data); setNickname(data.nickname || ''); setEmail(data.email || '');
    } catch (e) { console.error(e) }
    setLoading(false);
  }
@@ -39,16 +32,13 @@ export default function SettingsPage() {
    e.preventDefault();
    setSaving(true);
    try {
-      await apiFetch('/dashboard/profile', {
-        method: 'PUT',
-        body: JSON.stringify({ nickname, email }),
-      });
-      alert('保存成功');
+      await apiFetch('/dashboard/profile', { method: 'PUT', body: JSON.stringify({ nickname, email }) });
+      alert(t.settings.saveSuccess);
    } catch (e) { console.error(e) }
    setSaving(false);
  }

-  async function handleLogout() {
+  function handleLogout() {
    localStorage.removeItem('token');
    localStorage.removeItem('refreshToken');
    router.push('/auth');
@@ -57,11 +47,7 @@ export default function SettingsPage() {
  if (loading) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Skeleton className="h-8 w-48 mb-6" />
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <Skeleton className="h-24 rounded-xl" />
-        <Skeleton className="h-24 rounded-xl" />
-        <Skeleton className="h-24 rounded-xl" />
-      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">{[1,2,3].map(i => <Skeleton key={i} className="h-24 rounded-xl" />)}</div>
      <Skeleton className="h-64 w-full rounded-xl" />
    </div>
  );
@@ -69,52 +55,35 @@ export default function SettingsPage() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
-        <button onClick={() => router.back()} className="text-sm text-muted-foreground hover:text-foreground mb-4 block">&larr; 返回</button>
-        <h1 className="text-3xl font-bold text-foreground">设置</h1>
-        <p className="mt-2 text-muted-foreground">管理你的账号偏好</p>
+        <button onClick={() => router.back()} className="text-sm text-muted-foreground hover:text-foreground mb-4 block">&larr; {t.common.back}</button>
+        <h1 className="text-3xl font-bold text-foreground">{t.settings.title}</h1>
+        <p className="mt-2 text-muted-foreground">{t.settings.desc}</p>
      </div>

      <form onSubmit={handleSave} className="bg-card rounded-2xl border border-border p-6 space-y-6">
-        <h2 className="text-lg font-semibold text-foreground">个人信息</h2>
-        
+        <h2 className="text-lg font-semibold text-foreground">{t.settings.personalInfo}</h2>
        <div>
-          <label className="block text-sm font-medium text-foreground mb-1.5">昵称</label>
-          <input
-            type="text"
-            value={nickname}
-            onChange={e => setNickname(e.target.value)}
-            className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-          />
+          <label className="block text-sm font-medium text-foreground mb-1.5">{t.settings.nicknameLabel}</label>
+          <input type="text" value={nickname} onChange={e => setNickname(e.target.value)}
+            className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
        </div>
-
        <div>
-          <label className="block text-sm font-medium text-foreground mb-1.5">邮箱</label>
-          <input
-            type="email"
-            value={email}
-            onChange={e => setEmail(e.target.value)}
-            className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-          />
+          <label className="block text-sm font-medium text-foreground mb-1.5">{t.settings.emailLabel}</label>
+          <input type="email" value={email} onChange={e => setEmail(e.target.value)}
+            className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
        </div>
-
        <div className="flex gap-3">
-          <button
-            type="submit"
-            disabled={saving}
-            className="px-6 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
-          >
-            {saving ? '保存中...' : '保存修改'}
+          <button type="submit" disabled={saving}
+            className="px-6 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 disabled:opacity-50">
+            {saving ? t.common.loading : t.settings.saveChanges}
          </button>
        </div>
      </form>

      <div className="bg-card rounded-2xl border border-border p-6 mt-6">
-        <h2 className="text-lg font-semibold text-foreground mb-4">账号安全</h2>
-        <button
-          onClick={handleLogout}
-          className="px-6 py-2.5 border border-red-200 text-red-600 rounded-xl text-sm font-medium hover:bg-red-50"
-        >
-          退出登录
+        <h2 className="text-lg font-semibold text-foreground mb-4">{t.settings.accountSecurity}</h2>
+        <button onClick={handleLogout} className="px-6 py-2.5 border border-red-200 text-red-600 rounded-xl text-sm font-medium hover:bg-red-50">
+          {t.common.logout}
        </button>
      </div>
    </div>
@@ -1,8 +1,20 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useT } from '@/i18n';
+import { API_BASE } from '@/lib/config';

 export function Footer() {
  const t = useT();
+  const [config, setConfig] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    fetch(`${API_BASE}/public/config`)
+      .then(r => r.json()).then(data => setConfig(data || {}))
+      .catch(() => {});
+  }, []);
+
  return (
    <footer className="border-t border-border bg-muted/30">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
@@ -33,7 +45,7 @@ export function Footer() {
          <div>
            <h4 className="text-sm font-semibold mb-3">{t.footer.contact}</h4>
            <ul className="space-y-2.5">
-              <li className="text-sm text-muted-foreground">邮箱：contact@yuzhiran.com</li>
+              <li className="text-sm text-muted-foreground">{config.contact_email ? `邮箱：${config.contact_email}` : '邮箱：contact@yuzhiran.com'}</li>
              <li className="text-sm text-muted-foreground">北京宇之然科技中心</li>
            </ul>
          </div>
@@ -43,11 +55,7 @@ export function Footer() {
            <p>{t.footer.copyright.replace('{year}', String(new Date().getFullYear()))}</p>
            <p>
              <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
-                ICP 备案号：京ICP备XXXXXXXX号
-              </a>
-              <span className="mx-2">|</span>
-              <a href="https://www.beian.gov.cn/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
-                京公网安备 XXXXXXXXXXXX号
+                {config.icp_number ? `ICP 备案号：${config.icp_number}` : 'ICP 备案号：京ICP备XXXXXXXX号'}
              </a>
            </p>
          </div>