alboped
77f718965d
补齐 RBAC 相关页面与 UI 设计图，并接入功能与视觉回归测试，便于后续持续验证。 Co-authored-by: Cursor <cursoragent@cursor.com>
150 lines
5.9 KiB
Markdown
150 lines
5.9 KiB
Markdown
# ChatOne Admin UI 图目录
|
||
|
||
按侧栏菜单结构组织。路径相对于 `docs/ui/`。
|
||
|
||
## 目录树
|
||
|
||
```text
|
||
docs/ui/
|
||
├── README.md # 本索引
|
||
├── layout/ # 全局布局参考
|
||
├── login/ # 登录
|
||
├── dashboard/ # 总览
|
||
│ ├── overview/ # 数据概览
|
||
│ └── modules/ # 模块示意 / 地图
|
||
├── llm/ # 大模型管理
|
||
│ ├── list/ # 模型列表（含用量抽屉）
|
||
│ ├── form/ # 新增 / 编辑模型
|
||
│ ├── provider/ # 供应商管理
|
||
│ ├── usage/ # 用量统计
|
||
│ ├── usage-detail/ # 用量明细
|
||
│ └── quota/ # 限流与配额
|
||
└── system/ # 系统管理
|
||
├── user/ # 用户管理（列表 / 表单 / 重置密码）
|
||
├── role/ # 角色管理（含权限配置抽屉）
|
||
└── permission/ # 权限配置（菜单 / 按钮）
|
||
```
|
||
|
||
---
|
||
|
||
## 菜单 ↔ 路由 ↔ UI 图
|
||
|
||
| 菜单 | 建议路由 | UI 图 |
|
||
| --- | --- | --- |
|
||
| （布局） | — | [layout/chatone-admin-layout-ui.png](./layout/chatone-admin-layout-ui.png) |
|
||
| 登录 | `/login` | [login/chatone-login-ui.png](./login/chatone-login-ui.png) |
|
||
| **总览** | `/dashboard` | [dashboard/overview/…](./dashboard/overview/) |
|
||
| └ 模块示意 | — | [dashboard/modules/…](./dashboard/modules/) |
|
||
| **大模型管理** | `/llm` | — |
|
||
| ├ 模型列表 | `/llm/models` | [llm/list/chatone-llm-list-ui.png](./llm/list/chatone-llm-list-ui.png) |
|
||
| │ └ 用量抽屉 | （列表内 Drawer） | [llm/list/chatone-llm-usage-drawer-ui.png](./llm/list/chatone-llm-usage-drawer-ui.png) |
|
||
| ├ 新增/编辑模型 | `/llm/models/create` · `/llm/models/:id/edit` | [llm/form/chatone-llm-form-ui.png](./llm/form/chatone-llm-form-ui.png) |
|
||
| ├ 供应商管理 | `/llm/providers` | [llm/provider/chatone-llm-provider-ui.png](./llm/provider/chatone-llm-provider-ui.png) |
|
||
| ├ 用量统计 | `/llm/usage` | [llm/usage/chatone-llm-usage-ui.png](./llm/usage/chatone-llm-usage-ui.png) |
|
||
| ├ 用量明细 | `/llm/usage/details` | [llm/usage-detail/chatone-llm-usage-detail-ui.png](./llm/usage-detail/chatone-llm-usage-detail-ui.png) |
|
||
| └ 限流配额 | `/llm/quota` | [llm/quota/chatone-llm-quota-ui.png](./llm/quota/chatone-llm-quota-ui.png) |
|
||
| **系统管理** | `/system` | — |
|
||
| ├ 用户管理 | `/system/user` | [system/user/chatone-system-user-list-ui.png](./system/user/chatone-system-user-list-ui.png) |
|
||
| │ ├ 新增/编辑 | （Modal） | [system/user/chatone-system-user-form-ui.png](./system/user/chatone-system-user-form-ui.png) |
|
||
| │ └ 重置密码 | （Modal） | [system/user/chatone-system-user-reset-pwd-ui.png](./system/user/chatone-system-user-reset-pwd-ui.png) |
|
||
| ├ 角色管理 | `/system/role` | [system/role/chatone-system-role-ui.png](./system/role/chatone-system-role-ui.png) |
|
||
| └ 权限配置 | `/system/permission` | [system/permission/chatone-system-permission-ui.png](./system/permission/chatone-system-permission-ui.png) |
|
||
|
||
---
|
||
|
||
## 大模型管理：功能清单
|
||
|
||
### 模型列表 `/llm/models`（你点名的能力）
|
||
|
||
- 新增模型
|
||
- 编辑 / 删除（含批量删除）
|
||
- 启用 / 禁用（Switch）
|
||
- 拖拽或排序号调整顺序
|
||
- 筛选：供应商、状态、关键词
|
||
- 行内查看今日 Token；入口打开用量抽屉或跳转明细
|
||
|
||
### 新增 / 编辑模型（子页）
|
||
|
||
- 基础：名称、供应商、Model ID、类型（对话 / 嵌入 / 多模态）
|
||
- 接入：Base URL、API Key、超时、重试
|
||
- 计费：输入/输出单价
|
||
- 能力：上下文长度、最大输出 Token
|
||
- 运维：排序权重、启用状态、备注
|
||
|
||
### 供应商管理（主流补充）
|
||
|
||
- 管理 OpenAI / Anthropic / 通义 / Gemini / DeepSeek / 自定义
|
||
- 凭证配置、连通性测试、关联模型数、启停
|
||
|
||
### 用量统计（主流补充）
|
||
|
||
- KPI：今日 / 本月 Token、调用次数、预估费用
|
||
- 趋势图、模型占比、用量排行
|
||
|
||
### 用量明细（你点名的明细）
|
||
|
||
- 按时间 / 模型 / 用户过滤
|
||
- 输入/输出/合计 Token、耗时、状态、费用
|
||
- 导出；可下钻单次请求详情
|
||
|
||
### 限流与配额（主流补充）
|
||
|
||
- 按模型 / 用户 / 全局：RPM、TPM、日/月 Token 配额
|
||
- 用量进度、超额策略（拒绝 / 降级 / 告警）
|
||
|
||
---
|
||
|
||
## 系统管理：功能清单
|
||
|
||
### 用户管理 `/system/user`
|
||
|
||
- 新增 / 编辑 / 删除用户（含批量禁用）
|
||
- 启用 / 禁用账号（Switch）
|
||
- 筛选：关键词（用户名 / 邮箱 / 手机）、角色、状态
|
||
- 绑定角色（多选）
|
||
- 重置密码（临时密码 + 强制下次修改）
|
||
- 展示最近登录时间、创建时间
|
||
|
||
### 角色管理 `/system/role`
|
||
|
||
- 新增 / 编辑 / 删除角色
|
||
- 角色编码（如 `ROLE_ADMIN`）、描述、启停
|
||
- 查看关联用户数
|
||
- 抽屉配置：菜单树权限 + 按钮权限码
|
||
|
||
### 权限配置 `/system/permission`
|
||
|
||
- **菜单权限**：树形维护目录 / 菜单 / 按钮；路由、图标、排序、显示开关、权限标识
|
||
- **按钮权限**：权限名称、权限码（如 `user:create`）、所属菜单；供前端 `<Access />` 使用
|
||
|
||
权限模型：RBAC（用户 → 角色 → 菜单/按钮权限）。
|
||
|
||
---
|
||
|
||
## 建议的菜单 Mock 结构
|
||
|
||
```ts
|
||
{
|
||
name: '大模型管理',
|
||
path: '/llm',
|
||
icon: 'BlockOutlined',
|
||
children: [
|
||
{ name: '模型列表', path: '/llm/models' },
|
||
{ name: '供应商管理', path: '/llm/providers' },
|
||
{ name: '用量统计', path: '/llm/usage' },
|
||
{ name: '用量明细', path: '/llm/usage/details' },
|
||
{ name: '限流配额', path: '/llm/quota' },
|
||
],
|
||
},
|
||
{
|
||
name: '系统管理',
|
||
path: '/system',
|
||
icon: 'SettingOutlined',
|
||
children: [
|
||
{ name: '用户管理', path: '/system/user' },
|
||
{ name: '角色管理', path: '/system/role' },
|
||
{ name: '权限配置', path: '/system/permission' },
|
||
],
|
||
}
|
||
```
|