claude360 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude360",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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

@@ -3,24 +3,13 @@
 // 渲染函数默认无色（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`;
+import { BOLD, DIM, ESC, RESET, colorEnabled, colorLevel, fg, toLevel } from "./colors.js";
 
-const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
+export const BRAND_BASE_URL = "https://claude360.xyz";
 
-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);
-}
+// colorEnabled / colorLevel 由 colors.js 统一提供，这里 re-export，
+// 以保持 menu.js / index.js 从 banner.js 导入的既有路径不变。
+export { colorEnabled, colorLevel };
 
 const LOGO_LINES = [
   " ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗██████╗  ██████╗  ██████╗ ",
@@ -93,7 +82,7 @@ const LOGO_EDGE_CHARS = new Set(["╔", "╗", "╚", "╝", "║", "═"]);
 // style:
 //   gradient      —— 整行按列渐变（logo 行、边框行）
 //   text:<sgr>    —— 边框字符渐变，其余字符用固定 SGR 样式（标语行）
-function paintLine(line, { phase, totalWidth, style }) {
+function paintLine(line, { phase, totalWidth, style, level = 2 }) {
   let out = "";
   let col = 0;
   let lastColor = "";
@@ -118,7 +107,7 @@ function paintLine(line, { phase, totalWidth, style }) {
         g = Math.round(g * 0.55);
         b = Math.round(b * 0.55);
       }
-      color = fg(r, g, b);
+      color = fg(r, g, b, level);
     } else {
       color = style;
     }
@@ -165,16 +154,17 @@ function buildBannerLayout({ version, baseUrl }) {
 
 // 终端太窄放不下大 logo 时的紧凑版
 function renderCompactBanner({ version, baseUrl, color, phase }) {
+  const level = toLevel(color);
   const lines = [
     "Claude360 CLI · 模型站接入助手",
     SUBLINE,
     `版本 v${version || "-"}  ·  官网 ${baseUrl}`,
   ];
-  if (!color) {
+  if (!level) {
     return lines.join("\n");
   }
   return [
-    paintLine(lines[0], { phase, totalWidth: displayWidth(lines[0]), style: "gradient" }),
+    paintLine(lines[0], { phase, totalWidth: displayWidth(lines[0]), style: "gradient", level }),
     `${DIM}${lines[1]}${RESET}`,
     `${DIM}${lines[2]}${RESET}`,
   ].join("\n");
@@ -191,19 +181,20 @@ export function renderBanner({
   if (columns > 0 && columns < totalWidth) {
     return renderCompactBanner({ version, baseUrl, color, phase });
   }
-  if (!color) {
+  const level = toLevel(color);
+  if (!level) {
     return rows.map((row) => row.text).join("\n");
   }
   const styles = {
-    title: `${BOLD}${fg(240, 246, 255)}`,
-    sub: `${fg(148, 163, 184)}`,
+    title: `${BOLD}${fg(240, 246, 255, level)}`,
+    sub: `${fg(148, 163, 184, level)}`,
   };
   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 });
+    return paintLine(row.text, { phase, totalWidth, style, level });
   }).join("\n");
 }
 
@@ -218,11 +209,12 @@ export async function playBanner({
   sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)),
 } = {}) {
   const columns = stream && stream.columns ? stream.columns : 0;
-  const animated = colorEnabled(stream)
+  const level = colorLevel(stream);
+  const animated = level > 0
     && typeof stream.write === "function"
     && (!columns || columns >= buildBannerLayout({ version, baseUrl }).totalWidth);
   if (!animated) {
-    const text = renderBanner({ version, baseUrl, color: colorEnabled(stream), columns });
+    const text = renderBanner({ version, baseUrl, color: level, columns });
     if (stream && typeof stream.write === "function") {
       stream.write(text + "\n");
     } else {
@@ -235,7 +227,7 @@ export async function playBanner({
   try {
     for (let i = 0; i <= frames; i += 1) {
       const phase = i / frames;
-      stream.write(renderBanner({ version, baseUrl, color: true, phase }) + "\n");
+      stream.write(renderBanner({ version, baseUrl, color: level, phase }) + "\n");
       if (i < frames) {
         await sleep(intervalMs);
         stream.write(`${ESC}${lineCount}A`);
@@ -259,11 +251,12 @@ const CHECK_COLORS = {
 export function formatCheckLine(status, text, { color = false } = {}) {
   const symbols = { ok: CHECK_OK, warn: CHECK_WARN, fail: CHECK_FAIL };
   const symbol = symbols[status] || CHECK_WARN;
-  if (!color) {
+  const level = toLevel(color);
+  if (!level) {
     return `${symbol} ${text}`;
   }
   const [r, g, b] = CHECK_COLORS[status] || CHECK_COLORS.warn;
-  return `${fg(r, g, b)}${BOLD}${symbol}${RESET} ${text}`;
+  return `${fg(r, g, b, level)}${BOLD}${symbol}${RESET} ${text}`;
 }
 
 export function renderEnvironmentChecks(checks = [], { color = false } = {}) {

package/src/colors.js

@@ -0,0 +1,93 @@
+// 终端色彩能力检测与着色：truecolor(2) / 256 色(1) / 无色(0) 三档自适应。
+// 统一被 banner.js / menu.js / ui.js / prompts.js 复用，消除各文件重复的
+// ESC / RESET / fg 定义。macOS Terminal.app 等仅支持 256 色的终端无法解析
+// 24-bit 真彩色序列（38;2;r;g;b）会出现颜色错乱，这里在 256 色档把 RGB
+// 量化到 xterm-256 调色板，既保留渐变观感又避免错乱。
+
+export const ESC = "[";
+export const RESET = `${ESC}0m`;
+export const BOLD = `${ESC}1m`;
+export const DIM = `${ESC}2m`;
+
+// 终端色彩深度：0=无色，1=256 色，2=真彩色（24-bit）。
+// 仅检测能力（是否上色 + 用多深的色），不负责方向键 UI 判定（见 prompts.isInteractive）。
+export function colorLevel(stream = process.stdout) {
+  const { NO_COLOR, FORCE_COLOR, COLORTERM, TERM } = process.env;
+  if (NO_COLOR !== undefined && NO_COLOR !== "") {
+    return 0;
+  }
+  let forced = false;
+  if (FORCE_COLOR !== undefined && FORCE_COLOR !== "") {
+    if (FORCE_COLOR === "0" || FORCE_COLOR === "false") {
+      return 0;
+    }
+    if (FORCE_COLOR === "1") {
+      return 1;
+    }
+    if (FORCE_COLOR === "2" || FORCE_COLOR === "3") {
+      return 2;
+    }
+    forced = true; // 其它非空值：强制上色，色深仍按下方终端能力判定
+  }
+  if (!forced && !(stream && stream.isTTY)) {
+    return 0;
+  }
+  const colorterm = String(COLORTERM || "").toLowerCase();
+  if (colorterm.includes("truecolor") || colorterm.includes("24bit")) {
+    return 2;
+  }
+  const term = String(TERM || "").toLowerCase();
+  if (/-direct|kitty|iterm/.test(term)) {
+    return 2;
+  }
+  // 其余可上色场景统一按 256 色处理（含 *-256color、空 TERM、dumb 等），
+  // 保证「isTTY 即至少 256 色」，使 banner 动画在各类 CI 的 TERM 下稳定触发。
+  return 1;
+}
+
+export function colorEnabled(stream = process.stdout) {
+  return colorLevel(stream) > 0;
+}
+
+// 把 render / prompt 的 color 入参（boolean | 0 | 1 | 2）归一为 level。
+// true → 2（真彩色），保证既有「color: true」调用与测试行为完全不变。
+export function toLevel(color) {
+  if (color === true) {
+    return 2;
+  }
+  if (!color) {
+    return 0;
+  }
+  const n = Number(color);
+  if (!Number.isFinite(n) || n <= 0) {
+    return 0;
+  }
+  return n >= 2 ? 2 : 1;
+}
+
+// 24-bit RGB 量化到 xterm-256 调色板：232-255 灰阶 + 16-231 的 6×6×6 立方。
+export function rgbToAnsi256(r, g, b) {
+  if (r === g && g === b) {
+    if (r < 8) {
+      return 16;
+    }
+    if (r > 248) {
+      return 231;
+    }
+    return Math.round(((r - 8) / 247) * 24) + 232;
+  }
+  const q = (v) => Math.round((v / 255) * 5);
+  return 16 + 36 * q(r) + 6 * q(g) + q(b);
+}
+
+// 前景色：按 level 输出真彩色 / 256 色 / 空串。level 默认 2，
+// 使任何未显式降级的调用安全回退为真彩色（与改造前行为一致）。
+export function fg(r, g, b, level = 2) {
+  if (level >= 2) {
+    return `${ESC}38;2;${r};${g};${b}m`;
+  }
+  if (level === 1) {
+    return `${ESC}38;5;${rgbToAnsi256(r, g, b)}m`;
+  }
+  return "";
+}

package/src/index.js

@@ -6,7 +6,7 @@ import path from "node:path";
 import { ApiClient } from "./api-client.js";
 import { authenticateWithBrowser } from "./auth.js";
 import { formatAccountStatus, loadAccountStatus } from "./account-status.js";
-import { colorEnabled, formatCheckLine, playBanner, renderBanner } from "./banner.js";
+import { colorLevel, formatCheckLine, playBanner, renderBanner } from "./banner.js";
 import { runCcSwitchGenerator } from "./cc-switch.js";
 import { createConfigStore } from "./config-store.js";
 import { createPrompts, isInteractive } from "./prompts.js";
@@ -113,7 +113,7 @@ export async function runCli({
   const baseUrl = config.baseUrl || DEFAULT_BASE_URL;
   let api = createApiClient({ baseUrl, cliToken: config.cliToken || "" });
   // 仅在真实终端（writeLine 未被测试替换）启用彩色与动效
-  const fancyOutput = writeLine === console.log && colorEnabled();
+  const fancyOutput = writeLine === console.log ? colorLevel() : 0;
   // 方向键交互：真实 TTY 且交互未被测试替换时启用（优化需求第五节），
   // 非交互环境降级为编号输入，由 prompts.js 统一处理
   const interactiveUi = writeLine === console.log && isInteractive();

package/src/menu.js

@@ -4,18 +4,19 @@
 // 渲染默认无色（color: false）以保证测试与管道输出稳定，
 // 真实终端下由 promptMenu 自动开启彩色分区样式。
 
-import { colorEnabled, displayWidth } from "./banner.js";
+import { displayWidth } from "./banner.js";
+import { BOLD, RESET, colorLevel, fg, toLevel } from "./colors.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);    // 功能说明：暗灰
+// 分区/选择键配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+function palette(level) {
+  return {
+    rule: fg(71, 85, 105, level),     // 分隔线：青灰
+    section: fg(34, 211, 238, level), // 分区标题：亮青
+    key: fg(125, 211, 252, level),    // 选择键：天蓝
+    exit: fg(248, 113, 113, level),   // 退出键：红
+    desc: fg(100, 116, 139, level),   // 功能说明：暗灰
+  };
+}
 const MENU_RULE_WIDTH = 46;
 
 export function buildFirstRunMenu() {
@@ -88,36 +89,41 @@ export function buildDailyMenu() {
 
 // 分区标题渲染为 `─── 标题 ──────…` 形式的分隔线，让各组功能在视觉上彼此分开
 function renderSectionRule(title, color) {
+  const level = toLevel(color);
   const lead = "───";
   const label = ` ${title} `;
   const tail = "─".repeat(Math.max(4, MENU_RULE_WIDTH - lead.length - displayWidth(label)));
-  if (!color) {
+  if (!level) {
     return `${lead}${label}${tail}`;
   }
-  return `${RULE_COLOR}${lead}${RESET}${BOLD}${SECTION_COLOR}${label}${RESET}${RULE_COLOR}${tail}${RESET}`;
+  const c = palette(level);
+  return `${c.rule}${lead}${RESET}${BOLD}${c.section}${label}${RESET}${c.rule}${tail}${RESET}`;
 }
 
 function renderItem(item, color) {
+  const level = toLevel(color);
   const desc = item.desc ? ` - ${item.desc}` : "";
-  if (!color) {
+  if (!level) {
     return `  ${item.key}. ${item.label}${desc}`;
   }
-  const keyColor = item.value === "exit" ? EXIT_COLOR : KEY_COLOR;
-  const coloredDesc = desc ? `${DESC_COLOR}${desc}${RESET}` : "";
+  const c = palette(level);
+  const keyColor = item.value === "exit" ? c.exit : c.key;
+  const coloredDesc = desc ? `${c.desc}${desc}${RESET}` : "";
   return `  ${BOLD}${keyColor}${item.key}.${RESET} ${item.label}${coloredDesc}`;
 }
 
 export function renderMenu(menu, { color = false } = {}) {
+  const level = toLevel(color);
   const lines = [];
   if (menu.title) {
-    lines.push(color ? `${BOLD}${menu.title}${RESET}` : menu.title, "");
+    lines.push(level ? `${BOLD}${menu.title}${RESET}` : menu.title, "");
   }
   for (const section of menu.sections) {
     if (section.title) {
-      lines.push(renderSectionRule(section.title, color));
+      lines.push(renderSectionRule(section.title, level));
     }
     for (const item of section.items) {
-      lines.push(renderItem(item, color));
+      lines.push(renderItem(item, level));
     }
     lines.push("");
   }
@@ -155,7 +161,7 @@ export async function promptMenu({ menu, promptInput, select, writeLine = consol
     throw new Error("缺少菜单输入");
   }
   // 仅在输出未被测试替换且终端支持时启用彩色
-  const color = writeLine === console.log && colorEnabled();
+  const color = writeLine === console.log ? colorLevel() : 0;
   while (true) {
     writeLine(renderMenu(menu, { color }));
     const answer = await promptInput("请输入选项");

package/src/prompts.js

@@ -20,16 +20,19 @@ import {
 
 import { promptMultiSelect } from "./menu.js";
 
-const ESC = "[";
-const RESET = `${ESC}0m`;
-const BOLD = `${ESC}1m`;
-const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
-const CYAN = fg(34, 211, 238);    // 品牌高亮：选中项
-const RED = fg(248, 113, 113);    // 危险操作：NO 高亮
-const GRAY = fg(100, 116, 139);   // 次要说明 / 未选中项
-const GREEN = fg(74, 222, 128);   // 完成态答案
+import { BOLD, RESET, colorLevel, fg, toLevel } from "./colors.js";
 
-const paint = (color, sgr, text) => (color ? `${sgr}${text}${RESET}` : text);
+// 交互配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+function palette(level) {
+  return {
+    cyan: fg(34, 211, 238, level),  // 品牌高亮：选中项
+    red: fg(248, 113, 113, level),  // 危险操作：NO 高亮
+    gray: fg(100, 116, 139, level), // 次要说明 / 未选中项
+    green: fg(74, 222, 128, level), // 完成态答案
+  };
+}
+
+const paint = (level, sgr, text) => (level ? `${sgr}${text}${RESET}` : text);
 
 export function isInteractive(stream = process.stdout) {
   if (process.env.CI) {
@@ -51,12 +54,14 @@ export function resolveEscValue(choices = []) {
 // 确认行：选中项大写、加粗、高亮并带箭头；未选中项小写灰色（需求第四节）。
 // 终端无法局部放大字体，用大小写 + 颜色 + 箭头模拟视觉差异。
 export function renderConfirmLine(yesActive, { color = true, danger = false } = {}) {
+  const level = toLevel(color);
+  const c = palette(level);
   const yes = yesActive
-    ? paint(color, `${BOLD}${CYAN}`, "▶ YES ◀")
-    : paint(color, GRAY, "yes");
+    ? paint(level,`${BOLD}${c.cyan}`, "▶ YES ◀")
+    : paint(level,c.gray, "yes");
   const no = !yesActive
-    ? paint(color, `${BOLD}${danger ? RED : CYAN}`, "▶ NO ◀")
-    : paint(color, GRAY, "no");
+    ? paint(level,`${BOLD}${danger ? c.red : c.cyan}`, "▶ NO ◀")
+    : paint(level,c.gray, "no");
   return `   ${yes}     ${no}`;
 }
 
@@ -85,6 +90,8 @@ function assertSelectableChoices(message, choices) {
 // 单选：方向键移动（跳过分隔行）、回车确认、Esc 返回 escValue
 export const interactiveSelect = createPrompt((config, done) => {
   const { message, choices = [], escValue, color = true } = config;
+  const level = toLevel(color);
+  const c = palette(level);
   const selectable = assertSelectableChoices(message, choices);
   const [status, setStatus] = useState("idle");
   const [active, setActive] = useState(selectable[0]);
@@ -111,7 +118,7 @@ export const interactiveSelect = createPrompt((config, done) => {
   });
 
   if (status === "done") {
-    return `${paint(color, BOLD, message)} ${paint(color, GREEN, choices[active]?.separator ? "" : String(choices[active]?.label ?? ""))}`;
+    return `${paint(level,BOLD, message)} ${paint(level,c.green, choices[active]?.separator ? "" : String(choices[active]?.label ?? ""))}`;
   }
 
   const page = usePagination({
@@ -121,22 +128,24 @@ export const interactiveSelect = createPrompt((config, done) => {
     loop: false,
     renderItem({ item, isActive }) {
       if (item.separator) {
-        return paint(color, GRAY, item.separator);
+        return paint(level,c.gray, item.separator);
       }
-      const hint = item.hint ? `  ${paint(color, GRAY, item.hint)}` : "";
+      const hint = item.hint ? `  ${paint(level,c.gray, item.hint)}` : "";
       if (isActive) {
-        return `${paint(color, `${BOLD}${CYAN}`, `❯ ${item.label}`)}${hint}`;
+        return `${paint(level,`${BOLD}${c.cyan}`, `❯ ${item.label}`)}${hint}`;
       }
       return `  ${item.label}${hint}`;
     },
   });
-  const help = paint(color, GRAY, `↑↓ 移动 · Enter 确认${escValue !== undefined ? " · Esc 返回" : ""}`);
-  return `${paint(color, BOLD, message)}\n${page}\n${help}`;
+  const help = paint(level,c.gray, `↑↓ 移动 · Enter 确认${escValue !== undefined ? " · Esc 返回" : ""}`);
+  return `${paint(level,BOLD, message)}\n${page}\n${help}`;
 });
 
 // 多选：空格选择/取消、a 全选、i 反选、回车确认、Esc 取消（需求第 4 节）
 export const interactiveMultiSelect = createPrompt((config, done) => {
   const { message, choices = [], preselected = [], color = true } = config;
+  const level = toLevel(color);
+  const c = palette(level);
   if (choices.length === 0) {
     throw new Error(`${message || "多选列表"}缺少可选择项`);
   }
@@ -189,7 +198,7 @@ export const interactiveMultiSelect = createPrompt((config, done) => {
   });
 
   if (status === "done") {
-    return `${paint(color, BOLD, message)} ${paint(color, GREEN, `已选 ${selected.size} 项`)}`;
+    return `${paint(level,BOLD, message)} ${paint(level,c.green, `已选 ${selected.size} 项`)}`;
   }
 
   const page = usePagination({
@@ -198,20 +207,22 @@ export const interactiveMultiSelect = createPrompt((config, done) => {
     pageSize: PAGE_SIZE,
     loop: false,
     renderItem({ item, isActive }) {
-      const mark = selected.has(item.value) ? paint(color, GREEN, "[x]") : "[ ]";
-      const hint = item.hint ? `  ${paint(color, GRAY, item.hint)}` : "";
-      const label = isActive ? paint(color, `${BOLD}${CYAN}`, `❯ ${mark} ${item.label}`) : `  ${mark} ${item.label}`;
+      const mark = selected.has(item.value) ? paint(level,c.green, "[x]") : "[ ]";
+      const hint = item.hint ? `  ${paint(level,c.gray, item.hint)}` : "";
+      const label = isActive ? paint(level,`${BOLD}${c.cyan}`, `❯ ${mark} ${item.label}`) : `  ${mark} ${item.label}`;
       return `${label}${hint}`;
     },
   });
-  const help = paint(color, GRAY, "↑↓ 移动 · 空格 选择 · a 全选 · i 反选 · Enter 确认 · Esc 取消");
-  return `${paint(color, BOLD, message)}\n${page}\n${help}`;
+  const help = paint(level,c.gray, "↑↓ 移动 · 空格 选择 · a 全选 · i 反选 · Enter 确认 · Esc 取消");
+  return `${paint(level,BOLD, message)}\n${page}\n${help}`;
 });
 
 // 确认：左右方向键 / Tab 切换 YES、NO，回车确认，y / n 快捷，Esc 取消。
 // 默认值由调用方按风险设置：普通继续默认 YES，覆盖 / 删除 / 重置默认 NO。
 export const interactiveConfirm = createPrompt((config, done) => {
   const { message, defaultYes = false, danger = false, color = true } = config;
+  const level = toLevel(color);
+  const c = palette(level);
   const [status, setStatus] = useState("idle");
   const [yes, setYes] = useState(Boolean(defaultYes));
 
@@ -243,10 +254,10 @@ export const interactiveConfirm = createPrompt((config, done) => {
   });
 
   if (status === "done") {
-    return `${paint(color, BOLD, message)} ${paint(color, GREEN, yes ? "YES" : "NO")}`;
+    return `${paint(level,BOLD, message)} ${paint(level,c.green, yes ? "YES" : "NO")}`;
   }
-  const help = paint(color, GRAY, "←→ 切换 · Enter 确认 · Esc 取消");
-  return `${paint(color, BOLD, message)}\n\n${renderConfirmLine(yes, { color, danger })}\n\n${help}`;
+  const help = paint(level,c.gray, "←→ 切换 · Enter 确认 · Esc 取消");
+  return `${paint(level,BOLD, message)}\n\n${renderConfirmLine(yes, { color, danger })}\n\n${help}`;
 });
 
 // ──────────────────────────────────────────────
@@ -319,7 +330,7 @@ async function guardExit(run) {
 
 export function createPrompts({
   interactive = isInteractive(),
-  color = true,
+  color = colorLevel(),
   promptInput,
   writeLine,
 } = {}) {

package/src/ui.js

@@ -5,12 +5,15 @@
 
 import { 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 BORDER_COLOR = fg(71, 85, 105);
-const HEAD_COLOR = fg(125, 211, 252);
+import { BOLD, RESET, fg, toLevel } from "./colors.js";
+
+// 表格/标题配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+function palette(level) {
+  return {
+    border: fg(71, 85, 105, level), // 边框：青灰
+    head: fg(125, 211, 252, level), // 表头：天蓝
+  };
+}
 
 // eslint-disable-next-line no-control-regex
 const ANSI_PATTERN = /\u001b\[[0-9;]*m/g;
@@ -47,17 +50,18 @@ function padCell(text, width) {
   return `${text}${" ".repeat(gap)}`;
 }
 
-function borderLine(widths, [left, mid, right], color) {
+function borderLine(widths, [left, mid, right], level) {
   const line = `${left}${widths.map((w) => "─".repeat(w + 2)).join(mid)}${right}`;
-  return color ? `${BORDER_COLOR}${line}${RESET}` : line;
+  return level ? `${palette(level).border}${line}${RESET}` : line;
 }
 
-function contentLine(cells, widths, { color, bold = false } = {}) {
-  const bar = color ? `${BORDER_COLOR}│${RESET}` : "│";
+function contentLine(cells, widths, { level = 0, bold = false } = {}) {
+  const c = level ? palette(level) : null;
+  const bar = level ? `${c.border}│${RESET}` : "│";
   const body = cells
     .map((cell, i) => {
       const padded = padCell(cell, widths[i]);
-      return bold && color ? ` ${BOLD}${HEAD_COLOR}${padded}${RESET} ` : ` ${padded} `;
+      return bold && level ? ` ${BOLD}${c.head}${padded}${RESET} ` : ` ${padded} `;
     })
     .join(bar);
   return `${bar}${body}${bar}`;
@@ -93,17 +97,18 @@ function resolveWidths(head, rows, width) {
 }
 
 export function renderTable({ 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, ["┌", "┬", "┐"], color)];
+  const lines = [borderLine(widths, ["┌", "┬", "┐"], level)];
   if (head.length > 0) {
-    lines.push(contentLine(fit(head), widths, { color, bold: true }));
-    lines.push(borderLine(widths, ["├", "┼", "┤"], color));
+    lines.push(contentLine(fit(head), widths, { level, bold: true }));
+    lines.push(borderLine(widths, ["├", "┼", "┤"], level));
   }
   for (const row of rows) {
-    lines.push(contentLine(fit(row), widths, { color }));
+    lines.push(contentLine(fit(row), widths, { level }));
   }
-  lines.push(borderLine(widths, ["└", "┴", "┘"], color));
+  lines.push(borderLine(widths, ["└", "┴", "┘"], level));
   return lines.join("\n");
 }
 
@@ -127,13 +132,15 @@ export function renderStatusTable({ head = [], row = [] } = {}, { color = false,
 
 // 章节标题：与 menu.js 分区分隔线风格一致
 export function renderSectionTitle(title, { color = false, width = 46 } = {}) {
+  const level = toLevel(color);
   const lead = "───";
   const label = ` ${title} `;
   const tail = "─".repeat(Math.max(4, width - lead.length - displayWidth(label)));
-  if (!color) {
+  if (!level) {
     return `${lead}${label}${tail}`;
   }
-  return `${BORDER_COLOR}${lead}${RESET}${BOLD}${HEAD_COLOR}${label}${RESET}${BORDER_COLOR}${tail}${RESET}`;
+  const c = palette(level);
+  return `${c.border}${lead}${RESET}${BOLD}${c.head}${label}${RESET}${c.border}${tail}${RESET}`;
 }
 
 // ──────────────────────────────────────────────
@@ -142,18 +149,20 @@ export function renderSectionTitle(title, { color = false, width = 46 } = {}) {
 
 // 页面标题区：品牌名 + 当前页面名，统一边框样式
 export function renderHeader(title, { subtitle = "", color = false } = {}) {
+  const level = toLevel(color);
+  const c = level ? palette(level) : null;
   const label = `Claude360 CLI · ${title}`;
   const inner = Math.max(cellWidth(label), cellWidth(subtitle)) + 2;
   const line = (text) => {
     const body = ` ${padCell(text, inner - 2)} `;
-    if (!color) {
+    if (!level) {
       return `│${body}│`;
     }
-    return `${BORDER_COLOR}│${RESET}${BOLD}${HEAD_COLOR}${body}${RESET}${BORDER_COLOR}│${RESET}`;
+    return `${c.border}│${RESET}${BOLD}${c.head}${body}${RESET}${c.border}│${RESET}`;
   };
   const edge = (left, right) => {
     const text = `${left}${"─".repeat(inner)}${right}`;
-    return color ? `${BORDER_COLOR}${text}${RESET}` : text;
+    return level ? `${c.border}${text}${RESET}` : text;
   };
   const lines = [edge("┌", "┐"), line(label)];
   if (subtitle) {
@@ -165,15 +174,20 @@ export function renderHeader(title, { subtitle = "", color = false } = {}) {
 
 // 信息盒子：info / warn / error / success 四种状态，
 // 颜色只增强层级，状态始终有文字前缀（需求二「不依赖颜色表达唯一信息」）
-const BOX_KINDS = {
-  info: { mark: "i", color: fg(125, 211, 252) },
-  warn: { mark: "!", color: fg(250, 204, 21) },
-  error: { mark: "×", color: fg(248, 113, 113) },
-  success: { mark: "✓", color: fg(74, 222, 128) },
+// 四种状态：文字前缀（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],
 };
 
 export function renderBox(message, { kind = "info", color = false, width = 0 } = {}) {
-  const { mark, color: kindColor } = BOX_KINDS[kind] || BOX_KINDS.info;
+  const level = toLevel(color);
+  const mark = BOX_MARKS[kind] || BOX_MARKS.info;
+  const [r, g, b] = BOX_RGB[kind] || BOX_RGB.info;
+  const kindColor = fg(r, g, b, level);
   const rawLines = String(message ?? "").split("\n");
   const textLines = rawLines.map((line, index) => (index === 0 ? `${mark} ${line}` : `  ${line}`));
   const maxAvailable = width > 4 ? width - 4 : 0;
@@ -181,12 +195,12 @@ export function renderBox(message, { kind = "info", color = false, width = 0 } =
   const inner = Math.max(...fitted.map((line) => cellWidth(line))) + 2;
   const edge = (left, right) => {
     const text = `${left}${"─".repeat(inner)}${right}`;
-    return color ? `${kindColor}${text}${RESET}` : text;
+    return level ? `${kindColor}${text}${RESET}` : text;
   };
   const lines = [edge("┌", "┐")];
   for (const line of fitted) {
     const body = ` ${padCell(line, inner - 2)} `;
-    lines.push(color ? `${kindColor}│${RESET}${body}${kindColor}│${RESET}` : `│${body}│`);
+    lines.push(level ? `${kindColor}│${RESET}${body}${kindColor}│${RESET}` : `│${body}│`);
   }
   lines.push(edge("└", "┘"));
   return lines.join("\n");