命令行界面样式系统Skill chalk-styling-system

---

名称: chalk样式系统 描述: 为CLI输出创建基于chalk的一致颜色和样式系统，包含主题、语义颜色和格式化工具。 允许工具: 读取、写入、编辑、Bash、Glob、Grep

Chalk样式系统

为CLI输出创建一致的基于chalk的样式。

能力

• 创建颜色主题系统
• 定义语义颜色工具
• 设置文本格式化助手
• 实现条件样式
• 创建框和边框工具
• 生成样式文档

使用场景

在以下情况调用此技能：

• 创建一致的CLI颜色方案
• 定义语义输出样式
• 构建格式化工具
• 支持多主题

输入参数

参数	类型	必填	描述
语言	字符串	是	目标语言
主题	对象	否	自定义颜色主题
工具	数组	否	所需格式化工具

生成模式

TypeScript样式系统

import chalk, { ChalkInstance } from 'chalk';

// 主题定义
export interface Theme {
  primary: string;
  secondary: string;
  success: string;
  warning: string;
  error: string;
  info: string;
  muted: string;
}

const defaultTheme: Theme = {
  primary: '#3498db',
  secondary: '#9b59b6',
  success: '#2ecc71',
  warning: '#f39c12',
  error: '#e74c3c',
  info: '#00bcd4',
  muted: '#95a5a6',
};

// 创建主题化chalk实例
export function createTheme(theme: Partial<Theme> = {}): {
  primary: ChalkInstance;
  secondary: ChalkInstance;
  success: ChalkInstance;
  warning: ChalkInstance;
  error: ChalkInstance;
  info: ChalkInstance;
  muted: ChalkInstance;
} {
  const t = { ...defaultTheme, ...theme };
  return {
    primary: chalk.hex(t.primary),
    secondary: chalk.hex(t.secondary),
    success: chalk.hex(t.success),
    warning: chalk.hex(t.warning),
    error: chalk.hex(t.error),
    info: chalk.hex(t.info),
    muted: chalk.hex(t.muted),
  };
}

// 默认样式输出
export const style = createTheme();

// 语义助手
export const log = {
  success: (msg: string) => console.log(style.success('✓ ') + msg),
  error: (msg: string) => console.error(style.error('✗ ') + msg),
  warning: (msg: string) => console.log(style.warning('⚠ ') + msg),
  info: (msg: string) => console.log(style.info('ℹ ') + msg),
  debug: (msg: string) => console.log(style.muted('⋯ ') + msg),
};

// 文本格式化
export const format = {
  bold: chalk.bold,
  dim: chalk.dim,
  italic: chalk.italic,
  underline: chalk.underline,
  strikethrough: chalk.strikethrough,
  code: (text: string) => chalk.bgGray.white(` ${text} `),
  link: (text: string, url: string) => chalk.blue.underline(text) + ` (${chalk.dim(url)})`,
};

// 框绘制
export function box(content: string, options?: {
  title?: string;
  padding?: number;
  borderColor?: string;
}): string {
  const lines = content.split('
');
  const maxWidth = Math.max(...lines.map(l => l.length), options?.title?.length || 0);
  const padding = options?.padding || 1;
  const borderColor = options?.borderColor || '#888';
  const border = chalk.hex(borderColor);

  const horizontalBorder = border('─'.repeat(maxWidth + padding * 2 + 2));
  const emptyLine = border('│') + ' '.repeat(maxWidth + padding * 2) + border('│');

  const result: string[] = [];

  // 带可选标题的顶部边框
  if (options?.title) {
    const titlePadding = Math.floor((maxWidth + padding * 2 - options.title.length) / 2);
    result.push(
      border('┌') +
      border('─'.repeat(titlePadding)) +
      ` ${options.title} ` +
      border('─'.repeat(maxWidth + padding * 2 - titlePadding - options.title.length - 2)) +
      border('┐')
    );
  } else {
    result.push(border('┌') + horizontalBorder.slice(1, -1) + border('┐'));
  }

  // 顶部填充
  for (let i = 0; i < padding; i++) {
    result.push(emptyLine);
  }

  // 内容
  for (const line of lines) {
    result.push(
      border('│') +
      ' '.repeat(padding) +
      line.padEnd(maxWidth) +
      ' '.repeat(padding) +
      border('│')
    );
  }

  // 底部填充
  for (let i = 0; i < padding; i++) {
    result.push(emptyLine);
  }

  // 底部边框
  result.push(border('└') + horizontalBorder.slice(1, -1) + border('┘'));

  return result.join('
');
}

// 表格格式化
export function table(
  headers: string[],
  rows: string[][],
  options?: { headerColor?: string }
): string {
  const headerColor = chalk.hex(options?.headerColor || '#3498db').bold;
  const colWidths = headers.map((h, i) =>
    Math.max(h.length, ...rows.map(r => (r[i] || '').length))
  );

  const headerRow = headers
    .map((h, i) => headerColor(h.padEnd(colWidths[i])))
    .join('  ');

  const separator = colWidths.map(w => '─'.repeat(w)).join('──');

  const dataRows = rows.map(row =>
    row.map((cell, i) => (cell || '').padEnd(colWidths[i])).join('  ')
  );

  return [headerRow, separator, ...dataRows].join('
');
}

依赖项

{
  "dependencies": {
    "chalk": "^5.0.0"
  }
}

目标流程

• cli输出格式化
• 错误处理用户反馈
• cli应用程序引导