wsm
237a5810cf
* docs(xispeak): 归档前端页面 QA 审查报告（用户视角） * docs(fixcontact): 归档前端页面 QA 审查报告（用户视角） * docs(inspectTask): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bqtakepulse): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bgpartymatter): 归档前端页面 QA 审查报告（工程师+用户视角）
14 KiB
14 KiB
前端页面用户视角审查报告 — 定点联系单列表页（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（radio）vs 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：搜索一条记录（搜索 + 重置）
- 登录（
01_login.png）→ 进入列表（02_list.png）。 - 在"表单编号"输入框填入已知编号
new，自动触发（防抖）查询，再点"查询"按钮：列表剩 1 行命中（04_search.png），顶部统计同步仍显示"督办中 1"。 - 点"重置"：列表恢复全部数据（
05_reset.png）。 - 感受：顺畅。输入即查、统计联动，体验好；唯一小遗憾是"暂无数据"无引导（见 P2-2）。
- 登录（
-
任务 2：查看详情
- 点第一条记录的"表单编号"链接 → 弹出"详情"弹窗（
06_detail.png），字段均只读展示。 - 关闭弹窗正常。
- 感受：顺畅，字段完整。
- 点第一条记录的"表单编号"链接 → 弹出"详情"弹窗（
-
任务 3：看统计标签（未开始/督办中/已完成）
- 顶部显示"未开始 0 / 督办中 1（已逾期 0）/ 已完成 0"（
03_stats.png），数字随搜索联动。 - 点"未开始"标签 → 无任何反应（
07_stats_tag_click.png）。 - 感受：数量展示有用，但标签"点了没反应"让人困惑（见 P2-1）；行背景色的状态含义没有图例说明（见 P2-3）。
- 顶部显示"未开始 0 / 督办中 1（已逾期 0）/ 已完成 0"（
-
任务 4：发起流程（核心任务，已建数实测并清理）
- 当前库里没有"未开始"记录 → 用
QA_UX_前缀通过"新增"表单建一条（12_add_filled_complete.png），提交"添加成功！"后在列表出现，行背景黄色 = 未开始（14_row_in_list.png）。 - 对该行点"流程操作 → 发起流程"，弹窗已自动带好督办标题/被督办部门/截止时间（
15_flow_modal.png16_flow_filled.png）。 - 点"提交" → 先后弹出"立即发起流程失败"、"发起流程失败，请稍后重试"（
17_flow_submitted.png），后端返回 500（diag_flow.json）。重试同样失败。 - 感受：这里卡住了。默认值很贴心，但提交失败没有任何原因和下一步，督办工作无法推进（见 P0-1）。已建数实测并清理（最终 QA_UX 残留 0）。
- 当前库里没有"未开始"记录 → 用
-
任务 5：新增一条记录 + 表单校验实测
- 点"新增"，先直接提交空表单：弹出 12 条必填校验，逐条清楚（
08_add_open.png09_add_empty_submit.png）。 - 填完其余 11 个必填字段、故意不填"定点联系所领导审批意见"提交：唯一校验错误"请输入定点联系所领导审批意见"（
10_add_filled_no_leader_opinion.png11_add_submit_no_leader_opinion.png）——确认"领导审批意见必填"是真的，而该字段在新建时本无内容可填（见 P1-1）。 - 补填该字段后提交：toast"添加成功！"，弹窗关闭，列表出现新记录（
13_add_submitted.png）。 - 感受：校验信息清楚、能定位字段，体验好；但 12 个必填项 + 一个语义上不该必填的"领导审批意见"，让新建变得又重又别扭（见 P1-1、P2-6）。
- 点"新增"，先直接提交空表单：弹出 12 条必填校验，逐条清楚（
待实测 / 代码推断清单（不进 P1/P0）
- 发起流程失败根因：后端
/tasktask/taskTask/flow-schedules返回业务码 500（消息"立即发起流程失败"）。是否因测试库未部署fix_contact流程定义导致（部署 SQL 见deploy-pack/.../03_flow/*.sql、flywayv380/*.sql），需后端/环境确认后，才能判断是环境问题还是生产也会出现的缺陷。用户侧事实（P0-1）不受此影响：失败且无任何指引。 - 无障碍细节（键盘 Tab/回车/Esc 走完核心流程、焦点可见性、文字对比度/字号）未逐项实测。行背景色已 vision+DOM 复核（单行浅红可辨识但不够醒目，见 P2-3），其余对比度细节待人工复核。
- 边界场景（快速连点提交、切换筛选后返回、中途刷新丢未保存内容、超长文本输入）未逐项实测。