fix: 将侧栏提示层移到导航外侧

将桌面折叠侧栏的 NPopover 显式挂载到 body,并把提示框完整偏移到 64px 导航边界之外。
This commit is contained in:
GouJ
2026-09-09 10:49:10 +08:00
committed by GitHub
parent c2639ca7af
commit 826e3bfa0f
3 changed files with 58 additions and 28 deletions
+19 -2
View File
@@ -127,7 +127,13 @@ function createMenuIcon(icon: typeof FolderOpen, label: string, popoverEnabled:
return h(
NPopover,
{ trigger: 'hover', placement: 'right' },
{
trigger: 'hover',
placement: 'right',
to: 'body',
class: 'admin-nav-popover',
zIndex: 3000
},
{
trigger,
default: () => label
@@ -239,7 +245,14 @@ const menuOptions = computed<MenuOption[]>(() => {
</NScrollbar>
<!-- 以下是侧栏底部后端连接折叠裁切文字图标位置保持不变 -->
<footer class="admin-sider-footer">
<NPopover trigger="hover" placement="right" :disabled="narrow || !collapsed">
<NPopover
trigger="hover"
placement="right"
to="body"
class="admin-nav-popover"
:z-index="3000"
:disabled="narrow || !collapsed"
>
<template #trigger>
<NButton
quaternary
@@ -368,6 +381,10 @@ const menuOptions = computed<MenuOption[]>(() => {
.admin-menu-popover-trigger {
@apply relative z-[1] inline-flex items-center justify-center text-inherit;
}
/* 折叠侧栏提示完整落在 64px 边界之外,并覆盖业务内容层。 */
.n-popover.admin-nav-popover {
margin-inline-start: 24px !important;
}
.admin-brand {
@apply flex shrink-0 items-center gap-3 h-[74px] overflow-hidden py-0 px-5 text-ink whitespace-nowrap;
min-width: var(--admin-sider-expanded);