折叠工具条正常，按钮正常

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

@@ -1,8 +1,51 @@
 <div class="sticky-header" role="banner" aria-label="Page header">
   <div class="toolbar-area">
-    <ng-content select="[toolbar]"></ng-content>
+    @if (title || buttons.length > 0) {
+      <div class="builtin-toolbar">
+        @if (title) {
+          <div class="title-section">
+            <mat-icon class="title-icon">{{ titleIcon }}</mat-icon>
+            <h1 class="title-text">{{ title }}</h1>
+          </div>
+        }
+        
+        @if (buttons.length > 0) {
+          <div class="buttons-area">
+            <button *ngFor="let btn of buttons"
+                    mat-button
+                    [color]="btn.color || 'primary'"
+                    [disabled]="btn.disabled"
+                    (click)="onButtonClick(btn.name)">
+              <mat-icon *ngIf="btn.icon">{{ btn.icon }}</mat-icon>
+              <span>{{ btn.title }}</span>
+              <mat-spinner *ngIf="btn.loading" diameter="16"></mat-spinner>
+            </button>
+          </div>
+        }
+      </div>
+    }
+    @else {
+      <ng-content select="[toolbar]"></ng-content>
+    }
   </div>
+  
   <div class="hint-area">
-    <ng-content select="[hint]"></ng-content>
+    @if (hintText || dynamicContents.length > 0) {
+      <div class="builtin-hint">
+        @if (hintText) {
+          <div class="hint-text">{{ hintText }}</div>
+        }
+        
+        <div *ngFor="let item of dynamicContents" 
+             class="dynamic-content"
+             [class]="item.style || 'hint'"
+             [class.custom]="item.customClass">
+          {{ item.content }}
+        </div>
+      </div>
+    }
+    @else {
+      <ng-content select="[hint]"></ng-content>
+    }
   </div>
 </div>

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

@@ -1,35 +1,92 @@
-/* Sticky Header 组件样式 - 密封、开箱即用 */
-/* 组件分为三部分：.sticky-header（容器）、.toolbar-area（工具条）、.hint-area（提示区） */
+// .sticky-header {
+//   /* 左右间距 */
+//   padding-left: 16px;
+//   padding-right: 16px;
+// }
+/* ==================== 工具条容器 ==================== */
+/* 保持原有的容器样式不变，只在内部调整布局 */
+.builtin-toolbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
 
-/* ==================== 主容器 ==================== */
-/* 使用 position: sticky 实现固定效果 */
-/* 注意：祖先元素不能有 overflow: hidden、overflow: clip 或 overflow: auto 破坏 sticky 定位 */
-.sticky-header {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+/* ==================== 标题区域 ==================== */
+/* 标题区域靠左显示，占据可用空间 */
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1; /* 占据剩余空间 */
+  min-width: 0; /* 允许文本截断 */
+  
+  .title-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: #666;
+    flex-shrink: 0;
+  }
+  
+  .title-text {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
-/* ==================== 工具条区域 ==================== */
-/* 用于放置标题、按钮等主要操作控件 */
-/* 使用 min-height 而非固定高度，确保内容灵活 */
+/* ==================== 按钮区域 ==================== */
+/* 按钮区域靠右显示，不换行 */
+.buttons-area {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0; /* 防止按钮区域被压缩 */
+  
+  button {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap; /* 按钮文本不换行 */
+    
+    mat-spinner {
+      margin-left: 4px;
+    }
+  }
+}
+
+/* ==================== 工具条区域保持原有样式 ==================== */
 .toolbar-area {
   min-height: 48px;  /* 最小高度，可根据内容扩展 */
   display: flex;
   align-items: center;
   padding: 0 16px;
+  border-left: 1px solid #e0e0e0; /* 边框颜色 */
+  border-right: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
+  
+  /* 确保内容垂直居中 */
+  .builtin-toolbar {
+    align-items: center;
+  }
 }
 
-/* ==================== 提示区域 ==================== */
-/* 用于放置提示信息、调试信息等次要内容 */
-/* 滚动超过阈值时会折叠此区域 */
+/* ==================== 提示区域保持原有样式 ==================== */
 .hint-area {
-  height: 60px;  /* 固定高度，用于折叠动画计算 */
+  white-space: pre-line; /* 关键：支持 \n 换行符 */
+  line-height: 1.5;
+  margin: 0;
+  /* 移除固定高度，改为自动 */
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  // height: 60px;  /* 固定高度，用于折叠动画计算 */
   padding: 8px 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #e0e0e0;
   background: #f8f9fa;
   overflow: hidden;
   transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
@@ -37,8 +94,6 @@
               padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* ==================== 折叠状态 ==================== */
-/* 当滚动超过阈值时应用的样式 */
 .hint-area.collapsed {
   height: 0;
   padding-top: 0;
@@ -46,31 +101,65 @@
   opacity: 0;
 }
 
-/* Responsive adjustments */
+/* ==================== 响应式调整 ==================== */
 @media (max-width: 768px) {
   .toolbar-area {
-    height: 40px;
+    min-height: 40px;
+    padding: 0 12px;
   }
   
   .hint-area {
     height: 48px;
+    padding: 8px 12px;
   }
   
-  .hint-area.collapsed {
-    height: 0;
+  .builtin-toolbar {
+    gap: 8px;
   }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .sticky-header {
-    border-bottom: 2px solid currentColor;
+  
+  .title-section {
+    .title-text {
+      font-size: 16px;
+      max-width: 200px; /* 小屏幕时限制标题宽度 */
+    }
+    
+    .title-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+  
+  .buttons-area {
+    gap: 4px;
+    
+    button {
+      min-width: auto;
+      padding: 0 8px;
+      
+      span {
+        display: inline-block; /* 保持文本显示 */
+        font-size: 14px;
+      }
+    }
   }
 }
 
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .hint-area {
-    transition: none;
+/* 超小屏幕的进一步优化 */
+@media (max-width: 480px) {
+  .title-section {
+    .title-text {
+      max-width: 150px; /* 更小的标题宽度 */
+    }
+  }
+  
+  .buttons-area {
+    button {
+      padding: 0 4px;
+      
+      span {
+        font-size: 12px;
+      }
+    }
   }
 }

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

@@ -1,10 +1,23 @@
 import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ElementRef, AfterViewInit, NgZone } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+export interface StickyHeaderButton {
+  title: string;           // 按钮文本
+  name: string;           // 按钮标识（用于事件区分）
+  icon?: string;          // Material 图标名称
+  color?: 'primary' | 'accent' | 'warn'; // 按钮颜色
+  disabled?: boolean;     // 禁用状态
+  loading?: boolean;      // 加载状态
+  action?: () => void;    // 按钮点击处理函数（可选）
+}
 
 @Component({
   selector: 'app-sticky-header',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
   templateUrl: './sticky-header.component.html',
   styleUrl: './sticky-header.component.scss'
 })
@@ -18,15 +31,60 @@ export class StickyHeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   /** Emits scroll ratio (0-1) on scroll */
   @Output() scrollRatioChange = new EventEmitter<number>();
 
+  /** 标题文本 */
+  @Input() title = '';
+  /** 标题图标，默认 'description' */
+  @Input() titleIcon = 'description';
+  /** 提示文本（支持 \\n 换行） */
+  @Input() hintText = '';
+  /** 按钮配置数组 */
+  @Input() buttons: StickyHeaderButton[] = [];
+  /** 按钮点击事件 */
+  @Output() buttonAction = new EventEmitter<string>();
+
   private scrollListener?: () => void;
   private scrollContainerElement?: HTMLElement | Window;
   private isCollapsed = false;
+  /** 动态添加的内容（内部存储） */
+  private _dynamicContents: Array<{id: number, content: string, style?: string, customClass?: string}> = [];
+
+  /** 获取动态添加的内容（只读） */
+  get dynamicContents() {
+    return this._dynamicContents;
+  }
 
   constructor(
     private elementRef: ElementRef,
     private ngZone: NgZone
   ) {}
 
+  /** 按钮点击处理 */
+  onButtonClick(name: string) {
+    const button = this.buttons.find(b => b.name === name);
+    if (button && !button.disabled && !button.loading) {
+      // 优先执行按钮的 action 函数（如果存在）
+      if (button.action) {
+        button.action();
+      }
+      // 同时发射事件，保持向后兼容
+      this.buttonAction.emit(name);
+    }
+  }
+
+  /** 动态添加内容 */
+  add(index: number, content: string, style?: string, customClass?: string): void {
+    const existingIndex = this._dynamicContents.findIndex(item => item.id === index);
+    const newItem = { id: index, content, style, customClass };
+    
+    if (existingIndex >= 0) {
+      this._dynamicContents[existingIndex] = newItem;
+    } else {
+      this._dynamicContents.push(newItem);
+      // 按id排序
+      this._dynamicContents.sort((a, b) => a.id - b.id);
+    }
+  }
+
   ngOnInit() {}
 
   ngAfterViewInit() {