命令行进度条配置工具Skill cli-progress-bar-setup

---

名称: cli-progress-bar-setup 描述: 配置cli-progress，支持自定义格式化器、多进度条和ETA计算，用于命令行进度指示。 允许工具: Read, Write, Edit, Bash, Glob, Grep

CLI进度条设置

配置cli-progress以实现高级进度指示功能。

功能

• 配置单进度条和多进度条
• 创建自定义进度条格式化器
• 设置ETA（预计完成时间）计算
• 实现载荷数据显示
• 创建进度条预设模板
• 生成进度工具函数

使用场景

在以下情况下调用此技能：

• 显示下载/上传进度
• 展示多任务进度
• 创建自定义进度格式
• 实现ETA计算

输入参数

参数	类型	必填	描述
language	string	是	目标编程语言
format	string	否	进度条格式模板
presets	array	否	进度条预设模板

生成模式

TypeScript进度工具函数

import cliProgress, { SingleBar, MultiBar, Presets } from 'cli-progress';
import chalk from 'chalk';

// 带颜色的自定义格式
const defaultFormat = chalk.cyan('{bar}') +
  ' {percentage}% | ETA: {eta}s | {value}/{total} | {filename}';

// 创建单进度条
export function createProgressBar(options?: {
  format?: string;
  barSize?: number;
}): SingleBar {
  return new SingleBar({
    format: options?.format || defaultFormat,
    barCompleteChar: '\u2588',
    barIncompleteChar: '\u2591',
    barsize: options?.barSize || 40,
    hideCursor: true,
    clearOnComplete: false,
    stopOnComplete: true,
  }, Presets.shades_classic);
}

// 多进度条用于并行任务
export function createMultiBar(): MultiBar {
  return new MultiBar({
    format: '{name} |' + chalk.cyan('{bar}') + '| {percentage}% | {value}/{total}',
    barCompleteChar: '\u2588',
    barIncompleteChar: '\u2591',
    hideCursor: true,
    clearOnComplete: false,
    stopOnComplete: false,
  }, Presets.shades_grey);
}

// 带速度显示的下载进度条
export function createDownloadBar(): SingleBar {
  return new SingleBar({
    format: '下载中 |' + chalk.cyan('{bar}') +
      '| {percentage}% | {speed} MB/s | {value}/{total} MB',
    barCompleteChar: '\u2588',
    barIncompleteChar: '\u2591',
    barsize: 30,
    formatValue: (value, options, type) => {
      if (type === 'value' || type === 'total') {
        return (value / 1024 / 1024).toFixed(2);
      }
      return String(value);
    },
  }, Presets.shades_classic);
}

// 异步操作包装器
export async function withProgress<T>(
  total: number,
  fn: (update: (current: number, payload?: Record<string, any>) => void) => Promise<T>,
  options?: { format?: string }
): Promise<T> {
  const bar = createProgressBar(options);
  bar.start(total, 0);

  try {
    const result = await fn((current, payload) => {
      bar.update(current, payload);
    });
    bar.stop();
    return result;
  } catch (error) {
    bar.stop();
    throw error;
  }
}

// 带进度显示的批量处理
export async function processBatch<T, R>(
  items: T[],
  processor: (item: T, index: number) => Promise<R>,
  options?: { label?: string }
): Promise<R[]> {
  const bar = createProgressBar({
    format: `${options?.label || '处理中'} |{bar}| {percentage}% | {value}/{total}`,
  });

  bar.start(items.length, 0);
  const results: R[] = [];

  for (let i = 0; i < items.length; i++) {
    results.push(await processor(items[i], i));
    bar.update(i + 1);
  }

  bar.stop();
  return results;
}

// 带多进度条的并行处理
export async function processParallel<T, R>(
  tasks: Array<{
    name: string;
    items: T[];
    processor: (item: T) => Promise<R>;
  }>
): Promise<Map<string, R[]>> {
  const multiBar = createMultiBar();
  const bars = new Map<string, SingleBar>();
  const results = new Map<string, R[]>();

  // 为每个任务创建进度条
  for (const task of tasks) {
    const bar = multiBar.create(task.items.length, 0, { name: task.name.padEnd(15) });
    bars.set(task.name, bar);
    results.set(task.name, []);
  }

  // 并行处理所有任务
  await Promise.all(tasks.map(async (task) => {
    const bar = bars.get(task.name)!;
    const taskResults = results.get(task.name)!;

    for (let i = 0; i < task.items.length; i++) {
      taskResults.push(await task.processor(task.items[i]));
      bar.update(i + 1);
    }
  }));

  multiBar.stop();
  return results;
}

依赖项

{
  "dependencies": {
    "cli-progress": "^3.12.0",
    "chalk": "^5.0.0"
  },
  "devDependencies": {
    "@types/cli-progress": "^3.11.0"
  }
}

目标流程

• 进度状态指示器
• 命令行输出格式化
• 命令行应用引导