前端页面
React SPA 位于 web-ui/，共 15 个页面，基于 Material UI + React Router。
页面列表
| 页面 | 路由 | 说明 |
|---|---|---|
| 登录 | /login | 用户名 + 密码 → JWT |
| 仪表盘 | / | 系统概览卡片 |
| Agent 管理 | /agents | 列表、详情、配置 |
| 场景管理 | /scenes | 场景列表 + 切换 |
| 场景对话 | /scenes/:id/chat | 场景内聊天 |
| 知识库 | /kb | 知识库浏览 + 搜索 |
| 知识详情 | /kb/:id | 单条知识 |
| 频道管理 | /channels | 微信/飞书等配置 |
| 聊天记录 | /chat | 全局消息历史 |
| 雇佣审批 | /hires | 待审批列表 |
| 设置 | /settings | LLM 配置、密钥 |
| 用户管理 | /users | 用户 CRUD |
| API Key 管理 | /api-keys | 密钥生成/吊销 |
| 系统日志 | /logs | 运行日志查看 |
| 帮助 | /help | 文档入口 |
API 层
web-ui/src/
├── api/
│ ├── client.ts # Axios 实例,拦截器
│ ├── agents.ts
│ ├── scenes.ts
│ ├── knowledge.ts
│ ├── channels.ts
│ ├── auth.ts
│ ├── hires.ts
│ ├── users.ts
│ └── chat.ts
├── components/
│ ├── Layout.tsx # 侧边栏 + 顶栏 + 内容区
│ ├── Sidebar.tsx # 导航菜单
│ ├── AgentAvatar.tsx # Agent 状态指示
│ ├── StatusBadge.tsx # 在线/离线标签
│ ├── JsonEditor.tsx # JSON 配置编辑器
│ ├── ConfirmDialog.tsx
│ └── ProtectedRoute.tsx # 路由守卫
├── pages/ # 上述 15 个页面
├── theme.ts # Material UI 主题
└── App.tsx # 路由配置认证流程
- 用户访问任意页面 →
ProtectedRoute检查 JWT - 无 token → 重定向
/login - 登录 →
POST /api/auth/login→ 返回 JWT → 存储到localStorage - 每次请求 → Axios 拦截器自动附加
Authorization: Bearer <token>
组件说明
Layout: Flexbox 布局，左侧 240px 侧边栏 + 右侧内容区。侧边栏可折叠。
Sidebar: 读取 /api/scenes 和 /api/agents/status，在导航底部显示场景和 agent 状态。
AgentAvatar: 圆形头像 + 绿/灰/红状态圆点。点击可快速查看详情。
StatusBadge: 文字标签，绿色 = "运行中"，灰色 = "已停止"，红色 = "异常"。
主题
theme.ts 定义 Material UI 主题：
- 主色:
#1976d2 - 暗色模式支持
- 响应式断点: xs/sm/md/lg/xl
- 自定义字体