feat: 初始化 ChatOne 管理后台前端

基于 React + Vite + Ant Design Pro 搭建登录、动态菜单、布局主题与数据总览，并补充按菜单整理的 UI 设计稿。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-25 23:57:53 +08:00
parent ed9b23ba90
commit a09dcef3f1
59 changed files with 7296 additions and 129 deletions
--- a/docs/ui/README.md
+++ b/docs/ui/README.md
@@ -0,0 +1,110 @@
+# 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/` |
+| ├ 角色管理 | `/system/role` | `system/role/` |
+| └ 权限配置 | `/system/permission` | `system/permission/` |
+
+---
+
+## 大模型管理：功能清单
+
+### 模型列表 `/llm/models`（你点名的能力）
+
+- 新增模型
+- 编辑 / 删除（含批量删除）
+- 启用 / 禁用（Switch）
+- 拖拽或排序号调整顺序
+- 筛选：供应商、状态、关键词
+- 行内查看今日 Token；入口打开用量抽屉或跳转明细
+
+### 新增 / 编辑模型（子页）
+
+- 基础：名称、供应商、Model ID、类型（对话 / 嵌入 / 多模态）
+- 接入：Base URL、API Key、超时、重试
+- 计费：输入/输出单价
+- 能力：上下文长度、最大输出 Token
+- 运维：排序权重、启用状态、备注
+
+### 供应商管理（主流补充）
+
+- 管理 OpenAI / Anthropic / 通义 / Gemini / DeepSeek / 自定义
+- 凭证配置、连通性测试、关联模型数、启停
+
+### 用量统计（主流补充）
+
+- KPI：今日 / 本月 Token、调用次数、预估费用
+- 趋势图、模型占比、用量排行
+
+### 用量明细（你点名的明细）
+
+- 按时间 / 模型 / 用户过滤
+- 输入/输出/合计 Token、耗时、状态、费用
+- 导出；可下钻单次请求详情
+
+### 限流与配额（主流补充）
+
+- 按模型 / 用户 / 全局：RPM、TPM、日/月 Token 配额
+- 用量进度、超额策略（拒绝 / 降级 / 告警）
+
+---
+
+## 建议的菜单 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' },
+  ],
+}
+```