fix: keep all sidebar labels visible in compact mode

This commit is contained in:
GouJ
2026-09-14 13:47:52 +08:00
parent 5a44730d95
commit c4046434d7
+10 -10
View File
@@ -34,8 +34,8 @@ import { projectAccessKey, type ProjectAccess } from './features/projects/access
/** 窄屏将侧栏改为全屏覆盖层,关闭后不再占用正文宽度。 */
const NARROW_NAV = '(max-width: 800px)'
/** 折叠侧栏宽度,与菜单 collapsed-width 对齐。 */
const SIDER_COLLAPSED_WIDTH = 64
/** 紧凑侧栏为图标与常驻菜单名称保留空间。 */
const SIDER_COLLAPSED_WIDTH = 144
/** 桌面端展开侧栏宽度。 */
const SIDER_EXPANDED_WIDTH = 208
/** 菜单图标尺寸,折叠/展开共用,避免切换时缩放。 */
@@ -47,7 +47,7 @@ const narrowMedia = window.matchMedia(NARROW_NAV)
const narrow = ref(narrowMedia.matches)
const collapsed = ref(narrow.value)
const settingsOpen = ref(false)
/** 桌面折叠只裁切文字;移动端侧栏打开时始终显示完整菜单。 */
/** 桌面紧凑态保留所有菜单名称;移动端打开时仍展示完整菜单。 */
const menuCollapsed = false
/** 菜单内部会缓存图标 VNode,切换显示模式时重建一次以同步 Popover 状态。 */
const menuRenderKey = computed(
@@ -58,7 +58,7 @@ const siderCollapsedWidth = SIDER_COLLAPSED_WIDTH
/** 侧栏展开宽度仅用于桌面布局。 */
const siderExpandedWidth = SIDER_EXPANDED_WIDTH
/** 折叠与展开共用的图标左偏移,避免切换时图标跳动。 */
const navIconIndent = computed(() => (narrow.value ? 20 : siderCollapsedWidth / 2 - NAV_ICON_SIZE / 2))
const navIconIndent = computed(() => (narrow.value ? 20 : 22))
/** 视口跨过断点时:进入窄屏收回侧栏。 */
function syncNarrow(event: MediaQueryListEvent) {
@@ -144,8 +144,8 @@ function createMenuIcon(icon: typeof FolderOpen, label: string, popoverEnabled:
/** 菜单链接使用 RouterLink,保留新标签打开和浏览器导航行为。 */
const menuOptions = computed<MenuOption[]>(() => {
// 仅在 PC 折叠态创建 Popover,避免展开态和移动端出现重复提示。
const popoverEnabled = !narrow.value && collapsed.value
// 菜单名称在紧凑态也常驻显示,不再重复弹出逐项提示。
const popoverEnabled = false
return [
{
key: '/projects',
@@ -251,7 +251,7 @@ const menuOptions = computed<MenuOption[]>(() => {
to="body"
class="admin-nav-popover"
:z-index="3000"
:disabled="narrow || !collapsed"
:disabled="true"
>
<template #trigger>
<NButton
@@ -319,7 +319,7 @@ const menuOptions = computed<MenuOption[]>(() => {
@apply top-2.5 z-[3000];
}
.admin-layout {
--admin-sider-collapsed: 64px;
--admin-sider-collapsed: 144px;
--admin-sider-expanded: 208px;
@apply flex h-dvh overflow-hidden;
}
@@ -351,7 +351,7 @@ const menuOptions = computed<MenuOption[]>(() => {
transition: opacity 0.2s ease;
}
.admin-sider.is-collapsed .n-menu-item-content-header {
opacity: 0;
opacity: 1;
}
/* 折叠态将图标抬到透明路由链接上方,使点击与悬停都命中图标触发区。 */
.admin-sider.is-collapsed .n-menu-item-content__icon {
@@ -373,7 +373,7 @@ const menuOptions = computed<MenuOption[]>(() => {
transition: opacity 0.2s ease;
}
.admin-sider.is-collapsed .admin-settings-label {
opacity: 0;
opacity: 1;
}
.admin-sider .n-menu .n-menu-item-content::before {
@apply left-0 right-0 rounded-none;