ng-configure/src/app/pages/service-register-config/service-register-config.com...

<!-- 页面容器 - 采用与工作示例相同的布局结构 -->
<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>
  
  <!-- 内容区域 - 内部滚动 -->
  <div id="service-register-content" class="content-area">
    <!-- Tabulator 表格组件 -->
    <app-tabulator-grid id="tabulator-table" #matCard
      [columns]="columns"
      [dataLoader]="dataLoader"
      [height]="'1000px'"
      [paginationSize]="100"
      [paginationSizeSelector]="[10, 20, 50, 100,200,500]"
      [showPagination]="true"
      [remoteSort]="true"
      [remoteFilter]="true"
      (dataLoaded)="onDataLoaded($event)"
      (ajaxError)="onAjaxError($event)"
    ></app-tabulator-grid>
  </div>
</div>