chat-one-admin-web/docs/ui/README.md

ChatOne Admin UI 图目录

按侧栏菜单结构组织。路径相对于 docs/ui/。

目录树

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
登录	/login	login/chatone-login-ui.png
总览	/dashboard	dashboard/overview/…
└ 模块示意	—	dashboard/modules/…
大模型管理	/llm	—
├ 模型列表	/llm/models	llm/list/chatone-llm-list-ui.png
│ └ 用量抽屉	（列表内 Drawer）	llm/list/chatone-llm-usage-drawer-ui.png
├ 新增/编辑模型	/llm/models/create · /llm/models/:id/edit	llm/form/chatone-llm-form-ui.png
├ 供应商管理	/llm/providers	llm/provider/chatone-llm-provider-ui.png
├ 用量统计	/llm/usage	llm/usage/chatone-llm-usage-ui.png
├ 用量明细	/llm/usage/details	llm/usage-detail/chatone-llm-usage-detail-ui.png
└ 限流配额	/llm/quota	llm/quota/chatone-llm-quota-ui.png
系统管理	/system	—
├ 用户管理	/system/user	system/user/chatone-system-user-list-ui.png
│ ├ 新增/编辑	（Modal）	system/user/chatone-system-user-form-ui.png
│ └ 重置密码	（Modal）	system/user/chatone-system-user-reset-pwd-ui.png
├ 角色管理	/system/role	system/role/chatone-system-role-ui.png
└ 权限配置	/system/permission	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 结构

{
  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' },
  ],
}