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

package-lock.json

@@ -20,7 +20,7 @@
         "marked": "^14.1.4",
         "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"
       },
@@ -13882,9 +13882,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/tapable": {

package.json

@@ -24,7 +24,7 @@
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0",
-    "tabulator-tables": "^5.6.0"
+    "tabulator-tables": "^6.3.1"
   },
   "peerDependencies": {
     "ag-grid-angular": "^35.0.0",

projects/base-core/src/lib/components/index.ts

@@ -4,4 +4,4 @@ export * from './tree-nav/tree-nav.component';
 // export * from './sidebar/sidebar.component';
 // export * from './grid/grid.component';
 // export * from './grid/grid-demo.component';
-export * from './tabulator-table/tabulator-table.component';
+export * from './tabulator-grid/tabulator-grid.component';

projects/base-core/src/lib/components/tabulator-grid/README.md

@@ -0,0 +1,390 @@
+# TabulatorGrid 组件
+
+极简配置的服务端数据表格组件，只需提供API URL和列定义即可自动实现：
+- 服务端分页
+- 服务端排序  
+- 服务端筛选
+- 主题切换
+- 响应式设计
+
+## 安装依赖
+
+确保项目中已安装 `tabulator-tables`：
+
+```bash
+npm install tabulator-tables@^6.3.1
+```
+
+## 基本使用
+
+### 1. 在模块中导入组件
+
+```typescript
+import { TabulatorGridComponent } from 'base-core';
+
+@NgModule({
+  imports: [
+    TabulatorGridComponent
+  ]
+})
+export class YourModule { }
+```
+
+### 2. 在组件中定义列配置
+
+```typescript
+import { TabulatorGridColumn } from 'base-core';
+
+@Component({
+  // ...
+})
+export class YourComponent {
+  // 列定义
+  columns: TabulatorGridColumn[] = [
+    { title: 'ID', field: 'id', width: 80, sorter: 'number' },
+    { title: '姓名', field: 'name', sorter: 'string', headerFilter: true },
+    { title: '年龄', field: 'age', sorter: 'number', headerFilter: 'number' },
+    { title: '邮箱', field: 'email', sorter: 'string', headerFilter: true },
+    { title: '状态', field: 'status', formatter: 'tickCross', hozAlign: 'center' }
+  ];
+
+  // API地址
+  apiUrl = '/api/config/meta/list';
+
+  // 事件处理
+  onSort(event: any) {
+    console.log('排序变化:', event);
+  }
+
+  onFilter(event: any) {
+    console.log('筛选变化:', event);
+  }
+
+  onRowClick(event: any) {
+    console.log('行点击:', event);
+  }
+}
+```
+
+### 3. 在模板中使用
+
+```html
+<lib-tabulator-grid
+  [dataSource]="apiUrl"
+  [columns]="columns"
+  [pageSize]="20"
+  theme="bootstrap4"
+  [showHeaderFilters]="true"
+  (sortChanged)="onSort($event)"
+  (filterChanged)="onFilter($event)"
+  (rowClicked)="onRowClick($event)">
+</lib-tabulator-grid>
+```
+
+## 高级配置
+
+### 使用对象数据源
+
+```typescript
+dataSource = {
+  url: '/api/config/meta/list',
+  method: 'POST', // 默认POST
+  headers: {
+    'Authorization': 'Bearer token'
+  },
+  params: {
+    tenantId: '123'
+  },
+  // 自定义请求映射
+  requestMapper: (params) => {
+    return {
+      ...params,
+      extraParam: 'value'
+    };
+  },
+  // 自定义响应映射
+  responseMapper: (response) => {
+    return {
+      data: response.data,
+      total: response.totalCount,
+      last_page: Math.ceil(response.totalCount / 20)
+    };
+  }
+};
+```
+
+### 字段映射和操作符映射
+
+```typescript
+config = {
+  fieldMapping: {
+    'name': 'user_name',
+    'age': 'user_age',
+    'email': 'user_email'
+  },
+  operatorMapping: {
+    'contains': 'like',
+    'startsWith': 'like',
+    'endsWith': 'like'
+  }
+};
+```
+
+### 完整配置示例
+
+```typescript
+import { TabulatorGridConfig } from 'base-core';
+
+@Component({
+  // ...
+})
+export class YourComponent {
+  columns = [
+    { title: 'ID', field: 'id', width: 80, sorter: 'number' },
+    { title: '配置名称', field: 'configName', sorter: 'string', headerFilter: true },
+    { title: '字段名', field: 'fieldName', sorter: 'string', headerFilter: true },
+    { title: '字段类型', field: 'fieldType', sorter: 'string', headerFilter: 'select' },
+    { title: 'YAML标签', field: 'yamlName', sorter: 'string', headerFilter: true },
+    { title: '创建时间', field: 'createdAt', sorter: 'date', formatter: 'datetime' }
+  ];
+
+  dataSource = {
+    url: '/api/tabulator/config/meta/list',
+    method: 'POST'
+  };
+
+  config: TabulatorGridConfig = {
+    height: '600px',
+    layout: 'fitData',
+    placeholder: '暂无配置数据',
+    fieldMapping: {
+      'configName': 'config_name',
+      'fieldName': 'field_name', 
+      'fieldType': 'field_type',
+      'yamlName': 'yaml_name',
+      'createdAt': 'created_at'
+    },
+    operatorMapping: {
+      '=': '=',
+      'like': 'like',
+      '>': 'gt',
+      '<': 'lt'
+    }
+  };
+
+  pageSize = 20;
+  theme = 'bootstrap5';
+  showHeaderFilters = true;
+}
+```
+
+## 支持的Tabulator主题
+
+- `default` - 默认主题
+- `bootstrap` - Bootstrap 3
+- `bootstrap4` - Bootstrap 4 (默认)
+- `bootstrap5` - Bootstrap 5
+- `materialize` - Materialize
+- `semanticui` - Semantic UI
+- `bulma` - Bulma
+- `simple` - 简约主题
+- `midnight` - 深色主题
+- `modern` - 现代主题
+
+## 事件API
+
+| 事件 | 描述 | 事件数据 |
+|------|------|----------|
+| `sortChanged` | 排序变化时触发 | `{ sorters: Array<{field, dir}> }` |
+| `filterChanged` | 筛选变化时触发 | `{ filters: Array<{field, type, value}> }` |
+| `pageChanged` | 分页变化时触发 | `{ page: number, pageSize: number }` |
+| `rowClicked` | 行点击时触发 | `{ row: any, event?: Event }` |
+| `dataLoaded` | 数据加载完成时触发 | `data: any[]` |
+| `loadingStateChanged` | 加载状态变化时触发 | `loading: boolean` |
+| `error` | 发生错误时触发 | `error: any` |
+
+## 公共API方法
+
+| 方法 | 描述 | 参数 |
+|------|------|------|
+| `reloadData()` | 重新加载数据 | 无 |
+| `loadData()` | 加载数据 | 无 |
+| `setFilters(filters)` | 设置筛选器 | `filters: Array<{field, type, value}>` |
+| `setSort(sorters)` | 设置排序 | `sorters: Array<{field, dir}>` |
+| `getData()` | 获取当前数据 | 无 |
+| `getSelectedData()` | 获取选中的数据 | 无 |
+| `getCurrentPage()` | 获取当前页码 | 无 |
+| `setPage(page)` | 跳转到指定页码 | `page: number` |
+| `getTotalPages()` | 获取总页数 | 无 |
+
+## 后端API要求
+
+组件期望后端API支持以下格式：
+
+### 请求格式
+```json
+{
+  "page": 1,
+  "size": 20,
+  "sorters": [
+    { "field": "field_name", "dir": "asc" }
+  ],
+  "filters": [
+    { "field": "config_name", "type": "like", "value": "search" }
+  ]
+}
+```
+
+### 响应格式
+```json
+{
+  "last_page": 5,
+  "data": [
+    { "id": 1, "config_name": "database", "field_name": "host", "field_type": "string" }
+  ],
+  "total": 100
+}
+```
+
+## 适配现有后端API
+
+如果后端API格式不同，可以使用 `requestMapper` 和 `responseMapper` 进行适配：
+
+```typescript
+dataSource = {
+  url: '/api/config/meta/list',
+  requestMapper: (params) => {
+    // 转换为后端需要的格式
+    return {
+      page: params.page,
+      pageSize: params.size,
+      sortField: params.sorters[0]?.field,
+      sortOrder: params.sorters[0]?.dir,
+      filters: params.filters
+    };
+  },
+  responseMapper: (response) => {
+    // 转换为Tabulator需要的格式
+    return {
+      last_page: Math.ceil(response.totalCount / response.pageSize),
+      data: response.data,
+      total: response.totalCount
+    };
+  }
+};
+```
+
+## 样式定制
+
+组件提供了一些CSS类用于样式定制：
+
+```css
+/* 紧凑模式 */
+.tabulator-grid-compact .tabulator-grid-wrapper { /* ... */ }
+
+/* 边框模式 */
+.tabulator-grid-bordered .tabulator-grid-wrapper { /* ... */ }
+
+/* 深色主题适配 */
+:host-context(.dark-theme) .tabulator-grid-wrapper { /* ... */ }
+```
+
+## 响应式设计
+
+组件在不同屏幕尺寸下自动适配：
+- 在大屏幕上显示完整分页控件
+- 在移动设备上简化分页布局
+- 自动调整列宽和布局
+
+## 常见问题
+
+### 1. 表格不显示数据？
+- 检查API地址是否正确
+- 检查网络请求是否成功
+- 查看浏览器控制台错误信息
+- 确认后端API返回正确的格式
+
+### 2. 排序/筛选不工作？
+- 确认后端API支持排序和筛选
+- 检查字段映射是否正确
+- 查看请求参数格式
+
+### 3. 样式不正确？
+- 确认已导入Tabulator的CSS文件
+- 检查主题名称是否正确
+- 查看是否有CSS冲突
+
+### 4. 如何自定义列样式？
+- 在列定义中使用 `cssClass` 属性
+- 使用Tabulator原生的格式化器
+- 通过CSS选择器覆盖样式
+
+## 示例：配置元数据表格
+
+这是一个完整的配置元数据表格示例：
+
+```typescript
+import { Component } from '@angular/core';
+import { TabulatorGridComponent, TabulatorGridColumn } from 'base-core';
+
+@Component({
+  selector: 'app-config-meta-grid',
+  template: `
+    <lib-tabulator-grid
+      [dataSource]="dataSource"
+      [columns]="columns"
+      [pageSize]="15"
+      [config]="config"
+      theme="bootstrap5"
+      (rowClicked)="onRowClick($event)">
+    </lib-tabulator-grid>
+  `,
+  imports: [TabulatorGridComponent]
+})
+export class ConfigMetaGridComponent {
+  columns: TabulatorGridColumn[] = [
+    { title: 'ID', field: 'id', width: 80, sorter: 'number' },
+    { title: '配置名称', field: 'configName', width: 150, sorter: 'string', headerFilter: true },
+    { title: '字段名', field: 'fieldName', width: 150, sorter: 'string', headerFilter: true },
+    { title: '字段类型', field: 'fieldType', width: 120, sorter: 'string', headerFilter: 'select' },
+    { title: 'YAML标签', field: 'yamlName', width: 150, sorter: 'string', headerFilter: true },
+    { title: '字段描述', field: 'fieldDesc', width: 200, formatter: 'textarea' },
+    { title: '创建者', field: 'creator', width: 120, sorter: 'string' },
+    { title: '创建时间', field: 'createdAt', width: 180, sorter: 'date', formatter: 'datetime' }
+  ];
+
+  dataSource = {
+    url: '/api/tabulator/config/meta/list',
+    method: 'POST'
+  };
+
+  config = {
+    height: 'calc(100vh - 200px)',
+    layout: 'fitData',
+    fieldMapping: {
+      'configName': 'config_name',
+      'fieldName': 'field_name',
+      'fieldType': 'field_type',
+      'yamlName': 'yaml_name',
+      'fieldDesc': 'field_desc',
+      'createdAt': 'created_at'
+    }
+  };
+
+  onRowClick(event: any) {
+    console.log('选中行:', event.row);
+    // 可以在这里打开详情对话框等
+  }
+}
+```
+
+## 支持的后端框架
+
+组件已与以下后端框架集成：
+
+1. **Go (svc-configure)** - 使用 `TabulatorRequest` 和 `CreateTabulatorResponse`
+2. **Node.js/Express** - 参考请求/响应格式
+3. **Java/Spring Boot** - 参考请求/响应格式
+4. **Python/Django/Flask** - 参考请求/响应格式
+
+具体集成代码请参考项目中的 `svc-configure` 服务实现。

projects/base-core/src/lib/components/tabulator-grid/index.ts

@@ -0,0 +1 @@
+export * from './tabulator-grid.component';

projects/base-core/src/lib/components/tabulator-grid/tabulator-grid.component.html

@@ -0,0 +1,25 @@
+<div class="tabulator-grid-wrapper">
+  <!-- 加载状态指示器 -->
+  <div class="tabulator-grid-loading" *ngIf="isDataLoading">
+    <div class="loading-spinner">
+      <div class="spinner"></div>
+      <div class="loading-text">{{ loadingText }}</div>
+    </div>
+  </div>
+
+  <!-- 表格容器 -->
+  <div #tableContainer class="tabulator-grid-container"></div>
+
+  <!-- 空状态提示 -->
+  <div class="tabulator-grid-empty" *ngIf="!isDataLoading && (dataCount === 0)">
+    <div class="empty-icon">
+      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+        <path d="M3 3h18v18H3zM9 9h6M9 13h6M9 17h4"/>
+      </svg>
+    </div>
+    <div class="empty-text">
+      <h3>暂无数据</h3>
+      <p>当前表格没有数据，请检查数据源或筛选条件</p>
+    </div>
+  </div>
+</div>

projects/base-core/src/lib/components/tabulator-grid/tabulator-grid.component.scss

@@ -0,0 +1,307 @@
+@use 'sass:math';
+
+.tabulator-grid-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+
+  .tabulator-grid-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px);
+
+    .loading-spinner {
+      text-align: center;
+      padding: 2rem;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      .spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid #f3f3f3;
+        border-top: 3px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 0 auto 1rem;
+      }
+
+      .loading-text {
+        color: #666;
+        font-size: 0.875rem;
+      }
+    }
+  }
+
+  .tabulator-grid-container {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+
+    // 覆盖Tabulator默认样式
+    .tabulator {
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      overflow: hidden;
+
+      // 表头样式
+      .tabulator-header {
+        background-color: #f8f9fa;
+        border-bottom: 1px solid #dee2e6;
+
+        .tabulator-col {
+          background-color: transparent;
+          border-right: 1px solid #dee2e6;
+          font-weight: 600;
+          color: #495057;
+
+          &:hover {
+            background-color: #e9ecef;
+          }
+
+          .tabulator-col-content {
+            padding: 0.75rem 0.5rem;
+          }
+        }
+      }
+
+      // 表体样式
+      .tabulator-tableholder {
+        background-color: white;
+
+        .tabulator-table {
+          .tabulator-row {
+            border-bottom: 1px solid #dee2e6;
+
+            &:hover {
+              background-color: #f8f9fa;
+            }
+
+            &.tabulator-selected {
+              background-color: #e3f2fd;
+            }
+
+            .tabulator-cell {
+              padding: 0.5rem;
+              border-right: 1px solid #dee2e6;
+              color: #212529;
+
+              &:last-child {
+                border-right: none;
+              }
+            }
+          }
+        }
+      }
+
+      // 分页样式
+      .tabulator-footer {
+        background-color: #f8f9fa;
+        border-top: 1px solid #dee2e6;
+        padding: 0.5rem;
+
+        .tabulator-paginator {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 1rem;
+
+          .tabulator-page-size {
+            select {
+              padding: 0.25rem 0.5rem;
+              border: 1px solid #ced4da;
+              border-radius: 4px;
+              background-color: white;
+              color: #495057;
+            }
+          }
+
+          .tabulator-pages {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            .tabulator-page {
+              min-width: 2rem;
+              height: 2rem;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border: 1px solid #ced4da;
+              border-radius: 4px;
+              background-color: white;
+              color: #495057;
+              cursor: pointer;
+              font-size: 0.875rem;
+
+              &:hover:not(.disabled):not(.active) {
+                background-color: #e9ecef;
+                border-color: #adb5bd;
+              }
+
+              &.active {
+                background-color: #007bff;
+                border-color: #007bff;
+                color: white;
+              }
+
+              &.disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tabulator-grid-empty {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    padding: 3rem;
+    max-width: 400px;
+    color: #6c757d;
+
+    .empty-icon {
+      margin-bottom: 1.5rem;
+
+      svg {
+        color: #adb5bd;
+        margin: 0 auto;
+      }
+    }
+
+    .empty-text {
+      h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: #495057;
+      }
+
+      p {
+        font-size: 0.875rem;
+        line-height: 1.5;
+        margin: 0;
+      }
+    }
+  }
+}
+
+// 主题适配
+:host-context(.dark-theme) {
+  .tabulator-grid-wrapper {
+    .tabulator-grid-loading {
+      background: rgba(0, 0, 0, 0.7);
+
+      .loading-spinner {
+        background: #2d3748;
+        color: #e2e8f0;
+
+        .spinner {
+          border-color: #4a5568;
+          border-top-color: #63b3ed;
+        }
+
+        .loading-text {
+          color: #a0aec0;
+        }
+      }
+    }
+
+    .tabulator-grid-empty {
+      color: #a0aec0;
+
+      .empty-icon svg {
+        color: #718096;
+      }
+
+      .empty-text h3 {
+        color: #e2e8f0;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .tabulator-grid-wrapper {
+    .tabulator-grid-container {
+      .tabulator {
+        .tabulator-footer {
+          .tabulator-paginator {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 0.75rem;
+
+            .tabulator-pages {
+              justify-content: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 动画
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// 工具类
+.tabulator-grid-compact {
+  .tabulator-grid-wrapper {
+    .tabulator-grid-container {
+      .tabulator {
+        .tabulator-header {
+          .tabulator-col {
+            .tabulator-col-content {
+              padding: 0.5rem 0.25rem;
+            }
+          }
+        }
+
+        .tabulator-table {
+          .tabulator-row {
+            .tabulator-cell {
+              padding: 0.375rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.tabulator-grid-bordered {
+  .tabulator-grid-wrapper {
+    .tabulator-grid-container {
+      .tabulator {
+        border: 1px solid #dee2e6;
+        border-radius: 8px;
+
+        .tabulator-header,
+        .tabulator-tableholder,
+        .tabulator-footer {
+          border: none;
+        }
+      }
+    }
+  }
+}

projects/base-core/src/lib/components/tabulator-grid/tabulator-grid.component.spec.ts

@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TabulatorGridComponent } from './tabulator-grid.component';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('TabulatorGridComponent', () => {
+  let component: TabulatorGridComponent;
+  let fixture: ComponentFixture<TabulatorGridComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TabulatorGridComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TabulatorGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default properties', () => {
+    expect(component.pageSize).toBe(10);
+    expect(component.theme).toBe('bootstrap4');
+    expect(component.showHeaderFilters).toBe(true);
+    expect(component.autoLoad).toBe(true);
+    expect(component.loadingText).toBe('加载中...');
+    expect(component.columns).toEqual([]);
+    expect(component.config).toEqual({});
+  });
+
+  it('should emit loading state changes', () => {
+    let loadingState = false;
+    component.loadingStateChanged.subscribe(state => {
+      loadingState = state;
+    });
+
+    // Note: We can't directly test the private setLoading method
+    // This is more of an integration test
+    expect(loadingState).toBe(false);
+  });
+
+  it('should handle data source as string', () => {
+    component.dataSource = '/api/test';
+    expect(component).toBeTruthy();
+  });
+
+  it('should handle data source as object', () => {
+    component.dataSource = {
+      url: '/api/test',
+      method: 'GET'
+    };
+    expect(component).toBeTruthy();
+  });
+
+  it('should have public API methods', () => {
+    expect(component.reloadData).toBeDefined();
+    expect(component.setFilters).toBeDefined();
+    expect(component.setSort).toBeDefined();
+    expect(component.getData).toBeDefined();
+    expect(component.getSelectedData).toBeDefined();
+    expect(component.loadData).toBeDefined();
+    expect(component.getCurrentPage).toBeDefined();
+    expect(component.setPage).toBeDefined();
+    expect(component.getTotalPages).toBeDefined();
+  });
+});

projects/base-core/src/lib/components/tabulator-grid/tabulator-grid.component.ts

@@ -0,0 +1,656 @@
+import { 
+  Component, 
+  Input, 
+  Output, 
+  EventEmitter, 
+  AfterViewInit, 
+  OnChanges, 
+  OnDestroy, 
+  SimpleChanges,
+  ViewChild,
+  ElementRef,
+  HostBinding
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+// Tabulator类型声明
+declare var Tabulator: any;
+
+/**
+ * TabulatorGrid列定义
+ */
+export interface TabulatorGridColumn {
+  title: string;           // 列标题
+  field: string;           // 字段名
+  width?: number | string; // 列宽度
+  sorter?: string;         // 排序类型：'string', 'number', 'date', 'alphanum'
+  headerFilter?: boolean | string; // 是否启用表头筛选
+  headerFilterPlaceholder?: string; // 筛选器占位符
+  formatter?: string | ((cell: any) => any); // 格式化器
+  hozAlign?: 'left' | 'center' | 'right'; // 水平对齐
+  visible?: boolean;       // 是否可见
+  frozen?: boolean;        // 是否冻结列
+  tooltip?: string | boolean | ((cell: any) => string); // 工具提示
+  cssClass?: string;       // CSS类名
+  [key: string]: any;      // 其他Tabulator列属性
+}
+
+/**
+ * TabulatorGrid数据源配置
+ */
+export interface TabulatorGridDataSource {
+  url: string;                     // API地址
+  method?: 'GET' | 'POST';         // 请求方法，默认POST
+  headers?: Record<string, string>; // 请求头
+  params?: Record<string, any>;    // 额外参数
+  responseMapper?: (response: any) => any; // 响应数据映射函数
+  requestMapper?: (params: TabulatorRequestParams) => any; // 请求参数映射函数
+}
+
+/**
+ * Tabulator请求参数
+ */
+export interface TabulatorRequestParams {
+  page: number;           // 页码（从1开始）
+  size: number;           // 每页大小
+  sorters: Array<{       // 排序器数组
+    field: string;
+    dir: 'asc' | 'desc';
+  }>;
+  filters: Array<{       // 筛选器数组
+    field: string;
+    type: string;
+    value: any;
+  }>;
+}
+
+/**
+ * TabulatorGrid事件
+ */
+export interface TabulatorGridSortEvent {
+  sorters: Array<{ field: string; dir: 'asc' | 'desc' }>;
+}
+
+export interface TabulatorGridFilterEvent {
+  filters: Array<{ field: string; type: string; value: any }>;
+}
+
+export interface TabulatorGridPageEvent {
+  page: number;
+  pageSize: number;
+}
+
+export interface TabulatorGridRowEvent<T = any> {
+  row: T;
+  event?: Event;
+}
+
+/**
+ * TabulatorGrid配置
+ */
+export interface TabulatorGridConfig {
+  height?: string | number;  // 表格高度
+  layout?: 'fitData' | 'fitColumns' | 'fitDataFill' | 'fitDataStretch' | 'fitDataTable';
+  placeholder?: string;      // 空数据占位符
+  movableColumns?: boolean;  // 是否可移动列
+  movableRows?: boolean;     // 是否可移动行
+  selectable?: boolean | number; // 是否可选择行
+  rowHeight?: number;        // 行高
+  index?: string;           // 索引字段
+  dataTree?: boolean;       // 是否启用树形结构
+  groupBy?: string;         // 分组字段
+  fieldMapping?: Record<string, string>; // 字段映射：前端字段名 -> 后端字段名
+  operatorMapping?: Record<string, string>; // 操作符映射：Tabulator操作符 -> 后端操作符
+  requestMapper?: (params: TabulatorRequestParams) => any; // 自定义请求参数映射
+  responseMapper?: (response: any) => any; // 自定义响应数据映射
+}
+
+/**
+ * TabulatorGrid组件
+ * 
+ * 极简配置的服务端数据表格组件，只需提供API URL和列定义即可自动实现：
+ * 1. 服务端分页
+ * 2. 服务端排序
+ * 3. 服务端筛选
+ * 4. 主题切换
+ * 
+ * @example
+ * ```html
+ * <lib-tabulator-grid
+ *   [apiUrl]="'/api/config/meta/list'"
+ *   [columns]="columns"
+ *   [pageSize]="20"
+ *   theme="bootstrap4"
+ *   (sortChanged)="onSort($event)"
+ *   (filterChanged)="onFilter($event)">
+ * </lib-tabulator-grid>
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // 简单列定义
+ * columns: TabulatorGridColumn[] = [
+ *   { title: 'ID', field: 'id', width: 80, sorter: 'number' },
+ *   { title: '姓名', field: 'name', sorter: 'string', headerFilter: true },
+ *   { title: '年龄', field: 'age', sorter: 'number', headerFilter: 'number' },
+ * ];
+ * ```
+ */
+@Component({
+  selector: 'lib-tabulator-grid',
+  templateUrl: './tabulator-grid.component.html',
+  styleUrls: ['./tabulator-grid.component.scss'],
+  imports: [CommonModule],
+  standalone: true
+})
+export class TabulatorGridComponent<T = any> implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('tableContainer', { static: true }) tableContainer!: ElementRef;
+
+  // 核心输入属性
+  @Input() columns: TabulatorGridColumn[] = [];
+  @Input() dataSource!: TabulatorGridDataSource | string;
+  @Input() pageSize: number = 10;
+  @Input() theme: string = 'bootstrap4';
+  @Input() config: TabulatorGridConfig = {};
+  @Input() showHeaderFilters: boolean = true;
+  @Input() autoLoad: boolean = true;
+  @Input() loadingText: string = '加载中...';
+
+  // 输出事件
+  @Output() sortChanged = new EventEmitter<TabulatorGridSortEvent>();
+  @Output() filterChanged = new EventEmitter<TabulatorGridFilterEvent>();
+  @Output() pageChanged = new EventEmitter<TabulatorGridPageEvent>();
+  @Output() rowClicked = new EventEmitter<TabulatorGridRowEvent<T>>();
+  @Output() dataLoaded = new EventEmitter<T[]>();
+  @Output() loadingStateChanged = new EventEmitter<boolean>();
+  @Output() error = new EventEmitter<any>();
+
+  @HostBinding('class.tabulator-grid-container') tabulatorGridContainer = true;
+
+  private tabulator: any;
+  private isInitialized = false;
+  protected isLoading = false;
+
+  constructor(private http: HttpClient) {}
+
+  ngAfterViewInit(): void {
+    // 使用setTimeout确保DOM完全渲染后再初始化Tabulator
+    setTimeout(() => {
+      this.initializeTabulator();
+    }, 0);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.isInitialized && this.tabulator) {
+      this.updateTabulator(changes);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyTabulator();
+  }
+
+  /**
+   * 初始化Tabulator实例
+   */
+  private initializeTabulator(): void {
+    if (this.tabulator || !this.tableContainer?.nativeElement) {
+      return;
+    }
+
+    const config = this.buildConfig();
+    
+    try {
+      this.tabulator = new Tabulator(this.tableContainer.nativeElement, config);
+      this.bindEvents();
+      
+      // 监听表格构建完成事件
+      this.tabulator.on('tableBuilt', () => {
+        this.isInitialized = true;
+        
+        // 自动加载数据
+        if (this.autoLoad) {
+          this.loadData();
+        }
+      });
+    } catch (error) {
+      console.error('Failed to initialize Tabulator:', error);
+      this.error.emit(error);
+    }
+  }
+
+  /**
+   * 构建Tabulator配置
+   */
+  private buildConfig(): any {
+    const config: any = {
+      columns: this.processColumns(),
+      theme: this.theme,
+      pagination: true,
+      paginationMode: 'remote',
+      paginationSize: this.pageSize,
+      paginationSizeSelector: [10, 20, 50, 100],
+      sortMode: 'remote',
+      filterMode: 'remote',
+      ajaxRequestFunc: (url: string, params: any, config: any) => {
+        return this.handleAjaxRequest(params);
+      },
+      ajaxResponse: (url: string, params: any, response: any) => {
+        return this.processResponse(response);
+      },
+      placeholder: this.config.placeholder || '暂无数据',
+      layout: this.config.layout || 'fitColumns',
+      height: this.config.height || '500px',
+      rowHeight: this.config.rowHeight || 40,
+      index: this.config.index || 'id',
+      movableColumns: this.config.movableColumns || false,
+      movableRows: this.config.movableRows || false,
+      selectable: this.config.selectable || false,
+      dataTree: this.config.dataTree || false,
+      groupBy: this.config.groupBy
+    };
+
+    return config;
+  }
+
+  /**
+   * 处理列定义
+   */
+  private processColumns(): any[] {
+    return this.columns.map(column => {
+      const colDef: any = { ...column };
+
+      // 处理表头筛选
+      if (this.showHeaderFilters && column.headerFilter !== false) {
+        if (column.headerFilter === true || column.headerFilter === undefined) {
+          colDef.headerFilter = true;
+        } else {
+          colDef.headerFilter = column.headerFilter;
+        }
+        
+        if (column.headerFilterPlaceholder) {
+          colDef.headerFilterPlaceholder = column.headerFilterPlaceholder;
+        }
+      }
+
+      return colDef;
+    });
+  }
+
+  /**
+   * 处理AJAX请求
+   */
+  private async handleAjaxRequest(tabulatorParams: any): Promise<any> {
+    this.setLoading(true);
+    
+    try {
+      const requestParams = this.buildRequestParams(tabulatorParams);
+      const dataSource = this.getDataSourceConfig();
+      
+      const response = await this.makeRequest(dataSource, requestParams);
+      return this.createSuccessResponse(response);
+    } catch (error) {
+      console.error('TabulatorGrid request failed:', error);
+      this.error.emit(error);
+      return this.createErrorResponse(error);
+    } finally {
+      this.setLoading(false);
+    }
+  }
+
+  /**
+   * 构建请求参数
+   */
+  private buildRequestParams(tabulatorParams: any): any {
+    const request: TabulatorRequestParams = {
+      page: tabulatorParams.page || 1,
+      size: tabulatorParams.size || this.pageSize,
+      sorters: [],
+      filters: []
+    };
+
+    // 处理排序
+    if (tabulatorParams.sorters && tabulatorParams.sorters.length > 0) {
+      request.sorters = tabulatorParams.sorters.map((sorter: any) => ({
+        field: this.mapFieldToBackend(sorter.field),
+        dir: sorter.dir
+      }));
+    }
+
+    // 处理筛选
+    if (tabulatorParams.filters && tabulatorParams.filters.length > 0) {
+      request.filters = tabulatorParams.filters.map((filter: any) => ({
+        field: this.mapFieldToBackend(filter.field),
+        type: this.mapOperatorToBackend(filter.type),
+        value: this.processFilterValue(filter.value)
+      }));
+    }
+
+    // 应用自定义请求映射
+    if (this.config.requestMapper) {
+      return this.config.requestMapper(request);
+    }
+
+    return request;
+  }
+
+  /**
+   * 获取数据源配置
+   */
+  private getDataSourceConfig(): TabulatorGridDataSource {
+    if (typeof this.dataSource === 'string') {
+      return {
+        url: this.dataSource,
+        method: 'POST'
+      };
+    }
+    return this.dataSource;
+  }
+
+  /**
+   * 发送请求
+   */
+  private async makeRequest(dataSource: TabulatorGridDataSource, requestParams: any): Promise<any> {
+    const method = dataSource.method || 'POST';
+    const url = dataSource.url;
+    const headers = dataSource.headers || {};
+    const params = { ...(dataSource.params || {}), ...requestParams };
+
+    if (method === 'GET') {
+      return this.http.get(url, { headers, params }).toPromise();
+    } else {
+      return this.http.post(url, params, { headers }).toPromise();
+    }
+  }
+
+  /**
+   * 创建成功响应
+   */
+  private createSuccessResponse(response: any): any {
+    // 应用自定义响应映射
+    if (this.config.responseMapper) {
+      response = this.config.responseMapper(response);
+    }
+
+    // 默认Tabulator响应格式
+    const data = response?.data || response;
+    const lastPage = response?.last_page || response?.totalPages || 1;
+    const totalRecords = response?.total || response?.totalCount || (Array.isArray(data) ? data.length : 0);
+
+    return {
+      last_page: lastPage,
+      data: data,
+      total: totalRecords
+    };
+  }
+
+  /**
+   * 创建错误响应
+   */
+  private createErrorResponse(error: any): any {
+    return {
+      last_page: 1,
+      data: [],
+      total: 0,
+      error: error?.message || '请求失败'
+    };
+  }
+
+  /**
+   * 处理响应数据
+   */
+  private processResponse(response: any): any {
+    if (response.error) {
+      console.error('TabulatorGrid response error:', response.error);
+      return [];
+    }
+
+    const data = response.data || [];
+    this.dataLoaded.emit(data);
+    return data;
+  }
+
+  /**
+   * 处理筛选值
+   */
+  private processFilterValue(value: any): any {
+    if (typeof value === 'string' && value.includes(',') && !value.includes('%')) {
+      const values = value.split(',')
+        .map(v => v.trim())
+        .filter(v => v !== '');
+      
+      if (values.length > 1) {
+        return values.map(v => {
+          const num = Number(v);
+          return isNaN(num) ? v : num;
+        });
+      }
+    }
+    return value;
+  }
+
+  /**
+   * 映射字段到后端字段名
+   */
+  private mapFieldToBackend(field: string): string {
+    return this.config.fieldMapping?.[field] || field;
+  }
+
+  /**
+   * 映射操作符到后端操作符
+   */
+  private mapOperatorToBackend(operator: string): string {
+    const defaultMapping: Record<string, string> = {
+      '=': '=',
+      '==': '=',
+      '!=': '!=',
+      '<>': '!=',
+      'like': 'like',
+      'contains': 'like',
+      '>': '>',
+      '<': '<',
+      '>=': '>=',
+      '<=': '<=',
+      'in': 'in'
+    };
+
+    const mapping = this.config.operatorMapping || defaultMapping;
+    return mapping[operator] || operator;
+  }
+
+  /**
+   * 绑定Tabulator事件
+   */
+  private bindEvents(): void {
+    if (!this.tabulator) return;
+
+    // 排序事件
+    this.tabulator.on('sortChanged', (sorters: any[]) => {
+      this.handleSortChanged(sorters);
+    });
+
+    // 筛选事件
+    this.tabulator.on('filterChanged', (filters: any[]) => {
+      this.handleFilterChanged(filters);
+    });
+
+    // 分页事件
+    this.tabulator.on('pageLoaded', (page: number) => {
+      this.handlePageChanged(page);
+    });
+
+    // 行点击事件
+    this.tabulator.on('rowClick', (e: any, row: any) => {
+      this.handleRowClicked(e, row);
+    });
+  }
+
+  /**
+   * 处理排序变化
+   */
+  private handleSortChanged(sorters: any[]): void {
+    const processedSorters = sorters.map(s => ({
+      field: this.mapFieldToBackend(s.field),
+      dir: s.dir
+    }));
+
+    this.sortChanged.emit({ sorters: processedSorters });
+  }
+
+  /**
+   * 处理筛选变化
+   */
+  private handleFilterChanged(filters: any[]): void {
+    const processedFilters = filters.map(f => ({
+      field: this.mapFieldToBackend(f.field),
+      type: this.mapOperatorToBackend(f.type),
+      value: this.processFilterValue(f.value)
+    }));
+
+    this.filterChanged.emit({ filters: processedFilters });
+  }
+
+  /**
+   * 处理分页变化
+   */
+  private handlePageChanged(page: number): void {
+    this.pageChanged.emit({
+      page,
+      pageSize: this.pageSize
+    });
+  }
+
+  /**
+   * 处理行点击
+   */
+  private handleRowClicked(event: any, row: any): void {
+    this.rowClicked.emit({
+      row: row.getData(),
+      event
+    });
+  }
+
+  /**
+   * 设置加载状态
+   */
+  private setLoading(loading: boolean): void {
+    this.isLoading = loading;
+    this.loadingStateChanged.emit(loading);
+  }
+
+  /**
+   * 更新Tabulator配置
+   */
+  private updateTabulator(changes: SimpleChanges): void {
+    if (!this.tabulator) return;
+
+    // 列定义变化
+    if (changes['columns']) {
+      this.tabulator.setColumns(this.processColumns());
+    }
+
+    // 数据源变化需要重新加载
+    if (changes['dataSource'] && this.autoLoad) {
+      this.loadData();
+    }
+
+    // 主题或配置变化需要重新初始化
+    if (changes['theme'] || changes['config'] || changes['pageSize']) {
+      this.destroyTabulator();
+      setTimeout(() => this.initializeTabulator(), 0);
+    }
+
+    // 表头筛选显示状态变化
+    if (changes['showHeaderFilters']) {
+      this.tabulator.setColumns(this.processColumns());
+    }
+  }
+
+  /**
+   * 销毁Tabulator实例
+   */
+  private destroyTabulator(): void {
+    if (this.tabulator) {
+      try {
+        this.tabulator.destroy();
+      } catch (error) {
+        console.warn('Error destroying Tabulator:', error);
+      }
+      this.tabulator = null;
+      this.isInitialized = false;
+    }
+  }
+
+  /**
+   * 公共API方法
+   */
+
+  /** 重新加载数据 */
+  reloadData(): void {
+    if (this.tabulator) {
+      this.tabulator.setData();
+    }
+  }
+
+  /** 设置筛选器 */
+  setFilters(filters: Array<{ field: string; type: string; value: any }>): void {
+    if (this.tabulator) {
+      this.tabulator.setFilter(filters);
+    }
+  }
+
+  /** 设置排序 */
+  setSort(sorters: Array<{ field: string; dir: 'asc' | 'desc' }>): void {
+    if (this.tabulator) {
+      this.tabulator.setSort(sorters);
+    }
+  }
+
+  /** 获取当前数据 */
+  getData(): T[] {
+    return this.tabulator?.getData() || [];
+  }
+
+  /** 获取选中的数据 */
+  getSelectedData(): T[] {
+    return this.tabulator?.getSelectedData() || [];
+  }
+
+  /** 加载数据 */
+  loadData(): void {
+    if (this.tabulator) {
+      this.tabulator.setData();
+    }
+  }
+
+  /** 获取当前页码 */
+  getCurrentPage(): number {
+    return this.tabulator?.getPage() || 1;
+  }
+
+  /** 跳转到指定页码 */
+  setPage(page: number): void {
+    if (this.tabulator) {
+      this.tabulator.setPage(page);
+    }
+  }
+
+  /** 获取总页数 */
+  getTotalPages(): number {
+    const data = this.tabulator?.getData() || [];
+    const total = this.tabulator?.getDataCount() || 0;
+    return Math.ceil(total / this.pageSize);
+  }
+
+  /** 获取数据总数（公共getter） */
+  get dataCount(): number {
+    return this.tabulator?.getDataCount() || 0;
+  }
+
+  /** 是否正在加载（公共getter） */
+  get isDataLoading(): boolean {
+    return this.isLoading;
+  }
+}

projects/base-core/src/lib/components/tabulator-table/tabulator-table.component.html

@@ -1 +0,0 @@
-<div #tableContainer class="tabulator-container"></div>

projects/base-core/src/lib/components/tabulator-table/tabulator-table.component.scss

@@ -1,27 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.tabulator-container {
-  width: 100%;
-  height: 100%;
-  
-  // 确保Tabulator表格正确显示
-  .tabulator {
-    font-family: inherit;
-  }
-  
-  // 覆盖默认样式以适应Angular Material主题
-  .tabulator-table {
-    background-color: transparent;
-  }
-  
-  // 响应式调整
-  @media (max-width: 768px) {
-    .tabulator {
-      font-size: 12px;
-    }
-  }
-}

projects/base-core/src/lib/components/tabulator-table/tabulator-table.component.spec.ts

@@ -1,182 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TabulatorTableComponent } from './tabulator-table.component';
-
-describe('TabulatorTableComponent', () => {
-  let component: TabulatorTableComponent;
-  let fixture: ComponentFixture<TabulatorTableComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TabulatorTableComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(TabulatorTableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default values', () => {
-    expect(component.columns).toEqual([]);
-    expect(component.options).toEqual({});
-    expect(component.ajaxUrl).toBe('');
-    expect(component.pagination).toBe(false);
-    expect(component.paginationSize).toBe(10);
-    expect(component.sortMode).toBe('local');
-    expect(component.filterMode).toBe('local');
-  });
-
-  it('should emit tableBuilt event when initialized', () => {
-    spyOn(component.tableBuilt, 'emit');
-    
-    // 模拟Tabulator初始化
-    component['initializeTabulator']();
-    
-    // 由于Tabulator未加载，可能不会触发事件
-    // 这里主要是测试组件结构
-    expect(component.tableBuilt.emit).not.toHaveBeenCalled();
-  });
-
-  it('should handle data changes', () => {
-    const testData = [{ id: 1, name: 'Test' }];
-    component.data = testData;
-    
-    // 触发ngOnChanges
-    component.ngOnChanges({
-      data: {
-        currentValue: testData,
-        previousValue: [],
-        firstChange: false,
-        isFirstChange: () => false
-      }
-    });
-    
-    expect(component.data).toEqual(testData);
-  });
-
-  it('should handle column changes', () => {
-    const testColumns = [{ field: 'id', title: 'ID' }];
-    component.columns = testColumns;
-    
-    component.ngOnChanges({
-      columns: {
-        currentValue: testColumns,
-        previousValue: [],
-        firstChange: false,
-        isFirstChange: () => false
-      }
-    });
-    
-    expect(component.columns).toEqual(testColumns);
-  });
-
-  it('should destroy tabulator instance', () => {
-    // 模拟Tabulator实例
-    component['tabulator'] = {
-      destroy: jasmine.createSpy('destroy')
-    };
-    
-    component.ngOnDestroy();
-    
-    expect(component['tabulator']).toBeNull();
-    expect(component['isInitialized']).toBeFalse();
-  });
-
-  describe('public API methods', () => {
-    beforeEach(() => {
-      // 模拟Tabulator实例
-      component['tabulator'] = {
-        setData: jasmine.createSpy('setData'),
-        setColumns: jasmine.createSpy('setColumns'),
-        setPageSize: jasmine.createSpy('setPageSize'),
-        setPage: jasmine.createSpy('setPage'),
-        getPage: jasmine.createSpy('getPage').and.returnValue(1),
-        getPageMax: jasmine.createSpy('getPageMax').and.returnValue(5),
-        getFilters: jasmine.createSpy('getFilters').and.returnValue([]),
-        setFilter: jasmine.createSpy('setFilter'),
-        getSorters: jasmine.createSpy('getSorters').and.returnValue([]),
-        setSort: jasmine.createSpy('setSort'),
-        clearData: jasmine.createSpy('clearData'),
-        addRow: jasmine.createSpy('addRow'),
-        updateRow: jasmine.createSpy('updateRow'),
-        deleteRow: jasmine.createSpy('deleteRow'),
-        getSelectedRows: jasmine.createSpy('getSelectedRows').and.returnValue([]),
-        getSelectedData: jasmine.createSpy('getSelectedData').and.returnValue([]),
-        download: jasmine.createSpy('download'),
-        print: jasmine.createSpy('print')
-      };
-    });
-
-    it('should get tabulator instance', () => {
-      expect(component.getTabulator()).toBe(component['tabulator']);
-    });
-
-    it('should reload data', () => {
-      component.reloadData();
-      expect(component['tabulator'].setData).toHaveBeenCalled();
-    });
-
-    it('should set data', () => {
-      const data = [{ id: 1 }];
-      component.setData(data);
-      expect(component['tabulator'].setData).toHaveBeenCalledWith(data);
-    });
-
-    it('should set columns', () => {
-      const columns = [{ field: 'id' }];
-      component.setColumns(columns);
-      expect(component['tabulator'].setColumns).toHaveBeenCalledWith(columns);
-    });
-
-    it('should set page size', () => {
-      component.setPageSize(20);
-      expect(component['tabulator'].setPageSize).toHaveBeenCalledWith(20);
-    });
-
-    it('should set page', () => {
-      component.setPage(2);
-      expect(component['tabulator'].setPage).toHaveBeenCalledWith(2);
-    });
-
-    it('should get page', () => {
-      expect(component.getPage()).toBe(1);
-      expect(component['tabulator'].getPage).toHaveBeenCalled();
-    });
-
-    it('should get max page', () => {
-      expect(component.getPageMax()).toBe(5);
-      expect(component['tabulator'].getPageMax).toHaveBeenCalled();
-    });
-
-    it('should get filters', () => {
-      expect(component.getFilters()).toEqual([]);
-      expect(component['tabulator'].getFilters).toHaveBeenCalled();
-    });
-
-    it('should set filters', () => {
-      const filters = [{ field: 'id', type: '=', value: 1 }];
-      component.setFilters(filters, true);
-      expect(component['tabulator'].setFilter).toHaveBeenCalledWith(filters, true);
-    });
-
-    it('should get sorters', () => {
-      expect(component.getSorters()).toEqual([]);
-      expect(component['tabulator'].getSorters).toHaveBeenCalled();
-    });
-
-    it('should set sorters', () => {
-      const sorters = [{ column: 'id', dir: 'asc' }];
-      component.setSorters(sorters);
-      expect(component['tabulator'].setSort).toHaveBeenCalledWith(sorters);
-    });
-
-    it('should clear data', () => {
-      component.clearData();
-      expect(component['tabulator'].clearData).toHaveBeenCalled();
-    });
-  });
-});

projects/base-core/src/lib/components/tabulator-table/tabulator-table.component.ts

@@ -1,372 +0,0 @@
-import { 
-  Component, 
-  Input, 
-  Output, 
-  EventEmitter, 
-  AfterViewInit, 
-  OnChanges, 
-  OnDestroy, 
-  SimpleChanges,
-  ViewChild,
-  ElementRef 
-} from '@angular/core';
-
-// Tabulator类型声明
-declare var Tabulator: any;
-
-@Component({
-  selector: 'lib-tabulator-table',
-  templateUrl: './tabulator-table.component.html',
-  styleUrls: ['./tabulator-table.component.scss']
-})
-export class TabulatorTableComponent implements AfterViewInit, OnChanges, OnDestroy {
-  @ViewChild('tableContainer', { static: true }) tableContainer!: ElementRef;
-
-  // 输入属性 - 完全遵循Tabulator配置
-  @Input() columns: any[] = [];
-  @Input() options: any = {};
-  @Input() ajaxUrl: string = '';
-  @Input() ajaxParams: any = {};
-  @Input() ajaxConfig: any = {};
-  @Input() pagination: boolean | string = false;
-  @Input() paginationSize: number = 10;
-  @Input() paginationSizeSelector: boolean | number[] = false;
-  @Input() sortMode: string = 'local';
-  @Input() filterMode: string = 'local';
-  @Input() height: string | number = '';
-  @Input() layout: string = 'fitColumns';
-  @Input() data: any[] = [];
-  @Input() index: string = 'id';
-  @Input() movableColumns: boolean = false;
-  @Input() movableRows: boolean = false;
-  @Input() selectable: boolean | number = false;
-  @Input() rowHeight: number = 40;
-  @Input() placeholder: string = 'No Data Available';
-
-  // 输出事件 - 映射Tabulator事件
-  @Output() tableBuilt = new EventEmitter<any>();
-  @Output() dataLoaded = new EventEmitter<any>();
-  @Output() dataLoading = new EventEmitter<any>();
-  @Output() dataLoadError = new EventEmitter<any>();
-  @Output() pageLoaded = new EventEmitter<any>();
-  @Output() rowClick = new EventEmitter<any>();
-  @Output() rowDblClick = new EventEmitter<any>();
-  @Output() cellClick = new EventEmitter<any>();
-  @Output() sortChanged = new EventEmitter<any>();
-  @Output() filterChanged = new EventEmitter<any>();
-  @Output() rowSelected = new EventEmitter<any>();
-  @Output() rowDeselected = new EventEmitter<any>();
-  @Output() rowContext = new EventEmitter<any>();
-  @Output() columnMoved = new EventEmitter<any>();
-  @Output() columnResized = new EventEmitter<any>();
-  @Output() rowMoved = new EventEmitter<any>();
-
-  private tabulator: any;
-  private isInitialized = false;
-
-  constructor() {}
-
-  ngAfterViewInit(): void {
-    this.initializeTabulator();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.isInitialized && this.tabulator) {
-      this.updateTabulator(changes);
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroyTabulator();
-  }
-
-  /**
-   * 初始化Tabulator实例
-   */
-  private initializeTabulator(): void {
-    if (this.tabulator || !this.tableContainer?.nativeElement) {
-      return;
-    }
-
-    const config = this.buildConfig();
-    
-    try {
-      this.tabulator = new Tabulator(this.tableContainer.nativeElement, config);
-      this.bindEvents();
-      this.isInitialized = true;
-      this.tableBuilt.emit(this.tabulator);
-    } catch (error) {
-      console.error('Failed to initialize Tabulator:', error);
-    }
-  }
-
-  /**
-   * 构建Tabulator配置
-   */
-  private buildConfig(): any {
-    // 基础配置
-    const config: any = {
-      columns: this.columns,
-      data: this.data,
-      index: this.index,
-      layout: this.layout,
-      movableColumns: this.movableColumns,
-      movableRows: this.movableRows,
-      selectable: this.selectable,
-      rowHeight: this.rowHeight,
-      placeholder: this.placeholder,
-      ...this.options // 允许覆盖所有配置
-    };
-
-    // 高度设置
-    if (this.height) {
-      config.height = this.height;
-    }
-
-    // 服务端配置
-    if (this.ajaxUrl) {
-      config.ajaxURL = this.ajaxUrl;
-      config.ajaxParams = this.ajaxParams;
-      config.ajaxConfig = this.ajaxConfig;
-      
-      // 强制服务端模式
-      config.pagination = this.pagination || 'remote';
-      config.sortMode = 'remote';
-      config.filterMode = 'remote';
-      
-      // 分页配置
-      if (config.pagination === 'remote' || config.pagination === true) {
-        config.paginationSize = this.paginationSize;
-        config.paginationSizeSelector = this.paginationSizeSelector;
-        
-        // 自定义响应处理器
-        config.ajaxResponse = (url: string, params: any, response: any) => {
-          // 期望服务端返回格式: { last_page: totalPages, data: [] }
-          // 如果格式不同，可以通过options覆盖
-          return response;
-        };
-      }
-    } else if (this.pagination) {
-      // 客户端分页
-      config.pagination = this.pagination;
-      config.paginationSize = this.paginationSize;
-      config.paginationSizeSelector = this.paginationSizeSelector;
-      config.sortMode = this.sortMode;
-      config.filterMode = this.filterMode;
-    }
-
-    return config;
-  }
-
-  /**
-   * 绑定Tabulator事件
-   */
-  private bindEvents(): void {
-    if (!this.tabulator) return;
-
-    // 数据事件
-    this.tabulator.on('dataLoaded', (data: any) => this.dataLoaded.emit(data));
-    this.tabulator.on('dataLoading', (url: string, config: any, params: any) => 
-      this.dataLoading.emit({ url, config, params }));
-    this.tabulator.on('dataLoadError', (error: any) => this.dataLoadError.emit(error));
-    this.tabulator.on('pageLoaded', (page: number) => this.pageLoaded.emit(page));
-
-    // 交互事件
-    this.tabulator.on('rowClick', (e: any, row: any) => this.rowClick.emit({ event: e, row }));
-    this.tabulator.on('rowDblClick', (e: any, row: any) => this.rowDblClick.emit({ event: e, row }));
-    this.tabulator.on('cellClick', (e: any, cell: any) => this.cellClick.emit({ event: e, cell }));
-    this.tabulator.on('rowSelected', (row: any) => this.rowSelected.emit(row));
-    this.tabulator.on('rowDeselected', (row: any) => this.rowDeselected.emit(row));
-    this.tabulator.on('rowContext', (e: any, row: any) => this.rowContext.emit({ event: e, row }));
-
-    // 排序和筛选事件
-    this.tabulator.on('sortChanged', (sorters: any[]) => this.sortChanged.emit(sorters));
-    this.tabulator.on('filterChanged', (filters: any[]) => this.filterChanged.emit(filters));
-
-    // 列和行操作事件
-    this.tabulator.on('columnMoved', (column: any, columns: any[]) => this.columnMoved.emit({ column, columns }));
-    this.tabulator.on('columnResized', (column: any) => this.columnResized.emit(column));
-    this.tabulator.on('rowMoved', (row: any) => this.rowMoved.emit(row));
-  }
-
-  /**
-   * 更新Tabulator配置
-   */
-  private updateTabulator(changes: SimpleChanges): void {
-    if (!this.tabulator) return;
-
-    // 数据更新
-    if (changes['data'] && changes['data'].currentValue !== changes['data'].previousValue) {
-      this.tabulator.setData(changes['data'].currentValue);
-    }
-
-    // 列定义更新
-    if (changes['columns'] && changes['columns'].currentValue !== changes['columns'].previousValue) {
-      this.tabulator.setColumns(changes['columns'].currentValue);
-    }
-
-    // 分页大小更新
-    if (changes['paginationSize'] && changes['paginationSize'].currentValue !== changes['paginationSize'].previousValue) {
-      this.tabulator.setPageSize(changes['paginationSize'].currentValue);
-    }
-
-    // 高度更新
-    if (changes['height'] && changes['height'].currentValue !== changes['height'].previousValue) {
-      this.tabulator.setHeight(changes['height'].currentValue);
-    }
-
-    // 其他配置更新需要重新初始化
-    const configProps = ['ajaxUrl', 'ajaxParams', 'ajaxConfig', 'pagination', 'sortMode', 'filterMode', 'layout'];
-    const needsReinit = configProps.some(prop => changes[prop]);
-    
-    if (needsReinit) {
-      this.destroyTabulator();
-      setTimeout(() => this.initializeTabulator(), 0);
-    }
-  }
-
-  /**
-   * 销毁Tabulator实例
-   */
-  private destroyTabulator(): void {
-    if (this.tabulator) {
-      try {
-        this.tabulator.destroy();
-      } catch (error) {
-        console.warn('Error destroying Tabulator:', error);
-      }
-      this.tabulator = null;
-      this.isInitialized = false;
-    }
-  }
-
-  /**
-   * 公共API方法 - 暴露Tabulator实例方法
-   */
-  
-  // 获取Tabulator实例
-  getTabulator(): any {
-    return this.tabulator;
-  }
-
-  // 重新加载数据
-  reloadData(): void {
-    if (this.tabulator) {
-      this.tabulator.setData(this.ajaxUrl ? this.ajaxUrl : this.data);
-    }
-  }
-
-  // 设置数据
-  setData(data: any[] | string): void {
-    if (this.tabulator) {
-      this.tabulator.setData(data);
-    }
-  }
-
-  // 设置列
-  setColumns(columns: any[]): void {
-    if (this.tabulator) {
-      this.tabulator.setColumns(columns);
-    }
-  }
-
-  // 设置分页大小
-  setPageSize(size: number): void {
-    if (this.tabulator) {
-      this.tabulator.setPageSize(size);
-    }
-  }
-
-  // 跳转到指定页
-  setPage(page: number | string): void {
-    if (this.tabulator) {
-      this.tabulator.setPage(page);
-    }
-  }
-
-  // 获取当前页
-  getPage(): number {
-    return this.tabulator?.getPage() || 1;
-  }
-
-  // 获取总页数
-  getPageMax(): number {
-    return this.tabulator?.getPageMax() || 1;
-  }
-
-  // 获取筛选器
-  getFilters(): any[] {
-    return this.tabulator?.getFilters() || [];
-  }
-
-  // 设置筛选器
-  setFilters(filters: any[], matchAll?: boolean): void {
-    if (this.tabulator) {
-      this.tabulator.setFilter(filters, matchAll);
-    }
-  }
-
-  // 获取排序器
-  getSorters(): any[] {
-    return this.tabulator?.getSorters() || [];
-  }
-
-  // 设置排序器
-  setSorters(sorters: any[]): void {
-    if (this.tabulator) {
-      this.tabulator.setSort(sorters);
-    }
-  }
-
-  // 清空所有数据
-  clearData(): void {
-    if (this.tabulator) {
-      this.tabulator.clearData();
-    }
-  }
-
-  // 添加行
-  addRow(data: any, addToTop?: boolean, position?: number): void {
-    if (this.tabulator) {
-      this.tabulator.addRow(data, addToTop, position);
-    }
-  }
-
-  // 更新行
-  updateRow(row: any, data: any): void {
-    if (this.tabulator) {
-      this.tabulator.updateRow(row, data);
-    }
-  }
-
-  // 删除行
-  deleteRow(row: any): void {
-    if (this.tabulator) {
-      this.tabulator.deleteRow(row);
-    }
-  }
-
-  // 获取选中的行
-  getSelectedRows(): any[] {
-    return this.tabulator?.getSelectedRows() || [];
-  }
-
-  // 获取选中的数据
-  getSelectedData(): any[] {
-    return this.tabulator?.getSelectedData() || [];
-  }
-
-  // 下载表格数据
-  download(format: string, filename: string, options?: any): void {
-    if (this.tabulator) {
-      this.tabulator.download(format, filename, options);
-    }
-  }
-
-  // 打印表格
-  print(): void {
-    if (this.tabulator) {
-      this.tabulator.print();
-    }
-  }
-}

projects/base-core/src/tabulator-tables.d.ts

@@ -1,4 +0,0 @@
-declare module 'tabulator-tables' {
-  const Tabulator: any;
-  export = Tabulator;
-}

projects/base-core/tsconfig.lib.json

@@ -4,6 +4,7 @@
     "outDir": "../../out-tsc/lib",
     "declaration": true,
     "declarationMap": true,
+    "sourceMap": true,
     "inlineSources": true,
     "types": []
   },