wsm
237a5810cf
* docs(xispeak): 归档前端页面 QA 审查报告（用户视角） * docs(fixcontact): 归档前端页面 QA 审查报告（用户视角） * docs(inspectTask): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bqtakepulse): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bgpartymatter): 归档前端页面 QA 审查报告（工程师+用户视角）
100 lines
12 KiB
Markdown
100 lines
12 KiB
Markdown
# 前端页面用户视角审查报告 — 巡视整改台账（DqInspectTaskList）
|
||
|
||
## 审查信息
|
||
- 页面/路由：`/dq/inspectTask/DqInspectTaskList`（巡视整改提升工作台账）
|
||
- 审查日期：2026-08-11
|
||
- 审查视角：业务用户（兼顾新手）
|
||
- 相关文件：
|
||
- `src/views/dq/inspectTask/DqInspectTaskList.vue`
|
||
- `src/views/dq/inspectTask/DqInspectTaskForm.vue`、`DqInspectTaskModal.vue`、`DqInspectTask.data.ts`、`DqInspectTask.api.ts`
|
||
- `src/components/Modal/src/BasicModal.vue`、`components/ModalClose.vue`
|
||
- 测试账号：admin（mock 登录，其余接口走真实后端 8080）
|
||
- 证据目录：`qa-tmp/inspectTask/`（截图 `screenshots/`、网络/模态记录 `artifacts/`）
|
||
|
||
## 总体结论
|
||
- **P0 × 0 ｜ P1 × 3 ｜ P2 × 5**
|
||
- 一句话总结：核心任务（搜索/筛选/看详情/查流程/看反馈/校验新增）都能走通，页面整体可用；但"措施责任领导"在列表和详情里都看不到真实负责人（列表显示部门名、详情显示占位符），加上流程操作不随任务状态变化、督办中的任务也能误点"发起/销号"，是用户最容易踩坑的两个点。
|
||
|
||
---
|
||
|
||
## P0 - 用户办不成事 / 会出错
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
|（无 P0 发现）| | | | | |
|
||
|
||
---
|
||
|
||
## P1 - 明显受阻 / 容易困惑
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 1 | 业务人员在台账里想确认"这项措施到底谁负责" | 列表"措施责任领导"一列显示的是部门名"DD"，和"措施责任部门"列完全一样，看不到真正的责任领导 | 用户无法从列表确认责任人，只能逐条点开看，甚至可能找错人督办 | `artifacts/row_html.html`（第8、9两列 `title="DD"` 值相同）；`DqInspectTask.data.ts:256-258` 该列 `dataIndex` 误绑 `measureResDept_dictText` | `DqInspectTask.data.ts` ledgerColumns「措施责任领导」列 |
|
||
| 2 | 打开一条记录的"详情"，想确认责任领导 | "措施责任领导"字段显示的是占位符文字"请选择措施责任领导"，而不是领导姓名 | 用户误以为这条没填领导、看不到到底是谁；与后端已赋值 `measureResLeader=dd_ld_02` 不一致，信息误导 | `artifacts/probe_detail_values.json`（selects.measureResLeader=「请选择措施责任领导」）；`artifacts/probe_querybyid.json`（result.measureResLeader=`dd_ld_02`）；截图 `60_detail_values.png` | `DqInspectTaskForm.vue` 详情只读模式（`DeptRoleUserSelectDropDown` 渲染占位符） |
|
||
| 3 | 一条任务已经是"督办中"，用户看它的"流程操作"下拉 | 下拉仍同时提供"发起巡视整改流程"和"发起销号流程"，点进去能打开发起弹窗 | 用户可能误以为流程还没发起而重复发起，或对整改中的任务误点"发起销号流程"，产生重复/错误的流程实例 | `artifacts/task2_detail.json`（flow_menu_items 三项全显示）；`artifacts/probe_final.json`（督办中记录也能打开发起销号流程弹窗）；截图 `50_t3_flow_start_modal.png`、`60_t3_suo_flow_modal.png` | `DqInspectTaskList.vue:getFlowMenuList`（388-421 行，按状态显示菜单的条件判断被注释掉） |
|
||
|
||
---
|
||
|
||
## P2 - 体验细节
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 4 | 用"督办状态=已完成"筛选后一条都没有 | 表格只有一张默认空图 + "暂无数据"，没有"清除筛选"或"去新建"的引导 | 用户不确定是没数据还是自己筛错了，新手容易卡住 | `artifacts/empty_state_html.html`（`ant-empty-description` 仅"暂无数据"）；截图 `17_t1b_filter_done.png`、`12_t1_search_noresult.png` | 列表空态（BasicTable 默认 empty） |
|
||
| 5 | 点"发起整改任务流程 / 发起销号流程"，到了发起弹窗 | "发起类型"给"立即发起 / 重复发起"两个选项，页面没有任何说明两者区别、什么时候该选"重复发起" | 业务用户凭感觉选，可能选错 | `artifacts/flow_start_modal.txt`、`artifacts/suo_flow_modal.txt`；截图 `50_t3_flow_start_modal.png` | `DqInspectTaskFlowScheduleStartModal.vue` |
|
||
| 6 | 想点弹窗右上角的 X 关闭 | 关闭按钮区域（86×34px）里紧挨着一个 36px 的全屏图标，点中间会触发"全屏放大"而不是关闭；真正能关闭的 X 只有最右侧约 26×36px 的一小块 | 用户想关弹窗结果被放大成全屏，一脸懵；关闭目标过小、紧挨全屏按钮易误触 | `artifacts/probe_x_realmouse.json`（关闭区中心命中 `anticon-fullscreen`，未关闭）；`artifacts/probe_x_glyph.json`（仅 `aria=close` 的 26×36 图标点击后关闭） | `components/ModalClose.vue` + `BasicModal.vue:handleCancel`（`-close--custom` 区域被过滤） |
|
||
| 7 | 删除一条任务 / 批量删除 | 确认文案是笼统的"是否确认删除 / 是否删除选中数据" | 用户不清楚删除会不会连带删掉已关联的反馈记录或流程，心里没底、不敢点 | `artifacts/delete_popconfirm.txt`；截图 `61_t8_delete_confirm.png` | `DqInspectTaskList.vue:getFormMenuList` 删除 popConfirm、`DqInspectTask.api.ts:batchDelete` |
|
||
| 8 | 用"高级查询"构造条件 | 字段列表里出现"具体问题ID""流程实例ID""措施数量"等技术化字段名 | 业务用户不知道"具体问题ID"是什么、怎么填，高级查询门槛偏高 | `artifacts/superquery_modal.txt`（仅能进构造器，字段在下拉）；`DqInspectTask.data.ts` superQuerySchema（多个 title 带 `ID` 后缀） | `DqInspectTask.data.ts` superQuerySchema |
|
||
| 9 | 想靠行底色快速区分"这条是未开始/督办中/已完成" | 行底色是**极浅粉彩**（督办中 `#fff1f0`，接近白色），和普通白行几乎没区别，肉眼扫不出状态 | 状态色的辨识价值没发挥，用户还是得看列内容/统计标签才知道状态；对色弱用户更不可用 | vision 复核截图 `04_list.png` 判定"行未着色"（浅到看不出，反而说明问题）；DOM 实测 `qa-tmp/rowcolors_probe.json`：行 class=`status-row-2`、td 背景 `rgb(255,241,240)`；CSS `DqInspectTaskList.vue:646-648`（`#fff1f0`） | 表格行 `rowClassName` + `DqInspectTaskList.vue:643-651` |
|
||
|
||
---
|
||
|
||
## 用户会觉得顺的地方
|
||
- 顶部查询区只有 4 个条件 + 查询/重置按钮，一眼能看懂；搜索、按督办状态筛选、重置都即时生效，状态统计标签（未开始/督办中（已逾期）/已完成）跟着筛选刷新，直观。
|
||
- 流程操作 / 表单操作都收敛在下拉菜单里，功能集中不占行宽。
|
||
- 表单空提交会一次性列出 7 条明确的必填校验提示（"请选择具体问题/请选择密级/请输入整改措施…"），用户能明确知道缺哪些。
|
||
- 删除（含批量）都有二次确认，不会误删。
|
||
- "查询督办流程"能弹出流程列表，并给"审批历史 / 流程图 / 查询当前办理人"等查看入口，用户可以自己查进度。
|
||
- 详情弹窗字段齐全（除责任领导字段外），整改措施/完成时限等都能回显。
|
||
|
||
---
|
||
|
||
## 12 维度核对结果汇总
|
||
|
||
| # | 维度 | 通过 | 问题（简写+证据位置） |
|
||
|---|------|------|----------------------|
|
||
| 1 | 目标达成 | 部分通过 | 核心任务均可走通；但"确认责任领导"子目标被列表/详情字段显示错误挡住（P1#1、P1#2） |
|
||
| 2 | 可发现性 | 通过 | 新增/导出/导入/下载模板/模板校验/模板导入/流程/表单操作均在显眼处；批量操作需先勾选出现，属合理交互 |
|
||
| 3 | 可学习性 | 问题 | "重复发起"无解释（P2#5）；高级查询字段名技术化（P2#8） |
|
||
| 4 | 效率 | 通过 | 查询/重置顺手，状态标签免点击一眼看全局 |
|
||
| 5 | 认知负荷 | 部分通过 | 台账列多达 17 列需横向滚动，但合并单元格（问题分类/面上/具体问题）帮助读行；未到"吓人"程度 |
|
||
| 6 | 文案清晰度 | 问题 | 详情里"请选择措施责任领导"占位符当值显示（P1#2）；删除确认文案笼统（P2#7） |
|
||
| 7 | 反馈及时性 | 通过 | 成功/失败有 toast；表单校验即时；状态统计随操作刷新（已实测） |
|
||
| 8 | 误操作防护 | 部分通过 | 删除有确认；但流程操作不随状态隐藏、督办中也能发起/销号（P1#3）；关闭按钮易误触全屏（P2#6） |
|
||
| 9 | 空态/加载/错误态 | 问题 | 空态无引导、无清除筛选出口（P2#4）；加载态/后端错误态未实测 → 待实测 |
|
||
| 10 | 无障碍细节 | 部分通过 | Escape 可关弹窗（已实测）；Tab 顺序、对比度、小按钮可点性未实测 → 待实测；关闭按钮偏小（P2#6） |
|
||
| 11 | 视觉一致性 | 问题 | antd 组件统一；但督办状态行底色为极浅粉彩（#fff1f0 近白），肉眼辨识度低（P2#9，vision+DOM 复核） |
|
||
| 12 | 边界场景 | 部分通过 | 筛选-重置-筛选状态同步正常（已实测）；特殊字符/超长文本/连点未实测 → 待实测 |
|
||
|
||
---
|
||
|
||
## 用户任务走查记录
|
||
|
||
- **任务 1：搜索/筛选一条整改任务** → 整改措施输入"不存在的整改词"查询 → 0 条，空态"暂无数据"（无引导，P2#4）；重置后恢复 1 条；按"督办状态=已完成"筛选 → 0 条；按"未开始"筛选 → 0 条。搜索/筛选/重置本身流畅。截图 `10-18`。
|
||
- **任务 2：查看详情（含整改台账）** → 点击整改措施链接打开"详情"弹窗，整改措施/完成时限等均能回显；但"措施责任领导"显示占位符"请选择措施责任领导"（P1#2）；列表该列显示部门名"DD"（P1#1）。截图 `24_t2_detail_modal.png`、`60_detail_values.png`。
|
||
- **任务 3：流程操作（发起/查询流程）** → "流程操作"下拉三项全显示；点"查询督办流程"弹出流程列表（含审批历史/流程图入口），流程"wqdwqd"督办中可见；点"发起巡视整改流程 / 发起销号流程"能打开发起弹窗（发起类型无解释 P2#5）；督办中任务也能发起/销号（P1#3）。截图 `22-23`、`50`、`60_t3_suo_flow_modal.png`。
|
||
- **任务 4：整改反馈记录（查看办理情况）** → "表单操作→查看办理情况"弹出"反馈信息（共 0 条）"，空数据；有 关闭/确认 按钮。截图 `51_t4_feedback.png`。
|
||
- **任务 5：新增/编辑** → 点"新增"打开表单，空提交触发 7 条明确校验（友好）；整改措施/密级/完成时限/具体问题可正常填写；措施责任部门/责任领导/分管所领导为多级树/角色用户选择，自动化填选受阻，未走通"完整提交成功"路径（未建数，无 QA_UX 残留）。截图 `41-42`、`54-59`。
|
||
|
||
---
|
||
|
||
## 待实测 / 代码推断（未列入 P1/P2 实锤）
|
||
| 项目 | 状态 | 说明 |
|
||
|------|------|------|
|
||
| 发起流程提交后是否真会创建重复流程 | 代码推断，待实测 | 已验证入口（督办中任务能打开发起弹窗）；为避免污染真实流程数据，未点"提交"。风险推断基于菜单无条件显示 |
|
||
| 删除是否级联删除关联反馈记录/流程 | 代码推断，待实测 | 仅确认有二次确认弹窗；为保护现有数据未点"确定"。后端删除行为需工程师侧实测 |
|
||
| "措施责任领导"列根因 | 已 DOM+代码确认 | `DqInspectTask.data.ts:256-258` 列绑定 `measureResDept_dictText`（应为 `measureResLeader_dictText`），与 DOM 两列同值佐证一致 |
|
||
| 加载态 / 后端错误态 | 未实测 | 本次未模拟断网/慢接口 |
|
||
| 键盘 Tab 顺序 / 文字对比度 | 未实测 | 本次仅验证 Escape 关弹窗；行底色视觉已用 vision+DOM 复核并升级为 P2#9，其余对比度细节待人工复核 |
|
||
| 特殊字符 / 超长文本 / 快速连点 | 未实测 | 边界输入本次未覆盖 |
|
||
|
||
---
|
||
|
||
*报告按用户视角分级（P0/P1/P2），证据均来自浏览器实测（截图/网络响应/模态文本），证据路径指向 `qa-tmp/inspectTask/`。测试过程中未创建任何 `QA_UX_` 数据，无残留。*
|