mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
169f218f7a
- Improved the reading of the discovery index by adding a fallback mechanism to scan directories for discovery folders if the index.json is invalid or missing. - Added sorting of discoveries by creation time in descending order. - Enhanced the `appendToIssuesJsonl` function to include deduplication logic for issues based on ID and source finding ID. - Updated the discovery route handler to reflect the number of issues added and skipped during export. - Introduced UI elements for selecting and deselecting findings in the dashboard. - Added CSS styles for exported findings and action buttons. - Implemented search functionality for filtering findings based on title, file, and description. - Added internationalization support for new UI elements. - Created scripts for automated API extraction from various project types, including FastAPI and TypeScript. - Documented the API extraction process and library bundling instructions.
133 lines
3.4 KiB
Markdown
133 lines
3.4 KiB
Markdown
# Phase 5: HTML Assembly
|
||
|
||
使用 `universal-executor` 子 Agent 生成最终 HTML，避免主 Agent 内存溢出。
|
||
|
||
## 核心原则
|
||
|
||
**主 Agent 负责编排，子 Agent 负责繁重计算。**
|
||
|
||
## 执行流程
|
||
|
||
```javascript
|
||
const config = JSON.parse(Read(`${workDir}/manual-config.json`));
|
||
|
||
// 委托给 universal-executor 执行 HTML 组装
|
||
const result = Task({
|
||
subagent_type: 'universal-executor',
|
||
run_in_background: false,
|
||
prompt: buildAssemblyPrompt(config, workDir)
|
||
});
|
||
|
||
const buildResult = JSON.parse(result);
|
||
```
|
||
|
||
## Prompt 构建
|
||
|
||
```javascript
|
||
function buildAssemblyPrompt(config, workDir) {
|
||
return `
|
||
[ROLE] HTML Assembler
|
||
|
||
[TASK]
|
||
生成 TiddlyWiki 风格的交互式 HTML 手册（使用成熟库，无外部 CDN 依赖）
|
||
|
||
[INPUT]
|
||
- 模板: .claude/skills/software-manual/templates/tiddlywiki-shell.html
|
||
- CSS: .claude/skills/software-manual/templates/css/wiki-base.css, wiki-dark.css
|
||
- 配置: ${workDir}/manual-config.json
|
||
- 章节: ${workDir}/sections/section-*.md
|
||
- Agent 结果: ${workDir}/agent-results.json (含 tag 信息)
|
||
- 截图: ${workDir}/screenshots/
|
||
|
||
[LIBRARIES TO EMBED]
|
||
1. marked.js (v14+) - Markdown 转 HTML
|
||
- 从 https://unpkg.com/marked/marked.min.js 获取内容内嵌
|
||
2. highlight.js (v11+) - 代码语法高亮
|
||
- 核心 + 常用语言包 (js, ts, python, bash, json, yaml, html, css)
|
||
- 使用 github-dark 主题
|
||
|
||
[STEPS]
|
||
1. 读取 HTML 模板和 CSS
|
||
2. 内嵌 marked.js 和 highlight.js 代码
|
||
3. 读取 agent-results.json 提取各章节 tag
|
||
4. 动态生成 {{TAG_BUTTONS_HTML}} (基于实际使用的 tags)
|
||
5. 逐个读取 section-*.md，使用 marked 转换为 HTML
|
||
6. 为代码块添加 data-language 属性和语法高亮
|
||
7. 处理 <!-- SCREENSHOT: id="..." --> 标记，嵌入 Base64 图片
|
||
8. 生成目录、搜索索引
|
||
9. 组装最终 HTML，写入 ${workDir}/${config.software.name}-使用手册.html
|
||
|
||
[CONTENT FORMATTING]
|
||
- 代码块: 深色背景 + 语言标签 + 语法高亮
|
||
- 表格: 蓝色表头 + 边框 + 悬停效果
|
||
- 内联代码: 红色高亮
|
||
- 列表: 有序/无序样式增强
|
||
- 左侧导航: 固定侧边栏 + TOC
|
||
|
||
[RETURN JSON]
|
||
{
|
||
"status": "completed",
|
||
"output_file": "${config.software.name}-使用手册.html",
|
||
"file_size": "<size>",
|
||
"sections_count": <n>,
|
||
"tags_generated": [],
|
||
"screenshots_embedded": <n>
|
||
}
|
||
`;
|
||
}
|
||
```
|
||
|
||
## Agent 职责
|
||
|
||
1. **读取模板** → HTML + CSS
|
||
2. **转换章节** → Markdown → HTML tiddlers
|
||
3. **嵌入截图** → Base64 编码
|
||
4. **生成索引** → 搜索数据
|
||
5. **组装输出** → 单文件 HTML
|
||
|
||
## Markdown 转换规则
|
||
|
||
Agent 内部实现：
|
||
|
||
```
|
||
# H1 → <h1>
|
||
## H2 → <h2>
|
||
### H3 → <h3>
|
||
```code``` → <pre><code>
|
||
**bold** → <strong>
|
||
*italic* → <em>
|
||
[text](url) → <a href>
|
||
- item → <li>
|
||
<!-- SCREENSHOT: id="xxx" --> → <figure><img src="data:..."></figure>
|
||
```
|
||
|
||
## Tiddler 结构
|
||
|
||
```html
|
||
<article class="tiddler" id="tiddler-{name}" data-tags="..." data-difficulty="...">
|
||
<header class="tiddler-header">
|
||
<h2><button class="collapse-toggle">▼</button> {title}</h2>
|
||
<div class="tiddler-meta">{badges}</div>
|
||
</header>
|
||
<div class="tiddler-content">{html}</div>
|
||
</article>
|
||
```
|
||
|
||
## 输出
|
||
|
||
- `{软件名}-使用手册.html` - 最终 HTML
|
||
- `build-report.json` - 构建报告
|
||
|
||
## 质量门禁
|
||
|
||
- [ ] HTML 渲染正确
|
||
- [ ] 搜索功能可用
|
||
- [ ] 折叠/展开正常
|
||
- [ ] 主题切换持久化
|
||
- [ ] 截图显示正确
|
||
- [ ] 文件大小 < 10MB
|
||
|
||
## 下一阶段
|
||
|
||
→ [Phase 6: Iterative Refinement](06-iterative-refinement.md)
|