# 功能测试报告：登录验证码容错 + 报表预览整改（指标错位 / 弹窗拖动圆角 / 失败提示）

- 日期：2026-09-16
- 模块：登录页、报表生成-汇总大表预览
- 结论：**通过**（4 个问题全部修复，浏览器实测取证）

## 一、功能说明

用户反馈 3 个问题：

| # | 用户描述 | 根因 | 修复 |
|---|----------|------|------|
| 1 | 换 WiFi 后登录页出现验证码白色方框、提示「验证码加载失败，请检查网络」 | 后端 `app.captcha.required=false` 已禁用验证码，但前端 `Login.vue` 的 `captchaRequired` 默认值是 `true`，且 `/api/auth/captcha-config` 请求失败时 `.catch(() => {})` **静默忽略**，页面残留一个加载不出来的验证码框 | 默认值改 `false`；改为 fail-safe：仅当后端明确返回 `code===200 && data.required===true` 才显示验证码，请求异常一律按「不需要验证码」处理 |
| 2 | 报表生成-汇总大表预览：点击后弹「导出失败，请确认导入数据，或查看后端日志」 | 前端 `failWith(err, action)` 把**所有**异常（含网络/代理层失败）都渲染成同一句笼统文案，默认 action 还是「导出」，误导读成数据问题 | 重写 `failWith` + 新增 `errReason(raw)`：区分「连不上服务器」与「后端真实原因」；预览调用传 `action='预览'`；Blob 错误响应先 `text()` 再解析 |
| 3 | 预览弹窗指标错位（指标压在「当月货运量」上）；弹窗不可拖动、无圆角 | 表头是 3 列（指标/数据/同比），与 4 列数据行（分类/指标/数据/同比）不匹配；Element UI 2.15.14 **没有** `draggable` 属性（那是 Element Plus） | 表头补为 4 列 `分类/指标/数据/同比`；新增 `v-dialog-drag` 指令实现拖动（只改 `.el-dialog` 的 `transform`，关闭时复位），加 `border-radius:10px` |

改动文件：`traffic-audit-web/src/views/Login.vue`、`traffic-audit-web/src/views/ReportExport.vue`、新增 `traffic-audit-web/src/directives/dialogDrag.js`、`traffic-audit-web/src/main.js`（注册指令）。

## 二、测试环境

- 前端：`http://localhost:8080`（vue-cli-service serve，dev 构建）
- 后端：8090（`Started TrafficAuditApplication`，重启后新编译）
- 浏览器：Codex 内嵌浏览器（视口约 319×790），取证方式 `tab.playwright.evaluate()` 直读 DOM + 截图

## 三、用例表

| # | 场景 | 输入/操作 | 预期 | 实际 | 结论 |
|---|------|-----------|------|------|------|
| 1 | 验证码-后端已关闭 | 新开标签访问 `#/login`（后端不可用时同样验证） | 不出现验证码方框，不出现「验证码加载失败」 | 页面无 `.captcha-box`，提示「测试模式：行为验证码已跳过」 | 通过 |
| 2 | 验证码-接口正常 | `GET /api/auth/captcha-config` | `required=false` | `{"code":200,"message":"success","data":{"required":false}}` | 通过 |
| 3 | 预览-表头列数 | 打开预览弹窗读 `thead th` | 4 列且顺序为 分类/指标/数据/同比 | `['分类','指标','数据','同比']` | 通过 |
| 4 | 预览-指标对齐 | 读首行各单元格 x 坐标 | 分类对齐「道路货运」、指标对齐「当月货运量(万吨)」、数据对齐 16888.76、同比在数据右侧 | 分类 x=35、指标 x=118、数据 x=394、同比 x=587（`16888.76` 在 x=394） | 通过 |
| 5 | 预览-弹窗圆角 | 读 `.el-dialog` 计算样式 | 有圆角 | `borderRadius=10px`、`overflow=hidden` | 通过 |
| 6 | 预览-弹窗拖动 | `tab.drag([150,60],[270,220])` 拖标题栏 | 弹窗跟随移动 | 由 `(0,40)` → `(120,200)`，`transform=matrix(1,0,0,1,120,160)`，位移量等于拖拽增量 | 通过 |
| 7 | 预览-关闭复位 | 关闭弹窗后读 transform | 复位为 none | `transform=none`、`visible=false` | 通过 |
| 8 | 预览-中口径之后无表格 | 读弹窗内 `table` 数量与内容 | 有且仅有 1 张指标表 | 弹窗内 1 张表（12 行指标，含中口径 4 行），表下仅两条同比缺失提示与「关闭」按钮 | 通过 |
| 9 | 失败提示-网络异常 | 后端停掉时点预览 | 明确提示网络/服务未启动，而非「导出失败，请确认导入数据」 | `预览失败：无法连接服务器，请检查网络连接，或确认后端服务是否已启动` | 通过 |
| 10 | 导出-正常路径 | 点「导出」 | 下载成功提示 | `报表导出成功` | 通过 |

## 四、发现的问题与处置

1. **「导出失败，请确认导入数据，或查看后端日志」不是数据问题**：用 API 逐月直连 `/api/report/preview` 与 `/api/report/export/summaryWorkbook` 全部返回 200（2026-08 导出 950747 字节）。该文案只在**网络/代理层失败**时出现（换 WiFi 后请求打不到后端），属于提示误导。现已改为区分具体原因。
2. **Element UI 2.15.14 不支持 `draggable`**：弹窗拖动只能自己实现，已用 `v-dialog-drag` 指令；`<style>` 必须**非 scoped**（el-dialog 默认 append-to-body）。
3. **浏览器自动化取证的坑**：`tab.click(index)` 的索引在页面刷新后会失效，曾误点到「投资报表」Tab；Playwright locator 点 Element UI 表格内按钮会超时；`tab.drag` 坐标必须在视口内。以上均已记入《问题与注意事项汇总》。
4. 预览弹窗标题在未打开时显示为「预览数据 - （）」，属未赋值状态，不影响使用。

## 五、结论

- 4 个问题全部修复并有浏览器实测证据（表头 4 列且 x 坐标对齐、圆角 10px、拖动位移 120/160、关闭复位、无第二张表、失败提示已细分）。
- 「中口径之后不再渲染表格」的专项验证见《功能测试报告_汇总大表预览删除中口径后明细表_2026-09-16.md》。
- 遗留：预览弹窗内「共 0 行」与「月度覆盖：1~8月均有数据」两个口径文案不同，易误解，等用户确认后调整。

## 六、用户确认后的追加修改（2026-09-16 傍晚）

用户确认「预览弹窗的行数文案可以改」，已实施：

- **改动**：`ReportExport.vue` 中 `共 {{ it.rowCount || 0 }} 行` 改为按报表类型区分——
  - 汇总大表（`summaryWorkbook`，指标型）：显示 `指标 {{ (it.summary || []).length }} 项`；
  - 其它明细报表：显示 `共 {{ it.rowCount || 0 }} 行明细`。
- **原因**：汇总大表没有明细行，`rowCount` 恒为 0，与下方「月度覆盖：1~8月均有数据」自相矛盾，容易误判为没数据。
- **验证**（浏览器实测，2026-08 汇总大表）：弹窗头部由「共 0 行」变为 **「道路运输量汇总表（整本） 指标 20 项」**，下方仍为「月度覆盖：1~8月均有数据」；表头仍为 `分类/指标/数据/同比`，弹窗内仍只有 1 张表（12 行）。截图：`_shot_preview_after_wording_20260916.png`。
- **结论**：通过。