2.9 KiB
2.9 KiB
房务最终确认成功后残留全屏遮罩(前端待处理)
目标前端
- 端类型:管理后台(Web)
- 目标仓库:
mmg/hl-ui(https://git.1814.love:8443/mmg/hl-ui.git) - 联调/验收环境:
http://192.168.100.160:9527 - 其他前端:小程序、H5 无需处理
本问题属于管理后台交互状态清理,不要求修改后端接口。
现象
房务管理员在订单详情完成最后一晚“单日确认”后点击“最终确认”,业务操作成功,列表状态也已更新为“已完成”,但详情抽屉关闭后页面仍残留覆盖整个视口的 .n-modal-mask。
遮罩使列表变暗并拦截鼠标操作,页面上没有可见对话框或关闭按钮;按 Escape 后遮罩消失,页面恢复操作。
复现记录
- 测试订单:
HL20260721142957939 - 操作角色:房务管理员
- 操作步骤:选单 -> 两晚配房 -> 两晚单日确认 -> 最终确认
- 配房口径:第 1 晚扣系统库存,第 2 晚不扣系统库存
- 页面结果:最终确认成功,列表显示“已完成”和“已配 2 / 共 2 晚”,但全屏遮罩残留
- 运行观察:成功后观察 3 秒,无 console error 或 failed request
- 截图证据:
D:/work2/HL-v3/.tmp/house-final-200-browser-flow-final-transient-empty.png
按 Escape 清除遮罩后重新打开该订单,详情正常显示 2/2、两晚酒店与库存口径,说明后端状态和配房数据均已正确落库,问题集中在前端弹层/抽屉的关闭清理。
前端处理要求
- 最终确认成功后,关闭确认对话框和订单详情抽屉时同步卸载对应 teleport/modal 容器,不能遗留可见或可交互的
.n-modal-mask。 - 无论最终确认请求成功、业务失败、网络异常或用户取消,都必须在结束路径中恢复页面滚动和 pointer events。
- 不得依赖用户按
Escape、刷新页面或重新进入菜单恢复操作。 - 避免用全局删除所有遮罩的方式修复;只清理本次最终确认流程拥有的弹层状态,不能影响站内信、全局搜索等其他弹层。
- 最终确认成功后若自动关闭详情,列表状态与统计应正常刷新;若保留详情,则应直接展示正确的完成态
2/2数据。
验收
| 场景 | 预期 |
|---|---|
| 正常完成最终确认 | 成功提示后无残留遮罩,列表可立即点击、筛选和滚动 |
| 最终确认业务失败 | 错误提示可关闭,原详情仍可操作,无遮罩残留 |
| 最终确认网络失败 | loading 结束,页面恢复交互,可重试 |
| 用户取消最终确认 | 对话框关闭,详情与列表交互正常 |
| 成功后重开订单 | 显示“已完成”、正确配房进度及全部配房行 |
接口边界
- 最终确认沿用现有房务接口,无需新增字段或修改响应结构。
- 本次浏览器复测确认成功后的列表和详情数据正确,不创建
wx/HL后端 Issue。