nx-kv 0.11.2 → 0.11.4

package/src/modules/repos/view.jsx

@@ -16,61 +16,52 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { api } from '../../web/frontend/api/client.js';
 import { useStore } from '../../web/frontend/store.jsx';
-import { useGuard, useDialog, useToast, Modal } from '../../web/frontend/components/ui.jsx';
+import { useGuard, useDialog, useToast, Modal, Copyable } from '../../web/frontend/components/ui.jsx';
 import { CliHints } from '../../web/frontend/components/CliHints.jsx';
 
-const EMPTY_FORM = { path: '', name: '', desc: '', tags: '', notes: '' };
+const EMPTY_FORM = { path: '', name: '', desc: '', notes: '' };
 
-// 仓库行：名称+描述 / 路径 / 标签 / 所属看板（可加可摘）/ 操作
-function RepoRow({ r, boards, acts }) {
-  const mine = r.boards || [];
-  const notIn = boards.filter((b) => !mine.some((x) => x.id === b.id));
+// 路径照搬目录看板的「可扫标签」画法：祖先目录变暗、末段略重，点击复制全文。
+// 纯灰一长串（旧画法）里，人眼要逐字符对比才能找到目录名。
+function RepoPath({ path }) {
+  const s = String(path || '');
+  const cut = s.replace(/\\/g, '/').lastIndexOf('/');
+  if (cut < 0) return <Copyable text={s}>{s}</Copyable>;
+  return (
+    <Copyable text={s} title="点击复制完整路径">
+      <span className="anc">{s.slice(0, cut)}</span>
+      {s.slice(cut)}
+    </Copyable>
+  );
+}
+
+// 仓库行：名称 + 描述 / 路径（点击复制）/ 操作。
+// 中心清单里**不再显示所属看板**——行内的 chip + × + 下拉三件套又挤又乱，
+// 归属的增删统一走「成员管理」弹窗（筛选到看板 → 导入仓库 / 摘除）。
+// 看板视图下描述行显示**组内描述**（该仓库在这个组里的角色），没写则回退仓库描述。
+function RepoRow({ r, filterBoard, acts }) {
+  const note = filterBoard
+    ? ((r.boards || []).find((b) => b.id === filterBoard.id)?.note || '')
+    : null;
+  const desc = note !== null ? (note || r.desc || '') : (r.desc || '');
+  const descTitle = note !== null
+    ? (note ? `组内描述：${note}` : `（组内描述未写，暂显示仓库描述）${r.desc || ''}`)
+    : (r.desc || '');
   return (
     <tr>
       <td className="rp-name">
         <strong>{r.name}</strong>
-        {r.desc ? <div className="muted rp-desc" title={r.desc}>{r.desc}</div> : null}
-      </td>
-      <td className="mono rp-path" title={r.path}>{r.path}</td>
-      <td className="rp-tags">
-        {(r.tags || []).map((t) => (
-          <span className="tag" key={t}>{t}</span>
-        ))}
-      </td>
-      <td className="rp-boards">
-        {mine.map((b) => (
-          <span className="tag badge rp-board" key={b.id} title={`「${b.name}」里的一份副本 —— 点 × 只摘这份，仓库仍在清单里`}>
-            {b.name}
-            <button
-              className="rp-x"
-              aria-label={`从 ${b.name} 移出`}
-              title="只从这一个看板移出（仓库仍在中心清单里）"
-              onClick={() => acts.out(r, b.id)}
-            >
-              ×
-            </button>
-          </span>
-        ))}
-        {notIn.length ? (
-          <select
-            className="rp-add"
-            value=""
-            title="加入看板 = 复制一份归属，仓库本体不动"
-            onChange={(e) => {
-              if (e.target.value) acts.add(r, e.target.value);
-            }}
-          >
-            <option value="">+ 看板</option>
-            {notIn.map((b) => (
-              <option key={b.id} value={b.id}>{b.name}</option>
-            ))}
-          </select>
-        ) : null}
+        {desc ? <div className="muted rp-desc" title={descTitle}>{desc}</div> : null}
       </td>
+      <td className="mono rp-path"><RepoPath path={r.path} /></td>
       <td className="rp-acts">
         <button className="btn small ghost" title="在文件管理器中打开" onClick={() => acts.open(r)}>打开</button>
         <button className="btn small ghost" onClick={() => acts.edit(r)}>编辑</button>
-        <button className="btn small ghost" onClick={() => acts.del(r)}>删除</button>
+        {filterBoard ? (
+          <button className="btn small ghost" title={`写「${r.name}」在看板「${filterBoard.name}」里的组内描述`}
+            onClick={() => acts.note(r)}>描述</button>
+        ) : null}
+        <button className="btn small ghost rp-del" onClick={() => acts.del(r)}>删除</button>
       </td>
     </tr>
   );
@@ -87,6 +78,11 @@ export default function ReposView() {
   const [scanOpen, setScanOpen] = useState(false);
   const [scan, setScan] = useState({ root: '', depth: '3' });
   const [scanResult, setScanResult] = useState(null);
+  // 成员管理弹窗：打开时 = 正在往这个看板里点选导入 / 摘除仓库
+  const [impBoardId, setImpBoardId] = useState(null);
+  // 组内描述编辑：{ id, repo, boardId, boardName, note } | null
+  const [noteFor, setNoteFor] = useState(null);
+  const [noteText, setNoteText] = useState('');
 
   // 看板（只作筛选与标签）
   const [boards, setBoards] = useState(null); // { boards: [...], unassigned: [...] }
@@ -111,6 +107,17 @@ export default function ReposView() {
   }, []);
   useEffect(() => { loadRepos(); loadBoards(); }, [loadRepos, loadBoards]);
 
+  // 组内描述保存：note 为空 = 清除
+  const saveNote = () => guard(async () => {
+    await api('/api/boards/note', {
+      method: 'POST',
+      body: { id: noteFor.id, board: noteFor.boardId, note: noteText },
+    });
+    setNoteFor(null);
+    await Promise.all([loadRepos(), loadBoards()]);
+    toast('已保存组内描述');
+  });
+
   // 看板清单（用来做「+ 看板」下拉与筛选器）
   const boardList = useMemo(() => (boards && boards.boards) || [], [boards]);
 
@@ -121,8 +128,13 @@ export default function ReposView() {
     return repos.filter((r) => (r.boards || []).some((b) => b.id === filter));
   }, [repos, filter]);
 
+  // 当前筛选到的看板（用来显示领域描述上下文条）与成员管理弹窗的目标看板
+  const filterBoard = useMemo(() => boardList.find((b) => b.id === filter) || null, [boardList, filter]);
+  const impBoard = useMemo(() => boardList.find((b) => b.id === impBoardId) || null, [boardList, impBoardId]);
+
   const openAdd = () => {
-    if (editing) { setForm(EMPTY_FORM); setEditing(null); }
+    setForm(EMPTY_FORM);
+    setEditing(null);
     setFormOpen(true);
   };
 
@@ -132,7 +144,6 @@ export default function ReposView() {
       path: form.path.trim(),
       name: form.name.trim() || undefined,
       desc: form.desc.trim() || undefined,
-      tags: form.tags.trim() || undefined,
       notes: form.notes,
     };
     if (editing) await api(`/api/repos/${encodeURIComponent(editing)}`, { method: 'PATCH', body });
@@ -189,12 +200,14 @@ export default function ReposView() {
   // ---- 看板归属：**复制**，不是移动 ----
   // 加一个看板 = 多一份归属，仓库本体不动、别的看板也不动；
   // 移出某个看板 = 只摘那一份，仓库本体不动。
-  const assign = (r, boardId, remove) => guard(async () => {
+  // 行内的加/摘入口已收进「成员管理」弹窗（toggleMember），表格式逐行操作太乱。
+  const toggleMember = (r, add) => guard(async () => {
     await api('/api/boards/assign', {
       method: 'POST',
-      body: remove ? { id: r.id, board: boardId, remove: true } : { id: r.id, board: boardId },
+      body: add ? { id: r.id, board: impBoardId } : { id: r.id, board: impBoardId, remove: true },
     });
-    await Promise.all([loadRepos(), loadBoards()]);
+    setRepos((await api('/api/repos')) || []);
+    await loadBoards();
   });
 
   // ---- 看板管理 ----
@@ -251,8 +264,17 @@ export default function ReposView() {
     open: (r) => rowAct('open', r),
     edit: (r) => rowAct('edit', r),
     del: (r) => rowAct('del', r),
-    add: (r, boardId) => assign(r, boardId, false),
-    out: (r, boardId) => assign(r, boardId, true),
+    note: (r) => {
+      const mine = (r.boards || []).find((b) => b.id === filter);
+      setNoteFor({
+        id: r.id,
+        repo: r.name,
+        boardId: filter,
+        boardName: filterBoard?.name || '',
+        note: mine?.note || '',
+      });
+      setNoteText(mine?.note || '');
+    },
   };
 
   return (
@@ -261,23 +283,18 @@ export default function ReposView() {
         <div className="title-block">
           <h2>仓库</h2>
           <div className="page-desc">
-            本机 git 仓库的<strong>一张中心清单</strong>。看板只是标签：加入看板是
-            <strong>复制</strong>一份归属（同一个仓库可同时在多个看板里），
-            仓库本体永远在清单里，不会被"移动"走。
+            本机 git 仓库的<strong>中心清单</strong>。看板 = <strong>领域分组</strong>
+            （同一个仓库可同时归入多个）：看板的领域描述写这组仓库的侧重与配合关系，
+            成员仓库还能写<strong>组内描述</strong>——它在组里的角色、关键路径与搜索关键词
+            （筛选到看板后点行内「描述」）。加入是复制一份归属，仓库本体永远在清单里。
           </div>
         </div>
         <div className="acts">
           <button className="btn ghost" onClick={() => setScanOpen(true)}>扫描</button>
-          <button className="btn" onClick={openAdd}>{editing ? '继续编辑' : '添加仓库'}</button>
+          <button className="btn" onClick={openAdd}>添加仓库</button>
         </div>
       </div>
 
-      {editing ? (
-        <div className="muted" style={{ margin: '0 0 10px' }}>
-          正在编辑「{repos.find((r) => r.id === editing)?.name || editing}」——点右上角「继续编辑」改完保存。
-        </div>
-      ) : null}
-
       {scanResult ? (
         <div className="card">
           <div className="colhead"><h3>扫描结果</h3>
@@ -313,12 +330,30 @@ export default function ReposView() {
         </button>
       </div>
 
+      {/* 看板上下文条：筛选到某个看板时，把它的领域描述亮出来 —— desc 写的是
+          这个领域的侧重、谁配合谁（谁是中心/终端）、关键路径与搜索关键词。 */}
+      {filterBoard ? (
+        <div className="rp-context" data-testid="rp-context">
+          <span className="rp-context-name">{filterBoard.name}</span>
+          {filterBoard.desc ? (
+            <span className="rp-context-desc" title={filterBoard.desc}>{filterBoard.desc}</span>
+          ) : (
+            <span className="muted rp-context-desc">
+              还没有领域描述 —— 点「看板管理」补一句：侧重什么、谁配合谁、关键路径与搜索关键词在哪。
+            </span>
+          )}
+          <span className="acts">
+            <button className="btn small" onClick={() => setImpBoardId(filterBoard.id)}>导入仓库</button>
+          </span>
+        </div>
+      ) : null}
+
       {/* 看板管理（次要）：建 / 改 / 删 / 导入 / 导出 */}
       {boardsOpen ? (
         <div className="card rp-boards-manage">
           <div className="colhead">
             <h3>看板</h3>
-            <span className="muted">看板是仓库的<strong>标签</strong>：删一个看板，仓库全都在清单里，只是少了一份归属。</span>
+            <span className="muted">看板 = 领域分组，描述写给人和 agent 读：侧重、配合关系、关键路径与关键词。删一个看板，仓库全都在清单里，只是少了一份归属。</span>
             <span className="acts" style={{ marginLeft: 'auto' }}>
               <button className="btn small ghost" onClick={() => setBoardForm({ id: null, name: '', desc: '' })}>新建看板</button>
               <button className="btn small ghost" title="粘贴/选择看板 JSON，一个看板 = 一个主题" onClick={() => setImpOpen(true)}>导入看板</button>
@@ -329,15 +364,21 @@ export default function ReposView() {
             {boardList.map((b) => (
               <div className="rp-board-item" key={b.id}>
                 <span className="rp-board-name">{b.name}</span>
-                {b.desc ? <span className="muted rp-board-desc">{b.desc}</span> : null}
-                <span className="muted">{b.repos.length} 个仓库</span>
+                {b.desc ? <span className="muted rp-board-desc" title={b.desc}>{b.desc}</span> : null}
+                <span className="rp-board-count">{b.repos.length} 个仓库</span>
                 <span className="acts">
-                  <button className="btn small ghost" onClick={() => setBoardForm({ id: b.id, name: b.name, desc: b.desc || '' })}>重命名</button>
+                  <button className="btn small ghost" title="点选加入/摘除这个看板的成员仓库" onClick={() => setImpBoardId(b.id)}>成员管理</button>
+                  <button className="btn small ghost" onClick={() => setBoardForm({ id: b.id, name: b.name, desc: b.desc || '' })}>编辑</button>
                   <button className="btn small ghost" onClick={() => removeBoard(b)}>删除看板</button>
                 </span>
               </div>
             ))}
             {!boardList.length ? <div className="muted">还没有看板 —— 建一个当标签用。</div> : null}
+            {boardList.length && boards.unassigned?.length ? (
+              <div className="rp-boards-unassigned">
+                未分组 <b>{boards.unassigned.length}</b> 个 —— 不属于任何看板，只在「全部」里可见。
+              </div>
+            ) : null}
           </div>
         </div>
       ) : null}
@@ -347,22 +388,20 @@ export default function ReposView() {
         <table className="rp-table">
           <thead>
             <tr>
-              <th style={{ width: '26%' }}>仓库</th>
-              <th style={{ width: '30%' }}>路径</th>
-              <th style={{ width: '12%' }}>标签</th>
-              <th style={{ width: '22%' }}>所属看板</th>
-              <th style={{ width: '10%' }}>操作</th>
+              <th scope="col" style={{ width: '32%' }}>仓库</th>
+              <th scope="col" style={{ width: '42%' }}>路径</th>
+              <th scope="col" style={{ width: '26%' }}>操作</th>
             </tr>
           </thead>
           <tbody>
             {shown.map((r) => (
-              <RepoRow key={r.id} r={r} boards={boardList} acts={rowActs} />
+              <RepoRow key={r.id} r={r} filterBoard={filterBoard} acts={rowActs} />
             ))}
             {!shown.length ? (
               <tr>
-                <td colSpan="5" className="muted rp-empty">
+                <td colSpan="3" className="muted rp-empty">
                   {repos.length
-                    ? '这个看板下还没有仓库 —— 在「全部」里挑一个加进来（加入 = 复制一份归属）。'
+                    ? '这个看板还没有成员 —— 点上方「导入仓库」，从中心清单里点选加入。'
                     : '还没有登记仓库 —— 点「扫描」自动发现，或「添加仓库」手工登记。'}
                 </td>
               </tr>
@@ -389,10 +428,6 @@ export default function ReposView() {
               <label htmlFor="repo-desc">一句话描述</label>
               <input id="repo-desc" spellCheck="false" placeholder="这个仓库是干什么的" value={form.desc} onChange={set('desc')} />
             </div>
-            <div className="form-field">
-              <label htmlFor="repo-tags">标签</label>
-              <input id="repo-tags" placeholder="逗号分隔，如 web,tool" value={form.tags} onChange={set('tags')} />
-            </div>
             <div className="form-field">
               <label htmlFor="repo-notes">备注</label>
               <textarea id="repo-notes" placeholder="补充信息（可选）" value={form.notes} onChange={set('notes')} />
@@ -418,7 +453,7 @@ export default function ReposView() {
             </div>
             <div className="form-field">
               <label htmlFor="scan-depth">深度</label>
-              <input id="scan-depth" value={scan.depth}
+              <input id="scan-depth" type="number" min="1" max="10" value={scan.depth}
                 onChange={(e) => setScan({ ...scan, depth: e.target.value })} />
             </div>
             <div className="form-acts">
@@ -430,12 +465,12 @@ export default function ReposView() {
         </Modal>
       ) : null}
 
-      {/* 新建 / 重命名看板弹窗 */}
+      {/* 新建 / 编辑看板弹窗 */}
       {boardForm ? (
-        <Modal title={boardForm.id ? '重命名看板' : '新建看板'} onClose={() => setBoardForm(null)}>
+        <Modal title={boardForm.id ? '编辑看板' : '新建看板'} onClose={() => setBoardForm(null)}>
           <div className="form-grid">
             <div className="form-field">
-              <label htmlFor="bd-name">主题名称 *</label>
+              <label htmlFor="bd-name">看板名称 *</label>
               <input
                 id="bd-name"
                 placeholder="如 前端 / AI 工具"
@@ -444,10 +479,12 @@ export default function ReposView() {
               />
             </div>
             <div className="form-field">
-              <label htmlFor="bd-desc">描述</label>
-              <input
+              <label htmlFor="bd-desc">领域描述</label>
+              <textarea
                 id="bd-desc"
-                placeholder="这个主题是干什么的（可选）"
+                rows={4}
+                spellCheck="false"
+                placeholder={'这组仓库在这个环境里的侧重、配合关系、关键路径与搜索关键词。\n如：go-ah 是 OIDC 认证中心（issuer 192.0.2.47:8082），组内其余仓库都是它的接入终端。\n如：fr 组内仓库共享 API 契约（lib/api/），搜 fr_ 前缀。'}
                 value={boardForm.desc}
                 onChange={(e) => setBoardForm((f) => ({ ...f, desc: e.target.value }))}
               />
@@ -467,7 +504,10 @@ export default function ReposView() {
         <Modal title="导入看板 JSON" onClose={() => { setImpOpen(false); setImpText(''); }}>
           <div className="form-grid">
             <div className="form-field">
-              <label htmlFor="bd-imp">JSON 内容（{'{boards:[{name, repos:[{path|name}]}]}'}</label>
+              <label htmlFor="bd-imp">看板 JSON</label>
+              <div className="form-hint">
+                结构 {'{ boards:[{ name, repos:[{ path|name }] }] }'} —— 按 path 或 name 匹配已登记仓库，匹配不上的会如实报告
+              </div>
               <input
                 id="bd-imp-file"
                 type="file"
@@ -498,6 +538,59 @@ export default function ReposView() {
         </Modal>
       ) : null}
 
+      {/* 组内描述编辑：同一个仓库在不同看板里的角色各不相同，描述挂在成员关系上。
+          agent 读看板时会把它带上（见 kv-repo skill），所以值得写关键路径与搜索词。 */}
+      {noteFor ? (
+        <Modal title={`组内描述 · ${noteFor.repo} @「${noteFor.boardName}」`} onClose={() => setNoteFor(null)}>
+          <div className="form-grid">
+            <div className="form-field">
+              <label htmlFor="rp-note">「{noteFor.repo}」在看板「{noteFor.boardName}」里的角色</label>
+              <div className="form-hint">
+                写它在这个组里的特殊点与配合关系（谁是中心 / 终端、API 关联在哪），
+                可多行、可含关键路径与搜索关键词。留空保存 = 清除。
+              </div>
+              <textarea
+                id="rp-note"
+                rows={5}
+                spellCheck="false"
+                placeholder={'如：OIDC 认证中心（issuer 192.0.2.47:8082），组内其余仓库都是它的接入终端；\nAPI 契约见 internal/middleware/oidc.go，搜 oidc_ 前缀。'}
+                value={noteText}
+                onChange={(e) => setNoteText(e.target.value)}
+              />
+            </div>
+            <div className="form-acts">
+              <button className="btn ghost" onClick={() => setNoteFor(null)}>取消</button>
+              <button className="btn" onClick={saveNote}>保存</button>
+            </div>
+          </div>
+        </Modal>
+      ) : null}
+
+      {/* 成员管理弹窗：一个看板的全部候选仓库，点选加入 / 摘除 —— 批量导入
+          不必回「全部」逐行找下拉。加/摘即存，弹窗保持打开，一次导一批。 */}
+      {impBoard ? (
+        <Modal title={`「${impBoard.name}」· 成员仓库`} onClose={() => setImpBoardId(null)}>
+          {impBoard.desc ? <div className="rp-imp-desc">{impBoard.desc}</div> : null}
+          <div className="rp-imp-list">
+            {repos.map((r) => {
+              const inBoard = (r.boards || []).some((b) => b.id === impBoard.id);
+              return (
+                <div className="rp-imp-item" key={r.id}>
+                  <span className="rp-imp-name">{r.name}</span>
+                  <span className="rp-imp-path" title={r.path}>{r.path}</span>
+                  {inBoard ? (
+                    <button className="btn small ghost" onClick={() => toggleMember(r, false)}>摘除</button>
+                  ) : (
+                    <button className="btn small" onClick={() => toggleMember(r, true)}>加入</button>
+                  )}
+                </div>
+              );
+            })}
+            {!repos.length ? <div className="muted rp-empty">还没有登记仓库 —— 先「扫描」或「添加仓库」。</div> : null}
+          </div>
+        </Modal>
+      ) : null}
+
       {dialogNode}
     </>
   );