claude-code-workflow 6.3.24 → 6.3.26

package/.claude/skills/text-formatter/phases/03-format-transform.md

@@ -0,0 +1,245 @@
+# Phase 3: Format Transform
+
+将内容转换为 BBCode + Markdown 混合格式（论坛优化）。
+
+## Objective
+
+- 根据分析结果转换内容
+- 应用像素级字号规则
+- 处理 Callout/标注语法
+- 生成论坛兼容的输出
+
+## Input
+
+- 依赖: `input-config.json`, `analysis.json`
+- 规范: `specs/format-rules.md`, `specs/element-mapping.md`
+
+## Format Specification
+
+### Size Hierarchy (Pixels)
+
+| Element | Size | Color | Usage |
+|---------|------|-------|-------|
+| **H1** | 150 | #2196F3 | 文档主标题 |
+| **H2** | 120 | #2196F3 | 章节标题 |
+| **H3** | 100 | #333 | 子标题 |
+| **H4+** | (默认) | - | 仅加粗 |
+| **Notes** | 80 | gray | 备注/元数据 |
+
+### Unsupported Tags (禁止使用)
+
+| Tag | Reason | Alternative |
+|-----|--------|-------------|
+| `[align]` | 不渲染 | 删除，使用默认左对齐 |
+| `[hr]` | 显示为文本 | 使用 Markdown `---` |
+| `[table]` | 支持有限 | 转为列表或代码块 |
+| HTML tags | 不支持 | 仅使用 BBCode |
+
+## Execution Steps
+
+### Step 1: 加载配置和分析
+
+```javascript
+const config = JSON.parse(Read(`${workDir}/input-config.json`));
+const analysis = JSON.parse(Read(`${workDir}/analysis.json`));
+const content = config.original_content;
+```
+
+### Step 2: Callout 配置
+
+```javascript
+// Callout 类型映射（像素级字号）
+const CALLOUT_CONFIG = {
+  // 信息类
+  note: { icon: '📝', color: '#2196F3', label: '注意' },
+  info: { icon: 'ℹ️', color: '#2196F3', label: '信息' },
+  abstract: { icon: '📄', color: '#2196F3', label: '摘要' },
+  summary: { icon: '📄', color: '#2196F3', label: '摘要' },
+  tldr: { icon: '📄', color: '#2196F3', label: '摘要' },
+
+  // 成功/提示类
+  tip: { icon: '💡', color: '#4CAF50', label: '提示' },
+  hint: { icon: '💡', color: '#4CAF50', label: '提示' },
+  success: { icon: '✅', color: '#4CAF50', label: '成功' },
+  check: { icon: '✅', color: '#4CAF50', label: '完成' },
+  done: { icon: '✅', color: '#4CAF50', label: '完成' },
+
+  // 警告类
+  warning: { icon: '⚠️', color: '#FF9800', label: '警告' },
+  caution: { icon: '⚠️', color: '#FF9800', label: '注意' },
+  attention: { icon: '⚠️', color: '#FF9800', label: '注意' },
+  question: { icon: '❓', color: '#FF9800', label: '问题' },
+  help: { icon: '❓', color: '#FF9800', label: '帮助' },
+  faq: { icon: '❓', color: '#FF9800', label: 'FAQ' },
+  todo: { icon: '📋', color: '#FF9800', label: '待办' },
+
+  // 错误/危险类
+  danger: { icon: '❌', color: '#F44336', label: '危险' },
+  error: { icon: '❌', color: '#F44336', label: '错误' },
+  bug: { icon: '🐛', color: '#F44336', label: 'Bug' },
+  important: { icon: '⭐', color: '#F44336', label: '重要' },
+
+  // 其他
+  example: { icon: '📋', color: '#9C27B0', label: '示例' },
+  quote: { icon: '💬', color: 'gray', label: '引用' },
+  cite: { icon: '💬', color: 'gray', label: '引用' }
+};
+
+// Callout 检测正则 (支持 +/- 折叠标记)
+const CALLOUT_PATTERN = /^>\s*\[!(\w+)\][+-]?(?:\s+(.+))?$/;
+```
+
+### Step 3: Callout 解析器
+
+```javascript
+function parseCallouts(text) {
+  const lines = text.split('\n');
+  const result = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const match = lines[i].match(CALLOUT_PATTERN);
+    if (match) {
+      const type = match[1].toLowerCase();
+      const title = match[2] || null;
+      const content = [];
+      i++;
+
+      // 收集 Callout 内容行
+      while (i < lines.length && lines[i].startsWith('>')) {
+        content.push(lines[i].replace(/^>\s*/, ''));
+        i++;
+      }
+
+      result.push({
+        isCallout: true,
+        type,
+        title,
+        content: content.join('\n')
+      });
+    } else {
+      result.push({ isCallout: false, line: lines[i] });
+      i++;
+    }
+  }
+
+  return result;
+}
+```
+
+### Step 4: BBCode+MD 转换器
+
+```javascript
+function formatBBCodeMD(text) {
+  let result = text;
+
+  // ===== 标题转换 (像素级字号) =====
+  result = result.replace(/^######\s*(.+)$/gm, '[b]$1[/b]');
+  result = result.replace(/^#####\s*(.+)$/gm, '[b]$1[/b]');
+  result = result.replace(/^####\s*(.+)$/gm, '[b]$1[/b]');
+  result = result.replace(/^###\s*(.+)$/gm, '[size=100][color=#333][b]$1[/b][/color][/size]');
+  result = result.replace(/^##\s*(.+)$/gm, '[size=120][color=#2196F3][b]$1[/b][/color][/size]');
+  result = result.replace(/^#\s*(.+)$/gm, '[size=150][color=#2196F3][b]$1[/b][/color][/size]');
+
+  // ===== 文本样式 =====
+  result = result.replace(/\*\*\*(.+?)\*\*\*/g, '[b][i]$1[/i][/b]');
+  result = result.replace(/\*\*(.+?)\*\*/g, '[b]$1[/b]');
+  result = result.replace(/__(.+?)__/g, '[b]$1[/b]');
+  result = result.replace(/\*(.+?)\*/g, '[i]$1[/i]');
+  result = result.replace(/_(.+?)_/g, '[i]$1[/i]');
+  result = result.replace(/~~(.+?)~~/g, '[s]$1[/s]');
+  result = result.replace(/==(.+?)==/g, '[color=yellow]$1[/color]');
+
+  // ===== HTML 转 BBCode =====
+  result = result.replace(/<mark>(.+?)<\/mark>/g, '[color=yellow]$1[/color]');
+  result = result.replace(/<u>(.+?)<\/u>/g, '[u]$1[/u]');
+  result = result.replace(/<details>\s*<summary>(.+?)<\/summary>\s*([\s\S]*?)<\/details>/g,
+    '[spoiler=$1]$2[/spoiler]');
+
+  // ===== 代码 =====
+  result = result.replace(/```(\w*)\n([\s\S]*?)```/g, '[code]$2[/code]');
+  // 行内代码保持原样 (部分论坛不支持 font=monospace)
+
+  // ===== 链接和图片 =====
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '[url=$2]$1[/url]');
+  result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '[img]$2[/img]');
+
+  // ===== 引用 (非 Callout) =====
+  result = result.replace(/^>\s+(.+)$/gm, '[quote]$1[/quote]');
+
+  // ===== 列表 (使用 • 符号) =====
+  result = result.replace(/^[-*+]\s+(.+)$/gm, '• $1');
+
+  // ===== 分隔线 (保持 Markdown 语法) =====
+  // `---` 在混合格式中通常可用，不转换为 [hr]
+
+  return result.trim();
+}
+```
+
+### Step 5: Callout 转换
+
+```javascript
+function convertCallouts(text) {
+  const parsed = parseCallouts(text);
+
+  return parsed.map(item => {
+    if (item.isCallout) {
+      const cfg = CALLOUT_CONFIG[item.type] || CALLOUT_CONFIG.note;
+      const displayTitle = item.title || cfg.label;
+
+      // 使用 [quote] 包裹，标题使用 size=100
+      return `[quote]
+[size=100][color=${cfg.color}][b]${cfg.icon} ${displayTitle}[/b][/color][/size]
+
+${item.content}
+[/quote]`;
+    }
+    return item.line;
+  }).join('\n');
+}
+```
+
+### Step 6: 执行转换
+
+```javascript
+// 1. 先处理 Callouts
+let formattedContent = convertCallouts(content);
+
+// 2. 再进行通用 BBCode+MD 转换
+formattedContent = formatBBCodeMD(formattedContent);
+
+// 3. 清理多余空行
+formattedContent = formattedContent.replace(/\n{3,}/g, '\n\n');
+```
+
+### Step 7: 保存转换结果
+
+```javascript
+const outputFile = 'output.bbcode.txt';
+Write(`${workDir}/${outputFile}`, formattedContent);
+
+// 更新配置
+config.output_file = outputFile;
+config.formatted_content = formattedContent;
+Write(`${workDir}/input-config.json`, JSON.stringify(config, null, 2));
+```
+
+## Output
+
+- **File**: `output.bbcode.txt`
+- **Format**: BBCode + Markdown 混合格式
+
+## Quality Checklist
+
+- [ ] 标题使用像素值 (150/120/100)
+- [ ] 未使用 `[align]` 标签
+- [ ] 未使用 `[hr]` 标签
+- [ ] 分隔线使用 `---`
+- [ ] Callout 正确转换为 [quote]
+- [ ] 颜色值使用 hex 格式
+- [ ] 内容完整无丢失
+
+## Next Phase
+
+→ [Phase 4: Output & Preview](04-output-preview.md)

package/.claude/skills/text-formatter/phases/04-output-preview.md

@@ -0,0 +1,183 @@
+# Phase 4: Output & Preview
+
+输出最终结果并提供预览。
+
+## Objective
+
+- 保存格式化后的内容到文件
+- 提供预览功能
+- 显示转换统计信息
+
+## Input
+
+- 依赖: `input-config.json`, `output.*`
+- 配置: `{workDir}/input-config.json`
+
+## Execution Steps
+
+### Step 1: 加载结果
+
+```javascript
+const config = JSON.parse(Read(`${workDir}/input-config.json`));
+const analysis = JSON.parse(Read(`${workDir}/analysis.json`));
+const outputFile = `${workDir}/${config.output_file}`;
+const formattedContent = Read(outputFile);
+```
+
+### Step 2: 生成统计摘要
+
+```javascript
+const summary = {
+  input: {
+    method: config.input_method,
+    original_length: config.original_content.length,
+    word_count: config.original_content.split(/\s+/).length
+  },
+  output: {
+    format: config.target_format,
+    file: outputFile,
+    length: formattedContent.length
+  },
+  elements: analysis.stats,
+  reading_time: analysis.semantics?.estimated_reading_time || 1
+};
+
+console.log(`
+╔════════════════════════════════════════════════════════════════╗
+║                     Text Formatter Summary                      ║
+╠════════════════════════════════════════════════════════════════╣
+║  Input:  ${summary.input.word_count} words (${summary.input.original_length} chars)
+║  Output: ${summary.output.format} → ${summary.output.file}
+║  Elements Converted:
+║    • Headings: ${summary.elements.headings}
+║    • Paragraphs: ${summary.elements.paragraphs}
+║    • Lists: ${summary.elements.lists}
+║    • Code Blocks: ${summary.elements.code_blocks}
+║    • Links: ${summary.elements.links}
+║  Estimated Reading Time: ${summary.reading_time} min
+╚════════════════════════════════════════════════════════════════╝
+`);
+```
+
+### Step 3: HTML 预览（如适用）
+
+```javascript
+if (config.target_format === 'HTML') {
+  // 生成完整 HTML 文件用于预览
+  const previewHtml = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Formatter Preview</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.6;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    .content {
+      background: white;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    h1, h2, h3, h4, h5, h6 { color: #333; margin-top: 1.5em; }
+    code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
+    pre { background: #282c34; color: #abb2bf; padding: 1rem; border-radius: 6px; overflow-x: auto; }
+    pre code { background: none; padding: 0; }
+    blockquote { border-left: 4px solid #ddd; margin: 0; padding-left: 1rem; color: #666; }
+    a { color: #0066cc; }
+    img { max-width: 100%; }
+    hr { border: none; border-top: 1px solid #ddd; margin: 2rem 0; }
+  </style>
+</head>
+<body>
+  <div class="content">
+    ${formattedContent}
+  </div>
+</body>
+</html>`;
+
+  Write(`${workDir}/preview.html`, previewHtml);
+
+  // 可选：在浏览器中打开预览
+  // Bash(`start "${workDir}/preview.html"`);  // Windows
+  // Bash(`open "${workDir}/preview.html"`);   // macOS
+}
+```
+
+### Step 4: 显示输出内容
+
+```javascript
+// 显示格式化后的内容
+console.log('\n=== Formatted Content ===\n');
+console.log(formattedContent);
+console.log('\n=========================\n');
+
+// 提示用户
+console.log(`
+📁 Output saved to: ${outputFile}
+${config.target_format === 'HTML' ? '🌐 Preview available: ' + workDir + '/preview.html' : ''}
+
+💡 Tips:
+- Copy the content above for immediate use
+- Or access the saved file at the path shown
+`);
+```
+
+### Step 5: 询问后续操作
+
+```javascript
+const nextAction = await AskUserQuestion({
+  questions: [
+    {
+      question: "需要执行什么操作？",
+      header: "后续操作",
+      multiSelect: false,
+      options: [
+        { label: "完成", description: "结束格式化流程" },
+        { label: "转换为其他格式", description: "选择另一种输出格式" },
+        { label: "重新编辑", description: "修改原始内容后重新格式化" }
+      ]
+    }
+  ]
+});
+
+if (nextAction["后续操作"] === "转换为其他格式") {
+  // 返回 Phase 1 选择新格式
+  console.log('请重新运行 /text-formatter 选择其他格式');
+}
+```
+
+## Output
+
+- **File**: `output.{ext}` (最终输出)
+- **File**: `preview.html` (HTML 预览，仅 HTML 格式)
+- **Console**: 统计摘要和格式化内容
+
+## Final Output Structure
+
+```
+{workDir}/
+├── input-config.json     # 配置信息
+├── analysis.json         # 分析结果
+├── output.md             # Markdown 输出（如选择）
+├── output.bbcode.txt     # BBCode 输出（如选择）
+├── output.html           # HTML 输出（如选择）
+└── preview.html          # HTML 预览页面
+```
+
+## Quality Checklist
+
+- [ ] 输出文件已保存
+- [ ] 统计信息正确显示
+- [ ] 预览功能可用（HTML）
+- [ ] 用户可访问输出内容
+
+## Completion
+
+此为最终阶段，格式化流程完成。

package/.claude/skills/text-formatter/specs/callout-types.md

@@ -0,0 +1,293 @@
+# Callout Types
+
+Obsidian 风格的 Callout/Admonition 类型定义和转换规则。
+
+## When to Use
+
+| Phase | Usage | Section |
+|-------|-------|---------|
+| Phase 2 | 检测 Callout | Detection patterns |
+| Phase 3 | 格式转换 | Conversion rules |
+
+---
+
+## Callout 语法
+
+### Obsidian 原生语法
+
+```markdown
+> [!TYPE] 可选标题
+> 内容行1
+> 内容行2
+```
+
+### 支持的类型
+
+| Type | Alias | Icon | Color | 用途 |
+|------|-------|------|-------|------|
+| `note` | - | 📝 | blue | 普通提示 |
+| `info` | - | ℹ️ | blue | 信息说明 |
+| `tip` | `hint` | 💡 | green | 技巧提示 |
+| `success` | `check`, `done` | ✅ | green | 成功状态 |
+| `warning` | `caution`, `attention` | ⚠️ | orange | 警告信息 |
+| `danger` | `error` | ❌ | red | 危险/错误 |
+| `bug` | - | 🐛 | red | Bug 说明 |
+| `example` | - | 📋 | purple | 示例内容 |
+| `quote` | `cite` | 💬 | gray | 引用内容 |
+| `abstract` | `summary`, `tldr` | 📄 | cyan | 摘要 |
+| `question` | `help`, `faq` | ❓ | yellow | 问题/FAQ |
+| `todo` | - | 📌 | orange | 待办事项 |
+
+---
+
+## 检测 Pattern
+
+```javascript
+// Callout 检测正则
+const CALLOUT_PATTERN = /^>\s*\[!(\w+)\](?:\s+(.+))?$/;
+
+// 检测函数
+function detectCallout(line) {
+  const match = line.match(CALLOUT_PATTERN);
+  if (match) {
+    return {
+      type: match[1].toLowerCase(),
+      title: match[2] || null
+    };
+  }
+  return null;
+}
+
+// 解析完整 Callout 块
+function parseCalloutBlock(lines, startIndex) {
+  const firstLine = lines[startIndex];
+  const calloutInfo = detectCallout(firstLine);
+
+  if (!calloutInfo) return null;
+
+  const content = [];
+  let i = startIndex + 1;
+
+  while (i < lines.length && lines[i].startsWith('>')) {
+    content.push(lines[i].replace(/^>\s*/, ''));
+    i++;
+  }
+
+  return {
+    ...calloutInfo,
+    content: content.join('\n'),
+    endIndex: i - 1
+  };
+}
+```
+
+---
+
+## 转换规则
+
+### BBCode 转换
+
+```javascript
+const CALLOUT_BBCODE = {
+  note: {
+    icon: '📝',
+    color: '#2196F3',
+    label: '注意'
+  },
+  info: {
+    icon: 'ℹ️',
+    color: '#2196F3',
+    label: '信息'
+  },
+  tip: {
+    icon: '💡',
+    color: '#4CAF50',
+    label: '提示'
+  },
+  success: {
+    icon: '✅',
+    color: '#4CAF50',
+    label: '成功'
+  },
+  warning: {
+    icon: '⚠️',
+    color: '#FF9800',
+    label: '警告'
+  },
+  danger: {
+    icon: '❌',
+    color: '#F44336',
+    label: '危险'
+  },
+  bug: {
+    icon: '🐛',
+    color: '#F44336',
+    label: 'Bug'
+  },
+  example: {
+    icon: '📋',
+    color: '#9C27B0',
+    label: '示例'
+  },
+  quote: {
+    icon: '💬',
+    color: '#9E9E9E',
+    label: '引用'
+  },
+  question: {
+    icon: '❓',
+    color: '#FFEB3B',
+    label: '问题'
+  }
+};
+
+function calloutToBBCode(type, title, content, style = 'forum') {
+  const config = CALLOUT_BBCODE[type] || CALLOUT_BBCODE.note;
+  const displayTitle = title || config.label;
+
+  if (style === 'compact') {
+    return `[quote][b]${config.icon} ${displayTitle}[/b]
+${content}[/quote]`;
+  }
+
+  // Forum style - more visual
+  return `[quote]
+[color=${config.color}][size=4][b]${config.icon} ${displayTitle}[/b][/size][/color]
+
+${content}
+[/quote]`;
+}
+```
+
+### HTML 转换
+
+```javascript
+function calloutToHTML(type, title, content) {
+  const config = CALLOUT_BBCODE[type] || CALLOUT_BBCODE.note;
+  const displayTitle = title || config.label;
+
+  return `<div class="callout callout-${type}">
+  <div class="callout-title">
+    <span class="callout-icon">${config.icon}</span>
+    <span class="callout-title-text">${displayTitle}</span>
+  </div>
+  <div class="callout-content">
+    ${content}
+  </div>
+</div>`;
+}
+```
+
+### Hybrid 转换
+
+```javascript
+function calloutToHybrid(type, title, content) {
+  const config = CALLOUT_BBCODE[type] || CALLOUT_BBCODE.note;
+  const displayTitle = title || config.label;
+
+  // HTML container + BBCode styling + MD content
+  return `<div class="callout ${type}">
+
+[color=${config.color}][b]${config.icon} ${displayTitle}[/b][/color]
+
+${content}
+
+</div>`;
+}
+```
+
+---
+
+## Callout CSS 样式
+
+```css
+/* Base callout styles */
+.callout {
+  padding: 1rem;
+  margin: 1rem 0;
+  border-left: 4px solid;
+  border-radius: 4px;
+  background: #f8f9fa;
+}
+
+.callout-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.callout-icon {
+  font-size: 1.2em;
+}
+
+/* Type-specific colors */
+.callout-note, .callout-info {
+  border-color: #2196F3;
+  background: #E3F2FD;
+}
+
+.callout-tip, .callout-success {
+  border-color: #4CAF50;
+  background: #E8F5E9;
+}
+
+.callout-warning {
+  border-color: #FF9800;
+  background: #FFF3E0;
+}
+
+.callout-danger, .callout-bug {
+  border-color: #F44336;
+  background: #FFEBEE;
+}
+
+.callout-example {
+  border-color: #9C27B0;
+  background: #F3E5F5;
+}
+
+.callout-quote {
+  border-color: #9E9E9E;
+  background: #FAFAFA;
+}
+
+.callout-question {
+  border-color: #FFC107;
+  background: #FFFDE7;
+}
+```
+
+---
+
+## 折叠 Callout
+
+支持可折叠的 Callout 语法：
+
+```markdown
+> [!NOTE]+ 默认展开
+> 内容
+
+> [!NOTE]- 默认折叠
+> 内容
+```
+
+### BBCode 折叠
+
+```bbcode
+[collapse=📝 注意]
+内容
+[/collapse]
+```
+
+### HTML 折叠
+
+```html
+<details class="callout callout-note">
+  <summary>📝 注意</summary>
+  <div class="callout-content">
+    内容
+  </div>
+</details>
+```