wsm
237a5810cf
* docs(xispeak): 归档前端页面 QA 审查报告（用户视角） * docs(fixcontact): 归档前端页面 QA 审查报告（用户视角） * docs(inspectTask): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bqtakepulse): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bgpartymatter): 归档前端页面 QA 审查报告（工程师+用户视角）
76 lines
14 KiB
Markdown
76 lines
14 KiB
Markdown
# 前端页面用户视角审查报告 — 我为四所把把脉（bg/bqtakepulse/BgTakepulseList）
|
||
|
||
## 审查信息
|
||
- 页面/路由：`http://127.0.0.1:3100/bg/bqtakepulse/BgTakepulseList`
|
||
- 审查日期：2026-08-11
|
||
- 审查视角：业务用户（兼顾首次使用的新手）
|
||
- 相关文件：`src/views/bg/bqtakepulse/BgTakepulseList.vue`、`BgTakepulseForm.vue`、`BgTakepulseModal.vue`、`BgTakepulse.data.ts`、`BgTakepulse.api.ts`
|
||
- 证据目录：`qa-tmp/bqtakepulse/`（screenshots/ + walk*.log + new_modal_fields.json + scripts/probe_1920_log.json）
|
||
|
||
> 说明：本报告为"用户视角"审查，所有问题均来自浏览器实测（用户实际操作触发 + 截图/操作日志/后端响应为证）。涉及代码的部分仅用于定位根因，不替代实测。
|
||
> 视觉复核：P2-4 已用 claude-vision-skill 复核 1920×1080 截图 + DOM 实测。**vision 只能确认可视区内内容，判断不了被横向滚动藏住的列（曾误判"右边没有未显示列"）**，溢出/隐藏列以 DOM 实测（`probe_1920_log.json`）为准。
|
||
|
||
## 总体结论
|
||
- **P0 × 0 ｜ P1 × 2 ｜ P2 × 6**
|
||
- 一句话总结：作为业务用户，这个页面"查台账、看详情、查流程、下载模板"这些日常动作基本能办成，搜索/筛选/校验提示都算顺；但**核心工具栏里的"导出"点了毫无反应（后端 500 静默失败）**，且**新建表单里"牵头部门"这项必填却不打星号、提交失败了才知道**，这两处会让用户卡住或以为系统坏了——页面对新用户"一眼就能上手"还有距离，但主要流程可以走通、数据无损。
|
||
|
||
## P0 - 用户办不成事 / 会出错
|
||
无（实测范围内未发现会导致任务完全无法进行或数据丢失/误导的 P0 项）。
|
||
|
||
## P1 - 明显受阻 / 容易困惑
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 1 | 台账要拿给领导，点工具栏的"导出" | 点导出后**没有任何反应**：不弹保存、不下载文件、不转 loading、也没有任何成功或失败提示。连点两次都这样。 | 数据导不出去，用户不知道是没点中、是卡了、还是系统坏了，会反复点、找别的方式导出，耽误事 | 实测点击"导出"2 次，后端 `exportXls` 接口**两次都返回 HTTP 500**，页面无 toast/无下载；证据 `qa-tmp/bqtakepulse/screenshots/63_after_export2.png`、`65_after_export_final.png`；network 记录见 `walk14_log.txt`/`walk15_log.txt`（500×2，toasts 为空） | 表头"导出"按钮（`BgTakepulseList.vue:53`，走 `useListPage` 的 `onExportXls`）；根因在**后端** `exportXls`（500），前端未把失败反馈给用户 |
|
||
| 2 | 新建一条意见，看到必填项随手填 | 牵头部门这一栏**页面上没有任何"必填"星号**，看起来可填可不填；直接提交时却被拦下报"请选择牵头部门"。 | 必填项全靠用户"试错"才知道，提交一次失败一次，让人不耐烦；新手可能以为系统乱拦 | 空表单提交校验报错原文：`请选择年份 / 请选择密级 / 请输入意见主题 / 请选择牵头部门`（`qa-tmp/bqtakepulse/screenshots/17_validation_empty.png`）；而实测弹窗字段结构里**牵头部门 `required: false`、无红色星号**（`new_modal_fields.json`）；代码 `BgTakepulseForm.vue:260-269` 对 `responDeptid` 只写了自定义 validator、rule 里没有 `required` | 新建弹窗表单项"牵头部门"（`BgTakepulseForm.vue:68-71`） |
|
||
|
||
## P2 - 体验细节
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 1 | 想看一下某条意见的详细内容，点意见主题 | 点标题看详情的同时，**下面的"办理情况"反馈区也被一起展开了**，关掉详情弹窗后多出一个我没让打开的展开区，还得手动再收起 | 多一步多余动作，页面状态和用户意图不符，轻微困惑 | 实测点击标题前展开图标为 collapsed，点击后变 expanded 且页面同时出现"办理情况"区（`qa-tmp/bqtakepulse/screenshots/15_title_click_expand.png`；`walk3_log.txt` A 段） | 标题链接 `@click="handleDetail"` 未阻止冒泡，与 `expandRowByClick: true`（`BgTakepulseList.vue:220,84-88`）叠加触发 |
|
||
| 2 | 要发起督办流程，选"所办领导" | 流程发起弹窗里"所办领导"的选项显示的是**内部编码 `bg_ld_01`、`dd_ld_02` 而不是人名**，看不出是谁 | 用户无法识别审批人是谁，可能选错人或不敢选；此为流程关键字段 | 实测发起流程弹窗文案含 `所办领导 bg_ld_01 dd_ld_02`（`qa-tmp/bqtakepulse/screenshots/59_process_modal.png`） | 流程发起弹窗"所办领导"选项（`DeptRoleUserSelectRadioGroup` 渲染；疑似用户表缺可读姓名，根因待后端确认） |
|
||
| 3 | 填部门相关的字段（牵头/协办部门） | 部门选择树里显示的是**缩写编码**：QLS、SLD、BG部、DQ部、SZHZX、RH、JJ、DD，新用户看不懂哪个部门是哪个 | 选部门靠猜，容易选错 | 实测部门树节点即这些缩写（`qa-tmp/bqtakepulse/screenshots/25_dept_picker.png`、`50_dept_picker.png`；`walk9_log.txt`） | 部门选择组件数据源（部门树本身的数据/编码） |
|
||
| 4 | 台账很多列，想看看某条"完成状态/完成时间" | 表格有 25 列且很多宽列，第一屏只看到前 10 列左右，**"完成状态"（第 24 列）在很右边，要一直往右拖才看得到**；"操作"列固定在最右始终可见，反而容易让人以为就这些列 | 每看一条都要大量横向滚动才能看到关键状态，效率低 | 1920×1080 视口 DOM 实测：表格 `.ant-table-content` 总宽 **3848px**、可视区仅 **1680px**（`qa-tmp/bqtakepulse/scripts/probe_1920_log.json`；截图 `66_list_1920_viewport.png`、`66_list_1920_full.png`）；列配置 25 列、`完成状态` 为第 24 列未固定（`BgTakepulse.data.ts:8-160`）；vision 复核截图确认视口内约 10 列、右端为固定"操作"列 | 表格列配置 `BgTakepulse.data.ts`（"完成状态"第 24 列，未固定；"操作"为固定右列） |
|
||
| 5 | 搜不到想找的记录 | 空结果显示一张空表 + "暂无数据"，**没有"没有匹配数据，去清除筛选"之类的引导**，用户得自己去找上方的"重置" | 轻度困惑，新手可能以为数据丢了 | 实测搜索不存在关键词显示"暂无数据"（`qa-tmp/bqtakepulse/screenshots/06_empty_search.png`） | 列表空态（`BgTakepulseList.vue` 未配置空态引导文案） |
|
||
| 6 | 删除一条记录 | 删除有二次确认（好），但确认框只写"是否确认删除"，**没说删的是哪条、也没提示删除是否可恢复**；且对正在督办中的记录同样允许删 | 误删后无法撤销，确认信息不足以让用户做出正确判断 | 实测删除 popconfirm 文案 `是否确认删除`（`qa-tmp/bqtakepulse/screenshots/64_delete_popconfirm.png`）；代码推断：删除接口不校验 `bpmStatus`，督办中记录也可删（**代码推断，待实测**，未对真实督办中记录执行删除以免破坏数据） | 删除 popconfirm（`BgTakepulse.api.ts:65-69` 的 `deleteOne`） |
|
||
|
||
## 用户会觉得顺的地方
|
||
- **顶部统计标签很直观**：未开始 / 督办中（已逾期 n）/ 已完成 一眼看清整体进度，用户不用数表格就能知道大概情况。
|
||
- **空表单提交的校验提示具体、标红**："请选择年份 / 请选择密级 / 请输入意见主题 / 请选择牵头部门"，指哪错哪，比笼统的"请检查必填项"好很多。
|
||
- **搜索顺手**：意见主题输入框支持回车即查、提示了"支持模糊查询"；四个筛选条件（主题/分管所领导/牵头部门/协办部门）+ 查询/重置，够用。
|
||
- **点标题看详情**符合直觉；**行内展开看"办理情况"**并带状态统计标签（未开始/进行中/已完成 + 共 N 条），信息组织清晰。
|
||
- **下载模板可用**（实测下载"把把脉-导入模板.xls"成功）。
|
||
- **删除有二次确认**，不会一点就没了。
|
||
- 行按完成状态着色（黄/红/绿），状态一眼区分（注：实测配色为浅粉彩，单行浅红 #fff1f0 与白行区分度中等，快速扫视可能忽略）；"操作"列固定在最右始终可见。
|
||
|
||
## 12 维度核对结果汇总
|
||
| # | 维度 | 通过 | 问题（简写+证据位置） |
|
||
|---|------|------|----------------------|
|
||
| 1 | 目标达成 | 部分 | 搜索/详情/查流程/下载模板可用；**导出失败无果**（P1-1）；新建成功保存链路未能完整实测（见"待实测"） |
|
||
| 2 | 可发现性 | 通过 | 新增/导出/下载模板/模板校验/模板导入/高级查询都在表头一眼可见；行操作在"更多"下拉 |
|
||
| 3 | 可学习性 | 问题 | 牵头部门必填无星标（P1-2）；部门树缩写看不懂（P2-3）；所办领导显示编码（P2-2） |
|
||
| 4 | 效率 | 问题 | 25 列超宽表大量横向滚动（P2-4）；新建需填 4 项必填 |
|
||
| 5 | 认知负荷 | 问题 | 25 列同屏信息过载；统计标签+工具栏+查询区较满 |
|
||
| 6 | 文案清晰度 | 部分 | 校验文案具体；但所办领导编码/部门缩写看不懂（P2-2/3）；删除确认文案笼统（P2-6） |
|
||
| 7 | 反馈及时性 | 问题 | 导出静默失败无任何提示（P1-1）；保存成功是否有提示未实测（见"待实测"） |
|
||
| 8 | 误操作防护 | 部分 | 删除有确认；但确认信息不点明记录与后果（P2-6）；督办中记录删除未做防护（代码推断，待实测） |
|
||
| 9 | 空态/加载/错误态 | 部分 | 空搜索"暂无数据"但无清除筛选引导（P2-5）；导出失败无错误态（P1-1） |
|
||
| 10 | 无障碍细节 | 待实测 | 未用键盘走查关键流程；长文本在宽列内正常换行未发现撑爆 |
|
||
| 11 | 视觉一致性 | 通过 | 与平台其他页面（jeecg 风格）一致；行状态配色、操作列固定均正常 |
|
||
| 12 | 边界场景 | 部分 | 空表单校验友好；超长文本/特殊字符/快速连点等未专项实测（见"待实测"） |
|
||
|
||
## 用户任务走查记录
|
||
- **任务 1：搜索/筛选台账记录** → 登录后进列表，用"意见主题"输入框模糊查 `assac` 命中 1 条；查不存在的词显示"暂无数据"；点"重置"恢复全量。各步截图 `01_login → 05_search_assac → 06_empty_search → 07_after_reset`。**顺畅**。
|
||
- **任务 2：查看详情 / 展开办理情况** → 点意见主题标题打开"详情"弹窗（只读）；同时行被连带展开出现"办理情况"区（P2-1）。显式点展开图标也能看到反馈表（该记录暂无反馈数据）。截图 `08_detail_modal`、`12_expand_feedback`、`15_title_click_expand`。**基本顺畅，有 1 处多余展开**。
|
||
- **任务 3：新建一条意见记录** → 点"新增"打开表单；空表单点"确 认"被 4 项校验拦下（报错明确、标红字段清晰，见 P2 维度）；依次填年份/密级/意见主题并尝试选牵头部门。**自动化未能驱动"部门选择"弹窗把值写回表单（多次尝试未果，属测试手段限制，非用户侧证据）**，因此"成功保存"这一步未实测到；牵头部门必填但无星标为实测发现（P1-2）。截图 `16_new_modal`、`17_validation_empty`、`41_secret_dropdown`、`50_dept_picker`。
|
||
- **任务 4：查询/发起督办流程** → 在"更多"下拉见"详情/删除/查询督办流程/再次督办"（该记录为督办中，故显示"再次督办"而非"发起督办流程"，符合业务）；"查询督办流程"打开流程列表（含流程图/审批历史等）；"再次督办"打开流程发起弹窗（标题正确、字段齐全，但"所办领导"显示编码——P2-2）。全部只打开未提交，无数据变更。截图 `57_dropdown_assac`、`58_query_process`、`59_process_modal`。**顺畅**。
|
||
- **任务 5：导出 / 下载模板 / 删除确认** → "下载模板"成功下载 xls；"导出"点击后无文件下载、无任何提示，后端 `exportXls` 返回 500（P1-1，实测 2 次）；删除弹 popconfirm"是否确认删除"后取消（未删真实数据）。截图 `61_after_template`、`63_after_export2`、`65_after_export_final`、`64_delete_popconfirm`。
|
||
|
||
## 待实测 / 代码推断（未进 P0/P1/P2 分级）
|
||
以下项因**无法在本次实测中完成**，按纪律只列在待实测区，不参与级别判定：
|
||
|
||
1. **新建记录的"成功保存"全链路**：自动化无法驱动"部门选择"弹窗将选择值写回表单，导致表单始终缺"牵头部门"而被校验拦截，未能实测到"保存成功→列表新增→成功反馈"。从代码看保存逻辑（`BgTakepulseModal.handleSubmit → submitForm → saveOrUpdate`）完整，**无证据表明真实用户无法创建记录**，需人工或换一种自动化方式实测确认（包括保存成功后是否有"保存成功"提示——代码中 `submitSuccess` 仅关闭弹窗，未见显式 toast，待实测）。
|
||
2. **删除正在督办中（有运行中流程）的记录**：代码中 `deleteOne` 不校验 `bpmStatus`，理论上可直接删掉有流程的记录（可能造成流程与台账脱节）。因会破坏真实数据，**未实测**，仅代码推断（`BgTakepulse.api.ts:65-69`）。
|
||
3. **导出失败的根因归属**：实测页面"导出"触发后端 `exportXls` 返回 **HTTP 500**（复现 2 次）。这是后端异常；前端未把失败反馈给用户。属后端问题还是环境问题需后端确认，用户侧影响已按 P1-1 记录。
|
||
4. **键盘走查 / 特殊字符 / 超长文本 / 快速连点** 等边界场景未专项实测。
|
||
5. **测试数据卫生**：本次尝试创建 `QA_UX_PULSE_*` 记录均未成功（未发送任何新增请求），**无 QA_UX 残留**；实测前后台账记录数均为 1（`assac`），已确认无污染。
|