右上角用户信息区域移到左边栏底部

src/app/layouts/AppHeader.vue

@@ -43,9 +43,6 @@
             <Icon icon="tabler:search" />
           </template>
         </n-input>
-
-        <!-- 用户菜单 -->
-        <UserMenu />
       </n-space>
     </div>
   </div>
@@ -58,7 +55,6 @@ import { NButton, NBreadcrumb, NBreadcrumbItem, NSpace, NInput } from 'naive-ui'
 import { Icon } from '@iconify/vue'
 import { useAuthStore } from '../../shared/stores/auth'
 import { t } from '../../shared/i18n'
-import UserMenu from '../../shared/components/UserMenu.vue'
 
 const router = useRouter()
 const route = useRoute()

src/app/layouts/AppSidebar.vue

@@ -21,6 +21,11 @@
         @update:value="handleMenuSelect"
       />
     </div>
+
+    <!-- 用户菜单区域 -->
+    <div class="sidebar-footer">
+      <UserMenu :collapsed="collapsed" />
+    </div>
   </div>
 </template>
 
@@ -32,6 +37,7 @@ import { t } from '../../shared/i18n'
 import { useMenuStore, type AppMenuItem } from '../../shared/stores/menu'
 import { pageTypeToSlug } from '../../shared/utils/slug'
 import DynamicIcon from '../../core/components/DynamicIcon.vue'
+import UserMenu from '../../shared/components/UserMenu.vue'
 
 interface Props {
   collapsed: boolean
@@ -210,4 +216,11 @@ const handleMenuSelect = (key: string) => {
   color: #18a058 !important;
   transform: scale(1.1);
 }
+
+/* 侧边栏底部用户菜单区域 */
+.sidebar-footer {
+  flex-shrink: 0;
+  padding: 12px;
+  border-top: 1px solid var(--border-color);
+}
 </style>

src/shared/components/UserMenu.vue

@@ -1,31 +1,52 @@
 <template>
-  <n-dropdown
+  <div class="user-menu-wrapper">
-    trigger="click"
+    <n-dropdown
-    :options="userMenuOptions"
+      trigger="click"
-    @select="handleUserMenuSelect"
+      placement="top-start"
-    class="user-menu-dropdown"
+      :options="userMenuOptions"
-  >
+      @select="handleUserMenuSelect"
-    <n-button quaternary>
+      :show-arrow="false"
-      <n-avatar
+    >
-        round
+      <n-button quaternary block :class="{ 'collapsed-button': collapsed }">
-        size="small"
+        <template v-if="collapsed">
-      >
+          <n-avatar
-        {{ user?.user?.charAt(0).toUpperCase() }}
+            round
-      </n-avatar>
+            size="small"
-      <span class="username">{{ user?.user }}</span>
+          >
-      <Icon icon="tabler:chevron-down" />
+            {{ user?.user?.charAt(0).toUpperCase() }}
-    </n-button>
+          </n-avatar>
-  </n-dropdown>
+        </template>
+        <template v-else>
+          <n-space align="center" :wrap="false" style="width: 100%">
+            <n-avatar
+              round
+              size="small"
+            >
+              {{ user?.user?.charAt(0).toUpperCase() }}
+            </n-avatar>
+            <span class="username">{{ user?.user }}</span>
+            <Icon icon="tabler:chevron-up" style="margin-left: auto" />
+          </n-space>
+        </template>
+      </n-button>
+    </n-dropdown>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, h } from 'vue'
 import { useRouter } from 'vue-router'
-import { NButton, NDropdown, NAvatar, useMessage } from 'naive-ui'
+import { NButton, NDropdown, NAvatar, NSpace, useMessage } from 'naive-ui'
 import { Icon } from '@iconify/vue'
 import { useAuthStore } from '../stores/auth'
 import { t } from '../i18n'
 
+interface Props {
+  collapsed?: boolean
+}
+
+defineProps<Props>()
+
 const router = useRouter()
 const message = useMessage()
 const authStore = useAuthStore()
@@ -71,9 +92,29 @@ const handleUserMenuSelect = async (key: string) => {
 </script>
 
 <style scoped>
+.user-menu-wrapper {
+  width: 100%;
+}
+
 .username {
-  margin-left: 8px;
+  flex: 1;
+  text-align: left;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.n-button) {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 折叠状态下的按钮样式 */
+:deep(.collapsed-button) {
+  padding: 4px !important;
 }
 
 /* 移动端隐藏用户名文字 */
@@ -86,7 +127,14 @@ const handleUserMenuSelect = async (key: string) => {
 
 <style>
 .n-dropdown-menu {
-  margin: 6px 12px !important;
+  width: auto !important;
+  min-width: 216px !important; /* 240px - 24px padding */
+}
+
+/* 侧边栏折叠时的下拉菜单宽度 */
+.n-layout-sider--collapsed .sidebar-footer + * .n-dropdown-menu,
+body:has(.n-layout-sider--collapsed) .sidebar-footer .n-dropdown-menu {
+  min-width: 40px !important; /* 64px - 24px padding */
 }
 </style>