折叠工具条可以正常工作

src/app/app.component.html

@@ -1,21 +1,22 @@
 @if (isLoginPage) {
   <router-outlet></router-outlet>
 } @else {
-  <!-- 使用可拖动分割线的布局 -->
-  <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 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">
+  <!-- 使用grid布局 + 可拖动分割线 -->
+  <!-- 关键：grid布局确保高度链完整，滚动容器独立 -->
+  <div class="app-layout" [style.gridTemplateColumns]="sidebarWidth + 'px 8px 1fr'">
+    <!-- 左侧面板 -->
+    <div class="left-panel">
+      <div class="logo-section">
+        <h2 class="flex items-center">
           <mat-icon class="mr-2 text-blue-600">home</mat-icon>
           Talking - ERP
         </h2>
       </div>
-      <div class="flex-1 overflow-auto">
+      <div class="tree-container">
         <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="footer-info">
         <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>
@@ -27,21 +28,17 @@
     </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"
+    <div class="splitter"
          (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>
+         [class.dragging]="isDragging">
+      <div class="splitter-handle"></div>
     </div>
     
-    <!-- 右侧内容区 -->
-    <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
-
-      <div class="flex-1 overflow-auto content-area">
-         <div class="pt-[5px] px-4 pb-4 h-full">
-          <router-outlet></router-outlet>
-        </div>
+    <!-- 右侧面板 -->
+    <div class="right-panel">
+      <!-- 关键：滚动容器，sticky-header检测此容器 -->
+      <div class="content-container">
+        <router-outlet></router-outlet>
       </div>
     </div>
   </div>

src/app/app.component.html.backup

@@ -0,0 +1,46 @@
+@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>
+}

src/app/app.component.scss

@@ -1,7 +1,177 @@
+/* 主应用布局 - 基于工作示例的grid布局 + 可拖动分割线 */
 :host {
   display: block;
   width: 100vw;
   height: 100vh;
-  overflow: hidden;
   background-color: #f9fafb; /* gray-50 */
+}
+
+/* Grid布局容器 */
+.app-layout {
+  display: grid;
+  grid-template-columns: 320px 8px 1fr; /* 默认宽度 */
+  height: 100vh;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* 左侧面板 */
+.left-panel {
+  background: white;
+  color: #333;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-right: 1px solid #e0e0e0;
+  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
+}
+
+.logo-section {
+  padding: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  background: linear-gradient(to right, #f8f9fa, #e9ecef);
+}
+
+.logo-section h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+}
+
+.logo-section mat-icon {
+  color: #3b82f6;
+}
+
+.tree-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.footer-info {
+  margin-top: auto;
+  padding: 16px 20px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f8f9fa;
+}
+
+.footer-info .flex {
+  display: flex;
+  align-items: center;
+  transition: all 0.2s;
+}
+
+.footer-info .flex:hover {
+  background-color: #e9ecef;
+}
+
+.footer-info mat-icon {
+  font-size: 18px;
+}
+
+.footer-info span {
+  color: #6c757d;
+  font-size: 14px;
+}
+
+/* 可拖动分割线 */
+.splitter {
+  background: #e5e7eb;
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  position: relative;
+  user-select: none;
+}
+
+.splitter:hover,
+.splitter.dragging {
+  background: #3b82f6;
+}
+
+.splitter-handle {
+  width: 2px;
+  height: 40px;
+  background: #9ca3af;
+  border-radius: 1px;
+  transition: background-color 0.2s;
+}
+
+.splitter:hover .splitter-handle,
+.splitter.dragging .splitter-handle {
+  background: white;
+}
+
+/* 右侧面板 */
+.right-panel {
+  background: #f8f9fa;
+  overflow: hidden;
+  position: relative;
+}
+
+/* 关键：滚动容器 - sticky-header检测此容器 */
+.content-container {
+  height: 100%;
+  overflow-y: auto;
+  background: white;
+}
+
+/* 滚动条样式 */
+.content-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content-container::-webkit-scrollbar-track {
+  background: #f1f2f6;
+  border-radius: 4px;
+}
+
+.content-container::-webkit-scrollbar-thumb {
+  background: #bdc3c7;
+  border-radius: 4px;
+}
+
+.content-container::-webkit-scrollbar-thumb:hover {
+  background: #95a5a6;
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .app-layout {
+    grid-template-columns: 240px 8px 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 8px auto;
+  }
+  
+  .left-panel {
+    max-height: 300px;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  
+  .logo-section {
+    padding: 16px;
+  }
+  
+  .splitter {
+    cursor: row-resize;
+  }
+  
+  .splitter-handle {
+    width: 40px;
+    height: 2px;
+  }
 }

src/app/app.component.scss.backup

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f9fafb; /* gray-50 */
+}

src/app/app.routes.ts

@@ -27,5 +27,5 @@ export const routes: Routes = [
   { path: 'tenant/list', component: TenantListComponent, canActivate: [authGuard] },
   { path: 'role/list', component: RoleListComponent, canActivate: [authGuard] },
   { path: 'user/list', component: UserListComponent, canActivate: [authGuard] },
-  { path: '**', redirectTo: '/home/readme' }
+ { path: '**', redirectTo: '/home/readme' }
 ];

src/app/pages/service-register-config/service-register-config.component.html

@@ -1,28 +1,96 @@
-<!-- 顶部标题区域 -->
-<app-sticky-header
-  [title]="title"
-  [hintText]="hintText"
-  [buttons]="headerButtons"
-  [showDebugInfo]="true"
-  [autoDetect]="true"
-  [scrollContainer]="'.content-area'"
-  [scrollThreshold]="20"
-  [compactThreshold]="80"
- [widthTarget]="'#tabulator-table'"
-  (buttonAction)="onHeaderButtonAction($event)"
-></app-sticky-header>
+<!-- 页面容器 - 采用与工作示例相同的布局结构 -->
+<div class="page-container">
+  <!-- Sticky Header组件 -->
+  <app-sticky-header [collapseThreshold]="50" [scrollContainer]="'#service-register-content'">
+    <!-- 工具条区域 - 保持固定 -->
+    <div toolbar class="page-toolbar">
+      <div class="toolbar-content">
+        <!-- 标题区域 -->
+        <div class="title-section">
+          <mat-icon class="title-icon">description</mat-icon>
+          <h1 class="page-title">{{ title }}</h1>
+        </div>
+      </div>
+      
+      <!-- 按钮区域 -->
+      <div class="button-section">
+        <!-- 注册按钮 -->
+        <button 
+          type="button"
+          class="btn btn-primary"
+          (click)="onRegister()"
+          [disabled]="isRegistering"
+        >
+          @if (isRegistering) {
+            <mat-icon class="mr-1">hourglass_empty</mat-icon>
+            <span>处理中...</span>
+          } @else {
+            <mat-icon class="mr-1">add_circle</mat-icon>
+            <span>注册</span>
+          }
+        </button>
+        
+        <!-- 刷新按钮 -->
+        <button 
+          type="button"
+          class="btn btn-secondary"
+          (click)="refresh()"
+          [disabled]="isRefreshing"
+        >
+          @if (isRefreshing) {
+            <mat-icon class="mr-1 spin-icon">refresh</mat-icon>
+            <span>刷新中...</span>
+          } @else {
+            <mat-icon class="mr-1">refresh</mat-icon>
+            <span>刷新</span>
+          }
+        </button>
+      </div>
+    </div>
+    
+    <!-- 提示区域 - 可折叠 -->
+    <div hint class="page-hint">
+      <!-- 提示信息区域 -->
+      <div class="hint-section">
+        <div class="hint-content">
+          <p>点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。</p>
+        </div>
+      </div>
+      
+      <!-- 调试信息区域 -->
+      <div class="debug-section">
+        <div class="debug-item">
+          <span class="debug-label">数据源:</span>
+          <span class="debug-value">{{ config.useMockData ? '模拟数据' : 'API数据' }}</span>
+        </div>
+        <div class="debug-item">
+          <span class="debug-label">记录条数:</span>
+          <span class="debug-value">{{ recordCount }}</span>
+        </div>
+        <div class="debug-item">
+          <span class="debug-label">更新时间:</span>
+          <span class="debug-value">{{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}</span>
+        </div>
+      </div>
+    </div>
+  </app-sticky-header>
+  
+  <!-- 内容区域 - 内部滚动 -->
+  <div id="service-register-content" class="content-area">
+    <!-- Tabulator 表格组件 -->
+    <app-tabulator-grid id="tabulator-table" #matCard
+      [columns]="columns"
+      [dataLoader]="dataLoader"
+      [height]="'1000px'"
+      [paginationSize]="100"
+      [paginationSizeSelector]="[10, 20, 50, 100,200,500]"
+      [showPagination]="true"
+      [remoteSort]="true"
+      [remoteFilter]="true"
+      (dataLoaded)="onDataLoaded($event)"
+      (ajaxError)="onAjaxError($event)"
+    ></app-tabulator-grid>
+  </div>
+</div>
+
 
-<!-- Tabulator 表格组件 -->
-<app-tabulator-grid id="tabulator-table" #matCard
-  [columns]="columns"
-  [dataLoader]="dataLoader"
-  [height]="'600px'"
-  [paginationSize]="20"
-  [paginationSizeSelector]="[10, 20, 50, 100,200,500]"
-  [showPagination]="true"
-  [remoteSort]="true"
-  [remoteFilter]="true"
-  (dataLoaded)="onDataLoaded($event)"
-  (ajaxError)="onAjaxError($event)"
-  class="flex-1"
-></app-tabulator-grid>

src/app/pages/service-register-config/service-register-config.component.scss

@@ -1,27 +1,202 @@
-/* config-meta-tabulator.component.scss */
-.tabulator-container {
-  padding: 16px;
-  
-  .toolbar {
-    margin-bottom: 16px;
-    
-    .btn {
-      margin-right: 8px;
-      padding: 8px 16px;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      
-      &:hover {
-        background: #0056b3;
-      }
-    }
-  }
-  
-  #tabulator-table {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+/* Service Register Config 页面样式 */
+/* 采用与工作示例相同的布局结构 */
+
+/* 组件宿主元素 - 继承父容器高度 */
+:host {
+  display: block;
+  height: 100%;
+}
+
+/* ==================== 页面容器 ==================== */
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: white;
+  min-height: 0; /* 关键：flex容器需要此属性 */
+  overflow-y: visible; /* 确保不破坏sticky定位 */
+  position: relative; /* 为sticky定位创建定位上下文 */
+}
+
+/* ==================== 工具条内容样式 ==================== */
+.page-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-height: 48px; /* 与组件最小高度匹配 */
+  padding: 0 16px; /* 与组件toolbar-area内边距匹配 */
+}
+
+.toolbar-content {
+  display: flex;
+  align-items: center;
+}
+
+/* 标题区域 */
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-icon {
+  color: #3b82f6; /* 蓝色图标 */
+  font-size: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600; /* font-semibold */
+  color: #1f2937; /* text-gray-800 */
+}
+
+/* 按钮区域 */
+.button-section {
+  display: flex;
+  gap: 8px;
+}
+
+/* 按钮基础样式 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.5rem 1rem; /* px-4 py-2 */
+  border: none;
+  border-radius: 0.375rem; /* rounded-md */
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  outline: none;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 主要按钮 */
+.btn-primary {
+  background-color: #2563eb; /* bg-blue-600 */
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: #1d4ed8; /* hover:bg-blue-700 */
+}
+
+.btn-primary:focus {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5); /* focus:ring-2 focus:ring-blue-500 */
+}
+
+/* 次要按钮 */
+.btn-secondary {
+  background-color: #e5e7eb; /* bg-gray-200 */
+  color: #1f2937; /* text-gray-800 */
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: #d1d5db; /* hover:bg-gray-300 */
+}
+
+.btn-secondary:focus {
+  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.5); /* focus:ring-2 focus:ring-gray-500 */
+}
+
+/* 旋转加载指示器 */
+.spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ==================== 提示区域样式 ==================== */
+.page-hint .hint-section {
+  padding: 1rem; /* p-4 */
+  background-color: #eff6ff; /* bg-blue-50 */
+  border-bottom: 1px solid #dbeafe; /* border-blue-100 */
+}
+
+.hint-content {
+  font-size: 0.875rem; /* text-sm */
+  color: #1e40af; /* text-blue-800 */
+}
+
+.hint-content p {
+  margin: 0;
+  font-weight: 500; /* font-medium */
+}
+
+/* 调试信息区域 */
+.debug-section {
+  padding: 0.75rem; /* p-3 */
+  background-color: #fffbeb; /* bg-amber-50 */
+  border-bottom: 1px solid #fef3c7; /* border-amber-100 */
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem; /* gap-3 */
+}
+
+@media (min-width: 768px) {
+  .debug-section {
+    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
   }
+}
+
+.debug-item {
+  font-size: 0.875rem; /* text-sm */
+  color: #92400e; /* text-amber-800 */
+}
+
+.debug-label {
+  font-weight: 500; /* font-medium */
+}
+
+.debug-value {
+  margin-left: 0.5rem; /* ml-2 */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ==================== 内容区域 ==================== */
+/* 内部滚动容器，确保 sticky header 能正确检测滚动 */
+/* 采用工作示例的精确配置 */
+.content-area {
+  flex: 1 1 0%; /* 工作示例使用的精确值 */
+  overflow-y: auto !important; /* 确保优先级 */
+  overflow-x: hidden; /* 防止水平滚动 */
+  padding: 16px;
+  background: white;
+  min-height: 0; /* flex容器关键设置，防止内容溢出 */
+  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
+  position: relative; /* 创建新的堆叠上下文 */
+}
+
+/* Tabulator 表格样式 */
+#tabulator-table {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  height: 100% !important; /* 确保表格填满内容区域 */
+  min-height: 600px; /* 确保有足够内容产生滚动 */
+}
+
+/* 旋转图标 - 用于刷新按钮加载状态 */
+.spin-icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }

src/app/pages/service-register-config/service-register-config.component.spec.ts

@@ -69,7 +69,7 @@ describe('ServiceRegisterConfigComponent', () => {
 
   it('should initialize with default values', () => {
     expect(component.title).toBe('注册服务配置');
-    expect(component.hintText).toBe('点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。');
+    expect(component.recordCount).toBe(0);
     expect(component.headerButtons.length).toBe(2);
     expect(component.headerButtons[0].name).toBe('register');
     expect(component.headerButtons[1].name).toBe('refresh');

src/app/pages/service-register-config/service-register-config.component.ts

@@ -1,19 +1,20 @@
 
 import { Component, inject, ViewChild, OnInit, AfterViewInit } from '@angular/core';
 import { ConfigMetaService } from '../../services/config-meta.service';
-import { ConfigService, StickyHeaderComponent, StickyHeaderButton, TabulatorGridComponent } from 'base-core';
+import { ConfigService, StickyHeaderComponent, TabulatorGridComponent } from 'base-core';
 import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
 import { Observable } from 'rxjs';
 
 @Component({
-  imports: [CommonModule, StickyHeaderComponent, TabulatorGridComponent],
+  imports: [CommonModule, StickyHeaderComponent, TabulatorGridComponent, MatIconModule],
   selector: 'app-service-register-config',
   templateUrl: './service-register-config.component.html',
   styleUrl: './service-register-config.component.scss'
 })
 export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
   private configMetaService = inject(ConfigMetaService);
-  private config = inject(ConfigService);
+  config = inject(ConfigService);
 
   @ViewChild(TabulatorGridComponent) tabulatorGrid!: TabulatorGridComponent;
 
@@ -28,15 +29,15 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
    }
 
   ngAfterViewInit(): void {
-    console.log('👀 ServiceRegisterConfigComponent: TabulatorGrid 视图初始化完成');
+     console.log('👀 ServiceRegisterConfigComponent: 视图初始化完成');
+     console.log('👀 ServiceRegisterConfigComponent: TabulatorGrid 视图初始化完成');
   }
 
   title = '注册服务配置';
-  hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
-  headerButtons: StickyHeaderButton[] = [
-    { title: '注册', name: 'register', icon: 'add', color: 'primary' },
-    { title: '刷新', name: 'refresh', icon: 'refresh', color: 'accent' }
-  ];
+  recordCount = 0; // 用于动态区域变量绑定
+  isRegistering = false;
+  isRefreshing = false;
+  currentTime = new Date();
   
   // 外部查询条件预留字段（用于将来扩展）
   externalFilters: any = {};
@@ -93,14 +94,16 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
       headerFilter: 'input', 
       headerFilterFunc: 'like' 
     }
-  ];
+   ];
+
+
 
    /**
     * 数据加载函数 - 适配 TabulatorGridComponent
     */
    dataLoader = (params: any): Observable<{ last_page: number; data: any[] }> => {
      console.group('🚨🚨🚨 ServiceRegisterConfigComponent 数据加载函数被调用 🚨🚨🚨');
-     console.log('🔍 调用来源堆栈:', new Error().stack);
+     //console.log('🔍 调用来源堆栈:', new Error().stack);
      console.log('🔍 原始参数结构:', {
        type: typeof params,
        isObject: params && typeof params === 'object',
@@ -153,11 +156,11 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
    */
   onRegister(): void {
     console.log('注册按钮被点击');
-    this.headerButtons[0].loading = true;
+    this.isRegistering = true;
 
     this.configMetaService.initConfigMeta().subscribe({
       next: (result: any) => {
-        this.headerButtons[0].loading = false;
+        this.isRegistering = false;
         if (result.success) {
           console.log('注册完成:', result.data);
           // 注册成功后刷新表格数据
@@ -168,39 +171,24 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
         }
       },
       error: (error) => {
-        this.headerButtons[0].loading = false;
+        this.isRegistering = false;
         console.error('注册请求失败:', error);
       }
     });
   }
 
-  /**
-   * 处理头部按钮点击事件
-   */
-  onHeaderButtonAction(name: string): void {
-    console.log(`头部按钮点击: ${name}`);
-    switch (name) {
-      case 'register':
-        this.onRegister();
-        break;
-      case 'refresh':
-        this.refresh();
-        break;
-      default:
-        console.warn(`未知按钮操作: ${name}`);
-    }
-  }
+
 
   /**
    * 刷新表格数据
    */
   refresh(): void {
     if (this.tabulatorGrid) {
-      this.headerButtons[1].loading = true;
+      this.isRefreshing = true;
       this.tabulatorGrid.refresh();
       // 简单延迟后清除loading状态
       setTimeout(() => {
-        this.headerButtons[1].loading = false;
+        this.isRefreshing = false;
       }, 500);
     }
   }
@@ -246,6 +234,10 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
       data_count: response?.data?.length,
       data_sample: response?.data?.slice(0, 2)
     });
+    
+    // 更新记录数和时间
+    this.recordCount = response?.data?.length || 0;
+    this.currentTime = new Date();
   }
 
   /**

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

@@ -1,17 +1,5 @@
 <div class="h-full flex flex-col pt-0 px-4 pb-4 min-w-0">
-   <app-sticky-header
-    [title]="'租户管理'"
-    [buttonText]="'新增租户'"
-    [buttonIcon]="'add'"
-    [buttonColor]="'primary'"
-    [autoDetect]="true"
-    [scrollContainer]="'.content-area'"
-     [scrollThreshold]="20"
-    [compactThreshold]="80"
-    [widthTarget]="'#tenantMatCard'"
-    [headerHeight]="'200px'"
-    (buttonClick)="openAddDialog()">
-  </app-sticky-header>
+
 
    <mat-card id="tenantMatCard" class="h-[400px]">
      <mat-card-content class="overflow-auto">

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

@@ -10,7 +10,7 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatIcon } from '@angular/material/icon';
 import { TenantService } from '../../services/tenant.service';
 import { Tenant, TenantRequest } from '../../models/tenant.model';
-import { EnterNavigationDirective, StickyHeaderComponent } from 'base-core';
+import { EnterNavigationDirective } from 'base-core';
 
 @Component({
   selector: 'app-tenant-list',
@@ -25,8 +25,7 @@ import { EnterNavigationDirective, StickyHeaderComponent } from 'base-core';
     MatInputModule,
     MatProgressSpinner,
     MatIcon,
-    EnterNavigationDirective,
-    StickyHeaderComponent
+    EnterNavigationDirective
   ],
   templateUrl: './tenant-list.component.html',
   styleUrl: './tenant-list.component.scss'

src/app/services/tree.service.ts

@@ -174,6 +174,28 @@ export class TreeService {
             route: '/user/list'
           }
         ]
+      },
+      {
+        id: 'test-group',
+        name: '测试',
+        icon: 'bug_report',
+        type: 'group',
+        children: [
+          {
+            id: 'sticky-test',
+            name: 'StickyHeader测试',
+            icon: 'vertical_align_top',
+            type: 'page',
+            route: '/test/sticky'
+          },
+          {
+            id: 'service-register-test',
+            name: '服务注册测试',
+            icon: 'app_registration',
+            type: 'page',
+            route: '/test/service-register'
+          }
+        ]
       }
     ];
   }

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

@@ -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'
+          }
+        ]
+      }
+    ];
+  }
+}

src/styles.scss

@@ -121,11 +121,11 @@ code:not(.prism-code code) {
   font-size: 0.875rem;
 }
 
-/* 内容区域滚动优化 */
-.content-area {
-  scrollbar-width: thin;
-  scrollbar-color: #cbd5e1 #f1f5f9;
-}
+ /* 内容区域滚动条样式 */
+ .content-area {
+   scrollbar-width: thin;
+   scrollbar-color: #cbd5e1 #f1f5f9;
+ }
 
 .content-area::-webkit-scrollbar {
   width: 8px;