manage-ui-admin

name	manage-ui-admin
description	Create, modify, or remove admin UI pages for the Cat project. Use when adding/editing/removing admin pages, admin list/detail views, admin management features, or when the user mentions admin UI, admin frontend, 管理端界面.

Manage Admin UI

管理端界面位于 web/src/admin/，使用 React + MUI + React Query。入口为 web/admin.html，路由 basename 为 /web/admin。

Workflow Overview

新增页面 — 5 步（下文详述）：

Task Progress:
- [ ] Step 1: API 层 — 在 web/src/admin/api/ 中封装后端调用
- [ ] Step 2: 页面组件 — 新建列表页 / 详情页
- [ ] Step 3: 路由注册 — 在 routes.jsx 中添加 Route
- [ ] Step 4: 侧边栏导航 — 在 AdminLayout.jsx 的 MENU_ITEMS 中添加菜单项
- [ ] Step 5: 更新 docs/prds/{domain}/features/{feature}.md 的 `## ui_admin`

修改页面 — 按 references 扩展对应文件；queryKey / 筛选字段变动时同步 invalidateQueries；需要新 admin endpoint 时先走 manage-api-admin。对于存在删除、恢复、启停、审核等重复操作的列表页，默认优先考虑加入多选和批量操作入口；如果后端没有批量接口，前端可在确认后循环触发单条接口。列表页如果有 tab，tab 必须有对应 URL，不能只用组件内 useState 切换。

删除页面 — 反向 5 步：PRD → 菜单 → 路由 → 页面组件 → API（确认无其他引用再删）。

---

Step 1: API 层

在 web/src/admin/api/<context>.js 中封装 API 调用。模式详见 references/api-layer.md。

---

Step 2: 页面组件

• 列表页：筛选栏 + 表格 + 分页 + 操作 Dialog；若有明显批量操作场景，优先支持多选。若存在 tab，必须让每个 tab 对应可直达、可刷新的 URL。模式详见 references/list-page.md。
• 详情页：顶部信息 + 可编辑表单或只读展示 + 子数据表格。模式详见 references/detail-page.md。

---

Step 3: 路由注册

在 web/src/admin/routes.jsx 的 Route element={<AdminLayout />} 内添加路由。详见 references/routes-nav.md。

---

Step 4: 侧边栏导航

在 web/src/admin/components/AdminLayout.jsx 的 MENU_ITEMS 中添加菜单项。详见 references/routes-nav.md。

---

Step 5: PRD 文档

在 docs/prds/{domain}/features/{feature}.md 的 ## ui_admin 小节中记录管理端页面、列表 / 详情 / 编辑 / 审核交互、筛选项、批量操作和状态展示。PRD 已按 domain + feature 分层，不再创建或更新 docs/prds/{domain}/ui_admin.md 这种 aspect 文件。

选择 feature 的规则：

1. 先阅读 docs/prds/{domain}/overview.md 的 Feature 列表和 features/ 下已有文档。
2. 如果管理端页面只是治理已有业务能力，更新对应 feature 的 ## ui_admin。
3. 如果页面引入新的可复制管理能力包，先按 manage-prd 的规则创建 / 更新 feature，并同步 overview.md 的 Feature 列表。
4. 如果只是新增列表列、筛选项、详情区块、Dialog、批量操作或审核动作，通常并入现有 feature，不单独创建 feature。
5. 如果 UI 依赖新的管理端 API，先使用 manage-api-admin 完成 API 与同一 feature 的 ## api_admin 更新。