From 4093c75241fdba2ae553ce2bc898225c5c4f2a0a Mon Sep 17 00:00:00 2001
From: Yuhang Wu <YuhangWu@orbitmes.com>
Date: Mon, 27 Jul 2026 18:00:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(layout-sider):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=B8=83=E5=B1=80=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=B9=B6=E8=B0=83=E6=95=B4=E6=8A=98=E5=8F=A0=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  将侧边栏折叠模式从transform改为width
2.  简化DOM层级，移除多余的sider-wrapper容器
3.  调整用户区定位使其固定在侧边栏底部
4.  优化图标渲染参数和菜单样式封装
---
 src/layout/components/LayoutSider.vue | 121 +++++++++++---------------
 1 file changed, 50 insertions(+), 71 deletions(-)

diff --git a/src/layout/components/LayoutSider.vue b/src/layout/components/LayoutSider.vue
index 69f737f..16be42e 100644
--- a/src/layout/components/LayoutSider.vue
+++ b/src/layout/components/LayoutSider.vue
@@ -1,64 +1,60 @@
 <template>
   <n-layout-sider
     bordered
-    collapse-mode="transform"
+    collapse-mode="width"
     :collapsed-width="64"
     :width="240"
     :collapsed="layoutStore.siderCollapsed"
     :show-trigger="false"
     class="layout-sider"
   >
-    <div class="sider-wrapper">
-      <!-- Logo -->
-      <div class="sider-logo" @click="router.push('/dashboard')">
-        <div class="logo-icon">
-          <svg viewBox="0 0 36 36" fill="none">
-            <rect width="36" height="36" rx="10" fill="url(#logo-grad)" />
-            <path d="M10 24V12l8 7 8-7v12" stroke="#fff" stroke-width="2.5"
-              stroke-linecap="round" stroke-linejoin="round" />
-            <defs>
-              <linearGradient id="logo-grad" x1="0" y1="0" x2="36" y2="36">
-                <stop stop-color="#0891B2" /><stop offset="1" stop-color="#06B6D4" />
-              </linearGradient>
-            </defs>
-          </svg>
-        </div>
-        <transition name="fade-text">
-          <span v-if="!layoutStore.siderCollapsed" class="logo-text">DevBox</span>
-        </transition>
+    <!-- Logo -->
+    <div class="sider-logo" @click="router.push('/dashboard')">
+      <div class="logo-icon">
+        <svg viewBox="0 0 36 36" fill="none">
+          <rect width="36" height="36" rx="10" fill="url(#logo-grad)" />
+          <path d="M10 24V12l8 7 8-7v12" stroke="#fff" stroke-width="2.5"
+            stroke-linecap="round" stroke-linejoin="round" />
+          <defs>
+            <linearGradient id="logo-grad" x1="0" y1="0" x2="36" y2="36">
+              <stop stop-color="#0891B2" /><stop offset="1" stop-color="#06B6D4" />
+            </linearGradient>
+          </defs>
+        </svg>
       </div>
-
-      <!-- 菜单 -->
-      <div class="sider-menu">
-        <n-menu
-          :value="activeMenuKey"
-          :collapsed="layoutStore.siderCollapsed"
-          :collapsed-width="64"
-          :collapsed-icon-size="22"
-          :options="menuOptions"
-          :default-expanded-keys="['system']"
-          @update:value="onMenuSelect"
-        />
-      </div>
-
-      <!-- 用户区 -->
       <transition name="fade-text">
-        <div v-if="!layoutStore.siderCollapsed" class="sider-user">
-          <n-avatar round size="small" :style="{ backgroundColor: '#0891B2' }">
-            {{ userInitial }}
-          </n-avatar>
-          <div class="user-meta">
-            <span class="user-name">{{ username }}</span>
-            <span class="user-role">管理员</span>
-          </div>
-          <n-dropdown trigger="click" :options="userDropdownOptions" @select="onUserAction">
-            <n-button text size="tiny" class="user-more-btn">
-              <template #icon><n-icon :component="ChevronForward" /></template>
-            </n-button>
-          </n-dropdown>
-        </div>
+        <span v-if="!layoutStore.siderCollapsed" class="logo-text">DevBox</span>
       </transition>
     </div>
+
+    <!-- 菜单 -->
+    <n-menu
+      :value="activeMenuKey"
+      :collapsed="layoutStore.siderCollapsed"
+      :collapsed-width="64"
+      :collapsed-icon-size="22"
+      :options="menuOptions"
+      :default-expanded-keys="['system']"
+      @update:value="onMenuSelect"
+    />
+
+    <!-- 用户区 -->
+    <transition name="fade-text">
+      <div v-if="!layoutStore.siderCollapsed" class="sider-user">
+        <n-avatar round size="small" :style="{ backgroundColor: '#0891B2' }">
+          {{ userInitial }}
+        </n-avatar>
+        <div class="user-meta">
+          <span class="user-name">{{ username }}</span>
+          <span class="user-role">管理员</span>
+        </div>
+        <n-dropdown trigger="click" :options="userDropdownOptions" @select="onUserAction">
+          <n-button text size="tiny" class="user-more-btn">
+            <template #icon><n-icon :component="ChevronForward" /></template>
+          </n-button>
+        </n-dropdown>
+      </div>
+    </transition>
   </n-layout-sider>
 </template>
 
@@ -93,7 +89,7 @@ const userInitial = computed(() => username.charAt(0).toUpperCase())
 
 // ─── Icon helper ───
 function renderIcon(icon: Component) {
-  return () => h(NIcon, { size: 18 }, { default: () => h(icon) })
+  return () => h(NIcon, null, { default: () => h(icon) })
 }
 
 function renderDropdownIcon(icon: Component) {
@@ -116,6 +112,7 @@ const menuOptions: MenuOption[] = [
   { key: 'plugin', label: '插件管理', icon: renderIcon(ExtensionPuzzleOutline), disabled: true },
   { key: 'settings', label: '系统设置', icon: renderIcon(SettingsOutline), disabled: true },
 ]
+
 const activeMenuKey = computed(() => route.path)
 
 function onMenuSelect(key: string) {
@@ -146,13 +143,6 @@ function onUserAction(key: string) {
   --n-sider-border-color: var(--color-border, #E5E6EB);
 }
 
-.sider-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: visible;
-}
-
 .sider-logo {
   display: flex;
   align-items: center;
@@ -179,27 +169,16 @@ function onUserAction(key: string) {
   white-space: nowrap;
 }
 
-.sider-menu {
-  flex: 1;
-  overflow: visible;
-  padding: 8px;
-  min-height: 0;
-}
-
-.sider-menu :deep(.n-menu) {
-  --n-item-height: 40px;
-  --n-border-radius: 6px;
-  --n-font-size: 14px;
-  --n-item-icon-size: 18px;
-}
-
 .sider-user {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   border-top: 1px solid var(--color-border, #E5E6EB);
-  flex-shrink: 0;
 }
 
 .user-meta {