!145 docs(xispeak): 归档前端页面 QA 审查报告(用户视角)

* docs(xispeak): 归档前端页面 QA 审查报告(用户视角)
* docs(fixcontact): 归档前端页面 QA 审查报告(用户视角)
* docs(inspectTask): 归档前端页面 QA 审查报告(工程师+用户视角)
* docs(bqtakepulse): 归档前端页面 QA 审查报告(工程师+用户视角)
* docs(bgpartymatter): 归档前端页面 QA 审查报告(工程师+用户视角)
This commit is contained in:
wsm
2026-08-11 07:27:58 +00:00
parent 33dfb1ca9b
commit 237a5810cf
8 changed files with 751 additions and 0 deletions
+118
View File
@@ -0,0 +1,118 @@
# 前端页面用户视角审查报告 — 定点联系单列表页(fixcontact
## 审查信息
- 页面/路由:`/bg/fixcontact/FixedContact20260730List`(定点联系单列表页)
- 审查日期:2026-08-11
- 审查视角:业务用户(督办工作人员,兼顾首次使用新手)
- 相关文件:
- 视图:`src/views/bg/fixcontact/FixedContact20260730List.vue`
- 表单:`src/views/bg/fixcontact/components/FixedContact20260730Form.vue`
- 发起流程弹窗:`src/components/semri/process/FlowScheduleStartModalForBG.vue`
- API`src/views/bg/fixcontact/FixedContact20260730.api.ts``src/api/common/api.ts`
- 实测环境:前端 dev 127.0.0.1:3100,后端代理 8080,账号 `admin/123456`(登录走 mock
- 测试数据卫生:全程使用 `QA_UX_` 前缀建数并实测,测后已清理(最终 QA_UX 残留 0 条)。发起流程路径为「已建数实测并清理」。
- 证据目录:`qa-tmp/fixcontact/``screenshots/` 下 26 张截图 + `diag_flow.json` 后端响应原文)
## 总体结论
- **P0 × 1 P1 × 1 P2 × 6**
- 一句话总结:查询、查看详情、新建这些日常操作用户都能顺畅走通,但**页面最关键的动作"发起流程"实测必然失败且只给出"请稍后重试"这类毫无原因的错误提示**,督办工作会卡死在这里;此外新建记录被强制要求填一条尚未发生的"领导审批意见",逼用户编造数据。
---
## P0 - 用户办不成事 / 会出错
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|---|---------|--------------|------|------|------|
| 1 | 对一条"未开始"记录发起督办流程 | 点"流程操作 → 发起流程",弹窗已自动填好督办标题/被督办部门/截止时间,用户只需点"提交";点下去却先后弹出两条错误"立即发起流程失败"、"发起流程失败,请稍后重试",页面上没有任何"哪里错了、该怎么改"的信息,原样重试依然失败 | 督办流程发起不了,督办工作在这里卡死;用户无法判断是自己填错还是系统故障,也没有任何下一步指引,只能干着急/找技术,且连续两条同义错误提示让用户困惑 | 截图 `screenshots/15_flow_modal.png` `16_flow_filled.png` `17_flow_submitted.png`toast 原文"立即发起流程失败""发起流程失败,请稍后重试";后端响应 `{"success":false,"code":500,"message":"立即发起流程失败"}`(见 `diag_flow.json` 中 flow-schedules 响应体,HTTP 200 但业务码 500)。已建数实测并清理 | 前端失败分支:`FixedContact20260730List.vue` `handleFlowScheduleConfirm` 的 catch `createMessage.error('发起流程失败,请稍后重试')`;后端 `/tasktask/taskTask/flow-schedules` 返回 500。根因待后端确认(疑为测试库未部署 `fix_contact` 流程定义,部署脚本在 `deploy-pack/.../03_flow/*.sql`、flyway `v380/*.sql` |
---
## P1 - 明显受阻 / 容易困惑
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|---|---------|--------------|------|------|------|
| 1 | 新增一条定点联系单 | 新建记录被强制要求填写"定点联系所领导审批意见",但记录才刚创建、领导还没有来联系/审批过,用户根本无从得知意见内容;这一栏不填就保存不了 | 用户只能随便编一段审批意见才能保存,编造内容会进入正式台账,后续审批和台账数据因此失真;用户被迫"无中生有" | 截图 `screenshots/10_add_filled_no_leader_opinion.png` `11_add_submit_no_leader_opinion.png`;实测:填完其余 11 个必填字段、仅留此字段为空提交 → 唯一校验错误"请输入定点联系所领导审批意见" | `FixedContact20260730Form.vue` `validatorRules.leaderOpinion: [{ required: true }]`。建议:新建阶段取消必填(或改为"选填/待领导意见"),把该校验移到审批环节 |
---
## P2 - 体验细节
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|---|---------|--------------|------|------|------|
| 1 | 看统计标签 | 顶部"未开始 0 / 督办中 1(已逾期 0)/ 已完成 0"看着像可点击的数字卡片,用户点了"未开始"标签却毫无反应,列表也不变化 | 用户以为能点击过滤到对应状态的记录,实际只是纯展示,产生"点了没反应"的困惑 | 实测:点击"未开始"标签后列表仍 1 行,无任何筛选/跳转(`screenshots/07_stats_tag_click.png` | `FixedContact20260730List.vue` `#tableTitle``<a-tag>` 纯展示,未绑定点击。建议改为可点击并按状态过滤 |
| 2 | 搜索无结果 | 搜索不存在的编号后,表格区域只显示"暂无数据"四个字,没有"去新建一条""清除筛选"之类的引导入口 | 新手用户看到空表会以为系统坏了或自己操作错,不知道怎么继续 | 实测:搜索 `ZZZZ_NOTHING_999` → 仅"暂无数据"`screenshots/20_empty_state.png` | BasicTable 默认空态,未自定义引导文案/动作 |
| 3 | 看列表行颜色 | 列表行用黄/红/绿背景区分状态(未开始/督办中/已完成),但页面上没有任何图例说明颜色含义 | 用户只能靠猜"黄行是啥意思";对色弱用户更不友好;且配色为浅粉彩(实测单行浅红 #fff1f0 与白行区分度中等),快速扫视可能忽略 | 实测:新建的未开始记录行是黄色、原督办中记录行是红色(`screenshots/02_list.png` `14_row_in_list.png`),页面无图例;vision 复核 `02_list.png`:单行浅红可辨识但不够醒目 | `FixedContact20260730List.vue` `.status-row-1/2/3` 样式 |
| 4 | 发起流程弹窗填责任部门 | 字段标签写的是"被督办部门",但清空后提交,提示语却写成"请选择责任部门",同一个对象两个叫法 | 用户会疑惑"责任部门"和"被督办部门"是不是同一个东西,影响理解 | 实测:清空"被督办部门"提交 → toast"请选择责任部门"`screenshots/25_flow_dept_empty_submit.png` | `FlowScheduleStartModalForBG.vue` 字段 label"被督办部门" vs `handleOk``createMessage.warning('请选择责任部门')` |
| 5 | 新建 vs 发起流程填"是否所办领导审批" | 同一个问题"是否所办领导审批",在新建表单里是单选按钮(是/否),在发起流程弹窗里是开关(switch),两种页面两种控件 | 同一业务字段控件不统一,用户在两处要重新适应 | 实测:新建表单为单选(`screenshots/08_add_open.png`),发起流程弹窗为开关(`screenshots/15_flow_modal.png` | 表单 `FixedContact20260730Form.vue`radiovs `FlowScheduleStartModalForBG.vue`j-switch |
| 6 | 新建一条记录 | 创建一条记录要填 12 个必填字段(序号、编号、所领导、联系单位、联系时间、座谈地点、诉求摘要、领导审批意见、分管批示、分管领导、申请人、主办部门),几乎全无默认值,几个还要逐个弹窗选人/选部门 | 创建成本高、耗时长,用户容易在中途放弃或填错;尤其"领导审批意见"在创建时根本不具备内容(见 P1-1) | 实测:空表单直接提交列出 12 条必填校验(`screenshots/09_add_empty_submit.png` | `FixedContact20260730Form.vue` `validatorRules`12 个 required |
---
## 用户会觉得顺的地方
- 顶部统计标签"未开始 / 督办中(含已逾期)/ 已完成"数量一眼可见,且实测随搜索条件联动(搜索"new"后统计仍为"督办中 1",与命中记录一致)。
- 行背景黄/红/绿区分三种状态,视觉上能快速扫出哪些单还没办(缺图例是 P2;实测配色为浅粉彩、单行时区分度中等,见 P2-3)。
- "表单编号"支持模糊查询,鼠标悬停有 tooltip 说明"支持模糊查询"。
- 发起流程弹窗默认值给得贴心:督办标题自动带出表单编号、被督办部门自动带出主办部门、截止时间自动带出联系时间,用户基本只需点"提交"(可惜提交后端失败)。
- 新建表单校验提示都写成"请输入X/请选择X",能直接定位到字段,并且校验后自动滚动到第一个错误字段,不靠猜。
- 点"表单编号"列可直接查看详情(有 tooltip 提示),删除/批量删除/删除关联流程都有二次确认,不容易误删。
- 操作列固定在最右侧(fixed right),横向滚动时流程/表单操作按钮始终可见。
---
## 12 维度核对结果汇总
| # | 维度 | 通过 | 问题(简写+证据位置) |
|---|------|------|----------------------|
| 1 | 目标达成 | 部分 | 搜索/详情/新建可完成;核心任务"发起流程"实测必失败且无指引 → **P0-1** |
| 2 | 可发现性 | 通过 | 新增/查询/重置/导出/下载模板/流程操作/表单操作均在一屏可见;表单编号点击看详情有 tooltip |
| 3 | 可学习性 | 问题 | 字段标签+占位符自解释;但"定点联系所领导审批意见"必填与新建时机冲突,用户无从知道填什么 → **P1-1** |
| 4 | 效率 | 问题 | 新建 12 必填项重 → **P2-6**;统计标签不能点击过滤 → **P2-1** |
| 5 | 认知负荷 | 问题 | 12 列表格需横向滚动、创建字段多;行色无图例 → **P2-3** |
| 6 | 文案清晰度 | 问题 | 新建校验消息清晰;但"请选择责任部门"与"被督办部门"叫法不一致 → **P2-4**;发起流程失败无原因 → **P0-1** |
| 7 | 反馈及时性 | 问题 | 新建成功有"添加成功!"且列表刷新(好);发起流程失败连弹两条同义错误、无下一步 → **P0-1** |
| 8 | 误操作防护 | 通过 | 删除/批量删除/删除关联流程均有二次确认;前端提交前校验并滚动定位 |
| 9 | 空态/加载/错误态 | 问题 | 空态仅"暂无数据"无引导 → **P2-2**;失败态无指引 → **P0-1** |
| 10 | 无障碍细节 | 待实测 | 表格长文本 pre-wrap 换行合理;行色标无图例对色弱不友好 → **P2-3**;键盘/焦点/对比度未逐项实测;行背景色已 vision+DOM 复核(见 P2-3 |
| 11 | 视觉一致性 | 问题 | 同一字段"是否所办领导审批"在新建表单是单选、在发起弹窗是开关 → **P2-5**;其余与平台风格一致 |
| 12 | 边界场景 | 部分/待实测 | 搜索无结果时统计归零由代码联动(实测命中时统计一致);连点提交/刷新丢状态/超长文本未逐项实测 → 待实测 |
---
## 用户任务走查记录
- **任务 1:搜索一条记录(搜索 + 重置)**
1. 登录(`01_login.png`)→ 进入列表(`02_list.png`)。
2. 在"表单编号"输入框填入已知编号 `new`,自动触发(防抖)查询,再点"查询"按钮:列表剩 1 行命中(`04_search.png`),顶部统计同步仍显示"督办中 1"。
3. 点"重置":列表恢复全部数据(`05_reset.png`)。
4. 感受:顺畅。输入即查、统计联动,体验好;唯一小遗憾是"暂无数据"无引导(见 P2-2)。
- **任务 2:查看详情**
1. 点第一条记录的"表单编号"链接 → 弹出"详情"弹窗(`06_detail.png`),字段均只读展示。
2. 关闭弹窗正常。
3. 感受:顺畅,字段完整。
- **任务 3:看统计标签(未开始/督办中/已完成)**
1. 顶部显示"未开始 0 / 督办中 1(已逾期 0)/ 已完成 0"(`03_stats.png`),数字随搜索联动。
2. 点"未开始"标签 → 无任何反应(`07_stats_tag_click.png`)。
3. 感受:数量展示有用,但标签"点了没反应"让人困惑(见 P2-1);行背景色的状态含义没有图例说明(见 P2-3)。
- **任务 4:发起流程(核心任务,已建数实测并清理)**
1. 当前库里没有"未开始"记录 → 用 `QA_UX_` 前缀通过"新增"表单建一条(`12_add_filled_complete.png`),提交"添加成功!"后在列表出现,行背景黄色 = 未开始(`14_row_in_list.png`)。
2. 对该行点"流程操作 → 发起流程",弹窗已自动带好督办标题/被督办部门/截止时间(`15_flow_modal.png` `16_flow_filled.png`)。
3. 点"提交" → 先后弹出"立即发起流程失败"、"发起流程失败,请稍后重试"(`17_flow_submitted.png`),后端返回 500`diag_flow.json`)。重试同样失败。
4. 感受:**这里卡住了**。默认值很贴心,但提交失败没有任何原因和下一步,督办工作无法推进(见 **P0-1**)。已建数实测并清理(最终 QA_UX 残留 0)。
- **任务 5:新增一条记录 + 表单校验实测**
1. 点"新增",先直接提交空表单:弹出 12 条必填校验,逐条清楚(`08_add_open.png` `09_add_empty_submit.png`)。
2. 填完其余 11 个必填字段、故意不填"定点联系所领导审批意见"提交:唯一校验错误"请输入定点联系所领导审批意见"(`10_add_filled_no_leader_opinion.png` `11_add_submit_no_leader_opinion.png`)——**确认"领导审批意见必填"是真的**,而该字段在新建时本无内容可填(见 **P1-1**)。
3. 补填该字段后提交:toast"添加成功!",弹窗关闭,列表出现新记录(`13_add_submitted.png`)。
4. 感受:校验信息清楚、能定位字段,体验好;但 12 个必填项 + 一个语义上不该必填的"领导审批意见",让新建变得又重又别扭(见 **P1-1**、**P2-6**)。
---
## 待实测 / 代码推断清单(不进 P1/P0)
- **发起流程失败根因**:后端 `/tasktask/taskTask/flow-schedules` 返回业务码 500(消息"立即发起流程失败")。是否因测试库未部署 `fix_contact` 流程定义导致(部署 SQL 见 `deploy-pack/.../03_flow/*.sql`、flyway `v380/*.sql`),需后端/环境确认后,才能判断是环境问题还是生产也会出现的缺陷。**用户侧事实(P0-1)不受此影响:失败且无任何指引。**
- 无障碍细节(键盘 Tab/回车/Esc 走完核心流程、焦点可见性、文字对比度/字号)未逐项实测。行背景色已 vision+DOM 复核(单行浅红可辨识但不够醒目,见 P2-3),其余对比度细节待人工复核。
- 边界场景(快速连点提交、切换筛选后返回、中途刷新丢未保存内容、超长文本输入)未逐项实测。