wsm
237a5810cf
* docs(xispeak): 归档前端页面 QA 审查报告（用户视角） * docs(fixcontact): 归档前端页面 QA 审查报告（用户视角） * docs(inspectTask): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bqtakepulse): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bgpartymatter): 归档前端页面 QA 审查报告（工程师+用户视角）
119 lines
14 KiB
Markdown
119 lines
14 KiB
Markdown
# 前端页面用户视角审查报告 — 定点联系单列表页（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：搜索一条记录（搜索 + 重置）**
|
||
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），其余对比度细节待人工复核。
|
||
- 边界场景（快速连点提交、切换筛选后返回、中途刷新丢未保存内容、超长文本输入）未逐项实测。
|