fix(note): 笔记预览时间戳锚点 chip 化——renderTimestampAnchors 接入两个轻量渲染器

- NotePreviewView.renderMarkdown / RefineWorkbench.renderMd 预览阶段仍原文输出
  [⏱ 00:00]([[ts:233]])（v0.11.5 chip 只落了正式 NoteMarkdown）
- html.ts 新增 renderTimestampAnchors：已转义文本上先章头后段落替换，输出与
  正式笔记同款可跳转 chip（teal/虚线底/title）
- 新增 5 单测：段落 chip/章头 chip/无锚点穿透/转义-替换次序注入安全/非数字分钟

Author: Aparencia

app/src/components/NotePreviewView.tsx

@@ -13,7 +13,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { invoke, convertFileSrc } from "@tauri-apps/api/core";
 import type { Note, NoteFilterResult, TextFilterDecision, TextFilterReview, TextFilterStatus } from "../types";
-import { escapeHtml } from "../utils/html";
+import { escapeHtml, renderTimestampAnchors } from "../utils/html";
 import AiRefineCard from "./AiRefineCard";
 
 const btn: React.CSSProperties = { padding: "5px 10px", cursor: "pointer", fontSize: 12 };
@@ -33,7 +33,9 @@ const REASON_LABEL: Record<string, string> = {
 
 /** 轻量 Markdown 渲染（标题/段落/列表/屏配图——笔记正文结构有限，避免引渲染库；
  *  所有文本经 escapeHtml（utils/html.ts 单一定义源）转义——本地内容仍按不可信输入处理；
- *  v0.7.3：`![alt](session-images/...)` 配图行 → 本地图（baseUrl + convertFileSrc）） */
+ *  v0.7.3：`![alt](session-images/...)` 配图行 → 本地图（baseUrl + convertFileSrc））
+ *  v0.12.0：时间戳锚点 `[⏱ MM:SS]([[ts:ms]])`/章节锚点 → 芯片（renderTimestampAnchors
+ *  ——修复笔记录库前预览仍显示原始锚点文本的真机验收问题） */
 function renderMarkdown(md: string, imageBaseUrl: string, dataDir: string): string {
   return md
     .split("\n")
@@ -57,15 +59,16 @@ function renderMarkdown(md: string, imageBaseUrl: string, dataDir: string): stri
         // convertFileSrc 虽已编码但直出分支无编码，统一 escapeHtml 兜底
         return `<img src="${escapeHtml(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>`;
+      // v0.12.0：先转义再替换锚点（锚点语法字符不在转义集，匹配安全）
+      if (line.startsWith("# ")) return `<h2 style="font-size:15px;margin:10px 0 4px">${renderTimestampAnchors(escapeHtml(line.slice(2)))}</h2>`;
+      if (line.startsWith("## ")) return `<h3 style="font-size:13px;margin:8px 0 4px;color:#0f766e">${renderTimestampAnchors(escapeHtml(line.slice(3)))}</h3>`;
       // v0.7.5（REQ-170）：会话异常警示行（Markdown 引用行 → 警示块）
       if (line.startsWith("> ")) {
-        return `<div style="font-size:12px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:6px 10px;margin:6px 0">${escapeHtml(line.slice(2))}</div>`;
+        return `<div style="font-size:12px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:6px 10px;margin:6px 0">${renderTimestampAnchors(escapeHtml(line.slice(2)))}</div>`;
       }
-      if (line.startsWith("- ")) return `<div style="font-size:12px;color:#4b5563">• ${escapeHtml(line.slice(2))}</div>`;
+      if (line.startsWith("- ")) return `<div style="font-size:12px;color:#4b5563">• ${renderTimestampAnchors(escapeHtml(line.slice(2)))}</div>`;
       if (line.trim() === "") return "";
-      return `<p style="font-size:13px;color:#374151;margin:4px 0">${escapeHtml(line)}</p>`;
+      return `<p style="font-size:13px;color:#374151;margin:4px 0">${renderTimestampAnchors(escapeHtml(line))}</p>`;
     })
     .join("");
 }

app/src/components/RefineWorkbench.tsx

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import type { AiRefineResult, WorkbenchData } from "../types";
-import { escapeHtml } from "../utils/html";
+import { escapeHtml, renderTimestampAnchors } from "../utils/html";
 
 const overlay: React.CSSProperties = {
   position: "fixed", inset: 0, zIndex: 999,
@@ -27,12 +27,14 @@ const headerBtn: React.CSSProperties = {
 
 function renderMd(md: string): string {
   return md.split("\n").map((line) => {
-    if (line.startsWith("# ")) return `<h2 style="font-size:14px;margin:8px 0 3px">${escapeHtml(line.slice(2))}</h2>`;
-    if (line.startsWith("## ")) return `<h3 style="font-size:13px;margin:6px 0 2px;color:#0f766e">${escapeHtml(line.slice(3))}</h3>`;
-    if (line.startsWith("### ")) return `<h4 style="font-size:12px;margin:4px 0 2px;color:#374151">${escapeHtml(line.slice(4))}</h4>`;
-    if (line.startsWith("- ")) return `<div style="font-size:12px;color:#4b5563">• ${escapeHtml(line.slice(2))}</div>`;
+    // v0.12.0：先转义再替换时间戳锚点（章节锚点 `## 标题 [[⏱ ...]]` 与段落锚点；
+    // 精修版回挂的章节锚点此前以原始 markdown 文本显示——真机验收修复）
+    if (line.startsWith("# ")) return `<h2 style="font-size:14px;margin:8px 0 3px">${renderTimestampAnchors(escapeHtml(line.slice(2)))}</h2>`;
+    if (line.startsWith("## ")) return `<h3 style="font-size:13px;margin:6px 0 2px;color:#0f766e">${renderTimestampAnchors(escapeHtml(line.slice(3)))}</h3>`;
+    if (line.startsWith("### ")) return `<h4 style="font-size:12px;margin:4px 0 2px;color:#374151">${renderTimestampAnchors(escapeHtml(line.slice(4)))}</h4>`;
+    if (line.startsWith("- ")) return `<div style="font-size:12px;color:#4b5563">• ${renderTimestampAnchors(escapeHtml(line.slice(2)))}</div>`;
     if (line.trim() === "") return "";
-    return `<p style="font-size:12px;color:#374151;margin:2px 0">${escapeHtml(line)}</p>`;
+    return `<p style="font-size:12px;color:#374151;margin:2px 0">${renderTimestampAnchors(escapeHtml(line))}</p>`;
   }).join("");
 }
 

app/src/utils/html.test.ts

@@ -3,9 +3,11 @@
  *
  * Why 重点测属性注入：OCR/ASR 文本既入正文上下文也入属性值上下文，
  * `" onerror="` 类载荷是属性逃逸的最典型形态。
+ * v0.12.0 补：renderTimestampAnchors（时间戳回链锚点渲染芯片——预览/工作台
+ * 轻量渲染器不再显示原始 `[⏱ 00:00]([[ts:233]])` markdown 文本）。
  */
 import { describe, expect, it } from "vitest";
-import { escapeHtml } from "./html";
+import { escapeHtml, renderTimestampAnchors } from "./html";
 
 describe("escapeHtml", () => {
   it("五类特殊字符全部转义", () => {
@@ -50,3 +52,52 @@ describe("escapeHtml", () => {
     expect(out).toBe("<&");
   });
 });
+
+describe("renderTimestampAnchors", () => {
+  it("段落锚点渲染为芯片（不再显示原始 markdown）", () => {
+    // Arrange：规则版段落锚点（段首）——真机验收泄漏形态
+    const input = escapeHtml(`[⏱ 00:00]([[ts:233]]) 项目启动是一个艺术。`);
+    // Act
+    const out = renderTimestampAnchors(input);
+    // Assert：芯片出现、原始锚点文本消失
+    expect(out).toContain("⏱ 00:00");
+    expect(out).not.toContain("[⏱ 00:00]([[ts:233]])");
+  });
+
+  it("章节锚点（外带包裹括号）渲染为芯片", () => {
+    // Arrange：`## 标题 [[⏱ 00:09]([[ts:9000]])]` 的标题文本部分
+    const input = escapeHtml(`标题 [[⏱ 00:09]([[ts:9000]])]`);
+    // Act
+    const out = renderTimestampAnchors(input);
+    // Assert：芯片 + 标题保留；包裹括号与原始锚点均不残留
+    expect(out).toContain("⏱ 00:09");
+    expect(out).not.toContain("[[ts:9000]]");
+    expect(out).not.toContain("]]([[");
+  });
+
+  it("无锚点文本原样返回", () => {
+    const out = renderTimestampAnchors(escapeHtml(`普通文本没有锚点 123`));
+    expect(out).toBe("普通文本没有锚点 123");
+  });
+
+  it("先转义再替换——恶意 HTML 不产生可解析标签（注入面为零）", () => {
+    // Arrange：恶意字幕尝试在锚点旁注入脚本（锚点语法字符均非 HTML 特殊字符，
+    // 转义不改变匹配形态；但 `<script>` 已被转义）
+    const input = escapeHtml(`[⏱ 00:00]([[ts:233]]) <script>alert(1)</script> & "x"`);
+    // Act
+    const out = renderTimestampAnchors(input);
+    // Assert：芯片正常渲染 + 脚本不残留可解析标签 + 特殊字符保持转义
+    expect(out).toContain("⏱ 00:00");
+    expect(out).not.toContain("<script>");
+    expect(out).toContain("&lt;script&gt;");
+    expect(out).toContain("&quot;x&quot;");
+  });
+
+  it("冒号注入不破坏芯片（mm:ss 仅数字化）", () => {
+    // Arrange：文本中夹带仿锚点形态（非数字分钟）——不得误判
+    const input = escapeHtml(`文本 [⏱ 这是一个说明]([[ts:1]]) 后续`);
+    // Act：正则要求分钟为数字——仿形态不匹配，保持转义原文
+    const out = renderTimestampAnchors(input);
+    expect(out).toBe(input);
+  });
+});

app/src/utils/html.ts

@@ -16,3 +16,25 @@ export function escapeHtml(s: string): string {
     .replace(/"/g, """)
     .replace(/'/g, "'");
 }
+
+/**
+ * 时间戳回链锚点 → 芯片 HTML（与 NoteMarkdown 的 a 组件同视觉；v0.12.0 补完成）。
+ *
+ * @ai-context: 轻量渲染器（NotePreviewView/RefineWorkbench）此前不识别锚点语
+ *              法——`[⏱ 00:00]([[ts:233]])` 被 escapeHtml 后原样显示为文本
+ *              （真机验收「笔记预览仍有 [⏱ 00:00]([[ts:233]])」即此）。本函数
+ *              在**已转义文本**上做正则替换：锚点语法字符（`[ ] ( ) :` 数字）
+ *              均未被 escapeHtml 转义，模式匹配安全；芯片内容只含数字化 mm:ss
+ *              （无注入面——写入的是我们自己的 HTML）。
+ * @ai-context: 两种形态：章节锚点 `## 标题 [[⏱ 00:09]([[ts:9000]])]`（外带
+ *              `[...]` 包裹）先匹配，段落锚点 `[⏱ 00:00]([[ts:233]])` 兜底。
+ */
+export function renderTimestampAnchors(escaped: string): string {
+  const chip = (_m: string, mm: string, ss: string): string =>
+    `<span style="color:#0d9488;border-bottom:1px dashed #14b8a6;background:#f0fdfa;border-radius:3px;padding:0 4px" title="⏱ ${mm}:${ss} 跳转到会话对应片段">⏱ ${mm}:${ss}</span>`;
+  return escaped
+    // 章节形态（含包裹括号）：`[[⏱ MM:SS]([[ts:ms]])]`
+    .replace(/\[\[⏱ (\d+):(\d{2})\]\(\[\[ts:\d+\]\]\)\]/g, chip)
+    // 段落形态：`[⏱ MM:SS]([[ts:ms]])`
+    .replace(/\[⏱ (\d+):(\d{2})\]\(\[\[ts:\d+\]\]\)/g, chip);
+}