fix(F006-W5.x.x+1): 补 EP popper 系列变量 + :deep() 强制修暗主题下面包屑/主题弹窗文字糊

W5.x.x 验收发现 2 处仍糊:
  - 红框 1: 顶栏面包屑 工作台 > 数据看板(暗主题)
  - 红框 2: 主题切换弹窗 切换主题/科技蓝/.../自动持久化(暗主题)

  根因:
  1. W5.x.x 覆盖 EP 派生色时漏了 --el-popper-bg-color(EP 2.x 真名是
     popper,不是 popover;el-popover / el-tooltip / el-dropdown /
     el-select-dropdown 全部走 popper 容器)
  2. el-breadcrumb 内部选择器优先级高,scoped :root 重定向的
     --el-text-color-* 被它打回
  3. ThemePicker 弹窗被 teleport 出去,scoped 选择器穿透不了
     popper 容器

  修法:
  1. tokens.scss 增 6 个 --el-popper-* 系列变量
  2. AppLayout.vue 末尾增 :deep(.el-breadcrumb__inner) +
     :deep(.el-breadcrumb__separator) + !important
  3. ThemePicker.vue 末尾增 :deep(.el-popper.is-light) + 内部
     el-popper__arrow / el-popper__title + !important

  验证: 切到 暗夜黑 主题,4 项验收清单全过;切回 科技蓝/中国红/
  深空紫 无回归
This commit is contained in:
Sisyphus 2026-07-03 21:04:29 +08:00
parent 93ed6331e8
commit 0f8a08888f
3 changed files with 42 additions and 0 deletions

View File

@ -604,6 +604,20 @@ onMounted(loadBadges)
&:hover { background: var(--bg-soft); color: var(--brand); } &:hover { background: var(--bg-soft); color: var(--brand); }
} }
.rr-topbar-breadcrumb { font-size: 13px; } .rr-topbar-breadcrumb { font-size: 13px; }
/* ===== W5.x.x+1: 暗主题下 el-breadcrumb 文字糊(红框 1)强制覆盖 =====
EP 内部 el-breadcrumb__inner 用 var(--el-text-color-regular) 但优先级被
scoped 选择器打回 → 用 :deep() + !important 强制跟主题色走 */
.rr-topbar-breadcrumb :deep(.el-breadcrumb__inner) {
color: var(--ink) !important;
font-weight: 400;
}
.rr-topbar-breadcrumb :deep(.el-breadcrumb__inner.is-link:hover) {
color: var(--brand) !important;
}
.rr-topbar-breadcrumb :deep(.el-breadcrumb__separator) {
color: var(--ink-3) !important;
}
.rr-topbar-right { display: flex; align-items: center; gap: 12px; } .rr-topbar-right { display: flex; align-items: center; gap: 12px; }
.rr-topbar-user { .rr-topbar-user {
display: flex; display: flex;

View File

@ -138,4 +138,22 @@ function pick(value: string) {
text-align: center; text-align: center;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
/* ===== W5.x.x+1: 暗主题下主题弹窗文字糊(红框 2)强制覆盖 =====
EP 2.x 的 el-popover 实际读 --el-popper-bg-color(popper ≠ popover),
tokens.scss 已加 6 个 popper 变量,这里再补 :deep() 保险:
scoped 选择器对 teleport 出去的内容穿透,EP 弹窗会被 popper
容器包裹,所以 :deep() 也得穿透 */
:deep(.el-popper.is-light) {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--ink) !important;
}
:deep(.el-popper.is-light .el-popper__arrow::before) {
background: var(--surface) !important;
border-color: var(--border) !important;
}
:deep(.el-popper.is-light .el-popper__title) {
color: var(--ink) !important;
}
</style> </style>

View File

@ -69,6 +69,16 @@
--el-bg-color-overlay: var(--surface); --el-bg-color-overlay: var(--surface);
--el-popover-bg-color: var(--surface); --el-popover-bg-color: var(--surface);
--el-popover-border-color: var(--border); --el-popover-border-color: var(--border);
// ===== Element Plus Popper 容器(W5.x.x+1: 补 W5.x.x 漏的 popper bg) =====
// EP 2.x 实际读的是 --el-popper-bg-color(popper ≠ popover),W5.x.x 漏覆盖
// 导致 el-popover / el-tooltip / el-dropdown / el-select-dropdown 等
// 在暗主题下用 EP 默认亮色背景(色差反了)
--el-popper-bg-color: var(--surface);
--el-popper-border-color: var(--border);
--el-popper-title-text-color: var(--ink);
--el-popper-arrow-bg-color: var(--surface);
--el-popper-plain-bg-color: var(--surface);
--el-popper-padding: 12px;
--el-tooltip-bg-color: var(--ink); --el-tooltip-bg-color: var(--ink);
--el-dropdown-bg-color: var(--surface); --el-dropdown-bg-color: var(--surface);
--el-dropdown-border-color: var(--border); --el-dropdown-border-color: var(--border);