xiao0916 Component Analyzer - 组件代码分析器
用于分析 React/Vue 组件代码，自动解析组件结构、构建依赖关系图、检测重复模式，并生成智能的拆分建议。
快速开始
基本使用
# 分析 React 组件目录（JSON 格式输出）
py -3 .claude/skills/component-analyzer/scripts/analyze_components.py \
--input ./react-components \
--output ./analysis-report.json
# Markdown 格式报告
py -3 .claude/skills/component-analyzer/scripts/analyze_components.py \
--input ./react-components \
--format markdown
与 psd-component-splitter 配合使用
# 第一步：PSD 拆分为组件
py -3 .claude/skills/psd-component-splitter/scripts/split_components.py \
--json layer-tree.json --images sliced-images/ \
--out ./split-components/ --framework react
# 第二步：分析生成的组件
py -3 .claude/skills/component-analyzer/scripts/analyze_components.py \
--input ./split-components/ --output ./component-analysis.json
命令行参数
| 参数 | 简写 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
--input |
-i |
✅ | - | 组件目录路径 |
--output |
-o |
❌ | stdout | 输出文件路径 |
--format |
-f |
❌ | json |
输出格式：json 或 markdown |
--framework |
- | ❌ | react |
框架：react 或 vue |
--threshold |
-t |
❌ | 0.7 |
相似度阈值（0.0-1.0） |
--verbose |
-v |
❌ | - | 显示详细进度 |
核心功能
1. 组件结构分析
- 解析 Import/Export 语句
- 提取 Props 签名
- 分析 JSX 元素结构
- 检测 CSS Module 使用
2. 依赖图构建
- 扫描目录收集组件
- 解析组件间依赖关系
- 检测循环依赖
- 识别入口组件
3. 重复模式检测
- Props 签名相似性（40%）
- JSX 结构相似性（40%）
- CSS Module 使用（20%）
- 层次聚类算法分组
4. 智能拆分建议
- 提取子组件 - 识别可复用的重复 JSX
- 合并组件 - 发现可合并的相似组件
- Props 重构 - 统一组件接口
- 样式分离 - 提取共享样式
- 架构优化 - 检测深层嵌套
输出示例
JSON 格式
{
"summary": {
"total_components": 12,
"patterns_detected": 4,
"suggestions_count": 8
},
"dependency_graph": {
"nodes": [...],
"edges": [...]
},
"patterns": [...],
"suggestions": [...]
}
Markdown 格式
包含概览统计、详细建议列表、依赖图可视化。
模块说明
scripts/
analyze_components.py- CLI 入口，整合所有功能react_ast_parser.py- React 组件 AST 解析（正则实现）dependency_graph.py- 依赖图构建与循环依赖检测pattern_detector.py- 相似度计算与模式检测split_suggester.py- 拆分建议生成与格式化输出
实现细节
详见 references/IMPLEMENTATION.md 了解：
- 相似度计算算法
- 正则表达式解析模式
- 数据结构定义
- 扩展开发指南
局限性
- 解析能力：使用正则表达式，不支持完整 AST
- 框架支持：主要支持 React，Vue 支持有限
- 相似度计算：基于特征匹配，语义分析能力有限
- 性能：大型项目（>100 组件）分析可能较慢
前置依赖
- Python 3.6+
- 输入：已生成的 React/Vue 组件目录