feat(ocr): 前端屏卡流+笔记屏段落配图+实时面板按屏摘要

Author: Aparencia

app/src/components/LiveActivityPanel.tsx

@@ -40,10 +40,12 @@ interface PendingLine {
   committed: boolean;
 }
 
-/** 画面要点行 */
+/** 画面要点行（v0.7.3 REQ-161：一行=一屏摘要——同屏块合并显示） */
 interface OcrLine {
   id: number;
   time: number;
+  /** 屏号（同屏事件合并为一行） */
+  screenId: number;
   text: string;
 }
 
@@ -235,8 +237,20 @@ export default function LiveActivityPanel({ sessionId }: { sessionId?: number |
       }),
       listen<OcrEvent>("live:ocr", (e) => {
         setOcrLines((prev) => {
-          // TD-043：时间戳取后端会话纪元
-          const next = [...prev, { id: nextId(), time: e.payload.timestampMs, text: e.payload.text }];
+          // TD-043：时间戳取后端会话纪元；v0.7.3（REQ-161）：同屏块合并为
+          // 一行屏摘要（首块 + 后续小字块追加，防 175 行碎片刷屏）
+          const last = prev[prev.length - 1];
+          if (last && last.screenId === e.payload.screenId) {
+            const next = [...prev];
+            const text =
+              last.text.length < 80 ? `${last.text} ${e.payload.text}` : last.text;
+            next[next.length - 1] = { ...last, text };
+            return next;
+          }
+          const next = [
+            ...prev,
+            { id: nextId(), time: e.payload.timestampMs, screenId: e.payload.screenId, text: e.payload.text },
+          ];
           return next.length > MAX_KEPT ? next.slice(next.length - MAX_KEPT) : next;
         });
         countsRef.current.ocr += 1;
@@ -459,13 +473,15 @@ export default function LiveActivityPanel({ sessionId }: { sessionId?: number |
                 <span style={{ fontSize: 11, color: "#9ca3af", width: 44, flexShrink: 0, fontVariantNumeric: "tabular-nums" }}>
                   {fmtTime(o.time)}
                 </span>
-                <span style={{ width: 8, height: 8, borderRadius: 4, flexShrink: 0, alignSelf: "center", background: "#2563eb" }} />
+                <span style={{ fontSize: 10, color: "#2563eb", flexShrink: 0, fontWeight: 600 }}>
+                  屏{o.screenId}
+                </span>
                 <span style={{ color: "#1e40af" }}>{o.text}</span>
               </div>
             ))}
             {counts.ocr > SHOW_OCR_LINES && (
               <p style={{ fontSize: 11, color: "#9ca3af", margin: "4px 0 0", paddingLeft: 52 }}>
-                ⋯ 共 {counts.ocr} 条，仅显示最近 {SHOW_OCR_LINES} 条（会话页可看全部）
+                ⋯ 共 {counts.ocr} 块 / {ocrLines.length} 屏，仅显示最近 {SHOW_OCR_LINES} 屏（会话页可看全部）
               </p>
             )}
           </div>

app/src/components/NotePreviewView.tsx

@@ -11,7 +11,7 @@
  *              生效，落库时经 ai_decisions 回传保持输出一致。
  */
 import { useCallback, useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/core";
+import { invoke, convertFileSrc } from "@tauri-apps/api/core";
 import type { NoteFilterResult, TextFilterDecision, TextFilterReview, TextFilterStatus } from "../types";
 
 const btn: React.CSSProperties = { padding: "5px 10px", cursor: "pointer", fontSize: 12 };
@@ -36,12 +36,19 @@ function escapeHtml(s: string): string {
     .replace(/'/g, "'");
 }
 
-/** 轻量 Markdown 渲染（标题/段落/列表——笔记正文结构有限，避免引渲染库；
- *  所有文本经 escapeHtml 转义——本地内容仍按不可信输入处理） */
-function renderMarkdown(md: string): string {
+/** 轻量 Markdown 渲染（标题/段落/列表/屏配图——笔记正文结构有限，避免引渲染库；
+ *  所有文本经 escapeHtml 转义——本地内容仍按不可信输入处理；
+ *  v0.7.3：`![alt](session-images/...)` 配图行 → 本地图（baseUrl + convertFileSrc）） */
+function renderMarkdown(md: string, imageBaseUrl: string): string {
   return md
     .split("\n")
     .map((line) => {
+      // 屏配图行（v0.7.3 REQ-160：笔记画面要点配图，本地路径不出本机）
+      const img = line.match(/^\s*-\s*!\[([^\]]*)\]\(([^)]*)\)$/);
+      if (img) {
+        const src = imageBaseUrl ? convertFileSrc(`${imageBaseUrl}/${img[2]}`) : "";
+        return `<img src="${src}" alt="${escapeHtml(img[1])}" loading="lazy" style="max-width:260px;border-radius:6px;border:1px solid #e5e7eb;margin:4px 0" />`;
+      }
       if (line.startsWith("# ")) return `<h2 style="font-size:15px;margin:10px 0 4px">${escapeHtml(line.slice(2))}</h2>`;
       if (line.startsWith("## ")) return `<h3 style="font-size:13px;margin:8px 0 4px;color:#0f766e">${escapeHtml(line.slice(3))}</h3>`;
       if (line.startsWith("- ")) return `<div style="font-size:12px;color:#4b5563">• ${escapeHtml(line.slice(2))}</div>`;
@@ -60,6 +67,8 @@ export default function NotePreviewView({ sessionId }: { sessionId: number }) {
   const [aiStatus, setAiStatus] = useState<TextFilterStatus | null>(null);
   // 审查修复（2026-08-19）：AI 判定列表——落库回传保证预览/落库一致
   const [aiDecisions, setAiDecisions] = useState<TextFilterDecision[]>([]);
+  // v0.7.3（REQ-160）：屏配图 baseUrl（图集同款）
+  const [baseUrl, setBaseUrl] = useState("");
 
   const load = useCallback(async () => {
     try {
@@ -73,7 +82,10 @@ export default function NotePreviewView({ sessionId }: { sessionId: number }) {
   useEffect(() => {
     void load();
     void invoke<TextFilterStatus>("text_filter_status").then(setAiStatus).catch(() => undefined);
-  }, [load]);
+    void invoke<string>("session_images_base_url", { sessionId })
+      .then(setBaseUrl)
+      .catch(() => setBaseUrl(""));
+  }, [load, sessionId]);
 
   /** 一键落库（复用 session_to_note；AI 判定结果回传保持预览一致——REQ-081） */
   const saveToNote = async () => {
@@ -147,7 +159,7 @@ export default function NotePreviewView({ sessionId }: { sessionId: number }) {
           </span>
         ))}
         <span style={{ fontSize: 11, color: "#6b7280", alignSelf: "center" }}>
-          保留 {preview.kept.length} 段 · 画面要点 {preview.ocr_points.length} 条
+          保留 {preview.kept.length} 段 · 画面要点 {preview.ocr_screens.length} 屏
         </span>
       </div>
 
@@ -184,7 +196,7 @@ export default function NotePreviewView({ sessionId }: { sessionId: number }) {
       {/* 过滤后笔记正文 */}
       <div
         style={{ fontSize: 13, lineHeight: 1.6, background: "#fff", border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 }}
-        dangerouslySetInnerHTML={{ __html: renderMarkdown(preview.markdown) }}
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(preview.markdown, baseUrl) }}
       />
 
       {/* 被过滤内容对照（可复查误杀——来源定位原料） */}

app/src/components/SessionDetailPanel.tsx

@@ -10,6 +10,7 @@
  */
 import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
+import { convertFileSrc } from "@tauri-apps/api/core";
 import ArtifactView from "../components/ArtifactView";
 import ImageGallery from "../components/ImageGallery";
 import NotePreviewView from "../components/NotePreviewView";
@@ -49,6 +50,8 @@ export default function SessionDetailPanel({ detail, fusing, degradedBanner, onT
   const [quality, setQuality] = useState<QualityReport | null>(null);
   // M6（REQ-077）：大纲（产物视图侧边导航）
   const [outline, setOutline] = useState<OutlineEntry[]>([]);
+  // v0.7.3（REQ-160）：屏卡配图 baseUrl（图集同款：convertFileSrc 拼本地路径）
+  const [baseUrl, setBaseUrl] = useState("");
   const sessionId = detail.session.id;
 
   // 质量报告 + 大纲随详情加载（失败不阻断详情展示）
@@ -62,6 +65,9 @@ export default function SessionDetailPanel({ detail, fusing, degradedBanner, onT
     void invoke<OutlineEntry[]>("session_outline", { id: sessionId })
       .then(setOutline)
       .catch(() => undefined);
+    void invoke<string>("session_images_base_url", { sessionId })
+      .then(setBaseUrl)
+      .catch(() => setBaseUrl(""));
   }, [sessionId]);
 
   return (
@@ -230,18 +236,91 @@ export default function SessionDetailPanel({ detail, fusing, degradedBanner, onT
             ))}
           </div>
 
-          {/* 画面要点 */}
-          <h3 style={{ fontSize: 13, margin: "16px 0 6px" }}>画面要点（OCR）</h3>
-          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
-            {detail.ocr_blocks.length === 0 && <p style={{ fontSize: 12, color: "#9ca3af" }}>本会话无画面识别内容</p>}
-            {detail.ocr_blocks.map((b) => (
-              <div key={b.id} id={`ocr-${sessionId}-${b.timestamp_ms}`} style={{ fontSize: 12, color: "#4b5563" }}>
-                <span style={{ color: "#9ca3af", fontVariantNumeric: "tabular-nums" }}>[{fmtMs(b.timestamp_ms)}]</span>{" "}
-                {b.text}
-                {b.region === "subtitle" && <span style={{ color: "#0d9488", marginLeft: 4 }}>字幕</span>}
+          {/* 画面要点（v0.7.3 屏卡流：区间+标题+正文+标签+配图+结构徽标；可展开块级明细复查） */}
+          <h3 style={{ fontSize: 13, margin: "16px 0 6px" }}>
+            画面要点（OCR）· {detail.screens.length} 屏
+            <span style={{ color: "#9ca3af", fontWeight: 400 }}>
+              {detail.screens.length === 0 ? "" : `（原始 ${detail.ocr_blocks.length} 块）`}
+            </span>
+          </h3>
+          {detail.screens.length === 0 && (
+            <p style={{ fontSize: 12, color: "#9ca3af" }}>本会话无画面识别内容</p>
+          )}
+          {detail.screens.map((s, i) => {
+            // 块级明细（原料复查）：屏时间区间内的原始块
+            const raw = detail.ocr_blocks.filter(
+              (b) => b.timestamp_ms >= s.first_seen_ms && b.timestamp_ms <= s.last_seen_ms,
+            );
+            return (
+              <div
+                key={i}
+                id={`ocr-${sessionId}-${s.first_seen_ms}`}
+                style={{
+                  border: "1px solid #e5e7eb",
+                  borderRadius: 8,
+                  padding: "8px 10px",
+                  marginBottom: 8,
+                  background: "#fafafa",
+                }}
+              >
+                <div style={{ fontSize: 11, color: "#0f766e", fontWeight: 600, marginBottom: 4 }}>
+                  📄 屏 {s.screen_id ?? i + 1} · {fmtMs(s.first_seen_ms)} – {fmtMs(s.last_seen_ms)}
+                  {s.structure.length > 0 &&
+                    s.structure.map((st, j) => (
+                      <span key={j} style={{ marginLeft: 8, color: "#7c3aed" }}>
+                        {st.kind === "table" ? "📊" : st.kind === "formula" ? "∑" : "⟨code⟩"} {st.kind}
+                      </span>
+                    ))}
+                </div>
+                {s.title && (
+                  <div style={{ fontSize: 14, fontWeight: 600, color: "#111827", marginBottom: 2 }}>
+                    {s.title}
+                  </div>
+                )}
+                {s.body.map((b, j) => (
+                  <div key={j} style={{ fontSize: 12.5, color: "#374151", lineHeight: 1.6 }}>
+                    {b}
+                  </div>
+                ))}
+                {s.labels.length > 0 && (
+                  <div style={{ fontSize: 11.5, color: "#6b7280", marginTop: 3 }}>
+                    标签：{s.labels.join(" · ")}
+                  </div>
+                )}
+                {s.structure.length > 0 && (
+                  <div style={{ fontSize: 11.5, color: "#7c3aed", marginTop: 3 }}>
+                    {s.structure.map((st, j) => (
+                      <div key={j}>[{st.kind}] {st.rendered ?? st.text.slice(0, 60)}</div>
+                    ))}
+                  </div>
+                )}
+                {s.image_ref && baseUrl && (
+                  <img
+                    src={convertFileSrc(`${baseUrl}/${s.image_ref}`)}
+                    alt={`屏 ${i + 1}`}
+                    loading="lazy"
+                    style={{
+                      maxWidth: 260,
+                      marginTop: 6,
+                      borderRadius: 6,
+                      border: "1px solid #e5e7eb",
+                      display: "block",
+                    }}
+                  />
+                )}
+                {raw.length > 0 && (
+                  <details style={{ fontSize: 11, color: "#9ca3af", marginTop: 4 }}>
+                    <summary style={{ cursor: "pointer" }}>块级明细（{raw.length} 块，可复查误合并）</summary>
+                    {raw.map((b) => (
+                      <div key={b.id}>
+                        [{fmtMs(b.timestamp_ms)}] {b.text}
+                      </div>
+                    ))}
+                  </details>
+                )}
               </div>
-            ))}
-          </div>
+            );
+          })}
 
           {/* 参考图集（v0.5.0 M6：REQ-051 三层图结构） */}
           <h3 style={{ fontSize: 13, margin: "16px 0 6px" }}>参考图集</h3>

app/src/types.ts

@@ -96,11 +96,39 @@ export interface SessionOcrBlock {
   region: string;
 }
 
-/** 会话详情（会话 + 转写段 + OCR 块） */
+/** 屏内结构块（Rust ScreenStructure；v0.7.3 REQ-159） */
+export interface ScreenStructure {
+  kind: string; // table | formula | code
+  text: string;
+  /** 精修渲染产物（None=未精修/失败） */
+  rendered: string | null;
+}
+
+/** 画面要点屏（Rust SessionScreen；v0.7.3 REQ-155/158/160，ADR-015） */
+export interface SessionScreen {
+  session_id: number;
+  /** 屏号（None=旧数据聚类派生） */
+  screen_id: number | null;
+  first_seen_ms: number;
+  last_seen_ms: number;
+  /** 标题角色行（None=无 bbox 降级/无标题） */
+  title: string | null;
+  /** 正文行（行合并后） */
+  body: string[];
+  /** 图注/标签 */
+  labels: string[];
+  /** 归档 full 图相对路径（None=无匹配图） */
+  image_ref: string | null;
+  structure: ScreenStructure[];
+}
+
+/** 会话详情（会话 + 转写段 + OCR 块 + 画面要点屏） */
 export interface SessionDetail {
   session: Session;
   segments: SessionSegment[];
   ocr_blocks: SessionOcrBlock[];
+  /** v0.7.3：画面要点屏卡（旧数据聚类兜底） */
+  screens: SessionScreen[];
 }
 
 /** 流式 ASR 模型就绪状态 */
@@ -146,6 +174,8 @@ export interface ImportProgress {
 export interface OcrEvent {
   timestampMs: number;
   text: string;
+  /** v0.7.3：块所属屏号（前端按屏摘要显示） */
+  screenId: number;
 }
 
 /** 会话信息（Rust SessionInfo，camelCase 契约；live:session-info 事件，v0.7.2 REQ-151） */
@@ -416,7 +446,10 @@ export interface NoteFilterResult {
   title: string;
   markdown: string;
   kept: SessionSegment[];
+  /** 画面要点（屏段落行） */
   ocr_points: string[];
+  /** v0.7.3：画面要点屏（结构化渲染用） */
+  ocr_screens: SessionScreen[];
   stats: FilterStats;
   filtered: FilteredItem[];
   merged: MergedItem[];