feat(notes): 正文多色荧光笔 ==[色]文本==——修订单色裁决 + hName 缺陷修复（原落 div 无样式）+ 双编辑器色板入口（REQ-239）

Author: Aparencia

app/scripts/gen-mark-css.mjs

@@ -0,0 +1,37 @@
+const PALETTE = {
+  red: { light: "#E5484D", dark: "#FF6369" },
+  orange: { light: "#F76B15", dark: "#FF8B3D" },
+  yellow: { light: "#F5D90A", dark: "#FFE45C" },
+  green: { light: "#30A46C", dark: "#3DD68C" },
+  teal: { light: "#12A594", dark: "#29E0CB" },
+  blue: { light: "#0091FF", dark: "#5EB1FF" },
+  purple: { light: "#8E4EC6", dark: "#C59BFF" },
+  pink: { light: "#D6409F", dark: "#FF8AD8" },
+  brown: { light: "#8D6E63", dark: "#B89B8A" },
+  gray: { light: "#8E8E93", dark: "#9E9EA3" },
+  black: { light: "#1C1C1E", dark: "#F2F2F7" },
+  white: { light: "#FFFFFF", dark: "#1C1C1E" },
+};
+function lum(hex) {
+  const raw = hex.replace("#", "");
+  const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(full.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function ratio(a, b) {
+  const la = lum(a), lb = lum(b);
+  const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function onColor(hex) {
+  return ratio(hex, "#000000") >= ratio(hex, "#FFFFFF") ? "#1C1C1E" : "#FFFFFF";
+}
+for (const theme of ["light", "dark"]) {
+  console.log(`/* ${theme} */`);
+  for (const [id, c] of Object.entries(PALETTE)) {
+    console.log(`.note-mark-${id} { background: ${c[theme]}; color: ${onColor(c[theme])}; }`);
+  }
+}

app/src/components/NoteEditView.tsx

@@ -16,6 +16,8 @@ import {
   insertAtCursor, wrapSelection, headingLines, promoteHeading, demoteHeading, mergeSelection, splitAtCursor,
   type EditResult,
 } from "./markdownEdit";
+// v0.16.1：正文多色荧光笔——色板复用（选中色 → 包裹 ==[色]…==）
+import NoteColorPicker from "./NoteColorPicker";
 
 interface Props {
   note: Note;
@@ -45,6 +47,8 @@ const NoteEditView = forwardRef<NoteEditHandle, Props>(function NoteEditView({ n
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
   const [status, setStatus] = useState("");
+  // v0.16.1：荧光笔色板弹层开合（与 RichEditorView 同模式）
+  const [highlightOpen, setHighlightOpen] = useState(false);
   const taRef = useRef<HTMLTextAreaElement>(null);
   // L14：双计时器 ref（idle debounce + maxWait，常量见文件头注释）
   const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -203,7 +207,7 @@ const NoteEditView = forwardRef<NoteEditHandle, Props>(function NoteEditView({ n
 
   // 工具栏操作（v0.10.1：local-image 需异步导入——dialog 选文件后复制进
   // data_dir 再插入相对引用；import 失败明确提示不落脏数据）
-  const toolbarAction = async (action: string) => {
+  const toolbarAction = async (action: string, color?: string | null) => {
     const ta = taRef.current;
     if (!ta) return;
     // 读取当前 DOM 值与选区（受控组件下与 content state 一致）
@@ -240,6 +244,11 @@ const NoteEditView = forwardRef<NoteEditHandle, Props>(function NoteEditView({ n
         break;
       }
       case "latex": applyEdit(wrapSelection(v, s, e, "$", "$")); break;
+      // v0.16.1：正文多色荧光笔——默认黄 / 指定色（==文本== / ==[色]文本==）
+      case "highlight-default": applyEdit(wrapSelection(v, s, e, "==", "==")); break;
+      case "highlight-color":
+        if (color) applyEdit(wrapSelection(v, s, e, `==[${color}]`, "=="));
+        break;
       case "image": {
         // v0.15：外链图自动下载复制（防源站删除丢资源）——失败降级插原 URL + 提示
         const alt = prompt("图片描述：") || "";
@@ -322,6 +331,34 @@ const NoteEditView = forwardRef<NoteEditHandle, Props>(function NoteEditView({ n
         <button style={TOOLBAR_BTN} onClick={() => void toolbarAction("local-image")} title="插入本地图片（复制进应用数据目录）">🖼 图片</button>
         <button style={TOOLBAR_BTN} onClick={() => void toolbarAction("image")} title="插入外链图（自动下载为本地副本）">🌐 链接图</button>
         <button style={TOOLBAR_BTN} onClick={() => void toolbarAction("latex")} title="LaTeX">Σ</button>
+        {/* v0.16.1：正文多色荧光笔——默认黄 / 12 色板（降级 textarea 与 CM 版同入口） */}
+        <div style={{ position: "relative" }}>
+          <button style={TOOLBAR_BTN} data-testid="highlight-open" onClick={() => setHighlightOpen((v) => !v)} title="荧光笔：==文本==（默认黄）；==[色]文本==">🖍 荧光</button>
+          {highlightOpen && (
+            <>
+              <div onClick={() => setHighlightOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30, background: "transparent" }} />
+              <div
+                data-testid="highlight-pop"
+                style={{ position: "absolute", top: "100%", left: 0, zIndex: 31, background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)", maxWidth: 200 }}
+              >
+                <button
+                  data-testid="highlight-default"
+                  style={{ ...TOOLBAR_BTN, width: "100%", marginBottom: 6, background: "#fefce8" }}
+                  onClick={() => { void toolbarAction("highlight-default"); setHighlightOpen(false); }}
+                >
+                  🖍 默认黄 ==文本==
+                </button>
+                <NoteColorPicker
+                  value={null}
+                  onChange={(c) => {
+                    if (c) void toolbarAction("highlight-color", c);
+                    setHighlightOpen(false);
+                  }}
+                />
+              </div>
+            </>
+          )}
+        </div>
         <span style={{ flex: 1 }} />
         {/* A1段落操作提示 */}
         <span style={{ fontSize: 10, color: "#9ca3af" }}>Ctrl+Shift+↑↓层级 · M合并 · S拆分</span>

app/src/components/NoteMarkdown.test.tsx

@@ -1,10 +1,14 @@
 // @vitest-environment jsdom
 /**
- * NoteMarkdown.test.tsx — 换行语义锁定（v0.15 remark-breaks）。
+ * NoteMarkdown.test.tsx — 换行语义锁定（v0.15 remark-breaks）+ 荧光笔渲染链
+ * （v0.16.1 多色 + hName 修复）。
  *
  * @ai-context: 修复"编辑态换行、阅读态连上"——单换行（软换行）必须渲染为 <br>；
  *              段落分隔（\n\n）仍是两段不产生 <br>；`\` 强断行语义保留。
  *              锁契约防未来 remark 插件顺序回归。
+ * @ai-context: v0.16.1——==[red]重点== 渲染 <mark class="note-mark note-mark-red">；
+ *              ==默认== 渲染 <mark class="note-mark">（插件 hName 修复：原落 div，
+ *              components.mark 按 hast tagName 匹配实际从未命中=无样式）。
  */
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "@testing-library/react";
@@ -68,4 +72,20 @@ describe("NoteMarkdown 换行语义（v0.15 remark-breaks）", () => {
     expect((li as HTMLElement).textContent).toContain("续行内容");
     expect((li as HTMLElement).querySelector("br")).toBeTruthy();
   });
+
+  it("==[red]重点== 渲染 <mark class=note-mark note-mark-red>（v0.16.1 多色）", () => {
+    const { container } = renderMd("==[red]重点==");
+    const m = container.querySelector("mark.note-mark.note-mark-red");
+    expect(m).toBeTruthy();
+    expect(m?.textContent).toBe("重点");
+  });
+
+  it("==默认== 渲染 <mark class=note-mark>（v0.16.1 hName 修复——原落 div 无样式）", () => {
+    const { container } = renderMd("==默认==");
+    const m = container.querySelector("mark.note-mark");
+    expect(m).toBeTruthy();
+    expect(m?.textContent).toBe("默认");
+    // 除 mark 外无其他元素（不落 div 容器）
+    expect(container.querySelector("div")).toBeNull();
+  });
 });

app/src/components/NoteMarkdown.tsx

@@ -159,9 +159,12 @@ export default function NoteMarkdown({ note, searchQuery, onTaskToggle, onOpenSe
       remarkPlugins={[remarkGfm, remarkMath, remarkMarkHighlight, remarkBreaks]}
       rehypePlugins={[rehypeKatex]}
       components={{
-        // v0.14 B：==文本== 荧光笔（remark 插件产出 mark 节点；单色黄，浅/深主题通用）
-        mark: ({ node, children, ...props }) => (
-          <mark style={{ background: "#fde68a", borderRadius: 2, padding: "0 1px" }} {...props}>{hl(children)}</mark>
+        // v0.14 B：==文本== 荧光笔（remark 插件产出 mdast mark 节点 + hName/hProperties）
+        // v0.16.1：多色——className 由插件注入（note-mark[-{colorId}]，样式见 note-mark.css）；
+        //          原实现硬编码单色黄（且无 hName 经 defaultUnknownHandler 落 div——
+        //          组件按 hast tagName 匹配实际从未命中，现由插件 hName 修复）
+        mark: ({ node, className, children, ...props }) => (
+          <mark className={className} {...props}>{hl(children)}</mark>
         ),
         // 任务清单勾选（H1：渲染时记录序号 → 仅替换对应源行）
         input: ({ node, ...props }) => {

app/src/components/RichEditorView.tsx

@@ -24,6 +24,8 @@ import { insertTextCommand, wrapSelectionCommand } from "../commands/toolbarComm
 import { imageDecorationPlugin } from "./imageDecorationPlugin";
 import { clearDraft, readDraft } from "../utils/draftStore";
 import NoteEditView, { type NoteEditHandle } from "./NoteEditView";
+// v0.16.1：正文多色荧光笔——色板复用（选中色 → 包裹 ==[色]…==）
+import NoteColorPicker from "./NoteColorPicker";
 
 interface Props {
   note: Note;
@@ -55,6 +57,8 @@ const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView
   const [fallback, setFallback] = useState(false);
   const [activeHeading, setActiveHeading] = useState(0);
   const [draftPrompt, setDraftPrompt] = useState<{ title: string; content: string } | null>(null);
+  // v0.16.1：荧光笔色板弹层开合（受控——选色/默认黄/点击外部关闭）
+  const [highlightOpen, setHighlightOpen] = useState(false);
 
   // refs 快照（卸载/定时器闭包取最新值，防 state 闭包过期——同 NoteEditView）
   const titleRef = useRef(title);
@@ -247,6 +251,34 @@ const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView
         <button style={TOOLBAR_BTN} onClick={() => void toolbarAction("local-image")} title="插入本地图片（复制进应用数据目录）">🖼 图片</button>
         <button style={TOOLBAR_BTN} onClick={() => void toolbarAction("image")} title="插入外链图（自动下载为本地副本）">🌐 链接图</button>
         <button style={TOOLBAR_BTN} onClick={() => void toolbarAction("latex")} title="LaTeX">Σ</button>
+        {/* v0.16.1：正文多色荧光笔——默认黄 / 12 色板（包裹选区 ==文本== / ==[色]文本==） */}
+        <div style={{ position: "relative" }}>
+          <button style={TOOLBAR_BTN} data-testid="highlight-open" onClick={() => setHighlightOpen((v) => !v)} title="荧光笔：==文本==（默认黄）；==[色]文本==">🖍 荧光</button>
+          {highlightOpen && (
+            <>
+              <div onClick={() => setHighlightOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30, background: "transparent" }} />
+              <div
+                data-testid="highlight-pop"
+                style={{ position: "absolute", top: "100%", left: 0, zIndex: 31, background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)", maxWidth: 200 }}
+              >
+                <button
+                  data-testid="highlight-default"
+                  style={{ ...TOOLBAR_BTN, width: "100%", marginBottom: 6, background: "#fefce8" }}
+                  onClick={() => { wrapSelectionCommand("==", "==")(viewRef.current!); setHighlightOpen(false); }}
+                >
+                  🖍 默认黄 ==文本==
+                </button>
+                <NoteColorPicker
+                  value={null}
+                  onChange={(c) => {
+                    if (c) wrapSelectionCommand(`==[${c}]`, "==")(viewRef.current!);
+                    setHighlightOpen(false);
+                  }}
+                />
+              </div>
+            </>
+          )}
+        </div>
         <span style={{ flex: 1 }} />
         <span style={{ fontSize: 10, color: "#9ca3af" }}>Ctrl+Shift+↑↓层级 · Ctrl+Z 撤销</span>
         <span style={{ width: 1, height: 20, background: "#d1d5db" }} />

app/src/main.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+// v0.16.1：正文多色荧光笔样式（remarkMarkHighlight 注入类名 note-mark[-{colorId}]）
+import "./note-mark.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

app/src/note-mark.css

@@ -0,0 +1,49 @@
+/* 
+ * note-mark.css — 正文多色荧光笔样式（v0.16.1 用户决定①）。
+ *
+ * @ai-context: 类名由 remarkMarkHighlight 插件经 mdast data.hProperties 注入
+ *              （note-mark [+ note-mark-{colorId}]）；双主题变体与
+ *              utils/colorPalette 12 色板对齐，前景色按 WCAG AA（≥4.5:1）
+ *              取黑/白（生成脚本 scripts/gen-mark-css.mjs——改色板先重跑脚本
+ *              再提交，保证定义期一致；纯函数层 isThemeSafe 契约不变）。
+ *              默认黄（无前缀 ==文本==）走 .note-mark 基础规则，与旧版一致。
+ */
+.note-mark {
+  border-radius: 2px;
+  padding: 0 1px;
+  background: #fde68a;
+  color: #1c1c1e;
+}
+
+/* light */
+.note-mark-red { background: #E5484D; color: #1C1C1E; }
+.note-mark-orange { background: #F76B15; color: #1C1C1E; }
+.note-mark-yellow { background: #F5D90A; color: #1C1C1E; }
+.note-mark-green { background: #30A46C; color: #1C1C1E; }
+.note-mark-teal { background: #12A594; color: #1C1C1E; }
+.note-mark-blue { background: #0091FF; color: #1C1C1E; }
+.note-mark-purple { background: #8E4EC6; color: #FFFFFF; }
+.note-mark-pink { background: #D6409F; color: #1C1C1E; }
+.note-mark-brown { background: #8D6E63; color: #FFFFFF; }
+.note-mark-gray { background: #8E8E93; color: #1C1C1E; }
+.note-mark-black { background: #1C1C1E; color: #FFFFFF; }
+.note-mark-white { background: #FFFFFF; color: #1C1C1E; }
+
+@media (prefers-color-scheme: dark) {
+  .note-mark {
+    background: #ffe45c;
+    color: #1c1c1e;
+  }
+  .note-mark-red { background: #FF6369; color: #1C1C1E; }
+  .note-mark-orange { background: #FF8B3D; color: #1C1C1E; }
+  .note-mark-yellow { background: #FFE45C; color: #1C1C1E; }
+  .note-mark-green { background: #3DD68C; color: #1C1C1E; }
+  .note-mark-teal { background: #29E0CB; color: #1C1C1E; }
+  .note-mark-blue { background: #5EB1FF; color: #1C1C1E; }
+  .note-mark-purple { background: #C59BFF; color: #1C1C1E; }
+  .note-mark-pink { background: #FF8AD8; color: #1C1C1E; }
+  .note-mark-brown { background: #B89B8A; color: #1C1C1E; }
+  .note-mark-gray { background: #9E9EA3; color: #1C1C1E; }
+  .note-mark-black { background: #F2F2F7; color: #1C1C1E; }
+  .note-mark-white { background: #1C1C1E; color: #FFFFFF; }
+}

app/src/utils/remarkMarkHighlight.test.ts

@@ -1,9 +1,9 @@
 /**
- * ==文本== 荧光笔 remark 插件测试（v0.14 B 视觉系统）。
+ * ==文本== / ==[色]文本== 荧光笔 remark 插件测试（v0.14 B + v0.16.1 多色扩展）。
  *
- * @ai-context: spec §6——==文本== 渲染为 mark；未闭合/跨行/代码块内不误伤；
- *              多个高亮同段落、行内混合文本。插件是纯 mdast 树变换——测试
- *              直接构造树验证（不依赖 remark 运行时包）。
+ * @ai-context: spec §6——==文本== 渲染为 mark（默认黄）；==[色id]文本== 彩色；
+ *              未知色/未闭合/跨行/代码块内不误伤；多个高亮同段落、行内混合文本。
+ *              插件是纯 mdast 树变换——测试直接构造树验证（不依赖 remark 运行时包）。
  */
 import { describe, expect, it } from "vitest";
 import { remarkMarkHighlight } from "./remarkMarkHighlight";
@@ -13,6 +13,8 @@ interface MdNode {
   type: string;
   value?: string;
   children?: MdNode[];
+  data?: { hName: string; hProperties: { className: string[] } };
+  colorId?: string;
 }
 
 /** 构造段落节点（快捷） */
@@ -24,6 +26,25 @@ function text(value: string): MdNode {
   return { type: "text", value };
 }
 
+/** 默认（无色）mark 节点期望形状（hName/hProperties 供 to-hast 落到 <mark>） */
+function mark(value: string): MdNode {
+  return {
+    type: "mark",
+    children: [text(value)],
+    data: { hName: "mark", hProperties: { className: ["note-mark"] } },
+  };
+}
+
+/** 彩色 mark 节点期望形状 */
+function markColored(colorId: string, value: string): MdNode {
+  return {
+    type: "mark",
+    colorId,
+    children: [text(value)],
+    data: { hName: "mark", hProperties: { className: ["note-mark", `note-mark-${colorId}`] } },
+  };
+}
+
 /** 应用插件变换，返回 root 的 children */
 function apply(...children: MdNode[]): MdNode[] {
   const root: MdNode = { type: "root", children };
@@ -44,11 +65,25 @@ function marks(nodes: MdNode[]): string[] {
 }
 
 describe("remarkMarkHighlight", () => {
-  it("闭合 ==文本== → mark 节点", () => {
+  it("闭合 ==文本== → mark 节点（默认黄：hName=mark + className note-mark）", () => {
     const out = apply(para(text("重点是==这个==")));
-    expect(out).toEqual([
-      para(text("重点是"), { type: "mark", children: [text("这个")] }),
-    ]);
+    expect(out).toEqual([para(text("重点是"), mark("这个"))]);
+  });
+
+  it("==[red]文本== → 彩色 mark（className 带 note-mark-red）", () => {
+    const out = apply(para(text("==[red]红色重点==")));
+    expect(out).toEqual([para(markColored("red", "红色重点"))]);
+  });
+
+  it("同段落混合：默认黄 + 彩色 + 普通文本", () => {
+    const out = apply(para(text("==黄== 与 ==[blue]蓝== 都要")));
+    expect(out).toEqual([para(mark("黄"), text(" 与 "), markColored("blue", "蓝"), text(" 都要"))]);
+  });
+
+  it("未知色 id（==[neon]==）整体原样保留（不拆不猜）", () => {
+    const out = apply(para(text("==[neon]未知色==")));
+    expect(out).toEqual([para(text("==[neon]未知色=="))]);
+    expect(marks(out)).toEqual([]);
   });
 
   it("同一段落多个高亮", () => {