4.0 KiB
管理控制台 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，账号与数据库沿用当前真实环境。正常启动见真实接入说明。只更新前端时可执行：
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。本次未提交或推送本机所有开发改动。