# 前端页面用户视角审查报告 — 巡视整改台账(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_` 数据,无残留。*