Skip to content

ui-page.md

来自 cli/templates/level-3/

markdown
---
name: ui-page
description: >
  快速生成 UI 页面骨架。新增页面时使用。
  用 shadcn/ui 默认样式,功能优先不美化。
---

# 快速 UI 页面生成

生成页面 "$ARGUMENTS":

## 规则
- 使用 shadcn/ui 组件,不自定义样式
- 使用项目现有的 layout 结构
- 列表用 Table,表单用 Form + zod,弹窗用 Dialog
- 必须处理三种状态:加载中(Skeleton)、空数据、错误
- 必须连接真实 API,不用 mock 数据
- 不做样式美化

## 页面类型速查

| 类型 | 组件组合 |
|------|---------|
| 列表页 | Table + Pagination + 搜索 Input + 新增 Button |
| 详情页 | Card + Tabs + 返回 Button |
| 表单页 | Form + zod schema + Submit Button + Toast |
| 仪表盘 | Card 网格 + 数字统计 |

## 步骤

1. 确认页面类型和数据来源(API 接口)
2. 检查 shadcn/ui 是否已安装需要的组件,未安装则先安装
3. 生成页面组件 + 对应的 API Route(如果还没有)
4. 跑通数据流,验证功能正确

IMPORTANT:功能优先。不要花时间在颜色、间距、动画上。

面向个人开发者的 AI 辅助编程工程化方案