manage-ui

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 的规则：

1. 先阅读 docs/prds/{domain}/overview.md 的 Feature 列表和 features/ 下已有文档。
2. 如果页面只是承载已有业务能力，更新对应 feature 的 ## ui。
3. 如果页面引入新的可复制业务能力包，先按 manage-prd 的规则创建 / 更新 feature，并同步 overview.md 的 Feature 列表。
4. 如果只是新增入口、按钮、弹窗、表单字段或局部状态，通常并入现有 feature，不单独创建 feature。
5. 如果 UI 依赖新的用户端 API，先使用 manage-api 完成 API 与同一 feature 的 ## api 更新。