fix(ui): 列拖拽相邻增量与键盘微调（REQ-285）

Author: Aparencia

app/src/components/ColumnResizer.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+/**
+ * ColumnResizer.test.tsx — 拖拽增量语义回归测试（REQ-285，v0.19.6）。
+ *
+ * @ai-context: 覆盖根因「加速」：旧实现每次 move 传距起点累计位移，而调用方
+ *              resizeBy 为增量语义（cur + delta）→ 重复累加。断言 move 回调
+ *              收到**相邻增量**（50→70→80 = [20, 10]），up 后不再发；side="left"
+ *              符号反向；键盘 ←/→ 步进（Shift=8px）与双击复位（§2.9 矩阵）。
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import ColumnResizer from "./ColumnResizer";
+
+afterEach(cleanup);
+
+describe("ColumnResizer 增量拖拽（REQ-285）", () => {
+  it("move 序列发出相邻增量而非累计位移（右拖宽）", () => {
+    const onResize = vi.fn();
+    render(<ColumnResizer onResize={onResize} />);
+    const handle = screen.getByTestId("column-resizer");
+    fireEvent.pointerDown(handle, { clientX: 50 });
+    fireEvent.pointerMove(handle, { clientX: 70 });
+    fireEvent.pointerMove(handle, { clientX: 80 });
+    fireEvent.pointerUp(handle);
+    // 旧实现（累计）：[20, 30] → 加速；修复后相邻增量：[20, 10]
+    expect(onResize.mock.calls.map((c) => c[0])).toEqual([20, 10]);
+  });
+
+  it("pointerUp 后不再响应 move（拖拽结束）", () => {
+    const onResize = vi.fn();
+    render(<ColumnResizer onResize={onResize} />);
+    const handle = screen.getByTestId("column-resizer");
+    fireEvent.pointerDown(handle, { clientX: 50 });
+    fireEvent.pointerUp(handle);
+    fireEvent.pointerMove(handle, { clientX: 90 });
+    expect(onResize).not.toHaveBeenCalled();
+  });
+
+  it("side=left 方向反向（拖左手柄收窄自身列）", () => {
+    const onResize = vi.fn();
+    render(<ColumnResizer side="left" onResize={onResize} />);
+    const handle = screen.getByTestId("column-resizer");
+    fireEvent.pointerDown(handle, { clientX: 50 });
+    fireEvent.pointerMove(handle, { clientX: 70 });
+    fireEvent.pointerUp(handle);
+    expect(onResize.mock.calls.map((c) => c[0])).toEqual([-20]);
+  });
+
+  it("键盘 ←/→ 步进 ±16px（Shift=±8px）——键盘可达性（§2.9）", () => {
+    const onResize = vi.fn();
+    render(<ColumnResizer onResize={onResize} />);
+    const handle = screen.getByTestId("column-resizer");
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    fireEvent.keyDown(handle, { key: "ArrowRight", shiftKey: true });
+    expect(onResize.mock.calls.map((c) => c[0])).toEqual([16, -16, 8]);
+  });
+
+  it("双击触发复位（onReset）", () => {
+    const onReset = vi.fn();
+    render(<ColumnResizer onResize={vi.fn()} onReset={onReset} />);
+    fireEvent.doubleClick(screen.getByTestId("column-resizer"));
+    expect(onReset).toHaveBeenCalledTimes(1);
+  });
+});

app/src/components/ColumnResizer.tsx

@@ -20,18 +20,22 @@ interface Props {
 export default function ColumnResizer({ side = "right", onResize, onReset }: Props) {
   const [hover, setHover] = useState(false);
   const [dragging, setDragging] = useState(false);
-  const startXRef = useRef(0);
+  // REQ-285（v0.19.6）：上次事件 x——move 传**相邻增量**而非距起点累计位移。
+  // @ai-context: useColumnLayout.resizeBy 为增量语义（cur + delta）；旧实现每次
+  //              move 都传全程距离（clientX - startX）导致重复累加 =「拖拽加速」。
+  const lastXRef = useRef(0);
 
   const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     e.preventDefault();
-    startXRef.current = e.clientX;
+    lastXRef.current = e.clientX;
     try { e.currentTarget.setPointerCapture(e.pointerId); } catch { /* 旧 WebView 无捕获——move 仍走元素事件 */ }
     setDragging(true);
   };
 
   const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
     if (!dragging) return;
-    const dx = e.clientX - startXRef.current;
+    const dx = e.clientX - lastXRef.current;
+    lastXRef.current = e.clientX;
     onResize(side === "right" ? dx : -dx);
   };
 
@@ -41,17 +45,31 @@ export default function ColumnResizer({ side = "right", onResize, onReset }: Pro
     setDragging(false);
   };
 
+  // REQ-285（v0.19.6）：键盘可达性（§2.9 交互矩阵）——←/→ 步进 ±16px（Shift=±8px）。
+  // @ai-context: 与 pointer 拖拽同走 onResize 增量语义；夹取由 useColumnLayout 负责。
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    e.preventDefault();
+    const step = e.shiftKey ? 8 : 16;
+    const dx = e.key === "ArrowRight" ? step : -step;
+    onResize(side === "right" ? dx : -dx);
+  };
+
   return (
     <div
       data-testid="column-resizer"
+      role="separator"
+      aria-orientation="vertical"
+      tabIndex={0}
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}
       onPointerUp={endDrag}
       onPointerCancel={endDrag}
+      onKeyDown={onKeyDown}
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
       onDoubleClick={() => onReset?.()}
-      title="拖拽调整宽度（双击恢复默认）"
+      title="拖拽调整宽度（←/→ 微调；双击恢复默认）"
       style={{
         width: 5,
         flexShrink: 0,