fix(admin): 后台自定义浮层(modal-mask 3000/导出等待3100)遮挡 Element 消息——ElMessage 全局抬升 z-index 4000、确认消息盒(ElOverlay.is-message-box)抬升 4100,修复去重台账导入/编辑未选分组警告被浮层挡住看不见;新增层级回归测试

This commit is contained in:
2026-09-07 21:35:48 +08:00
parent c086d402a7
commit 50d0d110a2
2 changed files with 40 additions and 0 deletions
+6
View File
@@ -183,6 +183,12 @@ button, input, textarea, select { font: inherit; }
.el-tag { border-radius: 6px; }
.el-button { border-radius: 9px; }
.el-message-box { border-radius: 14px; }
/* 消息提示层级:Element 弹层 z-index 自 2000 递增,低于页面自定义 modal-mask(3000/3100)
遮罩弹窗内触发的 ElMessage 警告(如去重台账导入/编辑未选分组)会被浮层挡住看不见,
统一把消息提示抬到 4000(高于全部自定义浮层),!important 覆盖实例内联层级。
消息盒确认弹窗同类隐患一并抬到 4100z-index 落在 .el-overlay.is-message-box 内联样式)。 */
.el-message { z-index: 4000 !important; }
.el-overlay.is-message-box { z-index: 4100 !important; }
/* 分组筛选下拉(可模糊搜索):对齐旧版控件观感(42px/9px/浅底/focus ring)。 */
.el-select.admin-filter {
@@ -0,0 +1,34 @@
import test from 'node:test'
import assert from 'node:assert/strict'
import { readSource } from './helpers.ts'
// 维护修复:页面自定义 modal-mask(z-index:3000) / 导出等待遮罩(3100) 高于 Element 默认
// 弹层计数(自 2000 递增),遮罩弹窗内触发的 ElMessage 警告会被浮层挡住看不见——
// 已在整站层面把消息提示抬到 4000、消息盒确认弹窗抬到 4100,统一高于全部自定义浮层。
test('el_message_above_custom_overlays', () => {
const css = readSource('src/styles/main.css')
assert.match(
css,
/\.el-message\s*\{[^}]*z-index:\s*4000\s*!important/,
'消息提示需抬升到 4000 且 !important(覆盖 Element 实例内联层级)',
)
assert.match(
css,
/\.el-overlay\.is-message-box\s*\{[^}]*z-index:\s*4100\s*!important/,
'消息盒确认弹窗需抬升到 4100z-index 落在 .el-overlay.is-message-box 内联样式)',
)
})
test('dedupe_overlay_and_warning_kept', () => {
const page = readSource('src/pages/asin/DedupeRegistryPage.vue')
assert.match(page, /\.modal-mask\s*\{[^}]*z-index:\s*3000/, '页内遮罩仍为 3000,消息 4000 需保持在其上')
assert.match(page, /\.dedupe-export-wait-mask\s*\{[^}]*z-index:\s*3100/, '导出等待遮罩 3100 同样低于消息 4000')
assert.match(page, /请选择数据权限分组|请选择分组/, '导入/编辑未选分组需保留警告岔口')
})
test('records_preview_overlay_below_message', () => {
const page = readSource('src/pages/records/RecordsHistoryPage.vue')
assert.match(page, /\.modal-mask\s*\{[^}]*z-index:\s*3000/, '记录预览遮罩 3000 同样低于消息 4000')
})