From c4046434d7dfd93ba9534aad06c32786d79bcdd8 Mon Sep 17 00:00:00 2001
From: GouJ <hefangjay@qq.com>
Date: Mon, 14 Sep 2026 13:47:52 +0800
Subject: [PATCH] fix: keep all sidebar labels visible in compact mode

---
 src/App.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b59722f..3e686f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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;