supervision-test-frontend-repo/qa-report/xispeak/QA_REPORT_UX.md

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

审查信息

• 页面/路由：/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）。