fix: 将侧栏提示层移到导航外侧
将桌面折叠侧栏的 NPopover 显式挂载到 body,并把提示框完整偏移到 64px 导航边界之外。
This commit is contained in:
+19
-2
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user