pdd-skills 3.0.0

package/lib/vm/tui/components/card.js

@@ -0,0 +1,339 @@
+/**
+ * PDD Visual Manager - Card 卡片组件 (VM-C014)
+ *
+ * 提供带边框的面板容器：
+ * - InfoCard: 键值对信息卡片
+ * - 双卡片并排布局
+ * - 可自定义边框风格和颜色
+ * - 支持标题、页脚
+ * - 响应式宽度适配
+ *
+ * 使用 Unicode 圆角/直角边框字符绘制。
+ */
+
+import { ANSI, BORDER_CHARS } from '../renderer.js';
+
+/**
+ * Card - 通用卡片组件
+ *
+ * 带边框的内容容器，可用于组织 UI 布局中的各个区块。
+ */
+class Card {
+  /**
+   * 创建卡片实例
+   * @param {string} title - 卡片标题
+   * @param {string|string[]} content - 内容（字符串或行数组）
+   * @param {Object} options - 配置选项
+   */
+  constructor(title = '', content = '', options = {}) {
+    /** @type {string} 标题 */
+    this.title = title;
+
+    /** @type {string[]} 内容行数组 */
+    this.contentLines = typeof content === 'string'
+      ? content.split('\n')
+      : (Array.isArray(content) ? content : ['']);
+
+    /** @type {Object} 选项 */
+    this.options = {
+      width: 0,                 // 宽度 (0=自适应)
+      borderColor: null,        // 边框颜色
+      titleColor: ANSI.BOLD + ANSI.CYAN,  // 标题颜色
+      footer: '',               // 页脚文字
+      borderStyle: 'rounded',   // 边框风格 ('single'|'double'|'rounded')
+      padding: { x: 2, y: 1 },  // 内边距
+      ...options
+    };
+  }
+
+  /**
+   * 渲染卡片
+   * @returns {string} 格式化的卡片字符串
+   */
+  render() {
+    const opts = this.options;
+    const c = BORDER_CHARS[opts.borderStyle] || BORDER_CHARS.rounded;
+
+    // 确定实际宽度
+    const contentWidth = this._calcContentWidth();
+    const totalWidth = contentWidth + opts.padding.x * 2;
+    const innerWidth = totalWidth - 2; // 减去两边边框
+
+    const lines = [];
+
+    // 顶边框（可能包含标题）
+    lines.push(this._renderTopBorder(c, totalWidth));
+
+    // 上内边距
+    for (let i = 0; i < opts.padding.y; i++) {
+      lines.push(`${c.v}${' '.repeat(innerWidth)}${c.v}`);
+    }
+
+    // 内容行
+    for (const rawLine of this.contentLines) {
+      const padded = this._padLine(rawLine, innerWidth);
+      lines.push(`${c.v} ${padded} ${c.v}`);
+    }
+
+    // 下内边距
+    for (let i = 0; i < opts.padding.y; i++) {
+      lines.push(`${c.v}${' '.repeat(innerWidth)}${c.v}`);
+    }
+
+    // 页脚（如果存在）
+    if (opts.footer) {
+      const footerPadded = this._padLine(opts.footer, innerWidth);
+      lines.push(`${c.v} ${ANSI.DIM}${footerPadded}${ANSI.RESET} ${c.v}`);
+    }
+
+    // 底边框
+    lines.push(`${c.bl}${c.h.repeat(innerWidth)}${c.br}`);
+
+    return lines.join('\n');
+  }
+
+  /**
+   * 渲染顶边框（带标题）
+   * @param {Object} c - 边框字符
+   * @param {number} totalWidth - 总宽度
+   * @returns {string}
+   * @private
+   */
+  _renderTopBorder(c, totalWidth) {
+    const innerWidth = totalWidth - 2;
+
+    if (!this.title) {
+      return `${c.tl}${c.h.repeat(innerWidth)}${c.tr}`;
+    }
+
+    // 标题格式: "── title ──"
+    const titleStr = ` ${this.title} `;
+    const titleWidth = this._strWidth(titleStr);
+
+    if (titleWidth >= innerWidth) {
+      // 标题太长，截断
+      const truncated = this._truncate(this.title, innerWidth - 4);
+      return `${c.tl}─ ${truncated} ─${c.tr}`;
+    }
+
+    const before = Math.floor((innerWidth - titleWidth) / 2);
+    const after = innerWidth - titleWidth - before;
+
+    const titleColored = `${this.options.titleColor}${titleStr}${ANSI.RESET}`;
+    return `${c.tl}${c.h.repeat(before)}${titleColored}${c.h.repeat(after)}${c.tr}`;
+  }
+
+  /**
+   * 计算内容所需宽度
+   * @returns {number}
+   * @private
+   */
+  _calcContentWidth() {
+    if (this.options.width > 0) {
+      return this.options.width;
+    }
+
+    let maxW = 0;
+    for (const line of this.contentLines) {
+      const w = this._strWidth(line);
+      if (w > maxW) maxW = w;
+    }
+    if (this.title) {
+      const titleW = this._strWidth(this.title) + 2; // 加上两边空格
+      if (titleW > maxW) maxW = titleW;
+    }
+    if (this.options.footer) {
+      const footerW = this._strWidth(this.options.footer);
+      if (footerW > maxW) maxW = footerW;
+    }
+
+    return Math.max(maxW + 2, 10); // 最小宽度 10
+  }
+
+  /**
+   * 填充行到指定宽度
+   * @param {string} line - 原始行
+   * @param {number} width - 目标宽度
+   * @returns {string}
+   * @private
+   */
+  _padLine(line, width) {
+    const lineW = this._strWidth(line);
+    if (lineW >= width) {
+      return this._truncate(line, width);
+    }
+    return line + ' '.repeat(width - lineW);
+  }
+
+  /**
+   * 截断文本
+   * @param {string} text - 文本
+   * @param {number} maxLen - 最大宽度
+   * @returns {string}
+   * @private
+   */
+  _truncate(text, maxLen) {
+    if (this._strWidth(text) <= maxLen) return text;
+    let result = '';
+    let w = 0;
+    for (const ch of text) {
+      const cw = this._strWidth(ch);
+      if (w + cw > maxLen - 1) break;
+      result += ch;
+      w += cw;
+    }
+    return result + '…';
+  }
+
+  /**
+   * 计算字符串显示宽度
+   * @param {string} text
+   * @returns {number}
+   * @private
+   */
+  _strWidth(text) {
+    let w = 0;
+    for (const ch of String(text)) {
+      w += ch.charCodeAt(0) > 0xff ? 2 : 1;
+    }
+    return w;
+  }
+
+  // ============================================================
+  // 静态工厂方法
+  // ============================================================
+
+  /**
+   * 创建信息卡片（键值对列表）
+   * @param {string} title - 标题
+   * @param {Array<{label: string, value: string, color?: string}>} items - 键值对数组
+   * @param {Object} cardOpts - 卡片选项
+   * @returns {string} 渲染后的卡片
+   */
+  static info(title, items = [], cardOpts = {}) {
+    const lines = items.map(item => {
+      const valueColor = item.color || '';
+      const valueSuffix = item.value;
+      const formatted = valueColor
+        ? `${item.label}: ${valueColor}${valueSuffix}${ANSI.RESET}`
+        : `${item.label}: ${valueSuffix}`;
+      return formatted;
+    });
+
+    const card = new Card(title, lines, {
+      borderStyle: 'rounded',
+      ...cardOpts
+    });
+    return card.render();
+  }
+
+  /**
+   * 创建双卡片并排布局
+   * @param {Card} leftCard - 左侧卡片
+   * @param {Card} rightCard - 右侧卡片
+   * @param {number} spacing - 间距
+   * @returns {string} 并排的两个卡片
+   */
+  static sideBySide(leftCard, rightCard, spacing = 4) {
+    const leftLines = leftCard.render().split('\n');
+    const rightLines = rightCard.render().split('\n');
+
+    const maxRows = Math.max(leftLines.length, rightLines.length);
+    const spacer = ' '.repeat(spacing);
+    const result = [];
+
+    for (let i = 0; i < maxRows; i++) {
+      const left = i < leftLines.length ? leftLines[i] : ' '.repeat(leftLines[0]?.length || 0);
+      const right = i < rightLines.length ? rightLines[i] : ' '.repeat(rightLines[0]?.length || 0);
+      result.push(`${left}${spacer}${right}`);
+    }
+
+    return result.join('\n');
+  }
+
+  /**
+   * 创建三卡片横向布局
+   * @param {Card[]} cards - 卡片数组 (最多3个)
+   * @param {number} spacing - 间距
+   * @returns {string}
+   */
+  static triple(cards, spacing = 2) {
+    if (!cards || cards.length === 0) return '';
+
+    const renderedCards = cards.map(c => c.render().split('\n'));
+    const maxRows = Math.max(...renderedCards.map(lines => lines.length));
+    const result = [];
+
+    for (let row = 0; row < maxRows; row++) {
+      const parts = renderedCards.map((lines, idx) => {
+        const line = row < lines.length ? lines[row] : '';
+        // 补齐宽度
+        const refWidth = lines[0] ? lines[0].length : 0;
+        return line.padEnd(refWidth);
+      });
+      result.push(parts.join(' '.repeat(spacing)));
+    }
+
+    return result.join('\n');
+  }
+
+  /**
+   * 创建指标卡片（大数字+标签）
+   * @param {string} label - 标签
+   * @param {string|number} value - 值
+   * @param {string} unit - 单位
+   * @param {Object} opts - 选项
+   * @returns {string}
+   */
+  static metric(label, value, unit = '', opts = {}) {
+    const valueColor = opts.valueColor || ANSI.BOLD + ANSI.CYAN;
+    const valueStr = `${valueColor}${value}${ANSI.RESET}${unit ? ' ' + unit : ''}`;
+
+    const content = [
+      '',
+      `  ${valueStr}`,
+      `  ${ANSI.DIM}${label}${ANSI.RESET}`,
+      ''
+    ];
+
+    const card = new Card(opts.title || '', content, {
+      borderStyle: 'rounded',
+      titleColor: opts.titleColor || ANSI.DIM,
+      width: opts.width || 0,
+      ...opts
+    });
+    return card.render();
+  }
+
+  /**
+   * 创建警告/错误提示卡片
+   * @param {string} message - 消息内容
+   * @param {string} type - 类型 ('warn'|'error'|'info')
+   * @param {Object} opts - 选项
+   * @returns {string}
+   */
+  static alert(message, type = 'info', opts = {}) {
+    const typeConfig = {
+      warn: { icon: '⚠', color: ANSI.BRIGHT_YELLOW, title: '警告' },
+      error: { icon: '✖', color: ANSI.BRIGHT_RED, title: '错误' },
+      info: { icon: 'ℹ', color: ANSI.BLUE, title: '信息' }
+    };
+
+    const cfg = typeConfig[type] || typeConfig.info;
+    const content = [
+      '',
+      `  ${cfg.color}${cfg.icon}  ${message}${ANSI.RESET}`,
+      ''
+    ];
+
+    const card = new Card(cfg.title, content, {
+      borderStyle: 'single',
+      titleColor: cfg.color,
+      borderColor: cfg.color,
+      ...opts
+    });
+    return card.render();
+  }
+}
+
+export default Card;

package/lib/vm/tui/components/progress-bar.js

@@ -0,0 +1,368 @@
+/**
+ * PDD Visual Manager - 进度条组件 (VM-C010)
+ *
+ * 提供多种风格的进度条渲染：
+ * - 水平进度条（默认）
+ * - 分段进度条
+ * - 环形进度条（ASCII艺术）
+ * - 带颜色渐变的智能进度条
+ * - 支持动画效果标记
+ *
+ * 纯 Unicode 字符绘制，零依赖。
+ */
+
+import { ANSI } from '../renderer.js';
+
+/**
+ * 进度条填充字符集
+ */
+const BAR_CHARS = {
+  filled: '█',
+  empty: '░',
+  partial: ['▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'],
+  thinFilled: '▓',
+  thinEmpty: '░'
+};
+
+/**
+ * 根据百分比获取颜色
+ * @param {number} pct - 百分比 (0-100)
+ * @returns {string} ANSI 颜色码
+ */
+function getColorForPercent(pct) {
+  if (pct >= 90) return ANSI.BRIGHT_GREEN;
+  if (pct >= 70) return ANSI.GREEN;
+  if (pct >= 50) return ANSI.BRIGHT_YELLOW;
+  if (pct >= 30) return ANSI.YELLOW;
+  if (pct >= 15) return ANSI.BRIGHT_RED;
+  return ANSI.RED;
+}
+
+/**
+ * 获取等级颜色
+ * @param {string} grade - 等级 (S/A/B/C/D/F)
+ * @returns {string}
+ */
+function getGradeColor(grade) {
+  const colors = {
+    'S': ANSI.BRIGHT_GREEN,
+    'A': ANSI.GREEN,
+    'B': ANSI.BRIGHT_YELLOW,
+    'C': ANSI.YELLOW,
+    'D': ANSI.BRIGHT_RED,
+    'F': ANSI.RED
+  };
+  return colors[grade] || ANSI.DIM;
+}
+
+/**
+ * ProgressBar - 进度条组件
+ *
+ * 支持多种显示风格和配置选项的通用进度条。
+ */
+class ProgressBar {
+  /**
+   * 创建进度条实例
+   * @param {number} value - 当前值
+   * @param {number} max - 最大值
+   * @param {number} width - 进度条字符宽度
+   * @param {Object} options - 配置选项
+   */
+  constructor(value = 0, max = 100, width = 20, options = {}) {
+    /** @type {number} 当前值 */
+    this.value = value;
+
+    /** @type {number} 最大值 */
+    this.max = max;
+
+    /** @type {number} 显示宽度 */
+    this.width = Math.max(1, width);
+
+    /** @type {Object} 选项 */
+    this.options = {
+      style: 'horizontal',     // horizontal | segmented | ring
+      filledChar: '█',
+      emptyChar: '░',
+      showLabel: true,
+      showPercent: true,
+      label: '',
+      color: null,             // 自定义颜色，null 表示自动
+      animate: false,
+      ...options
+    };
+  }
+
+  /**
+   * 计算当前百分比
+   * @returns {number}
+   */
+  get percent() {
+    if (this.max <= 0) return 0;
+    return Math.min(100, Math.max(0, Math.round((this.value / this.max) * 100)));
+  }
+
+  /**
+   * 更新进度值
+   * @param {number} newValue - 新值
+   * @returns {ProgressBar} this（链式调用）
+   */
+  update(newValue) {
+    this.value = newValue;
+    return this;
+  }
+
+  /**
+   * 渲染水平进度条
+   * @returns {string}
+   */
+  render() {
+    switch (this.options.style) {
+      case 'segmented':
+        return this._renderSegmented();
+      case 'ring':
+        return this._renderRing();
+      case 'vertical':
+        return this._renderVertical();
+      default:
+        return this._renderHorizontal();
+    }
+  }
+
+  /**
+   * 渲染标准水平进度条
+   * @returns {string}
+   * @private
+   */
+  _renderHorizontal() {
+    const pct = this.percent;
+    const w = this.width;
+    const opts = this.options;
+
+    // 选择颜色
+    const color = opts.color || getColorForPercent(pct);
+
+    // 计算填充长度
+    const exactFilled = (pct / 100) * w;
+    const filled = Math.floor(exactFilled);
+    const partial = exactFilled - filled;
+
+    // 构建进度条
+    let bar = opts.filledChar.repeat(filled);
+
+    // 部分填充字符
+    if (filled < w && partial > 0) {
+      const partialIndex = Math.floor(partial * 8);
+      bar += BAR_CHARS.partial[Math.min(partialIndex, 7)];
+    } else if (filled < w) {
+      // 无部分填充，直接接空字符
+    }
+
+    // 填充剩余空位
+    const remaining = w - this._displayWidth(bar);
+    if (remaining > 0) {
+      bar += opts.emptyChar.repeat(remaining);
+    }
+
+    // 截断到目标宽度
+    bar = bar.substring(0, w);
+
+    // 应用颜色
+    const coloredBar = `${color}${bar}${ANSI.RESET}`;
+
+    // 组装最终输出
+    let result = '';
+    if (opts.label && opts.showLabel) {
+      result += `${opts.label} `;
+    }
+    result += coloredBar;
+
+    if (opts.showPercent !== false) {
+      result += ` ${pct}%`;
+    }
+
+    return result;
+  }
+
+  /**
+   * 渲染分段进度条
+   * 用于多段式进度显示，如 S/A/B/C/D/F 分布
+   * @param {Array<{value:number,label:string,color?:string}>} segments - 段定义
+   * @returns {string}
+   */
+  renderSegmented(segments) {
+    if (!segments || segments.length === 0) {
+      return this.render(); // 回退到默认渲染
+    }
+
+    const total = segments.reduce((sum, s) => sum + s.value, 0);
+    const w = this.width;
+
+    let result = '';
+    let remainingWidth = w;
+
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const segPct = total > 0 ? (seg.value / total) : 0;
+      const segWidth = Math.max(1, Math.round(segPct * w));
+      const clampedWidth = Math.min(segWidth, remainingWidth);
+
+      if (clampedWidth <= 0) continue;
+
+      const color = seg.color || getColorForPercent(segPct * 100);
+      const char = this.options.filledChar.repeat(clampedWidth);
+      result += `${color}${char}${ANSI.RESET}`;
+
+      // 段标签（如果空间足够）
+      if (seg.label && clampedWidth >= 3) {
+        const label = seg.label.substring(0, clampedWidth);
+        result = result.substring(0, result.length - clampedWidth);
+        result += `${color}${this._centerText(label, clampedWidth)}${ANSI.RESET}`;
+      }
+
+      remainingWidth -= clampedWidth;
+    }
+
+    // 填充剩余空间
+    if (remainingWidth > 0) {
+      result += this.options.emptyChar.repeat(remainingWidth);
+    }
+
+    return result;
+  }
+
+  /**
+   * 内部分段渲染方法
+   * @returns {string}
+   * @private
+   */
+  _renderSegmented() {
+    // 默认使用百分比分段
+    const pct = this.percent;
+    const segments = [];
+
+    if (pct >= 80) segments.push({ value: pct - 80, color: ANSI.BRIGHT_GREEN });
+    if (pct >= 60) segments.push({ value: Math.min(pct, 80) - 60, color: ANSI.GREEN });
+    if (pct >= 40) segments.push({ value: Math.min(pct, 60) - 40, color: ANSI.YELLOW });
+    if (pct >= 20) segments.push({ value: Math.min(pct, 40) - 20, color: ANSI.BRIGHT_RED });
+    if (pct > 0) segments.push({ value: Math.min(pct, 20), color: ANSI.RED });
+
+    if (segments.length === 0) {
+      segments.push({ value: 100 - pct, color: ANSI.DIM });
+    }
+
+    return this.renderSegmented(segments);
+  }
+
+  /**
+   * 渲染环形/圆形进度指示器（ASCII 艺术）
+   * 使用 Unicode 字符模拟环形效果
+   * @returns {string}
+   * @private
+   */
+  _renderRing() {
+    const pct = this.percent;
+    const color = this.options.color || getColorForPercent(pct);
+
+    // 简化的环形表示：使用括号和填充
+    // 格式: [██████░░] 75%
+    const ringChars = '╭─╮││╰─╯';
+    const innerBar = this._renderHorizontal();
+
+    // 多行环形显示
+    const lines = [
+      `  ${ringChars[0]}${'─'.repeat(this.width + 2)}${ringChars[1]}`,
+      `${ringChars[3]} ${innerBar} ${ringChars[4]}`,
+      `  ${ringChars[5]}${'─'.repeat(this.width + 2)}${ringChars[6]}`
+    ];
+
+    return lines.join('\n');
+  }
+
+  /**
+   * 渲染垂直进度条
+   * @returns {string}
+   * @private
+   */
+  _renderVertical() {
+    const pct = this.percent;
+    const h = this.width; // 用 width 作为高度
+    const color = this.options.color || getColorForPercent(pct);
+    const filled = Math.round((pct / 100) * h);
+
+    let bar = '';
+    for (let i = 0; i < h; i++) {
+      if (i < h - filled) {
+        bar += `${this.options.emptyChar}\n`;
+      } else {
+        bar += `${color}${this.options.filledChar}${ANSI.RESET}\n`;
+      }
+    }
+
+    if (this.options.showPercent) {
+      bar += `${pct}%\n`;
+    }
+
+    return bar.trimEnd();
+  }
+
+  /**
+   * 创建等级进度条（用于质量评分）
+   * @param {string} grade - 等级 (S/A/B/C/D/F)
+   * @param {number} score - 分数
+   * @param {number} width - 宽度
+   * @returns {string}
+   */
+  static gradeBar(grade, score, width = 10) {
+    const color = getGradeColor(grade);
+    const pct = Math.min(100, Math.max(0, score));
+    const filled = Math.round((pct / 100) * width);
+
+    const bar = '█'.repeat(filled) + '░'.repeat(width - filled);
+    return `${color}${bar}${ANSI.RESET} ${grade}`;
+  }
+
+  /**
+   * 创建迷你进度条（紧凑型）
+   * @param {number} pct - 百分比
+   * @param {number} width - 宽度
+   * @returns {string}
+   */
+  static mini(pct, width = 8) {
+    const pb = new ProgressBar(pct, 100, width, {
+      showPercent: false,
+      showLabel: false
+    });
+    return pb.render();
+  }
+
+  /**
+   * 计算字符串显示宽度（简化版）
+   * @param {string} str
+   * @returns {number}
+   * @private
+   */
+  _displayWidth(str) {
+    let w = 0;
+    for (const ch of str) {
+      w += ch.charCodeAt(0) > 0xff ? 2 : 1;
+    }
+    return w;
+  }
+
+  /**
+   * 文本居中
+   * @param {string} text
+   * @param {number} width
+   * @returns {string}
+   * @private
+   */
+  _centerText(text, width) {
+    const len = text.length; // 简化：假设 ASCII
+    if (len >= width) return text.substring(0, width);
+    const pad = width - len;
+    return ' '.repeat(Math.floor(pad / 2)) + text + ' '.repeat(Math.ceil(pad / 2));
+  }
+}
+
+export default ProgressBar;
+export { BAR_CHARS, getColorForPercent, getGradeColor };