48 lines
4.0 KiB
Markdown
48 lines
4.0 KiB
Markdown
# 管理控制台 UI 接入记录
|
||
|
||
日期：2026-11-09。设计来源为仓库提交 `8276da0` 的 `ui/index.html` 和 `ui/design-spec.md`。本次将后台设计接入 `console/` 的真实 Vue 应用；`ui/terminal/` 仍是终端设计参考，本次没有部署终端界面改动。
|
||
|
||
## 页面与样式
|
||
|
||
复用设计稿品牌标识、蜂蜜金橙主色、深浅背景色、18px 圆角、卡片、左侧导航及账号区域。补充页面使用同一套 token 与 Element Plus 图标。Ubuntu、麒麟图标复用设计资源；品牌资源的源文件仍保留在 `ui/`。
|
||
|
||
| 页面 | 当前接入 |
|
||
| --- | --- |
|
||
| 登录 | 品牌区域、管理员表单、错误提示、主题切换 |
|
||
| 总览 | 实际运行桌面、活动连接、已上报 RTT、异常任务、节点水位、最近任务；导出当前汇总 CSV |
|
||
| 桌面管理 | 按设计稿使用系统卡片，保留列表视图、筛选、详情、纳管和电源操作 |
|
||
| 远程会话 | 在线设备的连接预约和已连接会话、已上报 FPS/RTT、终端信息、远程断开确认和任务回执 |
|
||
| 终端管理 | 登记、激活信息、列表、详情、远程命令弹窗统一主题 |
|
||
| 计算资源 | 节点表格、水位与过期状态统一主题 |
|
||
| 用户与授权 | 用户列表、创建、绑定与授权弹窗统一主题 |
|
||
| 任务与审计 | 列表、筛选、任务详情和诊断下载统一主题 |
|
||
| 系统设置 | 分类导航、平台接入、权限矩阵、已接入与待开发能力 |
|
||
|
||
首次访问默认深色，可切换为浅色；选择保存在本浏览器的 `vdi.theme` 中。窄屏使用折叠侧栏，表格在组件内横向滚动。主题覆盖表格、表单、下拉菜单、弹窗、详情抽屉、确认框和错误状态。
|
||
|
||
## 数据和操作边界
|
||
|
||
设计稿中的 128 台桌面、18ms、60FPS、趋势图与 GPU 使用率没有复制到真实应用。未采集指标显示“暂无数据”，历史使用趋势尚无存储来源，因此总览相应位置展示真实节点水位。帧率请求参数与实测 FPS 分开展示。
|
||
|
||
远程会话页复用现有 `/terminals`、`/desktops`、`/users` 和任务接口。仅在线设备的 `connecting` / `connected` 状态显示在会话页；连接预约不计为实际已连接。断开操作使用现有 `reset-session`，提交后等待设备回执。管理端没有接入远程画面采集，因此预览区明确显示“画面预览未接入”。
|
||
|
||
本次没有新增桌面池、克隆、GPU 调度、策略下发或 OTA 后端；系统设置的功能范围显示这些待开发项。没有增加浏览器串流连接按钮或可保存但不生效的策略开关。
|
||
|
||
## 验证
|
||
|
||
- 前端类型检查、ESLint、3 项已有单元测试、生产构建通过。
|
||
- 4 项隔离的 Playwright UI 测试通过：会话指标为空、取消与确认断开、只读角色、连接预约、主题持久化和窄屏导航。命令由浏览器测试接口拦截，不发送到真实盒子。
|
||
- 使用现场真实账号验证 8 个后台页面的深浅主题，在 1440px 和 390px 下无整页横向溢出；检查卡片/列表、空态、详情抽屉、登记弹窗、权限页、快照下载和退出登录。测试没有提交 PVE 电源或设备操作。
|
||
- 页面截图保存在 `docs/evidence/cloud-console-ui-20261109/`。完整矩阵与检查输出保存在本机忽略提交的 `.local/ui-review/`。含活动连接的测试截图由 `e2e/ui.spec.ts` 使用隔离数据生成，不能作为现场串流验收证据。
|
||
|
||
## 启动和维护
|
||
|
||
现场入口仍为 `http://127.0.0.1:5182`，账号与数据库沿用当前真实环境。正常启动见[真实接入说明](cloud-live-integration.md)。只更新前端时可执行：
|
||
|
||
```powershell
|
||
docker compose --env-file .local/live/.env -f deploy/compose.live.yml build console
|
||
docker compose --env-file .local/live/.env -f deploy/compose.live.yml up -d --no-deps console
|
||
```
|
||
|
||
样式集中在 `console/src/styles/tokens.css`，主题逻辑为 `useTheme.ts`，公共导航为 `ConsoleLayout.vue`。本次未提交或推送本机所有开发改动。
|