feat(notes): REQ-317 阅读/编辑两态选中右键接线与行动联动

Author: Aparencia

app/src/components/ModelCardFromNoteDialog.tsx

@@ -14,6 +14,9 @@ interface Props {
   noteTitle: string;
   onClose: () => void;
   onCreated?: () => void;
+  /** 批 8（REQ-317）：初始定义草稿预填（选区右键「模型卡预填」通道——
+   *  挂载时一次性读入；对话框每次由父层条件挂载，无需 key 重触发） */
+  initialExcerpt?: string;
 }
 
 const overlayStyle: React.CSSProperties = {
@@ -34,9 +37,9 @@ const cardStyle: React.CSSProperties = {
 };
 const btn: React.CSSProperties = { padding: "5px 12px", cursor: "pointer", fontSize: 12, borderRadius: 6, border: "1px solid #e5e7eb", background: "#fff", color: "#374151" };
 
-export default function ModelCardFromNoteDialog({ noteId, noteTitle, onClose, onCreated }: Props) {
+export default function ModelCardFromNoteDialog({ noteId, noteTitle, onClose, onCreated, initialExcerpt = "" }: Props) {
   const [name, setName] = useState("");
-  const [excerpt, setExcerpt] = useState("");
+  const [excerpt, setExcerpt] = useState(initialExcerpt);
   const [err, setErr] = useState("");
   const [msg, setMsg] = useState("");
   const [busy, setBusy] = useState(false);

app/src/components/NoteReadingView.test.tsx

@@ -6,7 +6,7 @@
  *              且未传时不渲染（回归：既有标题栏按钮布局不受影响）。
  */
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import type { Note } from "../types";
 import NoteReadingView from "./NoteReadingView";
 
@@ -67,3 +67,53 @@ describe("NoteReadingView 标题栏扩展插槽", () => {
     expect(screen.getByRole("button", { name: "📌" })).toBeTruthy();
   });
 });
+
+describe("阅读态正文选区右键菜单（批 8 REQ-317）", () => {
+  const renderSel = (extraProps: Partial<React.ComponentProps<typeof NoteReadingView>>) =>
+    render(
+      <NoteReadingView
+        note={baseNote()}
+        editing={false}
+        onEdit={noop}
+        onPinToggle={noop}
+        onDelete={noop}
+        onTagClick={noop}
+        onOpenSession={noop}
+        onTaskToggle={noop}
+        onImageOpen={noop}
+        {...extraProps}
+      />,
+    );
+
+  it("空选区右键不弹菜单（维持现状静默基线）", () => {
+    renderSel({});
+    const body = document.querySelector("[data-note-read-body]");
+    fireEvent.contextMenu(body!, { clientX: 60, clientY: 60 });
+    expect(screen.queryByTestId("note-sel-menu")).toBeNull();
+  });
+
+  it("正文内选区右键 → 阅读态菜单（无加入行动项），转问题上抛快照文本", () => {
+    const onSelectionAction = vi.fn();
+    renderSel({ onSelectionAction });
+    const body = document.querySelector("[data-note-read-body]");
+    expect(body).toBeTruthy();
+    const para = body!.querySelector("p");
+    expect(para).toBeTruthy();
+    // jsdom 无真实 Selection——用形状桩替 window.getSelection（handler 只读
+    // isCollapsed/rangeCount/锚焦/toString，锚=正文容器内段落文本节点）
+    const selStub = {
+      isCollapsed: false,
+      rangeCount: 1,
+      anchorNode: para!.firstChild,
+      focusNode: para!.firstChild,
+      toString: () => "选中段落文本",
+    };
+    vi.spyOn(window, "getSelection").mockReturnValue(selStub as unknown as Selection);
+    fireEvent.contextMenu(para!, { clientX: 80, clientY: 80 });
+    expect(screen.getByTestId("note-sel-menu")).toBeTruthy();
+    expect(screen.getByTestId("note-sel-copy")).toBeTruthy();
+    expect(screen.queryByTestId("note-sel-addTask")).toBeNull(); // 阅读态 V1 隐藏
+    fireEvent.click(screen.getByTestId("note-sel-toQuestion"));
+    expect(onSelectionAction).toHaveBeenCalledWith("toQuestion", "选中段落文本");
+  });
+});

app/src/components/NoteReadingView.tsx

@@ -17,6 +17,14 @@ import ColumnBar from "./ColumnBar";
 import { fmtDate, parseTags } from "./NoteListView";
 // 批 3（用户问题9）：阅读容器底部留白与编辑双面同源（末段不再贴底无法上移）
 import { BOTTOM_BREATHER_CSS } from "../utils/contentBreather";
+// 批 8（REQ-317）：正文选区右键菜单——纯判定/快照 util + 共享菜单组件
+import {
+  meaningfulSelection,
+  selectNodeContents,
+  type SelectionActionId,
+  type SelectionNoteAction,
+} from "../utils/noteSelectionMenu";
+import SelectionActionMenu from "./note-selection/SelectionActionMenu";
 
 interface Props {
   note: Note;
@@ -40,19 +48,28 @@ interface Props {
   onOpenSession: (sessionId: number) => void;
   onTaskToggle: (newContent: string) => void;
   onImageOpen: (src: string, title?: string) => void;
+  /** 批 8（REQ-317）：正文选区菜单行动类动作上抛（转问题/模型卡预填——
+   *  复制/全选就地执行，行动类由 NotesPage 层对话框/命令处理） */
+  onSelectionAction?: (action: SelectionNoteAction, text: string) => void;
 }
 
 export default function NoteReadingView({
   note, editing, editor, auxPanels, headerExtra,
   outlineFolded = false, externalSearch = null, onToggleOutline,
   onEdit, onPinToggle, onDelete, onTagClick, onOpenSession, onTaskToggle, onImageOpen,
+  onSelectionAction,
 }: Props) {
   // A2：搜索高亮（M6：匹配集合=渲染产物只读查询，计数经此状态驱动）
   const [searchQuery, setSearchQuery] = useState("");
   const [searchActive, setSearchActive] = useState(false);
   const [searchIndex, setSearchIndex] = useState(0);
   const [searchMatches, setSearchMatches] = useState<HTMLElement[]>([]);
   const contentRef = useRef<HTMLDivElement>(null);
+  // 批 8（REQ-317）：正文选区右键菜单态（x/y/文本快照——菜单打开瞬间捕获，
+  // 点击动作不再依赖 DOM 选区存活）与正文容器 ref（选区包含判定/全选目标；
+  // 容器=纯 Markdown 包装层，auxPanels 在容器外——跨容器选区不弹菜单）
+  const [selMenu, setSelMenu] = useState<{ x: number; y: number; text: string } | null>(null);
+  const bodyRef = useRef<HTMLDivElement | null>(null);
   // v0.19.1 审查 L1：已注入请求登记（{noteId,key}）——消费后不复活：
   // 用户关闭搜索/离开笔记再普通打开同一笔记时，旧命中词不得自动重现
   const injectedRef = useRef<{ noteId: number; key: number } | null>(null);
@@ -119,6 +136,29 @@ export default function NoteReadingView({
 
   const selectedTags = parseTags(note);
 
+  // 批 8（REQ-317）：正文区右键——仅在正文容器内存在非空选区时弹菜单；
+  // 空选区/跨容器选区（auxPanels/链接等既有交互）维持现状（原生菜单已被
+  // BrowserChrome 抑制 → 静默，不新增空选区菜单）
+  const handleBodyContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+    const text = meaningfulSelection(window.getSelection(), bodyRef.current);
+    if (!text) return;
+    e.preventDefault();
+    e.stopPropagation(); // 自绘菜单范式：不到 window（BrowserChrome 兜底仍在）
+    setSelMenu({ x: e.clientX, y: e.clientY, text });
+  };
+  // 菜单动作分发：全选=阅读容器全文（最小可行方案，纯 DOM Range）；行动类上抛
+  const handleSelAction = (action: Exclude<SelectionActionId, "copy">) => {
+    const text = selMenu?.text ?? "";
+    if (action === "selectAll") {
+      selectNodeContents(bodyRef.current);
+      return;
+    }
+    // 阅读态菜单 V1 不含 addTask（DOM↔源码行映射留后续 TD-2026-09-09-C）——
+    // 防御性忽略其余动作（类型上 action 仍是全集，注释说明 Why）
+    if (action !== "toQuestion" && action !== "toModelCard") return;
+    if (text && onSelectionAction) onSelectionAction(action, text);
+  };
+
   return (
     <>
       {/* v0.11.5/v0.15 大纲面板（统一列折叠体系：折叠 → 26px 窄条） */}
@@ -244,16 +284,33 @@ export default function NoteReadingView({
         ) : (
           <div ref={contentRef} style={{ flex: 1, overflowY: "auto", padding: `16px 16px ${BOTTOM_BREATHER_CSS}`, fontSize: 14, lineHeight: 1.8 }}>
             {auxPanels}
-            <NoteMarkdown
-              note={note}
-              searchQuery={searchActive ? searchQuery : ""}
-              onTaskToggle={onTaskToggle}
-              onOpenSession={onOpenSession}
-              onImageOpen={onImageOpen}
-            />
+            {/* 批 8（REQ-317）：正文容器=纯 Markdown 包装层（选区判定/全选
+                scope；auxPanels 在容器外保持既有交互不被右键菜单截获） */}
+            <div ref={bodyRef} data-note-read-body="" onContextMenu={handleBodyContextMenu}>
+              <NoteMarkdown
+                note={note}
+                searchQuery={searchActive ? searchQuery : ""}
+                onTaskToggle={onTaskToggle}
+                onOpenSession={onOpenSession}
+                onImageOpen={onImageOpen}
+              />
+            </div>
           </div>
         )}
       </div>
+
+      {/* 批 8（REQ-317）：正文选区右键菜单（阅读态——复制就地、全选=容器全文、
+          加入行动 V1 隐藏[DOM↔源码行映射留后续 TD-2026-09-09-C]、行动类上抛） */}
+      {!editing && selMenu && (
+        <SelectionActionMenu
+          mode="reading"
+          x={selMenu.x}
+          y={selMenu.y}
+          text={selMenu.text}
+          onClose={() => setSelMenu(null)}
+          onAction={handleSelAction}
+        />
+      )}
     </>
   );
 }

app/src/components/RichEditorView.test.tsx

@@ -88,6 +88,44 @@ describe("RichEditorView 核心编辑", () => {
   });
 });
 
+describe("RichEditorView 选区右键菜单（批 8 REQ-317）", () => {
+  it("空选区右键不弹菜单（维持现状静默基线）", async () => {
+    render(<RichEditorView note={baseNote} onCancel={vi.fn()} />);
+    await waitFor(() => expect(cmContent().textContent).toContain("第一行"));
+    fireEvent.contextMenu(cmContent(), { clientX: 120, clientY: 120 });
+    expect(screen.queryByTestId("note-sel-menu")).toBeNull();
+  });
+
+  it("Ctrl+A 全选后右键 → 菜单含加入行动；点击后选区末行后插任务行", async () => {
+    render(<RichEditorView note={baseNote} onCancel={vi.fn()} />);
+    await waitFor(() => expect(cmContent().textContent).toContain("第一行"));
+    fireEvent.keyDown(cmContent(), { key: "a", ctrlKey: true });
+    fireEvent.contextMenu(cmContent(), { clientX: 120, clientY: 120 });
+    expect(await screen.findByTestId("note-sel-menu")).toBeTruthy();
+    expect(screen.getByTestId("note-sel-copy")).toBeTruthy();
+    expect(screen.getByTestId("note-sel-selectAll")).toBeTruthy();
+    expect(screen.getByTestId("note-sel-addTask")).toBeTruthy();
+    expect(screen.getByTestId("note-sel-toQuestion")).toBeTruthy();
+    expect(screen.getByTestId("note-sel-toModelCard")).toBeTruthy();
+    fireEvent.click(screen.getByTestId("note-sel-addTask"));
+    // 全选快照单行化（含换行折叠）成任务文本，插在选区结束行（末行）之后；
+    // CM .cm-content 的 textContent 按行 div 拼接无换行符（行内断言见纯函数域）
+    await waitFor(() => {
+      expect(cmContent().textContent).toBe("第一行第二行- [ ] 第一行 第二行");
+    });
+  });
+
+  it("行动类（转为问题）经 onSelectionAction 上抛（含快照文本）", async () => {
+    const onSelectionAction = vi.fn();
+    render(<RichEditorView note={baseNote} onCancel={vi.fn()} onSelectionAction={onSelectionAction} />);
+    await waitFor(() => expect(cmContent().textContent).toContain("第一行"));
+    fireEvent.keyDown(cmContent(), { key: "a", ctrlKey: true });
+    fireEvent.contextMenu(cmContent(), { clientX: 120, clientY: 120 });
+    fireEvent.click(await screen.findByTestId("note-sel-toQuestion"));
+    expect(onSelectionAction).toHaveBeenCalledWith("toQuestion", "第一行\n第二行");
+  });
+});
+
 describe("RichEditorView 草稿恢复层", () => {
   it("存在更新草稿 → 提示恢复；点恢复 → title/content 生效", async () => {
     localStorage.setItem(

app/src/components/RichEditorView.tsx

@@ -28,12 +28,18 @@ import NoteEditView, { type NoteEditHandle } from "./NoteEditView";
 import NoteColorPicker from "./NoteColorPicker";
 // 批 3（用户问题9）：CM 内容底部留白与阅读/textarea 同源（末行可滚离底边）
 import { BOTTOM_BREATHER_CSS } from "../utils/contentBreather";
+// 批 8（REQ-317）：编辑态选区右键菜单——插入计划纯函数 + 共享菜单组件
+import { planTaskLineInsert, type SelectionActionId, type SelectionNoteAction } from "../utils/noteSelectionMenu";
+import SelectionActionMenu from "./note-selection/SelectionActionMenu";
 
 interface Props {
   note: Note;
   onCancel: () => void;
   /** 图片点击放大回调（透传 NotesPage 的 ImagePreviewOverlay） */
   onImageOpen?: (url: string, title?: string) => void;
+  /** 批 8（REQ-317）：选区菜单行动类动作上抛（转问题/模型卡预填——复制/
+   *  全选/加入行动就地执行，行动类由 NotesPage 层对话框/命令处理） */
+  onSelectionAction?: (action: SelectionNoteAction, text: string) => void;
 }
 
 const TOOLBAR_BTN: React.CSSProperties = {
@@ -51,7 +57,7 @@ const editorTheme = EditorView.theme({
 });
 
 const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView(
-  { note, onCancel, onImageOpen }, ref,
+  { note, onCancel, onImageOpen, onSelectionAction }, ref,
 ) {
   const [title, setTitle] = useState(note.title);
   // CM 非受控持有正文；content state 仅作草稿恢复时的外部 doc 同步源
@@ -62,17 +68,23 @@ const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView
   const [draftPrompt, setDraftPrompt] = useState<{ title: string; content: string } | null>(null);
   // v0.16.1：荧光笔色板弹层开合（受控——选色/默认黄/点击外部关闭）
   const [highlightOpen, setHighlightOpen] = useState(false);
+  // 批 8（REQ-317）：编辑态选区右键菜单态（CM 选区文本快照——点击动作不再
+  // 依赖“点击瞬间选区仍在”，快照语义与阅读态 SelectionActionMenu 一致）
+  const [selMenu, setSelMenu] = useState<{ x: number; y: number; text: string } | null>(null);
 
   // refs 快照（卸载/定时器闭包取最新值，防 state 闭包过期——同 NoteEditView）
   const titleRef = useRef(title);
   const contentRef = useRef(content);
   // 内联回调 ref：CM extensions 构造后不可更新，keymap/plugin 闭包必须经 ref 取最新
   const onCancelRef = useRef(onCancel);
   const onImageOpenRef = useRef(onImageOpen);
+  // 批 8：onSelectionAction 同 ref 模式（CM extension 与菜单动作闭包取最新）
+  const onSelectionActionRef = useRef(onSelectionAction);
   useEffect(() => { titleRef.current = title; }, [title]);
   useEffect(() => { contentRef.current = content; }, [content]);
   useEffect(() => { onCancelRef.current = onCancel; }, [onCancel]);
   useEffect(() => { onImageOpenRef.current = onImageOpen; }, [onImageOpen]);
+  useEffect(() => { onSelectionActionRef.current = onSelectionAction; }, [onSelectionAction]);
 
   // ── v0.15 剪贴板图片：粘贴即落盘（import_note_image_b64）+ 插入相对引用 ──
   const onInsertImage = useCallback((rel: string) => {
@@ -125,6 +137,40 @@ const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView
     autosave.scheduleDraftWrite();
   }, [autosave.markDirty, autosave.scheduleDraftWrite]);
 
+  // 批 8（REQ-317）：编辑态选区动作就地执行（复制已在菜单内用快照文本完成）
+  const runSelAction = (action: Exclude<SelectionActionId, "copy">) => {
+    const view = viewRef.current;
+    const snapshotText = selMenu?.text ?? "";
+    if (action === "selectAll") {
+      // 全选=CM 既有 select-all 语义（basicSetup Mod-a 同命令路径：主选区覆盖
+      // 全 doc）——不引 @codemirror/commands（无直接依赖），dispatch 等价
+      if (!view) return;
+      view.dispatch({
+        selection: { anchor: 0, head: view.state.doc.length },
+        scrollIntoView: true,
+      });
+      view.focus();
+      return;
+    }
+    if (action === "addTask") {
+      // 加入行动：以「选区结束处所在行」为锚插入 `- [ ] <快照文本>` 独立任务行；
+      // dispatch → 既有 onChange → 自动保存/草稿/任务索引重扫通道（不 bypass）
+      if (!view || !snapshotText) return;
+      const plan = planTaskLineInsert(view.state.doc.toString(), view.state.selection.main.to, snapshotText);
+      if (!plan) return;
+      view.dispatch({
+        changes: { from: plan.from, insert: plan.insert },
+        selection: { anchor: plan.from + plan.insert.length },
+        userEvent: "input.addtask",
+      });
+      view.focus();
+      return;
+    }
+    if (snapshotText && onSelectionActionRef.current) {
+      onSelectionActionRef.current(action, snapshotText);
+    }
+  };
+
   const extensions = useMemo(() => [
     basicSetup,
     markdown(),
@@ -136,6 +182,23 @@ const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView
     ]),
     // v0.15：粘贴图片 → 拦截 + 落盘 + 插入引用（文字粘贴走默认行为）
     EditorView.domEventHandlers({ paste: (e) => handleImagePaste(e) }),
+    // 批 8（REQ-317）：编辑态选区右键菜单——CM 主选区非空（sliceDoc 非空串）
+    // 才弹菜单（右键落点通常已由 CM mousedown 语义定选区）；空选区维持现状
+    // （原生菜单已被全局抑制→静默，与阅读态“空选区不弹”取最小一致）
+    EditorView.domEventHandlers({
+      // domEventHandlers 回调签名为 (event, view)——事件在前、视图在后（与
+      // keymap 的 (view, event) 相反），paste 处理同型单参可用
+      contextmenu: (e, view) => {
+        const main = view.state.selection.main;
+        if (main.empty) return false;
+        const t = view.state.sliceDoc(main.from, main.to);
+        if (!t.trim()) return false;
+        e.preventDefault();
+        e.stopPropagation(); // 自绘菜单范式：到 window 前截停（原生兜底同在）
+        setSelMenu({ x: e.clientX, y: e.clientY, text: t });
+        return true;
+      },
+    }),
     imageDecorationPlugin({ noteId: note.id, onOpen: (url, t) => onImageOpenRef.current?.(url, t) }),
     editorTheme,
   ], [note.id, autosave.saveVersioned, autosave.flushLatestRef, handleImagePaste]);
@@ -316,6 +379,19 @@ const RichEditorView = forwardRef<NoteEditHandle, Props>(function RichEditorView
       <div ref={containerRef} style={{ flex: 1, overflow: "hidden" }} />
 
       {status && <p style={{ padding: "4px 16px", fontSize: 12, color: "#047857" }}>{status}</p>}
+
+      {/* 批 8（REQ-317）：编辑态选区右键菜单（复制就地、全选=CM select-all、
+          加入行动=选区内容插任务行走既有保存通道、行动类上抛 NotesPage） */}
+      {selMenu && (
+        <SelectionActionMenu
+          mode="editing"
+          x={selMenu.x}
+          y={selMenu.y}
+          text={selMenu.text}
+          onClose={() => setSelMenu(null)}
+          onAction={runSelAction}
+        />
+      )}
     </div>
   );
 });