feat(notes): N5 闪卡只取核心层文本 + N2 合书测试答后 diff 高亮

Author: Aparencia

client/src/features/notes/components/ClosedBookTest.tsx

@@ -2,16 +2,19 @@
  * ClosedBookTest — N2 合书测试模式
  *
  * @ai-context: 编辑器内容被遮罩隐藏后，AI 基于笔记文本生成 3-5 个回忆问题
- * （复用 useAIFeynmanQuestion），用户作答后"合书对照"解除遮罩核对原文。
- * 提取练习（retrieval practice）：主动回忆比被动重读更能巩固记忆。
+ * （复用 useAIFeynmanQuestion），用户作答后"合书对照"提交答案，逐条 diff
+ * 高亮（正确=绿 / 错误=红 / 遗漏=琥珀，纯本地 bigram 相似度，见 diffRecall）。
+ * 提取练习（retrieval practice）：主动回忆 + 即时反馈比被动重读更能巩固记忆。
  * AI 不可用时降级为空白自由回忆区，保证本地可用。
  */
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui';
 import { AIThinkingIndicator } from '@/components/ui/AIThinkingIndicator';
-import { EyeOff, Eye, X } from 'lucide-react';
+import { EyeOff, Check, X, RotateCcw } from 'lucide-react';
 import { useAIFeynmanQuestion } from '@/lib/ai/useAI';
 import type { FeynmanQuestionItem } from '@/lib/ai/types';
+import { diffRecallAgainstNote, type DiffSentence } from '../lib/diffRecall';
+import { cn } from '@/lib/utils';
 
 /** 送入 AI 的笔记文本上限（控制 token 消耗） */
 const MAX_TEXT_LEN = 3000;
@@ -22,18 +25,25 @@ interface ClosedBookTestProps {
   noteTitle: string;
   /** 编辑器实时纯文本 */
   noteText: string;
-  /** 合书对照：解除遮罩显示原文 */
-  onReveal: () => void;
   /** 结束合书测试 */
   onClose: () => void;
 }
 
-export function ClosedBookTest({ noteTitle, noteText, onReveal, onClose }: ClosedBookTestProps) {
+/** 三态配色映射 */
+const DIFF_STYLE: Record<DiffSentence['kind'], { icon: React.ReactNode; row: string; label: string }> = {
+  correct: { icon: <Check className="w-3.5 h-3.5" strokeWidth={2} />, row: 'border-emerald-500/30 bg-emerald-500/5', label: '回答到位' },
+  wrong: { icon: <X className="w-3.5 h-3.5" strokeWidth={2} />, row: 'border-red-500/30 bg-red-500/5', label: '回忆偏差' },
+  missing: { icon: <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />, row: 'border-amber-500/30 bg-amber-500/5', label: '原文遗漏' },
+};
+
+export function ClosedBookTest({ noteTitle, noteText, onClose }: ClosedBookTestProps) {
   const { loading, generateQuestions } = useAIFeynmanQuestion();
   const [questions, setQuestions] = useState<FeynmanQuestionItem[]>([]);
   const [fallback, setFallback] = useState(false);
   const [answers, setAnswers] = useState<string[]>([]);
   const [freeRecall, setFreeRecall] = useState('');
+  // N2 提交对照结果：非 null 时展示逐条 diff 高亮
+  const [diff, setDiff] = useState<DiffSentence[] | null>(null);
 
   // 挂载时尝试 AI 出题；失败或内容不足则降级为自由回忆
   useEffect(() => {
@@ -69,6 +79,62 @@ export function ClosedBookTest({ noteTitle, noteText, onReveal, onClose }: Close
     ? freeRecall.trim().length > 0
     : answers.some((a) => a.trim().length > 0);
 
+  /** N2 提交对照：合并全部答案为一段回忆文本，逐条 diff 高亮 */
+  const handleSubmit = () => {
+    const recall = fallback
+      ? freeRecall
+      : answers.map((a) => a.trim()).filter(Boolean).join('。');
+    setDiff(diffRecallAgainstNote(recall, noteText));
+  };
+
+  const handleRetry = () => {
+    setDiff(null);
+    if (!fallback) setAnswers(new Array(questions.length).fill(''));
+    else setFreeRecall('');
+  };
+
+  // N2 对照结果视图：三态逐条高亮 + 原文对应
+  const renderDiff = () => (
+    <div className="flex flex-col gap-2">
+      <p className="text-b2 text-text-primary font-medium">对照结果——逐条核对，记住偏差处</p>
+      <div className="flex flex-col gap-1.5">
+        {diff?.map((d, i) => {
+          const style = DIFF_STYLE[d.kind];
+          return (
+            <div
+              key={i}
+              className={cn('flex items-start gap-2 px-3 py-2 rounded-kb-md border text-b2', style.row)}
+            >
+              <span className={cn('mt-0.5 flex-shrink-0', d.kind === 'correct' && 'text-emerald-500', d.kind === 'wrong' && 'text-red-500')}>
+                {style.icon}
+              </span>
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-text-primary leading-relaxed">{d.text}</span>
+                {d.kind === 'correct' && d.matched && d.matched !== d.text && (
+                  <span className="text-c1 text-text-tertiary truncate">↳ 原文：{d.matched}</span>
+                )}
+                {d.kind === 'missing' && (
+                  <span className="text-c1 text-amber-600/80">这条要点没想起来——回看笔记重点补一下</span>
+                )}
+                {d.kind === 'wrong' && (
+                  <span className="text-c1 text-red-500/80">原文中没有对应内容，可能是记串了</span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div className="flex items-center justify-between gap-2 mt-2">
+        <p className="text-c1 text-text-tertiary">绿=回答到位 · 红=回忆偏差 · 琥珀=原文遗漏</p>
+        <div className="flex gap-2 flex-shrink-0">
+          <Button variant="secondary" icon={<RotateCcw className="w-4 h-4" strokeWidth={1.5} />} onClick={handleRetry}>
+            重新作答
+          </Button>
+          <Button onClick={onClose}>完成测试</Button>
+        </div>
+      </div>
+    </div>
+  );
   return (
     <div className="max-w-[640px] mx-auto my-kb-lg p-kb-lg rounded-kb-lg bg-bg-primary/95 backdrop-blur-xl border border-border/40 shadow-[0_8px_32px_rgba(0,0,0,0.08)]">
       {/* 头部 */}
@@ -97,6 +163,11 @@ export function ClosedBookTest({ noteTitle, noteText, onReveal, onClose }: Close
         </div>
       )}
 
+      {/* N2 对照结果：提交后逐条 diff 高亮 */}
+      {diff && renderDiff()}
+
+      {!diff && (
+        <>
       {/* 降级：自由回忆区 */}
       {fallback && !loading && (
         <div className="flex flex-col gap-3">
@@ -138,15 +209,15 @@ export function ClosedBookTest({ noteTitle, noteText, onReveal, onClose }: Close
       {/* 操作区 */}
       <div className="flex items-center justify-between gap-2 mt-5">
         <p className="text-c1 text-text-tertiary">
-          {answered ? '写得不错，对照原文看看？' : '先试着写点什么，哪怕只言片语'}
+          {answered ? '写得不错，提交对照看看？' : '先试着写点什么，哪怕只言片语'}
         </p>
         <div className="flex gap-2 flex-shrink-0">
           <Button variant="secondary" onClick={onClose}>结束测试</Button>
-          <Button icon={<Eye className="w-4 h-4" strokeWidth={1.5} />} onClick={onReveal}>
-            合书对照
-          </Button>
+          <Button onClick={handleSubmit}>合书对照</Button>
         </div>
       </div>
+        </>
+      )}
     </div>
   );
 }

client/src/features/notes/components/ContentTierModal.tsx

@@ -14,12 +14,15 @@ import { cn } from '@/lib/utils';
 import { copyText } from '@/lib/utils/clipboard';
 import { useAIContentTier } from '@/lib/ai/hooks/useAIContentTier';
 import type { ContentTierItem } from '@/lib/ai/types';
+import { saveCoreTier } from '../lib/contentTierStore';
 
 interface ContentTierModalProps {
   open: boolean;
   onClose: () => void;
   /** 当前笔记的实时纯文本 */
   noteText: string;
+  /** 当前笔记 id（N5 核心层缓存键，供闪卡生成联动） */
+  noteId?: string | null;
 }
 
 const tierMeta = {
@@ -28,7 +31,7 @@ const tierMeta = {
   detail: { label: '参考细节', hint: '可策略性遗忘的旁支信息', accent: 'text-text-tertiary bg-bg-tertiary' },
 } as const;
 
-export function ContentTierModal({ open, onClose, noteText }: ContentTierModalProps) {
+export function ContentTierModal({ open, onClose, noteText, noteId }: ContentTierModalProps) {
   const { tier, loading, error, analyze, reset } = useAIContentTier();
   const [focusCore, setFocusCore] = useState(false);
   const [expanded, setExpanded] = useState<Record<string, boolean>>({ core: true, support: true, detail: true });
@@ -38,7 +41,13 @@ export function ContentTierModal({ open, onClose, noteText }: ContentTierModalPr
     if (open) {
       setFocusCore(false);
       setExpanded({ core: true, support: true, detail: true });
-      analyze(noteText);
+      // N5 闭环：分层成功后缓存核心层文本，闪卡生成只取核心层
+      void analyze(noteText).then((tier) => {
+        if (tier?.core?.length && noteId) {
+          const coreText = tier.core.map((item) => item.text).join('\n');
+          saveCoreTier(noteId, coreText);
+        }
+      });
     } else {
       reset();
     }

client/src/features/notes/hooks/useNoteAI.ts

@@ -13,6 +13,7 @@ import { useFlashcardStore } from '@/features/flashcards/store/useFlashcardStore
 import { useAISummarize, useAIFlashcards } from '@/lib/ai/useAI';
 import { useAIErrorHandler } from '@/lib/ai/hooks/useAIErrorHandler';
 import { useToast } from '@/components/ui';
+import { getCoreTier } from '../lib/contentTierStore';
 
 type SummaryData = NonNullable<ReturnType<typeof useAISummarize>['data']>;
 
@@ -50,7 +51,11 @@ export function useNoteAI(editor: Editor | null, noteId: string | null) {
 
   /** 将 AI 生成的卡片批量落库到目标牌组，返回卡片数 */
   const persistCards = useCallback(async (source: string): Promise<number> => {
-    const result = await generateFlashcards(source);
+    // N5 闭环：存在新鲜的核心层缓存时，闪卡只从核心层文本生成
+    // （策略性遗忘 → 闪卡只记核心；缓存过期/缺失静默回退原文）
+    const coreTier = getCoreTier(noteId);
+    const effectiveSource = coreTier ?? source;
+    const result = await generateFlashcards(effectiveSource);
     if (!result) throw new Error('generate failed');
     const targetDeckId = await ensureDefaultDeck();
     await Promise.all(

client/src/features/notes/lib/contentTierStore.test.ts

@@ -0,0 +1,62 @@
+/**
+ * Content tier store unit tests
+ * B3 (N5): core-layer persistence bridging tiering to card generation
+ * @ai-context 核心层缓存测试：7 天 TTL、静默降级、清除；jsdom 下直接用
+ * localStorage 验证读写闭环。
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { saveCoreTier, getCoreTier, clearCoreTier } from './contentTierStore';
+
+const NOTE_ID = 'note-1';
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+describe('saveCoreTier / getCoreTier', () => {
+  it('should persist core text and read it back fresh', () => {
+    saveCoreTier(NOTE_ID, '核心概念一\n核心概念二');
+    expect(getCoreTier(NOTE_ID)).toBe('核心概念一\n核心概念二');
+  });
+
+  it('should trim stored text', () => {
+    saveCoreTier(NOTE_ID, '  核心文本  ');
+    expect(getCoreTier(NOTE_ID)).toBe('核心文本');
+  });
+
+  it('should ignore empty noteId or blank text', () => {
+    saveCoreTier('', '核心');
+    saveCoreTier(NOTE_ID, '   ');
+    expect(getCoreTier('')).toBeNull();
+    expect(getCoreTier(NOTE_ID)).toBeNull();
+  });
+
+  it('should return null when no cache exists', () => {
+    expect(getCoreTier(NOTE_ID)).toBeNull();
+    expect(getCoreTier(null)).toBeNull();
+  });
+
+  it('should return null for expired cache (older than 7 days)', () => {
+    // 直接写入 8 天前的缓存，模拟过期
+    const expired = {
+      coreText: '过期核心',
+      savedAt: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000).toISOString(),
+    };
+    localStorage.setItem(`kb-core-tier:${NOTE_ID}`, JSON.stringify(expired));
+    expect(getCoreTier(NOTE_ID)).toBeNull();
+  });
+
+  it('should return null for corrupted cache payload', () => {
+    localStorage.setItem(`kb-core-tier:${NOTE_ID}`, '{not-json');
+    expect(getCoreTier(NOTE_ID)).toBeNull();
+    // localStorage 抛错（隐私模式）也应静默返回 null
+    localStorage.setItem(`kb-core-tier:${NOTE_ID}`, '{"coreText":""}');
+    expect(getCoreTier(NOTE_ID)).toBeNull();
+  });
+
+  it('should clear cache on demand', () => {
+    saveCoreTier(NOTE_ID, '核心');
+    clearCoreTier(NOTE_ID);
+    expect(getCoreTier(NOTE_ID)).toBeNull();
+  });
+});

client/src/features/notes/lib/contentTierStore.ts

@@ -0,0 +1,61 @@
+/**
+ * N5 核心层持久化 — 分层结果与闪卡生成的联动桥
+ * Content-tier core persistence — bridges tiering to card generation
+ *
+ * @ai-context: 内容分层结果不落 SQLite（AI 生成物，会话性辅助），以
+ * localStorage 按笔记缓存核心层文本 + 时间戳，有效期 7 天。闪卡生成
+ * （useNoteAI.persistCards）读取此缓存：存在则仅用核心层文本作生成源，
+ * 实现"策略性遗忘 → 闪卡只记核心"的闭环；过期/缺失静默回退原文。
+ * @ai-context: Tier results are cached per note in localStorage with a
+ * 7-day TTL; flashcard generation consumes only the core layer when a
+ * fresh cache exists, falling back to full text silently otherwise.
+ */
+
+const CORE_TIER_PREFIX = 'kb-core-tier:';
+/** 缓存有效期（毫秒）：7 天 */
+const CORE_TIER_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+interface CoreTierCache {
+  coreText: string;
+  savedAt: string;
+}
+
+function keyOf(noteId: string): string {
+  return `${CORE_TIER_PREFIX}${noteId}`;
+}
+
+/** 保存笔记的核心层文本（分析成功后由 ContentTierModal 调用） */
+export function saveCoreTier(noteId: string, coreText: string): void {
+  if (!noteId || !coreText.trim()) return;
+  try {
+    const cache: CoreTierCache = { coreText: coreText.trim(), savedAt: new Date().toISOString() };
+    localStorage.setItem(keyOf(noteId), JSON.stringify(cache));
+  } catch {
+    /* 存储失败静默——不影响分层弹窗本身 */
+  }
+}
+
+/** 读取新鲜（7 天内）的核心层文本；无缓存/过期返回 null */
+export function getCoreTier(noteId: string | null): string | null {
+  if (!noteId) return null;
+  try {
+    const raw = localStorage.getItem(keyOf(noteId));
+    if (!raw) return null;
+    const cache = JSON.parse(raw) as CoreTierCache;
+    if (!cache.coreText) return null;
+    const age = Date.now() - new Date(cache.savedAt).getTime();
+    if (age < 0 || age > CORE_TIER_TTL_MS) return null;
+    return cache.coreText;
+  } catch {
+    return null;
+  }
+}
+
+/** 清除核心层缓存（笔记删除时可选调用） */
+export function clearCoreTier(noteId: string): void {
+  try {
+    localStorage.removeItem(keyOf(noteId));
+  } catch {
+    /* 静默 */
+  }
+}

client/src/features/notes/lib/diffRecall.test.ts

@@ -0,0 +1,63 @@
+/**
+ * N2 合书测试 diff 算法单元测试
+ * Closed-book recall diff algorithm tests
+ *
+ * @ai-context: 覆盖三态判定——正确（高相似）、错误（无对应）、遗漏（原文
+ * 未覆盖）；空答案全遗漏；短句阈值防误判。
+ */
+import { describe, it, expect } from 'vitest';
+import { diffRecallAgainstNote, splitSentences } from './diffRecall';
+
+const NOTE = '傅里叶变换将信号分解为不同频率的正弦波。频谱展示各频率分量的强度。逆变换可以把频谱还原为时域信号。';
+
+describe('splitSentences', () => {
+  it('should split by Chinese sentence punctuation and newlines', () => {
+    expect(splitSentences('第一句。第二句！第三句？\n第四句')).toEqual(['第一句', '第二句', '第三句', '第四句']);
+  });
+
+  it('should drop too-short fragments (single char)', () => {
+    expect(splitSentences('好。完整的句子内容')).toEqual(['完整的句子内容']);
+  });
+});
+
+describe('diffRecallAgainstNote', () => {
+  it('should mark answer sentence as correct when closely matching the note', () => {
+    const diff = diffRecallAgainstNote('傅里叶变换将信号分解为不同频率的正弦波。', NOTE);
+    expect(diff[0]).toMatchObject({ kind: 'correct', text: '傅里叶变换将信号分解为不同频率的正弦波' });
+  });
+
+  it('should mark fabricated content as wrong', () => {
+    const diff = diffRecallAgainstNote('拉普拉斯变换用于解微分方程。', NOTE);
+    expect(diff[0]).toMatchObject({ kind: 'wrong' });
+  });
+
+  it('should mark uncovered note sentences as missing', () => {
+    const diff = diffRecallAgainstNote('频谱展示各频率分量的强度。', NOTE);
+    const kinds = diff.map((d) => d.kind);
+    expect(kinds).toContain('correct');
+    expect(kinds.filter((k) => k === 'missing').length).toBe(2); // 另两句未覆盖
+  });
+
+  it('should treat empty answer as all missing', () => {
+    const diff = diffRecallAgainstNote('', NOTE);
+    expect(diff.length).toBe(3);
+    expect(diff.every((d) => d.kind === 'missing')).toBe(true);
+  });
+
+  it('should not double-count one note sentence for two answer sentences', () => {
+    const diff = diffRecallAgainstNote(
+      '傅里叶变换将信号分解为不同频率的正弦波。逆变换可以把频谱还原为时域信号。',
+      NOTE,
+    );
+    const missing = diff.filter((d) => d.kind === 'missing');
+    expect(missing.map((d) => d.text)).toEqual(['频谱展示各频率分量的强度']);
+  });
+
+  it('should use stricter threshold for short sentences to avoid false positives', () => {
+    const note = '坚持每日复习。记忆会衰减。';
+    const diff = diffRecallAgainstNote('坚持每天复习。', note);
+    // 短句相似但非逐字 → 可能判 wrong 而非 correct（阈值上浮）
+    const correctCount = diff.filter((d) => d.kind === 'correct').length;
+    expect(correctCount).toBeLessThan(2);
+  });
+});