前端组件生成器 frontend-component

前端组件生成器

生成带有TypeScript、测试和样式的React/Vue组件，遵循现代最佳实践。

何时调用

自动调用当用户提到：

• “创建组件”
• “添加组件”
• “新组件”
• “构建组件”
• “为[功能]生成组件”

功能描述

1. 生成带有TypeScript和props接口的组件文件
2. 创建带有React Testing Library的测试文件
3. 生成CSS模块样式文件
4. 创建桶导出（index.ts）
5. 验证命名约定
6. 遵循项目模式

执行步骤

第1步：收集组件需求

向用户询问组件细节：

组件名称：[PascalCase名称，例如，UserProfile]
组件类型：
  - simple（基本功能组件）
  - with-hooks（useState，useEffect等）
  - container（数据获取组件）

样式方法：
  - css-modules（默认）
  - styled-components
  - tailwind

需要的props：[可选：描述预期的props]

验证组件名称：

• 使用预定义函数：functions/name_validator.py
• 确保PascalCase格式
• 无保留字
• 描述性和具体性

第1.5步：确认组件设计（ToM检查点）[执行]

重要：对于复杂组件，此步骤必须执行。

在生成文件之前，与用户确认解释。

显示验证：

我理解您想要：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
组件：{NAME}
类型：{TYPE}（推断原因：{REASON}）
位置：src/components/{NAME}/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

从您的代码库中检测到的模式：
- 样式：{CSS_APPROACH}（发现{EVIDENCE}）
- 测试：{TEST_LIBRARY}（在package.json中找到）
- 类似组件：{EXISTING_COMPONENT}在{PATH}

我将生成的Props：
{PROPS_PREVIEW}

继续生成？[Y/n]

如果（高风险模式）跳过验证：

• 简单的展示性组件（无钩子，无数据获取）
• 用户明确说“快速”，“只做”，或“跳过确认”
• 组件名称和类型明确无误
• 无复杂props结构

总是验证如果：

• 容器组件带有数据获取
• 复杂props接口（5+ props）
• 带有副作用的钩子组件
• 组件名称与现有组件相似
• 用户对代码库不熟悉（无配置文件历史）

第2步：生成Props接口

根据组件类型和需求：

使用预定义函数：functions/props_interface_generator.py

# 根据组件需求生成TypeScript接口
python3 functions/props_interface_generator.py \
  --name "UserProfile" \
  --props "userId:string,onUpdate:function,isActive:boolean"

输出：

interface UserProfileProps {
  userId: string;
  onUpdate?: () => void;
  isActive?: boolean;
  children?: React.ReactNode;
  className?: string;
}

第3步：生成组件文件

根据类型使用适当的模板：

简单组件：

使用模板：templates/component-simple-template.tsx

带有钩子的组件：

使用模板：templates/component-with-hooks-template.tsx

容器组件：

使用模板：templates/component-container-template.tsx

使用预定义函数：functions/component_generator.py

python3 functions/component_generator.py \
  --name "UserProfile" \
  --type "simple" \
  --props-interface "UserProfileProps" \
  --template "templates/component-simple-template.tsx" \
  --output "src/components/UserProfile/UserProfile.tsx"

模板替换：

• ${COMPONENT_NAME} → 组件名称（PascalCase）
• ${PROPS_INTERFACE} → 生成的props接口
• ${STYLE_IMPORT} → CSS模块导入
• ${DESCRIPTION} → 组件简要描述

第4步：生成测试文件

使用预定义函数：functions/test_generator.py

python3 functions/test_generator.py \
  --component-name "UserProfile" \
  --component-path "src/components/UserProfile/UserProfile.tsx" \
  --template "templates/test-template.test.tsx" \
  --output "src/components/UserProfile/UserProfile.test.tsx"

测试模板包括：

• 基本渲染测试
• Props验证测试
• 事件处理程序测试（如适用）
• 可访问性测试

模板替换：

• ${COMPONENT_NAME} → 组件名称
• ${IMPORT_PATH} → 相对导入路径
• ${TEST_CASES} → 基于props生成的测试用例

第5步：生成样式文件

使用预定义函数：functions/style_generator.py

python3 functions/style_generator.py \
  --name "UserProfile" \
  --approach "css-modules" \
  --template "templates/style-template.module.css" \
  --output "src/components/UserProfile/UserProfile.module.css"

CSS模块模板：

.container {
  /* 组件包装器样式 */
}

.title {
  /* 标题样式 */
}

/* 根据需要添加更多类 */

Styled Components替代方案：

// 如果--approach "styled-components"生成
import styled from 'styled-components';

export const Container = styled.div`
  /* 组件包装器样式 */
`;

export const Title = styled.h2`
  /* 标题样式 */
`;

第6步：生成桶导出

为清晰的导入创建index.ts：

Write(
  file_path: "src/components/UserProfile/index.ts",
  content: "export { UserProfile } from './UserProfile';
export type { UserProfileProps } from './UserProfile';
"
)

允许使用：

import { UserProfile } from '@/components/UserProfile';

第7步：显示组件摘要

显示生成的文件和用法：

✅ 组件创建：UserProfile

结构：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 src/components/UserProfile/
   ├── UserProfile.tsx         （组件）
   ├── UserProfile.test.tsx    （测试）
   ├── UserProfile.module.css  （样式）
   └── index.ts                （导出）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Props接口：
interface UserProfileProps {
  userId: string;
  onUpdate?: () => void;
  isActive?: boolean;
}

用法：
import { UserProfile } from '@/components/UserProfile';

<UserProfile
  userId="123"
  onUpdate={() => console.log('Updated')}
  isActive={true}
/>

下一步：
1. 自定义组件实现
2. 运行测试：npm test UserProfile
3. 在您的特性中导入和使用

---

预定义函数

1. name_validator.py

验证组件命名约定。

用法：

python3 functions/name_validator.py --name "UserProfile"

检查：

• PascalCase格式
• 不是保留字（例如，Component，Element等）
• 描述性（长度> 2个字符）
• 无特殊字符

返回：有效名称或错误消息

---

2. props_interface_generator.py

根据用户输入生成TypeScript props接口。

用法：

python3 functions/props_interface_generator.py \
  --name "UserProfile" \
  --props "userId:string,onUpdate:function,isActive:boolean"

支持类型：

• string, number, boolean
• function（变为() => void）
• array（变为any[]）
• object（变为Record<string, any>）
• react-node（变为React.ReactNode）

返回：TypeScript接口字符串

---

3. component_generator.py

从模板生成组件文件并替换。

用法：

python3 functions/component_generator.py \
  --name "UserProfile" \
  --type "simple" \
  --props-interface "UserProfileProps" \
  --template "templates/component-simple-template.tsx" \
  --output "src/components/UserProfile/UserProfile.tsx"

参数：

• --name：组件名称（PascalCase）
• --type：组件类型（simple/with-hooks/container）
• --props-interface：Props接口名称
• --template：模板文件路径
• --output：输出文件路径

返回：生成的组件代码

---

4. test_generator.py

使用React Testing Library生成测试文件。

用法：

python3 functions/test_generator.py \
  --component-name "UserProfile" \
  --component-path "src/components/UserProfile/UserProfile.tsx" \
  --template "templates/test-template.test.tsx" \
  --output "src/components/UserProfile/UserProfile.test.tsx"

生成测试：

• 组件渲染
• Props验证
• 事件处理程序
• 可访问性属性

返回：生成的测试代码

---

5. style_generator.py

生成样式文件（CSS Modules或Styled Components）。

用法：

python3 functions/style_generator.py \
  --name "UserProfile" \
  --approach "css-modules" \
  --template "templates/style-template.module.css" \
  --output "src/components/UserProfile/UserProfile.module.css"

支持方法：

• css-modules（默认）
• styled-components
• tailwind（生成className实用程序）

返回：生成的样式代码

---

模板

component-simple-template.tsx

基本功能组件模板。

占位符：

• ${COMPONENT_NAME} - 组件名称
• ${PROPS_INTERFACE} - Props接口定义
• ${STYLE_IMPORT} - CSS导入语句
• ${DESCRIPTION} - 组件描述

component-with-hooks-template.tsx

带有useState, useEffect示例的组件模板。

额外占位符：

• ${HOOKS} - 钩子声明
• ${HANDLERS} - 事件处理函数

component-container-template.tsx

带有数据获取的容器组件模板。

额外占位符：

• ${API_IMPORT} - API函数导入
• ${DATA_TYPE} - 数据类型定义
• ${FETCH_LOGIC} - 数据获取实现

test-template.test.tsx

React Testing Library测试模板。

占位符：

• ${COMPONENT_NAME} - 组件名称
• ${IMPORT_PATH} - 导入路径
• ${TEST_CASES} - 生成的测试用例

style-template.module.css

CSS模块模板。

占位符：

• ${COMPONENT_NAME_KEBAB} - 组件名称为kebab-case
• ${BASE_STYLES} - 基本容器样式

---

示例

参考examples/目录中的参考实现：

1. Button.tsx - 带有变体的简单组件
2. SearchBar.tsx - 带有钩子（useState, useEffect）的组件
3. UserProfile.tsx - 带有数据获取的容器组件

每个示例包括：

• 组件实现
• 测试文件
• 样式文件
• 使用文档

---

最佳实践

组件设计

• 保持组件小而专注（单一责任）
• 组合复杂UIs来自简单组件
• 仅在必要时提升状态
• 使用描述性名称（UserProfile，而不是UP）

TypeScript

• 明确定义props接口
• **避免any**类型（如果需要，使用unknown）
• 导出类型供消费者使用
• 使用严格模式

测试

• 测试用户行为，而不是实现
• 按角色/文本查询，而不是测试ID
• 测试可访问性属性
• 模拟外部依赖项

样式

• CSS Modules用于作用域样式
• BEM或描述性类名
• 移动优先响应式设计
• 使用CSS自定义属性进行主题设置

可访问性

• 语义HTML（按钮，导航，主要内容等）
• 需要时使用ARIA标签
• 键盘导航支持
• 模态/下拉菜单中的焦点管理

---

故障排除

组件不渲染

问题：生成的组件抛出错误

解决方案：

1. 检查TypeScript编译错误
2. 验证所有导入是否正确
3. 检查props接口是否与使用匹配
4. 验证JSX语法

测试失败

问题：生成的测试未通过

解决方案：

1. 确保已安装React Testing Library
2. 检查测试查询是否与组件输出匹配
3. 验证模拟是否设置正确
4. 使用--verbose标志运行测试

样式不适用

问题：CSS模块未加载

解决方案：

1. 检查CSS模块导入语法
2. 验证webpack/vite配置是否支持CSS模块
3. 检查className是否应用于元素
4. 检查浏览器开发者工具中加载的样式

---

成功标准

当以下条件满足时，此技能成功：

• [ ] 组件文件生成有效的TypeScript
• [ ] 测试文件创建并通过测试
• [ ] 样式文件生成作用域样式
• [ ] 桶导出允许清晰的导入
• [ ] Props接口符合要求
• [ ] 代码遵循React最佳实践
• [ ] 包括可访问性属性

---

自动调用此技能以创建React组件，确保一致性并节省时间 ⚛️