组件脚手架生成器
根据组件描述自动生成符合项目规范的组件代码。
工作流程
1. 技术栈识别
读取 package.json 自动判断，然后按对应技术栈生成代码。
2. 项目规范探测
在生成代码前，先探测项目的现有规范：
- 目录结构：扫描
src/components/或src/pages/的目录组织方式 - 命名规范：检查现有组件是 PascalCase 目录还是 kebab-case
- 文件组织：单文件组件 vs 目录组件（index.tsx + styles + types）
- 导入风格：绝对路径（
@/components）vs 相对路径 - 状态管理：Redux/Zustand/Pinia/Vuex
- 样式方案：CSS Modules / styled-components / Tailwind / sx prop
3. 信息收集
向用户确认：
- 组件名称：英文，如
UserTable、LoginForm - 组件类型：
- 页面组件（Page） - 业务组件（Business） - 共通/原子组件（Common/Atom）
- 主要功能描述：一句话说明组件做什么
- Props 概述（可选）：主要输入参数
4. 生成代码
按技术栈选择对应模板，参见：
- React 模板：references/react-patterns.md
- Vue 3 模板：references/vue-patterns.md
5. 生成内容清单
根据组件类型，生成以下文件：
| 文件 | 页面组件 | 业务组件 | 共通组件 |
|---|---|---|---|
| 组件主文件 | ✅ | ✅ | ✅ |
| 类型定义 | ✅ | ✅ | ✅ |
| 样式文件（如需） | ✅ | 可选 | 可选 |
| index 导出 | ✅ | ✅ | ✅ |
重要原则
- 遵循项目现有规范：探测到的规范优先于默认模板
- 最小生成：只生成必要的文件，不过度设计
- 类型优先：所有 props 和 state 必须有 TypeScript 类型定义
- 无业务假设：生成骨架代码，不预设业务逻辑