nx-kv 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 本文件记录对外可见的变更。格式参考 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/)。
 
+## [0.24.0] - 2026-11-05 进程面板支持项目组
+
+### Added
+
+- **进程面板支持按项目组聚合（任务 #56）**：组发布的任务散在成员项目各自的队列里，
+  原来的进程面板锁定单个目录，看不见组的全景。现在：
+  - **组页**新增「进程」入口，打开即按组聚合——扫全部队列、收正文
+    `frontmatter.board` 指向本组的任务（与组页任务面板同一口径），卡片标题旁标出
+    归属项目；非组任务不混入。
+  - **任务页**的工具栏「进程」按任务自身语义分流：任务带工作组语义（`board`）
+    就按组打开，不带就仍按目录打开（现状不变）。
+  - **按项目筛选**：面板顶部一组 chips（「全部」+ 各成员项目，带计数），点击过滤
+    进程卡，顶部统计（并发/跑/等/完/平均进度）随筛选范围联动。筛选是会话内状态，
+    切组后自动回落「全部」。
+  - 跨队列批量删除按任务**所在队列**分桶逐桶提交（删除 API 按目录寻址），
+    勾选键用 `topicKey:id` 复合键——不同队列的同号任务不会互相顶掉。
+
+## [0.23.0] - 2026-11-05 定位轨可拖动
+
+### Added
+
+- **任务页 ack 定位轨支持拖动（任务 #55）**：按住汉堡钮把整条轨拖到正文区内任意位置，
+  双击回默认钉位；落点存 localStorage，重开面板还在。单击（位移 <4px）仍是展开/收起，
+  拖动不会误触；拖到容器边缘自动钳回界内。
+  - 实现注意一：钉位态的轨盒子被 `top/bottom` 双锚拉满（`bottom:44px` → 高 760），
+    钳制必须用**临时解除底锚量出的自然高**（同帧同步量取再恢复，子元素本来就堆在
+    顶部，无视觉跳动）——直接用拉伸盒高会把第一次拖动错钳到容器顶部。
+  - 实现注意二：落点存盘用**拖动会话里的最终落点**（`pointerup` 时 React 状态可能
+    还未提交，读 state 会存回拖动前的旧位置，等于白拖）。
+  - 落点纯逻辑（钳制 + 存取）独立成 `modules/board/ack-rail-pos.js`，node 单测
+    `tests/unit/ack-rail-pos.test.mjs` 6 条；端到端 Playwright 探针（隔离 store +
+    临时端口 7879 + 本机 Chrome）11 条断言全过：跟手、越界钳制、拖完即持久化、
+    拖后 click 不误触、展开态拖动、重开还原、双击回默认位、零 console error。
+
 ## [0.22.0] - 2026-11-05 任务页 ack 定位轨
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-kv",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "nx-kv — KV 清单管理中枢（远程）+ 本机本地任务队列（localtask）：serve 驱动 CLI 与 Web 面板，同源同构，附带可安装 skill 供 agent 提交 / 领取 / 阻塞接收任务",
   "type": "module",
   "bin": {

package/src/web/frontend/components/md/ack-rail.jsx

@@ -8,8 +8,16 @@
 // 两种渲染态都要能用：
 //   - 实时预览（.mdw-lp）：块有 data-i，按序号直接取
 //   - 阅读态（.mdw-preview）：整篇一次性渲染，没有块元素，按「第 N 个 ack 标题」取
-import { useCallback, useEffect, useMemo, useState } from 'react';
+//
+// 轨可拖动（任务 #55）：汉堡钮是拖把——按住拖整条轨（Pointer Events，>4px 算拖、
+// 否则算点击），双击回默认钉位；落点经 modules/board/ack-rail-pos.js 钳制并
+// 存 localStorage，重开面板还在。拖动语义只在任务页这层加，简介页轨不受影响。
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ackNodeTitle } from '../../modules/board/ack-nodes.js';
+import { clampRailPos, loadRailPos, saveRailPos } from '../../modules/board/ack-rail-pos.js';
+
+// 位移阈值：超过才算拖动（否则 pointerup 后的 click 照常展开/收起）
+const DRAG_THRESHOLD = 4;
 
 /**
  * 在滚动容器里按块序号找到目标块。
@@ -46,6 +54,112 @@ function blockAt(root, idx, ackOrdinal) {
 export default function AckRail({ nodes = [], scrollRoot = null, onJump = null }) {
   const [open, setOpen] = useState(false);
   const [activeRound, setActiveRound] = useState(0);
+  // 拖动落点：null = 默认钉位（CSS）；有值 = inline left/top 自由落点
+  const [pos, setPos] = useState(loadRailPos);
+  const [dragging, setDragging] = useState(false);
+  const railRef = useRef(null);
+  const dragRef = useRef(null); // 拖动会话：起点、容器/轨尺寸、是否已过阈值、最终落点
+  const draggedRef = useRef(false); // 刚结束的是拖动 → 吃掉紧随的 click，别误触展开
+
+  // 持久化落点钳回当前容器内（视口可能比上次拖动时小）
+  useEffect(() => {
+    const el = railRef.current;
+    const parent = el && el.parentElement;
+    if (!el || !parent) return undefined;
+    const fix = () => {
+      // 经 setPos updater 读最新落点(不另设 ref);钳制是纯函数,重复调用幂等
+      setPos((cur) => {
+        if (!cur) return cur;
+        const pr = parent.getBoundingClientRect();
+        const rr = el.getBoundingClientRect();
+        const fixed = clampRailPos({
+          x: cur.x, y: cur.y, parentW: pr.width, parentH: pr.height, railW: rr.width, railH: rr.height,
+        });
+        return fixed && (fixed.x !== cur.x || fixed.y !== cur.y) ? fixed : cur;
+      });
+    };
+    fix();
+    // 窗口缩放时也别出界
+    window.addEventListener('resize', fix, { passive: true });
+    return () => window.removeEventListener('resize', fix);
+  }, []);
+
+  // ─── 拖动（汉堡钮 = 拖把）────────────────────────────────────────
+  const beginDrag = useCallback((e) => {
+    if (e.pointerType === 'mouse' && e.button !== 0) return;
+    const el = railRef.current;
+    const parent = el && el.parentElement;
+    if (!el || !parent) return;
+    // 钉位态盒子被 top/bottom 双锚拉满（bottom:44 → 高 760），实测高 ≠ 拖后自由态
+    // 自然高——拿它钳制会把上限错钳到容器顶部（第一次拖只能落在 y≤132）。
+    // 临时解除底锚量一次自然高再恢复：同帧同步、子元素本来就从顶部堆叠，无视觉跳动。
+    const prevBottom = el.style.bottom;
+    el.style.bottom = 'auto';
+    const rr = el.getBoundingClientRect();
+    if (prevBottom) el.style.bottom = prevBottom;
+    else el.style.bottom = '';
+    const pr = parent.getBoundingClientRect();
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startLeft: rr.left - pr.left, // 轨在容器内的当前左/上（含钉位态）——位移在此基础上叠加
+      startTop: rr.top - pr.top,
+      parentW: pr.width,
+      parentH: pr.height,
+      railW: rr.width,
+      railH: rr.height, // 自然高（已解除底锚量取）
+      moved: false,
+    };
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+      /* 老浏览器不支持捕获时照常工作（指针没离开按钮的话） */
+    }
+  }, []);
+
+  const onDragMove = useCallback((e) => {
+    const d = dragRef.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    const dx = e.clientX - d.startX;
+    const dy = e.clientY - d.startY;
+    if (!d.moved) {
+      if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      d.moved = true;
+      draggedRef.current = true;
+      setDragging(true);
+      document.body.style.userSelect = 'none'; // 拖动别顺带选中正文
+    }
+    // 抓握点跟随手指：轨在容器内的落点 = 指针按下时的轨位置 + 指针位移
+    //（startLeft 按下时实测，grabDX 的偏移天然已含在内，不需要再修正）
+    const fixed = clampRailPos({
+      x: d.startLeft + dx,
+      y: d.startTop + dy,
+      parentW: d.parentW,
+      parentH: d.parentH,
+      railW: d.railW,
+      railH: d.railH,
+    });
+    if (fixed) {
+      d.last = fixed; // 最终落点记在会话里——pointerup 直接取，不等 React 提交
+      setPos(fixed);
+    }
+  }, []);
+
+  const endDrag = useCallback((e) => {
+    const d = dragRef.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    dragRef.current = null;
+    if (!d.moved) return; // 没过阈值 = 点击，交给 onClick 展开/收起
+    setDragging(false);
+    document.body.style.userSelect = '';
+    saveRailPos(d.last); // 拖完落点才存（拖动过程不写盘；存会话里的最终落点，不读可能未提交的 state）
+  }, []);
+
+  const resetPos = useCallback(() => {
+    setPos(null);
+    saveRailPos(null); // 清记录 = 回 CSS 默认钉位
+  }, []);
 
   const items = useMemo(() => (nodes || []).map((n) => ({ ...n, title: ackNodeTitle(n) })), [nodes]);
 
@@ -85,13 +199,29 @@ export default function AckRail({ nodes = [], scrollRoot = null, onJump = null }
   if (!items.length) return null;
 
   return (
-    <aside className={'doc-rail ack-rail' + (open ? ' open' : '')} aria-label="验收轮次">
+    <aside
+      ref={railRef}
+      className={'doc-rail ack-rail' + (open ? ' open' : '') + (dragging ? ' dragging' : '')}
+      style={pos ? { left: pos.x, top: pos.y, right: 'auto', bottom: 'auto' } : undefined}
+      aria-label="验收轮次"
+    >
       <button
         type="button"
         className="doc-rail-menu"
-        title={open ? '收起轮次' : '展开轮次'}
+        title={open ? '收起轮次（双击回默认位）' : '展开轮次 · 按住拖动 · 双击回默认位'}
         aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => {
+          if (draggedRef.current) {
+            draggedRef.current = false; // 这下 click 是拖动结束带出来的，别当点击
+            return;
+          }
+          setOpen((v) => !v);
+        }}
+        onPointerDown={beginDrag}
+        onPointerMove={onDragMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onDoubleClick={resetPos}
       >
         <span /><span /><span />
       </button>

package/src/web/frontend/modules/board/ack-rail-pos.js

@@ -0,0 +1,50 @@
+// ack 定位轨的拖动落点（任务 #55）：坐标钳制 + localStorage 持久化。
+//
+// 轨默认钉在任务正文区右上（.mdw > .ack-rail 的 CSS 顶/底）；用户按住汉堡钮可把
+// 整条轨拖到容器内任意位置，落点存 localStorage，重开面板还在。纯函数与存取都在
+// 这一层，不依赖 DOM——指针事件编排在组件（components/md/ack-rail.jsx）里，
+// 这层保持 node 单测可直接覆盖（localStorage 缺席时存取静默降级）。
+
+const POS_KEY = 'nx-kv-ack-rail-pos';
+export const RAIL_MARGIN = 8; // 落点距容器边缘的最小间距
+
+/**
+ * 把落点钳回容器内（四边各留 margin）。容器比轨还窄/矮时，钳到 margin 为下限
+ * （宁可贴边也不出界）。任何输入非法 → 返回 null（调用方放弃本次更新）。
+ * @param {{x:number,y:number,parentW:number,parentH:number,railW?:number,railH?:number,margin?:number}} p
+ * @returns {{x:number,y:number}|null}
+ */
+export function clampRailPos(p = {}) {
+  const { x, y, parentW, parentH, railW = 0, railH = 0, margin = RAIL_MARGIN } = p || {};
+  if (![x, y, parentW, parentH].every((n) => Number.isFinite(n))) return null;
+  const maxX = Math.max(margin, parentW - railW - margin);
+  const maxY = Math.max(margin, parentH - railH - margin);
+  return {
+    x: Math.min(maxX, Math.max(margin, x)),
+    y: Math.min(maxY, Math.max(margin, y)),
+  };
+}
+
+/** 读取持久化落点；无记录 / 脏数据 / localStorage 不可用 → null（回落到 CSS 默认位） */
+export function loadRailPos() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(POS_KEY) || 'null');
+    if (!raw || typeof raw !== 'object') return null;
+    const x = Number(raw.x);
+    const y = Number(raw.y);
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+    return { x, y };
+  } catch {
+    return null;
+  }
+}
+
+/** 持久化落点；传 null 清掉（回到 CSS 默认位）。localStorage 不可用时静默跳过。 */
+export function saveRailPos(pos) {
+  try {
+    if (!pos) localStorage.removeItem(POS_KEY);
+    else localStorage.setItem(POS_KEY, JSON.stringify({ x: Math.round(pos.x), y: Math.round(pos.y) }));
+  } catch {
+    /* 隐私模式等存不了就算了 */
+  }
+}

package/src/web/frontend/modules/md/style.css

@@ -650,6 +650,23 @@
   font-weight:600;font-size:11px;font-family:inherit;color:var(--mid,#838A93);
 }
 .mdw-prog-all:hover{background:var(--mdw-accent-soft);color:var(--mdw-accent)}
+/* 组模式的项目筛选 chips（任务 #56）：「全部」+ 各成员项目，点击过滤进程卡；
+   数量小字用 <b>，选中态用 accent 描边 */
+.mdw-prog-filters{
+  flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;
+  border-bottom:1px solid var(--line,#E4E2DC);
+}
+.mdw-prog-fchip{
+  border:1px solid var(--line,#E4E2DC);background:var(--paper,#fff);color:var(--ink-2,#4B515A);
+  border-radius:14px;padding:3px 10px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;
+  display:inline-flex;align-items:center;gap:4px;
+}
+.mdw-prog-fchip b{font-weight:700;font-size:10px;color:var(--mid,#838A93)}
+.mdw-prog-fchip:hover{border-color:var(--mdw-accent);color:var(--mdw-accent)}
+.mdw-prog-fchip.on{background:var(--mdw-accent-soft);border-color:var(--mdw-accent);color:var(--mdw-accent)}
+.mdw-prog-fchip.on b{color:var(--mdw-accent)}
+/* 组模式卡片标题旁的项目 tag（复用 rp-ptag 视觉，略收间距贴标题） */
+.mdw-tcard-proj{margin-left:6px}
 /* 勾选后的操作条：已选 n 条 + 清除 + 删除所选 */
 .mdw-prog-sel{
   flex:none;display:flex;align-items:center;gap:6px;padding:7px 10px;
@@ -1059,6 +1076,12 @@
    .mdw 本身是 position:relative，absolute 轨锚在它上面。 */
 .mdw > .ack-rail{top:96px;bottom:44px}
 .mdw > .ack-rail .doc-rail-ticks{gap:12px}
+/* 可拖动（任务 #55）：汉堡钮是拖把。touch-action:none 防触屏拖动被页面滚动劫持；
+   拖动态抬层 + grabbing 光标。落点落定后是 inline left/top（组件里写），right/bottom
+   置 auto 解除钉位——所以这里不写任何 top/right，默认位完全交给原规则。 */
+.mdw > .ack-rail .doc-rail-menu{cursor:grab;touch-action:none}
+.mdw > .ack-rail.dragging{z-index:80}
+.mdw > .ack-rail.dragging .doc-rail-menu{cursor:grabbing;background:var(--soft,#F1F0EC);color:var(--ink,#16181C)}
 .doc-rail-sec{padding:4px 0 8px;border-bottom:1px solid var(--line,#E4E2DC)}
 .doc-rail-sec:last-child{border-bottom:0;padding-bottom:4px}
 .doc-rail-sec-lab{

package/src/web/frontend/page/dir/task.jsx

@@ -325,13 +325,18 @@ export default function PagePanel({ dirKey, task, beside = false, tabId, model }
   // 工具栏「进程」：面板化之后进程不再是内嵌右侧栏，而是工作区里独立的一块
   // （可拖动 / 可浮出 / 可单独关掉）。已开着同一目录的进程面板就聚焦它，不重复开。
   // 注意 config 要带上 dirKey：进程面板是按**目录**取任务的，缺了会落到全局池。
+  // 任务带工作组语义（frontmatter.board，任务 #56）→ 进程按**组**聚合打开：
+  // 组发布的任务散在成员项目各自的队列里，单目录视图看不见全景。
   const openProgress = () => {
     const m = model || app.model;
     if (!m) return;
+    const boardId = docFm && docFm.board ? String(docFm.board) : '';
     openPanel(m, {
       component: 'progress',
       name: '进程',
-      config: { dirKey: dirKey || GLOBAL_KEY, task: task != null ? String(task) : undefined },
+      config: boardId
+        ? { groupKey: boardId, task: task != null ? String(task) : undefined }
+        : { dirKey: dirKey || GLOBAL_KEY, task: task != null ? String(task) : undefined },
       location: 'right',
     });
   };

package/src/web/frontend/page/group/index.jsx

@@ -228,6 +228,21 @@ export default function GroupView({ dirKey, rows, repoData, onNavigate, model })
           >
             ＋ 新增任务
           </button>
+          <button
+            className="btn small ghost"
+            title="打开本组的任务进程面板：组内各项目队列聚合显示，可按项目筛选（任务 #56）"
+            onClick={() => {
+              if (!model) return;
+              openPanel(model, {
+                component: 'progress',
+                name: '进程',
+                config: { groupKey: dirKey },
+                location: 'right',
+              });
+            }}
+          >
+            进程
+          </button>
           <button
             className="btn small ghost"
             title="挑项目加进这个组（可搜索项目与项目组）"