改用新表格加载数据

angular.json

               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/tabulator-tables/dist/css/tabulator.min.css"
+            ],
+            "scripts": [
+              "node_modules/tabulator-tables/dist/js/tabulator.min.js"
             ],
-            "scripts": [],
-            "allowedCommonJsDependencies": ["ag-grid-angular", "ag-grid-community"]
+            "allowedCommonJsDependencies": ["ag-grid-angular", "ag-grid-community", "tabulator-tables"]
           },
           "configurations": {
             "production": {

package-lock.json

         "@types/marked": "^5.0.2",
         "ag-grid-angular": "^35.0.0",
         "ag-grid-community": "^35.0.0",
+        "base-core": "file:../../ng-base/dist/base-core",
         "marked": "^17.0.1",
-        "ng-base": "file:../../ng-base/dist/ng-base",
         "prismjs": "^1.30.0",
         "rxjs": "~7.8.0",
+        "tabulator-tables": "^5.6.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
         "typescript": "~5.7.2"
       }
     },
-    "../../ng-base/dist/ng-base": {},
+    "../../ng-base/dist/base-core": {},
+    "../../ng-base/dist/ng-base": {
+      "extraneous": true
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base-core": {
+      "resolved": "../../ng-base/dist/base-core",
+      "link": true
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/ng-base": {
-      "resolved": "../../ng-base/dist/ng-base",
-      "link": true
-    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
         "node": ">=0.10"
       }
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",

package.json

     "@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",
     "prismjs": "^1.30.0",

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

 <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"
     [debugRegisterUrl]="debugInfo.registerUrl"
     [debugListUrl]="debugInfo.listUrl"
     [autoDetect]="true"
-      [scrollContainer]="'.content-area'"
-     [scrollThreshold]="20"
+    [scrollContainer]="'.content-area'"
+    [scrollThreshold]="20"
     [compactThreshold]="80"
     [widthTarget]="'#matCard'"
     (buttonClick)="onRegister()"
    
       <mat-card #matCard id="matCard" class="flex-1">
     <mat-card-content>
-        <!-- AG Grid组件 -->
-        <ag-grid-angular
-           class="ag-theme-alpine h-[800px]"
-          [columnDefs]="columnDefs"
-          [rowModelType]="'infinite'"
-          [datasource]="datasource"
-          [pagination]="true"
-          [paginationPageSize]="paginationPageSize"
-          [cacheBlockSize]="paginationPageSize"
-          [maxBlocksInCache]="10"
-            [domLayout]="'normal'"
-          [rowSelection]="'single'"
-          (gridReady)="onGridReady($event)">
-        </ag-grid-angular>
+        <!-- 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>
   </mat-card>
 </div>

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

-import { Component, OnInit, ChangeDetectorRef, AfterViewInit, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+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 } from 'base-core';
+import { StickyHeaderComponent, TabulatorTableComponent } from 'base-core';
 import { ConfigMeta } from '../../models/config-meta.model';
 import { ConfigMetaService } from '../../services/config-meta.service';
-import { AgGridAngular } from 'ag-grid-angular';
-import { ColDef, GridReadyEvent, PaginationChangedEvent, GridApi, IDatasource, IGetRowsParams, ModuleRegistry } from 'ag-grid-community';
-import { InfiniteRowModelModule, PaginationModule, RowSelectionModule } from 'ag-grid-community';
 import { ConfigMetaQueryRequest, PaginatedQueryResult } from '../../models/config-meta.model';
 
-// 注册 AG Grid 模块
-ModuleRegistry.registerModules([
-  InfiniteRowModelModule,
-  PaginationModule,
-  RowSelectionModule
-]);
-
 @Component({
   selector: 'app-service-register-config',
-  imports: [CommonModule, MatCard, MatCardContent, StickyHeaderComponent, AgGridAngular],
+  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 {
   title = '注册服务配置';
   hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
-  
-   // AG Grid 配置
-  columnDefs: ColDef[] = [
-    { field: 'id', headerName: 'ID', width: 120 },
-    { field: 'configName', headerName: '配置名称', width: 150 },
-    { field: 'fieldName', headerName: '字段名', width: 150 },
-    { field: 'fieldType', headerName: '字段类型', width: 120 },
-    { field: 'yamlName', headerName: 'YAML名称', width: 150 },
-    { field: 'fieldDesc', headerName: '字段描述', width: 200 },
-    { field: 'creator', headerName: '创建者', width: 120 },
-    { field: 'createdAt', headerName: '创建时间', width: 180 }
+   
+  // 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' }
   ];
-   rowData: any[] = [];
-   datasource: IDatasource | undefined = undefined;
-   configMetaList: ConfigMeta[] = [];
+  
+  configMetaList: ConfigMeta[] = [];
 
-   // 分页配置
-   paginationPageSize = 100;
+  // 分页配置
+  paginationPageSize = 100;
   currentPage = 1;
   totalRecords = 0;
-  gridApi: GridApi | null = null;
+
+  // Tabulator 数据
+  tableData: any[] = [];
 
   loading = false;
   registering = false;
+  errorMessage: string | null = null;
   
   // 注意：滚动状态现在由 sticky-header 组件自动检测管理
   // 使用 [autoDetect]="true" 启用自动滚动检测
     pageSize: 10
   };
 
-  @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
+  @ViewChild('tabulator') tabulator!: TabulatorTableComponent;
   @ViewChild('matCard', { read: ElementRef }) matCardRef!: ElementRef;
 
   constructor(
     private configMetaService: ConfigMetaService,
     private cdRef: ChangeDetectorRef,
-    private elementRef: ElementRef,
-    private renderer: Renderer2
+    private elementRef: ElementRef
   ) {}
 
-    ngOnInit() {
-      console.log('ServiceRegisterConfigComponent initialized');
-    }
+  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'
+    });
+  }
 
-  loadData(page: number = 1) {
-    this.loading = true;
-    this.currentPage = page;
+  /**
+   * 加载数据（使用config-meta.service.ts）
+   */
+  loadData(page: number = 1): void {
+    console.log(`加载第${page}页数据，页大小: ${this.paginationPageSize}`);
     
     // 构建查询请求
     const request: ConfigMetaQueryRequest = {
       pageSize: this.paginationPageSize
     };
     
-    console.log(`加载第${page}页数据，页大小: ${this.paginationPageSize}`);
+    this.loading = true;
     
     this.configMetaService.listConfigMetaPaginated(request).subscribe({
-      next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
-        this.loading = false;
-        
-        if (result.success && result.data) {
-          this.rowData = result.data;
+       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;
           
-          // 更新AG Grid分页总记录数
-          if (this.gridApi) {
-            // 设置总记录数，使分页控件显示正确的总页数
-            this.gridApi.setGridOption('pagination', {
-              total: this.totalRecords,
-              pageSize: this.paginationPageSize
-            } as any);
-          }
-          
           // 更新调试信息
           this.debugInfo.dataSource = 'API数据';
           this.debugInfo.recordCount = this.totalRecords;
           this.debugInfo.pageSize = this.paginationPageSize;
           
           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();
         }
         
         this.cdRef.detectChanges();
       },
-      error: (error: HttpErrorResponse) => {
-        this.loading = false;
-        console.error('加载数据时出错:', error);
-        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(page: number, pageSize: number): { data: any[], totalCount: number } {
-      const totalMockCount = 200;
-      const startIndex = page * pageSize;
-      const endIndex = Math.min(startIndex + pageSize, totalMockCount);
+  /**
+   * 生成模拟数据（用于调试）
+   */
+  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;
       
-      const mockData = [];
-      for (let i = startIndex; i < endIndex; i++) {
-        mockData.push({
-          id: i + 1,
-          configName: `配置${i + 1}`,
-          fieldName: `field_${i + 1}`,
-          fieldType: i % 3 === 0 ? 'string' : i % 3 === 1 ? 'number' : 'boolean',
-          yamlName: `yaml_${i + 1}`,
-          fieldDesc: `这是第${i + 1}个配置字段的描述`,
-          creator: `用户${(i % 5) + 1}`,
-          createdAt: new Date(Date.now() - i * 86400000).toISOString()
-        });
+      // 更新调试信息
+      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 : [];
+        }
+        if ('last_page' in event) {
+          lastPage = event.last_page;
+          totalCount = lastPage * this.paginationPageSize;
+          this.totalRecords = totalCount;
+          this.debugInfo.totalPages = lastPage;
+        }
       }
       
-      return {
-        data: mockData,
-        totalCount: totalMockCount
-      };
+      // 更新调试信息
+      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();
+  }
 
-    createInfiniteDatasource(): IDatasource {
-      return {
-        getRows: (params: IGetRowsParams) => {
-          const pageSize = this.paginationPageSize;
-          const startRow = params.startRow;
-          const page = Math.floor(startRow / pageSize);
-          
-          console.log(`Infinite row model: startRow=${startRow}, endRow=${params.endRow}, page=${page}, pageSize=${pageSize}`);
-          
-          // 使用模拟数据或真实API
-          if (this.debugInfo.useMockData) {
-            this.loading = true;
-            setTimeout(() => {
-              const mockResult = this.generateMockData(page, pageSize);
-              const rowData = mockResult.data;
-              const totalCount = mockResult.totalCount;
-              
-              const lastRow = totalCount > 0 ? totalCount : -1;
-              params.successCallback(rowData, lastRow);
-              
-              // 更新调试信息
-              this.debugInfo.dataSource = '模拟数据';
-              this.debugInfo.recordCount = totalCount;
-              this.debugInfo.lastUpdated = new Date().toISOString();
-              this.debugInfo.registerUrl = '模拟数据 - 无API调用';
-              this.debugInfo.listUrl = '模拟数据 - 无API调用';
-              this.debugInfo.currentPage = page + 1;
-              this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
-              this.debugInfo.pageSize = pageSize;
-              
-              console.log(`模拟数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
-              
-              // 更新组件状态
-              this.totalRecords = totalCount;
-              this.rowData = rowData;
-              this.configMetaList = rowData;
-              this.loading = false;
-              this.cdRef.detectChanges();
-            }, 100);
-          } else {
-            const request: ConfigMetaQueryRequest = {
-              page: page,
-              pageSize: pageSize
-            };
-            
-            this.loading = true;
-            this.configMetaService.listConfigMetaPaginated(request).subscribe({
-              next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
-                this.loading = false;
-                if (result.success && result.data) {
-                  const rowData = result.data;
-                  const totalCount = result.totalCount || 0;
-                  
-                  // 成功回调，提供行数据及总行数
-                  // 对于无限行模型，需要传递 rowCount（总行数）以便网格知道何时停止加载
-                  const lastRow = totalCount > 0 ? totalCount : -1;
-                  params.successCallback(rowData, lastRow);
-                  
-                  // 更新调试信息
-                  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.debugInfo.currentPage = page + 1;
-                  this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
-                  this.debugInfo.pageSize = pageSize;
-                  
-                  console.log(`无限行模型数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
-                  
-                  // 更新组件状态
-                  this.totalRecords = totalCount;
-                  this.rowData = rowData;
-                  this.configMetaList = rowData;
-                } else {
-                  console.error('无限行模型数据加载失败:', result);
-                  params.failCallback();
-                }
-                this.cdRef.detectChanges();
-              },
-              error: (error: HttpErrorResponse) => {
-                this.loading = false;
-                console.error('无限行模型加载数据时出错:', error);
-                params.failCallback();
-                this.cdRef.detectChanges();
-              }
-            });
-          }
-        },
-        rowCount: undefined // 初始时不知道总行数，将在第一次加载后由successCallback提供
-      };
-   }
+  onDataLoadError(error: any): void {
+    console.error('数据加载错误:', error);
+    this.loading = false;
+    this.cdRef.detectChanges();
+  }
 
-     onGridReady(params: GridReadyEvent) {
-       this.gridApi = params.api;
-       console.log('AG Grid ready, API initialized - setting infinite row model datasource');
-       
-       // 创建并设置无限行模型数据源
-       this.datasource = this.createInfiniteDatasource();
-       
-       // 通过API设置数据源（确保网格使用它）
-       params.api.setGridOption('datasource', this.datasource);
-       
-       // 添加分页事件监听器以更新调试信息
-       params.api.addEventListener('paginationChanged', this.onPaginationChanged.bind(this));
-       
-        // 网格滚动监听器暂时禁用，使用窗口滚动
-        // const gridElement = this.agGrid?.nativeElement;
-        // if (gridElement) {
-        //   this.gridScrollListener = this.renderer.listen(
-        //     gridElement,
-        //     'scroll',
-        //     this.handleScroll.bind(this)
-        //   );
-        //   console.log('网格滚动监听器已添加');
-        // }
-     }
-
-   onPaginationChanged(event: PaginationChangedEvent) {
-     if (!this.gridApi || event.newPage === undefined || typeof event.newPage !== 'number') {
-       return;
-     }
-     
-     const newPage = event.newPage + 1; // AG Grid页码从0开始，转换为从1开始
-     if (newPage !== this.currentPage) {
-       console.log(`分页改变: 从第${this.currentPage}页到第${newPage}页`);
-       this.currentPage = newPage;
-       
-       // 更新调试信息中的当前页码
-       this.debugInfo.currentPage = newPage;
-     }
-   }
+  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);
+  }
 
 
 
     console.log('ServiceRegisterConfigComponent view initialized');
     // 注意：滚动检测现在由 sticky-header 组件自动处理
     // 通过 [autoDetect]="true" 启用
+  }
+
+  /**
+   * 根据模拟数据状态更新数据配置
+   */
+  private updateDataConfig(): void {
+    console.log('更新数据配置，当前useMockData:', this.debugInfo.useMockData);
     
-    // 启用模拟数据用于测试滚动效果
-    this.debugInfo.useMockData = true;
+    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'
+      });
+    }
   }
 
 
      this.configMetaService.initConfigMeta().subscribe({
        next: (result: any) => {
          this.registering = false;
+         this.errorMessage = null;
          if (result.success) {
            console.log('注册完成:', result.data);
-           // 重新加载数据 - 刷新无限行模型缓存
-           if (this.gridApi) {
-             // 回到第一页
-             this.gridApi.paginationGoToFirstPage();
-             // 刷新缓存，强制重新加载数据
-             this.gridApi.refreshInfiniteCache();
-             
-             // 重置当前页码
-             this.currentPage = 1;
-             this.debugInfo.currentPage = 1;
-             
-             console.log('无限行模型缓存已刷新，回到第一页');
-           }
+           
+           // 注册后切换到真实API数据
+           this.debugInfo.useMockData = false;
+           this.updateDataConfig();
+           
+           // 重新加载数据
+           this.loadData(1);
+           
+           console.log('注册成功，数据已重新加载');
          } else {
            console.error('注册失败:', result);
          }
        error: (error: HttpErrorResponse) => {
          this.registering = false;
          console.error('注册时出错:', error);
+         this.errorMessage = `注册失败: ${error.status} ${error.statusText}`;
        }
      });
    }