Qoder能基于项目UI库、状态管理及API约定生成即插即用React后台组件。例如输入指令即可生成Ant Design Mobile用户管理组件，含搜索、表格、分页、编辑弹窗与删除确认，自动推导TS类型、集成Zustand与Axios，并支持布局复用与Figma直出。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速产出符合项目规范的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状态控制，不依赖你手动补全。
