feat: upgrade student vocabulary learning flow

README.md

@@ -14,7 +14,7 @@
 - `apps/api` 独立业务 API，后续供 H5、Taro 小程序、管理后台统一调用；已支持 Supabase Auth JWT 和迁移期 `tk_` session 双入口。
 - 租户后台能力：品牌、主题模板/草稿/发布、域名、公开设置、支付账户、登录配置、私密密钥掩码、活动内容、考试日期、题目反馈处理、激活码、优惠券规则/核销报表、勋章管理/发放、成员权限、自定义角色模板、班级/教师/学生范围权限、学生批量导入、批量分班、学生备注、跟进任务、审计日志。
 - 租户内容能力：可配置题库入口、任意深度分类树、考试意向标记、题目集合、顺序/随机/全真模拟蓝图、题目录入/更新、视频绑定、分数线、单词、知识手册、资料资源台账、题目/单词/知识手册/分数线/视频 JSON/CSV/Excel 批量导入。
-- 学生端能力：题库入口、分类树、题目集合、顺序/随机/模考 session 组卷快照、答题、错题本、收藏夹、背单词进度、个人中心、勋章、考试倒计时、签到积分、题目反馈、排行榜、分数线、AI 择校推荐、题目视频、订单详情/状态轮询、优惠券领取/抵扣、权益、激活码预检查/兑换、资料下载。
+- 学生端能力：题库入口、分类树、题目集合、顺序/随机/模考 session 组卷快照、答题、错题本、收藏夹、背单词卡片学习/发音/收藏练习、个人中心、勋章、考试倒计时、签到积分、题目反馈、排行榜、分数线、AI 择校推荐、题目视频、订单详情/状态轮询、优惠券领取/抵扣、权益、激活码预检查/兑换、资料下载。
 - 平台后台能力：租户管理、SaaS 套餐、订阅、账单、服务费收款、用量记录、公共题库授权。
 - 公共题库商业化能力：租户可采纳平台授权题库为本租户副本，并可手动或由 worker 自动同步平台新增/更新题目；同步会保护租户自改题目，返回冲突而不覆盖，后台可查询冲突明细。
 - 题库导出能力：租户内容编辑可按题目集合、内容入口或分类节点导出 JSON、`paper_json`、打印 payload、PDF、Word 和每日一练图片 ZIP 素材包，后端强制租户隔离、答案/解析开关、复合题子题脱敏、导出 job 和审计；PDF/Word/ZIP 由 exports worker 生成水印文件或运营素材并发布到 `content_assets`；`daily_practice` 支持每日一练九宫格 metadata、PDF/Word 版式、9 张 PNG/SVG 卡片和拼图包。
@@ -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` 安全渲染组件用于题干、选项、解析、知识手册和逐题复盘；租户后台第一批页面已接入工作台、数据看板、学生/班级、题库内容、营销中心、财务运营和租户设置，营销中心已接 CRM、分佣结算、优惠券规则/核销报表，财务运营已接退款状态机、官方账单任务、对账异常、差错工单和调整凭证第一版，设置页已接主题模板、草稿预览/发布、角色模板和成员绑定第一版；平台后台已接入工作台、租户管理、账务中心、公共题库授权，以及创建租户、状态变更、订阅、账单、收款、用量和题库授权第一版写操作。
+- `apps/taro` 已建立 Taro 4 React 跨端前端地基，包含 H5 学生端、租户后台、平台后台三套构建入口、租户解析、统一 API client 和 Supabase Auth client 初始化；学生端第一批页面已接入登录、首页、题库、练习、背单词、知识手册、分数线、AI 择校推荐、资料和个人中心，已新增 `RichContent` 安全渲染组件用于题干、选项、解析、知识手册和逐题复盘，并升级背单词为今日计划/单元学习/收藏练习、卡片翻转、发音、美/英音切换和本地位置恢复第一版；租户后台第一批页面已接入工作台、数据看板、学生/班级、题库内容、营销中心、财务运营和租户设置，营销中心已接 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、发票、公共题库版本通知/冲突处理操作台、积分活动深化，以及排行榜防刷/预聚合。

apps/taro/src/pages/student/student.css

@@ -392,3 +392,127 @@
   word-break: break-all;
   overflow-wrap: anywhere;
 }
+
+.vocabulary-page .student-topbar {
+  margin-bottom: 20px;
+}
+
+.vocabulary-modebar {
+  margin-top: 18px;
+}
+
+.vocabulary-study {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.vocabulary-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.vocabulary-progress-track {
+  width: 100%;
+  height: 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e2e8f0;
+}
+
+.vocabulary-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: #2563eb;
+  transition: width 180ms ease;
+}
+
+.vocabulary-card {
+  min-height: 560px;
+  padding: 32px;
+  border: 1px solid #dbe3ee;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.vocabulary-card.revealed {
+  border-color: #bfdbfe;
+  background: #f8fbff;
+}
+
+.vocabulary-word {
+  display: block;
+  margin-top: 36px;
+  color: #0f172a;
+  font-size: 64px;
+  font-weight: 850;
+  line-height: 1.05;
+  text-align: center;
+  word-break: break-word;
+}
+
+.vocabulary-phonetic {
+  display: block;
+  margin-top: 16px;
+  color: #64748b;
+  font-size: 28px;
+  line-height: 1.3;
+  text-align: center;
+}
+
+.vocabulary-card-actions {
+  justify-content: center;
+  margin-top: 26px;
+}
+
+.vocabulary-answer {
+  margin-top: 34px;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.vocabulary-actions {
+  justify-content: center;
+}
+
+.vocabulary-word-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vocabulary-word-chip {
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.vocabulary-word-chip.active {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+.vocabulary-word-chip.favorite {
+  border-color: #f59e0b;
+}
+
+.vocabulary-chip-word {
+  display: block;
+  color: #0f172a;
+  font-size: 24px;
+  font-weight: 820;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.vocabulary-chip-meta {
+  display: block;
+  margin-top: 6px;
+  color: #94a3b8;
+  font-size: 20px;
+}

apps/taro/src/pages/student/vocabulary/index.tsx

@@ -1,14 +1,62 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import Taro from '@tarojs/taro';
 import { Button, Text, View } from '@tarojs/components';
 import { loadVocabularyUnits, loadVocabularyWords, type VocabularyUnit } from '@/services/catalog';
-import { loadVocabularyReviewPlan, loadVocabularyStats, reviewVocabularyWord, toggleWordFavorite, type VocabularyWord } from '@/services/learning';
+import {
+  loadFavoriteWords,
+  loadVocabularyReviewPlan,
+  loadVocabularyStats,
+  reviewVocabularyWord,
+  toggleWordFavorite,
+  type VocabularyWord,
+} from '@/services/learning';
+import { playWordPronunciation, type AccentType } from '@/services/pronunciation';
+import { getStorage, removeStorage, setStorage } from '@/services/storage';
 import '../student.css';
 
+type StudyMode = 'plan' | 'unit' | 'favorites';
+
+type SessionStats = {
+  known: number;
+  unknown: number;
+};
+
+function wordKey(word: VocabularyWord) {
+  return word.wordId || word.id || word.word;
+}
+
+function wordRecordId(word: VocabularyWord) {
+  return word.wordId || word.id || '';
+}
+
+function progressStorageKey(unitId: string, mode: StudyMode) {
+  return `tiku:vocabulary:${unitId || 'all'}:${mode}:index`;
+}
+
+function statNumber(stats: Record<string, unknown> | null, key: string) {
+  const value = stats?.[key];
+  return typeof value === 'number' ? value : Number(value || 0);
+}
+
+function modeLabel(mode: StudyMode) {
+  if (mode === 'favorites') return '收藏练习';
+  if (mode === 'unit') return '单元学习';
+  return '今日计划';
+}
+
 export default function StudentVocabularyPage() {
   const [units, setUnits] = useState<VocabularyUnit[]>([]);
   const [unitId, setUnitId] = useState('');
+  const [mode, setMode] = useState<StudyMode>('plan');
   const [words, setWords] = useState<VocabularyWord[]>([]);
+  const [favoriteIds, setFavoriteIds] = useState<Record<string, boolean>>({});
   const [stats, setStats] = useState<Record<string, unknown> | null>(null);
+  const [index, setIndex] = useState(0);
+  const [showAnswer, setShowAnswer] = useState(false);
+  const [completed, setCompleted] = useState(false);
+  const [accent, setAccent] = useState<AccentType>('us');
+  const [sessionStats, setSessionStats] = useState<SessionStats>({ known: 0, unknown: 0 });
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
   useEffect(() => {
@@ -23,35 +71,135 @@ export default function StudentVocabularyPage() {
 
   useEffect(() => {
     if (!unitId) return;
-    Promise.all([loadVocabularyReviewPlan(unitId), loadVocabularyWords(unitId), loadVocabularyStats(unitId)])
-      .then(([plan, wordPayload, statPayload]) => {
-        const planned = plan.item?.words || [];
-        setWords(planned.length ? planned : wordPayload.items || []);
-        setStats(statPayload.item || null);
-      })
-      .catch(nextError => setError(nextError instanceof Error ? nextError.message : '单词加载失败'));
-  }, [unitId]);
+    setLoading(true);
+    setError('');
+    setCompleted(false);
+    setShowAnswer(false);
+    setSessionStats({ known: 0, unknown: 0 });
 
-  async function mark(word: VocabularyWord, result: 'known' | 'unknown') {
-    const wordId = word.wordId || word.id;
-    if (!wordId) return;
-    await reviewVocabularyWord(wordId, result).catch(nextError => setError(nextError instanceof Error ? nextError.message : '复习提交失败'));
-    setWords(prev => prev.filter(item => (item.wordId || item.id) !== wordId));
+    Promise.all([
+      mode === 'favorites' ? loadFavoriteWords(unitId) : Promise.resolve({ items: [] as VocabularyWord[] }),
+      mode !== 'favorites' ? loadVocabularyWords(unitId) : Promise.resolve({ items: [] as VocabularyWord[] }),
+      mode === 'plan' ? loadVocabularyReviewPlan(unitId) : Promise.resolve({ item: { words: [] as VocabularyWord[] } }),
+      loadFavoriteWords(unitId).catch(() => ({ items: [] as VocabularyWord[] })),
+      loadVocabularyStats(unitId),
+    ])
+      .then(([favoritePayload, wordPayload, planPayload, favoritesForStatus, statPayload]) => {
+        const planned = planPayload.item?.words || [];
+        const nextWords = mode === 'favorites'
+          ? favoritePayload.items || []
+          : mode === 'unit'
+            ? wordPayload.items || []
+            : planned.length
+              ? planned
+              : wordPayload.items || [];
+        const savedIndex = getStorage<number>(progressStorageKey(unitId, mode));
+        setWords(nextWords);
+        setFavoriteIds(Object.fromEntries((favoritesForStatus.items || []).map(item => wordRecordId(item)).filter(Boolean).map(id => [id, true])));
+        setStats(statPayload.item || null);
+        setIndex(typeof savedIndex === 'number' ? Math.min(savedIndex, Math.max(0, nextWords.length - 1)) : 0);
+      })
+      .catch(nextError => setError(nextError instanceof Error ? nextError.message : '单词加载失败'))
+      .finally(() => setLoading(false));
+  }, [unitId, mode]);
+
+  useEffect(() => {
+    if (!unitId || !words.length) return;
+    setStorage(progressStorageKey(unitId, mode), index);
+  }, [index, mode, unitId, words.length]);
+
+  const current = words[index] || null;
+  const progressPercent = words.length ? Math.round(((Math.min(index + 1, words.length)) / words.length) * 100) : 0;
+  const favoriteCurrent = current ? !!favoriteIds[wordRecordId(current)] : false;
+
+  const unitName = useMemo(() => units.find(item => item.id === unitId)?.name || '单词单元', [units, unitId]);
+
+  function resetPosition(nextMode = mode) {
+    removeStorage(progressStorageKey(unitId, nextMode));
+    setIndex(0);
+    setShowAnswer(false);
+    setCompleted(false);
+    setSessionStats({ known: 0, unknown: 0 });
   }
 
-  async function favorite(word: VocabularyWord) {
-    const wordId = word.wordId || word.id;
-    if (!wordId) return;
-    await toggleWordFavorite(wordId, true).catch(nextError => setError(nextError instanceof Error ? nextError.message : '收藏失败'));
+  function previousWord() {
+    setIndex(prev => Math.max(0, prev - 1));
+    setShowAnswer(false);
+    setCompleted(false);
+  }
+
+  function nextWord() {
+    if (index >= words.length - 1) {
+      setCompleted(true);
+      return;
+    }
+    setIndex(prev => Math.min(words.length - 1, prev + 1));
+    setShowAnswer(false);
+  }
+
+  async function mark(result: 'known' | 'unknown') {
+    if (!current) return;
+    const id = wordRecordId(current);
+    if (!id) {
+      setError('单词数据缺少 ID，无法提交复习结果');
+      return;
+    }
+    try {
+      await reviewVocabularyWord(id, result);
+      setSessionStats(prev => ({
+        known: prev.known + (result === 'known' ? 1 : 0),
+        unknown: prev.unknown + (result === 'unknown' ? 1 : 0),
+      }));
+      if (mode === 'plan') {
+        setWords(prev => prev.filter(item => wordKey(item) !== id));
+        setIndex(prev => Math.min(prev, Math.max(0, words.length - 2)));
+      } else {
+        nextWord();
+      }
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '复习提交失败');
+    }
+  }
+
+  async function toggleFavorite() {
+    if (!current) return;
+    const id = wordRecordId(current);
+    if (!id) {
+      setError('单词数据缺少 ID，无法收藏');
+      return;
+    }
+    const nextFavorite = !favoriteCurrent;
+    try {
+      const payload = await toggleWordFavorite(id, nextFavorite);
+      setFavoriteIds(prev => ({ ...prev, [id]: payload.favorite }));
+      if (mode === 'favorites' && !payload.favorite) {
+        setWords(prev => prev.filter(item => wordKey(item) !== id));
+        setIndex(prev => Math.min(prev, Math.max(0, words.length - 2)));
+      }
+      Taro.showToast({ title: payload.favorite ? '已收藏' : '已取消收藏', icon: 'success' });
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '收藏操作失败');
+    }
+  }
+
+  function jumpToWord(targetIndex: number) {
+    setIndex(Math.max(0, Math.min(words.length - 1, targetIndex)));
+    setShowAnswer(false);
+    setCompleted(false);
+  }
+
+  async function playCurrent() {
+    if (!current?.word) return;
+    await playWordPronunciation(current.word, accent);
   }
 
   return (
-    <View className='student-page'>
+    <View className='student-page vocabulary-page'>
       <View className='student-topbar'>
         <View className='student-title-block'>
           <Text className='student-kicker'>Vocabulary</Text>
           <Text className='student-title'>背单词</Text>
-          <Text className='student-subtitle'>每日计划、复习调度和掌握状态都由后端维护。</Text>
+          <Text className='student-subtitle'>{unitName} · {modeLabel(mode)} · 进度由后端复习计划维护</Text>
         </View>
       </View>
 
@@ -63,33 +211,98 @@ export default function StudentVocabularyPage() {
         ))}
       </View>
 
-      <View className='section-block'>
-        <Text className='section-heading'>学习统计</Text>
-        <View className='grid-two'>
-          <View className='metric'><Text className='metric-value'>{String(stats?.masteredWords ?? 0)}</Text><Text className='metric-label'>已掌握</Text></View>
-          <View className='metric'><Text className='metric-value'>{String(stats?.todayReviewed ?? 0)}</Text><Text className='metric-label'>今日复习</Text></View>
-        </View>
+      <View className='toolbar wrap vocabulary-modebar'>
+        <Button className={`pill-button ${mode === 'plan' ? 'active' : ''}`} onClick={() => setMode('plan')}>今日计划</Button>
+        <Button className={`pill-button ${mode === 'unit' ? 'active' : ''}`} onClick={() => setMode('unit')}>单元学习</Button>
+        <Button className={`pill-button ${mode === 'favorites' ? 'active' : ''}`} onClick={() => setMode('favorites')}>收藏练习</Button>
+        <Button className='secondary-button' onClick={() => resetPosition()}>重新开始</Button>
       </View>
 
-      <View className='section-block'>
-        <Text className='section-heading'>今日单词</Text>
-        <View className='list-stack'>
-          {words.slice(0, 20).map(word => (
-            <View className='list-row' key={word.wordId || word.id || word.word}>
-              <Text className='row-main'>{word.word} {word.phonetic ? `/${word.phonetic}/` : ''}</Text>
-              <Text className='row-meta'>{word.meaning || '暂无释义'}</Text>
-              {word.example ? <Text className='row-meta'>{word.example}</Text> : null}
-              <View className='toolbar'>
-                <Button className='primary-button' onClick={() => mark(word, 'known')}>认识</Button>
-                <Button className='secondary-button' onClick={() => mark(word, 'unknown')}>再记</Button>
-                <Button className='secondary-button' onClick={() => favorite(word)}>收藏</Button>
-              </View>
-            </View>
-          ))}
-        </View>
-        {!words.length ? <View className='empty-state'>当前单元暂无待学习单词。</View> : null}
-        {error ? <Text className='error-text'>{error}</Text> : null}
+      <View className='grid-two section-block'>
+        <View className='metric'><Text className='metric-value'>{String(statNumber(stats, 'masteredWords'))}</Text><Text className='metric-label'>已掌握</Text></View>
+        <View className='metric'><Text className='metric-value'>{String(statNumber(stats, 'todayReviewed'))}</Text><Text className='metric-label'>今日复习</Text></View>
       </View>
+
+      {loading ? <View className='empty-state section-block'>单词加载中...</View> : null}
+
+      {!loading && current && !completed ? (
+        <View className='vocabulary-study section-block'>
+          <View className='vocabulary-progress'>
+            <Text className='row-meta'>{index + 1}/{words.length} · {progressPercent}%</Text>
+            <View className='vocabulary-progress-track'><View className='vocabulary-progress-fill' style={{ width: `${progressPercent}%` }} /></View>
+          </View>
+
+          <View className={`vocabulary-card ${showAnswer ? 'revealed' : ''}`} onClick={() => setShowAnswer(prev => !prev)}>
+            <View className='amount-row'>
+              <Text className='status-badge'>{current.dueLevel || current.status || modeLabel(mode)}</Text>
+              <Text className='status-badge'>{favoriteCurrent ? '已收藏' : '未收藏'}</Text>
+            </View>
+            <Text className='vocabulary-word'>{current.word}</Text>
+            {current.phonetic ? <Text className='vocabulary-phonetic'>/{current.phonetic}/</Text> : null}
+            <View className='toolbar wrap vocabulary-card-actions'>
+              <Button className='secondary-button' onClick={(event) => { event.stopPropagation(); void playCurrent(); }}>发音</Button>
+              <Button className='secondary-button' onClick={(event) => { event.stopPropagation(); setAccent(prev => (prev === 'us' ? 'uk' : 'us')); }}>{accent === 'us' ? '美音' : '英音'}</Button>
+              <Button className='secondary-button' onClick={(event) => { event.stopPropagation(); void toggleFavorite(); }}>{favoriteCurrent ? '取消收藏' : '收藏'}</Button>
+            </View>
+            <View className='vocabulary-answer'>
+              {showAnswer ? (
+                <>
+                  <Text className='row-main'>{current.meaning || '暂无释义'}</Text>
+                  {current.example ? <Text className='row-meta'>{current.example}</Text> : null}
+                  {current.exampleTranslation ? <Text className='row-meta'>{current.exampleTranslation}</Text> : null}
+                </>
+              ) : (
+                <Text className='row-meta'>点击卡片查看释义和例句</Text>
+              )}
+            </View>
+          </View>
+
+          <View className='toolbar wrap vocabulary-actions'>
+            <Button className='secondary-button' onClick={previousWord}>上一个</Button>
+            <Button className='danger-button' onClick={() => mark('unknown')}>再记</Button>
+            <Button className='primary-button' onClick={() => mark('known')}>认识</Button>
+            <Button className='secondary-button' onClick={nextWord}>下一个</Button>
+          </View>
+
+          <View className='grid-two section-block'>
+            <View className='metric'><Text className='metric-value'>{String(sessionStats.known)}</Text><Text className='metric-label'>本次认识</Text></View>
+            <View className='metric'><Text className='metric-value'>{String(sessionStats.unknown)}</Text><Text className='metric-label'>本次再记</Text></View>
+          </View>
+        </View>
+      ) : null}
+
+      {!loading && (completed || !words.length) ? (
+        <View className='report-panel section-block'>
+          <Text className='metric-value'>{words.length ? '本组已完成' : '暂无单词'}</Text>
+          <Text className='metric-label'>
+            {mode === 'favorites' && !words.length ? '当前单元还没有收藏单词。' : '可以切换模式或重新开始本单元学习。'}
+          </Text>
+          <View className='toolbar wrap checkout-actions'>
+            <Button className='primary-button' onClick={() => resetPosition()}>重新开始</Button>
+            <Button className='secondary-button' onClick={() => setMode(mode === 'plan' ? 'unit' : 'plan')}>切换模式</Button>
+          </View>
+        </View>
+      ) : null}
+
+      {words.length ? (
+        <View className='section-block'>
+          <Text className='section-heading'>单词列表</Text>
+          <View className='vocabulary-word-grid'>
+            {words.map((item, itemIndex) => (
+              <View
+                className={`vocabulary-word-chip ${itemIndex === index ? 'active' : ''} ${favoriteIds[wordRecordId(item)] ? 'favorite' : ''}`}
+                key={wordKey(item)}
+                onClick={() => jumpToWord(itemIndex)}
+              >
+                <Text className='vocabulary-chip-word'>{item.word}</Text>
+                <Text className='vocabulary-chip-meta'>{itemIndex + 1}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      ) : null}
+
+      {error ? <Text className='error-text'>{error}</Text> : null}
     </View>
   );
 }

apps/taro/src/services/learning.ts

@@ -161,6 +161,8 @@ export interface VocabularyWord {
   difficulty?: string | null;
   status?: string;
   dueLevel?: string;
+  favoritedAt?: string | null;
+  note?: string | null;
 }
 
 export async function createPracticeSession(body: {
@@ -281,6 +283,12 @@ export async function toggleWordFavorite(wordId: string, favorite: boolean) {
   });
 }
 
+export async function loadFavoriteWords(unitId?: string, limit = 500) {
+  return apiRequest<{ items?: VocabularyWord[] }>('/api/learning/vocabulary/favorites', {
+    query: { unitId, limit },
+  });
+}
+
 export async function loadVocabularyStats(unitId?: string) {
   return apiRequest<{ item?: Record<string, unknown> }>('/api/learning/vocabulary/stats', { query: { unitId } });
 }

apps/taro/src/services/pronunciation.ts

@@ -0,0 +1,97 @@
+import Taro from '@tarojs/taro';
+
+export type AccentType = 'us' | 'uk';
+
+const YOUDAO_TYPE: Record<AccentType, number> = {
+  us: 1,
+  uk: 2,
+};
+
+let currentAudio: HTMLAudioElement | null = null;
+let currentInnerAudio: Taro.InnerAudioContext | null = null;
+
+function pronunciationUrl(word: string, accent: AccentType) {
+  return `https://dict.youdao.com/dictvoice?audio=${encodeURIComponent(word)}&type=${YOUDAO_TYPE[accent] || 1}`;
+}
+
+function stopCurrentAudio() {
+  try {
+    if (currentAudio) {
+      currentAudio.pause();
+      currentAudio.src = '';
+      currentAudio = null;
+    }
+  } catch (_error) {
+    // ignore playback cleanup errors
+  }
+  try {
+    if (currentInnerAudio) {
+      currentInnerAudio.stop();
+      currentInnerAudio.destroy();
+      currentInnerAudio = null;
+    }
+  } catch (_error) {
+    // ignore playback cleanup errors
+  }
+  try {
+    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+  } catch (_error) {
+    // ignore unsupported runtime
+  }
+}
+
+function fallbackSpeech(word: string, accent: AccentType) {
+  if (typeof window === 'undefined' || !('speechSynthesis' in window)) return false;
+  try {
+    const utterance = new SpeechSynthesisUtterance(word);
+    utterance.lang = accent === 'uk' ? 'en-GB' : 'en-US';
+    utterance.rate = 0.86;
+    window.speechSynthesis.speak(utterance);
+    return true;
+  } catch (_error) {
+    return false;
+  }
+}
+
+export async function playWordPronunciation(word: string, accent: AccentType = 'us') {
+  const text = word.trim();
+  if (!text) return;
+  stopCurrentAudio();
+
+  const url = pronunciationUrl(text, accent);
+
+  if (process.env.TARO_ENV === 'h5' && typeof Audio !== 'undefined') {
+    try {
+      const audio = new Audio(url);
+      audio.preload = 'auto';
+      currentAudio = audio;
+      audio.onerror = () => {
+        currentAudio = null;
+        fallbackSpeech(text, accent);
+      };
+      await audio.play();
+      return;
+    } catch (_error) {
+      if (fallbackSpeech(text, accent)) return;
+    }
+  }
+
+  try {
+    const audio = Taro.createInnerAudioContext();
+    currentInnerAudio = audio;
+    audio.src = url;
+    audio.autoplay = true;
+    audio.onEnded(() => {
+      if (currentInnerAudio === audio) currentInnerAudio = null;
+      audio.destroy();
+    });
+    audio.onError(() => {
+      if (currentInnerAudio === audio) currentInnerAudio = null;
+      audio.destroy();
+    });
+  } catch (_error) {
+    Taro.showToast({ title: '当前环境暂不支持发音', icon: 'none' });
+  }
+}

docs/refactor/frontend-handoff-index.md

@@ -28,7 +28,7 @@
 - `apps/taro` 已经建立，且学生端第一批 H5 页面已经可构建：登录、首页、地区选择、题库、练习、错题/收藏、练习报告、视频解析、会员收银台、订单详情、背单词、知识手册、分数线、资料、个人中心。
 - 租户后台第一批 H5 页面已经可构建：工作台、数据看板、学生/班级、题库内容、营销中心、财务运营、租户设置；工作台已接 `/api/tenant-admin/permissions` 做权限驱动模块入口；学生运营页已具备学生创建/更新、状态禁用/恢复、批量导入、批量分班、学生备注和跟进任务第一版；题库内容页已具备公共题库采纳/同步、同步通知、冲突查看、单条/批量采纳平台版本或保留本地版本、导入任务详情、异步轮询、导入问题查看、模板预览/下载、导入后复检详情、JSON/CSV/Excel 选择文件或粘贴内容、后端预览、字段别名覆盖和同步/异步执行导入的第一版操作能力；营销中心已具备 CRM 配置、CRM 队列查看、分佣规则、成员分佣比例、分佣订单、结算单生成/审核/标记打款第一版；财务运营页已具备退款申请/审核/供应商提交与查询、官方账单下载任务、对账批次/异常明细、差错工单处理、人工调整凭证提交/复核和异常订单运营台第一版；租户设置页已具备主题模板、草稿预览/发布、角色模板新建、编辑、停用、成员搜索/新建、成员绑定模板、成员状态和额外权限覆盖第一版。
 - 平台后台第一批 H5 页面已经可构建：工作台、租户管理、账务中心、公共题库授权。
-- 可以继续复刻旧题库学生端主要视觉和交互：勋章展示、小程序端分享/支付体验、背单词卡片发音和更细复盘体验。地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、题干/选项/解析 RichContent 安全渲染、视频解析、题目反馈、模考/练习报告逐题复盘、错题复习、收藏复习、商城收银台、订单详情和售后入口已经有第一版页面。
+- 可以继续复刻旧题库学生端主要视觉和交互：勋章展示、小程序端分享/支付体验、背单词更细统计和更完整复盘体验。地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、题干/选项/解析 RichContent 安全渲染、视频解析、题目反馈、模考/练习报告逐题复盘、错题复习、收藏复习、背单词卡片学习/发音/收藏练习、商城收银台、订单详情和售后入口已经有第一版页面。
 - 可以按新后端主模型接入内容导航：
   - `content_entries`
   - `content_nodes`
@@ -72,13 +72,13 @@
 | 视频解析 | `apps/taro/src/pages/student/video/index.tsx` | `questions/videos`、`videos/play` |
 | 会员收银台 | `apps/taro/src/pages/student/checkout/index.tsx` | `svip-plans`、`coupons/claim`、`commerce/orders`、`payments/create`、`orders/status` |
 | 订单详情 | `apps/taro/src/pages/student/order-detail/index.tsx` | `commerce/orders/detail`、`commerce/orders/status`、`payments/create` |
-| 背单词 | `apps/taro/src/pages/student/vocabulary/index.tsx` | `vocabulary-units`、`vocabulary-words`、`vocabulary/review-plan`、`vocabulary/review` |
+| 背单词 | `apps/taro/src/pages/student/vocabulary/index.tsx` | `vocabulary-units`、`vocabulary-words`、`vocabulary/review-plan`、`vocabulary/review`、`vocabulary/favorites`；已接今日计划、单元学习、收藏练习、卡片翻转、发音、美/英音切换、本地进度恢复和单词跳转 |
 | 知识手册 | `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` |
 | 个人中心 | `apps/taro/src/pages/student/profile/index.tsx` | `profile/me`、`check-in`、`badges`、`exam-countdowns`、`svip-plans`、`orders`、`entitlements`、`activation-codes`、`leaderboard` |
 
-当前页面主要用于打通接口和路由。学生端第一版学习闭环已经覆盖“选地区 -> 进题库 -> 创建 session -> 答题卡/答题/主观题自评/复合题多小题/收藏/反馈/视频 -> 交卷报告逐题复盘 -> 错题/收藏复习”，会员闭环已经覆盖“选套餐 -> 领优惠券 -> 下单 -> 创建支付参数 -> 状态轮询 -> 订单详情/售后入口”。`apps/taro/src/components/RichContent.tsx` 是学生端题干、选项、解析和知识手册的统一安全渲染组件：它只支持受控 Markdown 图片、基础表格、粗体、代码和公式占位，不执行任意 HTML/JS，也会拒绝 `javascript:`、`data:` 等危险图片地址。后续 UI 需要继续按旧题库视觉和 Taro H5/小程序限制优化，并重点补真正 KaTeX/小程序公式方案、私有题图签名资源映射、小程序分享/支付容器体验。
+当前页面主要用于打通接口和路由。学生端第一版学习闭环已经覆盖“选地区 -> 进题库 -> 创建 session -> 答题卡/答题/主观题自评/复合题多小题/收藏/反馈/视频 -> 交卷报告逐题复盘 -> 错题/收藏复习”，背单词已经覆盖“单元 -> 今日计划/全单元/收藏练习 -> 卡片翻转 -> 发音 -> 认识/再记上报 -> 本地恢复”，会员闭环已经覆盖“选套餐 -> 领优惠券 -> 下单 -> 创建支付参数 -> 状态轮询 -> 订单详情/售后入口”。`apps/taro/src/components/RichContent.tsx` 是学生端题干、选项、解析和知识手册的统一安全渲染组件：它只支持受控 Markdown 图片、基础表格、粗体、代码和公式占位，不执行任意 HTML/JS，也会拒绝 `javascript:`、`data:` 等危险图片地址。后续 UI 需要继续按旧题库视觉和 Taro H5/小程序限制优化，并重点补真正 KaTeX/小程序公式方案、私有题图签名资源映射、小程序分享/支付容器体验。
 
 ## 已落地的 Taro 租户后台页面
 

docs/refactor/implementation-status.md

@@ -28,7 +28,7 @@
 | 错题本 | 已建 `wrong_questions` | 已支持旧错题归一化 | 错题列表、答题自动入错题、移出错题已实现 | 仅烟测 | 基础功能已实现，复习计划和统计未完成 |
 | 收藏夹 | 已建 `favorite_questions` | 已支持旧收藏归一化 | 收藏/取消收藏、收藏列表已实现 | 仅烟测 | 基础功能已实现 |
 | 用户订阅/题库会员/SVIP | 已建 `orders`、`payments`、`entitlements`、`svip_plans`、激活码 | 已映射旧 SVIP/会员权益 | 下单、订单详情/状态轮询、手工支付确认权限保护、微信/支付宝支付、微信/支付宝发起退款、微信/支付宝退款查询确认、微信/支付宝退款通知 webhook、激活码预检查/兑换、优惠券抵扣、零元订单自动开通、权益查询、支付/退款补偿、微信/支付宝官方账单下载、资金对账、差错工单、异常订单运营台和人工调整凭证已实现 | API 集成测试、commerce worker 集成测试 | 商城主链路可联调，Taro 租户财务运营台第一版已接；真实生产账单格式验收、生产账号联调和更完整学生端售后体验待补 |
-| 背单词 | 已建单词单元、单词、进度、收藏表，并可绑定 `content_entries/content_nodes` | 已支持内容和部分用户状态映射 | 单元/单词只读、进度、收藏、统计、每日复习计划、租户后台单词维护 API、旧模板/新模板 JSON 预览导入、排行榜已实现 | 核心 API 集成测试含导入和排行榜断言 | 学生端学习状态、后台维护、批量 JSON 导入和基础排行榜已实现，更细复习参数和后台统计待完善 |
+| 背单词 | 已建单词单元、单词、进度、收藏表，并可绑定 `content_entries/content_nodes` | 已支持内容和部分用户状态映射 | 单元/单词只读、进度、收藏、统计、每日复习计划、租户后台单词维护 API、旧模板/新模板 JSON 预览导入、排行榜已实现 | 核心 API 集成测试含导入和排行榜断言，Taro 类型检查覆盖卡片学习和收藏练习 | 学生端学习状态、后台维护、批量 JSON 导入、Taro 卡片翻转、发音、美/英音切换、收藏练习、本地位置恢复和基础排行榜已实现；租户级发音源、收藏专项统计、更细复习参数和后台统计待完善 |
 | 知识手册 | 已建手册科目、章节、条目，并可绑定 `content_entries/content_nodes` | 已支持内容导入 | 只读 API、租户后台手册科目/章节/条目维护 API、嵌套 JSON 预览导入已实现 | 核心 API 集成测试含导入断言，Taro 类型检查含 RichContent 阅读页 | 学生端阅读、RichContent 安全渲染、后台维护和批量 JSON 导入基础可用，搜索、高亮、目录锚点、真正公式渲染、富文本资源/版本管理待补 |
 | 分数线 | 已建院校、专业、字段、记录表 | 已支持导入映射 | 字段、院校、专业、记录、趋势、年份、租户后台维护 API、JSON 预览导入已实现 | 核心 API 集成测试含导入断言 | 查询、后台维护和批量 JSON 导入基础闭环已实现，复杂动态筛选和 AI 择校上下文待补 |
 | 题目视频讲解 | 已建 `video_explanations`、`question_videos` | 已支持导入映射 | 单题视频、批量预加载、通用视频搜索、播放签名、视频次数扣减、播放水印上下文、租户后台视频创建绑定 API、JSON 预览导入已实现 | 核心 API 集成测试含播放、水印 traceId 和导入断言 | 播放、权益、后台绑定、动态水印上下文和批量 JSON 导入链路已实现，深度防盗链、转码级水印和播放统计待补 |

docs/refactor/legacy-feature-gap-matrix.md

@@ -27,7 +27,7 @@
 | 错题本 | 用户 stats/错题逻辑 | 已覆盖 | 错题列表、移出错题、复习计划和 `wrong_review` 后端组卷已覆盖；后续补更细的间隔复习算法 |
 | 收藏夹 | `WordFavoritesPage.tsx`、题目收藏 | 已覆盖 | 题目和单词收藏已有 |
 | 题目视频 | `VideoPlayer.tsx` | 部分覆盖 | 题目视频查询、播放签名、SVIP/次数扣减、播放日志和动态水印上下文已有；缺深度防盗链、转码级水印、播放统计报表 |
-| 背单词 | `VocabularyPage.tsx`、`VocabularyQuiz.tsx` | 部分覆盖 | 单词列表、进度、收藏、统计、每日计划和后端复习调度已覆盖；后续补收藏练习体验、发音/音频策略、排行榜和更精细的间隔算法参数 |
+| 背单词 | `VocabularyPage.tsx`、`VocabularyQuiz.tsx` | 部分覆盖 | 单词列表、进度、收藏、统计、每日计划、后端复习调度、Taro 卡片翻转、上一个/下一个、跳转、发音、美/英音切换、收藏练习和本地进度恢复第一版已覆盖；后续补租户级发音源配置、收藏专项统计、排行榜运营看板和更精细的间隔算法参数 |
 | 知识手册 | `Handbook*.tsx` | 已覆盖 | Taro 已接手册科目/章节/条目和 RichContent 安全渲染第一版；后续补搜索、高亮、目录锚点、真正公式渲染和图片私有资源签名映射 |
 | 分数线 | `ScorelinePage.tsx` | 已覆盖 | 动态字段/趋势、后台维护和 JSON 批量导入已有；后续补复杂筛选优化和 AI 择校数据上下文 |
 | 商城/SVIP | `Store.tsx`、`SvipModal.tsx` | 部分覆盖 | 套餐、订单、订单详情/状态轮询、权益、激活码预检查/兑换、优惠券领取/下单抵扣、微信支付/支付宝 provider 主链路、内部退款状态机、微信/支付宝发起退款、退款查询确认、退款通知 webhook、支付/退款补偿 worker、全额退款权益撤销、资金对账手工/API 导入比对、微信/支付宝官方账单下载 worker、异常查询、差错工单和事件轨迹、异常订单运营台、人工调整凭证复核报表已有；Taro 学生收银台/订单详情和租户财务运营台第一版已接；仍缺更完整售后体验、真实生产账单抽样验收和生产账号联调 |

docs/refactor/next-development-todo.md

@@ -177,7 +177,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、学生批量运营增强和小程序兼容验证。
 
 ### 第一批页面
 
@@ -200,6 +200,7 @@
    - 单元列表、单词列表
    - 学习状态、收藏、统计
    - 每日新词、复习计划、认识/不认识上报
+   - Taro 已接卡片翻转、发音、美/英音切换、收藏练习、单词跳转和本地位置恢复；后续补租户级发音源配置、收藏专项统计和小程序真机音频兼容验收
 
 5. 知识手册
    - 手册入口、章节、小节、知识点阅读
@@ -227,7 +228,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 迁移。

docs/refactor/taro-frontend-integration.md

@@ -866,6 +866,21 @@ approved -> cancelled
 
 背单词页面分三类数据：单元列表、每日计划、单词进度。前端不需要计算下次复习日期，只提交“认识/不认识”，由后端统一更新 `nextReviewDate`、连续正确、掌握状态和每日复习计划。
 
+当前 Taro 页面：
+
+```text
+apps/taro/src/pages/student/vocabulary/index.tsx
+apps/taro/src/services/pronunciation.ts
+```
+
+已支持三种队列：
+
+- `今日计划`：调用 `review-plan`，优先学习后端计划中的待复习/新词。
+- `单元学习`：调用 `vocabulary-words`，用于按单元顺序学习。
+- `收藏练习`：调用 `vocabulary/favorites`，用于复习本人收藏单词。
+
+页面交互已包含卡片翻转、上一个/下一个、单词列表跳转、发音、美/英音切换、收藏/取消收藏和按 `unitId + mode` 保存本地当前位置。权威掌握状态仍以后端 `vocabulary/review` 返回和后续统计为准。
+
 取今日计划：
 
 ```http
@@ -906,6 +921,8 @@ GET /api/learning/vocabulary/review-plan?unitId=<unitId>&reviewLimit=30&newLimit
 - `review-plan.words` 是本轮学习队列；卡片翻转、上一个、跳转、收藏状态属于前端交互。
 - 每个单词点击“认识/不认识”后调用 `POST /api/learning/vocabulary/review`。
 - 返回的 `status`、`dueLevel`、`nextReviewDate` 作为后续展示依据，不在前端重算间隔。
+- 收藏列表调用 `GET /api/learning/vocabulary/favorites?unitId=<unitId>`；收藏/取消收藏调用 `POST /api/learning/vocabulary/favorites`。
+- 发音当前使用前端 `services/pronunciation.ts`：H5 优先播放有道 dictvoice HTTPS 音频并用 Web Speech 兜底，小程序优先使用 `Taro.createInnerAudioContext`。这里不保存任何密钥；如果后续租户需要自定义发音源，应改为后端返回可配置的公开 provider URL 或资源台账引用。
 - 旧的 `POST /api/learning/vocabulary/progress` 保留给兼容和后台手工修正；普通学习流优先用 `vocabulary/review`。
 
 ## 视频播放契约
@@ -2335,11 +2352,12 @@ pages/student/profile/index
 ```text
 src/components/RichContent.tsx 安全富文本渲染：题干、选项、解析、知识手册、报告复盘
 src/services/catalog.ts    目录、题库、单词、手册、分数线、资料
-src/services/learning.ts   练习 session、答题、收藏、错题/收藏复习、交卷报告、单词复习
+src/services/learning.ts   练习 session、答题、收藏、错题/收藏复习、交卷报告、单词复习和单词收藏列表
 src/services/commerce.ts   套餐、优惠券、下单、支付参数、订单详情、权益、激活码
 src/services/profile.ts    个人中心、地区目标、签到、反馈、勋章、倒计时
 src/services/video.ts      题目视频列表、播放签名
 src/services/ai.ts         AI 择校推荐生成、报告列表、报告详情
+src/services/pronunciation.ts H5/小程序单词发音适配
 src/services/tenantAdmin.ts 租户后台看板、权限矩阵、成员、学生创建/批量导入/分班/备注/跟进、内容、营销、设置、角色模板写操作、公共题库采纳/同步/单条和批量冲突处理、导入详情/复检、CRM 配置/队列、分佣规则/成员比例/订单/结算、优惠券规则/核销报表
 src/services/tenantFinance.ts 租户财务运营：退款状态机、官方账单任务、对账批次/明细、差错工单、异常订单和人工调整凭证
 src/services/platformAdmin.ts 平台后台租户、套餐账单、用量、公共题库授权
@@ -2358,7 +2376,7 @@ npm run build:taro:h5:platform
 
 下一批前端开发重点：
 
-- 学生端：地区选择、题目视频播放、题目反馈、错题/收藏专题页、模考交卷报告、收银台、订单详情、售后入口、题干/解析/知识手册 RichContent 安全渲染和逐题复盘已接第一版；下一批继续补真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词卡片发音、小程序支付容器和分享场景。
+- 学生端：地区选择、题目视频播放、题目反馈、错题/收藏专题页、模考交卷报告、收银台、订单详情、售后入口、题干/解析/知识手册 RichContent 安全渲染、逐题复盘、背单词卡片学习/发音/收藏练习已接第一版；下一批继续补真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词更细统计、小程序支付容器和分享场景。
 - 租户后台：工作台已接权限驱动模块入口；学生运营页已接学生创建/更新、禁用/恢复、批量导入、批量分班、学生备注、跟进任务和完成跟进第一版；题库内容页已接公共题库采纳/同步、冲突查看、单条/批量采纳平台或保留本地、导入问题、模板预览/下载、异步任务轮询和导入后复检第一版；营销中心已接 CRM 配置保存、CRM 队列按状态查看、分佣默认规则、成员分佣比例、分佣订单明细、结算单生成、审核通过/驳回、标记线下打款、优惠券规则表单、筛选、核销明细和核销报表第一版；财务运营页已接退款申请/审核/供应商提交与查询、官方账单任务、对账批次/异常明细、差错工单处理、人工调整凭证提交/复核和异常订单运营台第一版；租户设置页已接主题模板、草稿预览、发布、角色模板创建、编辑、停用、权限点、菜单、模块、字段、基础数据范围、成员搜索/新建、成员绑定模板、成员状态和额外权限覆盖第一版；下一批继续补更精细的学生导入模板体验、真实生产账单抽样验收、真实打款 provider、发票、更细数据范围 UI 和主题素材库。
 - 平台后台：租户创建、状态变更、订阅开通、账单生成、人工收款确认、用量录入、公共题库授权编辑已接第一版；继续补租户详情/编辑、平台审计、自动计费和批量账单操作。
 - 小程序：验证 `Taro.login`、微信支付、分享 scene/referral、Supabase client 兼容性；如不稳定，保留 `apps/api/auth/*` 作为小程序登录适配层。