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

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

@@ -1,84 +1,19 @@
 <!-- 页面容器 - 采用与工作示例相同的布局结构 -->
 <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>
+  <app-sticky-header
+    [title]="title"
+    [hintText]="hintText"
+    [buttons]="headerButtons"
+    [collapseThreshold]="50"
+    [scrollContainer]="'#service-register-content'"
+    (buttonAction)="onHeaderButtonAction($event)"
+  ></app-sticky-header>
   
   <!-- 内容区域 - 内部滚动 -->
   <div id="service-register-content" class="content-area">
     <!-- Tabulator 表格组件 -->
-    <app-tabulator-grid id="tabulator-table" #matCard
+    <app-tabulator-grid id="tabulator-table" 
       [columns]="columns"
       [dataLoader]="dataLoader"
       [height]="'1000px'"

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

@@ -1,14 +1,16 @@
 /* Service Register Config 页面样式 */
-/* 采用与工作示例相同的布局结构 */
 
-/* 组件宿主元素 - 继承父容器高度 */
+/* ==================== 页面容器 ==================== */
+/* 专门为 sticky header 设置的容器 */
 :host {
   display: block;
   height: 100%;
 }
 
-/* ==================== 页面容器 ==================== */
 .page-container {
+  /* 左右间距 */
+  padding-left: 16px;
+  padding-right: 16px;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -18,172 +20,20 @@
   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%; /* 工作示例使用的精确值 */
+  flex: 1 1 0%; /* 占据剩余空间 */
   overflow-y: auto !important; /* 确保优先级 */
   overflow-x: hidden; /* 防止水平滚动 */
-  padding: 16px;
-  background: white;
+  border: 0px solid #ddd;
+  background: rgb(247, 245, 245);
   min-height: 0; /* flex容器关键设置，防止内容溢出 */
   -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
   position: relative; /* 创建新的堆叠上下文 */
 }
 
-/* Tabulator 表格样式 */
+/* ==================== Tabulator 表格样式 ==================== */
 #tabulator-table {
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -191,12 +41,19 @@
   min-height: 600px; /* 确保有足够内容产生滚动 */
 }
 
-/* 旋转图标 - 用于刷新按钮加载状态 */
-.spin-icon {
-  animation: spin 1s linear infinite;
+/* ==================== 响应式调整 ==================== */
+@media (max-width: 768px) {
+  .content-area {
+    padding: 12px;
+  }
+  
+  #tabulator-table {
+    min-height: 400px;
+  }
 }
 
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+@media (max-width: 480px) {
+  .content-area {
+    padding: 8px;
+  }
 }

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

@@ -1,7 +1,7 @@
 
 import { Component, inject, ViewChild, OnInit, AfterViewInit } from '@angular/core';
 import { ConfigMetaService } from '../../services/config-meta.service';
-import { ConfigService, StickyHeaderComponent, TabulatorGridComponent } from 'base-core';
+import { ConfigService, StickyHeaderComponent, TabulatorGridComponent, StickyHeaderButton } from 'base-core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { Observable } from 'rxjs';
@@ -34,9 +34,13 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
   }
 
   title = '注册服务配置';
+  hintText = '1.点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。\n 2.更多的状态处理（单行、空内容、折叠状态.\n 3.更多的交互细节（过渡效果优化'
+
+  headerButtons: StickyHeaderButton[] = [
+    { title: '注册', name: 'register', icon: 'add', color: 'primary', loading: false },
+    { title: '刷新', name: 'refresh', icon: 'refresh', color: 'accent', loading: false }
+  ];
   recordCount = 0; // 用于动态区域变量绑定
-  isRegistering = false;
-  isRefreshing = false;
   currentTime = new Date();
   
   // 外部查询条件预留字段（用于将来扩展）
@@ -149,18 +153,35 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
      console.groupEnd();
      
      return this.configMetaService.listForTabulator(safeParams);
-   };
+    };
+
+  /**
+   * 处理头部按钮点击事件
+   */
+  onHeaderButtonAction(name: string): void {
+    console.log(`头部按钮点击: ${name}`);
+    switch (name) {
+      case 'register':
+        this.onRegister();
+        break;
+      case 'refresh':
+        this.refresh();
+        break;
+      default:
+        console.warn(`未知按钮操作: ${name}`);
+    }
+  }
 
   /**
    * 注册配置元信息
    */
   onRegister(): void {
     console.log('注册按钮被点击');
-    this.isRegistering = true;
+    this.headerButtons[0].loading = true;
 
     this.configMetaService.initConfigMeta().subscribe({
       next: (result: any) => {
-        this.isRegistering = false;
+        this.headerButtons[0].loading = false;
         if (result.success) {
           console.log('注册完成:', result.data);
           // 注册成功后刷新表格数据
@@ -171,7 +192,7 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
         }
       },
       error: (error) => {
-        this.isRegistering = false;
+        this.headerButtons[0].loading = false;
         console.error('注册请求失败:', error);
       }
     });
@@ -184,11 +205,11 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
    */
   refresh(): void {
     if (this.tabulatorGrid) {
-      this.isRefreshing = true;
+      this.headerButtons[1].loading = true;
       this.tabulatorGrid.refresh();
       // 简单延迟后清除loading状态
       setTimeout(() => {
-        this.isRefreshing = false;
+        this.headerButtons[1].loading = false;
       }, 500);
     }
   }