提出为组件，不能排序和筛选

src/app/app.component.ts

@@ -40,12 +40,13 @@ export class AppComponent implements OnInit, OnDestroy {
     console.log('AppComponent初始化');
     console.log('当前路由:', this.router.url);
     
-    // 禁用模拟数据，使用真实API
-    this.config.useMockData = false;
-    console.log('使用真实API，配置:', {
-      useMockData: this.config.useMockData,
-      apiBaseUrl: this.config.apiBaseUrl
-    });
+     // 禁用模拟数据，使用真实API
+     this.config.useMockData = false;
+     this.config.apiBaseUrl = '/api'; // 确保使用代理路径
+     console.log('使用真实API，配置:', {
+       useMockData: this.config.useMockData,
+       apiBaseUrl: this.config.apiBaseUrl
+     });
     
     // 从本地存储恢复宽度
     const savedWidth = localStorage.getItem('sidebarWidth');

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

@@ -1,15 +1,28 @@
 <!-- 顶部标题区域 -->
-  <app-sticky-header
-    [title]="title"
-    [hintText]="hintText"
-    [buttons]="headerButtons"
-    [showDebugInfo]="true"
-    [autoDetect]="true"
-    [scrollContainer]="'.content-area'"
-    [scrollThreshold]="20"
-    [compactThreshold]="80"
-    [widthTarget]="'#tabulator-table'"
-    (buttonAction)="onHeaderButtonAction($event)"
-  ></app-sticky-header>
-  <!-- Tabulator 容器 -->
-  <div id="tabulator-table" #matCard class="flex-1" ></div>
+<app-sticky-header
+  [title]="title"
+  [hintText]="hintText"
+  [buttons]="headerButtons"
+  [showDebugInfo]="true"
+  [autoDetect]="true"
+  [scrollContainer]="'.content-area'"
+  [scrollThreshold]="20"
+  [compactThreshold]="80"
+ [widthTarget]="'#tabulator-table'"
+  (buttonAction)="onHeaderButtonAction($event)"
+></app-sticky-header>
+
+<!-- Tabulator 表格组件 -->
+<app-tabulator-grid id="tabulator-table" #matCard
+  [columns]="columns"
+  [dataLoader]="dataLoader"
+  [height]="'600px'"
+  [paginationSize]="20"
+  [paginationSizeSelector]="[10, 20, 50, 100,200,500]"
+  [showPagination]="true"
+  [remoteSort]="true"
+  [remoteFilter]="true"
+  (dataLoaded)="onDataLoaded($event)"
+  (ajaxError)="onAjaxError($event)"
+  class="flex-1"
+></app-tabulator-grid>

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

@@ -1,36 +1,55 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ServiceRegisterConfigComponent } from './service-register-config.component';
 import { ConfigMetaService } from '../../services/config-meta.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { AuthService } from '../../services/auth.service';
 import { ConfigService } from 'base-core';
 import { of } from 'rxjs';
 
+// 模拟全局 Tabulator 对象
+const mockTabulator = {
+  new: jasmine.createSpy('Tabulator.new').and.callFake(() => ({
+    replaceData: jasmine.createSpy('replaceData'),
+    clearFilter: jasmine.createSpy('clearFilter'),
+    clearSort: jasmine.createSpy('clearSort'),
+    download: jasmine.createSpy('download'),
+    getPage: jasmine.createSpy('getPage').and.returnValue(1),
+    getPageSize: jasmine.createSpy('getPageSize').and.returnValue(20),
+    getFilters: jasmine.createSpy('getFilters').and.returnValue([]),
+    getSorters: jasmine.createSpy('getSorters').and.returnValue([])
+  }))
+};
+
 describe('ServiceRegisterConfigComponent', () => {
   let component: ServiceRegisterConfigComponent;
   let fixture: ComponentFixture<ServiceRegisterConfigComponent>;
   let configMetaServiceSpy: jasmine.SpyObj<ConfigMetaService>;
+  let authServiceSpy: jasmine.SpyObj<AuthService>;
   let configServiceSpy: jasmine.SpyObj<ConfigService>;
-  let snackBarSpy: jasmine.SpyObj<MatSnackBar>;
 
   beforeEach(async () => {
+    // 设置全局 Tabulator 模拟
+    (window as any).Tabulator = mockTabulator.new;
+
     configMetaServiceSpy = jasmine.createSpyObj('ConfigMetaService', [
       'initConfigMeta',
-      'listConfigMetaPaginated',
+      'listForTabulator',
       'getInitUrl',
       'getListUrl'
     ]);
+    authServiceSpy = jasmine.createSpyObj('AuthService', ['getBasicAuth']);
+    authServiceSpy.getBasicAuth.and.returnValue(null);
     configServiceSpy = jasmine.createSpyObj('ConfigService', [], {
       useMockData: false,
       apiBaseUrl: 'http://localhost:8080'
     });
-    snackBarSpy = jasmine.createSpyObj('MatSnackBar', ['open']);
 
     await TestBed.configureTestingModule({
-      imports: [ServiceRegisterConfigComponent],
+      imports: [ServiceRegisterConfigComponent, HttpClientTestingModule],
       providers: [
         { provide: ConfigMetaService, useValue: configMetaServiceSpy },
-        { provide: ConfigService, useValue: configServiceSpy },
-        { provide: MatSnackBar, useValue: snackBarSpy }
+        { provide: AuthService, useValue: authServiceSpy },
+        { provide: ConfigService, useValue: configServiceSpy }
       ]
     }).compileComponents();
 
@@ -39,130 +58,121 @@ describe('ServiceRegisterConfigComponent', () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    // 清理全局模拟
+    delete (window as any).Tabulator;
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
   it('should initialize with default values', () => {
-    expect(component.tabulatorColumns).toBeDefined();
-    expect(component.tabulatorDataSource).toBeDefined();
-    expect(component.isDataLoading).toBeFalse();
-    expect(component.dataCount).toBe(0);
-    expect(component.pageSize).toBe(20);
+    expect(component.title).toBe('注册服务配置');
+    expect(component.hintText).toBe('点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。');
+    expect(component.headerButtons.length).toBe(2);
+    expect(component.headerButtons[0].name).toBe('register');
+    expect(component.headerButtons[1].name).toBe('refresh');
   });
 
   it('should call initConfigMeta and handle success response', () => {
-    const mockResponse = { success: true, data: '初始化成功' };
+    const mockResponse = { success: true, data: '模拟初始化成功' };
     configMetaServiceSpy.initConfigMeta.and.returnValue(of(mockResponse));
 
-    component.initConfigMeta();
+    component.onRegister();
 
     expect(configMetaServiceSpy.initConfigMeta).toHaveBeenCalled();
-    expect(component.isDataLoading).toBeFalse();
-    expect(snackBarSpy.open).toHaveBeenCalledWith('配置元信息初始化成功', '关闭', { duration: 3000 });
+    expect(component.headerButtons[0].loading).toBeFalse();
   });
 
   it('should call initConfigMeta and handle error response', () => {
-    const mockResponse = { success: false, message: '初始化失败' };
-    configMetaServiceSpy.initConfigMeta.and.returnValue(of(mockResponse));
-
-    component.initConfigMeta();
-
-    expect(configMetaServiceSpy.initConfigMeta).toHaveBeenCalled();
-    expect(snackBarSpy.open).toHaveBeenCalledWith('初始化失败: 初始化失败', '关闭', { duration: 5000 });
-  });
-
-  it('should call initConfigMeta and handle request error', () => {
     const mockError = new Error('请求失败');
-    configMetaServiceSpy.initConfigMeta.and.throwError(mockError);
+    configMetaServiceSpy.initConfigMeta.and.returnValue(of(mockError));
 
-    component.initConfigMeta();
+    component.onRegister();
 
     expect(configMetaServiceSpy.initConfigMeta).toHaveBeenCalled();
-    expect(component.isDataLoading).toBeFalse();
+    expect(component.headerButtons[0].loading).toBeFalse();
   });
 
-  it('should update debug info on init', () => {
-    configMetaServiceSpy.getInitUrl.and.returnValue('http://localhost:8080/init/config/meta');
-    configMetaServiceSpy.getListUrl.and.returnValue('http://localhost:8080/config/meta/list');
+  it('should handle header button actions', () => {
+    spyOn(component, 'onRegister');
+    spyOn(component, 'refresh');
+
+    component.onHeaderButtonAction('register');
+    expect(component.onRegister).toHaveBeenCalled();
 
-    component.ngOnInit();
+    component.onHeaderButtonAction('refresh');
+    expect(component.refresh).toHaveBeenCalled();
 
-    expect(component.debugInfo.registerUrl).toBe('http://localhost:8080/init/config/meta');
-    expect(component.debugInfo.listUrl).toBe('http://localhost:8080/config/meta/list');
-    expect(component.debugInfo.useMockData).toBeFalse();
-    expect(component.debugInfo.dataSource).toBe('真实 API');
+    component.onHeaderButtonAction('unknown');
+    // 应该记录警告但无错误
   });
 
-  it('should handle tabulator data request', () => {
-    const mockParams = {
-      page: 1,
-      size: 20,
-      sorters: [],
-      filters: []
+  it('should refresh table data', () => {
+    // 模拟 Tabulator 实例
+    const mockTableInstance = {
+      replaceData: jasmine.createSpy('replaceData')
     };
-    const mockResponse = {
-      success: true,
-      data: [{ id: '1', configName: 'test' }],
-      totalCount: 1
-    };
-    configMetaServiceSpy.listConfigMetaPaginated.and.returnValue(of(mockResponse));
+    (component as any).tabulator = mockTableInstance;
 
-    const result = component.onTabulatorDataRequest(mockParams);
+    component.refresh();
 
-    expect(configMetaServiceSpy.listConfigMetaPaginated).toHaveBeenCalled();
-    expect(component.dataCount).toBe(1);
-    expect(component.totalCount).toBe(1);
-    expect(component.debugInfo.recordCount).toBe(1);
+    expect(mockTableInstance.replaceData).toHaveBeenCalled();
+    expect(component.headerButtons[1].loading).toBeTrue();
   });
 
-  it('should handle tabulator data request with error', () => {
-    const mockParams = {
-      page: 1,
-      size: 20,
-      sorters: [],
-      filters: []
+  it('should reset table filters and sort', () => {
+    const mockTableInstance = {
+      clearFilter: jasmine.createSpy('clearFilter'),
+      clearSort: jasmine.createSpy('clearSort')
     };
-    const mockError = new Error('请求失败');
-    configMetaServiceSpy.listConfigMetaPaginated.and.throwError(mockError);
+    (component as any).tabulator = mockTableInstance;
 
-    const result = component.onTabulatorDataRequest(mockParams);
+    component.reset();
 
-    expect(configMetaServiceSpy.listConfigMetaPaginated).toHaveBeenCalled();
-    expect(component.isDataLoading).toBeFalse();
-    expect(snackBarSpy.open).toHaveBeenCalledWith('数据加载请求失败: ' + mockError.message, '关闭', { duration: 5000 });
+    expect(mockTableInstance.clearFilter).toHaveBeenCalled();
+    expect(mockTableInstance.clearSort).toHaveBeenCalled();
   });
 
-  it('should update debug info when page changes', () => {
-    const mockEvent = { page: 2, pageSize: 20 };
-    component.onPageChanged(mockEvent);
-
-    expect(component.currentPage).toBe(2);
-    expect(component.pageSize).toBe(20);
-    expect(component.debugInfo.currentPage).toBe(2);
-  });
-
-  it('should copy debug info to clipboard', () => {
-    spyOn(navigator.clipboard, 'writeText').and.returnValue(Promise.resolve());
-    component.debugInfo = {
-      dataSource: 'Mock 数据',
-      recordCount: 10,
-      lastUpdated: '2024-01-01 12:00:00',
-      useMockData: true,
-      registerUrl: 'http://localhost:8080/init',
-      listUrl: 'http://localhost:8080/list',
-      currentPage: 1,
-      totalPages: 1
+  it('should export data as CSV', () => {
+    const mockTableInstance = {
+      download: jasmine.createSpy('download')
     };
+    (component as any).tabulator = mockTableInstance;
 
-    component.copyDebugInfo();
+    component.exportData();
 
-    expect(navigator.clipboard.writeText).toHaveBeenCalled();
-    expect(snackBarSpy.open).toHaveBeenCalledWith('调试信息已复制到剪贴板', '关闭', { duration: 2000 });
+    expect(mockTableInstance.download).toHaveBeenCalledWith('csv', 'config-meta-data.csv');
   });
 
-  it('should refresh data and update debug info', () => {
-    component.refreshData();
-    expect(component.isDataLoading).toBeTrue();
+  it('should create ajax request function that calls listForTabulator', fakeAsync(() => {
+    const mockParams = { page: 1, size: 20, sort: [], filter: [] };
+    const mockResponse = { last_page: 5, data: [{ id: '1', configName: 'test' }] };
+    
+    configMetaServiceSpy.listForTabulator.and.returnValue(of(mockResponse));
+    
+    const requestFunc = (component as any).createAjaxRequestFunc();
+    
+    let resolvedResponse: any;
+    requestFunc('any-url', {}, mockParams).then((response: any) => {
+      resolvedResponse = response;
+    });
+    
+    tick(); // 处理异步 observable
+    
+    expect(configMetaServiceSpy.listForTabulator).toHaveBeenCalledWith(mockParams);
+    expect(resolvedResponse).toEqual(mockResponse);
+  }));
+
+  it('should have template alias methods', () => {
+    spyOn(component, 'refresh');
+    spyOn(component, 'reset');
+
+    component.refreshTable();
+    expect(component.refresh).toHaveBeenCalled();
+
+    component.resetTable();
+    expect(component.reset).toHaveBeenCalled();
   });
 });

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

@@ -1,313 +1,184 @@
 
-import { Component, AfterViewInit, inject } from '@angular/core';
+import { Component, inject, ViewChild, OnInit, AfterViewInit } from '@angular/core';
 import { ConfigMetaService } from '../../services/config-meta.service';
-import { AuthService } from '../../services/auth.service';
-import { TabulatorMapper } from '../../utils/tabulator-mapper.util';
-import { ConfigService, StickyHeaderComponent, StickyHeaderButton } from 'base-core';
+import { ConfigService, StickyHeaderComponent, StickyHeaderButton, TabulatorGridComponent } from 'base-core';
 import { CommonModule } from '@angular/common';
-
-// 声明全局类型
-declare var Tabulator: any;
-
+import { Observable } from 'rxjs';
 
 @Component({
-  imports: [CommonModule, StickyHeaderComponent],
+  imports: [CommonModule, StickyHeaderComponent, TabulatorGridComponent],
   selector: 'app-service-register-config',
   templateUrl: './service-register-config.component.html',
   styleUrl: './service-register-config.component.scss'
 })
-export class ServiceRegisterConfigComponent implements AfterViewInit {
-  private tabulator!: any;
-  private totalCount: number = 0;
+export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
   private configMetaService = inject(ConfigMetaService);
   private config = inject(ConfigService);
-  private authService = inject(AuthService);
-  
-   title = '注册服务配置';
-   hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
-   headerButtons: StickyHeaderButton[] = [
-     { title: '注册', name: 'register', icon: 'add', color: 'primary' },
-     { title: '刷新', name: 'refresh', icon: 'refresh', color: 'accent' }
-    ];
-    //registering = false;
-    
-    // 外部查询条件预留字段（用于将来扩展）
-    externalFilters: any = {};
+
+  @ViewChild(TabulatorGridComponent) tabulatorGrid!: TabulatorGridComponent;
+
+   ngOnInit(): void {
+     console.log('ServiceRegisterConfigComponent 初始化');
+     // 确保使用代理API路径
+     this.config.apiBaseUrl = '/api';
+     console.log('ConfigService:', {
+       useMockData: this.config.useMockData,
+       apiBaseUrl: this.config.apiBaseUrl
+     });
+   }
 
   ngAfterViewInit(): void {
-    console.log('ServiceRegisterConfigComponent ngAfterViewInit');
-    console.log('Tabulator global available:', typeof Tabulator !== 'undefined');
-    console.log('ConfigService状态:', {
-      useMockData: this.config.useMockData,
-      apiBaseUrl: this.config.apiBaseUrl
-    });
-    console.log('ConfigMetaService API URL:', this.configMetaService.getListUrl());
-    
-    // 使用 setTimeout 确保 DOM 已渲染
-    setTimeout(() => {
-      console.log('Initializing Tabulator...');
-      this.initTabulator();
-    }, 100);
+    console.log('👀 ServiceRegisterConfigComponent: TabulatorGrid 视图初始化完成');
   }
+
+  title = '注册服务配置';
+  hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
+  headerButtons: StickyHeaderButton[] = [
+    { title: '注册', name: 'register', icon: 'add', color: 'primary' },
+    { title: '刷新', name: 'refresh', icon: 'refresh', color: 'accent' }
+  ];
   
-  /**
-   * 初始化表格 - 标准远程分页版本
-   */
-  private initTabulator(): void {
-    console.log('initTabulator called');
-    console.log('Table element exists:', document.getElementById('tabulator-table'));
-    
-    // 获取Basic认证信息
-    const basicAuth = this.authService.getBasicAuth();
-    console.log('Basic认证信息:', basicAuth ? '有' : '无');
-    
-    this.tabulator = new Tabulator('#tabulator-table', {
-     
-      // 列定义 - 使用现有列配置
-    columns: [
-      
-      { title: 'ID', field: 'id', sorter: 'number', headerFilter: 'input', width: 220 ,
-        headerMenu: [
-      {
-        label: "<i class='fa fa-filter'></i> 切换筛选",
-        action: (column:any) => {
-          const headerFilterEl = column.getElement().querySelector('.tabulator-header-filter');
-          if (headerFilterEl) {
-            const isHidden = headerFilterEl.style.display === 'none';
-            headerFilterEl.style.display = isHidden ? '' : 'none';
+  // 外部查询条件预留字段（用于将来扩展）
+  externalFilters: any = {};
+
+  // 表格列定义
+  columns = [
+    { 
+      title: 'ID', 
+      field: 'id', 
+      sorter: 'number', 
+      headerFilter: 'input', 
+      width: 220,
+      headerMenu: [
+        {
+          label: "<i class='fa fa-filter'></i> 切换筛选",
+          action: (column: any) => {
+            const headerFilterEl = column.getElement().querySelector('.tabulator-header-filter');
+            if (headerFilterEl) {
+              const isHidden = headerFilterEl.style.display === 'none';
+              headerFilterEl.style.display = isHidden ? '' : 'none';
+            }
           }
         }
-      }
-    ]
-      },
-      { title: '配置名称', field: 'configName', sorter: 'string', headerFilter: 'input', headerFilterFunc: 'like',width: 110 },
-      { title: '字段名', field: 'fieldName', sorter: 'string', headerFilter: 'input', headerFilterFunc: 'like' ,width: 130},
-      { title: '字段类型', field: 'fieldType', sorter: 'string', headerFilter: 'input',width: 120, headerFilterParams: { values: ['string', 'number', 'boolean', 'array', 'object'] } },
-      { title: '描述', field: 'fieldDesc', sorter: 'string', headerFilter: 'input', headerFilterFunc: 'like' }
-    ],
-      
-      // 标准远程分页配置
-      pagination: true,
-      paginationMode: 'remote',
-      paginationSize: 20,
-      paginationSizeSelector: [10, 20, 50, 100],
-      sortMode: 'remote',
-      filterMode: 'remote',
-      
-      // 使用标准AJAX配置，通过代理调用后端API
-      ajaxURL: '/api/config/meta/list',
-      ajaxConfig: {
-        method: 'POST',
-        headers: {
-          'Authorization': basicAuth ? `Basic ${basicAuth}` : '',
-          'Content-Type': 'application/json'
-        }
-      },
-      ajaxContentType: 'json',
-      
-      ajaxParams: function() {
-        // 获取调用时的上下文信息
-        const callTime = new Date().toISOString();
-        const stack = new Error().stack; // 获取调用堆栈
-        
-        console.group("=== ajaxParams被调用 ===");
-        console.log("调用时间:", callTime);
-        console.log("当前页码:", this.getPage());
-        console.log("筛选条件:", this.getFilters(true));
-        console.log("排序条件:", this.getSorters());
-       // console.log("调用来源:", stack.split('\n')[2]?.trim() || "未知");
-        console.groupEnd();
-        
-        return {
-            page: this.getPage() || 1,
-            size: this.getPageSize() || 20,
-            filter: this.getFilters(true) || [],
-            sort: this.getSorters() || []
-        };
+      ]
     },
-      //       参数生成器，将Tabulator参数转换为后端期望格式
-      ajaxURLGenerator:function(url: string, config: any, params: any){
-      //ajaxParamsGenerator: (url: string, config: any, params: any) => {
-        console.log('=== Tabulator AJAX参数生成器被调用 ===');
-        console.log('请求URL:', url);
-        console.log('请求配置:', config);
-        console.log('原始params类型:', typeof params);
-        console.log('原始params完整结构:', JSON.stringify(params, null, 2));
-        
-        // 详细分析params对象
-        if (params) {
-          console.log('params所有键:', Object.keys(params));
-          console.log('page:', params.page);
-          console.log('size:', params.size);
-          console.log('sort类型:', typeof params.sort);
-          console.log('sort值:', params.sort);
-          console.log('filter类型:', typeof params.filter);
-          console.log('filter值:', params.filter);
-          
-          // 检查可能的别名
-          console.log('sorters存在?:', 'sorters' in params);
-          console.log('filters存在?:', 'filters' in params);
-          
-          // 检查是否有外部查询条件的预留字段
-          console.log('当前外部查询条件预留字段:', this.externalFilters || '未定义');
-        } else {
-          console.log('params为undefined或null');
-          params = {};
-        }
-        
-        // 构建请求参数，使用TabulatorMapper转换为后端期望格式
-        // Tabulator 6.x发送的是 sort/filter（单数），但后端期望 sorters/filters（复数）
-       // const request = TabulatorMapper.buildServerRequest(
-         // params.page || 1,
-          //params.size || 20,
-          //params.sorts || [],      // Tabulator使用单数'sort'
-          //params.filters || []     // Tabulator使用单数'filter'
-        //);
-        
-       // console.log('生成的请求参数:', JSON.stringify(request, null, 2));
-       
-         const fullUrl = url + '?params=' + encodeURIComponent(JSON.stringify(params));
+    { 
+      title: '配置名称', 
+      field: 'configName', 
+      sorter: 'string', 
+      headerFilter: 'input', 
+      headerFilterFunc: 'like', 
+      width: 110 
+    },
+    { 
+      title: '字段名', 
+      field: 'fieldName', 
+      sorter: 'string', 
+      headerFilter: 'input', 
+      headerFilterFunc: 'like', 
+      width: 130 
+    },
+    { 
+      title: '字段类型', 
+      field: 'fieldType', 
+      sorter: 'string', 
+      headerFilter: 'input', 
+      width: 120, 
+      headerFilterParams: { values: ['string', 'number', 'boolean', 'array', 'object'] } 
+    },
+    { 
+      title: '描述', 
+      field: 'fieldDesc', 
+      sorter: 'string', 
+      headerFilter: 'input', 
+      headerFilterFunc: 'like' 
+    }
+  ];
 
-         console.log('完整URL:', fullUrl);
-          console.log('=== 参数生成器执行结束 ===');
-  
-        return fullUrl;
+  /**
+   * 数据加载函数 - 适配 TabulatorGridComponent
+   */
+  dataLoader = (params: any): Observable<{ last_page: number; data: any[] }> => {
+    console.log('📊 ServiceRegisterConfigComponent 数据加载函数被调用');
+    console.log('原始参数:', params);
+    console.log('ConfigMetaService URL:', this.configMetaService.getListUrl());
     
-        // 返回完整的请求配置对象
-  // return {
-  //   method: 'POST',  // 使用POST方法
-  //   headers: {
-  //     'Content-Type': 'application/json',
-  //     'Authorization': 'Basic YWRtaW46MTIz',  // 你的认证信息
-  //     // 可以添加其他需要的headers
-  //   },
-  //   body: JSON.stringify({
-  //     filter: params.filter || [],  // 根据后端期望的字段名调整
-  //     page: params.page || 1,
-  //     size: params.size || 20,
-  //     sort: params.sorter || []     // 根据后端期望的字段名调整
-   //  })
-  //};
-      },
-      
-      // 响应处理，将后端响应转换为Tabulator期望格式
-      // ajaxResponse: (url: string, params: any, response: any) => {
-      //   console.log('Tabulator AJAX响应处理', { url, params, response });
-        
-      //   // 检查响应格式
-      //   if (response && typeof response === 'object') {
-      //     // 后端返回格式：{success: true, data: [...], totalCount: N, last_page: N}
-      //     const data = response.data || [];
-      //     const totalCount = response.totalCount || 0;
-      //     const pageSize = params.size || 20;
-      //     const lastPage = response.last_page || Math.ceil(totalCount / pageSize);
-          
-      //     return {
-      //       data: data,
-      //       last_page: lastPage
-      //     };
-      //   }
-        
-      //   // 如果响应格式不符合预期，返回空数据
-      //   console.warn('响应格式不符合预期:', response);
-      //   return {
-      //     data: [],
-      //     last_page: 0
-      //   };
-      // },
-      
-      tableAjaxError: (error: any) => {
-        console.error('Tabulator AJAX错误:', error);
-        if (error.status === 401 || error.status === 403) {
-          console.warn('认证失败，跳转到登录页面');
-          this.authService.logout();
+    // 确保参数有默认值
+    const safeParams = {
+      page: params?.page || 1,
+      size: params?.size || 20,
+      sort: params?.sort || [],
+      filter: params?.filter || []
+    };
+    
+    console.log('处理后参数:', safeParams);
+    
+    return this.configMetaService.listForTabulator(safeParams);
+  };
+
+  /**
+   * 注册配置元信息
+   */
+  onRegister(): void {
+    console.log('注册按钮被点击');
+    this.headerButtons[0].loading = true;
+
+    this.configMetaService.initConfigMeta().subscribe({
+      next: (result: any) => {
+        this.headerButtons[0].loading = false;
+        if (result.success) {
+          console.log('注册完成:', result.data);
+          // 注册成功后刷新表格数据
+          this.refresh();
+          console.log('注册成功，数据已重新加载');
+        } else {
+          console.error('注册失败:', result);
         }
       },
-      
-
-      
-      // 表格样式
-      layout: 'fitColumns',
-      responsiveLayout: 'collapse',
-      //height: '800px',
-      
-      // 初始加载
-      ajaxInitialLoad: true,
-      
-      // 分页位置
-      paginationCounter: 'rows',
-      paginationButtonCount: 5
+      error: (error) => {
+        this.headerButtons[0].loading = false;
+        console.error('注册请求失败:', error);
+      }
     });
   }
-  
 
-   onRegister() {
-      console.log('注册按钮被点击');
-      //this.registering = true;
-      this.headerButtons[0].loading = true;
-      
-      this.configMetaService.initConfigMeta().subscribe({
-        next: (result: any) => {
-         // this.registering = false;
-          this.headerButtons[0].loading = false;
-          //this.errorMessage = null;
-          if (result.success) {
-            console.log('注册完成:', result.data);
-            
-            // 注册后切换到真实API数据
-            //this.debugInfo.useMockData = false;
-            //this.updateDataConfig();
-            
-            // 重新加载数据
-            //this.loadData(1);
-            
-            console.log('注册成功，数据已重新加载');
-          } else {
-            console.error('注册失败:', result);
-          }
-        },
-        error: (error) => {
-         // this.registering = false;
-          this.headerButtons[0].loading = false;
-          console.error('注册请求失败:', error);
-        }
-      });
+  /**
+   * 处理头部按钮点击事件
+   */
+  onHeaderButtonAction(name: string): void {
+    console.log(`头部按钮点击: ${name}`);
+    switch (name) {
+      case 'register':
+        this.onRegister();
+        break;
+      case 'refresh':
+        this.refresh();
+        break;
+      default:
+        console.warn(`未知按钮操作: ${name}`);
     }
-    
-    onHeaderButtonAction(name: string) {
-      console.log(`头部按钮点击: ${name}`);
-      switch (name) {
-        case 'register':
-          this.onRegister();
-          break;
-        case 'refresh':
-          this.refresh();
-          break;
-        default:
-          console.warn(`未知按钮操作: ${name}`);
-      }
+  }
+
+  /**
+   * 刷新表格数据
+   */
+  refresh(): void {
+    if (this.tabulatorGrid) {
+      this.headerButtons[1].loading = true;
+      this.tabulatorGrid.refresh();
+      // 简单延迟后清除loading状态
+      setTimeout(() => {
+        this.headerButtons[1].loading = false;
+      }, 500);
     }
-   /**
-    * 刷新表格 - 重新加载数据
-    */
-   refresh(): void {
-     if (this.tabulator) {
-       this.headerButtons[1].loading = true;
-       this.tabulator.replaceData();
-       // 简单延迟后清除loading状态
-       setTimeout(() => {
-         this.headerButtons[1].loading = false;
-       }, 500);
-     }
-   }
-  
+  }
+
   /**
    * 重置筛选和排序
    */
   reset(): void {
-    if (this.tabulator) {
-      this.tabulator.clearFilter();
-      this.tabulator.clearSort();
+    if (this.tabulatorGrid) {
+      this.tabulatorGrid.reset();
     }
   }
 
@@ -326,11 +197,34 @@ export class ServiceRegisterConfigComponent implements AfterViewInit {
   }
 
   /**
-   * 导出数据
+   * 导出数据为 CSV
    */
   exportData(): void {
-    if (this.tabulator) {
-      this.tabulator.download('csv', 'config-meta-data.csv');
+    if (this.tabulatorGrid) {
+      this.tabulatorGrid.exportToCSV('config-meta-data.csv');
     }
   }
+
+  /**
+   * 处理表格数据加载完成事件
+   */
+  onDataLoaded(response: any): void {
+    console.log('✅ 表格数据加载完成:', {
+      last_page: response?.last_page,
+      data_count: response?.data?.length,
+      data_sample: response?.data?.slice(0, 2)
+    });
+  }
+
+  /**
+   * 处理 AJAX 错误事件
+   */
+  onAjaxError(error: any): void {
+    console.error('❌ 表格 AJAX 错误:', error);
+    console.error('错误详情:', {
+      message: error?.message,
+      status: error?.status,
+      url: error?.url
+    });
+  }
 }

src/app/services/config-meta.service.spec.ts

@@ -0,0 +1,165 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { ConfigMetaService } from './config-meta.service';
+import { ConfigService } from 'base-core';
+
+// Mock ConfigService
+class MockConfigService {
+  apiBaseUrl = 'http://localhost:8080';
+  useMockData = true; // 使用模拟数据以便测试
+}
+
+describe('ConfigMetaService', () => {
+  let service: ConfigMetaService;
+  let httpTestingController: HttpTestingController;
+  let mockConfigService: MockConfigService;
+
+  beforeEach(() => {
+    mockConfigService = new MockConfigService();
+    
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        ConfigMetaService,
+        { provide: ConfigService, useValue: mockConfigService }
+      ]
+    });
+    
+    service = TestBed.inject(ConfigMetaService);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('getListUrl', () => {
+    it('should return correct URL when useMockData is true', () => {
+      mockConfigService.useMockData = true;
+      expect(service.getListUrl()).toBe('http://localhost:8080/tabulator/config/meta/list');
+    });
+
+    it('should return correct URL when useMockData is false', () => {
+      mockConfigService.useMockData = false;
+      expect(service.getListUrl()).toBe('http://localhost:8080/tabulator/config/meta/list');
+    });
+  });
+
+  describe('listConfigMeta', () => {
+    it('should return mock data when useMockData is true', (done) => {
+      mockConfigService.useMockData = true;
+      
+      service.listConfigMeta().subscribe({
+        next: (data) => {
+          expect(data).toBeTruthy();
+          expect(Array.isArray(data)).toBeTrue();
+          // 模拟数据应该包含一些记录
+          expect(data.length).toBeGreaterThan(0);
+          done();
+        },
+        error: done.fail
+      });
+    });
+
+    it('should make HTTP request when useMockData is false', () => {
+      mockConfigService.useMockData = false;
+      const mockResponse = {
+        success: true,
+        data: [
+          { 
+            id: '1', 
+            configName: 'test', 
+            fieldName: 'testField', 
+            fieldType: 'string', 
+            yamlName: 'testYaml',
+            fieldDesc: 'test description',
+            creator: 'admin',
+            createdAt: '2024-01-01T00:00:00Z'
+          }
+        ]
+      };
+
+      service.listConfigMeta().subscribe(response => {
+        expect(response).toEqual(mockResponse.data);
+      });
+
+      const req = httpTestingController.expectOne('http://localhost:8080/tabulator/config/meta/list');
+      expect(req.request.method).toBe('POST');
+      req.flush(mockResponse);
+    });
+  });
+
+  describe('listForTabulator', () => {
+    it('should convert Tabulator params and return expected format', (done) => {
+      mockConfigService.useMockData = true;
+      const tabulatorParams = {
+        page: 1,
+        size: 20,
+        sort: [{ field: 'configName', dir: 'asc' }],
+        filter: [{ field: 'fieldType', type: '=', value: 'string' }]
+      };
+
+      service.listForTabulator(tabulatorParams).subscribe({
+        next: (response) => {
+          expect(response).toBeTruthy();
+          expect(response.last_page).toBeDefined();
+          expect(response.data).toBeDefined();
+          expect(Array.isArray(response.data)).toBeTrue();
+          done();
+        },
+        error: done.fail
+      });
+    });
+
+    it('should handle empty params', (done) => {
+      mockConfigService.useMockData = true;
+      const emptyParams = {};
+
+      service.listForTabulator(emptyParams).subscribe({
+        next: (response) => {
+          expect(response).toBeTruthy();
+          expect(response.last_page).toBeDefined();
+          expect(response.data).toBeDefined();
+          expect(Array.isArray(response.data)).toBeTrue();
+          done();
+        },
+        error: done.fail
+      });
+    });
+  });
+
+  describe('initConfigMeta', () => {
+    it('should return mock success when useMockData is true', (done) => {
+      mockConfigService.useMockData = true;
+      
+      service.initConfigMeta().subscribe({
+        next: (result) => {
+          expect(result).toBeTruthy();
+          expect(result.success).toBeTrue();
+          expect(result.data).toBe('模拟初始化成功');
+          done();
+        },
+        error: done.fail
+      });
+    });
+
+    it('should make HTTP POST request when useMockData is false', () => {
+      mockConfigService.useMockData = false;
+      const mockResponse = { success: true, data: '初始化成功' };
+
+      service.initConfigMeta().subscribe(response => {
+        expect(response).toEqual(mockResponse);
+      });
+
+      const req = httpTestingController.expectOne('http://localhost:8080/init/config/meta');
+      expect(req.request.method).toBe('POST');
+      req.flush(mockResponse);
+    });
+  });
+});

src/app/services/config-meta.service.ts

@@ -2,9 +2,10 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { ConfigMeta, ConfigMetaQueryRequest, PaginatedQueryResult } from '../models/config-meta.model';
+import { ConfigMeta, ConfigMetaQueryRequest, PaginatedQueryResult, TabulatorSorter, TabulatorFilter } from '../models/config-meta.model';
 import { CONFIG_NAMES, FIELD_TYPES } from '../models/config-meta.constants';
 import { MockDataUtil } from '../utils/mock-data.util';
+import { TabulatorMapper } from '../utils/tabulator-mapper.util';
 import { ConfigService } from 'base-core';
 import { QueryResult } from './auth.service';
 
@@ -13,17 +14,19 @@ import { QueryResult } from './auth.service';
 })
 export class ConfigMetaService {
   private initApiPath = '/init/config/meta';
-  private listApiPath = '/tabulator/config/meta/list';
+  private listApiPath = '/config/meta/list';
 
-  constructor(
-    private http: HttpClient,
-    private config: ConfigService
-  ) {
-    console.debug('[配置元服务] 初始化，apiBaseUrl:', this.config.apiBaseUrl);
-    console.debug('[配置元服务] useMockData:', this.config.useMockData);
-    console.debug('[配置元服务] initApiPath:', this.initApiPath);
-    console.debug('[配置元服务] listApiPath:', this.listApiPath);
-  }
+   constructor(
+     private http: HttpClient,
+     private config: ConfigService
+   ) {
+     console.debug('[配置元服务] 初始化，apiBaseUrl:', this.config.apiBaseUrl);
+     console.debug('[配置元服务] useMockData:', this.config.useMockData);
+     console.debug('[配置元服务] initApiPath:', this.initApiPath);
+     console.debug('[配置元服务] listApiPath:', this.listApiPath);
+     console.debug('[配置元服务] 完整listUrl:', `${this.config.apiBaseUrl}${this.listApiPath}`);
+     console.debug('[配置元服务] ConfigService实例:', this.config);
+   }
 
   getInitUrl(): string {
     return `${this.config.apiBaseUrl}${this.initApiPath}`;
@@ -82,10 +85,17 @@ export class ConfigMetaService {
       return of(mockResult);
     }
     
-    const url = `${this.config.apiBaseUrl}${this.listApiPath}`;
-    console.debug(`[配置元服务] 调用真实API: ${url}`, request);
-    console.debug(`[配置元服务] 完整请求URL: ${url}`);
-    console.debug(`[配置元服务] 请求参数:`, JSON.stringify(request));
+     const url = `${this.config.apiBaseUrl}${this.listApiPath}`;
+     console.debug(`[配置元服务] 调用真实API: ${url}`, request);
+     console.debug(`[配置元服务] 完整请求URL: ${url}`);
+     console.debug(`[配置元服务] URL组成分析:`, {
+       apiBaseUrl: this.config.apiBaseUrl,
+       listApiPath: this.listApiPath,
+       combinedUrl: url,
+       isAbsoluteUrl: url.startsWith('http'),
+       useMockData: this.config.useMockData
+     });
+     console.debug(`[配置元服务] 请求参数:`, JSON.stringify(request));
     
     return this.http.post<PaginatedQueryResult<ConfigMeta[]>>(url, request)
       .pipe(
@@ -101,7 +111,7 @@ export class ConfigMetaService {
       );
   }
 
-  searchConfigMeta(configName?: string, fieldName?: string, yamlName?: string): Observable<ConfigMeta[]> {
+   searchConfigMeta(configName?: string, fieldName?: string, yamlName?: string): Observable<ConfigMeta[]> {
     if (this.config.useMockData) {
       return of(this.generateMockConfigMetaList());
     }
@@ -117,6 +127,46 @@ export class ConfigMetaService {
       );
   }
 
+  /**
+   * 为Tabulator表格提供数据加载服务
+   * @param params Tabulator格式的请求参数 {page, size, sort, filter}
+   * @returns Tabulator期望的响应格式 {last_page, data}
+   */
+  listForTabulator(params: any): Observable<any> {
+    console.debug('[配置元服务] Tabulator请求参数:', params);
+    
+    // 转换参数：Tabulator格式 → ConfigMetaQueryRequest
+    const request: ConfigMetaQueryRequest = TabulatorMapper.buildServerRequest(
+      params.page || 1,
+      params.size || 20,
+      params.sort || [],
+      params.filter || []
+    );
+    
+    console.debug('[配置元服务] 转换后的请求参数:', request);
+    
+    // 调用现有分页方法
+    return this.listConfigMetaPaginated(request).pipe(
+      map(response => {
+        console.debug('[配置元服务] 原始响应:', response);
+        
+        // 计算总页数
+        const pageSize = params.size || 20;
+        const totalCount = response.totalCount || 0;
+        const lastPage = Math.ceil(totalCount / pageSize) || 1;
+        
+        // 返回Tabulator期望的格式
+        const tabulatorResponse = {
+          last_page: lastPage,
+          data: response.data || []
+        };
+        
+        console.debug('[配置元服务] Tabulator格式响应:', tabulatorResponse);
+        return tabulatorResponse;
+      })
+    );
+  }
+
    private generateMockConfigMetaList(): ConfigMeta[] {
      return MockDataUtil.generateConfigMetaList(20);
    }