缩放改好-修改样式1

src/app/app.component.html

@@ -12,7 +12,7 @@
         </h2>
       </div>
       <div class="flex-1 overflow-auto">
-        <app-tree-nav></app-tree-nav>
+        <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">
@@ -39,7 +39,7 @@
     <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
 
       <div class="flex-1 overflow-auto content-area">
-        <div class="pt-0 px-4 pb-4 h-full">
+         <div class="pt-[5px] px-4 pb-4 h-full">
           <router-outlet></router-outlet>
         </div>
       </div>

src/app/app.component.ts

@@ -8,9 +8,10 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AuthService } from './services/auth.service';
-import { TreeService } from 'base-core';
-import { TreeNode } from 'base-core';
+import { TreeService } from './services/tree.service';
+import { TreeNode } from './models/tree-node.model';
 import { Subscription, filter } from 'rxjs';
+import { ConfigService } from 'base-core';
 
 @Component({
   selector: 'app-root',
@@ -31,12 +32,21 @@ export class AppComponent implements OnInit, OnDestroy {
     private router: Router,
     public authService: AuthService,
     private treeService: TreeService,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private config: ConfigService
   ) {}
   
   ngOnInit() {
     console.log('AppComponent初始化');
     console.log('当前路由:', this.router.url);
+    
+    // 启用真实API调用
+    this.config.useMockData = false;
+    console.log('使用真实API数据，配置:', {
+      useMockData: this.config.useMockData,
+      apiBaseUrl: this.config.apiBaseUrl
+    });
+    
     // 从本地存储恢复宽度
     const savedWidth = localStorage.getItem('sidebarWidth');
     if (savedWidth) {
@@ -51,6 +61,9 @@ export class AppComponent implements OnInit, OnDestroy {
       },
       error: (error) => {
         console.error('加载树数据失败:', error);
+        // 确保设置 treeData 为空数组，避免绑定失效
+        this.treeData = [];
+        this.updateBreadcrumb();
       }
     });
 
@@ -103,6 +116,19 @@ export class AppComponent implements OnInit, OnDestroy {
     return this.authService.getCurrentUser()?.username || '用户';
   }
 
+  onTreeRefresh(): void {
+    console.log('树刷新事件触发');
+    this.treeService.getTree().subscribe({
+      next: (data) => {
+        this.treeData = data;
+        this.updateBreadcrumb();
+      },
+      error: (error) => {
+        console.error('刷新树数据失败:', error);
+      }
+    });
+  }
+
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
   }

src/app/pages/project-list/project-list.component.ts

@@ -62,6 +62,7 @@ export class ProjectListComponent implements OnInit {
       },
       error: (error) => {
         console.error('加载项目失败', error);
+        this.projects = [];
         this.loading = false;
       }
     });

src/app/pages/role-list/role-list.component.ts

@@ -63,6 +63,7 @@ export class RoleListComponent implements OnInit {
       },
       error: (error) => {
         console.error('加载角色失败', error);
+        this.roles = [];
         this.loading = false;
       }
     });

src/app/pages/tenant-list/tenant-list.component.ts

@@ -62,6 +62,7 @@ export class TenantListComponent implements OnInit {
       },
       error: (error) => {
         console.error('加载租户失败', error);
+        this.tenants = [];
         this.loading = false;
       }
     });

src/app/services/tree.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
-import { TreeService } from 'base-core';
+import { TreeService } from './tree.service';
 
 describe('TreeService', () => {
   let service: TreeService;

src/app/services/tree.service.ts

@@ -0,0 +1,180 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of, catchError, map } from 'rxjs';
+import { TreeNode } from '../models/tree-node.model';
+import { ConfigService } from 'base-core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TreeService {
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {}
+
+  getTree(): Observable<TreeNode[]> {
+    console.log('TreeService.getTree() 调用');
+    console.log('config.useMockData:', this.config.useMockData);
+    console.log('config.apiBaseUrl:', this.config.apiBaseUrl);
+    
+    if (this.config.useMockData) {
+      console.log('使用模拟树数据');
+      const mockTree = this.getMockTree();
+      console.log('模拟数据节点数:', mockTree.length);
+      // 调试：打印第一个节点的图标信息
+      if (mockTree.length > 0 && mockTree[0].children) {
+        console.log('[模拟数据]第一个分组节点图标:', mockTree[0].icon);
+        console.log('[模拟数据]第一个分组子节点图标:', mockTree[0].children.map(c => ({name: c.name, icon: c.icon})));
+      }
+      console.log('模拟数据结构:', JSON.stringify(mockTree, null, 2));
+      return of(mockTree);
+    }
+    
+    const apiUrl = `${this.config.apiBaseUrl}/projects/tree`;
+    console.log('请求树数据:', apiUrl);
+    
+    return this.http.get<any>(apiUrl).pipe(
+      map(response => {
+        console.log('树数据响应:', response);
+        // 后端返回 {success: true, data: [...]}
+        if (response && response.success && response.data) {
+          console.log('提取data字段，节点数:', response.data.length);
+          // 调试：打印第一个节点的图标信息
+          if (response.data.length > 0 && response.data[0].children) {
+            console.log('第一个分组节点图标:', response.data[0].icon);
+            console.log('第一个分组子节点图标:', response.data[0].children.map((c: any) => ({name: c.name, icon: c.icon})));
+          }
+          return response.data;
+        } else {
+          console.warn('响应格式不符合预期，返回空数组');
+          return [];
+        }
+      }),
+      catchError((error) => {
+        console.error('获取树数据失败:', error);
+        console.error('错误详情:', error.status, error.message, error.url);
+        // 认证失败或其他错误时返回空数组，不显示模拟数据
+        console.warn('API请求失败，回退到模拟数据');
+        const mockTree = this.getMockTree();
+        console.log('回退模拟数据节点数:', mockTree.length);
+        return of(mockTree);
+      })
+    );
+  }
+
+  private getMockTree(): TreeNode[] {
+    // 模拟树数据，基于Go后端返回的结构
+    return [
+      {
+        id: 'home',
+        name: '首页',
+        icon: 'home',
+        type: 'group',
+        children: [
+          {
+            id: 'readme',
+            name: '说明',
+            icon: 'description',
+            type: 'page',
+            route: '/home/readme'
+          }
+        ]
+      },
+      {
+        id: 'service-group',
+        name: '服务',
+        icon: 'settings',
+        type: 'group',
+        children: [
+          {
+            id: 'service-register',
+            name: '注册服务配置',
+            icon: 'app_registration',
+            type: 'page',
+            route: '/service/register-config'
+          },
+          {
+            id: 'service-management',
+            name: '微服务管理',
+            icon: 'dns',
+            type: 'page',
+            route: '/service/management'
+          },
+          {
+            id: 'service-config',
+            name: '微服务配置管理',
+            icon: 'settings_applications',
+            type: 'page',
+            route: '/service/config-management'
+          },
+          {
+            id: 'boot-config',
+            name: '微服务启动配置管理',
+            icon: 'play_circle',
+            type: 'page',
+            route: '/service/boot-config'
+          }
+        ]
+      },
+      {
+        id: 'user-group',
+        name: '项目',
+        icon: 'folder',
+        type: 'group',
+        children: [
+          {
+            id: 'project-management',
+            name: '项目管理',
+            icon: 'folder_open',
+            type: 'page',
+            route: '/project/list'
+          },
+          {
+            id: 'agent-management',
+            name: 'Agent管理',
+            icon: 'smart_toy',
+            type: 'page',
+            route: '/agent/list'
+          },
+          {
+            id: 'skill-management',
+            name: 'Skill管理',
+            icon: 'build',
+            type: 'page',
+            route: '/skill/list'
+          }
+        ]
+      },
+      {
+        id: 'tenant-group',
+        name: '租户管理',
+        icon: 'apartment',
+        type: 'group',
+        children: [
+          {
+            id: 'tenant-management',
+            name: '租户管理',
+            icon: 'apartment',
+            type: 'page',
+            route: '/tenant/list'
+          },
+          {
+            id: 'role-management',
+            name: '角色管理',
+            icon: 'admin_panel_settings',
+            type: 'page',
+            route: '/role/list'
+          },
+          {
+            id: 'user-management',
+            name: '用户管理',
+            icon: 'people',
+            type: 'page',
+            route: '/user/list'
+          }
+        ]
+      }
+    ];
+  }
+}