feat: add student learning report dashboard

2026-06-30 00:30:38 +08:00
parent 3905e3cb77
commit 4a13715f29
8 changed files with 440 additions and 19 deletions
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@
 - 题库导出已完成服务端结构化 payload、PDF/Word 二进制 worker、每日一练基础导出和每日一练 ZIP 图片素材包；后续还要补更精细试卷模板、多模板排版和导出操作台体验。
 - 优惠券复杂规则和核销报表已可联调，包含状态启停、活动分组、最低订单金额、优惠封顶、单用户限次、首单限制、适用套餐/地区、核销明细和活动报表；Taro 租户营销中心已接优惠券规则表单、筛选、核销明细和报表第一版。
 - 勋章管理/手动发放已可联调；自动发放规则、积分活动联动、分佣真实打款 provider、发票、批量凭证上传、CRM 富卡片模板、失败告警、死信运营台、销售转化看板、公共题库版本通知和冲突处理操作台还没完成。
- `apps/taro` 已建立 Taro 4 React 跨端前端地基，包含 H5 学生端、租户后台、平台后台三套构建入口、租户解析、统一 API client 和 Supabase Auth client 初始化；学生端第一批页面已接入登录、首页、题库、练习、背单词、知识手册、分数线、AI 择校推荐、资料和个人中心，已新增 `RichContent` 安全渲染组件用于题干、选项、解析、知识手册和逐题复盘，已升级背单词为今日计划/单元学习/收藏练习、卡片翻转、发音、美/英音切换和本地位置恢复第一版，并补齐资料预览/下载的短签名、水印 traceId 和强制水印容器第一版；租户后台第一批页面已接入工作台、数据看板、学生/班级、题库内容、营销中心、财务运营和租户设置，营销中心已接 CRM、分佣结算、优惠券规则/核销报表，财务运营已接退款状态机、官方账单任务、对账异常、差错工单和调整凭证第一版，设置页已接主题模板、草稿预览/发布、角色模板和成员绑定第一版；平台后台已接入工作台、租户管理、账务中心、公共题库授权，以及创建租户、状态变更、订阅、账单、收款、用量和题库授权第一版写操作。
+- `apps/taro` 已建立 Taro 4 React 跨端前端地基，包含 H5 学生端、租户后台、平台后台三套构建入口、租户解析、统一 API client 和 Supabase Auth client 初始化；学生端第一批页面已接入登录、首页、题库、练习、背单词、知识手册、分数线、AI 择校推荐、资料和个人中心，已新增 `RichContent` 安全渲染组件用于题干、选项、解析、知识手册和逐题复盘，已升级背单词为今日计划/单元学习/收藏练习、卡片翻转、发音、美/英音切换和本地位置恢复第一版，资料页已补齐预览/下载的短签名、水印 traceId 和强制水印容器第一版，个人中心已接学习报告、14 天趋势、题型表现、最近练习和 7 日答题榜当前排名第一版；租户后台第一批页面已接入工作台、数据看板、学生/班级、题库内容、营销中心、财务运营和租户设置，营销中心已接 CRM、分佣结算、优惠券规则/核销报表，财务运营已接退款状态机、官方账单任务、对账异常、差错工单和调整凭证第一版，设置页已接主题模板、草稿预览/发布、角色模板和成员绑定第一版；平台后台已接入工作台、租户管理、账务中心、公共题库授权，以及创建租户、状态变更、订阅、账单、收款、用量和题库授权第一版写操作。
 - 根目录已清理为新 Supabase SaaS monorepo 编排层；旧 PocketBase/React 项目和旧构建产物仅保留在 `参考/` 目录作为迁移参考，不进入 Git 提交。

 更完整的进度看这些文档：
@@ -346,7 +346,7 @@ git diff --check
 优先继续补：

 1. 真实云端 Auth/JWKS 回归、RLS 深测和生产环境配置验收。
-2. 继续补 Taro 前端：学生端真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词更细统计、小程序支付与分享，租户后台更细导入体验/数据范围 UI/主题素材库/财务复核细节，平台后台租户详情/审计/自动计费增强，小程序兼容验证。
+2. 继续补 Taro 前端：学生端真正 KaTeX/小程序公式方案、私有题图签名资源映射、个人中心任务系统、背单词更细统计、小程序支付与分享，租户后台更细导入体验/数据范围 UI/主题素材库/财务复核细节，平台后台租户详情/审计/自动计费增强，小程序兼容验证。
 3. 对象存储真实 AV/内容安全扫描服务联调、CDN 防盗链、转码/CDN 级水印和生命周期策略。
 4. 题库导出模板精排、导出操作台、真实数据 dry-run、导入字段映射 UI 和复检结果操作台。
 5. 真实 OAuth/短信/支付生产账号联调、真实生产账单抽样验收、真实打款 provider、发票、公共题库版本通知/冲突处理操作台、积分活动深化，以及排行榜防刷/预聚合。
--- a/apps/taro/src/pages/student/profile/index.tsx
+++ b/apps/taro/src/pages/student/profile/index.tsx
@@ -3,17 +3,86 @@ import Taro from '@tarojs/taro';
 import { Button, Input, Text, View } from '@tarojs/components';
 import { logout } from '@/services/auth';
 import { checkActivationCode, loadEntitlements, loadOrders, loadSvipPlans, redeemActivationCode, type OrderItem, type SvipPlan } from '@/services/commerce';
-import { loadLeaderboard } from '@/services/learning';
+import {
+  loadLeaderboard,
+  loadLearningStats,
+  loadLearningTrend,
+  loadPracticeHistory,
+  type LeaderboardItem,
+  type LearningStats,
+  type LearningTrendItem,
+  type PracticeHistoryItem,
+} from '@/services/learning';
 import { checkIn, loadBadges, loadExamCountdowns, loadProfile, type StudentProfile } from '@/services/profile';
 import '../student.css';

+function percent(value?: number | null) {
+  return `${Math.round((value || 0) * 100)}%`;
+}
+
+function shortDate(value?: string | null) {
+  if (!value) return '';
+  return value.slice(5, 10);
+}
+
+function dateText(value?: string | null) {
+  if (!value) return '暂无记录';
+  return value.slice(0, 10);
+}
+
+function practiceTitle(item: PracticeHistoryItem) {
+  return item.blueprintName || item.collectionName || item.contentNodeName || item.entryName || modeLabel(item.mode);
+}
+
+function modeLabel(mode?: string | null) {
+  const normalized = String(mode || '');
+  if (normalized === 'mock_exam') return '全真模拟';
+  if (normalized === 'random') return '随机练习';
+  if (normalized === 'wrong_review') return '错题复习';
+  if (normalized === 'favorites') return '收藏练习';
+  return '顺序练习';
+}
+
+function maxTrendAnswers(items: LearningTrendItem[]) {
+  return Math.max(1, ...items.map(item => item.answeredCount || 0));
+}
+
+function trendBucket(value: number, maxValue: number) {
+  if (value <= 0) return 'h-bucket-0';
+  const ratio = maxValue ? value / maxValue : 0;
+  const bucket = Math.max(1, Math.min(12, Math.ceil(ratio * 12)));
+  return `h-bucket-${bucket}`;
+}
+
+function progressBucket(value: number) {
+  const ratio = Math.max(0, Math.min(1, value || 0));
+  const bucket = Math.max(0, Math.min(10, Math.round(ratio * 10)));
+  return `w-bucket-${bucket}`;
+}
+
+function sessionStatusLabel(status?: string | null) {
+  if (status === 'active') return '进行中';
+  if (status === 'expired') return '已过期';
+  return '已完成';
+}
+
+function sessionStatusClass(status?: string | null) {
+  if (status === 'active') return 'warning';
+  if (status === 'expired') return 'danger';
+  return '';
+}
+
 export default function StudentProfilePage() {
  const [profile, setProfile] = useState<StudentProfile | null>(null);
  const [plans, setPlans] = useState<SvipPlan[]>([]);
  const [orders, setOrders] = useState<OrderItem[]>([]);
  const [badges, setBadges] = useState<Record<string, unknown>[]>([]);
  const [countdowns, setCountdowns] = useState<Record<string, unknown>[]>([]);
-  const [leaderboard, setLeaderboard] = useState<Record<string, unknown>[]>([]);
+  const [leaderboard, setLeaderboard] = useState<LeaderboardItem[]>([]);
+  const [currentRank, setCurrentRank] = useState<LeaderboardItem | null>(null);
+  const [learningStats, setLearningStats] = useState<LearningStats | null>(null);
+  const [learningTrend, setLearningTrend] = useState<LearningTrendItem[]>([]);
+  const [practiceHistory, setPracticeHistory] = useState<PracticeHistoryItem[]>([]);
  const [activationCode, setActivationCode] = useState('');
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
@@ -25,15 +94,32 @@ export default function StudentProfilePage() {
      loadOrders().catch(() => ({ items: [] })),
      loadBadges().catch(() => ({ items: [] })),
      loadExamCountdowns().catch(() => ({ items: [] })),
-      loadLeaderboard('questions').catch(() => ({ items: [] })),
+      loadLeaderboard('questions').catch(() => ({ items: [], currentUser: null })),
+      loadLearningStats(30).catch(() => ({ item: undefined })),
+      loadLearningTrend(14).catch(() => ({ items: [] })),
+      loadPracticeHistory({ limit: 6 }).catch(() => ({ items: [] })),
      loadEntitlements().catch(() => ({ summary: {} })),
-    ]).then(([profilePayload, planPayload, orderPayload, badgePayload, countdownPayload, leaderboardPayload]) => {
+    ]).then(([
+      profilePayload,
+      planPayload,
+      orderPayload,
+      badgePayload,
+      countdownPayload,
+      leaderboardPayload,
+      statsPayload,
+      trendPayload,
+      historyPayload,
+    ]) => {
      setProfile(profilePayload.item || null);
      setPlans(planPayload.items || []);
      setOrders(orderPayload.items || []);
      setBadges(badgePayload.items || []);
      setCountdowns(countdownPayload.items || []);
      setLeaderboard(leaderboardPayload.items || []);
+      setCurrentRank(leaderboardPayload.currentUser || null);
+      setLearningStats(statsPayload.item || null);
+      setLearningTrend(trendPayload.items || []);
+      setPracticeHistory(historyPayload.items || []);
    }).catch(nextError => setError(nextError instanceof Error ? nextError.message : '个人中心加载失败'));
  }

@@ -68,6 +154,14 @@ export default function StudentProfilePage() {
    Taro.redirectTo({ url: '/pages/student/login/index' });
  }

+  const maxAnswers = maxTrendAnswers(learningTrend);
+  const answerStats = learningStats?.answers;
+  const reportStats = learningStats?.reports;
+  const wrongBook = learningStats?.wrongBook;
+  const favoriteStats = learningStats?.favorites;
+  const questionTypes = learningStats?.questionTypes || [];
+  const bestPlan = plans[0];
+
  return (
    <View className='student-page'>
      <View className='student-topbar'>
@@ -80,10 +174,104 @@ export default function StudentProfilePage() {
      </View>

      <View className='grid-two'>
-        <View className='metric'><Text className='metric-value'>{String((profile?.stats?.answers as Record<string, unknown> | undefined)?.totalAnswered ?? 0)}</Text><Text className='metric-label'>累计答题</Text></View>
+        <View className='metric'><Text className='metric-value'>{String(answerStats?.totalAnswered ?? (profile?.stats?.answers as Record<string, unknown> | undefined)?.totalAnswered ?? 0)}</Text><Text className='metric-label'>累计答题</Text></View>
        <View className='metric'><Text className='metric-value'>{String((profile?.stats?.vocabulary as Record<string, unknown> | undefined)?.masteredWords ?? 0)}</Text><Text className='metric-label'>掌握单词</Text></View>
      </View>

+      <View className='section-block'>
+        <Text className='section-heading'>学习报告</Text>
+        <View className='report-panel learning-report-panel'>
+          <View className='grid-two'>
+            <View className='metric compact-metric'>
+              <Text className='metric-value'>{percent(answerStats?.accuracy)}</Text>
+              <Text className='metric-label'>累计正确率</Text>
+            </View>
+            <View className='metric compact-metric'>
+              <Text className='metric-value'>{String(answerStats?.todayAnswered ?? 0)}</Text>
+              <Text className='metric-label'>今日答题</Text>
+            </View>
+            <View className='metric compact-metric'>
+              <Text className='metric-value'>{String(wrongBook?.unresolvedWrong ?? 0)}</Text>
+              <Text className='metric-label'>待解决错题</Text>
+            </View>
+            <View className='metric compact-metric'>
+              <Text className='metric-value'>{String(reportStats?.bestScore ?? 0)}</Text>
+              <Text className='metric-label'>模考/练习最高分</Text>
+            </View>
+          </View>
+          <Text className='row-meta report-summary-line'>
+            近 {String(learningStats?.windowDays || 30)} 天题型统计 · 最近答题 {dateText(answerStats?.latestAnsweredAt)} · 已完成报告 {String(reportStats?.reportCount || 0)} 份
+          </Text>
+        </View>
+      </View>
+
+      <View className='section-block'>
+        <Text className='section-heading'>14 天趋势</Text>
+        {learningTrend.length ? (
+          <View className='trend-chart'>
+            {learningTrend.map(item => {
+              return (
+                <View className='trend-column' key={item.date}>
+                  <Text className='trend-value'>{String(item.answeredCount || 0)}</Text>
+                  <View className='trend-bar-track'>
+                    <View className={`trend-bar-fill ${trendBucket(item.answeredCount || 0, maxAnswers)}`} />
+                  </View>
+                  <Text className='trend-label'>{shortDate(item.date)}</Text>
+                </View>
+              );
+            })}
+          </View>
+        ) : <View className='empty-state'>暂无趋势数据，完成练习后会自动生成。</View>}
+      </View>
+
+      <View className='section-block'>
+        <Text className='section-heading'>题型表现</Text>
+        {questionTypes.length ? (
+          <View className='list-stack'>
+            {questionTypes.slice(0, 6).map(item => (
+              <View className='list-row' key={item.questionType}>
+                <View className='split-row'>
+                  <Text className='row-main'>{item.typeLabel || item.questionType}</Text>
+                  <Text className='status-badge'>{percent(item.accuracy)}</Text>
+                </View>
+                <Text className='row-meta'>已答 {String(item.answeredCount)} · 正确 {String(item.correctCount)} · 错误 {String(item.wrongCount)}</Text>
+                <View className='progress-track'>
+                  <View className={`progress-fill ${progressBucket(item.accuracy)}`} />
+                </View>
+              </View>
+            ))}
+          </View>
+        ) : <View className='empty-state'>暂无题型统计，开始刷题后这里会显示强弱项。</View>}
+      </View>
+
+      <View className='section-block'>
+        <Text className='section-heading'>最近练习</Text>
+        {practiceHistory.length ? (
+          <View className='list-stack'>
+            {practiceHistory.map(item => (
+              <View className='list-row' key={item.id}>
+                <View className='split-row'>
+                  <Text className='row-main'>{practiceTitle(item)}</Text>
+                  <Text className={`status-badge ${sessionStatusClass(item.status)}`}>{sessionStatusLabel(item.status)}</Text>
+                </View>
+                <Text className='row-meta'>
+                  {modeLabel(item.mode)} · 已答 {String(item.answeredCount || 0)} / {String(item.questionCount || 0)} · 正确率 {percent(item.accuracy)}
+                </Text>
+                <Text className='row-meta'>开始 {dateText(item.startedAt)}{item.submittedAt ? ` · 交卷 ${dateText(item.submittedAt)}` : ''}</Text>
+                <View className='toolbar compact-toolbar'>
+                  {item.status === 'active' ? (
+                    <Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/practice/index?practiceSessionId=${item.id}` })}>继续</Button>
+                  ) : null}
+                  {item.reportId ? (
+                    <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/reports/index?practiceSessionId=${item.id}` })}>报告</Button>
+                  ) : null}
+                </View>
+              </View>
+            ))}
+          </View>
+        ) : <View className='empty-state'>还没有练习历史，可以先从题库入口开始。</View>}
+      </View>
+
      <View className='section-block'>
        <Text className='section-heading'>目标与考试</Text>
        <View className='list-stack'>
@@ -117,7 +305,7 @@ export default function StudentProfilePage() {
          ))}
        </View>
        <View className='toolbar wrap'>
-          <Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/checkout/index${profile?.target?.regionId ? `?regionId=${encodeURIComponent(profile.target.regionId)}` : ''}` })}>开通会员</Button>
+          <Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/checkout/index${bestPlan?.id ? `?planId=${encodeURIComponent(bestPlan.id)}` : profile?.target?.regionId ? `?regionId=${encodeURIComponent(profile.target.regionId)}` : ''}` })}>开通会员</Button>
        </View>
      </View>

@@ -142,14 +330,16 @@ export default function StudentProfilePage() {
      </View>

      <View className='section-block'>
-        <Text className='section-heading'>运营数据</Text>
+        <Text className='section-heading'>成长数据</Text>
        <View className='toolbar'>
          <Button className='primary-button' onClick={handleCheckIn}>签到</Button>
          <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/catalog/index' })}>刷题</Button>
        </View>
        <View className='grid-two'>
          <View className='metric'><Text className='metric-value'>{String(badges.length)}</Text><Text className='metric-label'>勋章</Text></View>
-          <View className='metric'><Text className='metric-value'>{String(leaderboard.length)}</Text><Text className='metric-label'>排行榜样本</Text></View>
+          <View className='metric'><Text className='metric-value'>{currentRank ? `第${String(currentRank.rank)}` : String(leaderboard.length)}</Text><Text className='metric-label'>{currentRank ? `7 日答题榜 · ${String(currentRank.value)} 题` : '排行榜样本'}</Text></View>
+          <View className='metric'><Text className='metric-value'>{String(favoriteStats?.favoriteQuestions ?? 0)}</Text><Text className='metric-label'>收藏题目</Text></View>
+          <View className='metric'><Text className='metric-value'>{percent(reportStats?.avgAccuracy)}</Text><Text className='metric-label'>报告平均正确率</Text></View>
        </View>
      </View>

--- a/apps/taro/src/pages/student/student.css
+++ b/apps/taro/src/pages/student/student.css
@@ -121,6 +121,10 @@
  background: #eff6ff;
 }

+.learning-report-panel {
+  background: #f8fbff;
+}
+
 .list-stack {
  display: flex;
  flex-direction: column;
@@ -139,6 +143,18 @@
  background: #eff6ff;
 }

+.split-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.split-row .row-main {
+  flex: 1;
+  min-width: 0;
+}
+
 .composite-subquestion {
  margin-top: 0;
 }
@@ -219,6 +235,10 @@
  background: #fff;
 }

+.compact-metric {
+  padding: 18px;
+}
+
 .metric-value {
  display: block;
  color: #0f172a;
@@ -233,6 +253,10 @@
  font-size: 22px;
 }

+.report-summary-line {
+  margin-top: 18px;
+}
+
 .empty-state {
  padding: 38px 26px;
  border: 1px dashed #cbd5e1;
@@ -308,6 +332,19 @@
  margin-top: 18px;
 }

+.compact-toolbar {
+  margin-top: 14px;
+  padding-bottom: 0;
+}
+
+.compact-toolbar .primary-button,
+.compact-toolbar .secondary-button {
+  min-width: 104px;
+  height: 56px;
+  font-size: 22px;
+  line-height: 56px;
+}
+
 .amount-row {
  display: flex;
  align-items: center;
@@ -337,11 +374,107 @@
  font-weight: 750;
 }

+.status-badge.warning {
+  background: #fffbeb;
+  color: #92400e;
+}
+
 .status-badge.danger {
  background: #fff1f2;
  color: #be123c;
 }

+.trend-chart {
+  display: grid;
+  grid-template-columns: repeat(14, minmax(0, 1fr));
+  gap: 10px;
+  align-items: end;
+  padding: 22px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.trend-column {
+  min-width: 0;
+  text-align: center;
+}
+
+.trend-value {
+  display: block;
+  min-height: 28px;
+  color: #334155;
+  font-size: 20px;
+  font-weight: 760;
+  line-height: 1.2;
+}
+
+.trend-bar-track {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 136px;
+  margin-top: 8px;
+  border-radius: 8px;
+  background: #f1f5f9;
+}
+
+.trend-bar-fill {
+  width: 100%;
+  max-width: 28px;
+  border-radius: 8px 8px 0 0;
+  background: #2563eb;
+}
+
+.trend-bar-fill.h-bucket-0 { height: 0; }
+.trend-bar-fill.h-bucket-1 { height: 10px; }
+.trend-bar-fill.h-bucket-2 { height: 20px; }
+.trend-bar-fill.h-bucket-3 { height: 30px; }
+.trend-bar-fill.h-bucket-4 { height: 40px; }
+.trend-bar-fill.h-bucket-5 { height: 50px; }
+.trend-bar-fill.h-bucket-6 { height: 62px; }
+.trend-bar-fill.h-bucket-7 { height: 74px; }
+.trend-bar-fill.h-bucket-8 { height: 86px; }
+.trend-bar-fill.h-bucket-9 { height: 98px; }
+.trend-bar-fill.h-bucket-10 { height: 110px; }
+.trend-bar-fill.h-bucket-11 { height: 122px; }
+.trend-bar-fill.h-bucket-12 { height: 132px; }
+
+.trend-label {
+  display: block;
+  margin-top: 8px;
+  color: #64748b;
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.progress-track {
+  width: 100%;
+  height: 12px;
+  margin-top: 16px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e2e8f0;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: #10b981;
+}
+
+.progress-fill.w-bucket-0 { width: 0; }
+.progress-fill.w-bucket-1 { width: 10%; }
+.progress-fill.w-bucket-2 { width: 20%; }
+.progress-fill.w-bucket-3 { width: 30%; }
+.progress-fill.w-bucket-4 { width: 40%; }
+.progress-fill.w-bucket-5 { width: 50%; }
+.progress-fill.w-bucket-6 { width: 60%; }
+.progress-fill.w-bucket-7 { width: 70%; }
+.progress-fill.w-bucket-8 { width: 80%; }
+.progress-fill.w-bucket-9 { width: 90%; }
+.progress-fill.w-bucket-10 { width: 100%; }
+
 .handbook-entry-body {
  margin-top: 14px;
 }
--- a/apps/taro/src/services/learning.ts
+++ b/apps/taro/src/services/learning.ts
@@ -119,19 +119,24 @@ export interface PracticeReport {
 export interface PracticeHistoryItem {
  id: string;
  mode: string;
+  blueprintName?: string | null;
  collectionName?: string | null;
  entryName?: string | null;
  contentNodeName?: string | null;
  questionCount?: number;
+  durationMinutes?: number | null;
+  accessMode?: string | null;
  answeredCount?: number;
  correctCount?: number;
  wrongCount?: number;
  status?: string;
  reportId?: string | null;
  score?: number | null;
+  reportTotalScore?: number | null;
  accuracy?: number | null;
  startedAt?: string;
  finishedAt?: string | null;
+  submittedAt?: string | null;
 }

 export interface WrongQuestionReviewItem {
@@ -165,6 +170,86 @@ export interface VocabularyWord {
  note?: string | null;
 }

+export interface LearningStats {
+  windowDays: number;
+  answers: {
+    totalAnswered: number;
+    correctCount: number;
+    wrongCount: number;
+    todayAnswered: number;
+    accuracy: number;
+    latestAnsweredAt?: string | null;
+  };
+  sessions: {
+    totalSessions: number;
+    activeSessions: number;
+    finishedSessions: number;
+    latestStartedAt?: string | null;
+  };
+  reports: {
+    reportCount: number;
+    avgAccuracy: number;
+    bestScore: number;
+    latestSubmittedAt?: string | null;
+  };
+  wrongBook: {
+    unresolvedWrong: number;
+    resolvedWrong: number;
+    totalWrongBook: number;
+  };
+  favorites: {
+    favoriteQuestions: number;
+  };
+  questionTypes: LearningQuestionTypeStats[];
+}
+
+export interface LearningQuestionTypeStats {
+  questionType: string;
+  typeLabel?: string | null;
+  answeredCount: number;
+  correctCount: number;
+  wrongCount: number;
+  accuracy: number;
+}
+
+export interface LearningTrendItem {
+  date: string;
+  answeredCount: number;
+  correctCount: number;
+  wrongCount: number;
+  accuracy: number;
+  sessionCount: number;
+  reportCount: number;
+  score: number;
+  totalScore: number;
+}
+
+export interface LeaderboardItem {
+  rank: number;
+  userId: string;
+  displayName: string;
+  avatarUrl?: string | null;
+  primaryRole?: string;
+  regionId?: string | null;
+  regionName?: string | null;
+  classIds?: string[];
+  classNames?: string[];
+  value: number;
+  secondaryValue?: number | null;
+  latestAt?: string | null;
+  isCurrentUser?: boolean;
+}
+
+export interface LeaderboardPayload {
+  metric: 'questions' | 'score' | 'vocabulary' | 'mock_exam';
+  label: string;
+  unit: string;
+  period: 'all' | '7d' | '30d';
+  items?: LeaderboardItem[];
+  currentUser?: LeaderboardItem | null;
+  generatedAt?: string;
+}
+
 export async function createPracticeSession(body: {
  blueprintId?: string;
  collectionId?: string;
@@ -252,16 +337,20 @@ export async function loadFavoriteQuestions(limit = 30) {
  return apiRequest<{ items?: QuestionItem[] }>('/api/learning/favorites/questions', { query: { limit } });
 }

-export async function loadLearningStats() {
-  return apiRequest<{ item?: Record<string, unknown> }>('/api/learning/stats');
+export async function loadLearningStats(days = 30) {
+  return apiRequest<{ item?: LearningStats }>('/api/learning/stats', { query: { days } });
 }

 export async function loadLeaderboard(metric: 'questions' | 'score' | 'vocabulary' | 'mock_exam' = 'questions') {
-  return apiRequest<{ items?: Record<string, unknown>[]; currentUserRank?: unknown }>('/api/learning/leaderboard', {
+  return apiRequest<LeaderboardPayload>('/api/learning/leaderboard', {
    query: { metric, period: '7d', scope: 'tenant' },
  });
 }

+export async function loadLearningTrend(days = 14) {
+  return apiRequest<{ items?: LearningTrendItem[] }>('/api/learning/trend', { query: { days } });
+}
+
 export async function loadVocabularyReviewPlan(unitId?: string) {
  return apiRequest<{ item?: { words?: VocabularyWord[]; dueCount?: number; newCount?: number; totalPlanned?: number } }>(
    '/api/learning/vocabulary/review-plan',
--- a/docs/refactor/frontend-handoff-index.md
+++ b/docs/refactor/frontend-handoff-index.md
@@ -76,9 +76,9 @@
 | 知识手册 | `apps/taro/src/pages/student/handbook/index.tsx` | `handbook-subjects`、`handbook-chapters`、`handbook-entries`；已接 RichContent 阅读渲染第一版 |
 | 分数线 | `apps/taro/src/pages/student/scoreline/index.tsx` | `scoreline/records` |
 | 资料 | `apps/taro/src/pages/student/assets/index.tsx` | `assets`、`assets/preview`、`assets/download`；已接短期签名、过期信息、可见水印覆盖、traceId 展示和强制水印资源外部预览限制 |
-| 个人中心 | `apps/taro/src/pages/student/profile/index.tsx` | `profile/me`、`check-in`、`badges`、`exam-countdowns`、`svip-plans`、`orders`、`entitlements`、`activation-codes`、`leaderboard` |
+| 个人中心 | `apps/taro/src/pages/student/profile/index.tsx` | `profile/me`、`check-in`、`badges`、`exam-countdowns`、`svip-plans`、`orders`、`entitlements`、`activation-codes`、`leaderboard`、`learning/stats`、`learning/trend`、`practice-sessions/history` |

-当前页面主要用于打通接口和路由。学生端第一版学习闭环已经覆盖“选地区 -> 进题库 -> 创建 session -> 答题卡/答题/主观题自评/复合题多小题/收藏/反馈/视频 -> 交卷报告逐题复盘 -> 错题/收藏复习”，背单词已经覆盖“单元 -> 今日计划/全单元/收藏练习 -> 卡片翻转 -> 发音 -> 认识/再记上报 -> 本地恢复”，资料页已经覆盖“列表 -> 申请预览/下载短签名 -> 展示水印 traceId -> H5 水印容器预览或确认下载”，会员闭环已经覆盖“选套餐 -> 领优惠券 -> 下单 -> 创建支付参数 -> 状态轮询 -> 订单详情/售后入口”。`apps/taro/src/components/RichContent.tsx` 是学生端题干、选项、解析和知识手册的统一安全渲染组件：它只支持受控 Markdown 图片、基础表格、粗体、代码和公式占位，不执行任意 HTML/JS，也会拒绝 `javascript:`、`data:` 等危险图片地址。后续 UI 需要继续按旧题库视觉和 Taro H5/小程序限制优化，并重点补真正 KaTeX/小程序公式方案、私有题图签名资源映射、小程序分享/支付容器体验。
+当前页面主要用于打通接口和路由。学生端第一版学习闭环已经覆盖“选地区 -> 进题库 -> 创建 session -> 答题卡/答题/主观题自评/复合题多小题/收藏/反馈/视频 -> 交卷报告逐题复盘 -> 错题/收藏复习”，背单词已经覆盖“单元 -> 今日计划/全单元/收藏练习 -> 卡片翻转 -> 发音 -> 认识/再记上报 -> 本地恢复”，资料页已经覆盖“列表 -> 申请预览/下载短签名 -> 展示水印 traceId -> H5 水印容器预览或确认下载”，个人中心已经覆盖“基础资料 -> 学习报告 -> 14 天趋势 -> 题型表现 -> 最近练习 -> 排名/勋章/签到 -> 会员/订单/激活码”，会员闭环已经覆盖“选套餐 -> 领优惠券 -> 下单 -> 创建支付参数 -> 状态轮询 -> 订单详情/售后入口”。`apps/taro/src/components/RichContent.tsx` 是学生端题干、选项、解析和知识手册的统一安全渲染组件：它只支持受控 Markdown 图片、基础表格、粗体、代码和公式占位，不执行任意 HTML/JS，也会拒绝 `javascript:`、`data:` 等危险图片地址。后续 UI 需要继续按旧题库视觉和 Taro H5/小程序限制优化，并重点补真正 KaTeX/小程序公式方案、私有题图签名资源映射、小程序分享/支付容器体验。

 ## 已落地的 Taro 租户后台页面

--- a/docs/refactor/implementation-status.md
+++ b/docs/refactor/implementation-status.md
@@ -33,7 +33,7 @@
 | 分数线 | 已建院校、专业、字段、记录表 | 已支持导入映射 | 字段、院校、专业、记录、趋势、年份、租户后台维护 API、JSON 预览导入已实现 | 核心 API 集成测试含导入断言 | 查询、后台维护和批量 JSON 导入基础闭环已实现，复杂动态筛选和 AI 择校上下文待补 |
 | 题目视频讲解 | 已建 `video_explanations`、`question_videos` | 已支持导入映射 | 单题视频、批量预加载、通用视频搜索、播放签名、视频次数扣减、播放水印上下文、租户后台视频创建绑定 API、JSON 预览导入已实现 | 核心 API 集成测试含播放、水印 traceId 和导入断言 | 播放、权益、后台绑定、动态水印上下文和批量 JSON 导入链路已实现，深度防盗链、转码级水印和播放统计待补 |
 | 资料下载/PDF | 已扩展 `content_assets`，新增资源台账和导入任务表 | 旧 `app_assets/images` 兼容导入 | 租户后台资源管理、OSS/COS/Supabase Storage 上传/下载签名、上传确认、PDF/图片预览签名、资源访问审计、动态水印上下文、内置安全扫描、外部 HTTP scanner 接入层、题库导出 PDF/Word/每日一练 ZIP 自动发布可信资源、学生端资料列表/下载权限已实现 | 核心 API 集成测试含 SVIP 资料下载、安全扫描门禁、水印 traceId，assets worker 覆盖内置规则与外部 scanner 通过/失败/不可用 fail-closed，exports worker 测试；Taro 类型检查覆盖学生资料水印预览/下载确认 | 资料资源基础闭环可跑，Taro 学生资料页已接短期签名、可见水印覆盖、追踪码展示和强制水印资源外部打开限制第一版；真实 AV/内容安全服务联调、CDN 防盗链、转码/CDN 级水印待补 |
-| 个人中心 | 已建 `student_profiles`、会员权益、订单、练习记录、`badges/user_badges` | 已支持部分用户资料和勋章导入 | 个人资料、目标院校/专业、手机号绑定/换绑、会员状态、最近练习、统计聚合、签到积分、题目反馈、考试倒计时、勋章 API 已实现 | API 集成测试 | 学生端基础个人中心已实现，学习报告可视化和更细任务系统待补 |
+| 个人中心 | 已建 `student_profiles`、会员权益、订单、练习记录、`badges/user_badges` | 已支持部分用户资料和勋章导入 | 个人资料、目标院校/专业、手机号绑定/换绑、会员状态、最近练习、统计聚合、签到积分、题目反馈、考试倒计时、勋章 API 已实现 | API 集成测试、Taro 类型检查 | 学生端个人中心已接学习报告、14 天趋势、题型表现、最近练习、7 日答题榜当前排名、激活码和订单入口第一版；头像上传、账号合并、更细任务系统和学习建议待补 |
 | 活动/优惠 | 已建优惠券、激活码、激活码批次、banner、FAQ、公告、勋章等基础表 | 部分支持 | banner/FAQ/公告只读与租户后台维护、激活码预检查/兑换、激活码批次、批量生成激活码、优惠券维护、前台领取/下单抵扣、最低金额、优惠封顶、单用户限次、首单限制、适用套餐/地区、活动分组、核销明细、核销报表、勋章维护和手动发放已实现 | 核心 API 集成测试 | 基础运营后台可用，勋章自动发放、积分活动联动、营销自动化和前端活动操作台继续补 |
 | 销售/代理客资追踪 | 已建推荐码、首绑客资、团队关系、小程序码缓存、CRM 队列 | 旧 `referral_tracks` 已有映射基础 | 邀请码、扫码/分享事件、首绑保护、销售统计、客资明细、手动补绑、团队关系、CRM 配置/队列、CRM worker 推送已实现 | 核心 API 集成测试、CRM worker 集成测试 | 增长链路基础可用，真实微信小程序码、CRM 分配策略、富卡片和销售转化看板待补 |
 | 租户后台 | 已建品牌、域名、设置、支付账户、登录 provider、私密密钥表、成员、审计日志、资源台账、导入台账、内容导航台账 | 不适用 | 概览、品牌、设置、域名、支付账户、登录配置、密钥掩码、活动内容、兑换码/优惠券、成员管理、权限矩阵、审计查询、角色模板权限/菜单/模块/字段/数据范围配置、内容入口/分类树/题目集合/练习蓝图维护、资源管理、题目/单词/知识手册/分数线/视频 JSON/CSV/Excel 同步/异步导入已实现 | 核心 API 集成测试含角色/权限/租户隔离/密钥不泄露/导航/组卷/资源与导入断言 | 租户配置与运营闭环可用；Taro 已接角色模板操作台、字段映射操作台和导入复检结果面板第一版；继续补成员绑定模板、权限驱动菜单和更细数据范围 UI |
@@ -89,10 +89,18 @@ catalog:
 learning:
  GET  /api/learning/leaderboard
  POST /api/learning/practice-sessions
+  GET  /api/learning/practice-sessions/detail
+  GET  /api/learning/practice-sessions/history
+  POST /api/learning/practice-sessions/submit
+  GET  /api/learning/practice-sessions/report
+  GET  /api/learning/practice-reports
+  GET  /api/learning/stats
+  GET  /api/learning/trend
  POST /api/learning/answers
  GET  /api/learning/favorites/questions
  POST /api/learning/favorites/questions
  GET  /api/learning/wrong-questions
+  GET  /api/learning/wrong-questions/review-plan
  POST /api/learning/wrong-questions/resolve
  GET  /api/learning/vocabulary/progress
  POST /api/learning/vocabulary/progress
--- a/docs/refactor/legacy-feature-gap-matrix.md
+++ b/docs/refactor/legacy-feature-gap-matrix.md
@@ -31,7 +31,7 @@
 | 知识手册 | `Handbook*.tsx` | 已覆盖 | Taro 已接手册科目/章节/条目和 RichContent 安全渲染第一版；后续补搜索、高亮、目录锚点、真正公式渲染和图片私有资源签名映射 |
 | 分数线 | `ScorelinePage.tsx` | 已覆盖 | 动态字段/趋势、后台维护和 JSON 批量导入已有；后续补复杂筛选优化和 AI 择校数据上下文 |
 | 商城/SVIP | `Store.tsx`、`SvipModal.tsx` | 部分覆盖 | 套餐、订单、订单详情/状态轮询、权益、激活码预检查/兑换、优惠券领取/下单抵扣、微信支付/支付宝 provider 主链路、内部退款状态机、微信/支付宝发起退款、退款查询确认、退款通知 webhook、支付/退款补偿 worker、全额退款权益撤销、资金对账手工/API 导入比对、微信/支付宝官方账单下载 worker、异常查询、差错工单和事件轨迹、异常订单运营台、人工调整凭证复核报表已有；Taro 学生收银台/订单详情和租户财务运营台第一版已接；仍缺更完整售后体验、真实生产账单抽样验收和生产账号联调 |
-| 个人中心 | `Profile.tsx` | 部分覆盖 | 基本资料、手机号绑定/换绑、权益、订单统计、练习历史、学习统计、签到积分、考试倒计时、趋势和勋章展示 API 已有；缺学习报告可视化 |
+| 个人中心 | `Profile.tsx` | 部分覆盖 | 基本资料、手机号绑定/换绑、权益、订单统计、练习历史、学习统计、签到积分、考试倒计时、趋势、勋章展示 API 已有；Taro 已接学习报告、14 天趋势、题型表现、最近练习、7 日答题榜当前排名、激活码和订单入口第一版；继续补任务系统、头像上传、账号合并和更细学习建议 |
 | 资料下载 | `QuestionExporterPublishModal.tsx` 等 | 部分覆盖 | 资源台账、上传确认、签名下载、PDF/图片预览、动态水印上下文、Taro 学生端水印 traceId 预览/下载确认、worker 复检、内置安全扫描和外部 HTTP scanner 接入层已有；仍缺深度防盗链、真实 AV/内容安全服务联调、转码/CDN 级水印和生命周期策略 |
 | AI 择校推荐 | 业务规划新增 | 部分覆盖 | 已有 SVIP 门禁、学生输入 schema、地区/分数线上下文、稳定 JSON 输出、报告台账、审计和 Taro 学生端基础页；真实 AI provider、prompt 版本管理后台、报告 PDF 渲染和更细推荐算法待补 |
 | 题目反馈 | `02-API接口.md` 用户反馈 | 部分覆盖 | 学生提交、本人列表、租户后台处理、状态事件、反馈奖励积分已覆盖；缺处理通知、前端消息提醒和批量统计 |
--- a/docs/refactor/next-development-todo.md
+++ b/docs/refactor/next-development-todo.md
@@ -178,7 +178,7 @@
 - H5 和小程序共用同一套业务 API client。
 - 租户通过域名、小程序配置或启动参数解析。
 - 页面主题、品牌、功能开关都从后端租户配置读取；学生端和后台只消费 `/api/tenant/resolve` 的已发布 `branding.theme/publicAssets`，租户后台草稿只通过 `/api/tenant-admin/theme` 查看。
- 当前已完成 H5 学生端、租户后台、平台后台三套构建入口和统一 API client；学生端、租户后台、平台后台都有第一批真实 API 页面；学生端已补地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、错题/收藏复习、题目反馈、视频解析、练习/模考报告、会员收银台、订单详情、售后入口、题干/选项/解析/知识手册 RichContent 安全渲染、逐题复盘、背单词卡片学习/发音/收藏练习第一版；平台后台已接入创建租户、状态变更、订阅、账单、收款、用量和公共题库授权第一版写操作；租户后台已接权限驱动工作台、学生运营操作台、主题模板预览/发布、角色模板、成员绑定和 CRM/分佣操作台第一版；下一步补真正 KaTeX/小程序公式方案、私有题图签名资源映射、状态管理、更细数据范围 UI、学生批量运营增强和小程序兼容验证。
+- 当前已完成 H5 学生端、租户后台、平台后台三套构建入口和统一 API client；学生端、租户后台、平台后台都有第一批真实 API 页面；学生端已补地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、错题/收藏复习、题目反馈、视频解析、练习/模考报告、个人中心学习报告可视化、会员收银台、订单详情、售后入口、题干/选项/解析/知识手册 RichContent 安全渲染、逐题复盘、背单词卡片学习/发音/收藏练习第一版；平台后台已接入创建租户、状态变更、订阅、账单、收款、用量和公共题库授权第一版写操作；租户后台已接权限驱动工作台、学生运营操作台、主题模板预览/发布、角色模板、成员绑定和 CRM/分佣操作台第一版；下一步补真正 KaTeX/小程序公式方案、私有题图签名资源映射、个人中心任务系统、状态管理、更细数据范围 UI、学生批量运营增强和小程序兼容验证。

 ### 第一批页面

@@ -217,6 +217,7 @@
 8. 个人中心
   - 会员权益、订单、激活码兑换
   - 错题本、收藏夹、学习统计、排行榜、勋章
+   - Taro 已接学习报告、14 天趋势、题型表现、最近练习和 7 日答题榜当前排名第一版
   - 会员收银台、优惠券领取、下单、支付参数、订单详情、状态轮询和售后入口已接第一版

 ### 前端接入原则
@@ -229,7 +230,7 @@
 ## 推荐下一步顺序

 1. 补租户后台写操作台：公共题库采纳/同步、冲突查看、单条/批量冲突采纳平台或保留本地、导入问题、模板预览/下载、上传/粘贴 preview/import、字段映射编辑、异步导入轮询、导入后复检详情、权限驱动工作台、学生创建/更新/批量导入/批量分班/备注/跟进、角色模板配置、成员绑定模板、CRM 配置/队列/跟进分配策略、分佣规则/成员比例/结算生成审核打款/导出/凭证复核已接第一版；继续补成员批量运营、更细数据范围 UI、真实打款 provider 和发票。
-2. 继续补 Taro 学生端旧体验：地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、视频播放、反馈、模考报告、逐题复盘、错题/收藏专题、收银台、订单详情、售后入口、题干/解析/知识手册 RichContent 安全渲染、背单词卡片学习/发音/收藏练习、资料短签名水印预览/下载确认已接第一版；继续补真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词更细统计、小程序支付容器、分享场景和状态管理。
+2. 继续补 Taro 学生端旧体验：地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、视频播放、反馈、模考报告、逐题复盘、错题/收藏专题、个人中心学习报告、收银台、订单详情、售后入口、题干/解析/知识手册 RichContent 安全渲染、背单词卡片学习/发音/收藏练习、资料短签名水印预览/下载确认已接第一版；继续补真正 KaTeX/小程序公式方案、私有题图签名资源映射、个人中心任务系统、背单词更细统计、小程序支付容器、分享场景和状态管理。
 3. 补平台后台增强：租户详情/编辑、平台审计报表、自动计费、账单批量操作和更细平台权限点。
 4. 云服务器部署 Supabase/PostgreSQL 和 API，配置对象存储生产环境变量，跑 `check:refactor` 的远程等价测试。
 5. 导出现有 PocketBase 数据，做完整 dry-run 迁移。