| name | scan-to-report |
| description | 扫描项目代码模块并生成符合金融科技风格的技术文档报告。基于《四组-技术文档规范.md》的设计规范，生成包含系统架构、核心模块、API参考、安全系统等章节的HTML报告。Use when用户需要分析代码模块并生成技术文档报告，或提到"扫描"、"生成报告"、"技术文档"等关键词。 |
Scan to Report - 代码扫描报告生成
概述
本 Skill 用于扫描项目中的代码模块，分析其架构和实现，并生成符合金融科技风格的技术文档HTML报告。
设计规范来源
- 设计规范:
/Users/jeccey/Project/ira/四组-技术文档规范.md
- 示例报告:
/Users/jeccey/Project/ira/copaw-dingtalk-report.html
- 风格: 现代金融科技风格（参考南方基金官网）
核心能力
- 扫描代码模块结构和关键文件
- 分析系统架构、数据流、核心功能
- 生成符合规范的HTML技术报告
- 支持自定义报告标题和章节
使用流程
Step 1: 分析用户需求
确定以下信息：
- 扫描目标: 需要扫描的代码目录或模块路径
- 报告主题: 技术报告的主题名称
- 报告范围: 需要包含的章节（默认全部）
Step 2: 扫描代码模块
执行代码扫描，收集以下信息：
扫描清单:
- [ ] 模块目录结构
- [ ] 核心代码文件（主要类/函数）
- [ ] 配置文件和常量定义
- [ ] 依赖和接口定义
- [ ] 注释和文档字符串
Step 3: 分析架构
基于扫描结果分析：
- 系统架构和模块划分
- 核心类和它们的关系
- 数据流和消息流转
- 关键功能实现
Step 4: 生成报告
按照设计规范生成HTML报告，包含以下章节：
报告结构:
1. 项目概述（定位、技术栈、术语）
2. 系统架构（架构图、模块划分、类关系）
3. 核心模块（详细设计、代码示例）
4. 数据流分析（入站/出站流程）
5. 功能特性（消息类型、企业级功能）
6. API参考（核心方法、常量定义）
7. 安全系统（认证、访问控制、数据安全）
8. 配置管理（配置示例、环境变量）
9. 部署运维（前置条件、监控指标、常见问题）
10. 总结（核心优势、技术亮点、改进建议）
设计规范要求
颜色系统
必须使用以下品牌色：
--color-brand-red: #E72521;
--color-brand-blue: #004098;
--color-dark-blue: #0B264A;
--color-white: #FFFFFF;
--color-dark-gray: #333333;
--color-text: #222222;
--color-gray: #888888;
--color-light-bg: #EFF4F9;
--color-light-blue: #E5F8FD;
字体规范
--font-family: -apple-system, "system-ui", "Segoe UI", system-ui,
Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif,
"PingFang SC", "Microsoft YaHei",
"Helvetica Neue", Helvetica, Arial;
H1: 36px | 500 | #FFFFFF (Hero区域)
H2: 28px | 500 | #333333 | 下边距15px | 底部边框2px solid #004098
H3: 20px | 500 | #333333
正文: 16px | 400 | #222222 | 行高1.8
小文本: 14px | 400 | #888888
间距规范
--spacing-page: 131.67px;
--spacing-lg: 60px;
--spacing-md: 40px;
--spacing-sm: 30px;
--spacing-xs: 20px;
组件样式
信息卡片
.info-card {
background: #EFF4F9;
padding: 24px;
margin: 20px 0;
border-radius: 8px;
border-left: 4px solid #004098;
}
.info-card.warning {
border-left-color: #E72521;
background: #FFF5F5;
}
.info-card.success {
border-left-color: #10B981;
background: #F0FDF4;
}
代码块
.code-block {
background: #0B264A;
color: #FFFFFF;
padding: 20px;
border-radius: 8px;
font-family: "Consolas", "Monaco", monospace;
font-size: 14px;
line-height: 1.6;
}
表格
.data-table th {
background: #004098;
color: #FFFFFF;
padding: 14px 16px;
}
.data-table td {
padding: 12px 16px;
border-bottom: 1px solid #E5E7EB;
}
.data-table tr:nth-child(even) {
background: #EFF4F9;
}
按钮/标签
.tag {
display: inline-block;
background: #004098;
color: #FFFFFF;
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
margin-right: 8px;
}
.tag.red { background: #E72521; }
.tag.green { background: #10B981; }
HTML报告模板结构
页面布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
</head>
<body>
<header class="header">
<div class="logo">项目名称 <span>技术报告</span></div>
<nav class="nav-links">...</nav>
</header>
<section class="hero">
<h1>报告标题</h1>
<p class="hero-subtitle">副标题</p>
<div class="hero-meta">
<span>📅 生成时间</span>
<span>📁 项目路径</span>
<span>🔖 版本</span>
</div>
</section>
<main class="main-content">
<nav class="toc">...</nav>
<div class="stats-grid">...</div>
<section class="section" id="overview">...</section>
<section class="section" id="architecture">...</section>
</main>
<footer class="footer">...</footer>
</body>
</html>
响应式设计
@media (max-width: 1024px) {
:root { --spacing-page: 40px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.hero h1 { font-size: 28px; }
.stats-grid { grid-template-columns: 1fr; }
}
报告内容规范
1. 项目概述
必须包含：
- 模块定位: 一句话描述模块的核心作用
- 核心能力: 用 bullet points 列出 3-5 个关键能力
- 技术栈: 表格形式（组件、版本、用途）
- 术语定义: 表格形式（术语、定义）
2. 系统架构
必须包含：
- 整体架构图: 使用 flow-box 和 flow-arrow 展示
- 模块划分: file-list 展示核心文件
- 类关系图: code-block 展示类继承和依赖关系
3. 核心模块
必须包含：
- 核心类详解: 属性表格、方法说明
- 消息处理流程: 代码块展示关键流程
- 功能特性: info-card 或 file-list 展示
4. 数据流分析
必须包含：
- 入站消息流: 架构图展示
- 出站消息流: 表格对比不同方式
- 关键数据结构: code-block 展示
5. 功能特性
必须包含：
- 支持的功能列表: file-list 展示
- 企业级功能: info-card 分组展示
- 配置参数: data-table 展示
6. API参考
必须包含：
- 核心方法: code-block 展示方法签名和注释
- 常量定义: data-table 展示
7. 安全系统
必须包含：
- 认证机制: code-block 展示流程
- 访问控制: info-card.warning 展示策略
- 数据安全: data-table 展示
8. 配置管理
必须包含：
- 配置示例: code-block 展示 JSON/YAML
- 环境变量: data-table 展示
9. 部署运维
必须包含：
- 前置条件: info-card 展示步骤
- 监控指标: data-table 展示
- 常见问题: info-card.warning 展示 Q&A
10. 总结
必须包含：
- 核心优势: file-list 展示 4 个优势
- 技术亮点: bullet points 展示
- 改进建议: info-card 展示未来方向
执行步骤
当用户使用此 Skill 时，按以下步骤执行：
Step 1: 确认扫描目标
询问或确认：
- 需要扫描的代码目录路径
- 报告的主题名称
- 输出文件路径（可选，默认使用
{主题}-report.html）
Step 2: 执行代码扫描
使用工具扫描代码：
list_dir 查看目录结构read_file 读取核心文件grep_code 搜索关键模式- 记录文件数量、代码行数等统计数据
Step 3: 分析并生成报告
基于扫描结果：
- 提取关键类和函数
- 分析架构关系
- 整理配置参数
- 编写各章节内容
Step 4: 输出HTML报告
使用 create_file 生成HTML文件，确保：
- 完整包含所有CSS样式
- 符合设计规范的颜色和间距
- 响应式布局
- 正确的章节锚点链接
示例
输入
扫描 copaw/src/copaw/app/channels/dingtalk/ 目录，生成钉钉消息推送模块的技术报告
输出
生成文件：copaw-dingtalk-report.html
报告包含：
- 统计概览（8个核心文件、2,956行代码等）
- 完整的10个章节
- 符合金融科技风格的视觉设计
- 响应式布局支持
注意事项
- 颜色一致性: 严格使用规范中的品牌色，不要自行调配
- 字体一致性: 所有中文内容使用系统字体栈
- 间距规范性: 使用标准间距值（60px、40px、20px等）
- 代码可读性: 代码块使用语法高亮，关键部分加注释
- 响应式设计: 确保在移动设备上也能正常显示
- 文件大小: 单个HTML文件应控制在合理范围内（< 2MB）
