| name | manage-ui |
| description | 新增、修改或删除 Cat 项目面向用户的前端页面(`web/src/main/`)。用于用户侧列表、详情、表单等界面。 |
Manage UI
用户侧前端位于 web/src/main/,使用 React + React Query + Redux Toolkit,样式用 .sass 缩进语法(禁止 Tailwind、禁止 TypeScript)。入口 web/index.html,路由 basename /web。
Workflow Overview
新增页面 — 5 步:
Task Progress:
- [ ] Step 1: API 层 — 在 web/src/main/api/<context>.js 中封装后端调用
- [ ] Step 2: 页面组件 — web/src/main/pages/<group>/<Page>.jsx
- [ ] Step 3: 样式 — web/src/main/styles/<name>.sass,并在 main.jsx 中 import
- [ ] Step 4: 路由注册 — 在 routes.jsx 中添加 Route
- [ ] Step 5: 更新 docs/prds/{domain}/features/{feature}.md 的 `## ui`
修改页面 — 按既有风格扩展对应文件;API 变动时先走 manage-api。
删除页面 — 反向:PRD → 路由 → 样式 import → 页面组件 → API(确认无其他引用再删)。
Step 1: API 层
在 web/src/main/api/<context>.js 中封装调用。request 封装、错误处理(formatApiErrorMessage)、GET / POST 模式与 admin 侧一致,参考 manage-ui-admin/references/api-layer.md。
Step 2: 页面组件
- 列表 / 详情组件放
web/src/main/pages/<group>/,参考 pages/subjects/SubjectDetail.jsx、pages/posts/PostDetail.jsx
- 数据获取用 React Query(
useQuery / useMutation),共享的 preload slice 放 shared/store/
- 组件复用优先从
web/src/main/components/ 与 web/src/shared/ 里找
Step 3: 样式
- 在
web/src/main/styles/ 新建 <name>.sass(缩进语法),在 web/src/main/main.jsx 顶部 import './styles/<name>.sass' 注册
- 也可在页面目录内就近放置(如
pages/api-docs/api-docs.sass)并同样 import
Step 4: 路由
在 web/src/main/routes.jsx 的 <Routes> 内添加 <Route>,路径相对 basename /web(实际 URL 为 /web/<path>)。多词路径使用 kebab-case。
Step 5: PRD 文档
在 docs/prds/{domain}/features/{feature}.md 的 ## ui 小节中记录用户侧页面、入口、交互流程、状态展示、表单规则、空状态和错误状态。PRD 已按 domain + feature 分层,不再创建或更新 docs/prds/{domain}/ui.md 这种 aspect 文件。
选择 feature 的规则:
- 先阅读
docs/prds/{domain}/overview.md 的 Feature 列表和 features/ 下已有文档。
- 如果页面只是承载已有业务能力,更新对应 feature 的
## ui。
- 如果页面引入新的可复制业务能力包,先按
manage-prd 的规则创建 / 更新 feature,并同步 overview.md 的 Feature 列表。
- 如果只是新增入口、按钮、弹窗、表单字段或局部状态,通常并入现有 feature,不单独创建 feature。
- 如果 UI 依赖新的用户端 API,先使用
manage-api 完成 API 与同一 feature 的 ## api 更新。