fix: emphasize active sidebar labels and dim other labels on hover

This commit is contained in:
GouJ
2026-09-14 14:44:47 +08:00
parent 8d4e9d2af7
commit b7bc199e10
+23 -1
View File
@@ -349,7 +349,8 @@ const menuOptions = computed<MenuOption[]>(() => {
display: inline-block; display: inline-block;
transition: transition:
transform 0.2s ease, transform 0.2s ease,
color 0.18s ease; color 0.18s ease,
opacity 0.18s ease;
} }
.admin-brand { .admin-brand {
@apply flex shrink-0 items-center gap-3 h-[74px] overflow-hidden py-0 px-5 text-ink whitespace-nowrap; @apply flex shrink-0 items-center gap-3 h-[74px] overflow-hidden py-0 px-5 text-ink whitespace-nowrap;
@@ -457,6 +458,27 @@ const menuOptions = computed<MenuOption[]>(() => {
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label { .admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
color: var(--admin-nav-hover-color); color: var(--admin-nav-hover-color);
} }
/* 选中或悬停时强化菜单名称,禁用项不响应悬停。 */
.admin-sider.is-collapsed .n-menu-item-content--selected .admin-menu-label,
.admin-sider.is-collapsed
.n-menu-item-content:not(.n-menu-item-content--disabled):is(:hover, :has(:focus-visible))
.admin-menu-label,
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
font-weight: 600;
}
/* 悬停未选中入口时,整列其余名称淡化;移开后恢复原有颜色与选中态。 */
.admin-sider.is-collapsed:has(
.n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):hover
)
.n-menu-item-content:not(:hover)
.admin-menu-label,
.admin-sider.is-collapsed:has(
.n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):hover
)
.admin-settings-label,
.admin-sider.is-collapsed:has(.admin-settings-button:hover) .admin-menu-label {
opacity: 0.55;
}
/* 选中、悬停背景仅落在图标轨道内。 */ /* 选中、悬停背景仅落在图标轨道内。 */
.admin-sider.is-collapsed .n-menu .n-menu-item-content::before { .admin-sider.is-collapsed .n-menu .n-menu-item-content::before {
right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed)); right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));