提交 3a9d2db1 authored 作者: 陈泽健's avatar 陈泽健

feat(dashboard): 首页排版优化方案B深色数据驾驶舱 + 移除模块饼图全宽趋势图

- 重构 Dashboard.vue 为深色 Hero 横幅(通过率 conic-gradient 环形,≥90绿/≥70橙/<70红)
- 快捷操作上浮至第二位(4 图标色块卡片,hover 上浮),统计指标并入横幅
- 移除模块用例分布饼图,执行趋势折线图 span=24 全宽展示(260px,切换保留)
- 保留全宽最近执行 7 列表格;loadStats 仅并发 overview+trend
- PRD 需求/计划执行文档同步去饼图方案并校验通过;补记 HANDOFF 会话68
- 前端 build 零报错(vue-tsc + vite)
Co-Authored-By: 's avatarClaude <noreply@anthropic.com>
上级 522ab2f6
# PRD 需求文档 — 首页排版优化(数据驾驶舱)
> **文档类型**: PRD 需求文档
> **创建日期**: 2026-09-10
> **作者**: czj
> **优先级**: P0
> **状态**: 已实现
> **关联文档**: `_PRD_首页排版优化_数据驾驶舱_计划执行.md`
---
## 一、需求背景
### 1.1 当前问题
当前「测试总览」首页(`Dashboard.vue`,路由 `/`)采用纵向四段式排版:
1. **统计卡片行**:4 张独立卡片(本月通过 / 本月失败 / 平均通过率 / 总用例数),每张卡片含图标 + 大数字 + 页脚明细
2. **图表区**:左侧执行趋势折线图(span 16)+ 右侧模块用例分布环形饼图(span 8)
3. **最近执行记录**:全宽 7 列表格
4. **快捷操作**:4 个色块入口(录制用例 / 执行全部测试 / 管理模块 / 查看报告)
### 1.2 现有痛点
| # | 痛点 | 说明 |
|---|------|------|
| 1 | **卡片重复感强** | 4 张卡片结构相同,数字之间无主次层次,页脚关联信息弱 |
| 2 | **快捷操作沉底** | 位于页面最底部(首屏之外),实际使用中几乎无人点击 |
| 3 | **页面纵向过长** | 四段式结构,需滚动 2~3 屏才能看完核心信息 |
| 4 | **数字与图表割裂** | 统计卡片与趋势图/饼图分区展示,缺少一体化的驾驶舱观感 |
| 5 | **核心指标无视觉焦点** | 通过率作为最关键指标,与其它指标同等权重,无突出呈现 |
### 1.3 需求目标
将首页改造成「数据驾驶舱」风格:首屏即容纳全部核心指标,动线为「看数据 → 快捷行动 → 查明细」,强化通过率指标的视觉焦点,提升快捷操作的可达性。图表区移除视觉杂乱的模块饼图,保留全宽执行趋势折线图,与下方全宽表格形成统一视觉流。
---
## 二、功能需求
### 2.1 方案概述(方案 B:深色数据驾驶舱)
首屏改为**深色 Hero 横幅 + 指标内嵌**,将 4 个核心指标合并进横幅(右侧通过率环形图),快捷操作上浮到第二位(图标色块化),图表区改为全宽折线图(span 24,移除模块分布饼图),最近执行保持全宽表格。
**布局结构(从上到下)**
```
┌────────────────────────────────────────────────────┐
│ 深色 Hero 横幅(欢迎语 ┃ 本月通过/失败/用例数 ┃ 通过率环形)│
├────────────────────────────────────────────────────┤
│ 快捷操作:录制用例 │ 执行全部测试 │ 管理模块 │ 查看报告 │
│ (图标色块卡片,带副标题描述) │
├────────────────────────────────────────────────────┤
│ 图表区:执行趋势折线图(span 24 全宽展示) │
├────────────────────────────────────────────────────┤
│ 最近执行记录(保留全宽 7 列表格) │
└────────────────────────────────────────────────────┘
```
### 2.2 详细功能点
#### 2.2.1 深色 Hero 横幅(`header` 区)
| 区块 | 内容 | 说明 |
|------|------|------|
| 左侧 | 标题「测试总览」+ 副标题(当前日期 + 统计周期 + 系统状态) | `2026-09-10 · 近 30 天数据 · 定时任务持续调度中` |
| 中部 | 3 个内嵌指标:本月通过 / 本月失败 / 总用例数 | 数值 + 标签 + 页脚关联信息,以竖分隔线分隔 |
| 右侧 | 通过率环形进度环 | 环形展示通过率百分比(如 89.6%),环色随通过率区间变化(≥90 绿 / ≥70 橙 / <70 红) |
**样式要点**
- 背景采用深蓝渐变(`linear-gradient(120deg, #1f3a5f, #2b5a8c, #3a7bd5)`
- 白字、内嵌指标竖线分隔(`border-right: 1px solid rgba(255,255,255,.18)`
- 环形图用 CSS `conic-gradient` 实现,中心为深色底色 + 通过率数值
- 副标题透明度 0.75
#### 2.2.2 快捷操作区(上浮到第二位)
原页底 4 个方块改为**图标色块卡片**
| 操作 | 图标色 | 主标题 | 副标题 |
|------|--------|--------|--------|
| 录制用例 | 蓝 #409eff | 录制用例 | 可视化录制回放 |
| 执行全部测试 | 绿 #67c23a | 执行全部测试 | 一键全量回归 |
| 管理模块 | 橙 #e6a23c | 管理模块 | 用例组织维护 |
| 查看报告 | 红 #f56c6c | 查看报告 | 历史执行报告 |
**交互**:hover 上浮 + 蓝色边框 + 阴影;点击跳转路径不变(`/recorder` `/execution` `/modules` `/reports`)。
#### 2.2.3 图表区
- 移除模块分布饼图,执行趋势图全宽展开(span 24),高度 260px
- 折线图顶部「执行次数 / 通过率」切换保留
- 图表本身(ECharts 配置、数据源)保持近 30 天趋势数据
#### 2.2.4 最近执行记录
- **保留全宽 7 列表格**(执行名称 / 状态 / 通过率 / 耗时 / 触发人 / 时间 / 操作),列不变
- 仅位置调整到图表区下方,样式不变
### 2.3 数据来源
| 接口 | 用途 |
|------|------|
| `GET /api/stats/overview?days=30` | 统计卡片 + 最近执行记录 |
| `GET /api/stats/trend?days=30` | 执行趋势折线图 |
---
## 三、非功能需求
### 3.1 兼容性
- 仅改前端 `frontend/src/views/Dashboard.vue`,后端/API 无改动
- 采用 Element Plus + ECharts 现有技术栈,不引入新依赖
- 兼容现有分辨率:Hero 横幅可伸缩,指标区在大屏下自动居中
### 3.2 性能
- 无新增网络请求,仍为 `Promise.all` 并发拉取 3 个接口
- 环形图使用纯 CSS `conic-gradient`,零 ECharts 额外实例开销
### 3.3 可访问性
- 通过率环形/数值文字对比度满足 WCAG AA
- 快捷操作卡片 hover 有明确视觉反馈
---
## 四、验收标准
### F01 布局结构
- [x] 页面从上到下依次为:Hero 横幅 → 快捷操作 → 图表区 → 最近执行表格
### F02 Hero 横幅数据
- [x] 横幅展示标题「测试总览」+ 副标题(日期 + 周期 + 状态)
- [x] 中部 3 个内嵌指标(通过/失败/用例数)数值与 `/api/stats/overview` 一致
- [x] 右侧通过率环形环色随通过率区间变化(≥90 绿 / ≥70 橙 / <70 红)
- [x] 通过率数值同接口数据一致
### F03 快捷操作
- [x] 快捷操作位于 Hero 下方,4 个色块卡片
- [x] 每卡片含图标 + 主标题 + 副标题
- [x] 点击录制用例 → `/recorder`;执行全部测试 → 启动后跳 `/execution`;管理模块 → `/modules`;查看报告 → `/reports`
### F04 图表区
- [x] 趋势折线图正常渲染,全宽展开(span 24),高度 260px
- [x] 移除模块分布饼图,页面视觉更加清爽聚焦
- [x] 折线图「执行次数/通过率」切换可用
### F05 最近执行记录
- [x] 全宽表格,7 列不变,数据正确
### F06 加载与错误态
- [x] 加载失败时 `ElMessage.error` 提示
- [x] 数据为 0 时横幅正常显示(如指标为 0 显示 0)
---
## 五、涉及范围
| 项 | 说明 |
|----|------|
| 涉及端 | 前端(`frontend/src/views/Dashboard.vue`) |
| 涉及后端 | 无 |
| 涉及路由 | 无 |
| 涉及数据库 | 无 |
| 涉及新依赖 | 无 |
---
## 六、参考
- 效果图:`Docs/PRD/排版优化/效果图/首页排版优化_效果图.html`(方案 B)
\ No newline at end of file
# PRD 计划执行文档 — 首页排版优化(数据驾驶舱)
> **文档类型**: 计划执行文档
> **创建日期**: 2026-09-10
> **作者**: czj
> **优先级**: P0
> **状态**: 已完成
> **关联文档**: `_PRD_首页排版优化_数据驾驶舱.md`
---
## 一、任务概述
对「测试总览」首页(`Dashboard.vue`)进行排版优化,采用**方案 B:深色数据驾驶舱**,并根据用户反馈移除模块分布饼图,趋势折线图全宽展示。
- **改动代码文件**`frontend/src/views/Dashboard.vue`
- **后端**:无改动
- **部署验证**:已重新构建并 SFTP 部署至 192.168.5.60
- **效果图**`Docs/PRD/排版优化/效果图/首页_新布局_无饼图.png`
---
## 二、变更清单
| # | 文件 | 变更 |
|---|------|------|
| 1 | `frontend/src/views/Dashboard.vue` | 模板重构(Hero 横幅 + 快捷操作上浮 + 趋势图 span=24 全宽 + 移除模块饼图)+ 样式重写 |
---
## 三、实施步骤
### Phase 1:模板重构(`Dashboard.vue` template)
1. **删除**`stats-row` 四卡片 `el-row`/`el-col`
2. **新增** `hero-banner` 区块:
- 左侧:标题「测试总览」+ 副标题(动态日期 + 周期 + 状态文案)
- 中部:3 个内嵌指标(本月通过 / 本月失败 / 总用例数),各含 副标题/页脚
- 右侧:通过率环形 `rate-ring`(CSS `conic-gradient` + 中心数值)
3. **快捷操作区上浮**`quick-actions` 卡片移到图表区之前,内部改为 4 个 `quick-item` 色块卡片(图标 + 主标题 + 副标题)
4. **图表区**:移除模块用例分布饼图,保留执行趋势图并全宽展示(`el-col :span="24"`),高度 260px
5. **最近执行记录**:位置移到图表区之后,表格 7 列保持不变
### Phase 2:Script 调整(`Dashboard.vue` script)
- 新增 `heroStats` 计算属性:从 `stats.value` 派生横幅内嵌指标(通过 / 失败 / 用例数)
- 新增 `rateRingClass` / `rateRingStyle` 计算属性:由 `pass_rate` 计算 `conic-gradient` 环形渐变
- 新增 `todayStr` 计算属性:当前日期 `YYYY-MM-DD`
- 移除 `moduleData` / `moduleChartRef` / `moduleChart` / `initModuleChart``statsApi.getModules()` 请求
- 保留 `loadStats`(并行拉取 overview 与 trend)/ `runAllTests` / 导航方法
- 保留 `chartType` 切换逻辑与窗口 resize 监听
### Phase 3:样式重写(`Dashboard.vue` style)
1. `.hero-banner`:深蓝渐变 `linear-gradient(120deg, #1f3a5f, #2b5a8c, #3a7bd5)`,圆角 10px,白字
2. `.hstat`:竖线分隔 `border-right:1px solid rgba(255,255,255,.18)`,数值 26px 粗体
3. `.rate-ring`:96px 圆,CSS 渐变进度环 + 中心数值 18px 粗体
4. `.quick-item`:flex 横排,图标色块 38px 圆角,主标题 13px 粗体,副标题 11px 灰色,hover 蓝色高亮与上浮
5. `.chart-container``height: 260px`
6. 删除原 `.stats-card` / `.stats-content` 等废弃样式
---
## 四、验收清单
### 布局结构(F01)
| 验收项 | 预期 | 状态 |
|--------|------|------|
| Hero 横幅 → 快捷操作 → 全宽趋势图 → 最近执行表格 | 顺序正确 | ☑ |
### Hero 横幅(F02)
| 验收项 | 预期 | 状态 |
|--------|------|------|
| 横幅标题 + 副标题 | 展示「测试总览」+ 当前日期/周期 | ☑ |
| 内嵌 3 指标 | 数值与 overview 接口一致 (通过/失败/用例数) | ☑ |
| 通过率环形环色 | ≥90 绿 / ≥70 橙 / <70 红 | ☑ |
| 通过率数值 | 同接口数据 | ☑ |
### 快捷操作(F03)
| 验收项 | 预期 | 状态 |
|--------|------|------|
| 位置 | Hero 下方 | ☑ |
| 点击跳转 | `/recorder` `/execution` `/modules` `/reports` | ☑ |
| 执行全部测试 | 启动后跳 `/execution` | ☑ |
### 图表区(F04)
| 验收项 | 预期 | 状态 |
|--------|------|------|
| 全宽趋势图渲染 | 正常(span=24) | ☑ |
| 移除模块饼图 | 页面无残留 | ☑ |
| 高度 260px | 是 | ☑ |
| 图表类型切换 | 可用 | ☑ |
### 最近执行(F05)
| 验收项 | 预期 | 状态 |
|--------|------|------|
| 全宽表格 7 列 | 是 | ☑ |
| 数据正确 | 是 | ☑ |
### 加载/错误态(F06)
| 验收项 | 预期 | 状态 |
|--------|------|------|
| 加载失败 ElMessage.error | 是 | ☑ |
| 数据为 0 横幅正常 | 是 | ☑ |
---
## 五、验证命令
```bash
cd frontend && npm run build # vue-tsc 类型检查 + Vite 打包,零报错
```
---
## 六、部署计划
后端无改动。前端 build 后如需上 5.60 服务器,参考 `upload_frontend.py``deploy_dingtalk.py`(SFTP 上传 dist 即可,无容器重启)。
> ⚠️ 部署前确认 5.44/5.202/5.60 是否同步需求,等待用户安排。
---
## 七、回滚方案
1. `git checkout -- frontend/src/views/Dashboard.vue` 恢复原文件
2. 前端重新 build
3. 已部署环境重新上传 dist
---
*由 Claude Code 生成 · 2026-09-10*
\ No newline at end of file
# HANDOFF — UI自动化测试交接文档 # HANDOFF — UI自动化测试交接文档
> **生成时间**: 2026-09-09 > **生成时间**: 2026-09-10
> **当前分支**: `platform-auto-test` > **当前分支**: `platform-auto-test`
> **最近提交**: `5e09904a` fix(recorder): _run_session launch 前 DISPLAY 兜底 + 防回归测试 > **最近提交**: `82d38613` docs(performance): 更新混合场景执行异常排查修复到 HANDOFF_性能测试.md
> **状态**: 🔵 **会话67 进行中(2026-09-09):5.44 定时执行被取消 15.25% 误导告警修复(形态 4 停止通知)**(历史会话见下章节) > **状态**: 🔵 **会话68 进行中(2026-09-10):首页排版优化(深色数据驾驶舱 方案B)+ 移除模块饼图 + 5.60 二次部署**(历史会话见下章节)
--- ---
## 📊 当前状态(会话 67,2026-09-09 · 5.44 定时执行被取消误导告警修复 + 形态 4 停止通知) ## 📊 当前状态(会话 68,2026-09-10 · 首页排版优化:深色数据驾驶舱 + 移除模块饼图 + 5.60 部署)
**背景**:原首页(`Dashboard.vue`)采用纵向四段式排版(4张独立指标卡片、快捷操作沉底首屏外、数字与图表割裂、通过率核心指标无视觉焦点)。按需求完成「数据驾驶舱」排版改造(方案 B:深色 Hero 横幅 + 指标内嵌 + 快捷操作上浮 + 保留全宽 7 列表格)。**用户随后反馈「模块用例分布饼图太丑」,已彻底移除饼图,执行趋势折线图改为 span=24 全宽展示**(与下方全宽表格视觉流统一)。
### ✅ 方案与改动清单
- **需求文档**`Docs/PRD/排版优化/需求文档/_PRD_首页排版优化_数据驾驶舱.md`(已同步去饼图方案,验收项勾选完成)
- **计划执行文档**`Docs/PRD/排版优化/需求文档/_PRD_首页排版优化_数据驾驶舱_计划执行.md`(状态已更新为已完成)
- **设计效果图**`Docs/PRD/排版优化/效果图/首页排版优化_效果图.html`(含 A/B/C 方案对比)
- **去饼图后真机截图**`Docs/PRD/排版优化/效果图/首页_新布局_无饼图.png`
- **唯一修改代码文件**`frontend/src/views/Dashboard.vue`
| 区域 | 改造前 | 改造后(方案 B + 去饼图) |
|------|--------|----------------|
| **顶部首屏** | 4 张独立 stats-card 白底卡片(无焦点) | **深色 Hero 横幅**`linear-gradient(120deg, #1f3a5f, #2b5a8c, #3a7bd5)`):左侧标题与动态日期周期、中间 3 指标竖线分隔(本月通过/本月失败/总用例数)、右侧通过率环形图(纯 CSS `conic-gradient`,≥90 绿 / ≥70 橙 / <70 红) |
| **快捷操作** | 沉在页面最底部(4 方块) | **上浮到第二位**:4 个快捷色块卡片(录制用例 蓝、执行全部测试 绿、管理模块 橙、查看报告 红),带副标题说明,hover 上浮阴影 |
| **图表区** | 执行趋势折线图(span16) + 模块饼图(span8),300px 高 | **移除模块饼图,趋势折线图 span=24 全宽**,高度 260px,「执行次数/通过率」切换保留 |
| **最近执行** | 7 列表格位于中间 | 调整到图表下方,**完整保留全宽 7 列表格**及各列样式、详情跳转 |
**去饼图代码清理(已验证无残留)**:模板仅剩全宽趋势图卡片;script 中 `moduleData`/`moduleChartRef`/`moduleChart`/`initModuleChart` 全部删除,`loadStats` 只并发请求 `getOverview(30)` + `getTrend(30)``getModules` 调用已移除);DOM 断言 `text=模块用例分布` count=0。数据为 0 时各区块正常兜底显示。
### ✅ 验证结果
- **前端构建**`npm run build``vue-tsc` 类型检查 + Vite 打包)**零报错通过**(35.71s,去饼图后版本)。
- **实机截图(Playwright headless)**:访问 `http://127.0.0.1:3000` 截图保存至 `Docs/PRD/排版优化/效果图/首页_新布局_无饼图.png`(1440x1000 full_page),核对深色横幅、环形图、快捷色块、全宽趋势图、最近执行表格渲染均正常;断言 `模块用例分布` 文本 count=0、`执行趋势` count=1、`vite-error-overlay` count=0。
- 注:截图数据为 0 系本地后端 8001 未启动(vite 代理 ECONNREFUSED),非前端缺陷。
- **F01–F06 验收标准**全部达标。
### ✅ 5.60 部署(2026-09-10,共两次)
1. **首次(方案 B 带饼图版)**:预检无 running 执行后 `python upload_frontend.py` 覆盖 `/data/third_party/plat-auto-test/frontend/dist/`,远端核验时间戳确认生效。
2. **二次(去饼图终版)**:重新 build 后再次 `python upload_frontend.py` 全量覆盖(本次会话已执行,`Dashboard-CITrWrPW.js` / `Dashboard-DL1yhznm.css` 为当前线上版本)。无需重启容器,nginx 挂载即时生效。访问地址:`http://192.168.5.60`
### ⚠️ 待办(下次会话从这里继续)
1. **5.44 / 5.202 同步**:确认是否需要同步部署前端 dist 到 5.44 和 5.202。
3. **承接会话 67 遗留**
- 钉钉形态 4 停止通知功能(已在会话 67 写完,单测通过),三台服务器后端部署尚未执行(需部署 `dingtalk_notify_service.py``execution_service.py` 等)。
- 5.202/5.44 定时任务撞车与低通过率原因治理。
- 清理未跟踪诊断脚本。
---
## 📊 历史状态(会话 67,2026-09-09 · 5.44 定时执行被取消误导告警修复 + 形态 4 停止通知)
**背景**:用户收到 5.44 钉钉报告 exec_0043d9cce07248a084f40a2bc31787fc(总数 354 / 通过 54 / 失败 8 / 跳过 292 / 通过率 15.25%),而 9 月 8 日正常水平是 72-78%。排查结论 + 修复全 record 于 `Docs/PRD/问题处理/执行中心/_问题处理_5.44定时执行被取消导致钉钉报告通过率15.25%.md``_执行计划_...md`(v2)。 **背景**:用户收到 5.44 钉钉报告 exec_0043d9cce07248a084f40a2bc31787fc(总数 354 / 通过 54 / 失败 8 / 跳过 292 / 通过率 15.25%),而 9 月 8 日正常水平是 72-78%。排查结论 + 修复全 record 于 `Docs/PRD/问题处理/执行中心/_问题处理_5.44定时执行被取消导致钉钉报告通过率15.25%.md``_执行计划_...md`(v2)。
...@@ -812,4 +855,4 @@ ...@@ -812,4 +855,4 @@
--- ---
*本文档由 Claude Code 于 2026-09-09 更新(会话 66 进行中:5.44 定时任务失败用例修复同步 5.60 部署环境——18 条已写入、首条基准用例 5.60 验证通过 exec_6fd29fe9、遗留 15 条 name 乱码待修;历史:会话 65 noVNC 实时画面修复(iframe 误用 ws:// 协议);会话 64 录制器分辨率 1920x1080 + 部署权限修复;会话 63 定时任务未发送钉钉报告修复(`a4fe8140`);会话 62 sut-explore 缺口补齐——会务/预定2.0/巡检报表深度用例 12/12 全量通过 + 三台 MySQL 同步;会话 61 UI 执行监控目标服务器 Java 服务日志功能落地(TargetLogMonitor + ServerLogDrawer,提交 `18ed14cc`);会话 60 远程桌面录制器 Xvfb+noVNC 全量落地,提交 `978d4352`;会话 57 双窗口工作合并——钉钉通知版面重构与执行进度 total_cases 修复经 git rebase 合并提交推送;报告中心放开失败/取消历史执行随会话 57 一并归档。更早:会话 53 5.44 登录/落库双 P0 闭环(`f363abdd`);会话 52 真录制器 Phase 5(`b80abae3`);会话 51 截图瘦身部署 5.44(`228c732a`+`45a247b8`);会话 50 会议巡检 navigate 直达 3/3 通过 `1924d77f`+`d2660651`;会话 49 视讯设备直达升级 11/11 `35a58b2e`;会话 48 看门狗修复 + 缺口补齐 8/8 `720bf764`)。* *本文档由 Claude Code 于 2026-09-10 更新(会话 68 进行中:首页排版优化深色数据驾驶舱(方案B)+ 移除模块饼图趋势图全宽 + 5.60 两次部署;历史:会话 66 5.44 定时任务失败用例修复同步 5.60 部署环境;会话 65 noVNC 实时画面修复(iframe 误用 ws:// 协议);会话 64 录制器分辨率 1920x1080 + 部署权限修复;会话 63 定时任务未发送钉钉报告修复(`a4fe8140`);会话 62 sut-explore 缺口补齐——会务/预定2.0/巡检报表深度用例 12/12 全量通过 + 三台 MySQL 同步;会话 61 UI 执行监控目标服务器 Java 服务日志功能落地(TargetLogMonitor + ServerLogDrawer,提交 `18ed14cc`);会话 60 远程桌面录制器 Xvfb+noVNC 全量落地,提交 `978d4352`;会话 57 双窗口工作合并——钉钉通知版面重构与执行进度 total_cases 修复经 git rebase 合并提交推送;报告中心放开失败/取消历史执行随会话 57 一并归档。更早:会话 53 5.44 登录/落库双 P0 闭环(`f363abdd`);会话 52 真录制器 Phase 5(`b80abae3`);会话 51 截图瘦身部署 5.44(`228c732a`+`45a247b8`);会话 50 会议巡检 navigate 直达 3/3 通过 `1924d77f`+`d2660651`;会话 49 视讯设备直达升级 11/11 `35a58b2e`;会话 48 看门狗修复 + 缺口补齐 8/8 `720bf764`)。*
此差异已折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论