该技能用于按项目已建立的模式生成后台管理(Admin CRUD)页面,适用于构建管理界面、管理页面或仪表盘。
主要能力:
- 页面与组件结构:列表页(src/routes/admin/resources/index.tsx)与详情/编辑页($resourceId.tsx),列表容器、表单、表格、状态徽章、批量操作栏、行操作等组件。
- 数据表格:使用 TanStack Query 拉取数据,支持加载态、错误态、空态;列排序(升序/降序图标)、行多选与全选、行操作下拉菜单、编辑与删除入口。
- 批量操作:选中后在 BulkActionsBar 中提供 Activate、Archive、Delete 等操作,通过 POST /api/resources/bulk 提交,成功后失效查询缓存、清空选择并提示。
- 状态展示:StatusBadge 按状态(active、draft、archived、pending、processing、shipped、delivered、cancelled、paid、failed、refunded)显示不同颜色。
- 表单与对话框:卡片式表单布局(主内容两列加侧边栏,粘性状态卡),使用渐变强调条;删除确认使用 AlertDialog。
- 国际化:通过 react-i18next 的 t() 翻译文案。
使用方式(资料所示):按模板在指定目录下创建路由与组件文件,引用 UI 组件库(Button、Checkbox、DropdownMenu 等)与 @tanstack/react-router、@tanstack/react-query;接口以 credentials: 'include' 请求 /api/resources,返回 { success, items, total } 结构。参见示例:src/components/admin/products/、src/components/admin/orders/、src/hooks/useDataTable.ts 以及 forms skill。
限制:资料未提供安装命令、收费、价格、平台与效果信息;上述为模板示例,需结合具体项目调整。