feat(notes): REQ-317 选区右键菜单纯逻辑与共享自绘菜单组件

Author: Aparencia

app/src/components/note-selection/SelectionActionMenu.tsx

@@ -0,0 +1,189 @@
+/**
+ * SelectionActionMenu — 笔记正文「选中文字右键」共享自绘菜单（REQ-317，批 8）。
+ *
+ * @ai-context: 阅读态（NoteReadingView）与编辑态（RichEditorView/CodeMirror）
+ *              两宿主共用的应用内菜单——原生菜单已被 BrowserChrome 全局抑制，
+ *              本组件即其替代：**文本快照（text）在菜单打开时由宿主捕获传入**
+ *              （Why：菜单内点击会动焦点/选区，动作不得依赖“点击瞬间的 DOM
+ *              选区仍存活”；编辑态快照来自 CM state，阅读态来自 window
+ *              Selection）。复制在菜单内自执行并内联展示结果（行菜单范式：
+ *              复制后保持打开、状态行留痕）；其余动作经 onAction 委托宿主
+ *              （先 onClose 再执行——既有行菜单范式）。
+ * @ai-context: 交互契约同既有自绘菜单：透明背板（点击/右键即关）、ESC 关闭
+ *              （**capture 层监听 + stopPropagation**——编辑态下 NotesPage 有
+ *              全局 ESC=退出编辑的 window 监听（挂载更早、先于本组件 bubble
+ *              监听），capture 先拦截可让 ESC 只关菜单不误退编辑）、坐标钳制、
+ *              滚动/失焦/缩放收起。背板与面板 z 60/61 同既有行菜单。
+ */
+import { useEffect, useRef, useState } from "react";
+import {
+  buildSelectionMenuItems,
+  clampMenuXY,
+  type NoteSelectionMode,
+  type SelectionActionId,
+} from "../../utils/noteSelectionMenu";
+import { writeClipboardText } from "../../utils/clipboardWrite";
+
+interface Props {
+  x: number;
+  y: number;
+  mode: NoteSelectionMode;
+  /** 菜单打开瞬间的选区文本快照（见文件头 Why） */
+  text: string;
+  onClose: () => void;
+  /** 非复制动作委托宿主（先关菜单后执行；selectAll/addTask 亦走此） */
+  onAction: (id: Exclude<SelectionActionId, "copy">) => void;
+}
+
+const MENU_W = 224;
+/** 行高/头/状态行余量的高度估算（钳制用；菜单自身不溢出视口） */
+const ROW_H = 30;
+const HEAD_H = 34;
+
+const ITEM: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "5px 10px",
+  border: "none",
+  background: "none",
+  borderRadius: 6,
+  fontSize: 12.5,
+  cursor: "pointer",
+  textAlign: "left",
+};
+
+export default function SelectionActionMenu({ x, y, mode, text, onClose, onAction }: Props) {
+  const [status, setStatus] = useState("");
+  const items = buildSelectionMenuItems(mode, text.trim().length > 0);
+  const statusShown = status.length > 0;
+  // 复制的异步落定后组件可能已卸载（点背板关闭）——写标志防 setState on unmounted
+  const aliveRef = useRef(true);
+  useEffect(() => () => { aliveRef.current = false; }, []);
+
+  // ESC 关闭：capture 层先于 NotesPage 全局 ESC（退出编辑）监听生效并阻断冒泡
+  // ——菜单开着时 ESC 只关菜单（见文件头）；关闭后监听移除，ESC 恢复全局语义
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose]);
+
+  // 滚动收起（capture：正文容器自身的 scroll 也会到 window；菜单自身滚动除外）
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const close = () => onClose();
+    const onScroll = (e: Event) => {
+      if (menuRef.current && e.target instanceof Node && menuRef.current.contains(e.target)) return;
+      close();
+    };
+    const onBlurOrResize = () => onClose();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("blur", onBlurOrResize);
+    window.addEventListener("resize", onBlurOrResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("blur", onBlurOrResize);
+      window.removeEventListener("resize", onBlurOrResize);
+    };
+  }, [onClose]);
+
+  const menuH = HEAD_H + items.length * ROW_H + (statusShown ? 26 : 8);
+  const pos = clampMenuXY(x, y, MENU_W, menuH, window.innerWidth, window.innerHeight);
+
+  const copy = () => {
+    void writeClipboardText(text).then((ok) => {
+      if (!aliveRef.current) return;
+      setStatus(ok ? "已复制选中文本" : "复制失败（可用 Ctrl+C）");
+    });
+  };
+
+  return (
+    <>
+      {/* 透明背板：点击/右键收起（覆盖全屏拦截） */}
+      <div
+        onClick={onClose}
+        onContextMenu={(e) => { e.preventDefault(); onClose(); }}
+        style={{ position: "fixed", inset: 0, zIndex: 60, background: "transparent" }}
+      />
+      <div
+        ref={menuRef}
+        role="menu"
+        data-testid="note-sel-menu"
+        data-app-menu=""
+        onContextMenu={(e) => e.preventDefault()}
+        // preventDefault 防焦点窃取：mousedown 默认会聚焦按钮使 CM/正文失焦
+        // （复制后菜单保持打开留状态行——编辑态焦点须留在编辑器）
+        onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); }}
+        style={{
+          position: "fixed",
+          left: pos.x,
+          top: pos.y,
+          zIndex: 61,
+          width: MENU_W,
+          background: "#fff",
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+          boxShadow: "0 8px 24px rgba(0,0,0,0.14)",
+          padding: 4,
+        }}
+      >
+        {/* 快照预览（行菜单标题位同构；溢出省略 + title 全文） */}
+        <div
+          style={{
+            fontSize: 11,
+            color: "#6b7280",
+            padding: "2px 10px 4px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+          title={text}
+        >
+          {text}
+        </div>
+        {items.map((item) => (
+          <div key={item.id}>
+            {item.dividerBefore && <div style={{ height: 1, background: "#f3f4f6", margin: "3px 6px" }} />}
+            <button
+              data-testid={`note-sel-${item.id}`}
+              disabled={!item.enabled}
+              onClick={() => {
+                if (!item.enabled) return;
+                if (item.id === "copy") { copy(); return; }
+                onClose();
+                onAction(item.id);
+              }}
+              style={{
+                ...ITEM,
+                color: item.enabled ? "#374151" : "#d1d5db",
+                cursor: item.enabled ? "pointer" : "default",
+              }}
+            >
+              <span style={{ width: 20, fontSize: 12, textAlign: "center" }}>{item.icon}</span>
+              {item.label}
+            </button>
+          </div>
+        ))}
+        {statusShown && (
+          <div
+            data-testid="note-sel-copy-status"
+            style={{
+              fontSize: 11,
+              color: status.startsWith("已") ? "#047857" : "#dc2626",
+              padding: "2px 10px 2px",
+            }}
+          >
+            {status}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

app/src/utils/clipboardWrite.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+/**
+ * clipboardWrite.test.ts — 剪贴板写入 util（REQ-317）。
+ * 覆盖：主路径（clipboard API）成功；主路径拒绝 → 兜底 execCommand 成功；
+ *       双路径皆不可用 → false（不抛异常）；navigator 缺失环境守卫。
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { writeClipboardText } from "./clipboardWrite";
+
+const originalClipboard = navigator.clipboard;
+
+/** jsdom 未实现 document.execCommand——按需以 stub 属性注入（afterEach 清理） */
+function stubExecCommand(impl: () => boolean) {
+  Object.defineProperty(document, "execCommand", { configurable: true, value: impl });
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+});
+
+afterEach(() => {
+  Object.defineProperty(document, "execCommand", { configurable: true, value: undefined });
+  Object.defineProperty(navigator, "clipboard", { configurable: true, value: originalClipboard });
+});
+
+describe("writeClipboardText", () => {
+  it("clipboard API 可用 → 写入成功返回 true", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
+    await expect(writeClipboardText("片段")).resolves.toBe(true);
+    expect(writeText).toHaveBeenCalledWith("片段");
+  });
+
+  it("clipboard API 拒绝 → 兜底 execCommand 路径", async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error("denied"));
+    Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
+    const exec = vi.fn().mockReturnValue(true);
+    stubExecCommand(exec);
+    await expect(writeClipboardText("片段")).resolves.toBe(true);
+    expect(exec).toHaveBeenCalledWith("copy");
+    // 兜底临时 textarea 已清理（不留 DOM 残渣）
+    expect(document.querySelectorAll("textarea")).toHaveLength(0);
+  });
+
+  it("双路径不可用 → false（不抛异常）", async () => {
+    Object.defineProperty(navigator, "clipboard", { configurable: true, value: undefined });
+    stubExecCommand(() => false);
+    await expect(writeClipboardText("x")).resolves.toBe(false);
+  });
+
+  it("execCommand 抛异常（极端宿主）→ false", async () => {
+    Object.defineProperty(navigator, "clipboard", { configurable: true, value: undefined });
+    stubExecCommand(() => {
+      throw new Error("no exec");
+    });
+    await expect(writeClipboardText("x")).resolves.toBe(false);
+  });
+});

app/src/utils/clipboardWrite.ts

@@ -0,0 +1,38 @@
+/**
+ * clipboardWrite — 应用内统一剪贴板写入（REQ-317 选区菜单复制动作）。
+ *
+ * @ai-context: WebView2 剪贴板 API 在安全上下文中可用，但权限拒绝/降级宿主
+ *              需兜底——execCommand("copy") 经隐藏 textarea 路径（BrowserChrome/
+ *              行菜单既有模式）。返回布尔成败，调用方按需展示反馈；
+ *              Ctrl+C 键盘主路径始终不受影响。
+ */
+export async function writeClipboardText(text: string): Promise<boolean> {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // 权限拒绝/不可用 → 落兜底路径（不吞掉反馈权）
+    }
+  }
+  try {
+    if (typeof document === "undefined" || typeof document.execCommand !== "function") return false;
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.setAttribute("readonly", "");
+    // 视觉隐藏但保持可选中（opacity/position 方案，避免 display:none 不可选）
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } finally {
+      document.body.removeChild(ta);
+    }
+    return ok;
+  } catch {
+    return false;
+  }
+}