feat(ccw): 添加 ccw tool exec 工具系统

新增工具: - edit_file: AI辅助文件编辑 (update/line模式) - get_modules_by_depth: 项目结构分析 - update_module_claude: CLAUDE.md文档生成 - generate_module_docs: 模块文档生成 - detect_changed_modules: Git变更检测 - classify_folders: 文件夹分类 - discover_design_files: 设计文件发现 - convert_tokens_to_css: 设计token转CSS - ui_generate_preview: UI预览生成 - ui_instantiate_prototypes: 原型实例化使用方式: ccw tool list # 列出所有工具 ccw tool exec <name> '{}' # 执行工具 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-10 02:24:35 +08:00 · 2025-12-08 21:10:31 +08:00
parent 813bfa8f97
commit 91e4792aa9
18 changed files with 3332 additions and 73 deletions
--- a/ccw/src/tools/ui-generate-preview.js
+++ b/ccw/src/tools/ui-generate-preview.js
@@ -0,0 +1,327 @@
+/**
+ * UI Generate Preview Tool
+ * Generate compare.html and index.html for UI prototypes
+ */
+
+import { readdirSync, existsSync, readFileSync, writeFileSync } from 'fs';
+import { resolve, basename } from 'path';
+
+/**
+ * Auto-detect matrix dimensions from file patterns
+ * Pattern: {target}-style-{s}-layout-{l}.html
+ */
+function detectMatrixDimensions(prototypesDir) {
+  const files = readdirSync(prototypesDir).filter(f => f.match(/.*-style-\d+-layout-\d+\.html$/));
+
+  const styles = new Set();
+  const layouts = new Set();
+  const targets = new Set();
+
+  files.forEach(file => {
+    const styleMatch = file.match(/-style-(\d+)-/);
+    const layoutMatch = file.match(/-layout-(\d+)\.html/);
+    const targetMatch = file.match(/^(.+)-style-/);
+
+    if (styleMatch) styles.add(parseInt(styleMatch[1]));
+    if (layoutMatch) layouts.add(parseInt(layoutMatch[1]));
+    if (targetMatch) targets.add(targetMatch[1]);
+  });
+
+  return {
+    styles: Math.max(...Array.from(styles)),
+    layouts: Math.max(...Array.from(layouts)),
+    targets: Array.from(targets).sort()
+  };
+}
+
+/**
+ * Load template from file
+ */
+function loadTemplate(templatePath) {
+  const defaultPath = resolve(
+    process.env.HOME || process.env.USERPROFILE,
+    '.claude/workflows/_template-compare-matrix.html'
+  );
+
+  const path = templatePath || defaultPath;
+
+  if (!existsSync(path)) {
+    // Return minimal fallback template
+    return `<!DOCTYPE html>
+<html>
+<head><title>UI Prototypes Comparison</title></head>
+<body>
+<h1>UI Prototypes Matrix</h1>
+<p>Styles: {{style_variants}} | Layouts: {{layout_variants}}</p>
+<p>Pages: {{pages_json}}</p>
+<p>Generated: {{timestamp}}</p>
+</body>
+</html>`;
+  }
+
+  return readFileSync(path, 'utf8');
+}
+
+/**
+ * Generate compare.html from template
+ */
+function generateCompareHtml(template, metadata) {
+  const { runId, sessionId, timestamp, styles, layouts, targets } = metadata;
+
+  const pagesJson = JSON.stringify(targets);
+
+  return template
+    .replace(/\{\{run_id\}\}/g, runId)
+    .replace(/\{\{session_id\}\}/g, sessionId)
+    .replace(/\{\{timestamp\}\}/g, timestamp)
+    .replace(/\{\{style_variants\}\}/g, styles.toString())
+    .replace(/\{\{layout_variants\}\}/g, layouts.toString())
+    .replace(/\{\{pages_json\}\}/g, pagesJson);
+}
+
+/**
+ * Generate index.html
+ */
+function generateIndexHtml(metadata) {
+  const { styles, layouts, targets } = metadata;
+  const total = styles * layouts * targets.length;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Prototypes Index</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background: #f5f5f5;
+        }
+        h1 { margin-bottom: 10px; color: #333; }
+        .subtitle { color: #666; margin-bottom: 30px; }
+        .cta {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .cta h2 { margin-bottom: 10px; }
+        .cta a {
+            display: inline-block;
+            background: white;
+            color: #667eea;
+            padding: 10px 20px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 600;
+            margin-top: 10px;
+        }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 30px;
+        }
+        .stat {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-label { font-size: 0.85em; color: #666; margin-bottom: 5px; }
+        .stat-value { font-size: 1.5em; font-weight: bold; color: #333; }
+        .files {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .files h2 { margin-bottom: 15px; color: #333; }
+        .file-list { list-style: none; }
+        .file-list li {
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        .file-list li:last-child { border-bottom: none; }
+        .file-list a {
+            color: #667eea;
+            text-decoration: none;
+        }
+        .file-list a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <h1>UI Prototypes</h1>
+    <p class="subtitle">Interactive design exploration matrix</p>
+
+    <div class="cta">
+        <h2>📊 Interactive Comparison</h2>
+        <p>View all prototypes side-by-side with synchronized scrolling</p>
+        <a href="compare.html">Open Comparison Matrix →</a>
+    </div>
+
+    <div class="stats">
+        <div class="stat">
+            <div class="stat-label">Style Variants</div>
+            <div class="stat-value">${styles}</div>
+        </div>
+        <div class="stat">
+            <div class="stat-label">Layout Variants</div>
+            <div class="stat-value">${layouts}</div>
+        </div>
+        <div class="stat">
+            <div class="stat-label">Pages/Components</div>
+            <div class="stat-value">${targets.length}</div>
+        </div>
+        <div class="stat">
+            <div class="stat-label">Total Prototypes</div>
+            <div class="stat-value">${total}</div>
+        </div>
+    </div>
+
+    <div class="files">
+        <h2>Individual Prototypes</h2>
+        <ul class="file-list">
+${targets.map(target => {
+  const items = [];
+  for (let s = 1; s <= styles; s++) {
+    for (let l = 1; l <= layouts; l++) {
+      const filename = `${target}-style-${s}-layout-${l}.html`;
+      items.push(`            <li><a href="${filename}">${filename}</a></li>`);
+    }
+  }
+  return items.join('\n');
+}).join('\n')}
+        </ul>
+    </div>
+</body>
+</html>`;
+}
+
+/**
+ * Generate PREVIEW.md
+ */
+function generatePreviewMd(metadata) {
+  const { styles, layouts, targets } = metadata;
+
+  return `# UI Prototypes Preview
+
+## Matrix Dimensions
+
+- **Style Variants**: ${styles}
+- **Layout Variants**: ${layouts}
+- **Pages/Components**: ${targets.join(', ')}
+- **Total Prototypes**: ${styles * layouts * targets.length}
+
+## Quick Start
+
+1. **Interactive Comparison**: Open \`compare.html\` for side-by-side view with synchronized scrolling
+2. **Browse Index**: Open \`index.html\` for a navigable list of all prototypes
+3. **Individual Files**: Access specific prototypes directly (e.g., \`${targets[0]}-style-1-layout-1.html\`)
+
+## File Naming Convention
+
+\`\`\`
+{page}-style-{s}-layout-{l}.html
+\`\`\`
+
+- **page**: Component/page name (${targets.join(', ')})
+- **s**: Style variant number (1-${styles})
+- **l**: Layout variant number (1-${layouts})
+
+## Tips
+
+- Use compare.html for quick visual comparison across all variants
+- Synchronized scrolling helps identify consistency issues
+- Check responsive behavior across different layout variants
+`;
+}
+
+/**
+ * Main execute function
+ */
+async function execute(params) {
+  const { prototypesDir = '.', template: templatePath } = params;
+
+  const targetPath = resolve(process.cwd(), prototypesDir);
+
+  if (!existsSync(targetPath)) {
+    throw new Error(`Directory not found: ${targetPath}`);
+  }
+
+  // Auto-detect matrix dimensions
+  const { styles, layouts, targets } = detectMatrixDimensions(targetPath);
+
+  if (styles === 0 || layouts === 0 || targets.length === 0) {
+    throw new Error('No prototype files found matching pattern {target}-style-{s}-layout-{l}.html');
+  }
+
+  // Generate metadata
+  const metadata = {
+    runId: `run-${new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)}`,
+    sessionId: 'standalone',
+    timestamp: new Date().toISOString(),
+    styles,
+    layouts,
+    targets
+  };
+
+  // Load template
+  const template = loadTemplate(templatePath);
+
+  // Generate files
+  const compareHtml = generateCompareHtml(template, metadata);
+  const indexHtml = generateIndexHtml(metadata);
+  const previewMd = generatePreviewMd(metadata);
+
+  // Write files
+  writeFileSync(resolve(targetPath, 'compare.html'), compareHtml, 'utf8');
+  writeFileSync(resolve(targetPath, 'index.html'), indexHtml, 'utf8');
+  writeFileSync(resolve(targetPath, 'PREVIEW.md'), previewMd, 'utf8');
+
+  return {
+    success: true,
+    prototypes_dir: prototypesDir,
+    styles,
+    layouts,
+    targets,
+    total_prototypes: styles * layouts * targets.length,
+    files_generated: ['compare.html', 'index.html', 'PREVIEW.md']
+  };
+}
+
+/**
+ * Tool Definition
+ */
+export const uiGeneratePreviewTool = {
+  name: 'ui_generate_preview',
+  description: `Generate interactive preview files for UI prototypes.
+Generates:
+- compare.html: Interactive matrix view with synchronized scrolling
+- index.html: Navigation and statistics
+- PREVIEW.md: Usage guide
+
+Auto-detects matrix dimensions from file pattern: {target}-style-{s}-layout-{l}.html`,
+  parameters: {
+    type: 'object',
+    properties: {
+      prototypesDir: {
+        type: 'string',
+        description: 'Prototypes directory path (default: current directory)',
+        default: '.'
+      },
+      template: {
+        type: 'string',
+        description: 'Optional path to compare.html template'
+      }
+    },
+    required: []
+  },
+  execute
+};