diff --git a/src/App.vue b/src/App.vue index 6c5bbd6..1cc0a8f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -349,7 +349,8 @@ const menuOptions = computed(() => { display: inline-block; transition: transform 0.2s ease, - color 0.18s ease; + color 0.18s ease, + opacity 0.18s ease; } .admin-brand { @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(() => { .admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label { 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 { right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));