缩放改好

src/app/app.component.html

@@ -38,7 +38,7 @@
     <!-- 右侧内容区 -->
     <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
 
-      <div class="flex-1 overflow-auto">
+      <div class="flex-1 overflow-auto content-area">
         <div class="p-4 h-full">
           <router-outlet></router-outlet>
         </div>

src/app/components/sticky-header/sticky-header.component.scss

@@ -59,18 +59,17 @@
     margin-bottom: 0; /* 移除margin，因为现在是fixed定位 */
     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); /* 外阴影，表示浮动状态 */
+    box-shadow: none; /* 移除外阴影，增强一体感 */
     background-color: white; /* 确保背景不透明 */
     
     .header-content {
       border-radius: 0.5rem;
       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); /* 更强外阴影，强调固定状态 */
+        inset 0 0 0 1px rgba(255, 255, 255, 0.9); /* 内阴影，增强一体感 */
       background: #f1f5f9;
       border: 1px solid #cbd5e1;
-      margin: 1rem; /* 添加外边距，避免贴边 */
+      margin: 0; /* 移除外边距，确保精确对齐 */
       /* 保持原padding大小 */
     }
 
@@ -114,8 +113,7 @@
       border-radius: 0.375rem;
       box-shadow: 
         inset 0 3px 6px 0 rgba(0, 0, 0, 0.08), /* 更强的内阴影，增强凹陷感 */
-        inset 0 0 0 1px rgba(255, 255, 255, 0.8), /* 内边缘高光 */
-        0 1px 3px 0 rgba(0, 0, 0, 0.1); /* 轻微外阴影 */
+        inset 0 0 0 1px rgba(255, 255, 255, 0.8); /* 内边缘高光，增强一体感 */
       background: #f1f5f9; /* 稍微深一点的背景，强调状态变化 */
       border: 1px solid #cbd5e1; /* 保持一致的边框 */
       

src/app/components/sticky-header/sticky-header.component.ts

@@ -12,10 +12,17 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
   styleUrl: './sticky-header.component.scss'
 })
 export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
-  constructor(
+   constructor(
     private renderer: Renderer2,
     private elementRef: ElementRef
   ) {}
+  
+  // 滚动优化相关属性
+  private scrollRafId: number | null = null;
+  private lastScrollTop = 0;
+  private lastIsLocked = false;
+  private lastIsCompact = false;
+  
   /** 标题文本 */
   @Input() title = '';
   
@@ -85,6 +92,9 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
   /** 锁定时的左侧偏移（像素） */
   @Input() headerLeft: string | number | null = null;
 
+  /** 宽度参考目标选择器（用于锁定状态宽度匹配），如未设置则使用滚动容器 */
+  @Input() widthTarget: string | null = null;
+
   /** 按钮点击事件 */
   @Output() buttonClick = new EventEmitter<void>();
 
@@ -105,8 +115,12 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
+   ngOnDestroy() {
     this.cleanupScrollListener();
+    if (this.scrollRafId) {
+      cancelAnimationFrame(this.scrollRafId);
+      this.scrollRafId = null;
+    }
   }
 
   private setupAutoScrollDetection() {
@@ -116,9 +130,13 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     const container = this.getScrollContainer();
     const isWindowScroll = this.scrollContainer === 'window';
     
-    if (isWindowScroll) {
+     if (isWindowScroll) {
       // 窗口滚动
       this.canScroll = this.checkWindowScrollable();
+      const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight || 0;
+      const clientHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+      
+      console.log(`sticky-header: 窗口滚动性检查 - scrollHeight: ${scrollHeight}, clientHeight: ${clientHeight}, canScroll: ${this.canScroll}`);
       
       if (this.canScroll) {
         this.scrollListener = this.renderer.listen(
@@ -131,13 +149,18 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
         // 初始检查窗口滚动位置
         this.checkInitialWindowScrollPosition();
       } else {
-        console.log('sticky-header: 窗口内容不足，禁用自动检测');
+        console.log('sticky-header: 窗口内容不足，禁用自动检测，设置isLocked=false, isCompact=false');
         this.isLocked = false;
         this.isCompact = false;
+        this.isScrolled = false;
       }
-    } else if (container) {
+     } else if (container) {
       // 容器滚动
       this.canScroll = this.checkScrollable(container);
+      const scrollHeight = container.scrollHeight || 0;
+      const clientHeight = container.clientHeight || 0;
+      
+      console.log(`sticky-header: 容器滚动性检查 - scrollHeight: ${scrollHeight}, clientHeight: ${clientHeight}, canScroll: ${this.canScroll}, selector: ${this.scrollContainer}`);
       
       if (this.canScroll) {
         this.scrollListener = this.renderer.listen(
@@ -150,10 +173,11 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
         // 初始检查滚动位置
         this.checkInitialScrollPosition(container);
       } else {
-        console.log('sticky-header: 滚动容器内容不足，禁用自动检测');
+        console.log('sticky-header: 滚动容器内容不足，禁用自动检测，设置isLocked=false, isCompact=false');
         // 确保状态为false
         this.isLocked = false;
         this.isCompact = false;
+        this.isScrolled = false;
       }
     } else {
       console.warn('sticky-header: 未找到滚动容器:', this.scrollContainer);
@@ -187,7 +211,7 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     return canScroll;
   }
 
-  private checkWindowScrollable(): boolean {
+   private checkWindowScrollable(): boolean {
     const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight || 0;
     const clientHeight = window.innerHeight || document.documentElement.clientHeight || 0;
     
@@ -195,78 +219,270 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     return canScroll;
   }
 
-  private handleWindowScroll() {
-    // 如果窗口不可滚动，不处理滚动事件
-    if (!this.canScroll) return;
+   private findContentContainer(): HTMLElement | null {
+    // 尝试查找内容区域容器，优先级：
+    // 1. .content-area 类 (我们在app.component.html中添加的)
+    // 2. 包含router-outlet的容器
+    // 3. 右侧内容区域
+    const selectors = [
+      '.content-area',
+      '.flex-1.overflow-auto',
+      'div[class*="content"]',
+      'div[class*="main"]',
+      'div[class*="container"]'
+    ];
     
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || 0;
+    for (const selector of selectors) {
+      const container = document.querySelector(selector) as HTMLElement;
+      if (container) {
+        console.log(`sticky-header: 找到内容容器: ${selector}, 位置: ${container.getBoundingClientRect().left}px, 宽度: ${container.getBoundingClientRect().width}px`);
+        return container;
+      }
+    }
     
-    // 更新滚动状态
-    this.isScrolled = scrollTop > this.scrollThreshold;
-    this.isLocked = scrollTop > this.scrollThreshold;
-    this.isCompact = scrollTop > this.compactThreshold;
+    console.warn('sticky-header: 未找到内容容器');
+    return null;
+  }
+
+  private getWidthTargetElement(): HTMLElement | null {
+    // 如果设置了widthTarget，优先使用它
+    if (this.widthTarget) {
+      const target = document.querySelector(this.widthTarget) as HTMLElement;
+      if (target) {
+        console.log(`sticky-header: 找到宽度目标元素: ${this.widthTarget}, 宽度: ${target.getBoundingClientRect().width}px`);
+        return target;
+      }
+      console.warn(`sticky-header: 未找到宽度目标元素: ${this.widthTarget}`);
+    }
     
-    // 设置宽度匹配容器
-    if (this.isLocked) {
-      // 对于窗口滚动，使用整个视口宽度
-      this.headerWidth = '100%';
-      this.headerLeft = 0;
+    // 否则根据滚动容器类型返回相应元素
+    if (this.scrollContainer === 'window') {
+      return this.findContentContainer();
     } else {
-      this.headerWidth = null;
-      this.headerLeft = null;
+      const container = this.getScrollContainer();
+      return container;
     }
   }
 
-  private checkInitialWindowScrollPosition() {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || 0;
-    this.isScrolled = scrollTop > this.scrollThreshold;
-    this.isLocked = scrollTop > this.scrollThreshold;
-    this.isCompact = scrollTop > this.compactThreshold;
+  private getSidebarWidth(): number {
+    // 从localStorage读取侧边栏宽度，默认320px
+    try {
+      const savedWidth = localStorage.getItem('sidebarWidth');
+      if (savedWidth) {
+        const width = parseInt(savedWidth, 10);
+        if (!isNaN(width) && width >= 200 && width <= 600) {
+          return width;
+        }
+      }
+    } catch (e) {
+      console.warn('sticky-header: 读取侧边栏宽度失败', e);
+    }
+    return 320; // 默认宽度
+  }
+
+    private handleWindowScroll() {
+    // 如果窗口不可滚动，不处理滚动事件
+    if (!this.canScroll) {
+      console.log('sticky-header: 窗口不可滚动，跳过处理');
+      return;
+    }
     
-    if (this.isLocked) {
-      this.headerWidth = '100%';
-      this.headerLeft = 0;
+    // 使用requestAnimationFrame防抖，避免频繁更新
+    if (this.scrollRafId) {
+      cancelAnimationFrame(this.scrollRafId);
     }
     
-    console.log(`sticky-header: 初始窗口滚动位置检查: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}`);
+    this.scrollRafId = requestAnimationFrame(() => {
+      this.scrollRafId = null;
+      
+      const scrollTop = window.scrollY || document.documentElement.scrollTop || 0;
+      
+      // 检查滚动位置是否显著变化，避免微小滚动触发状态更新
+      const scrollDelta = Math.abs(scrollTop - this.lastScrollTop);
+      if (scrollDelta < 1) { // 小于1像素的变化忽略
+        return;
+      }
+      
+      this.lastScrollTop = scrollTop;
+      
+      // 计算新状态
+      const newIsScrolled = scrollTop > this.scrollThreshold;
+      const newIsLocked = scrollTop > this.scrollThreshold;
+      const newIsCompact = scrollTop > this.compactThreshold;
+      
+      // 检查状态是否真正变化，避免不必要更新
+      const stateChanged = 
+        newIsLocked !== this.lastIsLocked || 
+        newIsCompact !== this.lastIsCompact ||
+        newIsScrolled !== this.isScrolled;
+      
+      if (!stateChanged) {
+        console.log(`sticky-header: 滚动位置变化但状态未变，scrollTop=${scrollTop}, isLocked=${newIsLocked}, isCompact=${newIsCompact}`);
+        return;
+      }
+      
+      this.lastIsLocked = newIsLocked;
+      this.lastIsCompact = newIsCompact;
+      
+      // 更新滚动状态
+      this.isScrolled = newIsScrolled;
+      this.isLocked = newIsLocked;
+      this.isCompact = newIsCompact;
+      
+      console.log(`sticky-header: 滚动状态更新，scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}`);
+      
+      // 设置宽度匹配容器
+      if (this.isLocked) {
+        // 使用宽度目标元素计算宽度
+        const widthTargetElement = this.getWidthTargetElement();
+        if (widthTargetElement) {
+          const rect = widthTargetElement.getBoundingClientRect();
+          this.headerWidth = rect.width;
+          this.headerLeft = rect.left;
+          console.log(`sticky-header: 窗口滚动锁定，目标宽度: ${rect.width}px, 左侧位置: ${rect.left}px, 目标元素: ${this.widthTarget || '默认'}`);
+        } else {
+          // 回退：使用视口宽度减去实际侧边栏宽度
+          const sidebarWidth = this.getSidebarWidth();
+          this.headerWidth = `calc(100% - ${sidebarWidth}px)`;
+          this.headerLeft = sidebarWidth;
+          console.log(`sticky-header: 未找到宽度目标元素，使用回退宽度: ${this.headerWidth}, 侧边栏宽度: ${sidebarWidth}px`);
+        }
+      } else {
+        this.headerWidth = null;
+        this.headerLeft = null;
+      }
+    });
   }
 
-  private handleScroll(event: Event) {
-    // 如果容器不可滚动，不处理滚动事件
-    if (!this.canScroll) return;
-    
-    const container = event.target as HTMLElement;
-    const scrollTop = container.scrollTop || 0;
+    private checkInitialWindowScrollPosition() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop || 0;
+    this.lastScrollTop = scrollTop;
     
-    // 更新滚动状态
     this.isScrolled = scrollTop > this.scrollThreshold;
     this.isLocked = scrollTop > this.scrollThreshold;
     this.isCompact = scrollTop > this.compactThreshold;
     
-    // 设置宽度匹配容器
+    // 记录初始状态
+    this.lastIsLocked = this.isLocked;
+    this.lastIsCompact = this.isCompact;
+    
     if (this.isLocked) {
-      const rect = container.getBoundingClientRect();
-      this.headerWidth = rect.width;
-      this.headerLeft = rect.left;
+      // 使用宽度目标元素计算宽度
+      const widthTargetElement = this.getWidthTargetElement();
+      if (widthTargetElement) {
+        const rect = widthTargetElement.getBoundingClientRect();
+        this.headerWidth = rect.width;
+        this.headerLeft = rect.left;
+        console.log(`sticky-header: 初始窗口滚动位置检查: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}, 目标宽度: ${rect.width}px, 目标元素: ${this.widthTarget || '默认'}`);
+      } else {
+        // 回退：使用视口宽度减去实际侧边栏宽度
+        const sidebarWidth = this.getSidebarWidth();
+        this.headerWidth = `calc(100% - ${sidebarWidth}px)`;
+        this.headerLeft = sidebarWidth;
+        console.log(`sticky-header: 初始窗口滚动位置检查: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}, 使用回退宽度`);
+      }
     } else {
       this.headerWidth = null;
       this.headerLeft = null;
     }
+    
+    console.log(`sticky-header: 初始窗口滚动位置检查完成: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}, canScroll=${this.canScroll}`);
   }
 
-  private checkInitialScrollPosition(container: HTMLElement) {
+   private handleScroll(event: Event) {
+    // 如果容器不可滚动，不处理滚动事件
+    if (!this.canScroll) {
+      console.log('sticky-header: 容器不可滚动，跳过处理');
+      return;
+    }
+    
+    // 使用requestAnimationFrame防抖，避免频繁更新
+    if (this.scrollRafId) {
+      cancelAnimationFrame(this.scrollRafId);
+    }
+    
+    this.scrollRafId = requestAnimationFrame(() => {
+      this.scrollRafId = null;
+      
+      const container = event.target as HTMLElement;
+      const scrollTop = container.scrollTop || 0;
+      
+      // 检查滚动位置是否显著变化，避免微小滚动触发状态更新
+      const scrollDelta = Math.abs(scrollTop - this.lastScrollTop);
+      if (scrollDelta < 1) { // 小于1像素的变化忽略
+        return;
+      }
+      
+      this.lastScrollTop = scrollTop;
+      
+      // 计算新状态
+      const newIsScrolled = scrollTop > this.scrollThreshold;
+      const newIsLocked = scrollTop > this.scrollThreshold;
+      const newIsCompact = scrollTop > this.compactThreshold;
+      
+      // 检查状态是否真正变化，避免不必要更新
+      const stateChanged = 
+        newIsLocked !== this.lastIsLocked || 
+        newIsCompact !== this.lastIsCompact ||
+        newIsScrolled !== this.isScrolled;
+      
+      if (!stateChanged) {
+        console.log(`sticky-header: 容器滚动位置变化但状态未变，scrollTop=${scrollTop}, isLocked=${newIsLocked}, isCompact=${newIsCompact}`);
+        return;
+      }
+      
+      this.lastIsLocked = newIsLocked;
+      this.lastIsCompact = newIsCompact;
+      
+      // 更新滚动状态
+      this.isScrolled = newIsScrolled;
+      this.isLocked = newIsLocked;
+      this.isCompact = newIsCompact;
+      
+      console.log(`sticky-header: 容器滚动状态更新，scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}`);
+      
+      // 设置宽度匹配容器
+      if (this.isLocked) {
+        // 优先使用宽度目标元素，否则使用滚动容器
+        const widthTargetElement = this.getWidthTargetElement();
+        const targetElement = widthTargetElement || container;
+        const rect = targetElement.getBoundingClientRect();
+        this.headerWidth = rect.width;
+        this.headerLeft = rect.left;
+        console.log(`sticky-header: 容器滚动锁定，目标宽度: ${rect.width}px, 左侧位置: ${rect.left}px, 目标元素: ${widthTargetElement ? (this.widthTarget || '默认') : '滚动容器'}`);
+      } else {
+        this.headerWidth = null;
+        this.headerLeft = null;
+      }
+    });
+  }
+
+   private checkInitialScrollPosition(container: HTMLElement) {
     const scrollTop = container.scrollTop || 0;
+    this.lastScrollTop = scrollTop;
+    
     this.isScrolled = scrollTop > this.scrollThreshold;
     this.isLocked = scrollTop > this.scrollThreshold;
     this.isCompact = scrollTop > this.compactThreshold;
     
+    // 记录初始状态
+    this.lastIsLocked = this.isLocked;
+    this.lastIsCompact = this.isCompact;
+    
     if (this.isLocked) {
-      const rect = container.getBoundingClientRect();
+      // 优先使用宽度目标元素，否则使用滚动容器
+      const widthTargetElement = this.getWidthTargetElement();
+      const targetElement = widthTargetElement || container;
+      const rect = targetElement.getBoundingClientRect();
       this.headerWidth = rect.width;
       this.headerLeft = rect.left;
+      console.log(`sticky-header: 初始容器滚动位置检查: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}, 目标宽度: ${rect.width}px, 目标元素: ${widthTargetElement ? (this.widthTarget || '默认') : '滚动容器'}`);
+    } else {
+      this.headerWidth = null;
+      this.headerLeft = null;
     }
     
-    console.log(`sticky-header: 初始滚动位置检查: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}`);
+    console.log(`sticky-header: 初始容器滚动位置检查完成: scrollTop=${scrollTop}, isLocked=${this.isLocked}, isCompact=${this.isCompact}, canScroll=${this.canScroll}`);
   }
 
   private cleanupScrollListener() {

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

@@ -1,4 +1,4 @@
-<div class="h-full flex flex-col p-4 min-w-0">
+<div class="h-full flex flex-col p-2 min-w-0">
   <!-- 顶部标题区域 -->
   <app-sticky-header
     [title]="title"
@@ -16,17 +16,18 @@
     [debugRegisterUrl]="debugInfo.registerUrl"
     [debugListUrl]="debugInfo.listUrl"
     [autoDetect]="true"
-    [scrollContainer]="'.content-area'"
-    [scrollThreshold]="10"
-    [compactThreshold]="50"
+      [scrollContainer]="'.content-area'"
+     [scrollThreshold]="20"
+    [compactThreshold]="80"
+    [widthTarget]="'#matCard'"
     (buttonClick)="onRegister()"
   ></app-sticky-header>
    
-      <mat-card #matCard class="flex-1">
+      <mat-card #matCard id="matCard" class="flex-1">
     <mat-card-content>
         <!-- AG Grid组件 -->
         <ag-grid-angular
-          class="ag-theme-alpine h-[calc(100vh-180px)]"
+           class="ag-theme-alpine h-[800px]"
           [columnDefs]="columnDefs"
           [rowModelType]="'infinite'"
           [datasource]="datasource"
@@ -34,7 +35,7 @@
           [paginationPageSize]="paginationPageSize"
           [cacheBlockSize]="paginationPageSize"
           [maxBlocksInCache]="10"
-          [domLayout]="'normal'"
+            [domLayout]="'normal'"
           [rowSelection]="'single'"
           (gridReady)="onGridReady($event)">
         </ag-grid-angular>

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

@@ -44,7 +44,7 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
    configMetaList: ConfigMeta[] = [];
 
    // 分页配置
-  paginationPageSize = 10;
+   paginationPageSize = 100;
   currentPage = 1;
   totalRecords = 0;
   gridApi: GridApi | null = null;
@@ -137,66 +137,123 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
     });
   }
 
-   createInfiniteDatasource(): IDatasource {
-     return {
-       getRows: (params: IGetRowsParams) => {
-         const pageSize = this.paginationPageSize;
-         const startRow = params.startRow;
-         const page = Math.floor(startRow / pageSize);
-         
-         const request: ConfigMetaQueryRequest = {
-           page: page,
-           pageSize: pageSize
-         };
-         
-         console.log(`Infinite row model: startRow=${startRow}, endRow=${params.endRow}, page=${page}, pageSize=${pageSize}`);
-         
-         this.loading = true;
-         this.configMetaService.listConfigMetaPaginated(request).subscribe({
-           next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
-             this.loading = false;
-             if (result.success && result.data) {
-               const rowData = result.data;
-               const totalCount = result.totalCount || 0;
-               
-               // 成功回调，提供行数据及总行数
-               // 对于无限行模型，需要传递 rowCount（总行数）以便网格知道何时停止加载
-               const lastRow = totalCount > 0 ? totalCount : -1;
-               params.successCallback(rowData, lastRow);
-               
-               // 更新调试信息
-               this.debugInfo.dataSource = 'API数据';
-               this.debugInfo.recordCount = totalCount;
-               this.debugInfo.lastUpdated = new Date().toISOString();
-               this.debugInfo.useMockData = false;
-               this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
-               this.debugInfo.listUrl = this.configMetaService.getListUrl();
-               this.debugInfo.currentPage = page + 1;
-               this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
-               this.debugInfo.pageSize = pageSize;
-               
-               console.log(`无限行模型数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
-               
-               // 更新组件状态
-               this.totalRecords = totalCount;
-               this.rowData = rowData;
-               this.configMetaList = rowData;
-             } else {
-               console.error('无限行模型数据加载失败:', result);
-               params.failCallback();
-             }
-             this.cdRef.detectChanges();
-           },
-           error: (error: HttpErrorResponse) => {
-             this.loading = false;
-             console.error('无限行模型加载数据时出错:', error);
-             params.failCallback();
-             this.cdRef.detectChanges();
-           }
-         });
-       },
-       rowCount: undefined // 初始时不知道总行数，将在第一次加载后由successCallback提供
-     };
+    private generateMockData(page: number, pageSize: number): { data: any[], totalCount: number } {
+      const totalMockCount = 200;
+      const startIndex = page * pageSize;
+      const endIndex = Math.min(startIndex + pageSize, totalMockCount);
+      
+      const mockData = [];
+      for (let i = startIndex; i < endIndex; i++) {
+        mockData.push({
+          id: i + 1,
+          configName: `配置${i + 1}`,
+          fieldName: `field_${i + 1}`,
+          fieldType: i % 3 === 0 ? 'string' : i % 3 === 1 ? 'number' : 'boolean',
+          yamlName: `yaml_${i + 1}`,
+          fieldDesc: `这是第${i + 1}个配置字段的描述`,
+          creator: `用户${(i % 5) + 1}`,
+          createdAt: new Date(Date.now() - i * 86400000).toISOString()
+        });
+      }
+      
+      return {
+        data: mockData,
+        totalCount: totalMockCount
+      };
+    }
+
+    createInfiniteDatasource(): IDatasource {
+      return {
+        getRows: (params: IGetRowsParams) => {
+          const pageSize = this.paginationPageSize;
+          const startRow = params.startRow;
+          const page = Math.floor(startRow / pageSize);
+          
+          console.log(`Infinite row model: startRow=${startRow}, endRow=${params.endRow}, page=${page}, pageSize=${pageSize}`);
+          
+          // 使用模拟数据或真实API
+          if (this.debugInfo.useMockData) {
+            this.loading = true;
+            setTimeout(() => {
+              const mockResult = this.generateMockData(page, pageSize);
+              const rowData = mockResult.data;
+              const totalCount = mockResult.totalCount;
+              
+              const lastRow = totalCount > 0 ? totalCount : -1;
+              params.successCallback(rowData, lastRow);
+              
+              // 更新调试信息
+              this.debugInfo.dataSource = '模拟数据';
+              this.debugInfo.recordCount = totalCount;
+              this.debugInfo.lastUpdated = new Date().toISOString();
+              this.debugInfo.registerUrl = '模拟数据 - 无API调用';
+              this.debugInfo.listUrl = '模拟数据 - 无API调用';
+              this.debugInfo.currentPage = page + 1;
+              this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
+              this.debugInfo.pageSize = pageSize;
+              
+              console.log(`模拟数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
+              
+              // 更新组件状态
+              this.totalRecords = totalCount;
+              this.rowData = rowData;
+              this.configMetaList = rowData;
+              this.loading = false;
+              this.cdRef.detectChanges();
+            }, 100);
+          } else {
+            const request: ConfigMetaQueryRequest = {
+              page: page,
+              pageSize: pageSize
+            };
+            
+            this.loading = true;
+            this.configMetaService.listConfigMetaPaginated(request).subscribe({
+              next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
+                this.loading = false;
+                if (result.success && result.data) {
+                  const rowData = result.data;
+                  const totalCount = result.totalCount || 0;
+                  
+                  // 成功回调，提供行数据及总行数
+                  // 对于无限行模型，需要传递 rowCount（总行数）以便网格知道何时停止加载
+                  const lastRow = totalCount > 0 ? totalCount : -1;
+                  params.successCallback(rowData, lastRow);
+                  
+                  // 更新调试信息
+                  this.debugInfo.dataSource = 'API数据';
+                  this.debugInfo.recordCount = totalCount;
+                  this.debugInfo.lastUpdated = new Date().toISOString();
+                  this.debugInfo.useMockData = false;
+                  this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
+                  this.debugInfo.listUrl = this.configMetaService.getListUrl();
+                  this.debugInfo.currentPage = page + 1;
+                  this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
+                  this.debugInfo.pageSize = pageSize;
+                  
+                  console.log(`无限行模型数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
+                  
+                  // 更新组件状态
+                  this.totalRecords = totalCount;
+                  this.rowData = rowData;
+                  this.configMetaList = rowData;
+                } else {
+                  console.error('无限行模型数据加载失败:', result);
+                  params.failCallback();
+                }
+                this.cdRef.detectChanges();
+              },
+              error: (error: HttpErrorResponse) => {
+                this.loading = false;
+                console.error('无限行模型加载数据时出错:', error);
+                params.failCallback();
+                this.cdRef.detectChanges();
+              }
+            });
+          }
+        },
+        rowCount: undefined // 初始时不知道总行数，将在第一次加载后由successCallback提供
+      };
    }
 
      onGridReady(params: GridReadyEvent) {
@@ -253,6 +310,9 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
     console.log('ServiceRegisterConfigComponent view initialized');
     // 注意：滚动检测现在由 sticky-header 组件自动处理
     // 通过 [autoDetect]="true" 启用
+    
+    // 启用模拟数据用于测试滚动效果
+    this.debugInfo.useMockData = true;
   }
 
 

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

@@ -1,14 +1,19 @@
 <div class="h-full flex flex-col p-4 min-w-0">
-  <div class="flex justify-between items-center mb-6">
-    <h1 class="text-2xl font-bold">租户管理</h1>
-    <button mat-raised-button color="primary" (click)="openAddDialog()">
-      <mat-icon>add</mat-icon>
-      新增租户
-    </button>
-  </div>
+   <app-sticky-header
+    [title]="'租户管理'"
+    [buttonText]="'新增租户'"
+    [buttonIcon]="'add'"
+    [buttonColor]="'primary'"
+    [autoDetect]="true"
+    [scrollContainer]="'.content-area'"
+     [scrollThreshold]="20"
+    [compactThreshold]="80"
+    [widthTarget]="'#tenantMatCard'"
+    (buttonClick)="openAddDialog()">
+  </app-sticky-header>
 
-  <mat-card class="flex-1">
-    <mat-card-content>
+   <mat-card id="tenantMatCard" class="h-[400px]">
+     <mat-card-content class="overflow-auto">
       <table mat-table [dataSource]="tenants" class="w-full">
         <!-- ID列 -->
         <ng-container matColumnDef="id">

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

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