Qoder可以根据项目中的UI组件库、状态管理方案以及API接口规范，自动生成可直接使用的React后台管理组件。例如，只需输入一条需求，就能生成Ant Design Mobile用户管理组件，包含搜索、表格、分页、编辑弹窗和删除确认，并自动推导TypeScript类型、集成Zustand与Axios，同时支持布局复用和Figma设计稿直出。

如果你需要快速开发符合项目规范的React后台管理组件，例如用户列表、权限配置面板或日志查看器，但又不想从零编写state逻辑、样式、API请求和分页控制，Qoder就能基于你现有项目的UI库、状态管理方案和API约定，生成即插即用的组件代码。

生成带CRUD功能的用户管理组件

先打开Qoder桌面端，然后点击左侧的“Quest”按钮，在输入框中直接输入需求：“生成React用户管理组件，使用Ant Design Mobile，包含搜索栏、表格、分页、编辑弹窗和删除确认，API路径为/api/users，字段包括id、name、email、status、createdAt。”

等待Planners分析项目上下文后，Coders会自动生成src/components/UserList.tsx以及配套的hooks/useUserList.ts。生成后的组件已预置Zustand store更新逻辑，并且request.ts的调用路径与项目中现有的Axios实例完全一致。

点击“Accept”同步到本地后，组件即可直接导入页面使用。这一步无需手动补全类型定义，Qoder会根据/api/users的响应体自动推导TypeScript接口并写入types/api.d.ts。

复用已有布局结构生成新模块

方法一：在VS Code中右键点击src/layout/SidebarLayout.tsx → 选择“Qoder: Extend Layout” → 输入指令：“基于此布局新增‘商品规格管理’子模块，使用React Router嵌套路由，表格列包含规格名称、编码、启用状态、操作按钮。”

方法二：在终端进入项目根目录，运行qoder generate component --name=ProductSpecTable --template=table-crud --layout=SidebarLayout。

【必须确保当前项目已初始化仓库Wiki】否则Qoder无法识别SidebarLayout的props签名与Outlet位置，生成的路由配置将无法挂载。

生成文件会自动注入到src/pages/product/specs/目录下，包含index.tsx、columns.ts、formSchema.ts三个文件，其中formSchema.ts已按照Ant Design Mobile Form规范编写校验规则。

从Figma设计稿直出React组件

第一步：在Qoder桌面端打开Quest面板 → 点击“Import Design” → 上传Figma JSON导出文件或粘贴Figma API链接。

第二步：勾选“Match existing UI library”，Qoder会自动检测项目中import的@ant-design/mobile组件调用方式，将Figma中的Frame映射为Card，Text Layer转为Typography.Text，Button图层匹配Button.ButtonType。

第三步，直接点击“Generate”。完成后，Qoder会输出src/components/FigmaProductCard.tsx；同时，内联CSS变量会继续与项目主题色保持一致，padding、margin等数值也会根据postcss-px-to-viewport的配置自动换算为vw单位。

第四步：检查生成的useEffect依赖项——如果Figma稿中包含动态加载图表，Qoder会主动引入echarts-for-react并添加loading状态控制，无需你手动补全。