Skip to content

U
ubains-module-test
提交 82c10f56 authored 作者: 陈泽健's avatar 陈泽健
浏览文件
操作

feat(ui-recorder): 用例录制器全屏放大 + 菜单迁移改名（requestFullscreen 修复 + 5.60 实机复验闭环）... 

feat(ui-recorder): 用例录制器全屏放大 + 菜单迁移改名（requestFullscreen 修复 + 5.60 实机复验闭环） Co-Authored-By: Claude <noreply@anthropic.com>
上级 03272305
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 425 行增加 和 16 行删除
Docs/PRD/问题处理/录制器/_执行计划_用例录制器全屏放大_菜单迁移.md 0 → 100644
浏览文件 @ 82c10f56
# 执行计划 - 用例录制器全屏放大 + 菜单迁移/改名
> **文档类型**: 执行计划文档
> **创建日期**: 2026-09-10
> **作者**: czj
> **关联需求文档**: [_需求文档_用例录制器全屏放大_菜单迁移.md](_需求文档_用例录制器全屏放大_菜单迁移.md)
> **状态**: Phase 1-4 已完成（修复版已重部署 5.60 并实机验证通过）；Phase 5/6 待用户安排
---
## 一、目标
1. noVNC 录制画面支持**放大到整个浏览器窗口**（浏览器原生 Fullscreen API，坐标无损）；
2. 录制器从「辅助工具」菜单迁移到「自动化测试」菜单下，改名「用例录制器」；
3. 本地防回归验证全绿，部署 5.60 实机验证。
## 二、任务分解
### 阶段 1：前端全屏放大支持
- [ ] 1.1 `frontend/src/views/Recorder.vue`：
- noVNC 卡片增加 `ref="vncCardRef"` + `:class="{ 'is-fullscreen': isFullscreen }"`；
- 工具条新增「全屏 / 退出全屏」按钮（`FullScreen` 图标，`v-if="fullscreenSupported"` 降级隐藏）；
- `toggleFullscreen()`：进入走 `el.requestFullscreen()`（通过 `$el` 取 el-card 底层真实 DOM，组件实例无该方法 → 已修复 `e.requestFullscreen is not a function`），退出走 `document.exitFullscreen()`；
- `onFullscreenChange()` 监听 `fullscreenchange`（按钮 / ESC / 浏览器手势统一同步 `isFullscreen`）；
- 全屏 SCSS：`.is-fullscreen` 容器 `100vh` 铺满 + `.vnc-frame-wrap` absolute 占满 + `overflow:auto`，工具条缩放仍可用；
- 工具条提示追加「ESC 退出全屏」。
- [ ] 1.2 `npm run build`（vue-tsc + Vite）零报错 + `npm run lint` 通过。
### 阶段 2：菜单迁移与改名
- [ ] 2.1 `frontend/src/App.vue`：
- 「用例录制器」迁入「自动化测试 /auto」父菜单（用例管理之后、执行中心之前）；
- 「辅助工具」父菜单移除（迁走后仅剩 1 项，避免空菜单）；
- `Tools` 图标引用替换为 `Camera`；pageTitle `/recorder` → 「用例录制器」。
- [ ] 2.2 `frontend/src/router/index.ts`：`/recorder` meta.title `用例录制` → `用例录制器`。
### 阶段 3：防回归测试
- [ ] 3.1 后端 `pytest tests/test_recorder_e2e.py` 不回归；
- [ ] 3.2 前端 build / lint 零报错。
### 阶段 4：部署 5.60 实机验证
- [x] 4.1 前端 dist 全量同步 5.60 宿主机 `/data/third_party/plat-auto-test/deploy/dist/`；
- [x] 4.2 容器 `docker compose restart app` → healthy，前端 200；
- [x] 4.3 实机验证：菜单迁移生效、「用例录制器」可进入、全屏按钮可见、全屏下画面占满窗口 + 缩放工具条可用 + ESC/按钮退出正常。
### 阶段 5：三台服务器同步部署
- [ ] 5.1 5.60 验证稳定后，同步 5.44 / 5.202（前端 dist 全量）；
- [ ] 5.2 双端验证 API + 实机抽查。
### 阶段 6：归档
- [ ] 6.1 HANDOFF_UI自动化.md 记录本次变更；
- [ ] 6.2 本执行计划状态更新为「已完成」。
## 三、实施记录
> 2026-09-10 代码实施完成（Phase 1-3 全绿）；首轮部署 5.60 暴露全屏按钮 Bug（`e.requestFullscreen is not a function`），已定位修复并重部署 5.60，实机复验通过（Phase 4 闭环）——详见下方 Phase 4 实施记录。
### Phase 1：前端全屏放大支持 ✅
- `Recorder.vue`：
- noVNC 卡片 `ref="vncCardRef"` + `is-fullscreen` class；
- 工具条「全屏 / 退出全屏」按钮 + `FullScreen` 图标；
- **`e.requestFullscreen is not a function` 修复**：el-card 是组件实例（Vue 组件），无 `requestFullscreen` 方法——通过 `comp.$el` 提取底层真实 HTMLElement 再调用；
- `toggleFullscreen` 入口做能力检测（`typeof el.requestFullscreen === 'function'`），不支持时 `ElMessage.warning` 提示而非抛 TypeError；
- `fullscreenchange` 监听统一同步（按钮 / ESC / 浏览器手势）；
- 全屏 SCSS：`.is-fullscreen` 高度 `100vh` + `.vnc-frame-wrap` absolute 铺满 + `overflow:auto`；
- 工具条提示追加「ESC 退出全屏」。
- 坐标无损：仅放大视口，不缩放 iframe 像素/坐标系，noVNC `resize=scale` 换算坐标机制与嵌入模式一致 → 定位精度不变（需求约束满足）。
### Phase 2：菜单迁移与改名 ✅
- `App.vue`：「用例录制器」迁入「自动化测试 /auto」菜单（用例管理之后、执行中心之前）；「辅助工具」父菜单移除；`Tools` → `Camera` 图标；pageTitle `/recorder` → 「用例录制器」；
- `router/index.ts`：`/recorder` meta.title → 「用例录制器」。
### Phase 3：防回归测试 ✅
- 前端 `npm run build`（vue-tsc + Vite）零报错；`npm run lint` 0 errors（15 warnings 为历史存量 unused-vars，非本次引入）；
- 后端 `pytest tests/test_recorder_e2e.py` 不回归。
### Phase 4：部署 5.60 实机验证 ✅（2026-09-10，修复版重部署完成，实机复验通过）
- 首轮前端 dist 全量同步 5.60 宿主机 `/data/third_party/plat-auto-test/frontend/dist/`（容器 bind mount 该目录，前端热生效）；
- **用户实机反馈 Bug**：点击「全屏」按钮提示 `进入全屏失败: e.requestFullscreen is not a function`；
- **根因**：`ref="vncCardRef"` 绑定的是 el-card **Vue 组件实例**而非 DOM 元素，组件实例上没有 `requestFullscreen` 方法（报错信息中的 `e` 即被压缩后的组件实例）；
- **修复**（`Recorder.vue`）：
- 新增 `getVncPanelEl()`：通过 `comp.$el` 提取 el-card 底层真实 HTMLElement 后再调用 `requestFullscreen()`；
- `toggleFullscreen` 入口增加能力检测 `typeof el.requestFullscreen === 'function'`，不支持时 `ElMessage.warning` 降级提示，不再抛 TypeError；
- 修复后重新 `npm run build`：新 chunk `Recorder-Co1aW74X.js`（含 `$el` 修复），lint 0 errors，后端 `pytest tests/test_recorder_e2e.py` 19 passed；
- **重部署（网络恢复后完成）**：新 dist 打包 `/tmp/dist_full.tgz` 同步 5.60 宿主机 `frontend/dist/`，在容器 bind mount 目录内**原地解包覆盖**（`rm -rf assets index.html && tar xzf`，未 mv 目录，避免破坏 bind mount inode）；容器 `docker compose restart app` → healthy；
- **访问方式确认**：5.60 前端由 app 容器发布在宿主机 **80 端口（443 关闭）**，访问须用 `http://192.168.5.60/recorder` 而非 https；
- **实机复验（新录制会话 rec_07fa183637784b9682d1f7111b12f102，全屏修复版）**：
- 菜单迁移生效：「自动化测试」菜单下显示「用例录制器」，无「辅助工具」残留；页面标题「用例录制器」；
- 新 chunk `Recorder-Co1aW74X.js` 加载正常（200 @ 18492B）；
- 有头模式录制会话启动，noVNC iframe 连通（VNC 状态 + Canvas 渲染）；
- **点击「全屏」→ `document.fullscreenElement === true`，全屏元素为 `DIV.el-card.vnc-panel.is-fullscreen`（`$el` 修复生效），工具条按钮切换为「退出全屏」，不再抛 `requestFullscreen is not a function`**；
- 全屏下缩放工具条「1:1 / 适应窗口」仍可用；提示文案「缩放 适应 · Ctrl+滚轮可放大画面 · ESC 退出全屏」；
- **退出全屏**：点击「退出全屏」→ `document.fullscreenElement === false`，按钮恢复「全屏」，回到嵌入模式；
- 停止录制：停止按钮 + `/api/recorder/stop` 200，`/api/recorder/current` 返回 null，会话清理干净；
- **验证期间观察**：app 容器内 uvicorn **未带 `--reload`** 启动，验证中偶发的应用重启（"Network Error"/"Shutting down"）为外部因素（并行执行 `exec_6c688dc2` 取消等），**与本次 dist 部署/修复无关**。
### Phase 5 / Phase 6：待执行（待用户安排）
- Phase 5（同步 5.44 / 5.202）与 Phase 6（归档）尚未执行，待用户确认后进行。
## 四、验收标准
| 测试项 | 预期结果 |
|--------|----------|
| 全屏按钮 | 工具条出现「全屏」按钮，点击后 noVNC 画面占满整个浏览器窗口 |
| 全屏操作 | 全屏状态下直接操作画面（点击/输入）精确，无坐标偏移 |
| 全屏缩放 | 全屏状态下缩放工具条放大/缩小/1:1/适应窗口仍可用 |
| 退出全屏 | 按钮/ESC 均可退出，恢复到嵌入模式 |
| 定位精度 | 全屏放大 2x 后录制步骤选择器/坐标不偏移，回放通过（与嵌入模式一致） |
| 菜单迁移 | 「自动化测试」菜单下显示「用例录制器」并可进入；「辅助工具」菜单不再含录制器残留 |
| 标题 | 页面标题/路由标题显示「用例录制器」 |
| 防回归 | `npm run build`（vue-tsc + Vite）零报错 + `npm run lint` 通过；后端 `pytest tests/test_recorder_e2e.py` 不回归 |
## 五、相关文件
| 文件 | 角色 |
|------|------|
| `frontend/src/views/Recorder.vue` | 全屏按钮 + Fullscreen API + 全屏 SCSS |
| `frontend/src/App.vue` | 菜单迁移（/auto 下「用例录制器」）+ 辅助工具移除 + pageTitle 改名 |
| `frontend/src/router/index.ts` | /recorder meta.title 改为「用例录制器」 |
| `Docs/PRD/问题处理/录制器/_需求文档_用例录制器全屏放大_菜单迁移.md` | 需求文档（REQ-F01 ~ F06） |
| `HANDOFF_UI自动化.md` | 会话交接文档 |
## 六、回退方案
1. **前端**：`Recorder.vue` 移除全屏按钮/`is-fullscreen` SCSS 与相关监听即可恢复原样（代码可 git revert）；
2. **菜单**：`App.vue` 恢复「辅助工具」父菜单 + `router/index.ts` 标题回退（代码可 git revert）；
3. **兼容性**：不支持 Fullscreen API 的浏览器按钮自动隐藏，不影响既有缩放/录制功能。
---
*本文档由 Claude Code 生成，遵循项目执行计划文档规范。*
Docs/PRD/问题处理/录制器/_需求文档_用例录制器全屏放大_菜单迁移.md 0 → 100644
浏览文件 @ 82c10f56
# 需求文档 - 用例录制器全屏放大 与 菜单迁移/改名
> **文档版本**: v1.0
> **创建日期**: 2026-09-10
> **文档状态**: 已确认（用户提出）
> **负责人**: czj
> **目标服务器**: 192.168.5.60（后续同步 5.44 / 5.202）
> **关联文档**: [_需求文档_有头模式放大操作_流畅度优化.md](_需求文档_有头模式放大操作_流畅度优化.md)（放大工具条基线，已完成）、[_执行计划_有头模式放大操作_流畅度优化.md](_执行计划_有头模式放大操作_流畅度优化.md)
> **变更性质**: 增量增强（全屏展示 + 菜单位置调整，架构不变）
---
## 一、背景
用例录制器（Recorder.vue）目前以 **iframe 嵌入式**展示 noVNC 实时录制画面（1920x1080 基线），已支持工具条缩放（放大/缩小/1:1/适应窗口）+ `Ctrl+滚轮` noVNC 内部缩放，放大后通过外层 `overflow: auto` 滚动平移，点击坐标 1:1 精准。
用户反馈两个新需求：
1. **全屏放大**：能否把 noVNC 录制画面放大到**整个浏览器窗口**显示（而非仅限内容区 iframe 卡片），便于精细观察/操作小元素。
2. **菜单迁移与改名**：录制器目前放在「辅助工具 → 用例录制」下，要求**迁移到「自动化测试」菜单**下，名字改为**「用例录制器」**。
**关键约束（用户明确）**：如果全屏放大会影响定位准确度，那就不要了——**全屏放大必须在不降低定位精度的前提下实现**。
## 二、需求目标
| 需求 ID | 需求描述 | 优先级 |
|---------|---------|--------|
| REQ-F01 | 录制画面支持**放大到整个浏览器窗口**（全屏展示 noVNC 画面） | P0 |
| REQ-F02 | **坐标无损**：全屏放大不得改变 noVNC 内部坐标系/点击映射，录制步骤定位精度与嵌入模式完全一致 | P0 |
| REQ-F03 | 全屏模式保留核心交互：直接在画面中操作、缩放工具条、退出全屏 | P0 |
| REQ-F04 | 菜单迁移：录制器从「辅助工具」迁移到「自动化测试」菜单下，显示名改为「用例录制器」 | P0 |
| REQ-F05 | 路由/页面标题等文字同步更正为「用例录制器」（meta.title、pageTitle 映射） | P1 |
| REQ-F06 | 防回归测试同步更新（前端 build / lint 零报错） | P1 |
## 三、技术方案
### 3.1 全屏放大（前端，浏览器原生 Fullscreen API）
**核心原理**：**不缩放 iframe 像素、不新增窗口**，而是用浏览器原生 `Element.requestFullscreen()` 将 noVNC 容器（含工具条的卡片整体）放大到整个浏览器窗口视口。
| 项 | 说明 |
|----|------|
| 触发方式 | 工具条新增「全屏」按钮（`<el-button>` + 图标 `FullScreen` / 文案「全屏」） |
| 实现 API | 容器 DOM ref → `requestFullscreen()`；退出走 `document.exitFullscreen()` + `fullscreenchange` 事件监听同步状态 |
| 全屏后的布局 | 全屏时隐藏页面其他内容（App.vue 侧边栏/顶栏由浏览器原生全屏天然隐藏），容器占满视口，iframe 尺寸设 `width: 100%; height: calc(100vh)` 铺满 |
| 与现有缩放兼容 | 工具条「放大/缩小/1:1/适应窗口」在全屏状态下继续可用——缩放仍是**对 iframe 真实像素尺寸**（`VNC_BASE_WIDTH * scale`）的调整，配合容器 `overflow:auto` 滚动平移，坐标映射保持 1:1 → **定位精度不受影响** |
| 坐标保真证明 | noVNC 鼠标事件基于远端 framebuffer 像素坐标上报，前端无论嵌在内容区还是全屏视口，iframe 与远端坐标系始终 1:1（`resize=scale` 是 noVNC 内部等比适配，点击坐标由 noVNC 换算，与浏览器窗口大小无关） |
| 不支持 Fullscreen API 的旧浏览器 | 按钮 `v-if="isFullscreenSupported()"` 隐藏，不影响既有功能 |
| 移动端/嵌套 iframe 限制 | 平台内 iframe 是 noVNC，本项目自身页面非 iframe，可正常 fullscreen |
**不采用方案（已排除）**：
- `window.open(vncUrl)` 新窗口打开 noVNC：新窗口是独立上下文，元素/工具条/录制会话状态难联动，且无坐标优势 → 排除。
- 前端视觉层面 `transform: scale()` 放大整个卡片：CSS transform 会导致 noVNC 内客户端鼠标坐标与远端 framebuffer 非线性错位 → **会降低定位精度，违反用户约束，排除**（与上一次迭代结论一致）。
### 3.2 菜单迁移与改名（前端）
| 位置 | 现状 | 目标 |
|------|------|------|
| `App.vue` 侧边栏 | 「辅助工具」父菜单下的「用例录制」 | 移到「自动化测试 /auto」父菜单下（放在「用例管理」之后、「执行中心」之前），文案「用例录制器」 |
| `router/index.ts` | `/recorder` meta.title = `用例录制` | meta.title = `用例录制器` |
| `App.vue` pageTitle | `/recorder` → `用例录制` | `/recorder` → `用例录制器` |
| 辅助工具菜单 | 仅剩 1 项（用例录制）迁走 | 「辅助工具」菜单若空则移除或保留兜底（保留空菜单会显示空子菜单，建议**移除空父菜单**，或保留但无子项——取移除，避免空菜单） |
### 3.3 关键链路图（全屏放大）
```
[用户浏览器窗口 100% 视口]
│ requestFullscreen() 原生全屏
[.vnc-panel 容器]（含工具条 + iframe，占满视口）
│ 缩放工具条仍可用（像素尺寸缩放 + overflow:auto 平移）
[noVNC iframe]（resize=scale 等比适配，内部坐标恒 1:1）
│ WebSocket ws://host:6080/websockify
[websockify → x11vnc → Xvfb ← Chromium]（后端链路不变）
```
## 四、非功能需求
| 指标 | 要求 | 验证方式 |
|------|------|---------|
| 全屏切换响应 | 点按钮到全屏 < 300ms，退出 < 300ms | 5.60 实机体验 |
| 定位精度 | 全屏放大后点击/输入仍精准落在元素（与嵌入模式一致） | 录制含小按钮用例并回放 |
| 已有缩放 | 全屏状态下工具条缩放/平移仍可用 | 5.60 实机 |
| 兼容性 | 不支持 Fullscreen API 的浏览器按钮隐藏 | 代码降级 |
| 菜单 | 「自动化测试」下出现「用例录制器」，辅助工具无残留 | 前端 build + 页面检查 |
## 五、验收标准
| 测试项 | 预期结果 |
|--------|----------|
| 全屏按钮 | 工具条出现「全屏」按钮，点击后 noVNC 画面占满整个浏览器窗口 |
| 全屏操作 | 全屏状态下直接操作画面（点击/输入）精确，无坐标偏移 |
| 全屏缩放 | 全屏状态下缩放工具条放大/缩小/1:1/适应窗口仍可用 |
| 退出全屏 | 按钮/ESC 均可退出，恢复到嵌入模式 |
| 定位精度 | 全屏放大 2x 后录制步骤选择器/坐标不偏移，回放通过（与嵌入模式一致） |
| 菜单迁移 | 「自动化测试」菜单下显示「用例录制器」并可进入；「辅助工具」菜单不再含录制器残留 |
| 标题 | 页面标题/路由标题显示「用例录制器」 |
| 防回归 | `npm run build`（vue-tsc + Vite）零报错 + `npm run lint` 通过；后端 `pytest tests/test_recorder_e2e.py` 不回归 |
## 六、风险评估
| 风险 | 概率 | 影响 | 缓解措施 |
|------|------|------|---------|
| 全屏后 iframe 与视口高度适配不佳出现黑边 | 中 | 低 | 全屏容器高度 `100vh` + iframe 铺满 + `overflow:auto`，黑边由 noVNC `resize=scale` 等比消除 |
| Fullscreen API 触发失败（权限/多 iframe 嵌套） | 低 | 中 | 捕获 `requestFullscreen()` Promise reject 并 `ElMessage` 提示；仅在支持时渲染按钮 |
| CSS transform 误用导致坐标偏移（回退风险） | 低 | 高 | 坚守「像素尺寸缩放」方案，代码注释明确禁止 transform scale |
| 菜单迁移影响既有导航习惯 | 低 | 低 | 仅移动菜单项，路由路径 `/recorder` 不变，无外部断链 |
---
*本文档由 Claude Code 生成，评审通过后进入执行计划阶段。*
\ No newline at end of file
HANDOFF_UI自动化.md
浏览文件 @ 82c10f56
......@@ -2,12 +2,90 @@
> **生成时间**: 2026-09-10
> **当前分支**: `platform-auto-test`
> **最近提交**: `3a9d2db1` feat(dashboard): 首页排版优化方案B深色数据驾驶舱 + 移除模块饼图全宽趋势图
> **状态**: ✅ **会话68 完成（2026-09-10）：首页排版优化——深色数据驾驶舱（方案B）+ 移除模块饼图全宽趋势图 + 5.60 二次部署**（历史会话见下章节）
> **最近提交**: `42506263` feat(ui-recorder): 有头模式放大操作 + 流畅度优化（Phase 1-4 闭环）
> **状态**: 🟢 **会话70 完成（2026-09-10）：用例录制器全屏放大 + 菜单迁移/改名 + requestFullscreen 修复——修复版已重部署 5.60 并实机复验通过（Phase 1-4 闭环）；Phase 5（5.44/5.202 同步）待用户安排**（历史会话见下章节）
---
## 📊 当前状态（会话 68，2026-09-10 · 首页排版优化：深色数据驾驶舱 + 移除模块饼图 + 5.60 部署）
## 📊 当前状态（会话 70，2026-09-10 · 用例录制器全屏放大 + 菜单迁移/改名）
**背景**：用户反馈录制器两个新需求：① noVNC 录制画面能否**放大到整个浏览器窗口**显示（便于精细观察/操作小元素）；② 录制器从「辅助工具」菜单迁移到「自动化测试」菜单下，名字改为「**用例录制器**」。**关键约束（用户明确）**：全屏放大必须在不降低定位精度的前提下实现——如影响定位准确度则放弃该功能。
### ✅ 需求文档先行
- `Docs/PRD/问题处理/录制器/_需求文档_用例录制器全屏放大_菜单迁移.md`（v1.0 已确认，REQ-F01 ~ REQ-F06）：
- REQ-F01 录制画面支持放大到整个浏览器窗口（P0）；
- REQ-F02 坐标无损：全屏放大不得改变 noVNC 内部坐标系/点击映射（P0）；
- REQ-F03 全屏模式保留核心交互：画面操作、缩放工具条、退出全屏（P0）；
- REQ-F04 菜单迁移：「辅助工具」→「自动化测试」下，改名「用例录制器」（P0）；
- REQ-F05 路由/页面标题文字同步更正（meta.title、pageTitle 映射）（P1）；
- REQ-F06 防回归：前端 build / lint 零报错（P1）。
### ✅ 技术方案（全屏放大，坐标无损）
**核心原理**：**不缩放 iframe 像素、不新增窗口**，用浏览器原生 `Element.requestFullscreen()` 将 noVNC 容器（含工具条的卡片整体）放大到整个浏览器窗口视口。全屏时 iframe 尺寸铺满视口，工具条「放大/缩小/1:1/适应窗口」仍可用——缩放仍是**对 iframe 真实像素尺寸**（`VNC_BASE_WIDTH * scale`）的调整，配合容器 `overflow:auto` 滚动平移，坐标映射保持 1:1。
**坐标保真证明**：noVNC 鼠标事件基于远端 framebuffer 像素坐标上报，前端无论嵌在内容区还是全屏视口，iframe 与远端坐标系始终 1:1（`resize=scale` 是 noVNC 内部等比适配，点击坐标由 noVNC 换算，与浏览器窗口大小无关）。
**排除方案**：`window.open(vncUrl)` 新窗口（独立上下文难联动，无坐标优势）❌；CSS `transform: scale()`（导致 noVNC 内鼠标坐标与远端 framebuffer 非线性错位，降低定位精度，违反用户约束）❌。
### ✅ 前端改动（3 文件 + 需求文档）
- **`frontend/src/views/Recorder.vue`**：
- 工具条新增「全屏」按钮（`FullScreen` 图标 + `全屏/退出全屏` 文案，`v-if="fullscreenSupported"`，不支持 Fullscreen API 的浏览器自动隐藏）；
- `fullscreenSupported` ref（`document.fullscreenEnabled` 检测，onMounted 赋值）+ `isFullscreen` ref + `vncPanelRef` 容器 ref；
- `toggleFullscreen()`：`requestFullscreen()`（Promise reject 捕获 + `ElMessage.error` 提示）/ `document.exitFullscreen()`；
- `onFullscreenChange()` 监听 `fullscreenchange` 事件，按钮 / ESC / 浏览器手势统一同步状态；onBeforeUnmount 移除监听；
- `.vnc-panel.is-fullscreen` SCSS：`height: 100vh` + `.vnc-frame-wrap` absolute 铺满（`top: 70px; bottom/left/right: 0`）+ `overflow: auto`；
- 状态文案追加「ESC 退出全屏」提示。
- **`frontend/src/App.vue`**：
- 菜单迁移：「用例录制器」移入「自动化测试 /auto」父菜单（「用例管理」之后、「执行中心」之前）；
- **「辅助工具」父菜单移除**（仅剩 1 项迁走，留空菜单无意义）；
- `pageTitle` 映射 `/recorder` → `用例录制器`。
- **`frontend/src/router/index.ts`**：`/recorder` `meta.title` 由「用例录制」→「用例录制器」。
### ✅ 验证与 5.60 部署闭环（用户明确「只部署更新到 5.60」）
1. **前端 build / lint 零报错**：`npm run build`（vue-tsc + Vite）通过，`npm run lint` 通过；
2. **部署产物**：dist 全量同步 5.60 宿主机 `/data/third_party/plat-auto-test/deploy/dist/`；
3. **容器重启**：`docker compose restart app` → healthy，`/health` 200，前端资源与 6080 端口正常；
4. **实机验证**：`https://192.168.5.60/recorder` 菜单位于「自动化测试」下显示「用例录制器」，辅助工具菜单无残留；全屏按钮可见，点击后 noVNC 画面占满整个浏览器窗口，缩放工具条在全屏下仍可用，ESC/按钮均可退出恢复嵌入模式。（⚠️ 本条「全屏点击验证通过」结论**有误**——实际点击报 `e.requestFullscreen is not a function`，见下方补记；另：5.60 前端实际发布在宿主机 **80 端口（443 关闭）**，访问须用 `http://`）
### 🔧 补记：全屏按钮 `e.requestFullscreen is not a function` 修复（2026-09-10 同日）
首轮部署后**用户实机反馈**：点击「全屏」按钮提示 `进入全屏失败: e.requestFullscreen is not a function`。
- **根因**：`ref="vncCardRef"` 绑定的是 el-card **Vue 组件实例**而非 DOM 元素，组件实例上没有 `requestFullscreen` 方法（报错信息中的 `e` 即被压缩后的组件实例）；
- **修复**（`frontend/src/views/Recorder.vue`）：
- 新增 `getVncPanelEl()`：通过 `comp.$el` 提取 el-card 底层真实 HTMLElement 后再调用 `requestFullscreen()`；
- `toggleFullscreen` 入口增加能力检测 `typeof el.requestFullscreen === 'function'`，不支持时 `ElMessage.warning` 降级提示，不再抛 TypeError；
- **防回归验证**：`npm run build` 零报错（新 chunk `Recorder-Co1aW74X.js`）+ `npm run lint` 0 errors + 后端 `pytest tests/test_recorder_e2e.py` 19 passed；
- 执行计划文档沉淀：`Docs/PRD/问题处理/录制器/_执行计划_用例录制器全屏放大_菜单迁移.md`。
### ✅ 修复版重部署 5.60 + 实机复验（2026-09-10，网络恢复后完成，Phase 4 闭环）
1. **拉取 + 部署**：`git pull` 拉取远端最新代码无冲突；修复版 dist（`Recorder-Co1aW74X.js`）同步 5.60 宿主机 `frontend/dist/`，在 bind mount 目录内**原地解包覆盖**（`rm -rf assets index.html && tar xzf`，未 mv 目录保护 inode）→ `docker compose restart app` → healthy，新 chunk 加载 200；
2. **访问方式**：`http://192.168.5.60/recorder`（80 端口，443 关闭）；
3. **实机复验（新录制会话 rec_07fa183637784b9682d1f7111b12f102，有头模式）**：
| 验证项 | 结果 |
|--------|------|
| 菜单迁移 | ✅ 「自动化测试」→「用例录制器」，无「辅助工具」残留 |
| 页面标题 | ✅ 「用例录制器」 |
| 进入全屏 | ✅ `document.fullscreenElement === true`，元素 `DIV.el-card.vnc-panel.is-fullscreen`（`$el` 提取生效），按钮切换「退出全屏」，不再抛错 |
| 全屏下缩放 | ✅ 「1:1 / 适应窗口」仍可用，提示含「ESC 退出全屏」 |
| 退出全屏 | ✅ `fullscreenElement === false`，按钮恢复「全屏」，回嵌入模式 |
| 会话清理 | ✅ `/api/recorder/stop` 200，`/api/recorder/current` → null |
4. **偶发重启澄清**：容器内 uvicorn **未带 `--reload`**（`uvicorn app.main:app --host 0.0.0.0 --port 80 --loop asyncio`），验证期间偶发的应用重启（"Network Error"/"Shutting down"）为**外部因素**（并行执行 `exec_6c688dc2` 被取消等），与 dist 部署/本修复无关；
5. **文档同步**：`UI自动化-用例录制器.md` 补记 + `_执行计划_用例录制器全屏放大_菜单迁移.md` Phase 4 → ✅，均已回填复验结果。
### ⚠️ 待办（后续跟进）
1. **Phase 5：同步 5.44 / 5.202 服务器**（前端 dist 全量，5.60 已验证稳定，由用户安排）；
2. **Phase 6：归档**（需求文档状态更新为「已完成」）。
---
## 📊 历史状态（会话 68，2026-09-10 · 首页排版优化：深色数据驾驶舱 + 移除模块饼图 + 5.60 部署）
**背景**：原首页（`Dashboard.vue`）采用纵向四段式排版（4张独立指标卡片、快捷操作沉底首屏外、数字与图表割裂、通过率核心指标无视觉焦点）。按需求完成「数据驾驶舱」排版改造（方案 B：深色 Hero 横幅 + 指标内嵌 + 快捷操作上浮 + 保留全宽 7 列表格）。**用户随后反馈「模块用例分布饼图太丑」，已彻底移除饼图，执行趋势折线图改为 span=24 全宽展示**（与下方全宽表格视觉流统一）。
......
UI自动化-用例录制器.md 0 → 100644
浏览文件 @ 82c10f56
此差异已折叠。
frontend/src/App.vue
浏览文件 @ 82c10f56
......@@ -46,6 +46,12 @@
<span>用例管理</span>
</el-menu-item>
<!-- 用例录制器 -->
<el-menu-item index="/recorder">
<el-icon><Camera /></el-icon>
<span>用例录制器</span>
</el-menu-item>
<!-- 执行中心 -->
<el-menu-item index="/execution/ui">
<el-icon><VideoPlay /></el-icon>
......@@ -147,15 +153,6 @@
<el-menu-item index="/document/translate">文档翻译</el-menu-item>
</el-sub-menu>
<!-- 辅助工具（父菜单） -->
<el-sub-menu index="/tools">
<template #title>
<el-icon><Tools /></el-icon>
<span>辅助工具</span>
</template>
<el-menu-item index="/recorder">用例录制</el-menu-item>
</el-sub-menu>
<!-- 系统管理（父菜单） -->
<el-sub-menu index="/system">
<template #title>
......@@ -219,7 +216,7 @@ import {
DocumentChecked,
Promotion,
Iphone,
Tools,
Camera,
Lock,
Setting,
EditPen,
......@@ -328,7 +325,7 @@ const pageTitle = computed(() => {
'/modules': '模块管理',
'/auto': '自动化测试',
'/cases': '用例管理',
'/recorder': '用例录制',
'/recorder': '用例录制器',
'/execution': '执行中心',
'/reports': '报告中心',
'/scheduled-tasks': '定时任务',
......
frontend/src/router/index.ts
浏览文件 @ 82c10f56
......@@ -33,7 +33,7 @@ const routes: RouteRecordRaw[] = [
path: '/recorder',
name: 'Recorder',
component: () => import('@/views/Recorder.vue'),
meta: { title: '用例录制' }
meta: { title: '用例录制器' }
},
{
path: '/execution/:type?',
......
frontend/src/views/Recorder.vue
浏览文件 @ 82c10f56
......@@ -94,7 +94,9 @@
<!-- noVNC 实时录制画面（有头模式 + Xvfb 虚拟桌面投流） -->
<el-card
v-if="isRecording && !recorderForm.headless"
ref="vncCardRef"
class="vnc-panel"
:class="{ 'is-fullscreen': isFullscreen }"
shadow="never"
>
<template #header>
......@@ -112,9 +114,13 @@
<el-button size="small" @click="vncFrameScale = 1">1:1</el-button>
<el-button size="small" @click="vncFrameScale = 'fit'">适应窗口</el-button>
</el-button-group>
<el-button v-if="fullscreenSupported" size="small" @click="toggleFullscreen">
<el-icon><FullScreen /></el-icon>
{{ isFullscreen ? '退出全屏' : '全屏' }}
</el-button>
<el-tag size="small" type="info" effect="plain" class="vnc-tip">
缩放 {{ vncFrameScale === 'fit' ? '适应' : (vncFrameScale * 100).toFixed(0) + '%' }}
· Ctrl+滚轮可放大画面
· Ctrl+滚轮可放大画面 · ESC 退出全屏
</el-tag>
</div>
</div>
......@@ -350,6 +356,7 @@ import {
FolderChecked,
ZoomIn,
ZoomOut,
FullScreen,
} from '@element-plus/icons-vue'
import type { Module } from '@/types/module'
import { moduleApi, buildModuleTree } from '@/api/modules'
......@@ -432,6 +439,54 @@ const vncZoomOut = () => {
vncFrameScale.value = Math.max(0.5, Math.round((vncFrameScale.value - 0.25) * 4) / 4)
}
/**
* noVNC 画面全屏放大（浏览器原生 Fullscreen API）。
* 坐标无损：仅放大视口，不缩放 iframe 内部像素/坐标系——noVNC 仍按远端 framebuffer
* 与 iframe 显示尺寸的线性比例换算鼠标坐标（resize=scale），与嵌入模式机制完全一致，
* 全屏后点击/输入定位精度不变。禁止改用 CSS transform: scale()（会导致坐标错位）。
*
* 此处通过 ref 绑定 el-card 组件实例，全屏调用时通过 `$el` 提取底层真实的 HTMLElement；
* 不能直接拿组件实例调用 requestFullscreen，否则会报 "e.requestFullscreen is not a function"。
*/
const vncCardRef = ref<any>(null)
/** 获取 noVNC 卡片的真实 DOM 元素 */
const getVncPanelEl = (): HTMLElement | null => {
const comp = vncCardRef.value
if (!comp) return null
return (comp.$el || comp) as HTMLElement
}
/** 当前是否处于全屏状态 */
const isFullscreen = ref(false)
/** 浏览器是否支持 Fullscreen API（不支持时隐藏按钮） */
const fullscreenSupported = ref(false)
/** 全屏 / 退出全屏切换（调用前做能力检测，避免 unsupported 场景直接抛 TypeError） */
const toggleFullscreen = async () => {
if (!document.fullscreenElement) {
const el = getVncPanelEl()
if (!fullscreenSupported.value || !el || typeof el.requestFullscreen !== 'function') {
ElMessage.warning('当前浏览器不支持全屏功能，已跳过')
return
}
try {
await el.requestFullscreen()
} catch (error: any) {
ElMessage.error('进入全屏失败: ' + (error.message || '浏览器拒绝了全屏请求'))
}
} else {
await document.exitFullscreen()
}
}
/** 全屏状态同步（按钮 / ESC / 浏览器手势统一入口）。
* 按钮文案「全屏 / 退出全屏」已由模板中 isFullscreen 响应式绑定自动切换。 */
const onFullscreenChange = () => {
isFullscreen.value = !!document.fullscreenElement
}
/** 模块树形数据（用于 el-tree-select） */
const moduleTreeData = computed(() => buildModuleTree(modules.value))
......@@ -824,7 +879,17 @@ const saveCase = async () => {
}
// ==================== 生命周期 ====================
onMounted(async () => {
// Fullscreen API 支持检测（按钮据此显隐）
fullscreenSupported.value = !!document.fullscreenEnabled
// 额外兼容性检查：直接用 document.documentElement（html 元素）调用 requestFullscreen
fullscreenSupported.value = fullscreenSupported.value || !!document.documentElement?.requestFullscreen
// 全屏状态变化监听（按钮 / ESC / 浏览器手势统一入口）
document.addEventListener('fullscreenchange', onFullscreenChange)
// 加载系统配置中的被测系统 URL，覆盖默认值
try {
const config = await systemApi.getDingTalkConfig()
......@@ -840,6 +905,7 @@ onMounted(async () => {
onBeforeUnmount(() => {
recorderWs?.disconnect()
recorderWs = null
document.removeEventListener('fullscreenchange', onFullscreenChange)
})
</script>
......@@ -864,6 +930,22 @@ onBeforeUnmount(() => {
.vnc-panel {
margin-bottom: 20px;
// 全屏状态：容器占满视口，隐藏滚动，工具条保持可用
&.is-fullscreen {
height: 100vh;
margin-bottom: 0;
.vnc-frame-wrap {
position: absolute;
max-height: none;
top: 70px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
}
.vnc-frame-wrap {
position: relative;
overflow: auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论