diff --git a/src/App.vue b/src/App.vue index 70da996..6c5bbd6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -384,11 +384,15 @@ const menuOptions = computed(() => { @media (min-width: 801px) { .admin-sider.is-collapsed { --admin-nav-reveal-width: 160px; + --admin-nav-hover-color: #111111; position: relative; z-index: 30; overflow: visible; } - /* 低透明度磨砂层隔开正文,右侧渐隐避免出现明显的面板边界。 */ + :root[data-theme='dark'] .admin-sider.is-collapsed { + --admin-nav-hover-color: #ffffff; + } + /* 保留文字下方的磨砂效果,移除右侧渐隐遮罩产生的阴影边缘。 */ .admin-sider.is-collapsed::before { content: ''; position: absolute; @@ -397,8 +401,6 @@ const menuOptions = computed(() => { background: color-mix(in srgb, var(--app-surface) 55%, transparent); -webkit-backdrop-filter: blur(14px) saturate(110%); backdrop-filter: blur(14px) saturate(110%); - -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); - mask-image: linear-gradient(to right, #000 85%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; @@ -428,10 +430,6 @@ const menuOptions = computed(() => { } .admin-sider.is-collapsed .admin-menu-label, .admin-sider.is-collapsed .admin-settings-label { - /* 柔和字形阴影辅助磨砂层,保持浅色和暗色主题下的可读性。 */ - text-shadow: - 0 0 3px var(--app-surface), - 0 1px 6px var(--app-surface); transform: translateX(-6px); } .admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .n-menu-item-content-header, @@ -442,16 +440,22 @@ const menuOptions = computed(() => { .admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-settings-label { transform: translateX(0); } - /* 以整行作为悬停目标,移入图标或名称都同步高亮,禁用项保持原色。 */ + /* 未选中项悬停时仅提高中性色对比,选中项保留主题色,禁用项保持原色。 */ .admin-sider.is-collapsed - .n-menu-item-content:not(.n-menu-item-content--disabled):is(:hover, :has(:focus-visible)) + .n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):is( + :hover, + :has(:focus-visible) + ) .n-menu-item-content__icon, .admin-sider.is-collapsed - .n-menu-item-content:not(.n-menu-item-content--disabled):is(:hover, :has(:focus-visible)) + .n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):is( + :hover, + :has(:focus-visible) + ) .admin-menu-label, .admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .n-button__icon, .admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label { - color: var(--app-accent-text); + color: var(--admin-nav-hover-color); } /* 选中、悬停背景仅落在图标轨道内。 */ .admin-sider.is-collapsed .n-menu .n-menu-item-content::before {