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

日期：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	导出-正常路径	点「导出」	下载成功提示	`报表导出成功`	通过

四、发现的问题与处置

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

五、结论

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。
结论：通过。