@xgspz/cli-ui 0.0.0-stage → 0.6.14

package/src/board/ChangesPane.tsx

@@ -0,0 +1,185 @@
+// 改动：移植自 Operator 的 TaskChanges（只读部分：分支、统计、文件列表、逐文件 diff）。
+// 合并 / 解决冲突 / 建 PR 是 Operator 里的操作，经中枢的对话任务不提供。
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CenterError, type BoardBackend } from "../core/client";
+import type { DiffFile, DiffResult } from "../core/types";
+import { countChanges, diffLineKinds, hunkLines } from "./diffLines";
+
+const STATUS_LABEL: Record<string, string> = { A: "新增", M: "修改", D: "删除", R: "重命名", "?": "未跟踪" };
+const COLLAPSE_LINES = 400;
+/** 一次画多少个文件的 diff：改了几千个文件时不一次塞进页面，往下点「再显示」。 */
+const RENDER_BATCH = 150;
+
+/** 只给了一整段 unified diff 的节点：按文件切开。 */
+export function splitUnified(diff: string): DiffFile[] {
+  const files: DiffFile[] = [];
+  for (const chunk of diff.split(/^(?=diff --git )/m)) {
+    if (!chunk.startsWith("diff --git ")) continue;
+    const head = /^diff --git a\/(.+?) b\/(.+)$/m.exec(chunk);
+    const path = head?.[2] ?? "?";
+    const status = /^new file mode/m.test(chunk) ? "A" : /^deleted file mode/m.test(chunk) ? "D" : /^rename from/m.test(chunk) ? "R" : "M";
+    const { additions, deletions } = countChanges(chunk);
+    files.push({ path, status, additions, deletions, binary: /^Binary files /m.test(chunk), patch: chunk });
+  }
+  return files;
+}
+
+const FileDiff = memo(function FileDiff({ file: f, userToggled, onToggle, refs, onOpen }: {
+  file: DiffFile; userToggled: boolean; onToggle: (path: string) => void;
+  refs: { current: Record<string, HTMLDivElement | null> }; onOpen?: (path: string) => void;
+}) {
+  const lines = useMemo(() => (f.binary || f.omitted ? [] : hunkLines(f.patch)), [f]);
+  const kinds = useMemo(() => diffLineKinds(lines), [lines]);
+  const big = lines.length > COLLAPSE_LINES;
+  const isCollapsed = userToggled ? !big : big;
+  const est = Math.round(34 + (isCollapsed ? 38 : Math.max(1, lines.length) * 18.6));
+  return (
+    <div className="tc-file" style={{ containIntrinsicSize: `auto ${est}px` }} ref={(el) => { refs.current[f.path] = el; }}>
+      <button className="tc-fhead" onClick={() => onToggle(f.path)}>
+        <span className={`tc-chev ${isCollapsed ? "" : "open"}`}>▸</span>
+        <span className={`tc-st s-${f.status === "?" ? "new" : f.status}`}>{f.status}</span>
+        <span className="tc-fpath">{f.path}</span>
+        {onOpen && f.status !== "D" && (
+          <span className="cli-tc-open" role="button" tabIndex={0} title="打开文件" onClick={(e) => { e.stopPropagation(); onOpen(f.path); }} onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onOpen(f.path); } }}>打开</span>
+        )}
+        <span className="tc-cnt"><b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b></span>
+      </button>
+      {isCollapsed ? (
+        big && <button className="tc-bigdiff" onClick={() => onToggle(f.path)}>大型 diff（{lines.length.toLocaleString()} 行）—— 点击展开</button>
+      ) : (
+        <div className="tc-hunks">
+          {f.omitted ? <div className="tc-empty">改动太多，这个文件的 diff 没有带上{onOpen && f.status !== "D" ? "，可以点「打开」看文件" : ""}。</div>
+            : f.binary ? <div className="tc-empty">二进制文件 —— 不予显示</div>
+            : lines.length === 0 ? <div className="tc-empty">没有文本改动（仅权限或重命名）。</div>
+              : lines.map((ln, i) => <div key={i} className={`dl ${kinds[i]}`}>{ln || " "}</div>)}
+          {f.truncated && <div className="tc-empty">… 文件 diff 已截断</div>}
+        </div>
+      )}
+    </div>
+  );
+});
+
+/** 刷新信号挤在一起时（轮末收尾 + 文件变化）合成一次读：diff 在节点上要跑一组 git 命令。 */
+const REFRESH_COALESCE_MS = 250;
+/** 节点暂时连不上、超时、网关错误：隔一会儿自动再读，几次之后只留「重试」。 */
+const RETRY_DELAYS_MS = [3_000, 10_000, 30_000];
+/** git 读失败、工作区已清理之类不会自己好，不自动重试。 */
+function transient(error: unknown): boolean {
+  if (!(error instanceof CenterError)) return false;
+  return error.code === "NETWORK" || error.code === "node_unreachable" || error.code === "node_timeout" || [429, 502, 503, 504].includes(error.status);
+}
+const clock = (at: number) => new Date(at).toLocaleTimeString("zh-CN", { hour12: false });
+
+/** settled：轮次收尾计数（store 的 ConvState.settled），每变一次重读一次。 */
+export function ChangesPane({ backend, jobId, refreshKey, settled = 0, onOpen }: { backend: BoardBackend; jobId: string; refreshKey: number; settled?: number; onOpen?: (path: string) => void }) {
+  const [data, setData] = useState<DiffResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [manual, setManual] = useState(0);
+  const [toggled, setToggled] = useState<Set<string>>(new Set());
+  const [active, setActive] = useState<string | null>(null);
+  const [shown, setShown] = useState(RENDER_BATCH);
+  const secRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+
+  // 上次读成功的时间：刷新失败时仍显示上次的结果，并写明是什么时候的。
+  const [loadedAt, setLoadedAt] = useState<number | null>(null);
+  // 自动重试：retrying = 已排好下一次；auto 每次到点 +1 触发重读。新的刷新信号（轮末、文件变化、手动）重新计数。
+  const [retrying, setRetrying] = useState(false);
+  const [auto, setAuto] = useState(0);
+  const attempts = useRef(0);
+  const trigger = `${refreshKey}|${settled}|${manual}`;
+  const lastTrigger = useRef(trigger);
+  // 首次读可以和同时打开的其他看板共用请求；之后每次刷新都单独发（fresh），不拿刷新之前就发出的结果。
+  const loadedOnce = useRef(false);
+  useEffect(() => {
+    let alive = true;
+    let retryTimer: ReturnType<typeof setTimeout> | undefined;
+    if (lastTrigger.current !== trigger) { lastTrigger.current = trigger; attempts.current = 0; }
+    const refresh = loadedOnce.current;
+    loadedOnce.current = true;
+    setLoading(true);
+    setRetrying(false);
+    const load = () => backend.diff(jobId, refresh ? { fresh: true } : undefined).then((d) => {
+      // 自定义后端回了空值：当失败处理，不能停在「读取改动…」。
+      if (!d || typeof d !== "object") throw new CenterError("改动接口没有返回内容，请稍后重试", "bad_response", 200);
+      return d;
+    }).then((d) => {
+      if (!alive) return;
+      attempts.current = 0;
+      setData(d); setError(null); setLoadedAt(Date.now()); setLoading(false);
+    }, (e: unknown) => {
+      if (!alive) return;
+      setError(e instanceof Error ? e.message : String(e)); setLoading(false);
+      if (transient(e) && attempts.current < RETRY_DELAYS_MS.length) {
+        setRetrying(true);
+        retryTimer = setTimeout(() => { if (alive) setAuto((n) => n + 1); }, RETRY_DELAYS_MS[attempts.current++]);
+      }
+    });
+    if (!refresh) { void load(); return () => { alive = false; clearTimeout(retryTimer); }; }
+    const timer = setTimeout(load, REFRESH_COALESCE_MS);
+    return () => { alive = false; clearTimeout(timer); clearTimeout(retryTimer); };
+  }, [backend, jobId, refreshKey, settled, manual, auto]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const toggle = useCallback((path: string) => setToggled((s) => { const n = new Set(s); if (n.has(path)) n.delete(path); else n.add(path); return n; }), []);
+  const jump = (path: string) => {
+    setActive(path);
+    // 跳到还没画出来的文件：先把它画出来。
+    const at = files.findIndex((f) => f.path === path);
+    if (at >= shown) setShown(at + RENDER_BATCH);
+    const el = secRefs.current[path];
+    const box = scrollRef.current;
+    if (el && box) box.scrollTo({ top: el.offsetTop - box.offsetTop, behavior: "smooth" });
+  };
+
+  const files = useMemo(() => data?.files ?? (data?.diff || data?.patch ? splitUnified(data.diff ?? data.patch ?? "") : []), [data]);
+
+  const retryNote = retrying ? "，稍后自动重试" : "";
+  if (error && !data) return <div className="tc-note">读取改动失败：{error}{retryNote} <button className="tc-btn" onClick={() => setManual((n) => n + 1)}>重试</button></div>;
+  if (!data) return <div className="tc-note">读取改动…</div>;
+  if (data.error) return <div className="tc-note">{data.error} <button className="tc-btn" onClick={() => setManual((n) => n + 1)}>重试</button></div>;
+  const unified = !data.files && files.length > 0;
+  if (!unified && data.isolated === false) return <div className="tc-note">{data.reason || "该任务没有独立分支，改动直接写在工作区里（见「文件」）。"}</div>;
+  const totalAdd = files.reduce((n, f) => n + f.additions, 0);
+  const totalDel = files.reduce((n, f) => n + f.deletions, 0);
+  const nothing = files.length === 0;
+
+  return (
+    <div className="tc-root">
+      <div className="tc-bar">
+        {data.branch && <code className="tc-branch">{data.branch}</code>}
+        {data.baseLabel && <span className="tc-arrow">→ {data.baseLabel}</span>}
+        {!nothing && <span className="tc-stat"><b className="add">+{totalAdd}</b> <b className="del">−{totalDel}</b></span>}
+        {data.isDirty && <span className="tc-dirty">● 未提交</span>}
+        {(data.ahead ?? 0) > 0 && <span className="tc-ahead">领先 {data.ahead} 个提交</span>}
+        <span className="tc-spacer" />
+        <button className="tc-btn" onClick={() => setManual((n) => n + 1)} disabled={loading}>{loading ? "…" : "刷新"}</button>
+      </div>
+      {error && (
+        <div className="tc-mergebar bad" role="status">
+          ⚠ 刷新失败：{error}{loadedAt ? `。下面是 ${clock(loadedAt)} 的结果` : ""}{retryNote}{" "}
+          <button className="tc-btn" onClick={() => setManual((n) => n + 1)} disabled={loading}>重试</button>
+        </div>
+      )}
+      {nothing ? (
+        <div className="tc-note">该分支上还没有改动。</div>
+      ) : (
+        <div className="tc-scroll" ref={scrollRef}>
+          <div className="tc-list">
+            <div className="tc-list-h">{files.length} 个文件有改动</div>
+            {files.map((f) => (
+              <button key={f.path} className={`tc-frow ${active === f.path ? "on" : ""}`} onClick={() => jump(f.path)} title={f.path}>
+                <span className={`tc-st s-${f.status === "?" ? "new" : f.status}`} title={STATUS_LABEL[f.status] || f.status}>{f.status}</span>
+                <span className="tc-fpath">{f.path}</span>
+                {f.binary ? <span className="tc-bin">bin</span> : f.omitted ? <span className="tc-bin">略</span> : <span className="tc-cnt"><b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b></span>}
+              </button>
+            ))}
+          </div>
+          {(data.patchesOmitted ?? 0) > 0 && <div className="tc-empty">改动太多：{data.patchesOmitted} 个文件的 diff 没有带上（只列出文件），可以打开文件查看。</div>}
+          {files.slice(0, shown).map((f) => <FileDiff key={f.path} file={f} userToggled={toggled.has(f.path)} onToggle={toggle} refs={secRefs} onOpen={onOpen} />)}
+          {files.length > shown && <button className="tc-bigdiff" onClick={() => setShown((n) => n + RENDER_BATCH)}>还有 {(files.length - shown).toLocaleString()} 个文件 —— 再显示 {Math.min(RENDER_BATCH, files.length - shown)} 个</button>}
+        </div>
+      )}
+    </div>
+  );
+}