缩放改好-修改样式1

projects/base-core/src/lib/components/sticky-header/sticky-header.component.scss

@@ -5,19 +5,18 @@
   transition: all 0.3s ease-in-out;
   margin-bottom: 1.5rem; /* 为内容区域提供间距 */
   align-self: flex-start; /* 确保在flex容器中sticky生效 */
-  background-color: white; /* 确保不透明，防止内容透出 */
+  background-color: transparent; /* 移除白色背景，消除白色边缘 */
   /* 创建新的层叠上下文，确保z-index生效 */
   transform: translateZ(0);
   will-change: transform;
-  /* 轻微的内阴影，增强立体感 */
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
+  /* 移除顶部内阴影，消除白色边缘 */
   /* 确保内容区域填充高度 */
   display: flex;
   flex-direction: column;
 
   .header-content {
     background: #f8fafc; /* 简洁的灰白色背景 */
-    border-radius: 0.5rem;
+    border-radius: 0; /* 移除圆角，消除白色边缘 */
     border: 1px solid #e2e8f0; /* 柔和的边框 */
     box-shadow: 
       inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), /* 轻微内阴影，创造凹陷感 */
@@ -66,17 +65,17 @@
     transform: none; /* 移除transform层叠上下文 */
     will-change: auto;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* 外阴影，表示浮动状态 */
-    background-color: white; /* 确保背景不透明 */
+    background-color: transparent; /* 移除白色背景，消除白色边缘 */
     
     .header-content {
-      border-radius: 0.5rem;
+      border-radius: 0; /* 移除圆角，消除白色边缘 */
       box-shadow: 
         inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
         inset 0 0 0 1px rgba(255, 255, 255, 0.9),
         0 2px 4px 0 rgba(0, 0, 0, 0.1); /* 更强外阴影，强调固定状态 */
       background: #f1f5f9;
       border: 1px solid #cbd5e1;
-      margin: 1rem; /* 添加外边距，避免贴边 */
+      margin: 5px; /* 减少外边距，从1rem(16px)改为5px */
       /* 保持原padding大小 */
       height: 100%; /* 填充父容器高度 */
       min-height: 100%; /* 确保填充最小高度 */
@@ -120,7 +119,7 @@
   /* 缩小状态 - 在锁定基础上进一步缩小 */
   &.compact {
     .header-content {
-      border-radius: 0.375rem;
+      border-radius: 0; /* 移除圆角，消除白色边缘 */
       box-shadow: 
         inset 0 3px 6px 0 rgba(0, 0, 0, 0.08), /* 更强的内阴影，增强凹陷感 */
         inset 0 0 0 1px rgba(255, 255, 255, 0.8), /* 内边缘高光 */
@@ -132,8 +131,8 @@
       flex: 1; /* 填充可用空间 */
       
       > div:first-child {
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
+        padding-top: 1px; /* 减少上下空白，从6px改为1px */
+        padding-bottom: 1px; /* 减少上下空白，从6px改为1px */
       }
     }
 

projects/base-core/src/lib/components/tree-nav/tree-nav.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { MatTreeModule, MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
@@ -6,7 +6,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { TreeService } from '../../services/tree.service';
 import { TreeNode } from '../../models/tree-node.model';
 
 interface FlatNode {
@@ -59,43 +58,40 @@ export class TreeNavComponent implements OnInit {
 
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   isLoading = true;
+  
+  @Input() set treeData(data: TreeNode[]) {
+    if (data) {
+      console.log('树数据更新:', data);
+      if (data.length > 0) {
+        console.log('接收到的树数据图标检查:');
+        data.forEach((node: TreeNode, index: number) => {
+          console.log(`节点${index}: ${node.name}, 图标: ${node.icon}, 类型: ${node.type}, 路由: ${node.route}`);
+          if (node.children && node.children.length > 0) {
+            node.children.forEach((child: TreeNode, childIndex: number) => {
+              console.log(`  子节点${childIndex}: ${child.name}, 图标: ${child.icon}, 类型: ${child.type}, 路由: ${child.route}`);
+            });
+          }
+        });
+      }
+      this.dataSource.data = data;
+      this.treeControl.expandAll();
+      this.isLoading = false;
+    }
+  }
+  
+  @Output() refresh = new EventEmitter<void>();
 
   constructor(
-    private treeService: TreeService,
     public router: Router
   ) {}
 
   ngOnInit(): void {
-    this.loadTreeData();
+    // 数据由父组件通过 @Input() treeData 提供
   }
 
   loadTreeData(): void {
     this.isLoading = true;
-    this.treeService.getTree().subscribe({
-      next: (data: TreeNode[]) => {
-        console.log('树数据加载成功:', data);
-        // 调试：检查数据中的图标
-        if (data && data.length > 0) {
-          console.log('接收到的树数据图标检查:');
-          data.forEach((node: TreeNode, index: number) => {
-            console.log(`节点${index}: ${node.name}, 图标: ${node.icon}, 类型: ${node.type}, 路由: ${node.route}`);
-            if (node.children && node.children.length > 0) {
-              node.children.forEach((child: TreeNode, childIndex: number) => {
-                console.log(`  子节点${childIndex}: ${child.name}, 图标: ${child.icon}, 类型: ${child.type}, 路由: ${child.route}`);
-              });
-            }
-          });
-        }
-        this.dataSource.data = data;
-        // 默认展开所有节点
-        this.treeControl.expandAll();
-        this.isLoading = false;
-      },
-      error: (error: any) => {
-        console.error('树数据加载失败:', error);
-        this.isLoading = false;
-      }
-    });
+    this.refresh.emit();
   }
 
   hasChild = (_: number, node: FlatNode) => node.expandable;
@@ -117,7 +113,5 @@ export class TreeNavComponent implements OnInit {
     }
   }
 
-  refresh(): void {
-    this.loadTreeData();
-  }
+
 }

projects/base-core/src/lib/services/index.ts

@@ -11,5 +11,5 @@ export * from './config.service';
 // export * from './skill.service';
 // export * from './tenant.service';
 export * from './toast.service';
-export * from './tree.service';
+
 // export * from './user.service';

projects/base-core/src/lib/services/tree.service.ts

@@ -1,180 +0,0 @@
-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 './config.service';
-
-@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'
-          }
-        ]
-      }
-    ];
-  }
-}