交通统计审核
编辑 | blame | 历史 | 原始文档

功能测试报告_数据导入页空白修复_2026-09-11

一、功能说明

用户反馈：登录后点「数据导入」，界面变成一片空白。

排查与根因：用无头 Chrome（CDP 远程调试）复现后，控制台报：

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <DataImport> at src/views/DataImport.vue

traffic-audit-web/src/views/DataImport.vue 缺少最外层的 <template> 开标签，文件直接从 <el-container> 开始。SFC 没有 template 块 → vue-loader 编不出 render 函数 → 组件挂载失败 → 整页空白（#app 只剩 78 字符）。

历史沿革（git log -S "SKIP/CHECK"）：

提交 文件首行 状态
0f7b7d1^ <template> 正常
0f7b7d1 SKIP/CHECK (0): TYPE_LABELS upper <template> 首行被标记文字覆盖 → 已损坏
da614c0 <el-container direction="vertical"> 标记行被删掉，<template> 仍未补回 → 仍损坏
本次修复 <template>（已补回） 正常

修复：在文件首行补回 <template>（一行改动，未动其余内容）。

二、测试环境

  • 前端 http://localhost:8080（vue-cli-service 开发服务器，改后 17:44:48 重新编译成功）。
  • 复现/验证方式：无头 Chrome --remote-debugging-port=9222 + CDP（Page.navigate / Runtime.evaluate / 控制台事件捕获），先在 sessionStorage 写入登录 token 再访问受保护路由。
  • 测试时间：2026-09-11。

三、用例表

编号 输入 预期 实际 结论
TC-1 修复前访问 #/import（登录态） 复现用户问题 控制台 Failed to mount component … <DataImport>；#app innerHTML 长度 78，页面无文字 复现成功
TC-2 修复后访问 #/import 页面正常渲染 #app innerHTML 长度 20,821；可见「导入业务数据 / 报表期 / 选择数据类型（道路货运 公路旅客 城市客运 站场投资 货运能耗季报）/ 模板：模板_交企统H203-2表… / 导入结果（2026-09）/ 导入进度」 通过
TC-3 修复后控制台 无 Vue/JS 错误 错误事件数 0（含 Runtime.exceptionThrown、console.error） 通过
TC-4 全量路由扫描 #/dashboard、#/import、#/data、#/explain、#/audit、#/report、#/rules、#/users 8 个页面都能渲染、无报错 8/8 渲染成功（innerHTML 长度 4,409~293,029），每个页面错误数均为 0 通过
TC-5 静态检查所有 .vue 是否以 <template> 开头 无同类问题 13 个 .vue 文件中仅 DataImport.vue 异常，修复后全部 OK 通过
TC-N1 负向：用带 hash 查询串的地址访问 #/import?t=… 说明路由不匹配时的表现（辅助定位） 路由无匹配 → 空白且无报错（与本次 bug 现象不同，据此排除了缓存假象） 通过（定位用）

四、发现的问题与处置

  1. 首行被工具写入的标记文字覆盖：0f7b7d1 那次的补丁把 <template> 换成了 SKIP/CHECK (0): TYPE_LABELS upper <template> 这样的说明文字。提示：以后改 SFC 首行要复核首行是否仍是 <template>。
  2. 同一文件近期被改名/改动多次：本次仅补首行，未做其它改动，避免引入新风险。
  3. 复现过程中发现无头浏览器会缓存旧 bundle，需要 Page.reload({ignoreCache:true}) 才能拿到新编译结果（测试方法记录，非产品问题）。

五、结论

  • 「数据导入」白屏已修复，页面与其余 7 个路由均正常渲染、控制台 0 报错。
  • 前端开发服务器已热编译生效，用户刷新页面（Ctrl+F5）即可恢复使用。

六、发布与二次独立验证（2026-09-11 18:0x）

代码提交：e8ce82e fix: 修复「数据导入」整页空白——DataImport.vue 补回缺失的 <template> 开标签

动作 命令 结果
拉取公司仓库 git fetch gitea 远端 main 无新提交（left/right = 1/0），无需合并
推送公司仓库 git push gitea main a76a8cc..e8ce82e main -> main
拉取个人仓库 git fetch origin 远端 master 无新提交（1/0），无需合并
推送个人仓库 git push origin main:master a76a8cc..e8ce82e main -> master
同步本地分支指针 git branch -f master main master = e8ce82e，git status 显示 main...gitea/main 已同步

产物级验证（不依赖浏览器，直接校验开发服务器下发的编译结果）

检查项 方法 结果
前端是否已热编译 读取 traffic-audit-web/frontend.log 最后一次 DONE Compiled successfully in 1251ms，时间 17:44:48，App running at: - Local: http://localhost:8080/
端口存活 Test-NetConnection 127.0.0.1 -Port 8080/8090 8080=True、8090=True
修复是否真的进了下发文件 从 http://localhost:8080/js/6.js（含 TYPE_LABELS 的 DataImport 分块）抓取并检索 命中 el-container；上下文为 var render = function render() { ... _c("el-container", { attrs: { direction: "vertical" } }) ... _c("app-header", { attrs: { title: "交通统计报表审核系统 - 数据导入" } })，即模板已正常编译为 render 函数

端到端复验（无头 Chrome + CDP，独立重跑）

用例 输入 预期 实际 结论
TC-6 写入 sessionStorage.token 后访问 http://localhost:8080/#/import，并 Page.reload({ignoreCache:true}) 页面完整渲染 location.href = http://localhost:8080/#/import；#app innerHTML = 20,821 字符；顶栏标题「交通统计报表审核系统 - 数据导入」；8 个左侧菜单、11 个按钮、1 个上传控件、5 个下拉框、3 个卡片 通过
TC-7 同上，采集控制台 0 错误 Runtime.consoleAPICalled(error) = []；Runtime.exceptionThrown = [] 通过
TC-8 访问 http://localhost:8080/import（无 #/） 说明路由形态，排除误判 路由为 hash 模式，该地址落到 #/dashboard（工作台），#app = 4409 字符、0 错误 通过（澄清项）

截图留证：_shots/数据导入页_修复后_2026-09-11.png（1600x1000，整页捕获，可见「导入业务数据 / 报表期 / 选择数据类型：道路货运 公路旅客 城市客运 站场投资 货运能耗季报 / 模板下载 / 选择文件 / 立即导入 / 导入结果（2026-09）/ 导入进度」）。

用户侧结论：前端开发服务器已加载修复后的代码，用户浏览器若仍白屏，是本地缓存了旧 bundle，Ctrl+F5 强刷即可恢复。