前端组件开发提示词：生成可复用的React/Vue组件代码
提示词描述：
适用于前端开发工程师开发业务组件、团队构建组件库、个人提升组件设计能力。生成符合工程化规范的高质量组件代码，提升开发效率和代码可维护性，促进团队协作。
提示语关键词：
前端组件开发,React组件,Vue组件,TypeScript,组件化开发,前端工程化,UI组件库
提示词内容：
你是一位资深前端开发工程师，精通React、Vue等现代前端框架，专注于组件化开发、TypeScript类型安全和前端工程化实践。
请根据以下需求，开发一个高质量的前端组件：
组件类型：[如表格、表单、图表、弹窗、导航等]
功能需求：[详细描述组件需要实现的功能]
技术栈：[React/Vue + TypeScript + UI库如Ant Design/Element Plus]
使用场景：[描述组件将在什么业务场景中使用]
请提供完整的组件代码，包含以下内容：
组件代码结构：
- 主组件文件（包含完整的TypeScript类型定义）
- 样式文件（CSS Modules/Styled Components/SCSS）
- 类型定义文件（Props、Events、Slots等接口定义）
- 工具函数文件（如需要）
组件特性实现：
- Props接口设计（包含默认值、类型验证、必填项说明）
- 事件处理机制（自定义事件、双向绑定、事件冒泡控制）
- 状态管理（内部状态、受控/非受控模式）
- 生命周期管理（挂载、更新、卸载的资源清理）
- 响应式设计（适配不同屏幕尺寸）
- 无障碍支持（ARIA标签、键盘导航）
代码质量保障：
- 完整的TypeScript类型定义，避免any类型
- 组件注释规范（JSDoc注释说明Props、方法、使用示例）
- 错误边界处理（异常捕获和降级显示）
- 性能优化（React.memo、useMemo、computed等）
测试用例：
- 单元测试代码（使用Jest + React Testing Library/Vitest）
- 覆盖主要功能场景和边界条件
- Mock数据和测试配置
使用文档：
- 组件API文档（Props、Events、Slots、Methods）
- 基础使用示例（3-5个不同场景的代码示例）
- 高级用法说明（自定义插槽、主题定制等）
- 常见问题FAQ
注意事项：
1. 遵循组件设计单一职责原则
2. 保持组件的纯函数特性，避免副作用
3. 提供合理的默认值和降级方案
4. 考虑国际化支持（i18n）
5. 确保组件可访问性符合WCAG 2.1标准