feat: add safe rich content rendering for student flows

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 择校推荐、资料和个人中心；租户后台第一批页面已接入工作台、数据看板、学生/班级、题库内容、营销中心、财务运营和租户设置，营销中心已接 CRM、分佣结算、优惠券规则/核销报表，财务运营已接退款状态机、官方账单任务、对账异常、差错工单和调整凭证第一版，设置页已接主题模板、草稿预览/发布、角色模板和成员绑定第一版；平台后台已接入工作台、租户管理、账务中心、公共题库授权，以及创建租户、状态变更、订阅、账单、收款、用量和题库授权第一版写操作。
+- `apps/taro` 已建立 Taro 4 React 跨端前端地基，包含 H5 学生端、租户后台、平台后台三套构建入口、租户解析、统一 API client 和 Supabase Auth client 初始化；学生端第一批页面已接入登录、首页、题库、练习、背单词、知识手册、分数线、AI 择校推荐、资料和个人中心，并新增 `RichContent` 安全渲染组件用于题干、选项、解析、知识手册和逐题复盘；租户后台第一批页面已接入工作台、数据看板、学生/班级、题库内容、营销中心、财务运营和租户设置，营销中心已接 CRM、分佣结算、优惠券规则/核销报表，财务运营已接退款状态机、官方账单任务、对账异常、差错工单和调整凭证第一版，设置页已接主题模板、草稿预览/发布、角色模板和成员绑定第一版；平台后台已接入工作台、租户管理、账务中心、公共题库授权，以及创建租户、状态变更、订阅、账单、收款、用量和题库授权第一版写操作。
 - 根目录已清理为新 Supabase SaaS monorepo 编排层；旧 PocketBase/React 项目和旧构建产物仅保留在 `参考/` 目录作为迁移参考，不进入 Git 提交。
 
 更完整的进度看这些文档：
@@ -316,7 +316,7 @@ API 身份上下文：
 - 商户密钥、短信密钥、OAuth app secret 等必须进入 `app_private.tenant_secrets`，或后续生产 KMS/Vault。
 - 资料、PDF、视频等资源必须先进入 `content_assets` 台账，再由 API 校验权限并下发签名 URL；学生端预览、锁定资料和视频会使用短 TTL，并返回带 `traceId` 的 `watermark` 上下文供前端渲染可见水印。`members/svip/private` 外部 CDN URL 默认拒绝，除非显式登记 provider-managed 访问；所有上传签名、上传确认、下载/预览 granted/denied 都写入 `content_asset_access_events`。托管对象必须 `uploadStatus=verified` 且 `securityScanStatus=passed` 后才能发布、下载、预览或播放；生产环境应定时运行 assets worker 复检对象元数据，执行 `metadata_rules` 和外部 HTTP scanner，异常资源会被标记 failed/skipped 并退回 draft。
 - 题库入口和分类使用 `content_entries/content_nodes`；题目列表和练习规则使用 `question_collections/practice_blueprints`，前端不要再把旧树字段当成唯一业务结构。
-- 批量导入必须先写 `content_import_jobs/items/issues`，保留原始 payload、规范化 payload、逐行问题和审计记录。题目、单词、知识手册、分数线和视频 JSON/CSV/Excel 导入已走这套后台校验管线；大批量任务可提交 `executionMode=async`，由 imports worker 消费，前端只轮询 job 状态和展示 issues。
+- 批量导入必须先写 `content_import_jobs/items/issues`，保留原始 payload、规范化 payload、逐行问题和审计记录。题目、单词、知识手册、分数线和视频 JSON/CSV/Excel 导入已走这套后台校验管线；大批量任务可提交 `executionMode=async`，由 imports worker 消费，前端只轮询 job 状态和展示 issues。学生端题干/解析/手册内容统一走 `apps/taro/src/components/RichContent.tsx` 做受控渲染，不执行导入内容中的任意 HTML/JS。
 - 题库导出必须由后端按权限生成，不允许前端直接读取数据库拼导出文件；不开启答案/解析时，顶层题目和复合题子题都必须脱敏；PDF/Word/每日一练 ZIP 只通过 exports worker 写入 `content_assets` 后再签名下载/预览。
 - 支付 webhook 必须先设计幂等键和验签流程，再进入生产使用；生产环境还应定时运行 commerce worker 兜底供应商漏通知和处理中退款，并定时运行 provider-bills worker 下载官方账单核对本地订单。官方账单下载任务只保存下载域名、hash 和对账批次 ID，不向前端暴露下载 URL 或商户密钥。优惠券状态、最低金额、封顶、单用户限次、首单、适用套餐/地区和订单抵扣都由后端重新校验，前端只能展示后端返回金额。对账差错工单和人工调整凭证只允许记录财务处理结论、附件引用和审计事件，不允许前端、工单接口或凭证审批接口直接篡改订单、支付、退款或权益状态。
 
@@ -346,7 +346,7 @@ git diff --check
 优先继续补：
 
 1. 真实云端 Auth/JWKS 回归、RLS 深测和生产环境配置验收。
-2. 继续补 Taro 前端：学生端长题干/公式图片混排/小程序支付与分享，租户后台更细导入体验/数据范围 UI/主题素材库/财务复核细节，平台后台租户详情/审计/自动计费增强，小程序兼容验证。
+2. 继续补 Taro 前端：学生端真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词卡片发音、小程序支付与分享，租户后台更细导入体验/数据范围 UI/主题素材库/财务复核细节，平台后台租户详情/审计/自动计费增强，小程序兼容验证。
 3. 对象存储真实 AV/内容安全扫描服务联调、CDN 防盗链、转码/CDN 级水印和生命周期策略。
 4. 题库导出模板精排、导出操作台、真实数据 dry-run、导入字段映射 UI 和复检结果操作台。
 5. 真实 OAuth/短信/支付生产账号联调、真实生产账单抽样验收、真实打款 provider、发票、公共题库版本通知/冲突处理操作台、积分活动深化，以及排行榜防刷/预聚合。

apps/taro/src/components/RichContent.tsx

@@ -0,0 +1,346 @@
+import Taro from '@tarojs/taro';
+import { Image, Text, View } from '@tarojs/components';
+import './rich-content.css';
+
+type InlineToken =
+  | { type: 'text'; text: string }
+  | { type: 'bold'; text: string }
+  | { type: 'code'; text: string }
+  | { type: 'formula'; text: string; display?: boolean };
+
+type RichBlock =
+  | { type: 'paragraph'; tokens: InlineToken[] }
+  | { type: 'heading'; level: number; tokens: InlineToken[] }
+  | { type: 'formula'; text: string }
+  | { type: 'code'; language?: string; text: string }
+  | { type: 'image'; url: string; alt: string }
+  | { type: 'blocked-image'; alt: string }
+  | { type: 'table'; header: string[]; align: string[]; rows: string[][] };
+
+export interface RichContentProps {
+  content?: unknown;
+  className?: string;
+  compact?: boolean;
+  muted?: boolean;
+  mediaUrls?: Array<string | null | undefined>;
+  emptyText?: string;
+}
+
+const IMAGE_RE = /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+
+function classNames(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(' ');
+}
+
+function decodeHtmlEntities(value: string) {
+  return value
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/&quot;/gi, '"')
+    .replace(/&#39;/gi, "'")
+    .replace(/&#(\d+);/g, (_, code) => {
+      const value = Number(code);
+      return Number.isFinite(value) ? String.fromCharCode(value) : '';
+    })
+    .replace(/&#x([0-9a-f]+);/gi, (_, code) => {
+      const value = Number.parseInt(code, 16);
+      return Number.isFinite(value) ? String.fromCharCode(value) : '';
+    });
+}
+
+function attrValue(attrs: string, name: string) {
+  const pattern = new RegExp(`${name}\\s*=\\s*["']([^"']+)["']`, 'i');
+  return attrs.match(pattern)?.[1] || '';
+}
+
+function normalizeSource(value: unknown) {
+  if (value === undefined || value === null) return '';
+  return decodeHtmlEntities(String(value))
+    .replace(/\r\n?/g, '\n')
+    .replace(/\u0000/g, '')
+    .replace(/<script\b[\s\S]*?<\/script>/gi, '')
+    .replace(/<style\b[\s\S]*?<\/style>/gi, '')
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<\/p>/gi, '\n\n')
+    .replace(/<p\b[^>]*>/gi, '')
+    .replace(/<img\b([^>]*)>/gi, (_, attrs) => {
+      const src = attrValue(attrs, 'src');
+      const alt = attrValue(attrs, 'alt');
+      return src ? `\n![${alt || '图片'}](${src})\n` : '';
+    })
+    .replace(/<(strong|b)\b[^>]*>([\s\S]*?)<\/\1>/gi, '**$2**')
+    .replace(/<code\b[^>]*>([\s\S]*?)<\/code>/gi, '`$1`')
+    .replace(/<\/?[a-z][^>]*>/gi, '');
+}
+
+export function safeTextContent(value: unknown) {
+  return normalizeSource(value).trim();
+}
+
+export function normalizeSafeMediaUrl(value: unknown) {
+  const raw = typeof value === 'string' ? value.trim() : '';
+  if (!raw) return null;
+  if (/^(javascript|data|vbscript):/i.test(raw)) return null;
+  if (raw.startsWith('//')) return null;
+  if (raw.startsWith('/')) return raw;
+  try {
+    const url = new URL(raw);
+    if (url.protocol === 'https:') return url.href;
+    if (url.protocol === 'http:' && ['localhost', '127.0.0.1'].includes(url.hostname)) return url.href;
+  } catch (_error) {
+    return null;
+  }
+  return null;
+}
+
+function splitTableCells(line: string) {
+  const trimmed = line.trim().replace(/^\|/, '').replace(/\|$/, '');
+  return trimmed.split('|').map(cell => cell.trim());
+}
+
+function isTableSeparator(line?: string) {
+  if (!line) return false;
+  const cells = splitTableCells(line);
+  return cells.length > 0 && cells.every(cell => /^:?-{3,}:?$/.test(cell.trim()));
+}
+
+function tableAligns(separator: string) {
+  return splitTableCells(separator).map(cell => {
+    if (cell.startsWith(':') && cell.endsWith(':')) return 'center';
+    if (cell.endsWith(':')) return 'right';
+    return 'left';
+  });
+}
+
+function parseInline(value: string): InlineToken[] {
+  const tokens: InlineToken[] = [];
+  const pattern = /(\*\*[^*]+\*\*|`[^`]+`|\\\([^)]+\\\)|\\\[[\s\S]+?\\\]|\$[^$\n]+\$)/g;
+  let cursor = 0;
+  for (const match of value.matchAll(pattern)) {
+    const index = match.index || 0;
+    if (index > cursor) tokens.push({ type: 'text', text: value.slice(cursor, index) });
+    const raw = match[0];
+    if (raw.startsWith('**')) {
+      tokens.push({ type: 'bold', text: raw.slice(2, -2) });
+    } else if (raw.startsWith('`')) {
+      tokens.push({ type: 'code', text: raw.slice(1, -1) });
+    } else if (raw.startsWith('\\[')) {
+      tokens.push({ type: 'formula', text: raw.slice(2, -2), display: true });
+    } else if (raw.startsWith('\\(')) {
+      tokens.push({ type: 'formula', text: raw.slice(2, -2) });
+    } else {
+      tokens.push({ type: 'formula', text: raw.slice(1, -1) });
+    }
+    cursor = index + raw.length;
+  }
+  if (cursor < value.length) tokens.push({ type: 'text', text: value.slice(cursor) });
+  return tokens.filter(token => token.text.length > 0);
+}
+
+function appendParagraphWithImages(blocks: RichBlock[], rawText: string) {
+  const text = rawText.trim();
+  if (!text) return;
+  IMAGE_RE.lastIndex = 0;
+  let cursor = 0;
+  let matched = false;
+  for (const match of text.matchAll(IMAGE_RE)) {
+    matched = true;
+    const index = match.index || 0;
+    const before = text.slice(cursor, index).trim();
+    if (before) blocks.push({ type: 'paragraph', tokens: parseInline(before) });
+    const url = normalizeSafeMediaUrl(match[2]);
+    if (url) {
+      blocks.push({ type: 'image', url, alt: match[1] || '图片' });
+    } else {
+      blocks.push({ type: 'blocked-image', alt: match[1] || '图片' });
+    }
+    cursor = index + match[0].length;
+  }
+  const rest = text.slice(cursor).trim();
+  if (rest || !matched) blocks.push({ type: 'paragraph', tokens: parseInline(rest || text) });
+}
+
+function parseBlocks(input: unknown, mediaUrls: RichContentProps['mediaUrls'] = []) {
+  const source = normalizeSource(input);
+  const blocks: RichBlock[] = [];
+  const paragraph: string[] = [];
+
+  function flushParagraph() {
+    if (!paragraph.length) return;
+    appendParagraphWithImages(blocks, paragraph.join('\n'));
+    paragraph.length = 0;
+  }
+
+  const lines = source.split('\n');
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index];
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      flushParagraph();
+      index += 1;
+      continue;
+    }
+
+    const codeStart = trimmed.match(/^```([a-z0-9_-]+)?\s*$/i);
+    if (codeStart) {
+      flushParagraph();
+      const codeLines: string[] = [];
+      index += 1;
+      while (index < lines.length && !lines[index].trim().startsWith('```')) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+      if (index < lines.length) index += 1;
+      blocks.push({ type: 'code', language: codeStart[1], text: codeLines.join('\n') });
+      continue;
+    }
+
+    if (trimmed.startsWith('$$')) {
+      flushParagraph();
+      const formulaLines: string[] = [];
+      const first = trimmed.replace(/^\$\$/, '');
+      if (first.endsWith('$$') && first.length > 2) {
+        formulaLines.push(first.replace(/\$\$$/, ''));
+        index += 1;
+      } else {
+        if (first) formulaLines.push(first);
+        index += 1;
+        while (index < lines.length && !lines[index].trim().endsWith('$$')) {
+          formulaLines.push(lines[index]);
+          index += 1;
+        }
+        if (index < lines.length) {
+          formulaLines.push(lines[index].trim().replace(/\$\$$/, ''));
+          index += 1;
+        }
+      }
+      blocks.push({ type: 'formula', text: formulaLines.join('\n').trim() });
+      continue;
+    }
+
+    const heading = trimmed.match(/^(#{1,4})\s+(.+)$/);
+    if (heading) {
+      flushParagraph();
+      blocks.push({ type: 'heading', level: heading[1].length, tokens: parseInline(heading[2]) });
+      index += 1;
+      continue;
+    }
+
+    if (trimmed.includes('|') && isTableSeparator(lines[index + 1])) {
+      flushParagraph();
+      const header = splitTableCells(trimmed);
+      const align = tableAligns(lines[index + 1]);
+      const rows: string[][] = [];
+      index += 2;
+      while (index < lines.length && lines[index].trim().includes('|')) {
+        rows.push(splitTableCells(lines[index]));
+        index += 1;
+      }
+      blocks.push({ type: 'table', header, align, rows });
+      continue;
+    }
+
+    paragraph.push(line);
+    index += 1;
+  }
+  flushParagraph();
+
+  for (const mediaUrl of mediaUrls || []) {
+    const url = normalizeSafeMediaUrl(mediaUrl);
+    if (url) blocks.push({ type: 'image', url, alt: '题目图片' });
+  }
+
+  return blocks;
+}
+
+function renderInline(token: InlineToken, index: number) {
+  if (token.type === 'bold') {
+    return <Text key={index} className='rich-bold'>{token.text}</Text>;
+  }
+  if (token.type === 'code') {
+    return <Text key={index} className='rich-code-inline'>{token.text}</Text>;
+  }
+  if (token.type === 'formula') {
+    return <Text key={index} className={token.display ? 'rich-formula-inline display' : 'rich-formula-inline'}>{token.text}</Text>;
+  }
+  return <Text key={index}>{token.text}</Text>;
+}
+
+function preview(url: string) {
+  Taro.previewImage({ current: url, urls: [url] }).catch(() => undefined);
+}
+
+export default function RichContent({ content, className, compact = false, muted = false, mediaUrls, emptyText }: RichContentProps) {
+  const blocks = parseBlocks(content, mediaUrls);
+
+  if (!blocks.length) {
+    return emptyText ? <Text className='rich-empty'>{emptyText}</Text> : null;
+  }
+
+  return (
+    <View className={classNames('rich-content', compact && 'compact', muted && 'muted', className)}>
+      {blocks.map((block, index) => {
+        if (block.type === 'heading') {
+          return (
+            <View key={index} className={classNames('rich-heading', `level-${block.level}`)}>
+              {block.tokens.map(renderInline)}
+            </View>
+          );
+        }
+        if (block.type === 'paragraph') {
+          return (
+            <View key={index} className='rich-paragraph'>
+              {block.tokens.map(renderInline)}
+            </View>
+          );
+        }
+        if (block.type === 'formula') {
+          return <View key={index} className='rich-formula-block'><Text>{block.text}</Text></View>;
+        }
+        if (block.type === 'code') {
+          return (
+            <View key={index} className='rich-code-block'>
+              {block.language ? <Text className='rich-code-language'>{block.language}</Text> : null}
+              <Text className='rich-code-text'>{block.text}</Text>
+            </View>
+          );
+        }
+        if (block.type === 'image') {
+          return (
+            <View key={index} className='rich-image-wrap' onClick={() => preview(block.url)}>
+              <Image className='rich-image' src={block.url} mode='widthFix' />
+              {block.alt ? <Text className='rich-image-caption'>{block.alt}</Text> : null}
+            </View>
+          );
+        }
+        if (block.type === 'blocked-image') {
+          return <View key={index} className='rich-blocked-image'>图片地址未通过安全校验：{block.alt}</View>;
+        }
+        return (
+          <View key={index} className='rich-table'>
+            <View className='rich-table-row header'>
+              {block.header.map((cell, cellIndex) => (
+                <View key={cellIndex} className={classNames('rich-table-cell', block.align[cellIndex])}>
+                  {parseInline(cell).map(renderInline)}
+                </View>
+              ))}
+            </View>
+            {block.rows.map((row, rowIndex) => (
+              <View key={rowIndex} className='rich-table-row'>
+                {block.header.map((_, cellIndex) => (
+                  <View key={cellIndex} className={classNames('rich-table-cell', block.align[cellIndex])}>
+                    {parseInline(row[cellIndex] || '').map(renderInline)}
+                  </View>
+                ))}
+              </View>
+            ))}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

apps/taro/src/components/rich-content.css

@@ -0,0 +1,214 @@
+.rich-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  color: #111827;
+}
+
+.rich-content.compact {
+  gap: 10px;
+}
+
+.rich-content.muted {
+  color: #475569;
+}
+
+.rich-paragraph,
+.rich-heading {
+  display: block;
+  min-width: 0;
+  color: inherit;
+  font-size: 28px;
+  font-weight: 520;
+  line-height: 1.62;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.rich-content.compact .rich-paragraph {
+  font-size: 24px;
+  line-height: 1.55;
+}
+
+.rich-content.muted .rich-paragraph {
+  color: #64748b;
+}
+
+.rich-heading {
+  color: #0f172a;
+  font-size: 32px;
+  font-weight: 820;
+  line-height: 1.35;
+}
+
+.rich-heading.level-2 {
+  font-size: 30px;
+}
+
+.rich-heading.level-3,
+.rich-heading.level-4 {
+  font-size: 28px;
+}
+
+.rich-bold {
+  color: #0f172a;
+  font-weight: 820;
+}
+
+.rich-code-inline {
+  display: inline-flex;
+  max-width: 100%;
+  padding: 0 8px;
+  border: 1px solid #dbe3ee;
+  border-radius: 6px;
+  background: #f8fafc;
+  color: #334155;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 23px;
+  line-height: 1.35;
+  word-break: break-all;
+}
+
+.rich-formula-inline {
+  display: inline-flex;
+  max-width: 100%;
+  margin: 0 4px;
+  padding: 0 8px;
+  border-radius: 6px;
+  background: #f8fafc;
+  color: #0f172a;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 24px;
+  line-height: 1.45;
+  word-break: break-all;
+}
+
+.rich-formula-inline.display {
+  display: flex;
+}
+
+.rich-formula-block,
+.rich-code-block {
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid #dbe3ee;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #0f172a;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 24px;
+  line-height: 1.55;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.rich-code-language {
+  display: block;
+  margin-bottom: 10px;
+  color: #64748b;
+  font-size: 20px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.rich-code-text {
+  display: block;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.rich-image-wrap {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.rich-image {
+  display: block;
+  width: 100%;
+  max-height: 640px;
+  background: #f8fafc;
+}
+
+.rich-image-caption {
+  display: block;
+  padding: 10px 14px 14px;
+  color: #64748b;
+  font-size: 20px;
+  line-height: 1.4;
+}
+
+.rich-blocked-image {
+  padding: 16px;
+  border: 1px dashed #fca5a5;
+  border-radius: 8px;
+  background: #fff1f2;
+  color: #be123c;
+  font-size: 22px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.rich-table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid #dbe3ee;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.rich-table-row {
+  display: flex;
+  min-width: 680px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.rich-table-row:first-child {
+  border-top: 0;
+}
+
+.rich-table-row.header {
+  background: #f8fafc;
+}
+
+.rich-table-cell {
+  flex: 1;
+  min-width: 160px;
+  padding: 14px 16px;
+  border-left: 1px solid #e2e8f0;
+  color: #334155;
+  font-size: 22px;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.rich-table-cell:first-child {
+  border-left: 0;
+}
+
+.rich-table-row.header .rich-table-cell {
+  color: #0f172a;
+  font-weight: 820;
+}
+
+.rich-table-cell.center {
+  text-align: center;
+}
+
+.rich-table-cell.right {
+  text-align: right;
+}
+
+.rich-empty {
+  color: #94a3b8;
+  font-size: 22px;
+  line-height: 1.45;
+}

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Text, View } from '@tarojs/components';
+import RichContent from '@/components/RichContent';
 import { loadHandbookChapters, loadHandbookEntries, loadHandbookSubjects, type HandbookChapter, type HandbookEntry, type HandbookSubject } from '@/services/catalog';
 import '../student.css';
 
@@ -79,7 +80,10 @@ export default function StudentHandbookPage() {
           {entries.map(item => (
             <View className='list-row' key={item.id}>
               <Text className='row-main'>{item.title}</Text>
-              <Text className='row-meta'>{item.summary || item.content || '暂无内容'}</Text>
+              {item.summary ? <RichContent content={item.summary} compact muted /> : null}
+              <View className='handbook-entry-body'>
+                <RichContent content={item.content || '暂无内容'} compact />
+              </View>
             </View>
           ))}
         </View>

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import Taro, { useRouter } from '@tarojs/taro';
 import { Button, Text, Textarea, View } from '@tarojs/components';
+import RichContent from '@/components/RichContent';
 import { loadCollectionQuestions, loadQuestions } from '@/services/catalog';
 import {
   createPracticeSession,
@@ -527,8 +528,7 @@ export default function StudentPracticePage() {
               <Text className='row-meta'>{current.typeLabel || current.type || '题目'}</Text>
               <Text className='status-badge'>{answerLabel(answerState)}</Text>
             </View>
-            <Text className='row-main'>{current.content || '未提供题干'}</Text>
+            <RichContent content={current.content || '未提供题干'} mediaUrls={[current.mediaUrl]} />
-            {current.mediaUrl ? <Text className='row-meta break-text'>{current.mediaUrl}</Text> : null}
             {hasCompositeSubQuestions ? <Text className='row-meta'>包含 {subQuestions.length} 个子题，请结合题干作答。</Text> : null}
           </View>
           {hasCompositeSubQuestions ? (
@@ -545,7 +545,7 @@ export default function StudentPracticePage() {
                       <Text className='row-meta'>第 {subQuestionIndex + 1} 小题 · {String(subQuestion.typeLabel || subQuestion.type || '子题')}</Text>
                       {result ? <Text className='status-badge'>{result.isCorrect === true ? '正确' : result.isCorrect === false ? '错误' : '已答'}</Text> : null}
                     </View>
-                    <Text className='row-main'>{String(subQuestion.content || '未提供子题题干')}</Text>
+                    <RichContent content={String(subQuestion.content || '未提供子题题干')} compact />
                     {objective ? (
                       <View className='sub-option-list'>
                         {subOptions.map((option, optionIndex) => (
@@ -554,7 +554,10 @@ export default function StudentPracticePage() {
                             key={`${id}-${optionIndex}`}
                             onClick={() => toggleSubOption(subQuestion, subQuestionIndex, optionIndex)}
                           >
-                            <Text className='row-main'>{String.fromCharCode(65 + optionIndex)}. {plainOption(option, optionIndex)}</Text>
+                            <View className='option-line'>
+                              <Text className='option-prefix'>{String.fromCharCode(65 + optionIndex)}.</Text>
+                              <RichContent className='option-rich' content={plainOption(option, optionIndex)} compact />
+                            </View>
                           </View>
                         ))}
                       </View>
@@ -579,8 +582,18 @@ export default function StudentPracticePage() {
                       <View className='sub-explanation'>
                         {result?.correctOptionIndices?.length ? <Text className='row-meta'>正确选项：{result.correctOptionIndices.map(item => String.fromCharCode(65 + item)).join('、')}</Text> : null}
                         {result?.correctOptionIndex !== null && result?.correctOptionIndex !== undefined ? <Text className='row-meta'>正确选项：{String.fromCharCode(65 + result.correctOptionIndex)}</Text> : null}
-                        {result?.correctAnswerText ? <Text className='row-meta'>参考答案：{result.correctAnswerText}</Text> : null}
+                        {result?.correctAnswerText ? (
-                        {result?.explanation ? <Text className='row-meta'>{result.explanation}</Text> : null}
+                          <View className='answer-detail'>
+                            <Text className='answer-detail-label'>参考答案</Text>
+                            <RichContent content={result.correctAnswerText} compact muted />
+                          </View>
+                        ) : null}
+                        {result?.explanation ? (
+                          <View className='answer-detail'>
+                            <Text className='answer-detail-label'>解析</Text>
+                            <RichContent content={result.explanation} compact muted />
+                          </View>
+                        ) : null}
                       </View>
                     ) : null}
                   </View>
@@ -593,7 +606,10 @@ export default function StudentPracticePage() {
               key={String(optionIndex)}
               onClick={() => toggleOption(optionIndex)}
             >
-              <Text className='row-main'>{String.fromCharCode(65 + optionIndex)}. {plainOption(option, optionIndex)}</Text>
+              <View className='option-line'>
+                <Text className='option-prefix'>{String.fromCharCode(65 + optionIndex)}.</Text>
+                <RichContent className='option-rich' content={plainOption(option, optionIndex)} compact />
+              </View>
             </View>
           )) : (
             <View className='quiet-panel'>
@@ -609,10 +625,20 @@ export default function StudentPracticePage() {
             <View className='quiet-panel'>
               {isSubmitted ? <Text className={answerState?.isCorrect ? 'success-text' : answerState?.isCorrect === false ? 'error-text' : 'row-meta'}>{answerLabel(answerState)}</Text> : null}
               {answerState?.subResults?.length ? <Text className='row-meta'>子题正确 {answerState.subResults.filter(item => item.isCorrect === true).length}/{answerState.subResults.length}</Text> : null}
-              {current.answerText ? <Text className='row-main'>参考答案：{current.answerText}</Text> : null}
+              {current.answerText ? (
+                <View className='answer-detail'>
+                  <Text className='answer-detail-label'>参考答案</Text>
+                  <RichContent content={current.answerText} compact />
+                </View>
+              ) : null}
               {current.correctOptionIndices?.length ? <Text className='row-meta'>正确选项：{current.correctOptionIndices.map(item => String.fromCharCode(65 + item)).join('、')}</Text> : null}
               {current.correctOptionIndex !== null && current.correctOptionIndex !== undefined ? <Text className='row-meta'>正确选项：{String.fromCharCode(65 + current.correctOptionIndex)}</Text> : null}
-              {current.explanation ? <Text className='row-meta'>{current.explanation}</Text> : null}
+              {current.explanation ? (
+                <View className='answer-detail'>
+                  <Text className='answer-detail-label'>解析</Text>
+                  <RichContent content={current.explanation} compact muted />
+                </View>
+              ) : null}
             </View>
           ) : null}
           <View className='toolbar wrap'>

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import Taro, { useRouter } from '@tarojs/taro';
 import { Button, Text, View } from '@tarojs/components';
+import RichContent from '@/components/RichContent';
 import {
   loadPracticeHistory,
   loadPracticeReports,
@@ -14,6 +15,28 @@ function percent(value?: number) {
   return `${Math.round((value || 0) * 100)}%`;
 }
 
+function stringValue(source: Record<string, unknown>, key: string) {
+  const value = source[key];
+  return typeof value === 'string' ? value : '';
+}
+
+function numberArray(source: Record<string, unknown>, key: string) {
+  const value = source[key];
+  return Array.isArray(value) ? value.map(item => Number(item)).filter(Number.isFinite) : [];
+}
+
+function answerChoiceLabel(value: unknown) {
+  const num = Number(value);
+  return Number.isFinite(num) ? String.fromCharCode(65 + num) : String(value);
+}
+
+function resultStatus(result: Record<string, unknown>) {
+  if (!result.answered) return '未答';
+  if (result.isCorrect === true) return '正确';
+  if (result.isCorrect === false) return '错误';
+  return '已答';
+}
+
 export default function StudentReportsPage() {
   const router = useRouter();
   const practiceSessionId = router.params?.practiceSessionId || '';
@@ -109,6 +132,68 @@ export default function StudentReportsPage() {
         </View>
       ) : null}
 
+      {current?.questionResults?.length ? (
+        <View className='section-block'>
+          <Text className='section-heading'>逐题复盘</Text>
+          <View className='list-stack'>
+            {current.questionResults.map((raw, index) => {
+              const item = raw || {};
+              const result = item as Record<string, unknown>;
+              const selectedOptions = numberArray(result, 'selectedOptions').map(answerChoiceLabel);
+              const correctOptions = numberArray(result, 'correctOptionIndices').map(answerChoiceLabel);
+              const correctOptionIndex = result.correctOptionIndex;
+              if (!correctOptions.length && correctOptionIndex !== null && correctOptionIndex !== undefined) {
+                correctOptions.push(answerChoiceLabel(correctOptionIndex));
+              }
+              const subResults = Array.isArray(result.subResults) ? result.subResults as Record<string, unknown>[] : [];
+              return (
+                <View className='list-row' key={stringValue(result, 'questionId') || String(index)}>
+                  <View className='amount-row'>
+                    <Text className='row-meta'>第 {index + 1} 题 · {stringValue(result, 'questionType') || '题目'}</Text>
+                    <Text className={`status-badge ${result.isCorrect === false ? 'danger' : ''}`}>{resultStatus(result)}</Text>
+                  </View>
+                  <RichContent content={stringValue(result, 'content') || '暂无题干'} compact />
+                  <Text className='row-meta'>得分 {String(result.score ?? 0)} / {String(result.totalScore ?? 0)}</Text>
+                  {selectedOptions.length ? <Text className='row-meta'>你的选择：{selectedOptions.join('、')}</Text> : null}
+                  {correctOptions.length ? <Text className='row-meta'>正确选项：{correctOptions.join('、')}</Text> : null}
+                  {stringValue(result, 'answerText') ? (
+                    <View className='answer-detail'>
+                      <Text className='answer-detail-label'>你的答案</Text>
+                      <RichContent content={stringValue(result, 'answerText')} compact muted />
+                    </View>
+                  ) : null}
+                  {stringValue(result, 'correctAnswerText') ? (
+                    <View className='answer-detail'>
+                      <Text className='answer-detail-label'>参考答案</Text>
+                      <RichContent content={stringValue(result, 'correctAnswerText')} compact />
+                    </View>
+                  ) : null}
+                  {stringValue(result, 'explanation') ? (
+                    <View className='answer-detail'>
+                      <Text className='answer-detail-label'>解析</Text>
+                      <RichContent content={stringValue(result, 'explanation')} compact muted />
+                    </View>
+                  ) : null}
+                  {subResults.length ? (
+                    <View className='sub-explanation'>
+                      <Text className='answer-detail-label'>子题明细</Text>
+                      {subResults.map((subResult, subIndex) => (
+                        <View className='report-sub-result' key={stringValue(subResult, 'subQuestionId') || String(subIndex)}>
+                          <Text className='row-meta'>第 {subIndex + 1} 小题 · {resultStatus(subResult)} · 得分 {String(subResult.score ?? 0)} / {String(subResult.totalScore ?? 0)}</Text>
+                          <RichContent content={stringValue(subResult, 'content')} compact muted emptyText='暂无子题题干' />
+                          {stringValue(subResult, 'correctAnswerText') ? <RichContent content={`参考答案：${stringValue(subResult, 'correctAnswerText')}`} compact muted /> : null}
+                          {stringValue(subResult, 'explanation') ? <RichContent content={`解析：${stringValue(subResult, 'explanation')}`} compact muted /> : null}
+                        </View>
+                      ))}
+                    </View>
+                  ) : null}
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
       {error ? <Text className='error-text'>{error}</Text> : null}
     </View>
   );

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

@@ -156,6 +156,40 @@
   border-top: 1px solid #e2e8f0;
 }
 
+.option-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.option-prefix {
+  flex: 0 0 auto;
+  color: #0f172a;
+  font-size: 26px;
+  font-weight: 850;
+  line-height: 1.55;
+}
+
+.option-rich {
+  flex: 1;
+  min-width: 0;
+}
+
+.answer-detail {
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.answer-detail-label {
+  display: block;
+  margin-bottom: 8px;
+  color: #334155;
+  font-size: 22px;
+  font-weight: 820;
+}
+
 .row-main {
   display: block;
   color: #111827;
@@ -303,6 +337,21 @@
   font-weight: 750;
 }
 
+.status-badge.danger {
+  background: #fff1f2;
+  color: #be123c;
+}
+
+.handbook-entry-body {
+  margin-top: 14px;
+}
+
+.report-sub-result {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px dashed #cbd5e1;
+}
+
 .answer-sheet {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));

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 安全渲染、视频解析、题目反馈、模考/练习报告逐题复盘、错题复习、收藏复习、商城收银台、订单详情和售后入口已经有第一版页面。
 - 可以按新后端主模型接入内容导航：
   - `content_entries`
   - `content_nodes`
@@ -66,19 +66,19 @@
 | 首页 | `apps/taro/src/pages/student/home/index.tsx` | `content-entries`、`banners`、`announcements`、`profile/me` |
 | 地区选择 | `apps/taro/src/pages/student/region/index.tsx` | `catalog/regions`、`profile/me`、`PATCH profile/me` |
 | 题库 | `apps/taro/src/pages/student/catalog/index.tsx` | `content-entries`、`content-nodes`、`question-collections`、`practice-blueprints` |
-| 练习 | `apps/taro/src/pages/student/practice/index.tsx` | `practice-sessions`、`questions`、`answers`、`favorites/questions`、`practice-sessions/submit`、`profile/feedbacks`；已接答题卡、后端 session detail 恢复、本地进度恢复、倒计时、主观题 `selfJudgedCorrect`、阅读理解/案例分析 `subAnswers` 多小题 |
+| 练习 | `apps/taro/src/pages/student/practice/index.tsx` | `practice-sessions`、`questions`、`answers`、`favorites/questions`、`practice-sessions/submit`、`profile/feedbacks`；已接答题卡、后端 session detail 恢复、本地进度恢复、倒计时、主观题 `selfJudgedCorrect`、阅读理解/案例分析 `subAnswers` 多小题、题干/选项/解析 RichContent 安全渲染 |
 | 错题/收藏 | `apps/taro/src/pages/student/review/index.tsx` | `wrong-questions/review-plan`、`wrong-questions/resolve`、`favorites/questions`、`practice-sessions` |
-| 练习报告 | `apps/taro/src/pages/student/reports/index.tsx` | `practice-sessions/report`、`practice-reports` |
+| 练习报告 | `apps/taro/src/pages/student/reports/index.tsx` | `practice-sessions/report`、`practice-reports`；已接逐题复盘、复合题子题明细和 RichContent 解析渲染 |
 | 视频解析 | `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/handbook/index.tsx` | `handbook-subjects`、`handbook-chapters`、`handbook-entries` |
+| 知识手册 | `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 -> 答题卡/答题/主观题自评/复合题多小题/收藏/反馈/视频 -> 交卷报告 -> 错题/收藏复习”，会员闭环已经覆盖“选套餐 -> 领优惠券 -> 下单 -> 创建支付参数 -> 状态轮询 -> 订单详情/售后入口”。后续 UI 需要继续按旧题库视觉和 Taro H5/小程序限制优化，并重点补长题干/公式图片混排、小程序分享/支付容器体验。
+当前页面主要用于打通接口和路由。学生端第一版学习闭环已经覆盖“选地区 -> 进题库 -> 创建 session -> 答题卡/答题/主观题自评/复合题多小题/收藏/反馈/视频 -> 交卷报告逐题复盘 -> 错题/收藏复习”，会员闭环已经覆盖“选套餐 -> 领优惠券 -> 下单 -> 创建支付参数 -> 状态轮询 -> 订单详情/售后入口”。`apps/taro/src/components/RichContent.tsx` 是学生端题干、选项、解析和知识手册的统一安全渲染组件：它只支持受控 Markdown 图片、基础表格、粗体、代码和公式占位，不执行任意 HTML/JS，也会拒绝 `javascript:`、`data:` 等危险图片地址。后续 UI 需要继续按旧题库视觉和 Taro H5/小程序限制优化，并重点补真正 KaTeX/小程序公式方案、私有题图签名资源映射、小程序分享/支付容器体验。
 
 ## 已落地的 Taro 租户后台页面
 

docs/refactor/implementation-status.md

@@ -24,12 +24,12 @@
 | 模块 | 数据模型 | PocketBase 导入 | API | 自动化测试 | 当前状态 |
 | --- | --- | --- | --- | --- | --- |
 | 多租户隔离 | 已建 `tenants`、`tenant_domains`、`tenant_branding`、`tenant_settings`、RLS 基础 | 部分支持 | 租户解析、品牌、域名、支付账户、登录 provider、平台建租户已实现 | 核心 API 集成测试含租户隔离断言 | 基础可用，正式 JWT/RLS 权限闭环未完成 |
-| 刷题题库 | 已建题库、题目、题目版本、内容入口、任意深度分类树、考试意向标记、题目集合、练习蓝图、导入任务台账、导出任务台账、公共题库授权/采纳表、租户内容通知表 | 已支持核心映射，JSON/CSV/Excel 导入可落到新入口/节点/集合，阅读理解/案例分析子题沿用 `subQuestions/sub_questions` | 题目列表、内容入口、分类树、集合题目、顺序/随机/全真模拟 session、答题提交、复合题 `subAnswers` 判分和报告明细、租户后台题目录入/更新、JSON/CSV/Excel 预览/导入、JSON/试卷 payload 导出、PDF/Word 异步导出 worker、每日一练九宫格 metadata、PDF/Word 运营版式、ZIP 图片素材包、异步导入 worker、平台公共题库授权、租户采纳快照、手动同步、自动同步 worker、同步通知、冲突查询和单条/批量冲突处理已实现 | 核心 API 集成测试含导航、组卷、复合题后台录入/练习/判分/报告、导入、导出权限/脱敏、每日一练导出 metadata、异步 PDF/Word/每日一练 ZIP job 创建、exports worker、公共题库授权、采纳后组卷、同步新增题、通知隔离/已读/自动 resolved、租户自改冲突保护、单条/批量冲突处理和 worker 自动同步断言 | 新题库导航和组卷基础闭环可跑，阅读理解/案例分析多小题第一版可联调，公共题库采纳/手动/自动同步、同步通知、冲突查询/处理、导入后复检、模板下载、字段映射 API、JSON/PDF/Word/每日一练 ZIP 基础导出可联调；公共题库生产调度/失败告警、更精细导出模板和更完整运营消息仍需补齐 |
+| 刷题题库 | 已建题库、题目、题目版本、内容入口、任意深度分类树、考试意向标记、题目集合、练习蓝图、导入任务台账、导出任务台账、公共题库授权/采纳表、租户内容通知表 | 已支持核心映射，JSON/CSV/Excel 导入可落到新入口/节点/集合，阅读理解/案例分析子题沿用 `subQuestions/sub_questions` | 题目列表、内容入口、分类树、集合题目、顺序/随机/全真模拟 session、答题提交、复合题 `subAnswers` 判分和报告明细、租户后台题目录入/更新、JSON/CSV/Excel 预览/导入、JSON/试卷 payload 导出、PDF/Word 异步导出 worker、每日一练九宫格 metadata、PDF/Word 运营版式、ZIP 图片素材包、异步导入 worker、平台公共题库授权、租户采纳快照、手动同步、自动同步 worker、同步通知、冲突查询和单条/批量冲突处理已实现 | 核心 API 集成测试含导航、组卷、复合题后台录入/练习/判分/报告、导入、导出权限/脱敏、每日一练导出 metadata、异步 PDF/Word/每日一练 ZIP job 创建、exports worker、公共题库授权、采纳后组卷、同步新增题、通知隔离/已读/自动 resolved、租户自改冲突保护、单条/批量冲突处理和 worker 自动同步断言；Taro 类型检查覆盖 RichContent 接入 | 新题库导航和组卷基础闭环可跑，阅读理解/案例分析多小题、题干/选项/解析 RichContent 安全渲染和逐题复盘第一版可联调，公共题库采纳/手动/自动同步、同步通知、冲突查询/处理、导入后复检、模板下载、字段映射 API、JSON/PDF/Word/每日一练 ZIP 基础导出可联调；真正 KaTeX/小程序公式方案、私有题图签名映射、公共题库生产调度/失败告警、更精细导出模板和更完整运营消息仍需补齐 |
 | 错题本 | 已建 `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、租户后台手册科目/章节/条目维护 API、嵌套 JSON 预览导入已实现 | 核心 API 集成测试含导入断言 | 学生端阅读、后台维护和批量 JSON 导入基础可用，富文本资源/版本管理待补 |
+| 知识手册 | 已建手册科目、章节、条目，并可绑定 `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 导入链路已实现，深度防盗链、转码级水印和播放统计待补 |
 | 资料下载/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 测试 | 资料资源基础闭环可跑，真实 AV/内容安全服务联调、CDN 防盗链、转码/CDN 级水印和资料下载前端渲染待补 |

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

@@ -21,14 +21,14 @@
 | 首页/学生看板 | `pages/StudentDashboardNew.tsx` | 部分覆盖 | 品牌、Banner、公告、FAQ、时间线、考试倒计时、入口、个人统计有基础；缺完整运营动态和学习任务聚合 |
 | 题库入口 | `pages/SubjectSelector.tsx`、`RegionArchitectureEditor.tsx` | 已覆盖 | 前端应改接 `content_entries/content_nodes` |
 | 多级分类树 | 旧 module/subject/category 树 | 已覆盖 | 新后端支持任意深度和 `marker_type`；前端不要写死层级 |
-| 顺序刷题 | `pages/Quiz.tsx` | 部分覆盖 | 免费额度/SVIP 校验、session 快照、练习历史、趋势统计和题目反馈已由后端强制；Taro 已有答题卡、后端 session detail 续练、本地进度恢复、客观题自动提交、主观题后端自评、阅读理解/案例分析多小题作答和报告明细第一版；继续补长题干、公式图片混排和更完整复盘体验 |
+| 顺序刷题 | `pages/Quiz.tsx` | 部分覆盖 | 免费额度/SVIP 校验、session 快照、练习历史、趋势统计和题目反馈已由后端强制；Taro 已有答题卡、后端 session detail 续练、本地进度恢复、客观题自动提交、主观题后端自评、阅读理解/案例分析多小题作答、题干/选项/解析 RichContent 安全渲染和报告明细第一版；继续补真正 KaTeX/小程序公式方案、图片私有签名资源映射和更完整复盘体验 |
-| 随机刷题 | `pages/Quiz.tsx` | 部分覆盖 | 已有 blueprint/session 快照、访问控制和历史统计；Taro 已按 session 题目快照渲染第一版；继续补更完整复盘和随机刷题状态管理 |
+| 随机刷题 | `pages/Quiz.tsx` | 部分覆盖 | 已有 blueprint/session 快照、访问控制和历史统计；Taro 已按 session 题目快照渲染第一版，并复用 RichContent 渲染长题干/图片/公式占位；继续补随机刷题状态管理和更完整复盘 |
-| 全真模拟 | `components/AdminMockexam`、`MockExamConfigModal.tsx` | 部分覆盖 | blueprint、session 快照、倒计时、交卷评分、分段统计、错题解析汇总和复合题子题部分得分已覆盖；后续补排行榜/排名、完整复盘体验 |
+| 全真模拟 | `components/AdminMockexam`、`MockExamConfigModal.tsx` | 部分覆盖 | blueprint、session 快照、倒计时、交卷评分、分段统计、错题解析汇总、逐题复盘第一版和复合题子题部分得分已覆盖；后续补排行榜/排名、完整复盘体验 |
 | 错题本 | 用户 stats/错题逻辑 | 已覆盖 | 错题列表、移出错题、复习计划和 `wrong_review` 后端组卷已覆盖；后续补更细的间隔复习算法 |
 | 收藏夹 | `WordFavoritesPage.tsx`、题目收藏 | 已覆盖 | 题目和单词收藏已有 |
 | 题目视频 | `VideoPlayer.tsx` | 部分覆盖 | 题目视频查询、播放签名、SVIP/次数扣减、播放日志和动态水印上下文已有；缺深度防盗链、转码级水印、播放统计报表 |
 | 背单词 | `VocabularyPage.tsx`、`VocabularyQuiz.tsx` | 部分覆盖 | 单词列表、进度、收藏、统计、每日计划和后端复习调度已覆盖；后续补收藏练习体验、发音/音频策略、排行榜和更精细的间隔算法参数 |
-| 知识手册 | `Handbook*.tsx` | 已覆盖 | 前端需做好 Markdown/公式/图片渲染和搜索体验 |
+| 知识手册 | `Handbook*.tsx` | 已覆盖 | Taro 已接手册科目/章节/条目和 RichContent 安全渲染第一版；后续补搜索、高亮、目录锚点、真正公式渲染和图片私有资源签名映射 |
 | 分数线 | `ScorelinePage.tsx` | 已覆盖 | 动态字段/趋势、后台维护和 JSON 批量导入已有；后续补复杂筛选优化和 AI 择校数据上下文 |
 | 商城/SVIP | `Store.tsx`、`SvipModal.tsx` | 部分覆盖 | 套餐、订单、订单详情/状态轮询、权益、激活码预检查/兑换、优惠券领取/下单抵扣、微信支付/支付宝 provider 主链路、内部退款状态机、微信/支付宝发起退款、退款查询确认、退款通知 webhook、支付/退款补偿 worker、全额退款权益撤销、资金对账手工/API 导入比对、微信/支付宝官方账单下载 worker、异常查询、差错工单和事件轨迹、异常订单运营台、人工调整凭证复核报表已有；Taro 学生收银台/订单详情和租户财务运营台第一版已接；仍缺更完整售后体验、真实生产账单抽样验收和生产账号联调 |
 | 个人中心 | `Profile.tsx` | 部分覆盖 | 基本资料、手机号绑定/换绑、权益、订单统计、练习历史、学习统计、签到积分、考试倒计时、趋势和勋章展示 API 已有；缺学习报告可视化 |
@@ -95,7 +95,7 @@
 
 这些是旧项目中已经出现过、但新后端还没有完整业务闭环的功能：
 
-1. 阅读理解/案例分析多小题：后端 `subAnswers` 判分、断点恢复、报告 `subResults` 和 Taro 作答 UI 第一版已完成；仍需优化长题干排版、公式图片混排和复盘体验。
+1. 阅读理解/案例分析多小题：后端 `subAnswers` 判分、断点恢复、报告 `subResults`、Taro 作答 UI、RichContent 长题干/图片/公式占位渲染和逐题复盘第一版已完成；仍需补真正 KaTeX/小程序公式方案、私有题图签名映射和更细复盘交互。
 2. 排行榜增强：刷题、模考、背单词、积分排行榜主接口已有；还需防刷、日/周榜预聚合、运营后台排名看板。
 3. 账号设置完整流：绑定/更换手机号基础 API 已完成；仍缺头像上传、微信/QQ 账号合并、密码/邮箱能力。
 4. 题库导出：服务端 JSON/试卷 payload、PDF/Word 二进制生成、水印、资料发布路径、权限审计、答案脱敏、每日一练基础导出和图片 ZIP 素材包已补；仍缺更精细试卷模板和后台导出操作台体验。

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 页面；学生端已补地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、错题/收藏复习、题目反馈、视频解析、练习/模考报告、会员收银台、订单详情和售后入口第一版；平台后台已接入创建租户、状态变更、订阅、账单、收款、用量和公共题库授权第一版写操作；租户后台已接权限驱动工作台、学生运营操作台、主题模板预览/发布、角色模板、成员绑定和 CRM/分佣操作台第一版；下一步补长题干/公式图片混排、状态管理、更细数据范围 UI、学生批量运营增强和小程序兼容验证。
+- 当前已完成 H5 学生端、租户后台、平台后台三套构建入口和统一 API client；学生端、租户后台、平台后台都有第一批真实 API 页面；学生端已补地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、错题/收藏复习、题目反馈、视频解析、练习/模考报告、会员收银台、订单详情、售后入口、题干/选项/解析/知识手册 RichContent 安全渲染和逐题复盘第一版；平台后台已接入创建租户、状态变更、订阅、账单、收款、用量和公共题库授权第一版写操作；租户后台已接权限驱动工作台、学生运营操作台、主题模板预览/发布、角色模板、成员绑定和 CRM/分佣操作台第一版；下一步补真正 KaTeX/小程序公式方案、私有题图签名资源映射、状态管理、更细数据范围 UI、学生批量运营增强和小程序兼容验证。
 
 ### 第一批页面
 
@@ -203,7 +203,7 @@
 
 5. 知识手册
    - 手册入口、章节、小节、知识点阅读
-   - Markdown/公式/图片基础渲染
+   - RichContent 已支持 Markdown 图片、基础表格、代码、加粗、公式占位和安全过滤；后续补搜索、高亮、目录锚点、真正公式渲染和私有资源签名映射
 
 6. 分数线
    - 院校、专业、年份、动态字段筛选
@@ -227,7 +227,7 @@
 ## 推荐下一步顺序
 
 1. 补租户后台写操作台：公共题库采纳/同步、冲突查看、单条/批量冲突采纳平台或保留本地、导入问题、模板预览/下载、上传/粘贴 preview/import、字段映射编辑、异步导入轮询、导入后复检详情、权限驱动工作台、学生创建/更新/批量导入/批量分班/备注/跟进、角色模板配置、成员绑定模板、CRM 配置/队列/跟进分配策略、分佣规则/成员比例/结算生成审核打款/导出/凭证复核已接第一版；继续补成员批量运营、更细数据范围 UI、真实打款 provider 和发票。
-2. 继续补 Taro 学生端旧体验：地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、视频播放、反馈、模考报告、错题/收藏专题、收银台、订单详情和售后入口已接第一版；继续补长题干排版、公式图片混排、小程序支付容器、分享场景和状态管理。
+2. 继续补 Taro 学生端旧体验：地区选择、刷题答题卡、后端权威断点续练、本地进度恢复、模拟倒计时、主观题后端自评、阅读理解/案例分析多小题、视频播放、反馈、模考报告、逐题复盘、错题/收藏专题、收银台、订单详情、售后入口、题干/解析/知识手册 RichContent 安全渲染已接第一版；继续补真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词卡片发音、小程序支付容器、分享场景和状态管理。
 3. 补平台后台增强：租户详情/编辑、平台审计报表、自动计费、账单批量操作和更细平台权限点。
 4. 云服务器部署 Supabase/PostgreSQL 和 API，配置对象存储生产环境变量，跑 `check:refactor` 的远程等价测试。
 5. 导出现有 PocketBase 数据，做完整 dry-run 迁移。

docs/refactor/taro-frontend-integration.md

@@ -394,6 +394,39 @@ GET /api/tenant-content/media-analytics/video-events?videoId=<videoId>&limit=100
 - `PRACTICE_SESSION_QUESTION_FORBIDDEN`：说明提交答案的题目不在本次 session 快照内，应清理本地异常进度并重新开始。
 - 提交答案必须传 `practiceSessionId`；后端会拒绝不属于本人有效 session 的题目。
 
+### 题干、解析和知识手册富文本
+
+学生端已经新增统一渲染组件：
+
+```text
+apps/taro/src/components/RichContent.tsx
+apps/taro/src/components/rich-content.css
+```
+
+当前接入页面：
+
+```text
+pages/student/practice/index      题干、选项、子题、参考答案、解析
+pages/student/reports/index       逐题复盘、子题明细、参考答案、解析
+pages/student/handbook/index      知识点摘要和正文
+```
+
+第一版支持：
+
+- 纯文本和换行。
+- Markdown 图片 `![alt](https://...)` 或站内 `/...` 路径。
+- 基础表格。
+- `**加粗**`、行内代码和代码块。
+- `$...$`、`$$...$$`、`\(...\)`、`\[...\]` 公式占位样式。
+- 长题干、长单词、长公式自动换行或横向滚动。
+
+安全边界：
+
+- 组件会剥离 `<script>`、`<style>` 和普通 HTML 标签，不执行后端或导入内容中的 HTML/JS。
+- 图片只允许 HTTPS、站内相对路径、本地开发 localhost HTTP；拒绝 `javascript:`、`data:`、协议相对 URL 等危险来源。
+- 私有题图、资料图、PDF 和视频仍必须走后端资源台账和签名接口；不要把私有 OSS/COS/Supabase Storage URL 直接塞进题干长期渲染。
+- 当前公式只是安全可读的占位样式，不等于完整 KaTeX/MathJax。后续小程序端要在同一组件内替换为跨端公式渲染或服务端公式图片方案。
+
 ### 断点续练
 
 Taro 可以缓存当前题号和答题卡用于刷新恢复体验，但跨设备、清缓存、小程序重启后的权威恢复必须调用：
@@ -2300,6 +2333,7 @@ pages/student/profile/index
 已新增服务层：
 
 ```text
+src/components/RichContent.tsx 安全富文本渲染：题干、选项、解析、知识手册、报告复盘
 src/services/catalog.ts    目录、题库、单词、手册、分数线、资料
 src/services/learning.ts   练习 session、答题、收藏、错题/收藏复习、交卷报告、单词复习
 src/services/commerce.ts   套餐、优惠券、下单、支付参数、订单详情、权益、激活码
@@ -2324,7 +2358,7 @@ npm run build:taro:h5:platform
 
 下一批前端开发重点：
 
-- 学生端：地区选择、题目视频播放、题目反馈、错题/收藏专题页、模考交卷报告、收银台、订单详情和售后入口已接第一版；下一批继续补刷题细节 UI、小程序支付容器和分享场景。
+- 学生端：地区选择、题目视频播放、题目反馈、错题/收藏专题页、模考交卷报告、收银台、订单详情、售后入口、题干/解析/知识手册 RichContent 安全渲染和逐题复盘已接第一版；下一批继续补真正 KaTeX/小程序公式方案、私有题图签名资源映射、背单词卡片发音、小程序支付容器和分享场景。
 - 租户后台：工作台已接权限驱动模块入口；学生运营页已接学生创建/更新、禁用/恢复、批量导入、批量分班、学生备注、跟进任务和完成跟进第一版；题库内容页已接公共题库采纳/同步、冲突查看、单条/批量采纳平台或保留本地、导入问题、模板预览/下载、异步任务轮询和导入后复检第一版；营销中心已接 CRM 配置保存、CRM 队列按状态查看、分佣默认规则、成员分佣比例、分佣订单明细、结算单生成、审核通过/驳回、标记线下打款、优惠券规则表单、筛选、核销明细和核销报表第一版；财务运营页已接退款申请/审核/供应商提交与查询、官方账单任务、对账批次/异常明细、差错工单处理、人工调整凭证提交/复核和异常订单运营台第一版；租户设置页已接主题模板、草稿预览、发布、角色模板创建、编辑、停用、权限点、菜单、模块、字段、基础数据范围、成员搜索/新建、成员绑定模板、成员状态和额外权限覆盖第一版；下一批继续补更精细的学生导入模板体验、真实生产账单抽样验收、真实打款 provider、发票、更细数据范围 UI 和主题素材库。
 - 平台后台：租户创建、状态变更、订阅开通、账单生成、人工收款确认、用量录入、公共题库授权编辑已接第一版；继续补租户详情/编辑、平台审计、自动计费和批量账单操作。
 - 小程序：验证 `Taro.login`、微信支付、分享 scene/referral、Supabase client 兼容性；如不稳定，保留 `apps/api/auth/*` 作为小程序登录适配层。