# 前端页面用户视角审查报告 — 重要指示批示台账（树形台账）

## 审查信息
- 页面/路由：`/bg/xispeak/BgXiSpeakList`（习总书记重要讲话指示批示情况台账，树形列表）
- 审查日期：2026-08-11
- 审查视角：业务用户（督办工作人员，不懂技术；兼顾首次使用新手）
- 相关文件：`src/views/bg/xispeak/BgXiSpeakList.vue`、`BgXiSpeak.data.ts`、`BgXiSpeak.api.ts`、`components/BgXiSpeakForm.vue`、`components/FeedbackRightNowModal.vue`、`src/components/semri/process/FlowScheduleStartModal.vue`
- 测试账号：admin/123456（登录走 mock，其余接口真实后端 8080）
- 证据目录：`qa-tmp/xispeak/screenshots/`（截图）、`qa-tmp/xispeak/artifacts/ux_walk*_log_readable.txt`（过程记录）
- 视觉说明：视觉复核已用 claude-vision-skill 实读截图 + DOM 实测互补——可视区内容（行状态配色等）以 vision 实读为准，被横向滚动藏住的列以 DOM（scrollWidth vs clientWidth）为准

## 总体结论
- P0 × 0 ｜ P1 × 1 ｜ P2 × 7
- 一句话总结：核心任务（浏览树形台账、筛选、看统计、流程/表单操作）都能顺利办成，唯一的硬伤是发起"重复发起"流程时空周期字段会弹出**英文错误提示**（业务用户看不懂），其余为横向滚动、空态引导、表单必填项多等体验细节问题，页面整体可用。

## P0 - 用户办不成事 / 会出错
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|---|---------|--------------|------|------|------|
| - | 无 | 实测核心任务全部可完成，未发现 P0 | - | - | - |

## P1 - 明显受阻 / 容易困惑
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|---|---------|--------------|------|------|------|
| 1 | 督办工作人员对某条记录选"流程操作 → 发起落实措施收集流程 → 确认发起 → 重复发起"，不改"重复周期"直接点"发起流程" | 页面弹出一条**英文**提示 `Please select interval type`，业务人员完全看不懂，也不知道"哪个没填、怎么填" | 用户卡住、只能猜或找技术人员；同处还有 3 条英文提示（interval type / repeat count / start time） | 实测触发，截图 `qa-tmp/xispeak/screenshots/44_recurring_english_toast.png`；过程记录 `artifacts/ux_walk6_log_readable.txt`（`recurring_empty_toasts`） | `src/components/semri/process/FlowScheduleStartModal.vue:331,335,339`（`createMessage.warning('Please select interval type')` 等未翻译） |

## P2 - 体验细节
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|---|---------|--------------|------|------|------|
| 1 | 发起流程时连续弹出两个**标题一模一样**的弹窗 | 点"发起落实措施收集流程"先弹"选择反馈方式"（标题=发起落实措施收集流程），点"确认发起"后又弹一个"发起类型/流程参数"的弹窗（标题仍是发起落实措施收集流程） | 用户以为点错了/重复点击，不确定当前在第几步 | 实测两步弹窗标题均相同，截图 `41_step1_feedback_now.png`、`42_step2_flow_schedule.png`；`artifacts/ux_walk6_log_readable.txt`（step1/step2 modal_title） | `components/FeedbackRightNowModal.vue:13` 与 `src/components/semri/process/FlowScheduleStartModal.vue` 标题一致 |
| 2 | 看台账列表时只有 1200px 宽视口却铺了 16 列 | "督办状态""牵头部门""贯彻落实措施"等关键列在很靠右的位置，必须横向拖动才能看到；首屏只能看到讲话情况/批示情况/时间等几列 | 用户来回拖滚动条，容易漏看逾期/督办状态 | 实测 `table_hscroll = {scrollWidth:2280, clientWidth:1200, scrollable:true}`，列数 16，截图 `20_layout_metrics.png` | `BgXiSpeak.data.ts` columns（16 列含选择框/操作列） |
| 3 | 筛选/搜索后没有任何匹配数据 | 表格只剩一行"暂无数据"，没有任何"清除筛选/重置条件"的引导按钮 | 新手不知道是条件填错还是真没数据，只能自己找"重置"按钮 | 实测空态仅文字"暂无数据"，截图 `06_empty_search_result.png`；`artifacts/ux_walk_log_readable.txt`（`empty_state_text`） | `BgXiSpeakList.vue` 表格空态 |
| 4 | 点"新增"录入一条台账 | 弹出 1400px 宽的表单，15 个字段里 **12 个必填**，时间/日期/密级/责任领导/牵头部门都要选 | 首次录入负担重、填到一半容易放弃；占位符（如"来源于党委会抄告"）对新人不解释来源 | 实测必填 12 项、错误提示 11 条，截图 `33_add_modal_open.png`、`34_add_empty_submit.png`；`artifacts/ux_walk6_log_readable.txt`（`add_modal_field_labels`/`add_empty_submit_errors_v2`） | `components/BgXiSpeakForm.vue`（rules，见 `BgXiSpeakForm.vue:198-210`） |
| 5 | 想查看某条记录的详情 | 第一列"习近平总书记重要讲话指示批示情况"是蓝色链接，但只有鼠标悬停才出现"点击查看详情"提示 | 新手不知道能点；误以为是表头标题 | 实测链接样式（蓝色 14px 加粗）`artifacts/ux_walk4_log_readable.txt`（`first_col_link_style`）；tooltip 提示 | `BgXiSpeakList.vue:116-120` |
| 6 | 勾选多条后点"批量操作 → 删除" | 弹出"确认删除 / 是否删除所选记录"，但**没有像单行删除那样提示会连带删除关联流程信息** | 用户以为只删台账记录，不知道关联流程数据也会被清理 | 实测批量确认弹窗正文仅"是否删除所选记录"，截图 `51_batch_delete_modal.png`；对比单行删除提示见 `46_delete_popconfirm.png` | `BgXiSpeak.api.ts:68-73`（`batchDeleteBgXiSpeak` confirm 文案） |
| 7 | 看右上角统计标签"未开始 4 / 督办中 3（已逾期 3）/ 已完成 3" | 标签字号仅 12px，在右侧偏小，视力一般的用户要凑近看 | 关键督办压力信息不够醒目 | 实测 `stats_tag_style = {color:rgb(140,105,0), fs:12px}` | `BgXiSpeakList.vue:98-102` |

## 用户会觉得顺的地方
- **统计标签实时同步**：按"督办状态=督办中"筛选后，标签立即变为"未开始 0 / 督办中 3（已逾期 3）/ 已完成 0"，搜索/重置同样同步（实测，`04_filter_bpm.png`）。
- **表单必填校验提示友好**：空表单点"确认"一次性给出 11 条"请输入/请选择 ××"的明确提示，能定位到具体字段（实测，`40_add_empty_submit_v2.png`）。
- **破坏性操作有防护**：单行删除有 popconfirm"确定删除吗? 将同时删除该记录关联的所有流程信息"，批量删除有"确认删除/是否删除所选记录"（实测，`46_delete_popconfirm.png`、`51_batch_delete_modal.png`）。
- **流程操作菜单按状态动态变化**：未开始记录显示"发起落实措施收集流程/发起经办人执行反馈流程/查询督办流程"；督办中记录显示"再次发起经办人执行反馈流程/查询督办流程/删除关联流程"，用户不会被无效操作误导（实测，`07_flow_dropdown.png`、`45_inprogress_flow_menu.png`）。
- **树形台账浏览顺畅**：展开父节点能加载出子节点（5 行 → 7 行），第一列可点击查看详情（实测，`03_tree_expanded.png`、`32_detail_link_modal.png`）。
- 全程无 console 报错（实测 `console_error_count=0`）。

## 12 维度核对结果汇总
| # | 维度 | 通过 | 问题（简写+证据位置） |
|---|------|------|----------------------|
| 1 | 目标达成 | 通过 | 5 条核心任务（浏览/展开、筛选、统计、流程操作、表单操作）全部实测走通，无走不下去的路径 |
| 2 | 可发现性 | 问题 | 第一列查看详情入口仅 hover tooltip（P2-5）；批量操作按钮需先勾选才出现（较隐蔽） |
| 3 | 可学习性 | 问题 | 两步弹窗同名易迷惑（P2-1）；新增表单 12 必填对新手偏重（P2-4） |
| 4 | 效率 | 问题 | 16 列表格横向滚动看关键列（P2-2）；必填项多、重复录入负担（P2-4） |
| 5 | 认知负荷 | 问题 | 同屏 16 列信息过载（P2-2）；行状态配色可缓解（已 vision+DOM 复核：浅黄/浅红/浅绿相邻可区分） |
| 6 | 文案清晰度 | 问题 | 重复发起流程英文提示（P1-1）；其余中文文案（校验/删除确认）清晰 |
| 7 | 反馈及时性 | 通过 | 统计标签随筛选/搜索/重置同步刷新；删除/发起有 message/popconfirm 反馈 |
| 8 | 误操作防护 | 通过 | 单行删除 + 批量删除均有确认；批量删除未提示关联流程（P2-6） |
| 9 | 空态/加载/错误态 | 问题 | 空搜索结果仅"暂无数据"无引导（P2-3）；loading 状态存在 |
| 10 | 无障碍细节 | 待实测 | 键盘走查/焦点可见性未实测；统计标签 12px 偏小（P2-7） |
| 11 | 视觉一致性 | 通过 | 行状态配色（浅黄/浅红/浅绿）已 vision 复核 `02_list_overview.png` 五行三色相邻可区分；DOM `status-row-1/2/3` = #fffbe6/#fff1f0/#f6ffed；红绿对色弱用户区分度有限，已有统计标签/文字辅助 |
| 12 | 边界场景 | 通过 | 模糊搜索无结果正常显示空态、重置恢复、状态筛选联动正常（抽查） |

## 用户任务走查记录
- **任务 1：登录并进入台账** → `01_login.png` → `02_list_overview.png`，顺畅（登录后直达 `/bg/xispeak/BgXiSpeakList`）。
- **任务 2：浏览树形台账并展开子节点** → 点击行首展开图标，5 行展开为 7 行，子节点加载正常 → `03_tree_expanded.png`，顺畅。
- **任务 3：按督办状态筛选 + 看统计** → 选"督办中"→ 列表和右上角统计标签同步变为督办中 3 → `04_filter_bpm.png`，顺畅且反馈即时；重置 → `05_after_reset.png`。
- **任务 4：关键词搜索到空结果** → 输入不存在关键词 → 仅"暂无数据"，无引导 → `06_empty_search_result.png`，略困惑（P2-3）。
- **任务 5：发起落实措施收集流程（核心）** → 流程操作下拉 → 选择反馈方式弹窗 → 确认发起 → 发起类型弹窗（两步同名）→ 选"重复发起"空提交弹英文提示 → `41/42/43/44_*.png`，英文提示卡住用户（P1-1）。
- **任务 6：查看办理情况 / 详情** → 表单操作下拉 → 查看办理情况弹"反馈信息（共 0 条，已完成 0 条）" → `13_feedback_modal.png`；第一列点开详情弹"详情"只读 → `32_detail_link_modal.png`，顺畅。
- **任务 7：新增（空表单校验）** → 新增 → 空提交 → 11 条"请输入/请选择"友好提示 → `40_add_empty_submit_v2.png`，顺畅但必填项偏多（P2-4）。
- **任务 8：删除（单行/批量）** → 单行删除有 popconfirm 并提示连带流程 → `46_delete_popconfirm.png`；批量删除有确认弹窗但未提示关联流程 → `51_batch_delete_modal.png`。
- **任务 9：高级查询** → 工具栏"高级查询"弹窗正常打开 → `50_super_query.png`，顺畅。

## 待实测 / 代码推断（不进入 P0/P1，需人工复核或后续验证）
- **行状态背景配色**（未开始=浅黄 #fffbe6、督办中=浅红 #fff1f0、已完成=浅绿 #f6ffed，`BgXiSpeakList.vue:996-1004`）已用 vision+DOM 复核确认（`02_list_overview.png` 五行三色相邻可区分），非代码推断。注意：本页全行着色所以可辨识；配色为浅粉彩，若仅单行着色时会接近白色、辨识度骤降（inspectTask 已单独记录为 P2#9）。
- **批量删除是否连带物理删除关联流程数据**：前端确认文案未提及，后端 `deleteBatchBgXiSpeak` 行为未实测，仅记录文案不一致（P2-6）。
- **键盘操作 / 焦点可见性 / Tab 顺序**：本次未做键盘走查，需人工补充。
- **快速连点提交/翻页等并发边界**：本次未实测。
- **新增表单完整保存链路的回显**：本次空表单校验实测通过；完整填数保存因弹窗/浮层交互复杂未重复走通（此前 8-7 的历史 crud 脚本 `qa-tmp/xispeak/probe_crud.py` 已覆盖该链路）。

## 测试数据卫生
- 本次审查**未创建任何记录**（新增仅做空表单校验，未保存），无新增残留。
- **发现既有残留**：台账中已有 4 条顶层 `QA_UX_` 前缀测试记录及其子节点（`QA_UX_树形主台账1-未开始`、`QA_UX_树形测试父节点X`、`QA_UX_督办中台账2-已逾期`、`QA_UX_已完成台账3`），为历史 QA 测试遗留，非本次产生，**未删除**（避免破坏既有测试数据），建议后续统一清理。证据：`artifacts/ux_walk7_log_readable.txt`（`rows_summary`）、`ux_walk5_log_readable.txt`（`qa_rows_all_cells`）。