claude360 0.2.8 → 0.3.0

package/src/topup.js

@@ -1,4 +1,6 @@
-import { renderKeyValueTable, renderSectionTitle } from "./ui.js";
+import { colorLevel } from "./colors.js";
+import { createMessenger } from "./messages.js";
+import { renderChoiceTable, renderDivider, renderKeyValueTable, renderSectionTitle, renderTaskEnd, renderTaskStart, renderTaskStep } from "./ui.js";
 
 export async function loadTopUpOptions(api) {
   if (!api) {
@@ -31,12 +33,26 @@ export async function runWechatTopUp({
     throw new Error("缺少 API client");
   }
 
+  const msg = createMessenger({ writeLine, color: writeLine === console.log ? colorLevel() : 0 });
+  writeLine(renderTaskStart("微信扫码充值", {
+    intro: ["加载充值选项", "选择充值金额", "创建支付订单", "等待微信支付", "刷新余额"],
+  }));
+  writeLine("");
+  writeLine(renderTaskStep(1, 5, "加载充值选项"));
   const options = await loadTopUpOptions(api);
   // 后端口径前置拦截（验收 P1-2）：禁用时不进金额选择、不创建订单
   if (options?.wechat_enabled === false) {
     throw new Error("微信支付未启用，请使用网页充值。");
   }
-  const amount = await chooseTopUpAmount({ options, promptSelect, promptInput });
+  writeLine("");
+  writeLine(renderDivider("section"));
+  writeLine("");
+  writeLine(renderTaskStep(2, 5, "选择充值金额"));
+  const amount = await chooseTopUpAmount({ options, promptSelect, promptInput, writeLine });
+  writeLine("");
+  writeLine(renderDivider("section"));
+  writeLine("");
+  writeLine(renderTaskStep(3, 5, "创建支付订单"));
   const order = await api.post("/api/cli/topup/wechat", { amount });
   if (!order?.order_id || !order?.code_url) {
     throw new Error("创建微信充值订单失败");
@@ -49,8 +65,12 @@ export async function runWechatTopUp({
     ["金额", String(order.money_display || order.money || amount)],
     ["支付方式", "微信扫码"],
   ]));
-  writeLine("请使用微信扫码支付：");
+  msg.info("请使用微信扫码支付：");
   await printQrOrCodeUrl({ codeUrl: order.code_url, renderQr, writeLine });
+  writeLine("");
+  writeLine(renderDivider("section"));
+  writeLine("");
+  writeLine(renderTaskStep(4, 5, "等待微信支付"));
   const status = await waitTopUpPaid({
     api,
     orderId: order.order_id,
@@ -59,11 +79,22 @@ export async function runWechatTopUp({
     maxPolls,
     writeStatus,
   });
+  writeLine("");
+  writeLine(renderDivider("section"));
+  writeLine("");
+  writeLine(renderTaskStep(5, 5, "刷新余额"));
   const balance = await api.get("/api/cli/me");
+  if (balance?.balance_display) {
+    msg.result("当前余额", balance.balance_display);
+  }
+  writeLine("");
+  writeLine(renderTaskEnd("微信扫码充值完成", {
+    summary: [["充值金额", String(order.money_display || order.money || amount)]],
+  }));
   return { order, status, balance };
 }
 
-async function chooseTopUpAmount({ options, promptSelect, promptInput }) {
+async function chooseTopUpAmount({ options, promptSelect, promptInput, writeLine }) {
   const amountOptions = Array.isArray(options?.amount_options)
     ? options.amount_options.filter((amount) => Number.isFinite(amount) && amount > 0)
     : [];
@@ -71,6 +102,18 @@ async function chooseTopUpAmount({ options, promptSelect, promptInput }) {
     if (typeof promptSelect !== "function") {
       throw new Error("缺少充值金额选择输入");
     }
+    if (typeof writeLine === "function") {
+      writeLine(renderChoiceTable({
+        columns: [
+          ["index", "序号"],
+          ["amount", "金额"],
+        ],
+        rows: amountOptions.map((amount, index) => ({
+          index: String(index + 1),
+          amount: `¥${amount}`,
+        })),
+      }, { width: process.stdout.columns || 0 }));
+    }
     const selected = await promptSelect("选择充值金额", amountOptions.map((amount) => ({
       label: `¥${amount}`,
       value: amount,
@@ -78,6 +121,9 @@ async function chooseTopUpAmount({ options, promptSelect, promptInput }) {
     if (!amountOptions.includes(selected)) {
       throw new Error("请选择后端返回的充值金额");
     }
+    if (typeof writeLine === "function") {
+      writeLine(`✅ 已选择：¥${selected}`);
+    }
     return selected;
   }
 
@@ -92,17 +138,21 @@ async function chooseTopUpAmount({ options, promptSelect, promptInput }) {
   if (minTopUp > 0 && amount < minTopUp) {
     throw new Error(`充值金额不能低于 ${minTopUp}`);
   }
+  if (typeof writeLine === "function") {
+    writeLine(`✅ 已选择：¥${amount}`);
+  }
   return amount;
 }
 
 async function printQrOrCodeUrl({ codeUrl, renderQr, writeLine }) {
+  const msg = createMessenger({ writeLine, color: writeLine === console.log ? colorLevel() : 0 });
   try {
     const qr = await renderQr(codeUrl);
     if (qr) {
       writeLine(qr);
     }
   } catch {
-    writeLine(`二维码渲染失败，请复制 code_url 完成支付：${codeUrl}`);
+    msg.warn(`二维码渲染失败，请复制 code_url 完成支付：${codeUrl}`);
   }
 }
 

package/src/ui.js

@@ -5,18 +5,22 @@
 
 import { displayWidth } from "./banner.js";
 
-import { BOLD, RESET, fg, toLevel } from "./colors.js";
+import { BOLD, PALETTE, RESET, fg, theme, toLevel } from "./colors.js";
 
-// 表格/标题配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+// 表格/标题配色：从统一语义主题取色（见 colors.js theme），不再各自硬编码 RGB。
 function palette(level) {
+  const t = theme(level);
   return {
-    border: fg(71, 85, 105, level), // 边框：青灰
-    head: fg(125, 211, 252, level), // 表头：天蓝
+    border: t.border, // 边框：青灰
+    head: t.info, // 表头：天蓝
   };
 }
 
 // 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, "");
@@ -177,10 +181,10 @@ export function renderHeader(title, { subtitle = "", color = false } = {}) {
 // 四种状态：文字前缀（mark）始终存在，颜色仅增强层级（需求二「不依赖颜色表达唯一信息」）
 const BOX_MARKS = { info: "i", warn: "!", error: "×", success: "✓" };
 const BOX_RGB = {
-  info: [125, 211, 252],
-  warn: [250, 204, 21],
-  error: [248, 113, 113],
-  success: [74, 222, 128],
+  info: PALETTE.info,
+  warn: PALETTE.warn,
+  error: PALETTE.error,
+  success: PALETTE.success,
 };
 
 export function renderBox(message, { kind = "info", color = false, width = 0 } = {}) {
@@ -220,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/workflows.js

@@ -8,6 +8,8 @@ import path from "node:path";
 
 import { createBackup } from "./backup.js";
 import { ZCF_ATTRIBUTION_COMMENT } from "./zcf-notice.js";
+import { colorLevel } from "./colors.js";
+import { createMessenger } from "./messages.js";
 
 const defaultFs = { copyFile, cp, mkdir, readFile, stat, writeFile };
 
@@ -229,6 +231,7 @@ async function installWorkflowSet({
   if (typeof multiSelect !== "function" || typeof confirm !== "function") {
     throw new Error("缺少交互输入");
   }
+  const msg = createMessenger({ writeLine, color: writeLine === console.log ? colorLevel() : 0 });
   const selected = await multiSelect({
     message: "请选择要安装的工作流：",
     choices: workflows.map((workflow) => ({
@@ -238,23 +241,23 @@ async function installWorkflowSet({
     })),
   });
   if (selected.length === 0) {
-    writeLine("已跳过工作流安装。");
+    msg.info("已跳过工作流安装。");
     return { installed: [], skipped: true };
   }
 
   const picked = workflows.filter((workflow) => selected.includes(workflow.id));
-  writeLine(`安装将写入目录：${targetDir}`);
+  msg.info(`安装将写入目录：${targetDir}`);
 
   // 备份已存在的同名文件（一次性集中备份到时间戳目录）
   const targets = picked.flatMap((workflow) => workflow.files.map((file) => path.join(targetDir, file.name)));
   const { backupDir } = await createBackup({ baseDir: backupBaseDir, paths: targets, fs, now });
   if (backupDir) {
-    writeLine(`✓ 已创建备份：${backupDir}`);
+    msg.success(`已创建备份：${backupDir}`);
   }
 
   const installed = [];
   for (const workflow of picked) {
-    writeLine(`正在安装工作流：${workflow.label}...`);
+    msg.step(`正在安装工作流：${workflow.label}...`);
     let wroteAny = false;
     for (const file of workflow.files) {
       const filePath = path.join(targetDir, file.name);
@@ -263,19 +266,19 @@ async function installWorkflowSet({
         if (existing !== file.content) {
           const approved = await confirm(`文件已存在：${filePath}\n是否覆盖？（原文件已备份）`);
           if (!approved) {
-            writeLine(`已跳过：${file.name}`);
+            msg.info(`已跳过：${file.name}`);
             continue;
           }
         }
       }
       await fs.mkdir(targetDir, { recursive: true });
       await fs.writeFile(filePath, file.content, "utf8");
-      writeLine(`✓ 已安装命令：${file.name}`);
+      msg.success(`已安装命令：${file.name}`);
       wroteAny = true;
     }
     if (wroteAny) {
       installed.push(workflow.id);
-      writeLine(`✓ ${workflow.label}安装成功`);
+      msg.success(`${workflow.label}安装成功`);
     }
   }
   if (installed.length > 0 && usageHint) {

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" },