用途:依据项目既有模式生成后台管理(Admin)页面,适用于构建管理界面、管理页或仪表盘。
主要能力:提供列表页、详情/编辑页、数据表格、状态徽章、批量操作栏、行操作菜单、确认对话框以及卡片式表单布局等界面模式的模板与示例代码,包含排序、多选、清空选择、加载与空状态提示等交互逻辑。
目录结构约定:路由位于 src/routes/admin/resources/(index.tsx 列表页、$resourceId.tsx 详情/编辑页);组件位于 src/components/admin/resources/(ResourcesList.tsx 列表容器、ResourceForm.tsx 创建/编辑表单,以及 components 下的 ResourceTable.tsx、StatusBadge.tsx、BulkActionsBar.tsx、ResourceActions.tsx)。
技术栈用法:路由使用 @tanstack/react-router 的 createFileRoute;数据请求与变更使用 @tanstack/react-query 的 useQuery/useMutation,接口约定返回 { success, error, items, total };文本使用 react-i18next 的 useTranslation;提示使用 sonner 的 toast;UI 组件来自 @/components/ui/ 下的 button、checkbox、dropdown-menu、alert-dialog 等。
参考位置:src/components/admin/products/ 为完整产品 CRUD 示例,src/components/admin/orders/ 为订单管理示例,src/hooks/useDataTable.ts 为表格状态管理,另有 forms 技能提供 FNForm 表单模式。
限制:资料未提供安装命令、依赖版本、框架配置、接口后端实现、收费与授权信息,暂未提供;实际接入需按项目自身约定调整。