React 组件生成器

要解决什么问题

在已有前端仓库里加一个新组件，最容易踩坑的不是 JSX 语法，而是和项目不一致：导出方式、use client 边界、Ant Design 的 useMessage/useModal 写法、测试里如何 mock 反馈组件。手写时往往要对齐 package.json、目录习惯和团队约定，重复查文档。

技能如何工作

技能按固定工作流推进：需求含糊时先确认组件类型、数据形状和关键交互；再从项目上下文识别 React 或 Vue（antd / ant-design-vue、jsx: react-jsx、是否存在 .vue 文件等），不确定时默认 React 并向你确认。

生成前会读取对应参考文档：

• React：每次读 references/react-patterns.md（React 18+、TypeScript、Next.js App Router；命名导出、hooks 时加 use client、Ant Design 5 导入与 contextHolder 模式等）
• Vue：读 references/vue-patterns.md，并确认 Vue 2 Options 还是 Vue 3 Composition
• 测试：读 references/test-patterns.md，与组件同目录产出 *.test.tsx，使用 vitest、@testing-library/react、userEvent，并 mock message.useMessage()

输出包括组件文件（.tsx / .vue）及配套测试，测试覆盖渲染、loading 与主要交互。

适用边界与注意点

React 是主路径，Vue 为次要支持；不会替你引入全局状态库，倾向本地 state 与自定义 hooks。若仓库技术栈与参考文档假设不一致（例如非 Next App Router、非 Ant Design 体系），生成结果仍需人工对照项目规范调整。