claude360 0.2.9 → 0.3.1

package/src/ui.js

@@ -18,6 +18,9 @@ function palette(level) {
 
 // eslint-disable-next-line no-control-regex
 const ANSI_PATTERN = /\u001b\[[0-9;]*m/g;
+const PAGE_DIVIDER = "────────────────────────────────────────";
+const SECTION_DIVIDER = "----------------------------------------";
+const LIGHT_DIVIDER = "········································";
 
 export function stripAnsi(text) {
   return String(text ?? "").replace(ANSI_PATTERN, "");
@@ -221,3 +224,255 @@ export function renderModelTable(models = [], { color = false, width = 0 } = {})
     ]),
   }, { color, width });
 }
+
+// ──────────────────────────────────────────────
+// 执行流程组件（优化需求 V2）：任务页 / 步骤 / 分割线 / 选择卡片 / 结构化错误
+// ──────────────────────────────────────────────
+
+export function renderDivider(type = "section") {
+  if (type === "page") {
+    return PAGE_DIVIDER;
+  }
+  if (type === "light") {
+    return LIGHT_DIVIDER;
+  }
+  return SECTION_DIVIDER;
+}
+
+export function renderTaskStart(title, { intro = [] } = {}) {
+  const lines = [
+    PAGE_DIVIDER,
+    `🚀 任务：${title}`,
+    PAGE_DIVIDER,
+  ];
+  const items = Array.isArray(intro) ? intro.filter(Boolean) : [];
+  if (items.length > 0) {
+    lines.push("", "本流程将完成：");
+    lines.push(...items.slice(0, 5).map((item, index) => `${index + 1}. ${item}`));
+  }
+  return lines.join("\n");
+}
+
+export function renderTaskEnd(title, { summary = [] } = {}) {
+  const lines = [
+    PAGE_DIVIDER,
+    `🎉 ${title}`,
+    PAGE_DIVIDER,
+  ];
+  const items = Array.isArray(summary) ? summary : [];
+  if (items.length > 0) {
+    lines.push("");
+    for (const [label, value] of items) {
+      lines.push(`${label}：${value}`);
+    }
+  }
+  return lines.join("\n");
+}
+
+export function renderTaskStep(current, total, title, { icon = "▶" } = {}) {
+  return `${icon} [${current}/${total}] ${title}`;
+}
+
+function normalizeColumns(columns = []) {
+  return columns.map((column) => {
+    if (Array.isArray(column)) {
+      return { key: column[0], label: column[1] ?? column[0] };
+    }
+    if (typeof column === "string") {
+      return { key: column, label: column };
+    }
+    return { key: column.key, label: column.label ?? column.key };
+  }).filter((column) => column.key);
+}
+
+function rowValue(row, key) {
+  if (Array.isArray(row)) {
+    return row[key] ?? "";
+  }
+  return row?.[key] ?? "";
+}
+
+function limitRows(rows, maxRows) {
+  const limit = Number(maxRows);
+  if (!Number.isInteger(limit) || limit <= 0 || rows.length <= limit) {
+    return { visibleRows: rows, hiddenCount: 0 };
+  }
+  return {
+    visibleRows: rows.slice(0, limit),
+    hiddenCount: rows.length - limit,
+  };
+}
+
+function foldedHint(hiddenCount) {
+  return `还有 ${hiddenCount} 项，使用 --verbose 或详情命令查看更多。`;
+}
+
+export function renderChoiceTable({ columns = [], rows = [] } = {}, { color = false, width = 0, cardBreakpoint = 72, maxRows = 0, titleKey = "" } = {}) {
+  const cols = normalizeColumns(columns);
+  const { visibleRows, hiddenCount } = limitRows(rows, maxRows);
+  const table = renderSeparatedTable({
+    head: cols.map((column) => column.label),
+    rows: visibleRows.map((row) => cols.map((column) => String(rowValue(row, column.key)))),
+  }, { color, width });
+  const tableWidth = cellWidth(table.split("\n")[0] ?? "");
+  const appendHint = (output) => hiddenCount > 0 ? `${output}\n${foldedHint(hiddenCount)}` : output;
+  if (!width || (width >= cardBreakpoint && tableWidth <= width)) {
+    return appendHint(table);
+  }
+  return appendHint(visibleRows.map((row) => renderChoiceCard(row, cols, { color, width, titleKey })).join("\n\n"));
+}
+
+function renderSeparatedTable({ head = [], rows = [] } = {}, { color = false, width = 0 } = {}) {
+  const level = toLevel(color);
+  const widths = resolveWidths(head, rows, width);
+  const fit = (row) => widths.map((w, i) => truncateDisplay(row[i] ?? "", w));
+  const lines = [borderLine(widths, ["┌", "┬", "┐"], level)];
+  if (head.length > 0) {
+    lines.push(contentLine(fit(head), widths, { level, bold: true }));
+    lines.push(borderLine(widths, ["├", "┼", "┤"], level));
+  }
+  rows.forEach((row, index) => {
+    lines.push(contentLine(fit(row), widths, { level }));
+    if (index < rows.length - 1) {
+      lines.push(borderLine(widths, ["├", "┼", "┤"], level));
+    }
+  });
+  lines.push(borderLine(widths, ["└", "┴", "┘"], level));
+  return lines.join("\n");
+}
+
+function renderChoiceCard(row, columns, options) {
+  const { titleKey = "" } = options;
+  const indexKey = columns.find((column) => column.key === "index")?.key;
+  const nameKey = titleKey
+    ? columns.find((column) => column.key === titleKey)?.key
+    : columns.find((column) => column.key === "name" || column.key === "label")?.key;
+  const markKey = columns.find((column) => column.key === "mark" || column.key === "badge")?.key;
+  const title = [
+    !titleKey && indexKey ? `${rowValue(row, indexKey)}.` : "",
+    nameKey ? rowValue(row, nameKey) : "",
+  ].filter(Boolean).join(" ").trim() || String(rowValue(row, columns[0]?.key) || "");
+  const badge = markKey ? rowValue(row, markKey) : "";
+  const fields = columns
+    .filter((column) => ![indexKey, nameKey, markKey].includes(column.key))
+    .map((column) => [column.label, rowValue(row, column.key)])
+    .filter(([, value]) => value !== "" && value !== null && value !== undefined);
+  return renderCard(title, fields, { ...options, badge });
+}
+
+export function renderCard(title, fields = [], { badge = "", color = false, width = 0 } = {}) {
+  const level = toLevel(color);
+  const c = level ? palette(level) : null;
+  const maxWidth = width > 0 ? width : 0;
+  const desiredInner = Math.max(
+    cellWidth(`${title}${badge ? ` ${badge}` : ""}`),
+    ...fields.map(([label, value]) => cellWidth(`${label}：${value}`)),
+    12,
+  ) + 2;
+  const inner = maxWidth ? Math.max(8, Math.min(desiredInner, maxWidth - 2)) : desiredInner;
+  const contentWidth = Math.max(1, inner - 2);
+  const edge = (left, right) => {
+    const text = `${left}${"─".repeat(inner)}${right}`;
+    return level ? `${c.border}${text}${RESET}` : text;
+  };
+  const line = (text) => {
+    const fitted = truncateDisplay(text, contentWidth);
+    const body = ` ${padCell(fitted, contentWidth)} `;
+    return level ? `${c.border}│${RESET}${body}${c.border}│${RESET}` : `│${body}│`;
+  };
+  const badgeText = String(badge);
+  const badgeW = cellWidth(badgeText);
+  // badge（当前/推荐/异常标记）优先保留：窄卡片下截断 title 而非 badge（需求第七节）
+  let titleText;
+  if (badgeText) {
+    const titleMax = Math.max(1, contentWidth - badgeW - 1);
+    const fittedTitle = truncateDisplay(title, titleMax);
+    const gap = Math.max(1, contentWidth - cellWidth(fittedTitle) - badgeW);
+    titleText = `${fittedTitle}${" ".repeat(gap)}${badgeText}`;
+  } else {
+    titleText = truncateDisplay(title, contentWidth);
+  }
+  const lines = [edge("┌", "┐"), line(titleText)];
+  for (const [label, value] of fields) {
+    lines.push(line(`${label}：${value}`));
+  }
+  lines.push(edge("└", "┘"));
+  return lines.join("\n");
+}
+
+export function renderStructuredError(title, {
+  reason = "",
+  suggestions = [],
+  detailCommand = "",
+} = {}) {
+  const lines = [`❌ ${title}`];
+  if (reason) {
+    lines.push("", "原因：", String(reason));
+  }
+  const items = Array.isArray(suggestions) ? suggestions.filter(Boolean) : [];
+  if (items.length > 0) {
+    lines.push("", "建议：");
+    lines.push(...items.map((item, index) => `${index + 1}. ${item}`));
+  }
+  if (detailCommand) {
+    lines.push("", "查看详细日志：", detailCommand);
+  }
+  return lines.join("\n");
+}
+
+export const taskStart = renderTaskStart;
+export const taskEnd = renderTaskEnd;
+export const step = renderTaskStep;
+export const divider = renderDivider;
+export const errorBlock = renderStructuredError;
+export const card = renderCard;
+
+export function warningBlock(title, {
+  action = "",
+  impact = "",
+  prompt = "",
+} = {}) {
+  const lines = [`⚠️ ${title}`];
+  if (action) {
+    lines.push("", "将执行：", String(action));
+  }
+  if (impact) {
+    lines.push("", "影响范围：", String(impact));
+  }
+  if (prompt) {
+    lines.push("", String(prompt));
+  }
+  return lines.join("\n");
+}
+
+export function selectedSummary(title, pairs = []) {
+  const lines = [String(title)];
+  const body = summary(pairs);
+  if (body) {
+    lines.push(body);
+  }
+  return lines.join("\n");
+}
+
+export function table(data = {}, options = {}) {
+  if (Array.isArray(data.columns)) {
+    return renderChoiceTable(data, options);
+  }
+  return renderTable(data, options);
+}
+
+export function summary(items = []) {
+  return items.map(([label, value]) => `${label}：${value}`).join("\n");
+}
+
+export function command(text) {
+  return String(text ?? "");
+}
+
+export function filePath(text) {
+  return String(text ?? "");
+}
+
+export function current(label, value) {
+  return `${label}：${value}`;
+}

package/src/zcf-notice.js

@@ -17,6 +17,16 @@ export const OPEN_SOURCE_NOTICE = [
   "提供授权登录、API Key、余额充值、Claude Code / Codex 配置注入等服务。",
 ].join("\n");
 
+export const OPEN_SOURCE_NOTICE_SUMMARY = [
+  "开源参考声明",
+  "",
+  "本流程参考 NPX ZCF 的交互式初始化与推荐配置体验。",
+  "感谢作者 UfoMiao 的开源贡献。",
+  `项目地址：${ZCF_PROJECT_URL}`,
+  "",
+  "查看完整声明：claude360 about",
+].join("\n");
+
 // 工作流 / AGENTS 等改编内容的文件头 attribution（PRD 2.3 / 6.5）
 export const ZCF_ATTRIBUTION_COMMENT = [
   "<!--",
@@ -25,12 +35,16 @@ export const ZCF_ATTRIBUTION_COMMENT = [
   "-->",
 ].join("\n");
 
+export function formatOpenSourceNoticeDetail() {
+  return OPEN_SOURCE_NOTICE;
+}
+
 // 展示声明并询问是否继续；返回 true 表示继续，false 表示返回上级菜单。
 export async function showOpenSourceNotice({ promptSelect, writeLine = console.log } = {}) {
   if (typeof promptSelect !== "function") {
     throw new Error("缺少选择输入");
   }
-  writeLine(OPEN_SOURCE_NOTICE);
+  writeLine(OPEN_SOURCE_NOTICE_SUMMARY);
   writeLine("");
   const action = await promptSelect("是否继续？", [
     { label: "继续", value: "continue" },