缩放改好-修改样式1

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

@@ -1,4 +1,4 @@
-<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [class.locked]="isLocked" [class.compact]="isCompact" [ngStyle]="isLocked ? {
+<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [style.min-height]="headerHeight" [class.locked]="isLocked" [class.compact]="isCompact" [ngStyle]="isLocked ? {
   width: headerWidth ? (typeof headerWidth === 'number' ? headerWidth + 'px' : headerWidth) : null,
   left: headerLeft ? (typeof headerLeft === 'number' ? headerLeft + 'px' : headerLeft) : null
 } : null">

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

@@ -11,6 +11,9 @@
   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; /* 简洁的灰白色背景 */
@@ -22,6 +25,9 @@
       0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 轻微外阴影，保持与页面融合 */
     transition: all 0.3s ease-in-out;
     /* 移除 overflow: hidden，防止内容裁剪 */
+    height: 100%; /* 填充父容器高度 */
+    min-height: 100%; /* 确保填充最小高度 */
+    flex: 1; /* 填充可用空间 */
   }
 
   .header-title {
@@ -72,6 +78,9 @@
       border: 1px solid #cbd5e1;
       margin: 1rem; /* 添加外边距，避免贴边 */
       /* 保持原padding大小 */
+      height: 100%; /* 填充父容器高度 */
+      min-height: 100%; /* 确保填充最小高度 */
+      flex: 1; /* 填充可用空间 */
     }
 
     .header-title {
@@ -118,6 +127,9 @@
         0 1px 3px 0 rgba(0, 0, 0, 0.1); /* 轻微外阴影 */
       background: #f1f5f9; /* 稍微深一点的背景，强调状态变化 */
       border: 1px solid #cbd5e1; /* 保持一致的边框 */
+      height: 100%; /* 填充父容器高度 */
+      min-height: 100%; /* 确保填充最小高度 */
+      flex: 1; /* 填充可用空间 */
       
       > div:first-child {
         padding-top: 0.375rem;

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

@@ -16,6 +16,13 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     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,12 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
   /** 锁定时的左侧偏移（像素） */
   @Input() headerLeft: string | number | null = null;
 
+  /** 宽度参考目标选择器（用于锁定状态宽度匹配），如未设置则使用滚动容器 */
+  @Input() widthTarget: string | null = null;
+
+  /** 标题区域最小高度（用于测试或固定高度布局），如 '200px', '10rem'，未设置则由内容决定 */
+  @Input() headerHeight: string | null = null;
+
   /** 按钮点击事件 */
   @Output() buttonClick = new EventEmitter<void>();
 
@@ -105,11 +118,15 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
+   ngOnDestroy() {
     this.cleanupScrollListener();
+    if (this.scrollRafId) {
+      cancelAnimationFrame(this.scrollRafId);
+      this.scrollRafId = null;
+    }
   }
 
-  private setupAutoScrollDetection() {
+   private setupAutoScrollDetection() {
     if (this.isAutoDetecting) return;
     
     this.isAutoDetecting = true;
@@ -119,6 +136,10 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
     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 +152,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) {
       // 容器滚动
       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 +176,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 +214,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 +222,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 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) {
+   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() {