不要组件，直接写了测试通过

angular.json

@@ -35,10 +35,10 @@
                 "input": "src/assets"
               }
             ],
-            "styles": [
-              "src/styles.scss",
-              "node_modules/tabulator-tables/dist/css/tabulator.min.css"
-            ],
+             "styles": [
+               "src/styles.scss",
+               "node_modules/tabulator-tables/dist/css/tabulator_semanticui.min.css"
+             ],
             "scripts": [
               "node_modules/tabulator-tables/dist/js/tabulator.min.js"
             ],

package-lock.json

@@ -25,7 +25,7 @@
         "marked": "^17.0.1",
         "prismjs": "^1.30.0",
         "rxjs": "~7.8.0",
-        "tabulator-tables": "^5.6.0",
+        "tabulator-tables": "^6.3.1",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
@@ -35,6 +35,7 @@
         "@angular/compiler-cli": "^19.2.0",
         "@types/jasmine": "~5.1.0",
         "@types/prismjs": "^1.26.5",
+        "@types/tabulator-tables": "^6.3.1",
         "autoprefixer": "^10.4.23",
         "jasmine-core": "~5.6.0",
         "karma": "~6.4.0",
@@ -5876,6 +5877,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/tabulator-tables": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@types/tabulator-tables/-/tabulator-tables-6.3.1.tgz",
+      "integrity": "sha512-qL05wGXVy0yfWcF8LCE9+9uSeUIpeKdgpm8YmOAPTjLd3FaoZziPOhVxIiLzEhLTFfOvbuwnaWDm4v4i87diRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -13969,9 +13977,9 @@
       }
     },
     "node_modules/tabulator-tables": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-5.6.1.tgz",
-      "integrity": "sha512-DsmaZqEmlQS/NL5ZJbVtoaeYjJgofEFp+2er7+uwKerGwd/E2rZbeQgux4+Ab1dxNJcbptiX7oUiTwogOnUdgQ==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-6.3.1.tgz",
+      "integrity": "sha512-qFW7kfadtcaISQIibKAIy0f3eeIXUVi8242Vly1iJfMD79kfEGzfczNuPBN/80hDxHzQJXYbmJ8VipI40hQtfA==",
       "license": "MIT"
     },
     "node_modules/tailwindcss": {

package.json

@@ -23,11 +23,11 @@
     "@types/marked": "^5.0.2",
     "ag-grid-angular": "^35.0.0",
     "ag-grid-community": "^35.0.0",
-    "tabulator-tables": "^5.6.0",
-    "marked": "^17.0.1",
     "base-core": "file:../../ng-base/dist/base-core",
+    "marked": "^17.0.1",
     "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
+    "tabulator-tables": "^6.3.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
@@ -37,6 +37,7 @@
     "@angular/compiler-cli": "^19.2.0",
     "@types/jasmine": "~5.1.0",
     "@types/prismjs": "^1.26.5",
+    "@types/tabulator-tables": "^6.3.1",
     "autoprefixer": "^10.4.23",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",

src/app/app.component.ts

@@ -40,9 +40,9 @@ export class AppComponent implements OnInit, OnDestroy {
     console.log('AppComponent初始化');
     console.log('当前路由:', this.router.url);
     
-    // 启用真实API调用
+    // 禁用模拟数据，使用真实API
     this.config.useMockData = false;
-    console.log('使用真实API数据，配置:', {
+    console.log('使用真实API，配置:', {
       useMockData: this.config.useMockData,
       apiBaseUrl: this.config.apiBaseUrl
     });

src/app/interceptors/mock.interceptor.ts

@@ -25,15 +25,20 @@ export const MockInterceptor: HttpInterceptorFn = (req, next) => {
   // 检查是否为公开端点（不需要认证）
   const isPublicEndpoint = req.url.includes('/login') || req.url.includes('/register');
   
-  // 为需要认证的API请求添加Basic认证头（暂时禁用）
+  // 为需要认证的API请求添加Basic认证头
   if (req.url.includes('/api/') && !isPublicEndpoint) {
-    console.log('API请求，添加默认认证头');
-    const defaultBasicAuth = 'YWRtaW46MTIz'; // base64("admin:123")
-    authReq = req.clone({
-      setHeaders: {
-        Authorization: `Basic ${defaultBasicAuth}`
-      }
-    });
+    const basicAuth = authService.getBasicAuth();
+    if (basicAuth) {
+      console.log('API请求，使用用户认证信息添加认证头');
+      authReq = req.clone({
+        setHeaders: {
+          Authorization: `Basic ${basicAuth}`
+        }
+      });
+    } else {
+      console.warn('API请求需要认证，但用户未登录，不添加认证头');
+      // 不添加认证头，后端会返回401错误，错误处理会跳转到登录页
+    }
   } else {
     console.log('公开端点或非API请求，不添加认证头');
   }

src/app/models/config-meta.constants.ts

@@ -0,0 +1,124 @@
+/**
+ * 配置元信息相关常量定义
+ */
+
+// 字段类型枚举
+export const FIELD_TYPES = ['string', 'int', 'bool', 'config', 'array'] as const;
+export type FieldType = typeof FIELD_TYPES[number];
+
+// 配置名称常量
+export const CONFIG_NAMES = ['app', 'database', 'redis', 'logger', 'cache'] as const;
+
+// Tabulator字段映射：前端字段名 -> 后端字段名
+export const FIELD_MAPPING: Record<string, string> = {
+  'id': 'id',
+  'configName': 'configName',
+  'fieldName': 'fieldName',
+  'fieldType': 'fieldType',
+  'yamlName': 'yamlName',
+  'fieldDesc': 'fieldDesc',
+  'description': 'fieldDesc', // 兼容别名
+  'creator': 'creator',
+  'createdAt': 'createdAt'
+} as const;
+
+// Tabulator操作符映射：Tabulator操作符 -> 后端操作符
+export const OPERATOR_MAPPING: Record<string, string> = {
+  '=': '=',
+  '!=': '!=',
+  'like': 'like',
+  '>': '>',
+  '<': '<',
+  '>=': '>=',
+  '<=': '<=',
+  'in': 'in'
+} as const;
+
+// 调试信息默认值
+export const DEBUG_INFO_DEFAULTS = {
+  dataSource: '',
+  recordCount: 0,
+  lastUpdated: '',
+  useMockData: false,
+  registerUrl: '',
+  listUrl: '',
+  currentPage: 1,
+  totalPages: 1,
+  pageSize: 100  // 与组件中的paginationPageSize保持一致
+} as const;
+
+// Tabulator列配置工厂函数
+export function createTabulatorColumns() {
+  return [
+    { 
+      title: 'ID', 
+      field: 'id', 
+      width: 120, 
+      sorter: 'string',
+      headerFilter: true,
+      headerFilterPlaceholder: '筛选ID...'
+    },
+    { 
+      title: '配置名称', 
+      field: 'configName', 
+      width: 150, 
+      sorter: 'string',
+      headerFilter: true,
+      headerFilterFunc: 'like',
+      headerFilterPlaceholder: '筛选配置名称...'
+    },
+    { 
+      title: '字段名', 
+      field: 'fieldName', 
+      width: 150, 
+      sorter: 'string',
+      headerFilter: true,
+      headerFilterPlaceholder: '筛选字段名...'
+    },
+    { 
+      title: '字段类型', 
+      field: 'fieldType', 
+      width: 120, 
+      sorter: 'string',
+      headerFilter: 'select',
+      headerFilterParams: {
+        values: [...FIELD_TYPES],
+        clearable: true
+      },
+      headerFilterPlaceholder: '选择类型...'
+    },
+    { 
+      title: 'YAML名称', 
+      field: 'yamlName', 
+      width: 150, 
+      sorter: 'string',
+      headerFilter: true,
+      headerFilterFunc: 'like',
+      headerFilterPlaceholder: '筛选YAML名称...'
+    },
+    { 
+      title: '字段描述', 
+      field: 'fieldDesc', 
+      width: 200, 
+      sorter: 'string',
+      headerFilter: true,
+      headerFilterPlaceholder: '筛选描述...'
+    },
+    { 
+      title: '创建者', 
+      field: 'creator', 
+      width: 120, 
+      sorter: 'string',
+      headerFilter: true,
+      headerFilterPlaceholder: '筛选创建者...'
+    },
+    { 
+      title: '创建时间', 
+      field: 'createdAt', 
+      width: 180, 
+      sorter: 'date',
+      headerFilter: true,
+      headerFilterPlaceholder: 'YYYY-MM-DD...'
+    }
+  ];
+}

src/app/models/config-meta.model.ts

@@ -9,27 +9,77 @@ export interface ConfigMeta {
   createdAt: string;
 }
 
+// 排序参数接口
+export interface SortParam {
+  field: string; // 前端字段名
+  order: string; // asc/desc
+}
+
+// 筛选参数接口
+export interface FilterParam {
+  field: string; // 前端字段名
+  operator: string; // 运算符枚举：=, !=, like, in, >, <, >=, <=
+  value: any; // 值（支持多种类型）
+}
+
 // 配置元信息查询请求参数（与后端ConfigMetaQueryRequest对应）
 export interface ConfigMetaQueryRequest {
   // 分页参数
   page?: number;      // 页码（从0开始）
   pageSize?: number;  // 每页大小
   
-  // 搜索参数
+  // 搜索参数（向后兼容）
   configName?: string; // 配置名称模糊搜索
   fieldName?: string;  // 字段名称模糊搜索
   yamlName?: string;   // YAML标签模糊搜索
   
-  // 排序参数
+  // 排序参数（向后兼容）
   sortField?: string; // 排序字段
   sortOrder?: string; // 排序方向: asc/desc
+  
+  // 通用查询参数（新）
+  sorts?: SortParam[];
+  filters?: FilterParam[];
 }
 
 // 分页查询响应接口
 export interface PaginatedQueryResult<T> {
   success?: boolean;
+  last_page?: number;
   data?: T;
   totalCount?: number;
   message?: string;
   error?: string;
+}
+
+// Tabulator 事件类型定义
+export interface TabulatorRowEvent {
+  row: {
+    getData: () => any;
+    getElement: () => HTMLElement;
+  };
+}
+
+export interface TabulatorDataLoadEvent {
+  data?: any[];
+  last_page?: number;
+  [key: string]: any;
+}
+
+export interface TabulatorSorter {
+  field: string;
+  dir: 'asc' | 'desc';
+}
+
+export interface TabulatorFilter {
+  field: string;
+  type: string;
+  value: any;
+}
+
+export interface TabulatorServerRequestEvent {
+  page: number;
+  size: number;
+  sorters: TabulatorSorter[];
+  filters: TabulatorFilter[];
 }

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

@@ -1,51 +1,17 @@
-<div class="h-full flex flex-col pt-0 px-2 pb-2 min-w-0">
-  <!-- 错误消息显示 -->
-  <div *ngIf="errorMessage" class="mb-2 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-    {{ errorMessage }}
-  </div>
-  
-  <!-- 顶部标题区域 -->
+<!-- 顶部标题区域 -->
   <app-sticky-header
     [title]="title"
     [hintText]="hintText"
     [buttonText]="'注册'"
     [buttonIcon]="'add'"
     [buttonColor]="'primary'"
-    [disabled]="registering"
-    [loading]="registering"
     [showDebugInfo]="true"
-    [debugDataSource]="debugInfo.dataSource"
-    [debugRecordCount]="debugInfo.recordCount"
-    [debugLastUpdated]="debugInfo.lastUpdated"
-    [debugUseMockData]="debugInfo.useMockData"
-    [debugRegisterUrl]="debugInfo.registerUrl"
-    [debugListUrl]="debugInfo.listUrl"
     [autoDetect]="true"
     [scrollContainer]="'.content-area'"
     [scrollThreshold]="20"
     [compactThreshold]="80"
-    [widthTarget]="'#matCard'"
+    [widthTarget]="'#tabulator-table'"
     (buttonClick)="onRegister()"
   ></app-sticky-header>
-   
-  
-    <mat-card-content #matCard id="matCard" class="flex-1">
-        <!-- Tabulator表格组件 -->
-        <lib-tabulator-table
-          class="h-[800px]"
-          [columns]="tabulatorColumns"
-          [data]="tableData"
-          [pagination]="'local'"
-          [paginationSize]="paginationPageSize"
-          [paginationSizeSelector]="[10, 50, 100, 500]"
-          [selectable]="true"
-          [height]="'100%'"
-          [layout]="'fitColumns'"
-          [placeholder]="'暂无数据'"
-          (rowClick)="onRowClick($event)"
-          (rowSelected)="onRowSelected($event)"
-          #tabulator>
-        </lib-tabulator-table>
-    </mat-card-content>
-  
-</div>
+  <!-- Tabulator 容器 -->
+  <div id="tabulator-table" #matCard class="flex-1" ></div>

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

@@ -1,47 +1,27 @@
-// 移除所有阴影和间隙，使sticky-header在滚动缩小后与浏览器无缝衔接
-::ng-deep app-sticky-header {
-  &.locked {
-    box-shadow: none !important;
-    background-color: transparent !important;
-    
-    .header-content {
-      box-shadow: none !important;
-      margin: 0 !important; // 移除5px间隙
-      border-top: none !important; // 移除顶部边框
-      border-radius: 0 !important; // 确保无圆角
-    }
-  }
+/* config-meta-tabulator.component.scss */
+.tabulator-container {
+  padding: 16px;
   
-  &.compact {
-    .header-content {
-      box-shadow: none !important;
-      border-top: none !important;
-      border-radius: 0 !important;
-    }
-  }
-}
-
-// 调整内容区域顶部间隙
-:host {
-  ::ng-deep .content-area > div {
-    padding-top: 0 !important; // 移除默认的5px顶部间隙
-  }
-  
-  // 确保sticky-header与内容无缝衔接
-  ::ng-deep app-sticky-header {
-    margin-bottom: 0 !important;
-    
-    .sticky-header {
-      top: 0 !important;
-    }
+  .toolbar {
+    margin-bottom: 16px;
     
-    &.locked {
-      top: 0 !important;
+    .btn {
+      margin-right: 8px;
+      padding: 8px 16px;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
       
-      .header-content {
-        border-top-width: 0 !important;
-        border-bottom: 1px solid #e2e8f0 !important; // 保留底部边框
+      &:hover {
+        background: #0056b3;
       }
     }
   }
+  
+  #tabulator-table {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
 }

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

@@ -1,16 +1,38 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ServiceRegisterConfigComponent } from './service-register-config.component';
+import { ConfigMetaService } from '../../services/config-meta.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ConfigService } from 'base-core';
+import { of } from 'rxjs';
 
 describe('ServiceRegisterConfigComponent', () => {
   let component: ServiceRegisterConfigComponent;
   let fixture: ComponentFixture<ServiceRegisterConfigComponent>;
+  let configMetaServiceSpy: jasmine.SpyObj<ConfigMetaService>;
+  let configServiceSpy: jasmine.SpyObj<ConfigService>;
+  let snackBarSpy: jasmine.SpyObj<MatSnackBar>;
 
   beforeEach(async () => {
+    configMetaServiceSpy = jasmine.createSpyObj('ConfigMetaService', [
+      'initConfigMeta',
+      'listConfigMetaPaginated',
+      'getInitUrl',
+      'getListUrl'
+    ]);
+    configServiceSpy = jasmine.createSpyObj('ConfigService', [], {
+      useMockData: false,
+      apiBaseUrl: 'http://localhost:8080'
+    });
+    snackBarSpy = jasmine.createSpyObj('MatSnackBar', ['open']);
+
     await TestBed.configureTestingModule({
-      imports: [ServiceRegisterConfigComponent]
-    })
-    .compileComponents();
+      imports: [ServiceRegisterConfigComponent],
+      providers: [
+        { provide: ConfigMetaService, useValue: configMetaServiceSpy },
+        { provide: ConfigService, useValue: configServiceSpy },
+        { provide: MatSnackBar, useValue: snackBarSpy }
+      ]
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ServiceRegisterConfigComponent);
     component = fixture.componentInstance;
@@ -20,4 +42,127 @@ describe('ServiceRegisterConfigComponent', () => {
   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);
+  });
+
+  it('should call initConfigMeta and handle success response', () => {
+    const mockResponse = { success: true, data: '初始化成功' };
+    configMetaServiceSpy.initConfigMeta.and.returnValue(of(mockResponse));
+
+    component.initConfigMeta();
+
+    expect(configMetaServiceSpy.initConfigMeta).toHaveBeenCalled();
+    expect(component.isDataLoading).toBeFalse();
+    expect(snackBarSpy.open).toHaveBeenCalledWith('配置元信息初始化成功', '关闭', { duration: 3000 });
+  });
+
+  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);
+
+    component.initConfigMeta();
+
+    expect(configMetaServiceSpy.initConfigMeta).toHaveBeenCalled();
+    expect(component.isDataLoading).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');
+
+    component.ngOnInit();
+
+    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');
+  });
+
+  it('should handle tabulator data request', () => {
+    const mockParams = {
+      page: 1,
+      size: 20,
+      sorters: [],
+      filters: []
+    };
+    const mockResponse = {
+      success: true,
+      data: [{ id: '1', configName: 'test' }],
+      totalCount: 1
+    };
+    configMetaServiceSpy.listConfigMetaPaginated.and.returnValue(of(mockResponse));
+
+    const result = component.onTabulatorDataRequest(mockParams);
+
+    expect(configMetaServiceSpy.listConfigMetaPaginated).toHaveBeenCalled();
+    expect(component.dataCount).toBe(1);
+    expect(component.totalCount).toBe(1);
+    expect(component.debugInfo.recordCount).toBe(1);
+  });
+
+  it('should handle tabulator data request with error', () => {
+    const mockParams = {
+      page: 1,
+      size: 20,
+      sorters: [],
+      filters: []
+    };
+    const mockError = new Error('请求失败');
+    configMetaServiceSpy.listConfigMetaPaginated.and.throwError(mockError);
+
+    const result = component.onTabulatorDataRequest(mockParams);
+
+    expect(configMetaServiceSpy.listConfigMetaPaginated).toHaveBeenCalled();
+    expect(component.isDataLoading).toBeFalse();
+    expect(snackBarSpy.open).toHaveBeenCalledWith('数据加载请求失败: ' + mockError.message, '关闭', { duration: 5000 });
+  });
+
+  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
+    };
+
+    component.copyDebugInfo();
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalled();
+    expect(snackBarSpy.open).toHaveBeenCalledWith('调试信息已复制到剪贴板', '关闭', { duration: 2000 });
+  });
+
+  it('should refresh data and update debug info', () => {
+    component.refreshData();
+    expect(component.isDataLoading).toBeTrue();
+  });
+});

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

@@ -1,336 +1,277 @@
-import { Component, OnInit, ChangeDetectorRef, AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatCard, MatCardContent } from '@angular/material/card';
 
-import { HttpErrorResponse } from '@angular/common/http';
-import { StickyHeaderComponent, TabulatorTableComponent } from 'base-core';
-import { ConfigMeta } from '../../models/config-meta.model';
+import { Component, AfterViewInit, inject } from '@angular/core';
 import { ConfigMetaService } from '../../services/config-meta.service';
-import { ConfigMetaQueryRequest, PaginatedQueryResult } from '../../models/config-meta.model';
+import { AuthService } from '../../services/auth.service';
+import { TabulatorMapper } from '../../utils/tabulator-mapper.util';
+import { ConfigService, StickyHeaderComponent } from 'base-core';
+import { CommonModule } from '@angular/common';
+
+// 声明全局类型
+declare var Tabulator: any;
+
 
 @Component({
+  imports: [CommonModule, StickyHeaderComponent],
   selector: 'app-service-register-config',
-  imports: [CommonModule, MatCard, MatCardContent, StickyHeaderComponent, TabulatorTableComponent],
   templateUrl: './service-register-config.component.html',
   styleUrl: './service-register-config.component.scss'
 })
-export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ServiceRegisterConfigComponent implements AfterViewInit {
+  private tabulator!: any;
+  private totalCount: number = 0;
+  private configMetaService = inject(ConfigMetaService);
+  private config = inject(ConfigService);
+  private authService = inject(AuthService);
+  
   title = '注册服务配置';
   hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
-   
-  // Tabulator 配置
-  tabulatorColumns: any[] = [
-    { title: 'ID', field: 'id', width: 120, sorter: 'string' },
-    { title: '配置名称', field: 'configName', width: 150, sorter: 'string' },
-    { title: '字段名', field: 'fieldName', width: 150, sorter: 'string' },
-    { title: '字段类型', field: 'fieldType', width: 120, sorter: 'string' },
-    { title: 'YAML名称', field: 'yamlName', width: 150, sorter: 'string' },
-    { title: '字段描述', field: 'fieldDesc', width: 200, sorter: 'string' },
-    { title: '创建者', field: 'creator', width: 120, sorter: 'string' },
-    { title: '创建时间', field: 'createdAt', width: 180, sorter: 'datetime' }
-  ];
-  
-  configMetaList: ConfigMeta[] = [];
-
-  // 分页配置
-  paginationPageSize = 100;
-  currentPage = 1;
-  totalRecords = 0;
-
-  // Tabulator 数据
-  tableData: any[] = [];
-
-  loading = false;
   registering = false;
-  errorMessage: string | null = null;
-  
-  // 注意：滚动状态现在由 sticky-header 组件自动检测管理
-  // 使用 [autoDetect]="true" 启用自动滚动检测
-
-  debugInfo = {
-    dataSource: '',
-    recordCount: 0,
-    lastUpdated: '',
-    useMockData: false,
-    registerUrl: '',
-    listUrl: '',
-    currentPage: 1,
-    totalPages: 1,
-    pageSize: 10
-  };
-
-  @ViewChild('tabulator') tabulator!: TabulatorTableComponent;
-  @ViewChild('matCard', { read: ElementRef }) matCardRef!: ElementRef;
 
-  constructor(
-    private configMetaService: ConfigMetaService,
-    private cdRef: ChangeDetectorRef,
-    private elementRef: ElementRef
-  ) {}
-
-  ngOnInit() {
-    console.log('ServiceRegisterConfigComponent initialized');
-    
-    // 默认使用API数据，可通过调试信息切换为模拟数据
-    this.debugInfo.useMockData = false;
-    this.updateDataConfig();
-    
-    // 加载数据
-    this.loadData();
-    
-    console.log('初始化完成，配置状态:', {
-      useMockData: this.debugInfo.useMockData,
-      tableDataLength: this.tableData.length,
-      paginationMode: 'local'
+  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);
   }
-
+  
   /**
-   * 加载数据（使用config-meta.service.ts）
+   * 初始化表格 - 标准远程分页版本
    */
-  loadData(page: number = 1): void {
-    console.log(`加载第${page}页数据，页大小: ${this.paginationPageSize}`);
+  private initTabulator(): void {
+    console.log('initTabulator called');
+    console.log('Table element exists:', document.getElementById('tabulator-table'));
     
-    // 构建查询请求
-    const request: ConfigMetaQueryRequest = {
-      page: page - 1, // API页码从0开始
-      pageSize: this.paginationPageSize
-    };
+    // 获取Basic认证信息
+    const basicAuth = this.authService.getBasicAuth();
+    console.log('Basic认证信息:', basicAuth ? '有' : '无');
     
-    this.loading = true;
-    
-    this.configMetaService.listConfigMetaPaginated(request).subscribe({
-       next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
-         this.loading = false;
-         this.errorMessage = null;
-         
-         if (result.success && result.data) {
-          this.tableData = result.data;
-          this.configMetaList = result.data;
-          this.totalRecords = result.totalCount || result.data.length;
+    this.tabulator = new Tabulator('#tabulator-table', {
+     
+      // 列定义 - 使用现有列配置
+      columns: [
+        { 
+          title: 'ID', 
+          field: 'id', 
+          sorter: 'number', 
+          headerFilter: 'input',
+          width: 80
+        },
+        { 
+          title: '配置名称', 
+          field: 'configName', 
+          sorter: 'string', 
+          headerFilter: 'input',
+          headerFilterFunc: 'like'
+        },
+        { 
+          title: '字段名', 
+          field: 'fieldName', 
+          sorter: 'string', 
+          headerFilter: 'input',
+          headerFilterFunc: 'like'
+        },
+        { 
+          title: '字段类型', 
+          field: 'fieldType', 
+          sorter: 'string', 
+          headerFilter: 'input',
+          headerFilterParams: {
+            values: ['string', 'number', 'boolean', 'array', 'object']
+          }
+        },
+        { 
+          title: '描述', 
+          field: 'fieldDesc', 
+          sorter: 'string', 
+          headerFilter: 'input',
+          headerFilterFunc: 'like',
+          width: 300
+        }
+      ],
+      
+      // 标准远程分页配置
+      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',
+      
+      // // 参数生成器，将Tabulator参数转换为后端期望格式
+      // ajaxParamsGenerator: (url: string, config: any, params: any) => {
+      //   console.log('Tabulator AJAX参数生成器被调用', { url, config });
+      //   console.log('原始params类型:', typeof params);
+      //   console.log('原始params完整结构:', params);
+        
+      //   // 详细分析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);
           
-          // 更新调试信息
-          this.debugInfo.dataSource = 'API数据';
-          this.debugInfo.recordCount = this.totalRecords;
-          this.debugInfo.lastUpdated = new Date().toISOString();
-          this.debugInfo.useMockData = false;
-          this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
-          this.debugInfo.listUrl = this.configMetaService.getListUrl();
-          this.debugInfo.currentPage = page;
-          this.debugInfo.totalPages = Math.ceil(this.totalRecords / this.paginationPageSize);
-          this.debugInfo.pageSize = this.paginationPageSize;
+      //     // 检查可能的别名
+      //     console.log('sorters存在?:', 'sorters' in params);
+      //     console.log('filters存在?:', 'filters' in params);
+      //   }
+        
+      //   // 处理params为undefined的情况
+      //   if (!params) {
+      //     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('生成的请求参数:', request);
+      //   return request;
+      // },
+      
+      // 响应处理，将后端响应转换为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);
           
-          console.log(`数据加载成功: ${result.data.length}条记录，总计: ${this.totalRecords}`);
-          console.log('数据示例:', result.data.slice(0, 3)); // 打印前3条数据
-        } else {
-          console.error('数据加载失败:', result);
-          // 如果API失败，切换到模拟数据用于调试
-          this.debugInfo.useMockData = true;
-          this.updateDataConfig();
-        }
+      //     return {
+      //       data: data,
+      //       last_page: lastPage
+      //     };
+      //   }
         
-        this.cdRef.detectChanges();
-      },
-       error: (error: HttpErrorResponse) => {
-         this.loading = false;
-         console.error('加载数据时出错:', error);
-         console.error('错误详情:', error.error);
-         
-         // 设置错误消息
-         this.errorMessage = `加载数据失败: ${error.status} ${error.statusText}`;
-         
-         // API调用失败，切换到模拟数据
-         this.debugInfo.useMockData = true;
-         this.updateDataConfig();
-         
-         this.cdRef.detectChanges();
-       }
-    });
-  }
-
-  /**
-   * 生成模拟数据（用于调试）
-   */
-  private generateMockData(): ConfigMeta[] {
-    const mockData: ConfigMeta[] = [];
-    const configs = ['app', 'database', 'redis', 'logger', 'cache'];
-    const fieldTypes = ['string', 'int', 'bool', 'config', 'array'];
-    
-    for (let i = 1; i <= 200; i++) {
-      const configIndex = i % configs.length;
-      mockData.push({
-        id: `config-${i}`,
-        configName: configs[configIndex],
-        fieldName: `field_${i}`,
-        fieldType: fieldTypes[i % fieldTypes.length],
-        yamlName: `yaml.field.${i}`,
-        fieldDesc: `这是第 ${i} 个配置字段的描述`,
-        creator: `user_${(i % 5) + 1}`,
-        createdAt: new Date(Date.now() - i * 86400000).toISOString()
-      });
-    }
-    return mockData;
-  }
-
-  /**
-   * Tabulator事件处理器
-   */
-  
-  onDataLoading(event: any): void {
-    console.log('数据加载中:', event);
-    this.loading = true;
-    this.cdRef.detectChanges();
-  }
-
-  onDataLoaded(event: any): void {
-    console.log('数据加载完成:', event);
-    this.loading = false;
-    
-    // 提取实际数据
-    let data: any[] = [];
-    let totalCount = 0;
-    let lastPage = 0;
-    
-    if (this.debugInfo.useMockData) {
-      // 模拟数据模式下，event是数据数组
-      data = Array.isArray(event) ? event : [];
-      totalCount = data.length;
-      this.totalRecords = totalCount;
+      //   // 如果响应格式不符合预期，返回空数据
+      //   console.warn('响应格式不符合预期:', response);
+      //   return {
+      //     data: [],
+      //     last_page: 0
+      //   };
+      // },
       
-      // 更新调试信息
-      this.debugInfo.dataSource = '模拟数据';
-      this.debugInfo.recordCount = totalCount;
-      this.debugInfo.lastUpdated = new Date().toISOString();
-      this.debugInfo.registerUrl = '模拟数据 - 无API调用';
-      this.debugInfo.listUrl = '模拟数据 - 无API调用';
-      this.debugInfo.totalPages = Math.ceil(totalCount / this.paginationPageSize);
-    } else {
-      // 远程数据模式下，event是Tabulator格式 { last_page, data }
-      if (event && typeof event === 'object') {
-        if ('data' in event) {
-          data = Array.isArray(event.data) ? event.data : [];
+      tableAjaxError: (error: any) => {
+        console.error('Tabulator AJAX错误:', error);
+        if (error.status === 401 || error.status === 403) {
+          console.warn('认证失败，跳转到登录页面');
+          this.authService.logout();
         }
-        if ('last_page' in event) {
-          lastPage = event.last_page;
-          totalCount = lastPage * this.paginationPageSize;
-          this.totalRecords = totalCount;
-          this.debugInfo.totalPages = lastPage;
-        }
-      }
+      },
       
-      // 更新调试信息
-      this.debugInfo.dataSource = 'API数据';
-      this.debugInfo.recordCount = totalCount;
-      this.debugInfo.lastUpdated = new Date().toISOString();
-      this.debugInfo.useMockData = false;
-      this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
-      this.debugInfo.listUrl = this.configMetaService.getListUrl();
-    }
-    
-    // 更新配置列表
-    this.configMetaList = data;
-    console.log(`数据加载完成: ${data.length}条记录，总计: ${totalCount}条`);
-    
-    this.cdRef.detectChanges();
-  }
-
-  onDataLoadError(error: any): void {
-    console.error('数据加载错误:', error);
-    this.loading = false;
-    this.cdRef.detectChanges();
-  }
-
-  onPageLoaded(page: number): void {
-    console.log('页面加载:', page);
-    this.currentPage = page;
-    this.debugInfo.currentPage = page;
-    this.cdRef.detectChanges();
-  }
-
-  onRowClick(event: any): void {
-    console.log('行点击:', event);
-  }
-
-  onRowSelected(event: any): void {
-    console.log('行选中:', event);
-  }
-
-
-
-
-
-
-
-
-
-
-
-  ngAfterViewInit() {
-    console.log('ServiceRegisterConfigComponent view initialized');
-    // 注意：滚动检测现在由 sticky-header 组件自动处理
-    // 通过 [autoDetect]="true" 启用
-  }
-
-  /**
-   * 根据模拟数据状态更新数据配置
-   */
-  private updateDataConfig(): void {
-    console.log('更新数据配置，当前useMockData:', this.debugInfo.useMockData);
-    
-    if (this.debugInfo.useMockData) {
-      // 使用模拟数据，设置静态数据
-      this.tableData = this.generateMockData();
-      console.log('使用模拟数据:', {
-        dataLength: this.tableData.length,
-        paginationMode: 'local'
-      });
-    } else {
-      // 使用真实API，清空静态数据，将通过loadData()加载
-      this.tableData = [];
-      console.log('使用API数据:', {
-        dataLength: this.tableData.length,
-        paginationMode: 'remote'
-      });
-    }
-  }
-
-
-
-
 
-   ngOnDestroy() {
-    console.log('ServiceRegisterConfigComponent destroyed');
-    // 注意：滚动监听器现在由 sticky-header 组件自动管理
+      
+      // 表格样式
+      layout: 'fitColumns',
+      responsiveLayout: 'collapse',
+      height: '800px',
+      
+      // 初始加载
+      ajaxInitialLoad: true,
+      
+      // 分页位置
+      paginationCounter: 'rows',
+      paginationButtonCount: 5
+    });
   }
+  
 
-   onRegister() {
+  onRegister() {
      console.log('注册按钮被点击');
      this.registering = true;
      
      this.configMetaService.initConfigMeta().subscribe({
        next: (result: any) => {
          this.registering = false;
-         this.errorMessage = null;
+         //this.errorMessage = null;
          if (result.success) {
            console.log('注册完成:', result.data);
            
            // 注册后切换到真实API数据
-           this.debugInfo.useMockData = false;
-           this.updateDataConfig();
+           //this.debugInfo.useMockData = false;
+           //this.updateDataConfig();
            
            // 重新加载数据
-           this.loadData(1);
+           //this.loadData(1);
            
            console.log('注册成功，数据已重新加载');
          } else {
            console.error('注册失败:', result);
          }
        },
-       error: (error: HttpErrorResponse) => {
-         this.registering = false;
-         console.error('注册时出错:', error);
-         this.errorMessage = `注册失败: ${error.status} ${error.statusText}`;
-       }
+      
      });
    }
+  /**
+   * 刷新表格 - 重新加载数据
+   */
+  refresh(): void {
+    if (this.tabulator) {
+      this.tabulator.replaceData();
+    }
+  }
+  
+  /**
+   * 重置筛选和排序
+   */
+  reset(): void {
+    if (this.tabulator) {
+      this.tabulator.clearFilter();
+      this.tabulator.clearSort();
+    }
+  }
+
+  /**
+   * 刷新表格 - 模板别名
+   */
+  refreshTable(): void {
+    this.refresh();
+  }
+
+  /**
+   * 重置表格 - 模板别名
+   */
+  resetTable(): void {
+    this.reset();
+  }
+
+  /**
+   * 导出数据
+   */
+  exportData(): void {
+    if (this.tabulator) {
+      this.tabulator.download('csv', 'config-meta-data.csv');
+    }
+  }
 }

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

@@ -3,6 +3,8 @@ 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 { CONFIG_NAMES, FIELD_TYPES } from '../models/config-meta.constants';
+import { MockDataUtil } from '../utils/mock-data.util';
 import { ConfigService } from 'base-core';
 import { QueryResult } from './auth.service';
 
@@ -11,7 +13,7 @@ import { QueryResult } from './auth.service';
 })
 export class ConfigMetaService {
   private initApiPath = '/init/config/meta';
-  private listApiPath = '/config/meta/list';
+  private listApiPath = '/tabulator/config/meta/list';
 
   constructor(
     private http: HttpClient,
@@ -115,73 +117,11 @@ export class ConfigMetaService {
       );
   }
 
-  private generateMockConfigMetaList(): ConfigMeta[] {
-    const mockList: ConfigMeta[] = [];
-    const configs = ['app', 'database', 'redis', 'logger', 'cache'];
-    const fieldTypes = ['string', 'int', 'bool', 'config', 'array'];
-    
-    for (let i = 1; i <= 20; i++) {
-      const configIndex = i % configs.length;
-      mockList.push({
-        id: `config-${i}`,
-        configName: configs[configIndex],
-        fieldName: `field_${i}`,
-        fieldType: fieldTypes[i % fieldTypes.length],
-        yamlName: `yaml.field.${i}`,
-        fieldDesc: `这是第 ${i} 个配置字段的描述`,
-        creator: `user_${(i % 5) + 1}`,
-        createdAt: new Date(Date.now() - i * 86400000).toISOString()
-      });
-    }
-    return mockList;
-  }
+   private generateMockConfigMetaList(): ConfigMeta[] {
+     return MockDataUtil.generateConfigMetaList(20);
+   }
 
-  private generateMockPaginatedData(request: ConfigMetaQueryRequest): PaginatedQueryResult<ConfigMeta[]> {
-    // 生成完整的模拟数据
-    const allData = this.generateMockConfigMetaList();
-    
-    // 应用过滤条件
-    let filteredData = allData.filter(item => {
-      if (request.configName && !item.configName.toLowerCase().includes(request.configName.toLowerCase())) {
-        return false;
-      }
-      if (request.fieldName && !item.fieldName.toLowerCase().includes(request.fieldName.toLowerCase())) {
-        return false;
-      }
-      if (request.yamlName && !item.yamlName.toLowerCase().includes(request.yamlName.toLowerCase())) {
-        return false;
-      }
-      return true;
-    });
-    
-    // 应用排序
-    if (request.sortField) {
-      const sortField = request.sortField as keyof ConfigMeta;
-      const sortOrder = request.sortOrder === 'desc' ? -1 : 1;
-      
-      filteredData.sort((a, b) => {
-        const aVal = a[sortField] || '';
-        const bVal = b[sortField] || '';
-        
-        if (aVal < bVal) return -1 * sortOrder;
-        if (aVal > bVal) return 1 * sortOrder;
-        return 0;
-      });
-    }
-    
-    const totalCount = filteredData.length;
-    
-    // 应用分页
-    const page = request.page || 0;
-    const pageSize = request.pageSize || 10;
-    const startIndex = page * pageSize;
-    const endIndex = startIndex + pageSize;
-    const pagedData = filteredData.slice(startIndex, endIndex);
-    
-    return {
-      success: true,
-      data: pagedData,
-      totalCount: totalCount
-    };
-  }
+   private generateMockPaginatedData(request: ConfigMetaQueryRequest): PaginatedQueryResult<ConfigMeta[]> {
+     return MockDataUtil.generateMockPaginatedData(request, 100);
+   }
 }

src/app/services/debug-info.service.ts

@@ -0,0 +1,94 @@
+import { Injectable } from '@angular/core';
+import { DEBUG_INFO_DEFAULTS } from '../models/config-meta.constants';
+
+export interface DebugInfo {
+  dataSource: string;
+  recordCount: number;
+  lastUpdated: string;
+  useMockData: boolean;
+  registerUrl: string;
+  listUrl: string;
+  currentPage: number;
+  totalPages: number;
+  pageSize: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DebugInfoService {
+  private debugInfo: DebugInfo = { ...DEBUG_INFO_DEFAULTS };
+
+  /**
+   * 获取当前调试信息
+   */
+  getDebugInfo(): DebugInfo {
+    return { ...this.debugInfo };
+  }
+
+  /**
+   * 更新调试信息（部分更新）
+   */
+  updateDebugInfo(updates: Partial<DebugInfo>): void {
+    this.debugInfo = { ...this.debugInfo, ...updates };
+  }
+
+  /**
+   * 重置为默认值
+   */
+  reset(): void {
+    this.debugInfo = { ...DEBUG_INFO_DEFAULTS };
+  }
+
+  /**
+   * 更新为远程API数据模式
+   */
+  updateForRemoteData(
+    recordCount: number,
+    currentPage: number,
+    totalPages: number,
+    pageSize: number,
+    registerUrl: string,
+    listUrl: string
+  ): void {
+    this.updateDebugInfo({
+      dataSource: 'API数据',
+      recordCount,
+      lastUpdated: new Date().toISOString(),
+      useMockData: false,
+      registerUrl,
+      listUrl,
+      currentPage,
+      totalPages,
+      pageSize
+    });
+  }
+
+  /**
+   * 更新为模拟数据模式
+   */
+  updateForMockData(recordCount: number, totalPages: number, pageSize: number): void {
+    this.updateDebugInfo({
+      dataSource: '模拟数据',
+      recordCount,
+      lastUpdated: new Date().toISOString(),
+      useMockData: true,
+      registerUrl: '模拟数据 - 无API调用',
+      listUrl: '模拟数据 - 无API调用',
+      totalPages,
+      pageSize
+    });
+  }
+
+  /**
+   * 更新分页信息
+   */
+  updatePagination(currentPage: number, totalRecords: number, pageSize: number): void {
+    const totalPages = Math.ceil(totalRecords / pageSize);
+    this.updateDebugInfo({
+      currentPage,
+      totalPages,
+      pageSize
+    });
+  }
+}

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

@@ -0,0 +1,220 @@
+// config-meta.mock.data.ts
+// 完全独立的模拟数据文件，不依赖任何其他模块
+
+/**
+ * 配置元数据结构定义
+ */
+export interface MockConfigMeta {
+  id: number;
+  configName: string;
+  fieldName: string;
+  yamlName: string;
+  fieldType: string;
+  description: string;
+  defaultValue?: string;
+  isRequired?: boolean;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+/**
+ * 分页查询请求参数
+ */
+export interface MockQueryRequest {
+  page?: number;
+  pageSize?: number;
+  sort?: Array<{field: string; order: 'ASC' | 'DESC'}>;
+  filter?: {[key: string]: {type: string; value: string; operator?: string}};
+}
+
+/**
+ * 分页查询结果
+ */
+export interface MockPaginatedResult {
+  success: boolean;
+  data: MockConfigMeta[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  message?: string;
+}
+
+/**
+ * 模拟数据生成器
+ */
+export class MockDataGenerator {
+  // 静态模拟数据 - 直接硬编码
+  private static mockData: MockConfigMeta[] = [];
+
+  // 初始化模拟数据
+  static initialize() {
+    if (this.mockData.length > 0) return;
+    
+    const configNames = ['用户配置', '系统配置', '数据库配置', '缓存配置', '安全配置', '日志配置'];
+    const fieldTypes = ['string', 'number', 'boolean', 'array', 'object'];
+    
+    // 生成100条模拟数据
+    for (let i = 1; i <= 100; i++) {
+      const configIdx = Math.floor(Math.random() * configNames.length);
+      const typeIdx = Math.floor(Math.random() * fieldTypes.length);
+      
+      this.mockData.push({
+        id: i,
+        configName: configNames[configIdx],
+        fieldName: `field_${this.generateRandomName()}_${i}`,
+        yamlName: `config.${configNames[configIdx].replace('配置', '').toLowerCase()}.field_${i}`,
+        fieldType: fieldTypes[typeIdx],
+        description: `这是${configNames[configIdx]}的第${i}个字段，类型为${fieldTypes[typeIdx]}`,
+        defaultValue: i % 3 === 0 ? 'default_value' : undefined,
+        isRequired: i % 2 === 0,
+        createdAt: new Date(),
+        updatedAt: new Date()
+      });
+    }
+    
+    console.log(`✅ 生成 ${this.mockData.length} 条模拟数据`);
+  }
+
+  // 生成随机名称
+  private static generateRandomName(): string {
+    const prefixes = ['user', 'sys', 'db', 'cache', 'log', 'auth', 'api', 'web'];
+    const suffixes = ['name', 'id', 'type', 'status', 'time', 'date', 'count', 'size'];
+    return `${prefixes[Math.floor(Math.random() * prefixes.length)]}_${suffixes[Math.floor(Math.random() * suffixes.length)]}`;
+  }
+
+  /**
+   * 获取分页数据
+   */
+  static getPaginatedData(request: MockQueryRequest): Promise<MockPaginatedResult> {
+    this.initialize();
+    
+    // 深拷贝数据以避免修改原数据
+    let filteredData = [...this.mockData];
+    
+    console.log('📊 模拟请求参数:', request);
+    
+    // 1. 应用筛选
+    if (request.filter) {
+      Object.keys(request.filter).forEach(field => {
+        const filter = request.filter![field];
+        if (filter && filter.value !== undefined && filter.value !== '') {
+          filteredData = filteredData.filter(item => {
+            const fieldValue = String((item as any)[field] || '').toLowerCase();
+            const filterValue = String(filter.value || '').toLowerCase();
+            
+            if (filter.operator === 'contains' || filter.type === 'like') {
+              return fieldValue.includes(filterValue);
+            } else if (filter.operator === 'equals' || filter.type === '=') {
+              return fieldValue === filterValue;
+            }
+            return true;
+          });
+        }
+      });
+    }
+    
+    // 2. 应用排序
+    if (request.sort && request.sort.length > 0) {
+      filteredData.sort((a, b) => {
+        for (const sortItem of request.sort!) {
+          const aValue = (a as any)[sortItem.field];
+          const bValue = (b as any)[sortItem.field];
+          
+          if (aValue !== bValue) {
+            const comparison = String(aValue).localeCompare(String(bValue));
+            return sortItem.order === 'ASC' ? comparison : -comparison;
+          }
+        }
+        return 0;
+      });
+    }
+    
+    // 3. 分页
+    const page = request.page || 1;
+    const pageSize = request.pageSize || 20;
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, filteredData.length);
+    const pagedData = filteredData.slice(startIndex, endIndex);
+    
+    // 构建结果
+    const result: MockPaginatedResult = {
+      success: true,
+      data: pagedData,
+      totalCount: filteredData.length,
+      page: page,
+      pageSize: pageSize,
+      totalPages: Math.ceil(filteredData.length / pageSize),
+      message: '模拟数据加载成功'
+    };
+    
+    console.log(`📈 模拟响应: 第${page}页，共${result.totalPages}页，${pagedData.length}条数据，总计${filteredData.length}条`);
+    
+    // 模拟网络延迟
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(result);
+      }, 300);
+    });
+  }
+
+  /**
+   * 获取所有数据（不分页）
+   */
+  static getAllData(): MockConfigMeta[] {
+    this.initialize();
+    return [...this.mockData];
+  }
+
+  /**
+   * 根据ID获取单条数据
+   */
+  static getById(id: number): MockConfigMeta | undefined {
+    this.initialize();
+    return this.mockData.find(item => item.id === id);
+  }
+
+  /**
+   * 搜索数据
+   */
+  static search(keyword: string): MockConfigMeta[] {
+    this.initialize();
+    if (!keyword.trim()) return [...this.mockData];
+    
+    const lowerKeyword = keyword.toLowerCase();
+    return this.mockData.filter(item =>
+      item.configName.toLowerCase().includes(lowerKeyword) ||
+      item.fieldName.toLowerCase().includes(lowerKeyword) ||
+      item.description.toLowerCase().includes(lowerKeyword)
+    );
+  }
+
+  /**
+   * 获取统计数据
+   */
+  static getStats() {
+    this.initialize();
+    const stats = {
+      total: this.mockData.length,
+      byConfigName: {} as {[key: string]: number},
+      byFieldType: {} as {[key: string]: number}
+    };
+    
+    this.mockData.forEach(item => {
+      stats.byConfigName[item.configName] = (stats.byConfigName[item.configName] || 0) + 1;
+      stats.byFieldType[item.fieldType] = (stats.byFieldType[item.fieldType] || 0) + 1;
+    });
+    
+    return stats;
+  }
+}
+
+// 导出类型和类
+export type {
+  MockConfigMeta as ConfigMeta,
+  MockQueryRequest as ConfigMetaQueryRequest,
+  MockPaginatedResult as PaginatedQueryResult
+};
+
+// 默认导出数据生成器
+export default MockDataGenerator;

src/app/utils/mock-data.util.ts

@@ -0,0 +1,131 @@
+/**
+ * 模拟数据生成工具类
+ * 为配置元信息生成一致的模拟数据
+ */
+import { ConfigMeta, ConfigMetaQueryRequest, PaginatedQueryResult } from '../models/config-meta.model';
+import { CONFIG_NAMES, FIELD_TYPES } from '../models/config-meta.constants';
+
+export class MockDataUtil {
+  /**
+   * 生成配置元信息模拟数据
+   * @param count 生成数量（默认20）
+   */
+  static generateConfigMetaList(count: number = 20): ConfigMeta[] {
+    const mockList: ConfigMeta[] = [];
+    const configs = [...CONFIG_NAMES];
+    const fieldTypes = [...FIELD_TYPES];
+    
+    for (let i = 1; i <= count; i++) {
+      const configIndex = i % configs.length;
+      mockList.push({
+        id: `config-${i}`,
+        configName: configs[configIndex],
+        fieldName: `field_${i}`,
+        fieldType: fieldTypes[i % fieldTypes.length],
+        yamlName: `yaml.field.${i}`,
+        fieldDesc: `这是第 ${i} 个配置字段的描述`,
+        creator: `user_${(i % 5) + 1}`,
+        createdAt: new Date(Date.now() - i * 86400000).toISOString()
+      });
+    }
+    return mockList;
+  }
+
+  /**
+   * 生成分页模拟数据（支持过滤和排序）
+   */
+  static generateMockPaginatedData(
+    request: ConfigMetaQueryRequest,
+    totalCount: number = 100
+  ): PaginatedQueryResult<ConfigMeta[]> {
+    // 生成完整数据集
+    const allData = this.generateConfigMetaList(totalCount);
+    
+    // 应用过滤条件 - 支持旧字段和新filters数组
+    let filteredData = allData.filter(item => {
+      // 旧字段过滤（向后兼容）
+      if (request.configName && !item.configName.toLowerCase().includes(request.configName.toLowerCase())) {
+        return false;
+      }
+      if (request.fieldName && !item.fieldName.toLowerCase().includes(request.fieldName.toLowerCase())) {
+        return false;
+      }
+      if (request.yamlName && !item.yamlName.toLowerCase().includes(request.yamlName.toLowerCase())) {
+        return false;
+      }
+      
+      // 新filters数组过滤（简单实现）
+      if (request.filters && request.filters.length > 0) {
+        for (const filter of request.filters) {
+          const fieldValue = item[filter.field as keyof ConfigMeta];
+          if (fieldValue === undefined) continue;
+          
+          const fieldStr = String(fieldValue).toLowerCase();
+          const filterStr = String(filter.value).toLowerCase();
+          
+          switch (filter.operator) {
+            case '=':
+              if (fieldStr !== filterStr) return false;
+              break;
+            case '!=':
+              if (fieldStr === filterStr) return false;
+              break;
+            case 'like':
+              if (!fieldStr.includes(filterStr)) return false;
+              break;
+            default:
+              // 其他操作符暂不实现
+              break;
+          }
+        }
+      }
+      return true;
+    });
+    
+    // 应用排序 - 支持旧字段和新sorts数组
+    if (request.sorts && request.sorts.length > 0) {
+      // 使用新sorts数组
+      filteredData.sort((a, b) => {
+        for (const sort of request.sorts!) {
+          const field = sort.field as keyof ConfigMeta;
+          const aVal = a[field] || '';
+          const bVal = b[field] || '';
+          const sortOrder = sort.order === 'desc' ? -1 : 1;
+          
+          if (aVal < bVal) return -1 * sortOrder;
+          if (aVal > bVal) return 1 * sortOrder;
+        }
+        return 0;
+      });
+    } else if (request.sortField) {
+      // 旧字段排序（向后兼容）
+      const sortField = request.sortField as keyof ConfigMeta;
+      const sortOrder = request.sortOrder === 'desc' ? -1 : 1;
+      
+      filteredData.sort((a, b) => {
+        const aVal = a[sortField] || '';
+        const bVal = b[sortField] || '';
+        
+        if (aVal < bVal) return -1 * sortOrder;
+        if (aVal > bVal) return 1 * sortOrder;
+        return 0;
+      });
+    }
+    
+    const finalCount = filteredData.length;
+    
+    // 应用分页
+    const page = request.page || 0;
+    const pageSize = request.pageSize || 10;
+    const startIndex = page * pageSize;
+    const endIndex = startIndex + pageSize;
+    const pagedData = filteredData.slice(startIndex, endIndex);
+    
+    return {
+      success: true,
+      data: pagedData,
+      totalCount: finalCount,
+      message: '模拟数据'
+    };
+  }
+}

src/app/utils/tabulator-mapper.util.ts

@@ -0,0 +1,68 @@
+/**
+ * Tabulator映射工具类
+ * 处理前端字段名、操作符到后端格式的转换
+ */
+import { FIELD_MAPPING, OPERATOR_MAPPING } from '../models/config-meta.constants';
+import { TabulatorSorter, TabulatorFilter, ConfigMetaQueryRequest } from '../models/config-meta.model';
+
+export class TabulatorMapper {
+  /**
+   * 字段名映射：前端字段名 -> 后端字段名
+   */
+  static mapFieldName(field: string): string {
+    return FIELD_MAPPING[field] || field;
+  }
+
+  /**
+   * 操作符映射：Tabulator操作符 -> 后端操作符
+   */
+  static mapOperator(type: string): string {
+    return OPERATOR_MAPPING[type] || '=';
+  }
+
+   /**
+    * 将Tabulator排序器数组转换为后端排序参数数组
+    */
+   static mapSorters(sorters: TabulatorSorter[]): Array<{ field: string; order: string }> {
+     if (!sorters || sorters.length === 0) {
+       return [];
+     }
+ 
+     return sorters.map(sorter => ({
+       field: this.mapFieldName(sorter.field),
+       order: sorter.dir || 'asc'
+     }));
+   }
+ 
+   /**
+    * 将Tabulator筛选器数组转换为后端筛选参数数组
+    */
+   static mapFilters(filters: TabulatorFilter[]): Array<{ field: string; operator: string; value: any }> {
+     if (!filters || filters.length === 0) {
+       return [];
+     }
+ 
+     return filters.map(filter => ({
+       field: this.mapFieldName(filter.field),
+       operator: this.mapOperator(filter.type),
+       value: filter.value
+     }));
+   }
+ 
+   /**
+    * 构建服务端请求参数
+    */
+   static buildServerRequest(
+     page: number,
+     pageSize: number,
+     sorters: TabulatorSorter[] = [],
+     filters: TabulatorFilter[] = []
+   ): ConfigMetaQueryRequest {
+     return {
+       page: page - 1, // 后端从0开始
+       pageSize,
+       sorts: this.mapSorters(sorters),
+       filters: this.mapFilters(filters)
+     };
+   }
+}