feat(classroom): P2-7 步骤化笔记 + P2-8 步骤复习联动

stepExtractor: slide_change 边界切分 + 指令句聚合（1s 时序容差）+ 代表性截图选择；checklist/闪卡问答转换

StepFlowView: 步骤卡片流（截图+说明+时间戳）+ 练习模式（隐藏说明翻卡对照）+ 跟着做 checklist + 闪卡导出

SessionContentView: 技能类会话时间线/步骤卡片视图切换（首次检测自动切步骤）

新增 8 例单测（边界切分/容差/兜底/截断/转换）

Author: Aparencia

client/src/features/classroom/components/SessionContentView.tsx

@@ -12,14 +12,15 @@
  * live timeline state survives tab switches. Notes tab previews the
  * AI-processed result before inserting into a note.
  */
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { useClassroomCapture } from '../hooks/useClassroomCapture';
 import { SegmentList } from './SegmentList';
 import { UnifiedTimeline } from './UnifiedTimeline';
 import { ClassroomStatusBanners } from './ClassroomStatusBanners';
 import { RecognitionStatsBar } from './RecognitionStatsBar';
+import { StepFlowView } from './StepFlowView';
 import { isLocalAsrReady } from '../utils/asrTranscriber';
 import { AnalysisPreview } from '@/features/notes/components/AnalysisPreview';
 import { VideoRecordPanel } from '@/features/notes/components/VideoRecordPanel';
@@ -44,6 +45,18 @@ const TAB_LABELS: Record<TabId, string> = {
 export function SessionContentView({ capture, onOpenNoteDialog }: SessionContentViewProps) {
   const [tab, setTab] = useState<TabId>('content');
   const navigate = useNavigate();
+  /** P2-7：内容视图子模式（技能类会话可用步骤卡片流） */
+  const [viewMode, setViewMode] = useState<'timeline' | 'steps'>('timeline');
+  const isSkillKind = capture.contentKind === 'software_skill' || capture.contentKind === 'craft_skill';
+
+  // 首次检测到技能类内容时自动切到步骤视图（会话中途检测，仅切换一次）
+  const skillDetectedRef = useRef(false);
+  useEffect(() => {
+    if (isSkillKind && !skillDetectedRef.current) {
+      skillDetectedRef.current = true;
+      setViewMode('steps');
+    }
+  }, [isSkillKind]);
 
   // 问答上下文：拼接各路径转写文本（fine 段 + smart 实时转录）
   const qaTranscript = capture.capturePath === 'fine'
@@ -95,16 +108,39 @@ export function SessionContentView({ capture, onOpenNoteDialog }: SessionContent
                 streamingAsrActive={capture.streamingAsrActive}
                 localAsrReady={isLocalAsrReady()}
               />
+              {/* P2-7 技能类会话：时间线 / 步骤卡片流切换 */}
+              {isSkillKind && (
+                <div className="mx-4 mt-2 flex gap-1">
+                  {(['timeline', 'steps'] as const).map((mode) => (
+                    <button
+                      key={mode}
+                      onClick={() => setViewMode(mode)}
+                      className={cn(
+                        'px-2.5 py-1 rounded-kb-sm text-[11px] font-medium transition-all',
+                        viewMode === mode
+                          ? 'bg-brand-50 text-brand-600 ring-1 ring-brand-200/50'
+                          : 'text-text-tertiary hover:bg-bg-tertiary',
+                      )}
+                    >
+                      {mode === 'timeline' ? '时间线' : '步骤卡片'}
+                    </button>
+                  ))}
+                </div>
+              )}
               {/* M2 自动锚点以时间线行展示（autoAnchors 独立数据源） */}
-              <UnifiedTimeline
-                bundle={capture.smartBundle}
-                liveTranscripts={capture.liveTranscripts}
-                autoAnchors={capture.autoAnchors}
-                partialText={capture.partialText}
-                isActive={capture.status === 'capturing' && (capture.mode === 'audio' || capture.mode === 'mixed')}
-                onEditTranscript={capture.handleEditTranscript}
-                onCycleSpeaker={capture.handleCycleSpeaker}
-              />
+              {viewMode === 'steps' && isSkillKind ? (
+                <StepFlowView bundle={capture.smartBundle} />
+              ) : (
+                <UnifiedTimeline
+                  bundle={capture.smartBundle}
+                  liveTranscripts={capture.liveTranscripts}
+                  autoAnchors={capture.autoAnchors}
+                  partialText={capture.partialText}
+                  isActive={capture.status === 'capturing' && (capture.mode === 'audio' || capture.mode === 'mixed')}
+                  onEditTranscript={capture.handleEditTranscript}
+                  onCycleSpeaker={capture.handleCycleSpeaker}
+                />
+              )}
             </>
           )}
 

client/src/features/classroom/components/StepFlowView.tsx

@@ -0,0 +1,177 @@
+/**
+ * StepFlowView — 步骤化笔记视图（P2-7/P2-8）
+ *
+ * @ai-context: 技能场景（软件/手法技巧）的步骤卡片流：每步 = 截图 + 操作
+ * 说明 + 时间戳；支持「练习模式」（隐藏说明看截图回忆操作，翻卡对照，
+ * 费曼式主动回忆）、「跟着做」checklist 勾选、步骤→闪卡问答导出。
+ * 数据源为 smart 会话数据经 extractSteps 提取（内存态，会话内可用）。
+ * @ai-context EN: Step-card flow for skill videos: screenshot + instruction
+ * + timestamp per step. Practice mode hides instructions for active recall;
+ * checklist tracks progress; cards export as Q&A flashcards.
+ */
+import { useMemo, useState } from 'react';
+import { Eye, EyeOff, CheckSquare, Copy, Layers } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  extractSteps,
+  stepsToChecklist,
+  stepsToFlashcards,
+} from '@/lib/capture/stepExtractor';
+import type { SessionBundle } from '@/lib/capture';
+
+interface StepFlowViewProps {
+  bundle: Partial<SessionBundle>;
+  /** 是否显示操作说明（练习模式=false 隐藏，点击单卡对照） */
+  initiallyPractice?: boolean;
+}
+
+export function StepFlowView({ bundle, initiallyPractice = false }: StepFlowViewProps) {
+  const [practice, setPractice] = useState(initiallyPractice);
+  /** 练习模式下被翻开的卡片 id 集合（对照查看） */
+  const [revealed, setRevealed] = useState<Set<string>>(new Set());
+  const [checked, setChecked] = useState<Set<string>>(new Set());
+  const [copied, setCopied] = useState(false);
+
+  const { steps, boundaryCount, commandCueCount } = useMemo(
+    () => extractSteps(bundle.keyframes ?? [], bundle.audioSegments ?? []),
+    [bundle.keyframes, bundle.audioSegments],
+  );
+  const checklist = useMemo(() => stepsToChecklist(steps), [steps]);
+
+  const toggleReveal = (id: string) => {
+    setRevealed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleCheck = (id: string) => {
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  /** 导出步骤闪卡问答（复制到剪贴板，供闪卡模块导入） */
+  const exportFlashcards = async () => {
+    const cards = stepsToFlashcards(steps);
+    const text = cards.map((c) => `${c.front}\n答：${c.back}`).join('\n\n---\n\n');
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (steps.length === 0) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center py-10 text-text-tertiary">
+        <Layers className="w-8 h-8 mb-2 opacity-30" strokeWidth={1} />
+        <p className="text-b3">技能类内容（界面切换 + 操作指令）将自动生成步骤卡片</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 min-h-0 flex flex-col">
+      {/* 工具栏：练习模式 / 统计 / 闪卡导出 */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/20 flex-shrink-0">
+        <button
+          onClick={() => setPractice((p) => !p)}
+          className={cn(
+            'flex items-center gap-1 px-2 py-1 rounded-kb-sm text-[11px] font-medium transition-all',
+            practice
+              ? 'bg-amber-50 text-amber-600 ring-1 ring-amber-200/50'
+              : 'text-text-tertiary hover:bg-bg-tertiary',
+          )}
+        >
+          {practice ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+          {practice ? '练习模式（点击卡片对照）' : '查看模式'}
+        </button>
+        <span className="text-[10px] text-text-tertiary">
+          {steps.length} 步 · {boundaryCount} 次界面切换 · {commandCueCount} 条操作指令
+        </span>
+        <button
+          onClick={exportFlashcards}
+          className="ml-auto flex items-center gap-1 px-2 py-1 rounded-kb-sm text-[11px] text-text-tertiary hover:text-cyber hover:bg-cyber/5 transition-all"
+        >
+          <Copy className="w-3 h-3" />
+          {copied ? '已复制闪卡问答' : '导出步骤闪卡'}
+        </button>
+      </div>
+
+      {/* 步骤卡片流 */}
+      <div className="flex-1 overflow-y-auto p-3 space-y-2">
+        {steps.map((step, idx) => {
+          const isRevealed = !practice || revealed.has(step.id);
+          return (
+            <div
+              key={step.id}
+              className={cn(
+                'rounded-kb-md border border-border/20 bg-bg-elevated/40 p-3',
+                practice && 'cursor-pointer transition-colors hover:bg-bg-elevated',
+              )}
+              onClick={practice ? () => toggleReveal(step.id) : undefined}
+            >
+              <div className="flex items-start gap-3">
+                {/* 步骤截图 */}
+                {step.imageBase64 && (
+                  <img
+                    src={`data:image/jpeg;base64,${step.imageBase64}`}
+                    alt={`步骤 ${idx + 1} 截图`}
+                    className="w-36 rounded-kb-sm object-cover border border-border/30 flex-shrink-0"
+                  />
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] text-text-tertiary font-mono">
+                      {new Date(step.timestamp).toLocaleTimeString()}
+                    </span>
+                    <span className="text-b3 font-medium text-text-primary">{step.title}</span>
+                  </div>
+                  <p className={cn(
+                    'mt-1 text-[12px] leading-relaxed text-text-secondary',
+                    practice && !isRevealed && 'opacity-0 select-none',
+                    practice && !isRevealed && 'h-4', // 占位防跳动
+                  )}>
+                    {isRevealed ? (step.instruction || '（本步无口述说明，观察截图）') : '••• 回忆一下这一步做了什么 •••'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 跟着做 checklist */}
+      <div className="border-t border-border/20 px-3 py-2 flex-shrink-0">
+        <div className="flex items-center gap-1.5 mb-1.5">
+          <CheckSquare className="w-3.5 h-3.5 text-emerald-500" strokeWidth={1.5} />
+          <span className="text-[11px] font-medium text-text-tertiary">
+            跟着做（{checked.size}/{checklist.length}）
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-1.5 max-h-20 overflow-y-auto">
+          {checklist.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => toggleCheck(item.id)}
+              className={cn(
+                'px-2 py-0.5 rounded-kb-sm text-[11px] border transition-all',
+                checked.has(item.id)
+                  ? 'border-emerald-300/50 bg-emerald-50 text-emerald-600 line-through'
+                  : 'border-border/30 text-text-secondary hover:border-emerald-300/50',
+              )}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default StepFlowView;

client/src/lib/capture/stepExtractor.test.ts

@@ -0,0 +1,114 @@
+/**
+ * extractSteps 单元测试（P2-7 步骤提取）
+ *
+ * @ai-context: 锁定步骤提取契约：slide_change 边界切分、时间窗内指令句
+ * 聚合、代表性截图选择、无边界帧兜底单步骤、checklist/闪卡转换。
+ */
+import { describe, it, expect } from 'vitest';
+import { extractSteps, stepsToChecklist, stepsToFlashcards } from './stepExtractor';
+import type { KeyFrame, AudioSegment } from './captureTypes';
+
+let ts = 1_000_000;
+function kf(changeType: KeyFrame['changeType'], imageBase64 = '', offsetMs = 0): KeyFrame {
+  ts += 5000;
+  return {
+    id: `kf-${ts}`,
+    timestamp: ts + offsetMs,
+    imageBase64,
+    changeType,
+  };
+}
+
+function seg(start: number, text: string): AudioSegment {
+  return {
+    id: `seg-${start}`,
+    timestampStart: start,
+    timestampEnd: start + 3000,
+    audioBase64: '',
+    energy: 0.1,
+    audioText: text,
+  };
+}
+
+describe('extractSteps', () => {
+  it('slide_change 边界切分步骤，指令句聚合为说明', () => {
+    const f1 = kf('slide_change', 'img1'); // 边界1
+    const f2 = kf('writing', 'img2');
+    const f3 = kf('slide_change', 'img3'); // 边界2
+    const f4 = kf('writing', 'img4');
+    const segments = [
+      seg(f1.timestamp + 500, '我们点击这个按钮'),
+      seg(f2.timestamp + 500, '把不透明度设置为五十'),
+      seg(f3.timestamp + 500, '然后拖到图层面板'),
+      seg(f4.timestamp + 500, '普通讲解内容'),
+    ];
+    const result = extractSteps([f1, f2, f3, f4], segments);
+    expect(result.boundaryCount).toBe(2);
+    expect(result.steps).toHaveLength(2);
+    expect(result.steps[0].instruction).toContain('点击这个按钮');
+    expect(result.steps[0].imageBase64).toBe('img2');
+    expect(result.steps[1].instruction).toContain('拖到图层面板');
+  });
+
+  it('无边界帧：整体单步骤兜底', () => {
+    const f1 = kf('writing', 'img1');
+    const f2 = kf('writing', 'img2');
+    const result = extractSteps([f1, f2], [seg(f1.timestamp, '点击这个按钮')]);
+    expect(result.boundaryCount).toBe(0);
+    expect(result.steps).toHaveLength(1);
+    expect(result.steps[0].title).toBe('点击这个按钮');
+  });
+
+  it('无指令句时标题为「步骤 N」', () => {
+    const f1 = kf('slide_change', 'img1');
+    const result = extractSteps([f1], [seg(f1.timestamp, '普通讲解')]);
+    expect(result.steps[0].title).toBe('步骤 1');
+    expect(result.steps[0].instruction).toBe('');
+  });
+
+  it('边界前后 1s 容差覆盖时序差', () => {
+    const f1 = kf('slide_change', 'img1');
+    const result = extractSteps(
+      [f1],
+      [seg(f1.timestamp - 800, '点击这个按钮')], // 边界前 800ms
+    );
+    expect(result.steps[0].instruction).toContain('点击这个按钮');
+  });
+
+  it('空数据：无步骤无异常', () => {
+    const result = extractSteps([], []);
+    expect(result.steps).toHaveLength(0);
+    expect(result.commandCueCount).toBe(0);
+  });
+
+  it('超长标题截断 40 字', () => {
+    const f1 = kf('slide_change', 'img1');
+    const longText = '我们点击这个按钮然后把它拖到图层面板再调整参数设置为百分之五十的数值'.repeat(2);
+    const result = extractSteps([f1], [seg(f1.timestamp + 100, longText)]);
+    expect(result.steps[0].title.length).toBeLessThanOrEqual(40);
+  });
+});
+
+describe('stepsToChecklist / stepsToFlashcards（P2-8）', () => {
+  it('checklist 转换', () => {
+    const steps = [
+      { id: 's1', timestamp: 1, title: '步骤 1', instruction: '' },
+      { id: 's2', timestamp: 2, title: '步骤 2', instruction: '' },
+    ];
+    const list = stepsToChecklist(steps);
+    expect(list).toHaveLength(2);
+    expect(list[0].label).toBe('步骤 1');
+  });
+
+  it('闪卡转换：问答形态', () => {
+    const steps = [
+      { id: 's1', timestamp: 1, title: '点击图层面板', instruction: '点击图层面板并拖动' },
+      { id: 's2', timestamp: 2, title: '步骤 2', instruction: '调整参数' },
+    ];
+    const cards = stepsToFlashcards(steps);
+    expect(cards).toHaveLength(2);
+    expect(cards[0].front).toContain('点击图层面板');
+    expect(cards[0].back).toBe('点击图层面板并拖动');
+    expect(cards[1].front).toBe('这一步（截图/操作）是什么？');
+  });
+});