wip: 布局优化完成

src/layouts/components/NavBar/components/NavbarActions.vue

@@ -138,15 +138,44 @@ function logout() {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 40px;
-    height: $navbar-height;
+    min-width: 36px;
+    height: 100%;
+    padding: 0 8px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s;
 
+    // 确保直接子元素也居中
+    > * {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    // 确保 el-dropdown 也居中
+    :deep(.el-dropdown) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    // 修复可能的 SVG 图标容器
+    :deep(.icon-container),
+    :deep(.action-icon) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
     // 默认图标样式（明亮模式 + 左侧布局）
     :deep([class^="i-svg:"]) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       font-size: 18px;
+      line-height: 1;
       color: var(--el-text-color-regular);
       transition: color 0.3s;
     }
@@ -165,18 +194,20 @@ function logout() {
     align-items: center;
     justify-content: center;
     height: 100%;
-    padding: 0 13px;
+    padding: 0 8px;
 
     &__avatar {
-      width: 32px;
-      height: 32px;
+      width: 28px;
+      height: 28px;
       border-radius: 50%;
+      flex-shrink: 0;
     }
 
     &__name {
-      margin-left: 10px;
+      margin-left: 8px;
       color: var(--el-text-color-regular);
       transition: color 0.3s;
+      white-space: nowrap;
     }
   }
 }

src/layouts/components/NavBar/index.vue

@@ -37,12 +37,16 @@ function toggleSideBar() {
 .navbar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   height: $navbar-height;
+  padding: 0 20px;
   background: var(--el-bg-color);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   &__actions {
     display: flex;
     align-items: center;
+    height: 100%;
   }
 }
 </style>

src/layouts/components/Sidebar/components/SidebarLogo.vue

@@ -30,7 +30,7 @@ defineProps({
   background-color: $sidebar-logo-background;
 
   .title {
-    flex-shrink: 0; /* 防止容器在空间不足时缩小 */
+    flex-shrink: 0;
     margin-left: 10px;
     font-size: 14px;
     font-weight: bold;