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

projects/base-core/src/lib/components/sticky-header/sticky-header.component.scss

@@ -119,22 +119,49 @@
       background: #f8fafc; /* 恢复默认背景色，与普通状态一致 */
       border: 1px solid #e2e8f0;
       border-top: none; /* 移除顶部边框，实现无缝衔接 */
-      height: 100%; /* 填充父容器高度 */
-      min-height: 100%; /* 确保填充最小高度 */
-      flex: 1; /* 填充可用空间 */
+      height: auto; /* 改为自适应高度 */
+      min-height: auto; /* 移除最小高度限制 */
+      flex: none; /* 取消flex扩展 */
       
       > div:first-child {
-        padding-top: 1px; /* 减少上下空白，从6px改为1px */
-        padding-bottom: 1px; /* 减少上下空白，从6px改为1px */
+        padding-top: 0; /* 移除上下空白 */
+        padding-bottom: 0;
+        min-height: 40px; /* 设置为单行高度 */
+        display: flex;
+        align-items: center; /* 垂直居中 */
       }
     }
 
     .header-title {
-      font-size: 1.125rem; /* 更小一点 */
+      font-size: 1rem; /* 进一步缩小字体 */
+      line-height: 1.2; /* 减少行高 */
       font-weight: 800;
       color: #0f172a; /* 更深的文字颜色，增强可读性 */
       text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); /* 保持文字阴影 */
       letter-spacing: -0.025em; /* 紧凑的字母间距 */
+      margin: 0;
+      white-space: nowrap; /* 防止标题换行 */
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    // 优化按钮尺寸
+    ::ng-deep .header-content > div:first-child {
+      button {
+        min-height: 32px !important; /* 覆盖Material默认高度 */
+        padding: 0 12px !important; /* 减少左右内边距 */
+        height: 32px !important;
+        
+        .mat-icon, .mat-mdc-progress-spinner {
+          width: 18px;
+          height: 18px;
+          font-size: 18px;
+        }
+        
+        span {
+          font-size: 0.875rem; /* 按钮文字稍微缩小 */
+        }
+      }
     }
 
     .hint-section {

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

@@ -1,390 +0,0 @@
-# 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

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

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

@@ -1,25 +1 @@
-<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>
+<div [id]="containerId" class="tabulator-grid-container"></div>

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

@@ -1,307 +1,9 @@
-@use 'sass:math';
-
-.tabulator-grid-wrapper {
-  position: relative;
+.tabulator-grid-container {
   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;
-        }
-      }
-    }
+  
+  // 确保 Tabulator 表格正确显示
+  :deep(.tabulator) {
+    font-family: inherit;
   }
 }

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

@@ -1,73 +0,0 @@
-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/services/config.service.ts

@@ -5,7 +5,7 @@ import { Injectable } from '@angular/core';
 })
 export class ConfigService {
    private _useMockData = true; // 默认使用模拟数据，便于开发测试
-  private _apiBaseUrl = '/api'; // 默认API基础URL，通过代理转发
+   private _apiBaseUrl = '/api'; // 通过代理连接到后端API
 
   get useMockData(): boolean {
     return this._useMockData;