wsm
237a5810cf
* docs(xispeak): 归档前端页面 QA 审查报告（用户视角） * docs(fixcontact): 归档前端页面 QA 审查报告（用户视角） * docs(inspectTask): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bqtakepulse): 归档前端页面 QA 审查报告（工程师+用户视角） * docs(bgpartymatter): 归档前端页面 QA 审查报告（工程师+用户视角）
99 lines
15 KiB
Markdown
99 lines
15 KiB
Markdown
# 前端页面用户视角审查报告 — 党委会/所务会事项（bgpartymatter）
|
||
|
||
## 审查信息
|
||
|
||
- 页面/路由：`/bg/bgpartymatter/BgPartymatterList`（党委会台账，菜单名「党委会决策事项」）；所务会复用 `BgOfficematterList`（`meetingType=office`，菜单名「所务会决策事项」）
|
||
- 审查日期：2026-08-11
|
||
- 审查视角：业务用户（主视角，兼顾首次使用新手）
|
||
- 相关文件：`src/views/bg/bgpartymatter/BgPartymatterList.vue`、`components/BgPartymatterForm.vue`、`BgPartymatter.data.ts`、`BgPartymatter.api.ts`
|
||
- 证据目录：`qa-tmp/bgpartymatter/screenshots/`（截图 01–22）、`qa-tmp/bgpartymatter/scripts/*.json`（网络/表单/交互证据）
|
||
- 测试账号：`admin`（仅 1 个账号，多角色/多部门对比场景未覆盖）
|
||
- 说明：审查全程无头浏览器实测（Playwright，dev 端口 3100，登录走 mock，其余接口走真实后端 8080）。视觉复核已用 claude-vision-skill 实读截图（如 `08_detail_modal_closeup.png`）+ DOM 实测互补。
|
||
|
||
## 总体结论
|
||
|
||
- **P0 × 1 ｜ P1 × 2 ｜ P2 × 6**
|
||
- 一句话总结：搜索、查看详情、展开办理情况、发起/查询流程、新增、删除这些核心流程都能走通，但工具栏的「导出」按钮完全不可用且点击后毫无反应（后端 500 静默失败），是用户日常办事最大的拦路虎；顶部统计标签不随筛选/搜索/增删改刷新、详情弹窗字段「看似可编辑实则点不动」，会让用户误读数据、反复操作。
|
||
|
||
## P0 - 用户办不成事 / 会出错
|
||
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 1 | 我要把党委会台账导成 Excel 交上去 | 点击工具栏「导出」按钮，没有任何反应——不弹窗、不下载、不报错，页面静悄悄 | 台账无法导出，用户以为在下载/以为卡了，反复点也没用；后端每次返回 500（POI `ExcelExportException`），但前端吞掉异常不提示 | 实测：点击导出后 `downloads` 列表为空、无任何 toast；后端响应 `exportXls?meetingType=party` 返回 HTTP 500，body 为 `org.jeecgframework.poi.exception.excel.ExcelExportException: Excel导出错误`（见 `qa-tmp/bgpartymatter/scripts/06_crud.json` export_resp、`05_flow.json` api 日志；截图 `13_export.png`） | `BgPartymatterList.vue` 的 `useListPage` exportConfig（line 303-307）+ 后端 `bgPartymatter/exportXls` |
|
||
|
||
## P1 - 明显受阻 / 容易困惑
|
||
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 1 | 我想看看「督办中」还有几件事，于是用事项名称/完成状态筛选 | 筛选后下面列表变了（比如 0 条），但顶部三个统计标签（未开始 0 / 督办中 1（已逾期 1）/ 已完成 0）**始终不变**，还是全台账的全局数字 | 列表与统计对不上，用户不知道哪个才对，可能误以为还有未完成事项没人管、或以为自己筛选没生效；增删改后统计也不刷新 | 实测：搜索无关关键词后列表 0 条，统计仍显示「督办中 1（已逾期 1）」；搜索命中后仍不变（`qa-tmp/bgpartymatter/scripts` 运行输出 / `02_list_overview.png` 初始态）；`fetchStatusStats` 仅在 `onMounted` 调用一次，`searchQuery/searchReset/handleSuccess` 均未刷新统计（`BgPartymatterList.vue:446-465`） | `BgPartymatterList.vue:100-104`（统计标签）、`:463`（onMounted 仅一次） |
|
||
| 2 | 我在详情弹窗里想顺手改一下某字段再确认 | 详情弹窗里字段看起来都能点（光标是手型、颜色正常），但点下去**毫无反应**——实际被一层看不见的透明遮罩拦住，保存按钮也被隐藏 | 用户以为系统坏了/自己没点中，反复尝试浪费时间；看不清到底能不能编辑（视觉上无明确只读提示） | 实测：详情模式 `.jeecg-form-detail-effect` 遮罩层存在并拦截 pointer 事件；表单项 cursor=not-allowed、pointer-events=none，但下拉控件 opacity=1、cursor=pointer 显示为可点；主按钮带 `jee-hidden` 类隐藏（`qa-tmp/bgpartymatter/scripts/04_detail2.json`；截图 `08_detail_modal_closeup.png`）；已用 vision 实读 `08_detail_modal_closeup.png` 确认截图视觉上下拉控件未灰化、呈可点外观，与点击无反应形成反差 | `BgPartymatterList.vue:486-490`（handleDetail 设 disableSubmit）+ `JFormContainer` 详情遮罩 |
|
||
|
||
## P2 - 体验细节
|
||
|
||
| # | 用户场景 | 用户会遇到什么 | 后果 | 证据 | 位置 |
|
||
|---|---------|--------------|------|------|------|
|
||
| 1 | 我填完新增表单点「确认」 | 弹窗关掉、列表里出现了新记录，但**没有任何"保存成功"提示** | 用户不确定存没存上，容易重复提交或去别处找；删除却有"删除成功!"提示，前后反馈不一致 | 实测：新增 QA_UX_BGPM_003 后列表出现该行，但 `ADD TOASTS=[]`；删除时出现「删除成功!」toast（`12_adddel_final.json`） | `BgPartymatterForm.vue:403-411`（`createMessage.success(res.message)`，res.message 为空则不显示） |
|
||
| 2 | 我填主办部门时漏选了，直接提交 | 校验提示显示「**请选择责任部门**」，可这个字段明明叫「主办部门」 | 用户对不上号，以为提示说的是另一个字段 | 实测：空表单提交后，主办部门字段下报错文案为「请选择责任部门」（`02_modal.json` form_item_errors；截图 `10_add_validation_dupe.png`） | `BgPartymatterForm.vue:232-241`（校验 rule message 写死"责任部门"，字段 label 为"主办部门"） |
|
||
| 3 | 我只填了会议时间、没填议题序号就提交 | 「序号」字段提示「请输入序号」，可这个输入框是**只读的**（自动生成），我根本没法手动输入 | 用户不知道怎么消除这个错（实际上要回去填"议题序号"才会自动带出），提示指向了错误的操作对象 | 实测：序号输入框 readonly，placeholder 为"填写会议时间和议题序号后自动生成"，但校验文案是「请输入序号」（`02_modal.json`、`07_formmap.json`） | `BgPartymatterForm.vue:23-26`（只读输入）+ `:228`（校验"请输入序号"） |
|
||
| 4 | 我想看某条记录后面的完成状态、密级等字段 | 表格有 21 列，宽度约 2808px，可视区只有约 1200px，中部字段（序目录编码、抄告单编号、密级等）要一直横拖才能看到 | 反复左右拖动才能看完一条记录，看漏字段的风险高 | 实测：`.ant-table-body` scrollWidth=2808、clientWidth=1200，存在横向滚动（`scripts` 测量输出；截图 `02_list_overview.png`） | `BgPartymatter.data.ts:7-153`（21 列） |
|
||
| 5 | 我想按"完成状态"筛一下在办的 | 「完成状态」筛选条件默认藏在「**展开**」折叠里，不点开看不到 | 首次用户以为只能按年份/领导/名称/决议筛，找不到状态筛选 | 实测：页面初始工具栏无"完成状态"，点「展开」后才出现（`04_expand_filter.png`，toggle 文案由"展开"变"收起"）；`toggleSearchStatus` 默认 false（`BgPartymatterList.vue:39`） | `BgPartymatterList.vue:39-52` |
|
||
| 6 | 我搜了个没结果的关键词 | 表格显示「暂无数据」四个字，没有"换个条件试试/清除筛选"的引导 | 用户不知道是没数据还是搜错了，也没有一键清空入口（只能自己点重置） | 实测：搜索无结果后表格空态为纯「暂无数据」（`03b_search_empty.png`） | `BgPartymatterList.vue` 空态（BasicTable 默认） |
|
||
|
||
## 用户会觉得顺的地方
|
||
|
||
- 搜索即输即查（输入事项名称/会议决议时自动查询），「查询/重置」按钮位置和文案清楚，实测有效。
|
||
- 事项名称可点击进详情，详情弹窗字段回显完整（年份/会议时间/议题序号/密级/事项名称/会议决议/主办协办部门/完成状态/督办次数/要求完成日期/是否急件/需所办领导审批等 19 项）。
|
||
- 行首「展开」能看每条记录的责任部门办理情况子表，子表自带 未开始/进行中(含逾期)/已完成 统计，层级清晰。
|
||
- 新增表单「序号」会根据会议时间+议题序号自动生成（如 `20260811-9`），少填一项（实测自动带出）。
|
||
- 发起流程弹窗标题明确（如「发起流程（清空后测试 第二次督办）」），被督办部门已按主办/协办部门预填，发起类型/截止时间/是否急件/审批意见齐全。
|
||
- 「查询督办流程」弹窗能列出该事项的流程列表（含流程图/审批历史/修改/删除入口）。
|
||
- 删除有二次确认（「是否确认删除」），删除成功有 toast「删除成功!」。
|
||
- 行状态着色（未开始黄 / 督办中红 / 已完成绿）+ 顶部统计标签帮助扫读（注：配色为浅粉彩 #fff1f0 系，单行时区分度中等；统计标签不随筛选刷新见 P1-1）。
|
||
- 党委会/所务会数据严格分流（实测所务会页显示独立的"assacas"记录，不串台）。
|
||
- 校验错误信息具体（请选择年份/请输入事项名称/请输入会议决议），能定位到字段。
|
||
|
||
## 12 维度核对结果汇总
|
||
|
||
| # | 维度 | 通过 | 问题（简写+证据位置） |
|
||
|---|------|------|----------------------|
|
||
| 1 | 目标达成 | 部分 | 导出任务完全无法完成（P0-1）；其余核心任务走通 |
|
||
| 2 | 可发现性 | 部分 | 完成状态筛选藏在"展开"折叠（P2-5）；导出/下载模板/模板校验/模板导入等按钮集中在工具栏，一眼可见 |
|
||
| 3 | 可学习性 | 部分 | 序号只读但报"请输入序号"（P2-3）；校验文案"主办部门/责任部门"不一致（P2-2） |
|
||
| 4 | 效率 | 通过 | 搜索即输即查、序号自动生成、部门预填；无需多余确认 |
|
||
| 5 | 认知负荷 | 部分 | 表格 21 列过宽需横拖（P2-4）；统计与筛选不一致增加理解负担（P1-1） |
|
||
| 6 | 文案清晰度 | 部分 | 校验文案字段名不一致（P2-2）；导出失败无任何文案（P0-1）；多数提示文案业务化、可读 |
|
||
| 7 | 反馈及时性 | 部分 | 导出静默失败无反馈（P0-1）；新增无成功 toast（P2-1）；删除有 toast；列表增删后自动刷新 |
|
||
| 8 | 误操作防护 | 通过 | 删除有二次确认；详情模式保存按钮隐藏（不可误提交）；提交前必填校验明确 |
|
||
| 9 | 空态/加载/错误态 | 部分 | 空态仅"暂无数据"无引导（P2-6）；后端 500 被吞成静默（P0-1）；加载中正常 |
|
||
| 10 | 无障碍细节 | 部分 | 详情字段"看似可点实则被遮罩拦截"，光标/颜色与行为不一致（P1-2，已 vision 复核 `08_detail_modal_closeup.png` 确认下拉控件未灰化、cursor=pointer、肉眼无只读提示）；Tab 键盘流未专项验证 |
|
||
| 11 | 视觉一致性 | 通过 | 按钮、标签、状态色与平台其他台账页一致（参照 xispeak/inspectTask 风格）；无错位溢出（此前 BGPARTYMATTER_CHECKLIST 已核） |
|
||
| 12 | 边界场景 | 部分 | 搜索空结果有"暂无数据"；超长文本/连点/刷新丢数据等未逐项实测（见待实测） |
|
||
|
||
## 用户任务走查记录
|
||
|
||
- 任务 1：登录进入台账
|
||
- 打开 `/user/login` 输入 admin/123456 回车 → 进入流程门户；直接访问 `/bg/bgpartymatter/BgPartymatte
|
||
- 任务 2：搜索一条记录rList` 打开党委会台账。截图 `01_login_home.png`、`02_list_overview.png`。顺畅。
|
||
- 事项名称输入"督办"→ 0 条（空态"暂无数据"）；输入"清空"→ 1 条命中；点「重置」恢复全部。搜索即输即查+查询按钮均可用。截图 `03_search_title.png`、`03b_search_empty.png`。顺畅；但发现统计标签不随搜索变化（P1-1）。
|
||
- 任务 3：查看详情 / 展开办理情况
|
||
- 点事项名称打开详情弹窗（标题"详情"，19 字段回显）→ 点行首箭头展开"办理情况"子表（含统计与附件下载列）→ 收起。截图 `05_expand_feedback.png`、`06_detail_modal.png`、`08_detail_modal_closeup.png`。顺畅；发现详情字段被透明遮罩拦截点击（P1-2）。
|
||
- 任务 4：筛选（含展开"完成状态"）
|
||
- 点工具栏「展开」→ 出现"完成状态"筛选 → 折叠。截图 `04_expand_filter.png`。发现状态筛选藏折叠里（P2-5）。
|
||
- 任务 5：导出 / 下载模板 / 模板校验 / 模板导入
|
||
- 「下载模板」成功下载"党委会-导入模板.xls"（截图 `12_template_download.png`）；「导出」点击后无任何反应，后端 500（截图 `13_export.png`，证据见 05/06 json）→ P0-1；「模板校验/模板导入」点开是文件选择（headless 无法完成真实选文件，见待实测）。
|
||
- 任务 6：流程操作（发起/查询）
|
||
- 行内"更多"→「再次督办」打开发起流程弹窗「发起流程（清空后测试 第二次督办）」，部门已预填（截图 `16_flow_modal.png`、`07_row_dropdown.png`）；「查询督办流程」打开流程列表（含流程图/审批历史等，截图 `17_query_process.png`）。顺畅。
|
||
- 任务 7：新增→校验→删除（建数实测）
|
||
- 新增弹窗空表单提交 → 8 个必填校验（截图 `10_add_validation_dupe.png`）；填全（含部门"选择"弹窗选 DD、密级选"非密"）后提交 → 列表出现 `QA_UX_BGPM_003 测试`（序号自动生成 `20260811-9`，完成状态默认"未开始"）→ 无成功 toast（P2-1）；删除该记录 → toast「删除成功!」→ 列表无残留。截图 `19_add_filled.png`、`20_list_after_add.png`、`21_list_after_delete.png`。**已建数实测并清理，无残留。**
|
||
|
||
## 待实测 / 代码推断项（不列入 P0/P1）
|
||
|
||
| # | 项目 | 为什么没实测 | 现有线索 |
|
||
|---|------|------------|---------|
|
||
| 1 | 「模板校验」「模板导入」完整流程（选真实 Excel → 校验通过/报错提示） | 两者是文件上传按钮，headless 无头浏览器无法模拟系统文件选择框；实测对隐藏 input 设置一个 .txt 文件后无任何 toast，结果不明确 | `BgPartymatterList.vue:746-784`；后端 `getCheckExcelByEasyExcelUrl`/`getImportExcelByEasyExcelUrl` |
|
||
| 2 | 详情模式字段的视觉"只读感" | 已用 vision 实读 `08_detail_modal_closeup.png` 确认：下拉控件未灰化、cursor=pointer，截图视觉上无任何只读/不可编辑提示 → "看似可编辑"从 DOM 推断升级为**实测确认**（即 P1-2），不再待实测 | DOM：遮罩 `.jeecg-form-detail-effect` 拦截点击、表单项 cursor=not-allowed、下拉控件 opacity=1/cursor=pointer |
|
||
| 3 | 所务会（office）页「导出」是否同样 500 | 所务会与党委会是同一组件复用（`meetingType=office`），未单独实测导出 | 同一 exportConfig 与后端 `exportXls` 接口，推断大概率同错（P0-1 同源），待实测 |
|
||
| 4 | 表格过宽的中部列是否需要"冻结/固定"常用列 | 业务上哪些列最常用需人工确认 | 实测 scrollWidth 2808 vs 可视 1200，仅"操作"列固定右侧 |
|
||
| 5 | 键盘 Tab/回车完整走查、超长文本/快速连点等边界 | 时间盒内未逐项执行 | 未发现专项问题，列为常规复核项 |
|
||
| 6 | `BgPartymatterFeedbackList.vue` 独立反馈页的用户可达性 | 菜单 SQL（`V20260416_1__menu_insert_BgPartymatter.sql`）只注册了"党委会"，反馈功能在主列表"办理情况"展开面板内操作 | 独立路由 `/bg/bgpartymatter/BgPartymatterFeedbackList` 能打开（渲染了应用壳），但未见独立菜单入口 |
|