claude360 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude360",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Interactive Claude360 CLI for browser auth, API key setup, balance checks, top-up, Claude Code and Codex launch.",
   "type": "module",
   "bin": {

package/src/banner.js

@@ -1,5 +1,27 @@
+// 品牌横幅：参照 zcf 的顶部边框设计 —— 圆角边框盒子内放渐变色 ASCII logo，
+// TTY 下播放流光动效（渐变相位随帧移动），非 TTY / NO_COLOR 下降级为纯文本。
+// 渲染函数默认无色（color: false），保证测试与管道输出稳定；
+// 运行时由 index.js 通过 playBanner / 显式 color 参数开启彩色。
+
 export const BRAND_BASE_URL = "https://claude360.xyz";
 
+const ESC = "\u001b[";
+const RESET = `${ESC}0m`;
+const BOLD = `${ESC}1m`;
+const DIM = `${ESC}2m`;
+
+const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
+
+export function colorEnabled(stream = process.stdout) {
+  if (process.env.NO_COLOR !== undefined && process.env.NO_COLOR !== "") {
+    return false;
+  }
+  if (process.env.FORCE_COLOR && process.env.FORCE_COLOR !== "0") {
+    return true;
+  }
+  return Boolean(stream && stream.isTTY);
+}
+
 const LOGO_LINES = [
   " ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗██████╗  ██████╗  ██████╗ ",
   "██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝╚════██╗██╔════╝ ██╔═████╗",
@@ -9,34 +31,245 @@ const LOGO_LINES = [
   " ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚═════╝  ╚═════╝  ╚═════╝ ",
 ];
 
-export function renderBanner({ version = "", baseUrl = BRAND_BASE_URL } = {}) {
+// 霓虹渐变色板：青 → 蓝 → 靛 → 紫 → 品红（与 zcf 的冷色霓虹风一致）
+const GRADIENT = [
+  [0, 229, 255],
+  [59, 130, 246],
+  [99, 102, 241],
+  [168, 85, 247],
+  [236, 72, 153],
+];
+
+// 在色板上往返插值（ping-pong），让流光动画首尾循环时颜色连续不跳变
+function gradientAt(t) {
+  const segments = GRADIENT.length - 1;
+  let x = ((t % 1) + 1) % 1;
+  x = x < 0.5 ? x * 2 : (1 - x) * 2;
+  const pos = x * segments;
+  const i = Math.min(Math.floor(pos), segments - 1);
+  const f = pos - i;
+  const [r1, g1, b1] = GRADIENT[i];
+  const [r2, g2, b2] = GRADIENT[i + 1];
+  return [
+    Math.round(r1 + (r2 - r1) * f),
+    Math.round(g1 + (g2 - g1) * f),
+    Math.round(b1 + (b2 - b1) * f),
+  ];
+}
+
+function charDisplayWidth(codePoint) {
+  return (
+    (codePoint >= 0x1100 && codePoint <= 0x115f) ||
+    (codePoint >= 0x2e80 && codePoint <= 0x303e) ||
+    (codePoint >= 0x3041 && codePoint <= 0x33ff) ||
+    (codePoint >= 0x3400 && codePoint <= 0x4dbf) ||
+    (codePoint >= 0x4e00 && codePoint <= 0x9fff) ||
+    (codePoint >= 0xa000 && codePoint <= 0xa4cf) ||
+    (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+    (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+    (codePoint >= 0xfe30 && codePoint <= 0xfe4f) ||
+    (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+    (codePoint >= 0xffe0 && codePoint <= 0xffe6)
+  ) ? 2 : 1;
+}
+
+export function displayWidth(text) {
+  let width = 0;
+  for (const ch of text) {
+    width += charDisplayWidth(ch.codePointAt(0));
+  }
+  return width;
+}
+
+function padCenter(text, width) {
+  const gap = Math.max(0, width - displayWidth(text));
+  const left = Math.floor(gap / 2);
+  return " ".repeat(left) + text + " ".repeat(gap - left);
+}
+
+const BORDER_CHARS = new Set(["─", "│", "╭", "╮", "╰", "╯"]);
+const LOGO_EDGE_CHARS = new Set(["╔", "╗", "╚", "╝", "║", "═"]);
+
+// style:
+//   gradient      —— 整行按列渐变（logo 行、边框行）
+//   text:<sgr>    —— 边框字符渐变，其余字符用固定 SGR 样式（标语行）
+function paintLine(line, { phase, totalWidth, style }) {
+  let out = "";
+  let col = 0;
+  let lastColor = "";
+  for (const ch of line) {
+    const width = charDisplayWidth(ch.codePointAt(0));
+    if (ch === " ") {
+      if (lastColor !== "") {
+        out += RESET;
+        lastColor = "";
+      }
+      out += ch;
+      col += width;
+      continue;
+    }
+    let color;
+    if (style === "gradient" || BORDER_CHARS.has(ch)) {
+      const t = phase + col / Math.max(1, totalWidth);
+      let [r, g, b] = gradientAt(t);
+      if (LOGO_EDGE_CHARS.has(ch)) {
+        // logo 描边字符调暗，让实心块更立体
+        r = Math.round(r * 0.55);
+        g = Math.round(g * 0.55);
+        b = Math.round(b * 0.55);
+      }
+      color = fg(r, g, b);
+    } else {
+      color = style;
+    }
+    if (color !== lastColor) {
+      out += RESET + color;
+      lastColor = color;
+    }
+    out += ch;
+    col += width;
+  }
+  if (lastColor !== "") {
+    out += RESET;
+  }
+  return out;
+}
+
+const TAGLINE = "Claude360 · 模型站接入助手";
+const SUBLINE = "一键配置 Claude Code / Codex / API Key / 充值";
+
+function buildBannerLayout({ version, baseUrl }) {
+  const pad = 1;
+  const innerWidth = Math.max(
+    ...LOGO_LINES.map((line) => displayWidth(line)),
+    displayWidth(TAGLINE),
+    displayWidth(SUBLINE),
+  ) + pad * 2;
+  const top = `╭${"─".repeat(innerWidth)}╮`;
+  const bottom = `╰${"─".repeat(innerWidth)}╯`;
+  const boxed = (text) => `│${padCenter(text, innerWidth)}│`;
+  const footer = `  版本 v${version || "-"}  ·  官网 ${baseUrl}`;
+  return {
+    totalWidth: innerWidth + 2,
+    rows: [
+      { text: top, style: "gradient" },
+      ...LOGO_LINES.map((line) => ({ text: boxed(line), style: "gradient" })),
+      { text: boxed(""), style: "gradient" },
+      { text: boxed(TAGLINE), style: "title" },
+      { text: boxed(SUBLINE), style: "sub" },
+      { text: bottom, style: "gradient" },
+      { text: footer, style: "footer" },
+    ],
+  };
+}
+
+// 终端太窄放不下大 logo 时的紧凑版
+function renderCompactBanner({ version, baseUrl, color, phase }) {
   const lines = [
-    "",
-    ...LOGO_LINES,
-    "",
-    "              Claude360 模型站接入助手",
-    "      一键配置 Claude Code / Codex / API Key / 充值",
-    "",
-    `版本：${version || "-"}  |  官网：${baseUrl}`,
-    "",
+    "Claude360 CLI · 模型站接入助手",
+    SUBLINE,
+    `版本 v${version || "-"}  ·  官网 ${baseUrl}`,
   ];
-  return lines.join("\n");
+  if (!color) {
+    return lines.join("\n");
+  }
+  return [
+    paintLine(lines[0], { phase, totalWidth: displayWidth(lines[0]), style: "gradient" }),
+    `${DIM}${lines[1]}${RESET}`,
+    `${DIM}${lines[2]}${RESET}`,
+  ].join("\n");
+}
+
+export function renderBanner({
+  version = "",
+  baseUrl = BRAND_BASE_URL,
+  color = false,
+  phase = 0,
+  columns = 0,
+} = {}) {
+  const { totalWidth, rows } = buildBannerLayout({ version, baseUrl });
+  if (columns > 0 && columns < totalWidth) {
+    return renderCompactBanner({ version, baseUrl, color, phase });
+  }
+  if (!color) {
+    return rows.map((row) => row.text).join("\n");
+  }
+  const styles = {
+    title: `${BOLD}${fg(240, 246, 255)}`,
+    sub: `${fg(148, 163, 184)}`,
+  };
+  return rows.map((row) => {
+    if (row.style === "footer") {
+      return `${DIM}${row.text}${RESET}`;
+    }
+    const style = row.style === "gradient" ? "gradient" : styles[row.style];
+    return paintLine(row.text, { phase, totalWidth, style });
+  }).join("\n");
+}
+
+// 流光动效：固定布局重绘若干帧，仅移动渐变相位。
+// 非 TTY / NO_COLOR / 终端过窄时直接输出静态版本。
+export async function playBanner({
+  version = "",
+  baseUrl = BRAND_BASE_URL,
+  stream = process.stdout,
+  frames = 24,
+  intervalMs = 50,
+  sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)),
+} = {}) {
+  const columns = stream && stream.columns ? stream.columns : 0;
+  const animated = colorEnabled(stream)
+    && typeof stream.write === "function"
+    && (!columns || columns >= buildBannerLayout({ version, baseUrl }).totalWidth);
+  if (!animated) {
+    const text = renderBanner({ version, baseUrl, color: colorEnabled(stream), columns });
+    if (stream && typeof stream.write === "function") {
+      stream.write(text + "\n");
+    } else {
+      console.log(text);
+    }
+    return;
+  }
+  const lineCount = renderBanner({ version, baseUrl }).split("\n").length;
+  stream.write(`${ESC}?25l`);
+  try {
+    for (let i = 0; i <= frames; i += 1) {
+      const phase = i / frames;
+      stream.write(renderBanner({ version, baseUrl, color: true, phase }) + "\n");
+      if (i < frames) {
+        await sleep(intervalMs);
+        stream.write(`${ESC}${lineCount}A`);
+      }
+    }
+  } finally {
+    stream.write(`${ESC}?25h`);
+  }
 }
 
 export const CHECK_OK = "✓";
 export const CHECK_WARN = "!";
 export const CHECK_FAIL = "×";
 
-export function formatCheckLine(status, text) {
+const CHECK_COLORS = {
+  ok: [74, 222, 128],
+  warn: [250, 204, 21],
+  fail: [248, 113, 113],
+};
+
+export function formatCheckLine(status, text, { color = false } = {}) {
   const symbols = { ok: CHECK_OK, warn: CHECK_WARN, fail: CHECK_FAIL };
   const symbol = symbols[status] || CHECK_WARN;
-  return `${symbol} ${text}`;
+  if (!color) {
+    return `${symbol} ${text}`;
+  }
+  const [r, g, b] = CHECK_COLORS[status] || CHECK_COLORS.warn;
+  return `${fg(r, g, b)}${BOLD}${symbol}${RESET} ${text}`;
 }
 
-export function renderEnvironmentChecks(checks = []) {
+export function renderEnvironmentChecks(checks = [], { color = false } = {}) {
   return [
     "正在检查运行环境...",
     "",
-    ...checks.map((check) => formatCheckLine(check.status, check.text)),
+    ...checks.map((check) => formatCheckLine(check.status, check.text, { color })),
   ].join("\n");
 }

package/src/index.js

@@ -6,7 +6,7 @@ import { createRequire } from "node:module";
 import { ApiClient } from "./api-client.js";
 import { authenticateWithBrowser } from "./auth.js";
 import { formatAccountStatus, loadAccountStatus } from "./account-status.js";
-import { renderBanner, formatCheckLine } from "./banner.js";
+import { colorEnabled, formatCheckLine, playBanner, renderBanner } from "./banner.js";
 import { runCcSwitchGenerator } from "./cc-switch.js";
 import { createConfigStore } from "./config-store.js";
 import {
@@ -82,9 +82,15 @@ export async function runCli({
   let config = await configStore.load();
   const baseUrl = config.baseUrl || DEFAULT_BASE_URL;
   let api = createApiClient({ baseUrl, cliToken: config.cliToken || "" });
+  // 仅在真实终端（writeLine 未被测试替换）启用彩色与动效
+  const fancyOutput = writeLine === console.log && colorEnabled();
 
   if (showBanner) {
-    writeLine(renderBanner({ version, baseUrl }));
+    if (fancyOutput) {
+      await playBanner({ version, baseUrl });
+    } else {
+      writeLine(renderBanner({ version, baseUrl }));
+    }
     await showEnvironmentChecks();
   }
 
@@ -113,7 +119,7 @@ export async function runCli({
     checks.push(config.cliToken
       ? { status: "ok", text: "已登录 Claude360" }
       : { status: "warn", text: "尚未登录 Claude360" });
-    writeLine(checks.map((check) => formatCheckLine(check.status, check.text)).join("\n"));
+    writeLine(checks.map((check) => formatCheckLine(check.status, check.text, { color: fancyOutput })).join("\n"));
     writeLine("");
   }
 

package/src/menu.js

@@ -1,6 +1,22 @@
 // 菜单：区分首次使用菜单与日常使用菜单（PRD 第 10、11 章）。
 // 菜单自带分区标题与选择键（1-9 / A / 0 / Q），由 renderMenu 渲染、
 // resolveMenuSelection 解析，promptMenu 循环读取直到输入有效。
+// 渲染默认无色（color: false）以保证测试与管道输出稳定，
+// 真实终端下由 promptMenu 自动开启彩色分区样式。
+
+import { colorEnabled, displayWidth } from "./banner.js";
+
+const ESC = "\u001b[";
+const RESET = `${ESC}0m`;
+const BOLD = `${ESC}1m`;
+const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
+
+const RULE_COLOR = fg(71, 85, 105);      // 分隔线：青灰
+const SECTION_COLOR = fg(34, 211, 238);  // 分区标题：亮青
+const KEY_COLOR = fg(125, 211, 252);     // 选择键：天蓝
+const EXIT_COLOR = fg(248, 113, 113);    // 退出键：红
+const DESC_COLOR = fg(100, 116, 139);    // 功能说明：暗灰
+const MENU_RULE_WIDTH = 46;
 
 export function buildFirstRunMenu() {
   return {
@@ -14,13 +30,13 @@ export function buildFirstRunMenu() {
       {
         title: null,
         items: [
-          { key: "1", label: "一键配置 Claude Code", value: "setup_claude" },
-          { key: "2", label: "一键配置 Codex", value: "setup_codex" },
-          { key: "3", label: "同时配置 Claude Code + Codex", value: "setup_both" },
-          { key: "4", label: "仅登录 Claude360 并创建 API Key", value: "login_only" },
-          { key: "5", label: "生成 cc-switch 配置", value: "cc_switch" },
-          { key: "6", label: "打开 Claude360 注册 / 登录页面", value: "open_register" },
-          { key: "Q", label: "退出", value: "exit" },
+          { key: "1", label: "一键配置 Claude Code", value: "setup_claude", desc: "登录并创建 API Key，自动写入 Claude Code 配置" },
+          { key: "2", label: "一键配置 Codex", value: "setup_codex", desc: "登录并创建 API Key，自动写入 Codex 配置" },
+          { key: "3", label: "同时配置 Claude Code + Codex", value: "setup_both", desc: "一次登录，两个工具同时完成接入" },
+          { key: "4", label: "仅登录 Claude360 并创建 API Key", value: "login_only", desc: "只获取 Key，不修改本地工具配置" },
+          { key: "5", label: "生成 cc-switch 配置", value: "cc_switch", desc: "生成可导入 cc-switch 的供应商配置" },
+          { key: "6", label: "打开 Claude360 注册 / 登录页面", value: "open_register", desc: "在浏览器中打开官网注册或登录" },
+          { key: "Q", label: "退出", value: "exit", desc: "退出 claude360 CLI" },
         ],
       },
     ],
@@ -32,53 +48,74 @@ export function buildDailyMenu() {
     title: "请选择功能：",
     sections: [
       {
-        title: "--- 快速启动 ---",
+        title: "快速启动",
         items: [
-          { key: "1", label: "启动 Claude Code", value: "launch_claude" },
-          { key: "2", label: "启动 Codex", value: "launch_codex" },
+          { key: "1", label: "启动 Claude Code", value: "launch_claude", desc: "使用 Claude360 接入配置直接启动" },
+          { key: "2", label: "启动 Codex", value: "launch_codex", desc: "使用 Claude360 接入配置直接启动" },
         ],
       },
       {
-        title: "--- Claude360 ---",
+        title: "Claude360",
         items: [
-          { key: "3", label: "余额与充值", value: "balance_topup" },
-          { key: "4", label: "创建新的 API Key", value: "create_key" },
-          { key: "5", label: "打开 Claude360 控制台", value: "open_console" },
+          { key: "3", label: "余额与充值", value: "balance_topup", desc: "查看余额用量，支持微信扫码充值" },
+          { key: "4", label: "创建新的 API Key", value: "create_key", desc: "在当前账号下新建一个 API Key" },
+          { key: "5", label: "打开 Claude360 控制台", value: "open_console", desc: "在浏览器中打开网页控制台" },
         ],
       },
       {
-        title: "--- 工具配置 ---",
+        title: "工具配置",
         items: [
-          { key: "6", label: "Claude Code 配置", value: "claude_code_menu" },
-          { key: "7", label: "Codex 配置", value: "codex_menu" },
-          { key: "8", label: "推荐 MCP / Skill", value: "mcp_skill" },
-          { key: "9", label: "生成 cc-switch 配置", value: "cc_switch" },
+          { key: "6", label: "Claude Code 配置", value: "claude_code_menu", desc: "安装、更新、写入或修复接入配置" },
+          { key: "7", label: "Codex 配置", value: "codex_menu", desc: "安装、更新、写入或修复接入配置" },
+          { key: "8", label: "推荐 MCP / Skill", value: "mcp_skill", desc: "安装推荐的 MCP、工作流与 Skill 增强" },
+          { key: "9", label: "生成 cc-switch 配置", value: "cc_switch", desc: "生成可导入 cc-switch 的供应商配置" },
         ],
       },
       {
-        title: "--- 维护 ---",
+        title: "维护",
         items: [
-          { key: "A", label: "诊断与修复", value: "diagnostics_menu" },
-          { key: "B", label: "安装或更新工具", value: "install_tools" },
-          { key: "0", label: "重新登录", value: "relogin" },
-          { key: "Q", label: "退出", value: "exit" },
+          { key: "A", label: "诊断与修复", value: "diagnostics_menu", desc: "一键诊断环境与配置问题并尝试修复" },
+          { key: "B", label: "安装或更新工具", value: "install_tools", desc: "安装或升级 Claude Code / Codex / 本 CLI" },
+          { key: "0", label: "重新登录", value: "relogin", desc: "清除本地登录态后重新浏览器授权" },
+          { key: "Q", label: "退出", value: "exit", desc: "退出 claude360 CLI" },
         ],
       },
     ],
   };
 }
 
-export function renderMenu(menu) {
+// 分区标题渲染为 `─── 标题 ──────…` 形式的分隔线，让各组功能在视觉上彼此分开
+function renderSectionRule(title, color) {
+  const lead = "───";
+  const label = ` ${title} `;
+  const tail = "─".repeat(Math.max(4, MENU_RULE_WIDTH - lead.length - displayWidth(label)));
+  if (!color) {
+    return `${lead}${label}${tail}`;
+  }
+  return `${RULE_COLOR}${lead}${RESET}${BOLD}${SECTION_COLOR}${label}${RESET}${RULE_COLOR}${tail}${RESET}`;
+}
+
+function renderItem(item, color) {
+  const desc = item.desc ? ` - ${item.desc}` : "";
+  if (!color) {
+    return `  ${item.key}. ${item.label}${desc}`;
+  }
+  const keyColor = item.value === "exit" ? EXIT_COLOR : KEY_COLOR;
+  const coloredDesc = desc ? `${DESC_COLOR}${desc}${RESET}` : "";
+  return `  ${BOLD}${keyColor}${item.key}.${RESET} ${item.label}${coloredDesc}`;
+}
+
+export function renderMenu(menu, { color = false } = {}) {
   const lines = [];
   if (menu.title) {
-    lines.push(menu.title, "");
+    lines.push(color ? `${BOLD}${menu.title}${RESET}` : menu.title, "");
   }
   for (const section of menu.sections) {
     if (section.title) {
-      lines.push(section.title);
+      lines.push(renderSectionRule(section.title, color));
     }
     for (const item of section.items) {
-      lines.push(`${item.key}. ${item.label}`);
+      lines.push(renderItem(item, color));
     }
     lines.push("");
   }
@@ -107,8 +144,10 @@ export async function promptMenu({ menu, promptInput, writeLine = console.log }
   if (typeof promptInput !== "function") {
     throw new Error("缺少菜单输入");
   }
+  // 仅在输出未被测试替换且终端支持时启用彩色
+  const color = writeLine === console.log && colorEnabled();
   while (true) {
-    writeLine(renderMenu(menu));
+    writeLine(renderMenu(menu, { color }));
     const answer = await promptInput("请输入选项");
     const value = resolveMenuSelection(menu, answer);
     if (value !== null) {