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