ng-configure/src/app/components/sticky-header/sticky-header.component.html

<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">
  <!-- 主标题区域 -->
  <div class="header-content bg-white rounded-lg border border-gray-200 shadow-sm transition-all duration-300">
    <div class="flex justify-between items-center p-4 transition-all duration-300">
      <h1 class="header-title text-2xl font-bold transition-all duration-300">{{ title }}</h1>
      <button 
        mat-raised-button 
        [color]="buttonColor" 
        (click)="onButtonClick()" 
        [disabled]="disabled || loading"
        class="flex items-center gap-2"
      >
        <mat-icon *ngIf="!loading">{{ buttonIcon }}</mat-icon>
        <mat-progress-spinner 
          *ngIf="loading" 
          diameter="20" 
          mode="indeterminate" 
          class="inline-block"
        ></mat-progress-spinner>
        {{ loading ? '处理中...' : buttonText }}
       </button>
    </div>
    
    <!-- 提示信息 -->
    @if (hintText) {
      <div class="hint-section border-t border-gray-100 p-3 bg-blue-50/30 transition-all duration-300 overflow-hidden">
        <p class="text-sm text-gray-600 m-0 transition-all duration-300">{{ hintText }}</p>
      </div>
    }
    
    <!-- 调试信息区域 -->
    @if (showDebugInfo && (debugDataSource || debugRegisterUrl || debugListUrl)) {
      <div class="debug-section border-t border-gray-100 overflow-hidden">
        <!-- 数据源信息 -->
        @if (debugDataSource) {
          <div class="debug-info text-xs text-gray-500 p-2 bg-gray-50 transition-all duration-300">
            <div class="flex gap-4 flex-wrap transition-all duration-300">
              <span>数据源: <span class="font-mono">{{ debugDataSource }}</span></span>
              <span>记录条数: <span class="font-mono">{{ debugRecordCount }}</span></span>
              <span>更新时间: <span class="font-mono">{{ debugLastUpdated }}</span></span>
              @if (debugUseMockData) {
                <span class="text-amber-600 font-medium">⚠ 使用模拟数据</span>
              } @else {
                <span class="text-green-600 font-medium">✓ 使用API数据</span>
              }
            </div>
          </div>
        }
        
        <!-- API URL信息 -->
        @if (debugRegisterUrl || debugListUrl) {
          <div class="debug-urls text-xs text-gray-500 p-2 bg-gray-50 border-t border-gray-100 transition-all duration-300">
            <div class="flex flex-col gap-1 transition-all duration-300">
              @if (debugRegisterUrl) {
                <span>注册API: <span class="font-mono">{{ debugRegisterUrl || '未调用' }}</span></span>
              }
              @if (debugListUrl) {
                <span>列表API: <span class="font-mono">{{ debugListUrl || '未调用' }}</span></span>
              }
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>