Vite + React 管理后台
使用明确的数据边界和交互状态构建生产级 React 管理后台页面。
编程开发Claude CodeCodexCursor
提示词
请为 {{business}} 实现生产级管理后台,模块包括:{{modules}}。
技术架构固定为 Vite + React + TypeScript + React Router + TanStack Query + Tailwind CSS + shadcn/ui。若项目已有路由或请求库,保留现状并说明差异,不并行引入第二套方案。
视觉风格为“{{designStyle}}”:优先信息层级、扫描效率和稳定布局。表格、筛选、批量操作、状态标签和危险操作必须清晰,不用装饰性大卡片稀释信息。
数据契约:{{dataContract}}。
约束:
- 先检查仓库和依赖;未知接口不得杜撰,建立类型化 adapter,并使用明确标注的 seed 数据演示。
- 若可用,读取 shadcn-best-practices、react-best-practices、webapp-testing;加载失败时不得假装成功。
- 所有请求都要有 Loading、Empty、Error、Retry 和权限不足状态。
- 表单包含客户端校验、提交中状态、服务端错误映射和防重复提交。
- 删除、停用等破坏性操作需要确认,且不能用仅靠颜色表达状态。
- 支持键盘操作、窄屏降级、长文本、超大数据量和慢请求场景。
- 输出前运行现有 lint、typecheck、test、build,并报告真实结果。
先给出页面结构和数据流,再实现代码;最后列出文件、命令、测试覆盖及尚未接入的真实接口。共 646 字符
使用场景
适用于需要快速理解、整理或生成 编程开发 内容的任务。请先提供必要上下文,再根据输出结果继续追问和验证。
推荐搭配的 Skills
这些是从公开来源核对的外部 Skill。仅在当前 Agent 支持且能够读取时使用;无法加载时,不应声称已经调用。
变量说明
| 变量名 | 类型 | 必填 | 说明 | 示例 |
|---|---|---|---|---|
| business | 文本 | 是 | 后台业务与使用角色 | SaaS 订阅和客户管理后台 |
| modules | 列表 | 是 | 必须实现的模块 | 概览、客户列表、订单详情、设置 |
| dataContract | JSON 或文本 | 否 | 已知接口、类型或示例数据 | Customer 与 Subscription 类型定义 |
| designStyle | 文本 | 是 | 后台视觉与密度要求 | 高密度、克制、偏专业工具 |
使用方法
1
复制提示词
2
替换变量
3
发送给 AI
4
检查结果
示例输入
请解释一个递归实现的 Fibonacci 函数,并指出复杂度问题。
示例输出
- 说明递归函数的执行过程。
- 分析重复计算导致的指数复杂度。
- 给出记忆化与迭代优化方案。