tree左边样式ok

web/src/app/app.component.html

@@ -4,16 +4,26 @@
   <!-- 使用可拖动分割线的布局 -->
   <div class="h-screen w-screen bg-gray-50 flex overflow-hidden">
     <!-- 左侧导航栏 -->
-    <div class="h-full overflow-hidden bg-white border-r border-gray-200 flex-shrink-0" [style.width.px]="sidebarWidth">
-      <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
+    <div class="h-full overflow-hidden bg-white border-r border-gray-200 flex-shrink-0 flex flex-col" [style.width.px]="sidebarWidth">
+      <div class="px-4 pt-[22px] pb-[10px] border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50 flex items-start">
         <h2 class="text-lg font-semibold text-gray-800 flex items-center">
           <mat-icon class="mr-2 text-blue-600">home</mat-icon>
           Talking - ERP
         </h2>
       </div>
-      <div class="h-[calc(100%-80px)] overflow-auto">
+      <div class="flex-1 overflow-auto">
         <app-tree-nav></app-tree-nav>
       </div>
+      <!-- 底部退出区域 -->
+      <div class="p-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
+        <div class="flex items-center cursor-pointer hover:bg-gray-200 rounded p-2 group" (click)="logout()" matTooltip="退出登录" matTooltipPosition="above">
+          <mat-icon class="mr-2 text-gray-600 group-hover:text-red-600">logout</mat-icon>
+          <span class="text-sm text-gray-700 group-hover:text-red-700">退出</span>
+        </div>
+        <span class="text-sm text-gray-700">
+          {{ authService.getCurrentUser()?.username || '用户' }}
+        </span>
+      </div>
     </div>
     
     <!-- 可拖动分割线 -->
@@ -27,31 +37,7 @@
     
     <!-- 右侧内容区 -->
     <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
-      <div class="px-4 py-2 border-b border-gray-200 bg-white flex items-center justify-between h-12 flex-shrink-0">
-        <!-- 面包屑导航 -->
-        <div class="flex items-center space-x-1 text-sm">
-          @for (item of breadcrumbPath; track item; let last = $last) {
-            <span class="text-gray-600">{{ item }}</span>
-            @if (!last) {
-              <span class="text-gray-400 mx-1">/</span>
-            }
-          }
-        </div>
-        
-        <!-- 右侧：用户名和退出按钮 -->
-        <div class="flex items-center space-x-4">
-          @if (authService.isAuthenticated()) {
-            <span class="text-sm text-gray-700">
-              {{ authService.getCurrentUser()?.username || '用户' }}
-            </span>
-          }
-          
-          <!-- 退出图标 -->
-          <button mat-icon-button (click)="logout()" class="text-gray-600 hover:text-red-600" matTooltip="退出登录">
-            <mat-icon>logout</mat-icon>
-          </button>
-        </div>
-      </div>
+
       <div class="flex-1 overflow-auto">
         <div class="p-4 h-full">
           <router-outlet></router-outlet>