dy-dashboard/vault/知识库/工作指南/训练记录/2026-07-08-进度图标弹窗改悬浮提示&弹窗遮罩规则统一.md
2026-10-28 11:14:17 +08:00

34 lines
1.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 进度图标弹窗改悬浮提示 & 弹窗遮罩规则统一
## 涉及修改
- `static/js/app.js`:`showCenteredAlert` 和 `showCenteredConfirm` 函数
- `static/js/app.js`:包材信息表进度图标内联 onclick
- `static/css/style.css`:新增 `.progress-tip` 悬浮提示样式
---
### 1. 进度图标弹窗改悬浮提示
**旭东 → OpenClaw:**
> 有异常,我点击进度图标后,页面会一直变黑,点一次变黑一次
**OpenClaw 响应:**
分析发现包材信息表中进度图标(📊)的 onclick 直接把进度文本嵌入 JS 字符串,如果进度内容含特殊字符(`"`、`\`、换行等)会破坏 HTML/JS 语法,导致 `showCenteredAlert` 弹窗只显示黑色遮罩不显示白色内容框。点击遮罩层后弹窗关闭,再点图标又出黑框,形成「点一次变黑一次」的循环。
修复方案:使用 `data-progress` 属性 + `escHtml()` 安全传递文本,同时禁用遮罩层点击关闭弹窗(只能通过按钮关闭)。
**旭东 → OpenClaw:**
> 这个进度可以不用弹窗显示,悬浮显示是不是更好一些
**OpenClaw 响应:**
改为 CSS 悬浮提示方案——去掉 onclick 弹窗,改用 `::after` 伪元素 + `attr(data-progress)` 实现悬停显示,支持多行文本自动换行,样式带阴影和圆角。
### 2. showCenteredAlert/showCenteredConfirm 遮罩规则统一
**旭东 → OpenClaw:**
(包含在上报异常中)
**OpenClaw 响应:**
两个弹窗函数的遮罩层点击 handler 从 `modal.remove()` 改为空操作 `{}`,统一遵守弹窗只能通过按钮关闭的规则。