short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: reveal collapsed desktop sidebar labels together on hover

Browse Source
This commit is contained in:
GouJ
2026-09-14 14:01:09 +08:00
parent 27f9d2ac47
commit 9a79bbccef
1 changed files with 117 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+106 -71
View File
@@ -8,7 +8,6 @@ import {
NLayout,
NLayoutHeader,
NMenu,
NPopover,
NScrollbar,
zhCN,
dateZhCN,
@@ -34,8 +33,8 @@ import { projectAccessKey, type ProjectAccess } from './features/projects/access
/** 窄屏将侧栏改为全屏覆盖层，关闭后不再占用正文宽度。 */
const NARROW_NAV = '(max-width: 800px)'
/** 紧凑侧栏为图标与常驻菜单名称保留空间。 */
const SIDER_COLLAPSED_WIDTH = 144
/** 折叠侧栏只占图标宽度，悬停文字覆盖正文而不挤动布局。 */
const SIDER_COLLAPSED_WIDTH = 64
/** 桌面端展开侧栏宽度。 */
const SIDER_EXPANDED_WIDTH = 208
/** 菜单图标尺寸，折叠/展开共用，避免切换时缩放。 */
@@ -47,12 +46,8 @@ const narrowMedia = window.matchMedia(NARROW_NAV)
const narrow = ref(narrowMedia.matches)
const collapsed = ref(narrow.value)
const settingsOpen = ref(false)
/** 桌面紧凑态保留所有菜单名称；移动端打开时仍展示完整菜单。 */
/** 始终保留菜单文字节点，用 CSS 同步控制整列文字的进出动画。 */
const menuCollapsed = false
/** 菜单内部会缓存图标 VNode，切换显示模式时重建一次以同步 Popover 状态。 */
const menuRenderKey = computed(
() => `${narrow.value ? 'mobile' : 'desktop'}-${collapsed.value ? 'collapsed' : 'expanded'}`
)
/** Naive Menu 的桌面折叠宽度；移动端覆盖层不参与正文宽度计算。 */
const siderCollapsedWidth = SIDER_COLLAPSED_WIDTH
/** 侧栏展开宽度仅用于桌面布局。 */
@@ -116,41 +111,18 @@ const workflowItems = [
['production', '镜头生产', Clapperboard]
] as const
/** PC 折叠侧栏只显示图标时渲染 Popover；可用图标同时保留路由跳转能力。 */
function createMenuIcon(icon: typeof FolderOpen, label: string, popoverEnabled: boolean, target?: string) {
return () => {
const trigger = () =>
popoverEnabled && target
? h(RouterLink, { to: target, class: 'admin-menu-popover-trigger' }, () => h(icon, { size: 18 }))
: h('span', { class: 'admin-menu-popover-trigger' }, [h(icon, { size: 18 })])
if (!popoverEnabled) return trigger()
return h(
NPopover,
{
trigger: 'hover',
placement: 'right',
to: 'body',
class: 'admin-nav-popover',
zIndex: 3000
},
{
trigger,
default: () => label
}
)
}
/** 图标始终留在原位，名称由菜单本身显示，不再创建逐项浮层。 */
function createMenuIcon(icon: typeof FolderOpen) {
return () => h('span', { class: 'admin-menu-icon' }, [h(icon, { size: NAV_ICON_SIZE })])
}
/** 菜单链接使用 RouterLink，保留新标签打开和浏览器导航行为。 */
const menuOptions = computed<MenuOption[]>(() => {
// 菜单名称在紧凑态也常驻显示，不再重复弹出逐项提示。
const popoverEnabled = false
return [
{
key: '/projects',
label: () => h(RouterLink, { to: '/projects' }, () => '我的剧本'),
icon: createMenuIcon(FolderOpen, '我的剧本', popoverEnabled, '/projects')
label: () => h(RouterLink, { to: '/projects' }, () => h('span', { class: 'admin-menu-label' }, '我的剧本')),
icon: createMenuIcon(FolderOpen)
},
...(projectId.value
? [
@@ -163,14 +135,15 @@ const menuOptions = computed<MenuOption[]>(() => {
disabled,
label: () =>
disabled
? h('span', { title: '剧本完成后可用', 'aria-disabled': 'true' }, label)
: h(RouterLink, { to: target }, () => label),
icon: createMenuIcon(
icon,
disabled ? `${label}（剧本完成后可用）` : label,
popoverEnabled,
disabled ? undefined : target
? h(
'span',
{ class: 'admin-menu-label', title: '剧本完成后可用', 'aria-disabled': 'true' },
label
)
: h(RouterLink, { to: target }, () =>
h('span', { class: 'admin-menu-label' }, label)
),
icon: createMenuIcon(icon)
}
})
]
@@ -232,7 +205,6 @@ const menuOptions = computed<MenuOption[]>(() => {
</header>
<NScrollbar class="admin-nav-scroll">
<NMenu
:key="menuRenderKey"
:value="route.path"
:options="menuOptions"
:collapsed="menuCollapsed"
@@ -243,17 +215,8 @@ const menuOptions = computed<MenuOption[]>(() => {
:root-indent="navIconIndent"
/>
</NScrollbar>
<!-- 以下是侧栏底部后端连接：折叠裁切文字，图标位置保持不变 -->
<!-- 底部入口与菜单名称一起显示，图标始终可点击。 -->
<footer class="admin-sider-footer">
<NPopover
trigger="hover"
placement="right"
to="body"
class="admin-nav-popover"
:z-index="3000"
:disabled="true"
>
<template #trigger>
<NButton
quaternary
block
@@ -265,9 +228,6 @@ const menuOptions = computed<MenuOption[]>(() => {
<template #icon><Settings2 :size="18" /></template>
<span class="admin-settings-label">后端连接</span>
</NButton>
</template>
后端连接
</NPopover>
</footer>
</aside>
<!-- 以下是顶栏与主内容 -->
@@ -319,7 +279,7 @@ const menuOptions = computed<MenuOption[]>(() => {
@apply top-2.5 z-[3000];
}
.admin-layout {
--admin-sider-collapsed: 144px;
--admin-sider-collapsed: 64px;
--admin-sider-expanded: 208px;
@apply flex h-dvh overflow-hidden;
}
@@ -340,7 +300,7 @@ const menuOptions = computed<MenuOption[]>(() => {
@apply hidden shrink-0;
}
.admin-sider.is-collapsed {
@apply w-16;
width: var(--admin-sider-collapsed);
}
.admin-nav-scroll.n-scrollbar {
@apply flex-1 min-h-0;
@@ -348,14 +308,16 @@ const menuOptions = computed<MenuOption[]>(() => {
}
.admin-sider .n-menu-item-content-header {
opacity: 1;
transition: opacity 0.2s ease;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.admin-sider.is-collapsed .n-menu-item-content-header {
opacity: 1;
opacity: 0;
}
/* 折叠态将图标抬到透明路由链接上方，使点击与悬停都命中图标触发区。 */
/* 点击图标时命中菜单链接覆盖层，隐藏名称也不会阻断跳转。 */
.admin-sider.is-collapsed .n-menu-item-content__icon {
@apply relative z-[2];
pointer-events: none;
}
.admin-sider-footer {
@apply w-full shrink-0 overflow-hidden;
@@ -370,20 +332,22 @@ const menuOptions = computed<MenuOption[]>(() => {
.admin-settings-label {
@apply whitespace-nowrap;
opacity: 1;
transition: opacity 0.2s ease;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.admin-sider.is-collapsed .admin-settings-label {
opacity: 1;
opacity: 0;
}
.admin-sider .n-menu .n-menu-item-content::before {
@apply left-0 right-0 rounded-none;
}
.admin-menu-popover-trigger {
@apply relative z-[1] inline-flex items-center justify-center text-inherit;
.admin-menu-icon {
@apply inline-flex items-center justify-center text-inherit;
}
/* 折叠侧栏提示完整落在 64px 边界之外，并覆盖业务内容层。 */
.n-popover.admin-nav-popover {
margin-inline-start: 24px !important;
.admin-menu-label {
display: inline-block;
transition: transform 0.2s ease;
}
.admin-brand {
@apply flex shrink-0 items-center gap-3 h-[74px] overflow-hidden py-0 px-5 text-ink whitespace-nowrap;
@@ -395,7 +359,9 @@ const menuOptions = computed<MenuOption[]>(() => {
.admin-brand span {
@apply text-[15px] font-semibold;
opacity: 1;
transition: opacity 0.2s ease;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.admin-sider.is-collapsed .admin-brand span {
opacity: 0;
@@ -412,6 +378,70 @@ const menuOptions = computed<MenuOption[]>(() => {
.admin-content {
@apply flex-1 min-h-0 min-w-0 overflow-hidden outline-none;
}
/* 桌面折叠态：64px 图标轨道固定，整列名称在右侧浮现。 */
@media (min-width: 801px) {
.admin-sider.is-collapsed {
--admin-nav-reveal-width: 160px;
position: relative;
z-index: 30;
overflow: visible;
}
/* 浮层使用当前主题底色，保证文字不会与正文混在一起。 */
.admin-sider.is-collapsed::before {
content: '';
position: absolute;
inset: 0 auto 0 var(--admin-sider-collapsed);
width: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));
background: var(--app-surface);
border-right: 1px solid var(--app-border);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed .admin-sider-footer {
position: relative;
width: var(--admin-nav-reveal-width);
min-width: var(--admin-nav-reveal-width);
/* 隐藏的名称不能阻挡正文点击，淡出结束后再收回命中区域。 */
clip-path: inset(0 calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed)) 0 0);
transition: clip-path 0s 0.2s;
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible))::before {
opacity: 1;
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-sider-footer {
clip-path: inset(0);
transition-delay: 0s;
}
.admin-sider.is-collapsed .n-menu-item-content__icon {
margin-right: 34px !important;
}
.admin-sider.is-collapsed .admin-settings-label {
margin-left: 26px;
}
.admin-sider.is-collapsed .admin-menu-label,
.admin-sider.is-collapsed .admin-settings-label {
transform: translateX(-6px);
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .n-menu-item-content-header,
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-settings-label {
opacity: 1;
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-menu-label,
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-settings-label {
transform: translateX(0);
}
/* 选中、悬停背景仅落在图标轨道内。 */
.admin-sider.is-collapsed .n-menu .n-menu-item-content::before {
right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));
}
.admin-sider.is-collapsed .admin-settings-button .n-button__state-border,
.admin-sider.is-collapsed .admin-settings-button .n-button__border {
right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));
}
}
@media (max-width: 800px) {
.admin-sider {
@apply fixed inset-0 z-50 overflow-hidden;
@@ -457,7 +487,12 @@ const menuOptions = computed<MenuOption[]>(() => {
}
@media (prefers-reduced-motion: reduce) {
.admin-sider,
.admin-sider.is-collapsed,
.admin-sider.is-collapsed::before,
.admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed .admin-sider-footer,
.admin-sider .n-menu-item-content-header,
.admin-menu-label,
.admin-brand span,
.admin-settings-label {
transition: none;