@if (isLoginPage) {
  <router-outlet></router-outlet>
} @else {
  <!-- 使用可拖动分割线的布局 -->
  <div class="h-screen w-screen bg-gray-50 flex">
    <!-- 左侧导航栏 -->
    <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="flex-1 overflow-auto">
        <app-tree-nav [treeData]="treeData" (refresh)="onTreeRefresh()"></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">
          {{ username }}
        </span>
      </div>
    </div>
    
    <!-- 可拖动分割线 -->
    <div class="w-2 h-full flex-shrink-0 cursor-ew-resize bg-gray-300 hover:bg-blue-400 active:bg-blue-500 transition-colors relative"
         (mousedown)="startDrag($event)"
         [class.bg-blue-400]="isDragging">
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="w-1 h-8 bg-gray-400 rounded-full"></div>
      </div>
    </div>
    
    <!-- 右侧内容区 -->
    <div class="flex-1 h-full bg-white flex flex-col">

      <div class="flex-1 content-area">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
}