@spzxg/cli-ui 0.1.0 → 0.3.1

package/src/board/blocks.tsx

@@ -0,0 +1,96 @@
+// 看板的两个核心，各自是一块独立的积木，放到哪里都能用：
+//
+//   <CliFilePreview jobId path />   任务工作区里一个文件的预览 + 下载（Markdown / 代码 / CSV / 图片 / PDF / HTML / Word）
+//   <CliBrowserView jobId />        任务浏览器的实时画面 + 接管 / 交还 / 打开 / 关闭
+//
+// 和别的组件一样：外面有 <CliCenterProvider> 就共用它（同一个对话只连一条流）；没有就用自己的连接参数
+// （baseUrl / token / line / headers）建一个。不给 jobId 时跟 Provider 的选中走。
+// 它们只依赖中枢的看板接口（/api/jobs/:id/files、/browser…），不依赖 cli-chat / cli-board。
+import { useState, type CSSProperties } from "react";
+import type { CliEvent, CliStore, CliStoreOptions } from "../core/store.js";
+import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider } from "../core/provider.js";
+import { FileViewer, type FileAction } from "./FileViewer.js";
+import { BrowserPane } from "./BrowserPane.js";
+
+interface BlockProps extends CliStoreOptions {
+  /** 哪个对话（center 的 job_id）。不给就跟 Provider 的选中走。 */
+  jobId?: string | null;
+  theme?: "light" | "dark";
+  className?: string;
+  style?: CSSProperties;
+  store?: CliStore;
+  onEvent?: (event: CliEvent) => void;
+}
+
+export interface CliFilePreviewProps extends BlockProps {
+  /** 工作区里的相对路径（如 "outputs/报告.md"），或节点上的绝对路径。 */
+  path: string;
+  /** 预览里点了别的本地文件（Markdown 里的链接）。不给就在本组件里切换过去。 */
+  onOpenPath?: (path: string) => void;
+  /** 给了就显示关闭按钮。 */
+  onClose?: () => void;
+  /** 头部的自定义按钮。 */
+  actions?: FileAction[];
+  /** 变了就重读（宿主知道文件更新时递增）。 */
+  version?: number;
+  /** 不要头部（宿主自己做标题和按钮）。 */
+  bare?: boolean;
+}
+
+export function CliFilePreview(props: CliFilePreviewProps) {
+  const ctx = useCliStoreContext();
+  return withOwnProvider(props, <FilePreviewInner {...props} inProvider={!!ctx} />, !!ctx);
+}
+
+function FilePreviewInner({ jobId: jobIdProp, path, onOpenPath, onClose, actions, version, bare, theme = "light", className, style, onEvent, inProvider }: CliFilePreviewProps & { inProvider: boolean }) {
+  useComponentEvents(onEvent, {}, inProvider);
+  const store = useCliStore();
+  const selected = useCliState((s) => s.selected);
+  const jobId = jobIdProp !== undefined ? jobIdProp : selected;
+  const [shown, setShown] = useShownPath(path);
+  const backend = store.client.board;
+  return (
+    <div className={`cli-ui cli-file-preview ${className ?? ""}`} data-theme={theme} style={style}>
+      {!backend ? <div className="cli-fv-note">当前后端不支持文件预览（需要任务中心的 /api/jobs/:id/files 接口）。</div>
+        : !jobId ? <div className="cli-fv-note">没有指定对话。</div>
+          : !shown ? <div className="cli-fv-note">没有指定文件。</div>
+            : <FileViewer key={`${jobId}:${shown}`} backend={backend} jobId={jobId} path={shown} version={version} actions={actions} onClose={onClose} bare={bare}
+                onOpenPath={onOpenPath ?? setShown} />}
+    </div>
+  );
+}
+
+export interface CliBrowserViewProps extends BlockProps {
+  /** 只看：不能打开 / 关闭 / 接管。 */
+  readOnly?: boolean;
+}
+
+export function CliBrowserView(props: CliBrowserViewProps) {
+  const ctx = useCliStoreContext();
+  return withOwnProvider(props, <BrowserViewInner {...props} inProvider={!!ctx} />, !!ctx);
+}
+
+function BrowserViewInner({ jobId: jobIdProp, readOnly, theme = "light", className, style, onEvent, inProvider }: CliBrowserViewProps & { inProvider: boolean }) {
+  useComponentEvents(onEvent, {}, inProvider);
+  const store = useCliStore();
+  const selected = useCliState((s) => s.selected);
+  const jobId = jobIdProp !== undefined ? jobIdProp : selected;
+  const backend = store.client.board;
+  return (
+    <div className={`cli-ui cli-browser-view ${className ?? ""}`} data-theme={theme} style={style}>
+      {!backend ? <div className="cli-fv-note">当前后端不支持任务浏览器（需要任务中心的 /api/jobs/:id/browser 接口）。</div>
+        : !jobId ? <div className="cli-fv-note">没有指定对话。</div>
+          : <BrowserPane key={jobId} backend={backend} jobId={jobId} readOnly={readOnly} />}
+    </div>
+  );
+}
+
+/** 显示的路径：跟着 prop 走；预览里点了别的文件时在组件内切换，prop 变了再以 prop 为准。 */
+function useShownPath(path: string): [string, (p: string) => void] {
+  const [state, setState] = useState({ prop: path, shown: path });
+  if (state.prop !== path) {
+    setState({ prop: path, shown: path });
+    return [path, (p) => setState({ prop: path, shown: p })];
+  }
+  return [state.shown, (p) => setState((s) => ({ ...s, shown: p }))];
+}

package/src/board/fileKind.ts

@@ -0,0 +1,81 @@
+// 看板按扩展名决定怎么预览一个文件。
+export type PreviewKind = "markdown" | "code" | "text" | "csv" | "image" | "pdf" | "html" | "docx" | "binary";
+
+const CODE_LANG: Record<string, string> = {
+  ts: "typescript", tsx: "tsx", js: "javascript", jsx: "jsx", mjs: "javascript", cjs: "javascript",
+  json: "json", py: "python", rb: "ruby", go: "go", rs: "rust", java: "java", kt: "kotlin", swift: "swift",
+  c: "c", h: "c", cpp: "cpp", hpp: "cpp", cs: "csharp", php: "php", sh: "bash", bash: "bash", zsh: "bash",
+  sql: "sql", yaml: "yaml", yml: "yaml", toml: "ini", ini: "ini", xml: "xml", css: "css", scss: "scss",
+  vue: "xml", svelte: "xml", dockerfile: "dockerfile", makefile: "makefile", diff: "diff", patch: "diff",
+};
+const TEXT_EXT = new Set(["txt", "log", "env", "gitignore", "conf", "cfg", "properties", "lock", "tsv"]);
+const IMAGE_EXT = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico", "svg", "avif"]);
+
+export function extOf(path: string): string {
+  const name = path.split("/").pop() ?? "";
+  const lower = name.toLowerCase();
+  if (lower === "dockerfile" || lower === "makefile") return lower;
+  const dot = lower.lastIndexOf(".");
+  return dot > 0 ? lower.slice(dot + 1) : "";
+}
+
+export function previewKind(path: string, contentType = ""): PreviewKind {
+  const ext = extOf(path);
+  if (ext === "md" || ext === "markdown") return "markdown";
+  if (ext === "csv") return "csv";
+  if (IMAGE_EXT.has(ext)) return "image";
+  if (ext === "pdf") return "pdf";
+  if (ext === "html" || ext === "htm") return "html";
+  if (ext === "docx") return "docx";
+  if (CODE_LANG[ext]) return "code";
+  if (TEXT_EXT.has(ext)) return "text";
+  if (/^text\//.test(contentType) || /json|xml|javascript/.test(contentType)) return "text";
+  if (!ext) return "text"; // README、LICENSE 之类
+  return "binary";
+}
+
+export const codeLang = (path: string) => CODE_LANG[extOf(path)] ?? "";
+
+export function fmtSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/** 相对某个文件所在目录解析链接（Markdown 里的 ./img.png、../a.md）。 */
+export function resolveRelative(fromFile: string, href: string): string {
+  if (href.startsWith("/") || href.startsWith("~")) return href;
+  const base = fromFile.split("/").slice(0, -1);
+  for (const seg of href.split("/")) {
+    if (!seg || seg === ".") continue;
+    if (seg === "..") base.pop();
+    else base.push(seg);
+  }
+  return base.join("/");
+}
+
+/** 一行 CSV（支持引号里的逗号和 "" 转义）。 */
+export function parseCsv(text: string, maxRows = 500): { rows: string[][]; more: boolean } {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let cell = "";
+  let quoted = false;
+  const sep = text.includes("\t") && !text.split("\n")[0].includes(",") ? "\t" : ",";
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (quoted) {
+      if (ch === '"' && text[i + 1] === '"') { cell += '"'; i++; }
+      else if (ch === '"') quoted = false;
+      else cell += ch;
+    } else if (ch === '"' && cell === "") quoted = true;
+    else if (ch === sep) { row.push(cell); cell = ""; }
+    else if (ch === "\n" || ch === "\r") {
+      if (ch === "\r" && text[i + 1] === "\n") i++;
+      row.push(cell); cell = "";
+      rows.push(row); row = [];
+      if (rows.length > maxRows) return { rows: rows.slice(0, maxRows), more: true };
+    } else cell += ch;
+  }
+  if (cell || row.length) { row.push(cell); rows.push(row); }
+  return { rows: rows.slice(0, maxRows), more: rows.length > maxRows };
+}