支持分页了

angular.json

@@ -38,7 +38,8 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": ["ag-grid-angular", "ag-grid-community"]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -19,7 +19,10 @@
         "@angular/platform-browser-dynamic": "^19.2.0",
         "@angular/router": "^19.2.0",
         "@types/marked": "^5.0.2",
+        "ag-grid-angular": "^35.0.0",
+        "ag-grid-community": "^35.0.0",
         "marked": "^17.0.1",
+        "ng-base": "file:../../ng-base/dist/ng-base",
         "prismjs": "^1.30.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -43,6 +46,7 @@
         "typescript": "~5.7.2"
       }
     },
+    "../../ng-base/dist/ng-base": {},
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -6149,6 +6153,35 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/ag-charts-types": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-13.0.1.tgz",
+      "integrity": "sha512-qg9adyiAaeUaDtWZEEPF45dv55kdJTe6Ghi0EQXCS79h/7KvOd6dxhqGZjPL1zeFl/L9qEXuYgb+LkGStq4mgQ==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-angular": {
+      "version": "35.0.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-35.0.1.tgz",
+      "integrity": "sha512-+Y1K/ZxiEbd3GhZcRWzLf60yiP4ECNoTCCqI65EgHiiRGInz3g1pDueArR7hE7V+z5gluA3NMGB3VrOZYUBKLg==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "35.0.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 18.0.0",
+        "@angular/core": ">= 18.0.0"
+      }
+    },
+    "node_modules/ag-grid-community": {
+      "version": "35.0.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-35.0.1.tgz",
+      "integrity": "sha512-fYYZdymWKsN9/tZv+R6uZRnuiWYEQr+GHl85ZrB0ixbFcE8opYK4NJI29NnMc9ShYiCBnAO9hj54IFa+FI4aDA==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "13.0.1"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -11189,6 +11222,10 @@
       "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",

package.json

@@ -21,7 +21,10 @@
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@types/marked": "^5.0.2",
+    "ag-grid-angular": "^35.0.0",
+    "ag-grid-community": "^35.0.0",
     "marked": "^17.0.1",
+    "ng-base": "file:../../ng-base/dist/ng-base",
     "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -0,0 +1,20 @@
+import { ConfigMeta } from 'ng-base';
+
+export interface ConfigMetaQueryRequest {
+  page?: number;
+  pageSize?: number;
+  configName?: string;
+  fieldName?: string;
+  yamlName?: string;
+  sortField?: string;
+  sortOrder?: 'asc' | 'desc';
+}
+
+export interface PaginatedQueryResult<T> {
+  success: boolean;
+  data?: T;
+  totalCount?: number;
+}
+
+// 重新导出 ConfigMeta，以便向后兼容
+export type { ConfigMeta };

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

@@ -16,29 +16,29 @@
     [debugRecordCount]="debugInfo.recordCount"
     [debugLastUpdated]="debugInfo.lastUpdated"
     [debugUseMockData]="debugInfo.useMockData"
-    [debugRegisterUrl]="lastRegisterUrl"
-    [debugListUrl]="lastListUrl"
+    [debugRegisterUrl]="debugInfo.registerUrl"
+    [debugListUrl]="debugInfo.listUrl"
     [headerWidth]="headerWidth"
     [headerLeft]="headerLeft"
     (buttonClick)="onRegister()"
   ></app-sticky-header>
    
-     <mat-card #matCard class="flex-1">
+      <mat-card #matCard class="flex-1">
     <mat-card-content>
-      <!-- Grid组件 -->
-      <app-grid
-        #gridRef
-        [dataUrl]="dataUrl"
-        [columns]="gridColumns"
-        [rowHeight]="48"
-        [showSummary]="false"
-        [showQueryPanel]="false"
-        [showPagination]="true"
-        [autoLoad]="true"
-        [loading]="loading"
-        (query)="onGridQuery($event)"
-        (dataLoaded)="onGridDataLoaded($event)">
-      </app-grid>
+        <!-- AG Grid组件 -->
+        <ag-grid-angular
+          class="ag-theme-alpine h-[calc(100vh-250px)]"
+          [columnDefs]="columnDefs"
+          [rowModelType]="'infinite'"
+          [datasource]="datasource"
+          [pagination]="true"
+          [paginationPageSize]="paginationPageSize"
+          [cacheBlockSize]="paginationPageSize"
+          [maxBlocksInCache]="10"
+          [domLayout]="'normal'"
+          [rowSelection]="'single'"
+          (gridReady)="onGridReady($event)">
+        </ag-grid-angular>
     </mat-card-content>
   </mat-card>
 </div>

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

@@ -1,401 +1,276 @@
-import { Component, OnInit, HostListener, ChangeDetectorRef, AfterViewInit, ElementRef, Renderer2, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, AfterViewInit, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCard, MatCardContent } from '@angular/material/card';
-import { MatTableModule } from '@angular/material/table';
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { StickyHeaderComponent, ConfigMetaService, ConfigService, ToastService, ConfigMeta, GridComponent, ColumnDefinition, formatTime } from 'ng-base';
+import { StickyHeaderComponent, ConfigMeta } from 'ng-base';
+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, MatTableModule, StickyHeaderComponent, GridComponent],
+  imports: [CommonModule, MatCard, MatCardContent, StickyHeaderComponent, AgGridAngular],
   templateUrl: './service-register-config.component.html',
   styleUrl: './service-register-config.component.scss'
 })
 export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, OnDestroy {
   title = '注册服务配置';
   hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
-  displayedColumns: string[] = ['configName', 'fieldName', 'fieldType', 'yamlName', 'fieldDesc'];
-  configMetaList: ConfigMeta[] = [];
-  dataUrl: string = '';
   
-  // Grid配置
-  gridColumns: ColumnDefinition[] = [
-    { field: 'configName', title: '配置名称', dataType: 'string', width: 150, sortable: true, filterable: true },
-    { field: 'fieldName', title: '字段名称', dataType: 'string', width: 150, sortable: true, filterable: true },
-    { field: 'fieldType', title: '字段类型', dataType: 'string', width: 120, sortable: true, filterable: true },
-    { field: 'yamlName', title: 'YAML标签', dataType: 'string', width: 150, sortable: true, filterable: true },
-    { field: 'fieldDesc', title: '字段描述', dataType: 'string', width: 200, sortable: true, filterable: true }
+   // 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 }
   ];
-  
+   rowData: any[] = [];
+   datasource: IDatasource | undefined = undefined;
+   configMetaList: ConfigMeta[] = [];
+
+   // 分页配置
+  paginationPageSize = 10;
+  currentPage = 1;
+  totalRecords = 0;
+  gridApi: GridApi | null = null;
+
   loading = false;
   registering = false;
-  isScrolled = false; // 向后兼容
-  isLocked = false;    // 是否锁定在顶部
-  isCompact = false;   // 是否缩小状态
-  scrollThreshold = 2; // 锁定阈值
-  compactThreshold = 50; // 缩小阈值（锁定后进一步滚动多少像素开始缩小）
-
-  private scrollContainer: HTMLElement | Window = window;
-  private scrollListener: (() => void) | null = null;
-  private rafId: number | null = null;
+  
+  // 顶部区域状态
+  isScrolled = false;
+  isLocked = false;
+  isCompact = false;
+  scrollThreshold = 2;
+  compactThreshold = 50;
+  headerWidth: number | null = null;
+  headerLeft: number | null = null;
 
   debugInfo = {
     dataSource: '',
     recordCount: 0,
     lastUpdated: '',
-    useMockData: false
+    useMockData: false,
+    registerUrl: '',
+    listUrl: '',
+    currentPage: 1,
+    totalPages: 1,
+    pageSize: 10
   };
 
+  @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
   @ViewChild('matCard', { read: ElementRef }) matCardRef!: ElementRef;
-  @ViewChild('gridRef') gridRef!: GridComponent;
-  headerWidth: number | null = null;
-  headerLeft: number | null = null;
-  private resizeListener: (() => void) | null = null;
-
-  lastRegisterUrl = '';
-  lastListUrl = '';
 
   constructor(
     private configMetaService: ConfigMetaService,
-    private configService: ConfigService,
-    private toastService: ToastService,
     private cdRef: ChangeDetectorRef,
     private elementRef: ElementRef,
     private renderer: Renderer2
   ) {}
 
-  ngOnInit() {
-    console.log('ServiceRegisterConfigComponent initialized');
-    // 设置Grid数据API地址
-    this.dataUrl = this.configMetaService.getListUrl();
-    console.log('Grid dataUrl:', this.dataUrl);
-    
-    // 临时测试数据（仅作为备用显示）
-    if (this.configMetaList.length === 0) {
-      this.configMetaList = [
-        { id: '1', configName: 'db.yaml', fieldName: 'host', fieldType: 'string', yamlName: 'host', fieldDesc: '数据库主机', creator: 'system', createdAt: '2024-01-01' },
-        { id: '2', configName: 'db.yaml', fieldName: 'port', fieldType: 'number', yamlName: 'port', fieldDesc: '数据库端口', creator: 'system', createdAt: '2024-01-01' },
-        { id: '3', configName: 'db.yaml', fieldName: 'username', fieldType: 'string', yamlName: 'username', fieldDesc: '数据库用户名', creator: 'system', createdAt: '2024-01-01' }
-      ];
-    }
-    // 不再需要手动加载数据，Grid组件会自动加载
-    // this.loadConfigMeta();
-  }
-
-  ngAfterViewInit() {
-    this.findScrollContainer();
-    this.setupScrollListener();
-    this.checkScroll();
-    
-    // 添加窗口resize监听器
-    this.resizeListener = () => this.onResize();
-    window.addEventListener('resize', this.resizeListener, { passive: true });
-  }
-
-  private onResize() {
-    // 只在锁定状态时更新尺寸
-    if (this.isLocked && this.matCardRef?.nativeElement) {
-      console.log('窗口大小变化，更新标题栏尺寸');
-      this.updateHeaderDimensions();
-    }
-  }
-
-  ngOnDestroy() {
-    this.cleanupScrollListener();
-    
-    // 清理resize监听器
-    if (this.resizeListener) {
-      window.removeEventListener('resize', this.resizeListener);
-      this.resizeListener = null;
-    }
-  }
-
-  @HostListener('window:scroll', [])
-  onWindowScroll() {
-    // 保留window滚动监听作为备用
-    if (this.scrollContainer === window) {
-      this.onScroll();
-    }
-  }
-
-  private findScrollContainer() {
-    // 向上查找最近的滚动容器
-    let element: HTMLElement | null = this.elementRef.nativeElement.parentElement;
-    
-    while (element && element !== document.body) {
-      const style = getComputedStyle(element);
-      const hasOverflow = style.overflow === 'auto' || style.overflow === 'scroll' || 
-                          style.overflowY === 'auto' || style.overflowY === 'scroll';
-      
-      if (hasOverflow) {
-        console.log('找到滚动容器:', element, 'clientHeight:', element.clientHeight, 'scrollHeight:', element.scrollHeight);
-        this.scrollContainer = element;
-        return;
-      }
-      
-      element = element.parentElement;
-    }
-    
-    // 未找到合适的容器，使用window
-    console.log('未找到滚动容器，使用window');
-    this.scrollContainer = window;
-  }
-  
-  private setupScrollListener() {
-    if (this.scrollContainer === window) {
-      this.scrollListener = () => this.onScroll();
-      window.addEventListener('scroll', this.scrollListener, { passive: true });
-    } else {
-      this.scrollListener = () => this.onScroll();
-      (this.scrollContainer as HTMLElement).addEventListener('scroll', this.scrollListener, { passive: true });
-    }
-  }
-  
-  private cleanupScrollListener() {
-    if (this.scrollListener) {
-      if (this.scrollContainer === window) {
-        window.removeEventListener('scroll', this.scrollListener);
-      } else {
-        (this.scrollContainer as HTMLElement).removeEventListener('scroll', this.scrollListener);
-      }
-      this.scrollListener = null;
-    }
-    
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  }
-  
-  private onScroll() {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-    }
-    
-    this.rafId = requestAnimationFrame(() => {
-      this.checkScroll();
-    });
-  }
-
-  private updateHeaderDimensions() {
-    if (!this.matCardRef?.nativeElement) return;
-    
-    const matCard = this.matCardRef.nativeElement;
-    const rect = matCard.getBoundingClientRect();
-    
-    // 计算mat-card在视口中的位置和宽度
-    this.headerWidth = rect.width;
-    this.headerLeft = rect.left;
-    
-    console.log('更新标题栏尺寸:', { 
-      width: this.headerWidth, 
-      left: this.headerLeft,
-      matCardRect: rect 
-    });
-    
-    this.cdRef.detectChanges();
-  }
-
-  private checkScroll() {
-    if (!this.scrollContainer) return;
-    
-    let scrollTop = 0;
-    let containerType = 'unknown';
-    
-    if (this.scrollContainer === window) {
-      scrollTop = window.scrollY || document.documentElement.scrollTop;
-      containerType = 'window';
-    } else {
-      scrollTop = (this.scrollContainer as HTMLElement).scrollTop;
-      containerType = 'element';
+    ngOnInit() {
+      console.log('ServiceRegisterConfigComponent initialized');
     }
-    
-    // 向后兼容：保持isScrolled逻辑
-    const scrolled = scrollTop > this.scrollThreshold;
-    
 
+  loadData(page: number = 1) {
+    this.loading = true;
+    this.currentPage = page;
     
-    // 阶段1: 检测是否锁定（开始滚动就锁定）
-    const shouldLock = scrollTop > 0;
-    
-    // 阶段2: 检测是否缩小（锁定后继续滚动）
-    const shouldCompact = shouldLock && scrollTop > this.compactThreshold;
-    
-    console.log('滚动检测:', { 
-      container: containerType, 
-      scrollTop, 
-      scrollThreshold: this.scrollThreshold,
-      compactThreshold: this.compactThreshold,
-      shouldLock,
-      shouldCompact,
-      scrolled, // 向后兼容
-      isLocked: this.isLocked,
-      isCompact: this.isCompact
-    });
-    
-    // 更新状态
-    let needsUpdate = false;
-    
-    if (this.isScrolled !== scrolled) {
-      this.isScrolled = scrolled;
-      needsUpdate = true;
-    }
-    
-    if (this.isLocked !== shouldLock) {
-      this.isLocked = shouldLock;
-      needsUpdate = true;
-      console.log('锁定状态变化:', this.isLocked);
-      
-      if (this.isLocked) {
-        // 锁定状态：计算并更新标题栏尺寸
-        this.updateHeaderDimensions();
-      } else {
-        // 解锁状态：清除尺寸，让标题栏恢复原始定位
-        this.headerWidth = null;
-        this.headerLeft = null;
-      }
-    }
+    // 构建查询请求
+    const request: ConfigMetaQueryRequest = {
+      page: page - 1, // API页码从0开始
+      pageSize: this.paginationPageSize
+    };
     
-    if (this.isCompact !== shouldCompact) {
-      this.isCompact = shouldCompact;
-      needsUpdate = true;
-      console.log('缩小状态变化:', this.isCompact);
-    }
+    console.log(`加载第${page}页数据，页大小: ${this.paginationPageSize}`);
     
-    if (needsUpdate) {
-      this.cdRef.detectChanges();
-    }
-  }
-
-  onRegister() {
-    this.lastRegisterUrl = this.configMetaService.getInitUrl();
-    console.debug('[注册] 请求URL:', this.lastRegisterUrl);
-    this.registering = true;
-    this.configMetaService.initConfigMeta().subscribe({
-      next: (response) => {
-        this.registering = false;
-        if (response.success) {
-          this.toastService.success('配置元信息注册成功');
-          // 刷新Grid数据
-          if (this.gridRef) {
-            this.gridRef.loadData();
-          } else {
-            console.warn('Grid组件引用未初始化');
+    this.configMetaService.listConfigMetaPaginated(request).subscribe({
+      next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
+        this.loading = false;
+        
+        if (result.success && result.data) {
+          this.rowData = 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.lastUpdated = new Date().toISOString();
+          this.debugInfo.useMockData = false;
+          this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
+          this.debugInfo.listUrl = this.configMetaService.getListUrl();
+          this.debugInfo.currentPage = page;
+          this.debugInfo.totalPages = Math.ceil(this.totalRecords / this.paginationPageSize);
+          this.debugInfo.pageSize = this.paginationPageSize;
+          
+          console.log(`数据加载成功: ${result.data.length}条记录，总计: ${this.totalRecords}`);
         } else {
-          const errorMsg = this.extractErrorMessageFromResponse(response);
-          this.toastService.error(`注册失败：${errorMsg}`);
+          console.error('数据加载失败:', result);
         }
+        
+        this.cdRef.detectChanges();
       },
-      error: (error) => {
-        this.registering = false;
-        const errorMsg = this.extractErrorMessage(error);
-        this.toastService.error(`注册失败：${errorMsg}`);
-        console.debug('注册配置元信息失败', error);
+      error: (error: HttpErrorResponse) => {
+        this.loading = false;
+        console.error('加载数据时出错:', error);
+        this.cdRef.detectChanges();
       }
     });
   }
 
-  loadConfigMeta() {
-    this.lastListUrl = this.configMetaService.getListUrl();
-    console.debug('[加载] 请求URL:', this.lastListUrl);
-    
-    if (this.gridRef) {
-      // 使用Grid组件加载数据
-      this.gridRef.loadData();
-    } else {
-      // 向后兼容：手动加载数据
-      console.debug('Grid组件未初始化，使用手动加载');
-      this.loading = true;
-      this.configMetaService.listConfigMeta().subscribe({
-        next: (list) => {
-          this.configMetaList = list;
-          this.loading = false;
-          // 更新调试信息
-          const source = this.configService.useMockData ? '模拟数据' : 'API数据';
-          this.updateDebugInfo(list, source);
-        },
-        error: (error) => {
-          this.loading = false;
-          const errorMsg = this.extractErrorMessage(error);
-          this.toastService.error(`加载配置元信息失败：${errorMsg}`);
-          console.debug('加载配置元信息失败', error);
-          // 错误时也更新调试信息
-          this.updateDebugInfo([], `API调用失败: ${errorMsg}`);
-        }
-      });
-    }
-  }
-
-  // Grid事件处理
-  onGridQuery(queryParams: any) {
-    console.log('Grid查询参数:', queryParams);
-    // 这里可以处理查询事件，比如重新加载数据
-    // 由于当前使用的是静态数据，可以根据查询参数进行本地过滤
-  }
-
-  onGridDataLoaded(data: any[]) {
-    console.log('Grid数据加载完成:', data);
-    // 更新本地数据列表（向后兼容）
-    this.configMetaList = data as ConfigMeta[];
-    // 更新调试信息
-    const source = this.configService.useMockData ? '模拟数据' : 'API数据';
-    this.updateDebugInfo(this.configMetaList, source);
-  }
+   createInfiniteDatasource(): IDatasource {
+     return {
+       getRows: (params: IGetRowsParams) => {
+         const pageSize = this.paginationPageSize;
+         const startRow = params.startRow;
+         const page = Math.floor(startRow / pageSize);
+         
+         const request: ConfigMetaQueryRequest = {
+           page: page,
+           pageSize: pageSize
+         };
+         
+         console.log(`Infinite row model: startRow=${startRow}, endRow=${params.endRow}, 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提供
+     };
+   }
 
+    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));
+    }
 
+   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;
+     }
+   }
 
-  private updateDebugInfo(list: ConfigMeta[], source: string) {
-    // 轻量级调试信息更新，不影响性能
-    this.debugInfo = {
-      dataSource: source,
-      recordCount: list.length,
-      lastUpdated: formatTime(new Date()),
-      useMockData: this.configService.useMockData
-    };
-    
-    // 控制台调试日志（仅在开发时查看）
-    console.debug('[调试] 数据源:', source);
-    console.debug('[调试] 记录数:', list.length);
-    console.debug('[调试] 使用模拟数据:', this.configService.useMockData);
-    if (list.length > 0) {
-      console.debug('[调试] 首条数据示例:', list[0]);
-    }
+  ngAfterViewInit() {
+    console.log('ServiceRegisterConfigComponent view initialized');
   }
 
-  private extractErrorMessage(error: any): string {
-    if (error instanceof HttpErrorResponse) {
-      // HTTP错误
-      const status = error.status;
-      const errorBody = error.error;
-      console.debug(`[错误详情] HTTP ${status} ${error.url}`);
-      console.debug(`[错误详情] 错误响应:`, errorBody);
-      
-      if (errorBody?.error) {
-        return `HTTP ${status}: ${errorBody.error}`;
-      } else if (errorBody?.message) {
-        return `HTTP ${status}: ${errorBody.message}`;
-      } else if (error.message) {
-        return `HTTP ${status}: ${error.message}`;
-      } else {
-        return `HTTP错误 ${status}`;
-      }
-    } else if (error?.error) {
-      // 可能已经是QueryResult格式
-      return error.error.error || error.error.message || error.message || '未知错误';
-    } else if (error?.message) {
-      return error.message;
-    }
-    return '未知错误';
+  ngOnDestroy() {
+    console.log('ServiceRegisterConfigComponent destroyed');
   }
 
-  private extractErrorMessageFromResponse(response: any): string {
-    if (response?.error) {
-      return response.error;
-    } else if (response?.message) {
-      return response.message;
-    }
-    return '未知错误';
-  }
-}
+   onRegister() {
+     console.log('注册按钮被点击');
+     this.registering = true;
+     
+     this.configMetaService.initConfigMeta().subscribe({
+       next: (result: any) => {
+         this.registering = false;
+         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('无限行模型缓存已刷新，回到第一页');
+           }
+         } else {
+           console.error('注册失败:', result);
+         }
+       },
+       error: (error: HttpErrorResponse) => {
+         this.registering = false;
+         console.error('注册时出错:', error);
+       }
+     });
+   }
+}

src/app/services/agent.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AgentService } from './agent.service';
+
+describe('AgentService', () => {
+  let service: AgentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AgentService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/agent.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgentService {
+
+  constructor() { }
+}

src/app/services/auth.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService
+      ]
+    });
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth.service.ts

@@ -0,0 +1,199 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, BehaviorSubject, throwError } from 'rxjs';
+import { tap, catchError } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { ConfigService } from './config.service';
+
+// 后端通用响应格式
+export interface QueryResult<T> {
+  success?: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+export interface LoginResponse extends QueryResult<boolean> {
+  // /api/login/admin 返回 QueryResult[bool]
+  // token字段保留用于兼容性（可能某些API返回token）
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  user?: {
+    id: number;
+    username: string;
+    name?: string;
+    roles?: string[];
+  };
+  basicAuth?: string; // base64编码的 username:password
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private http = inject(HttpClient);
+  private router = inject(Router);
+  private configService = inject(ConfigService);
+
+  private authState = new BehaviorSubject<AuthState>({
+    isAuthenticated: false
+  });
+  authState$ = this.authState.asObservable();
+
+  private readonly BASIC_AUTH_KEY = 'basic_auth';
+  private readonly USER_KEY = 'auth_user';
+
+  constructor() {
+    console.log('AuthService初始化');
+    this.initializeAuthState();
+  }
+
+  private initializeAuthState() {
+    console.log('初始化认证状态');
+    const basicAuth = this.getBasicAuth();
+    const user = this.getUser();
+    console.log('本地存储Basic认证:', basicAuth ? '有' : '无');
+    console.log('本地存储用户:', user);
+
+    // 从本地存储恢复认证状态
+    if (basicAuth && user) {
+      console.log('从本地存储恢复认证状态');
+      this.authState.next({
+        isAuthenticated: true,
+        basicAuth,
+        user
+      });
+    } else {
+      console.log('未找到保存的认证信息，需要重新登录');
+      // 清除可能的不完整数据
+      if (basicAuth || user) {
+        console.log('清除不完整的认证数据');
+        this.clearAuthData();
+      }
+      // 初始状态设置为未认证
+      this.authState.next({
+        isAuthenticated: false
+      });
+    }
+  }
+
+  login(username: string, password: string): Observable<LoginResponse> {
+    console.log('开始登录，用户名:', username);
+    
+    // 调用管理员登录API
+    const apiUrl = `${this.configService.apiBaseUrl}/login/admin`;
+    console.log('登录API:', apiUrl);
+    
+    const loginData = {
+      user_id: username,
+      password: password
+    };
+    
+    return this.http.post<LoginResponse>(apiUrl, loginData).pipe(
+      tap(response => {
+        console.log('登录响应:', response);
+        
+        if (response.success) {
+          // 登录成功，生成Basic认证编码并保存
+          const basicAuth = btoa(`${username}:${password}`);
+          console.log('生成Basic认证编码:', basicAuth);
+          
+          this.setBasicAuth(basicAuth);
+          this.setUser({
+            id: 1,
+            username: username,
+            name: username,
+            roles: ['admin']
+          });
+          
+          this.authState.next({
+            isAuthenticated: true,
+            basicAuth,
+            user: {
+              id: 1,
+              username: username,
+              name: username,
+              roles: ['admin']
+            }
+          });
+          console.log('登录成功，认证状态更新');
+        } else {
+          console.warn('登录失败:', response.message || response.error);
+          throw new Error(response.message || response.error || '登录失败');
+        }
+      }),
+      catchError(error => {
+        console.error('登录失败:', error);
+        return throwError(() => error);
+      })
+    );
+  }
+
+  logout() {
+    console.log('用户登出');
+    this.clearAuthData();
+    this.authState.next({
+      isAuthenticated: false
+    });
+    this.router.navigate(['/login']);
+  }
+
+  isAuthenticated(): boolean {
+    return this.authState.value.isAuthenticated;
+  }
+
+  getBasicAuth(): string | null {
+    return localStorage.getItem(this.BASIC_AUTH_KEY);
+  }
+
+  private setBasicAuth(basicAuth: string) {
+    localStorage.setItem(this.BASIC_AUTH_KEY, basicAuth);
+  }
+
+  // 兼容性方法，返回null（不再使用token）
+  getToken(): string | null {
+    return null;
+  }
+
+  private setUser(user: any) {
+    if (user) {
+      localStorage.setItem(this.USER_KEY, JSON.stringify(user));
+    }
+  }
+
+  private getUser(): any {
+    const userStr = localStorage.getItem(this.USER_KEY);
+    if (userStr) {
+      try {
+        return JSON.parse(userStr);
+      } catch (e) {
+        console.error('解析用户信息失败:', e);
+        return null;
+      }
+    }
+    return null;
+  }
+
+  private clearAuthData() {
+    localStorage.removeItem(this.BASIC_AUTH_KEY);
+    localStorage.removeItem(this.USER_KEY);
+  }
+
+  // 获取当前用户信息
+  getCurrentUser() {
+    return this.authState.value.user;
+  }
+
+  // 检查是否具有特定角色
+  hasRole(role: string): boolean {
+    const user = this.authState.value.user;
+    if (!user || !user.roles) {
+      return false;
+    }
+    return user.roles.includes(role);
+  }
+
+  // 不再使用token刷新，使用Basic认证
+}

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

@@ -0,0 +1,187 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ConfigMeta, ConfigMetaQueryRequest, PaginatedQueryResult } from '../models/config-meta.model';
+import { ConfigService } from './config.service';
+import { QueryResult } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigMetaService {
+  private initApiPath = '/init/config/meta';
+  private listApiPath = '/config/meta/list';
+
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {
+    console.debug('[配置元服务] 初始化，apiBaseUrl:', this.config.apiBaseUrl);
+    console.debug('[配置元服务] useMockData:', this.config.useMockData);
+    console.debug('[配置元服务] initApiPath:', this.initApiPath);
+    console.debug('[配置元服务] listApiPath:', this.listApiPath);
+  }
+
+  getInitUrl(): string {
+    return `${this.config.apiBaseUrl}${this.initApiPath}`;
+  }
+
+  getListUrl(): string {
+    return `${this.config.apiBaseUrl}${this.listApiPath}`;
+  }
+
+  initConfigMeta(): Observable<QueryResult<any>> {
+    if (this.config.useMockData) {
+      console.debug('[配置元服务] 模拟初始化配置元信息');
+      return of({ success: true, data: '模拟初始化成功' });
+    }
+    const url = `${this.config.apiBaseUrl}${this.initApiPath}`;
+    console.debug(`[配置元服务] 调用初始化API: ${url}`);
+    console.debug(`[配置元服务] 完整URL: ${url}`);
+    return this.http.post<QueryResult<any>>(url, {});
+  }
+
+  listConfigMeta(): Observable<ConfigMeta[]> {
+    if (this.config.useMockData) {
+      console.debug('[配置元服务] 使用模拟数据');
+      const mockData = this.generateMockConfigMetaList();
+      console.debug(`[配置元服务] 模拟数据记录数: ${mockData.length}`);
+      return of(mockData);
+    }
+    
+    const url = `${this.config.apiBaseUrl}${this.listApiPath}`;
+    console.debug(`[配置元服务] 调用API: ${url}`);
+    console.debug(`[配置元服务] 完整URL: ${url}`);
+    return this.http.post<QueryResult<ConfigMeta[]>>(url, {})
+      .pipe(
+        map(response => {
+          const data = response.data || [];
+          console.debug(`[配置元服务] API响应记录数: ${data.length}`);
+          console.debug(`[配置元服务] API响应成功状态: ${response.success}`);
+          if (data.length > 0) {
+            console.debug('[配置元服务] 首条数据示例:', data[0]);
+          }
+          return data;
+        })
+      );
+  }
+
+  listConfigMetaPaginated(request: ConfigMetaQueryRequest): Observable<PaginatedQueryResult<ConfigMeta[]>> {
+    console.debug(`[配置元服务] listConfigMetaPaginated调用，useMockData: ${this.config.useMockData}`);
+    
+    if (this.config.useMockData) {
+      console.debug('[配置元服务] 使用模拟分页数据');
+      const mockResult = this.generateMockPaginatedData(request);
+      console.debug(`[配置元服务] 模拟数据: ${mockResult.data?.length || 0}条，总计: ${mockResult.totalCount || 0}`);
+      if (mockResult.data && mockResult.data.length > 0) {
+        console.debug('[配置元服务] 首条数据:', mockResult.data[0]);
+      }
+      return of(mockResult);
+    }
+    
+    const url = `${this.config.apiBaseUrl}${this.listApiPath}`;
+    console.debug(`[配置元服务] 调用真实API: ${url}`, request);
+    console.debug(`[配置元服务] 完整请求URL: ${url}`);
+    console.debug(`[配置元服务] 请求参数:`, JSON.stringify(request));
+    
+    return this.http.post<PaginatedQueryResult<ConfigMeta[]>>(url, request)
+      .pipe(
+        map(response => {
+          console.debug(`[配置元服务] API响应成功`);
+          console.debug(`[配置元服务] API响应记录数: ${response.data?.length || 0}，总计: ${response.totalCount || 0}`);
+          console.debug(`[配置元服务] API响应成功状态: ${response.success}`);
+          if (response.data && response.data.length > 0) {
+            console.debug('[配置元服务] 首条API数据:', response.data[0]);
+          }
+          return response;
+        })
+      );
+  }
+
+  searchConfigMeta(configName?: string, fieldName?: string, yamlName?: string): Observable<ConfigMeta[]> {
+    if (this.config.useMockData) {
+      return of(this.generateMockConfigMetaList());
+    }
+    const params: any = {};
+    if (configName) params.configName = configName;
+    if (fieldName) params.fieldName = fieldName;
+    if (yamlName) params.yamlName = yamlName;
+    const url = `${this.config.apiBaseUrl}/config/meta/search`;
+    console.debug(`[配置元服务] 搜索API URL: ${url}`);
+    return this.http.post<QueryResult<ConfigMeta[]>>(url, params)
+      .pipe(
+        map(response => response.data || [])
+      );
+  }
+
+  private generateMockConfigMetaList(): ConfigMeta[] {
+    const mockList: ConfigMeta[] = [];
+    const configs = ['app', 'database', 'redis', 'logger', 'cache'];
+    const fieldTypes = ['string', 'int', 'bool', 'config', 'array'];
+    
+    for (let i = 1; i <= 20; i++) {
+      const configIndex = i % configs.length;
+      mockList.push({
+        id: `config-${i}`,
+        configName: configs[configIndex],
+        fieldName: `field_${i}`,
+        fieldType: fieldTypes[i % fieldTypes.length],
+        yamlName: `yaml.field.${i}`,
+        fieldDesc: `这是第 ${i} 个配置字段的描述`,
+        creator: `user_${(i % 5) + 1}`,
+        createdAt: new Date(Date.now() - i * 86400000).toISOString()
+      });
+    }
+    return mockList;
+  }
+
+  private generateMockPaginatedData(request: ConfigMetaQueryRequest): PaginatedQueryResult<ConfigMeta[]> {
+    // 生成完整的模拟数据
+    const allData = this.generateMockConfigMetaList();
+    
+    // 应用过滤条件
+    let filteredData = allData.filter(item => {
+      if (request.configName && !item.configName.toLowerCase().includes(request.configName.toLowerCase())) {
+        return false;
+      }
+      if (request.fieldName && !item.fieldName.toLowerCase().includes(request.fieldName.toLowerCase())) {
+        return false;
+      }
+      if (request.yamlName && !item.yamlName.toLowerCase().includes(request.yamlName.toLowerCase())) {
+        return false;
+      }
+      return true;
+    });
+    
+    // 应用排序
+    if (request.sortField) {
+      const sortField = request.sortField as keyof ConfigMeta;
+      const sortOrder = request.sortOrder === 'desc' ? -1 : 1;
+      
+      filteredData.sort((a, b) => {
+        const aVal = a[sortField] || '';
+        const bVal = b[sortField] || '';
+        
+        if (aVal < bVal) return -1 * sortOrder;
+        if (aVal > bVal) return 1 * sortOrder;
+        return 0;
+      });
+    }
+    
+    const totalCount = filteredData.length;
+    
+    // 应用分页
+    const page = request.page || 0;
+    const pageSize = request.pageSize || 10;
+    const startIndex = page * pageSize;
+    const endIndex = startIndex + pageSize;
+    const pagedData = filteredData.slice(startIndex, endIndex);
+    
+    return {
+      success: true,
+      data: pagedData,
+      totalCount: totalCount
+    };
+  }
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfigService } from './config.service';
+
+describe('ConfigService', () => {
+  let service: ConfigService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ConfigService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/config.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigService {
+   private _useMockData = false; // 默认使用API数据
+  private _apiBaseUrl = '/api'; // 默认API基础URL，通过代理转发
+
+  get useMockData(): boolean {
+    return this._useMockData;
+  }
+
+  set useMockData(value: boolean) {
+    this._useMockData = value;
+  }
+
+  get apiBaseUrl(): string {
+    return this._apiBaseUrl;
+  }
+
+  set apiBaseUrl(value: string) {
+    this._apiBaseUrl = value;
+  }
+}

src/app/services/markdown.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MarkdownService } from './markdown.service';
+
+describe('MarkdownService', () => {
+  let service: MarkdownService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MarkdownService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/markdown.service.ts

@@ -0,0 +1,110 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, catchError, map, of } from 'rxjs';
+import * as marked from 'marked';
+import * as Prism from 'prismjs';
+
+// 导入常用语言支持
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MarkdownService {
+  private readonly basePath = 'docs/';
+
+  constructor(private http: HttpClient) {
+    // 配置marked选项和自定义渲染器
+    marked.setOptions({
+      gfm: true, // GitHub Flavored Markdown
+      breaks: true, // 将换行符转换为<br>
+      // sanitize选项在marked v17中已移除，使用外部HTML sanitizer替代
+      // 我们信任自己的内容，因此不进行额外清理
+    });
+  }
+
+  getMarkdown(fileName: string): Observable<string> {
+    const filePath = `${this.basePath}${fileName}`;
+    console.log('Requesting markdown file:', filePath);
+    
+    return this.http.get(filePath, { responseType: 'text' }).pipe(
+      map(markdown => this.parseMarkdown(markdown)),
+      catchError(error => {
+        console.error(`无法加载markdown文件: ${filePath}`, error);
+        console.error('Error details:', error.status, error.url, error.message);
+        return of(`<div class="text-red-500">无法加载文档: ${fileName}</div>`);
+      })
+    );
+  }
+
+  getConfigureReadme(): Observable<string> {
+    return this.getMarkdown('README.CONFIGURE.md');
+  }
+
+  private parseMarkdown(markdown: string): string {
+    try {
+      // 配置自定义渲染器支持代码高亮
+      const renderer = new marked.Renderer();
+      
+      // 重写code渲染器以支持prismjs语法高亮
+      // marked v17+ 使用对象参数 { text, lang, escaped }
+      const originalCode = renderer.code;
+      renderer.code = ({ text, lang, escaped }: { text: string; lang?: string; escaped?: boolean }): string => {
+        const validLanguage = this.getValidLanguage(lang);
+        const highlightedCode = validLanguage 
+          ? Prism.highlight(text, Prism.languages[validLanguage], validLanguage)
+          : this.escapeHtml(text);
+        
+        return `<pre class="prism-code language-${validLanguage || 'none'}"><code class="language-${validLanguage || 'none'}">${highlightedCode}</code></pre>`;
+      };
+      
+      // 使用自定义渲染器解析markdown
+      return marked.parse(markdown, { renderer }) as string;
+    } catch (error) {
+      console.error('Markdown解析错误:', error);
+      return `<pre class="p-4 bg-gray-100 rounded overflow-auto">${this.escapeHtml(markdown)}</pre>`;
+    }
+  }
+
+  private getValidLanguage(language: string | undefined): string | undefined {
+    if (!language) return undefined;
+    
+    // 清理语言标识，移除可能的前缀
+    const cleanLanguage = language.toLowerCase().trim();
+    
+    // 检查是否支持的语言
+    const supportedLanguages = ['javascript', 'typescript', 'js', 'ts', 'go', 'bash', 'sh', 'shell', 'json', 'yaml', 'yml', 'sql', 'css', 'scss', 'html', 'xml'];
+    
+    // 映射别名
+    const languageMap: Record<string, string> = {
+      'js': 'javascript',
+      'ts': 'typescript',
+      'sh': 'bash',
+      'shell': 'bash',
+      'yml': 'yaml',
+    };
+    
+    const mappedLanguage = languageMap[cleanLanguage] || cleanLanguage;
+    
+    // 检查是否在支持的语言列表中
+    if (supportedLanguages.includes(mappedLanguage) && Prism.languages[mappedLanguage]) {
+      return mappedLanguage;
+    }
+    
+    return undefined;
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

src/app/services/project.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectService } from './project.service';
+
+describe('ProjectService', () => {
+  let service: ProjectService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProjectService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/project.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { Project, ProjectRequest } from '../models/project.model';
+import { ConfigService } from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectService {
+  private apiPath = '/query/config/projects';
+
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {}
+
+  getProjects(): Observable<Project[]> {
+    if (this.config.useMockData) {
+      return of(this.generateMockProjects());
+    }
+    return this.http.post<Project[]>(`${this.config.apiBaseUrl}${this.apiPath}`, {});
+  }
+
+  getProject(id: string): Observable<Project> {
+    if (this.config.useMockData) {
+      return of(this.generateMockProject(id));
+    }
+    return this.http.post<Project>(`${this.config.apiBaseUrl}/query/config/project/${id}`, {});
+  }
+
+  createProject(request: ProjectRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/create/config/project`, request);
+  }
+
+  updateProject(id: string, request: ProjectRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/update/config/project/${id}`, request);
+  }
+
+  deleteProject(id: string): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/delete/config/project/${id}`, {});
+  }
+
+  private generateMockProjects(): Project[] {
+    const projects: Project[] = [];
+    for (let i = 1; i <= 10; i++) {
+      projects.push({
+        id: `project-${i}`,
+        name: `项目 ${i}`,
+        description: `这是第 ${i} 个项目的描述`,
+        tenant_id: `tenant-${(i % 3) + 1}`,
+        created_at: new Date(Date.now() - i * 86400000).toISOString(),
+        updated_at: new Date(Date.now() - i * 43200000).toISOString()
+      });
+    }
+    return projects;
+  }
+
+  private generateMockProject(id: string): Project {
+    return {
+      id,
+      name: `模拟项目 ${id}`,
+      description: `模拟项目描述`,
+      tenant_id: 'tenant-1',
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    };
+  }
+}

src/app/services/role.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RoleService } from './role.service';
+
+describe('RoleService', () => {
+  let service: RoleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RoleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/role.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { Role, RoleRequest } from '../models/role.model';
+import { ConfigService } from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RoleService {
+  private apiPath = '/query/config/roles';
+
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {}
+
+  getRoles(): Observable<Role[]> {
+    if (this.config.useMockData) {
+      return of(this.generateMockRoles());
+    }
+    return this.http.post<Role[]>(`${this.config.apiBaseUrl}${this.apiPath}`, {});
+  }
+
+  getRole(id: string): Observable<Role> {
+    if (this.config.useMockData) {
+      return of(this.generateMockRole(id));
+    }
+    return this.http.post<Role>(`${this.config.apiBaseUrl}/query/config/role/${id}`, {});
+  }
+
+  createRole(request: RoleRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/create/config/role`, request);
+  }
+
+  updateRole(id: string, request: RoleRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/update/config/role/${id}`, request);
+  }
+
+  deleteRole(id: string): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/delete/config/role/${id}`, {});
+  }
+
+  private generateMockRoles(): Role[] {
+    const roles: Role[] = [];
+    for (let i = 1; i <= 10; i++) {
+      roles.push({
+        id: `role-${i}`,
+        name: `角色 ${i}`,
+        description: `这是第 ${i} 个角色的描述`,
+        permissions: [`perm${i}-read`, `perm${i}-write`],
+        created_at: new Date(Date.now() - i * 86400000).toISOString(),
+        updated_at: new Date(Date.now() - i * 43200000).toISOString()
+      });
+    }
+    return roles;
+  }
+
+  private generateMockRole(id: string): Role {
+    return {
+      id,
+      name: `模拟角色 ${id}`,
+      description: `模拟角色描述`,
+      permissions: ['read', 'write'],
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    };
+  }
+}

src/app/services/service-management.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ServiceManagementService } from './service-management.service';
+
+describe('ServiceManagementService', () => {
+  let service: ServiceManagementService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ServiceManagementService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/service-management.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServiceManagementService {
+
+  constructor() { }
+}

src/app/services/skill.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SkillService } from './skill.service';
+
+describe('SkillService', () => {
+  let service: SkillService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SkillService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/skill.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SkillService {
+
+  constructor() { }
+}

src/app/services/tenant.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TenantService } from './tenant.service';
+
+describe('TenantService', () => {
+  let service: TenantService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TenantService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/tenant.service.ts

@@ -0,0 +1,76 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { Tenant, TenantRequest } from '../models/tenant.model';
+import { ConfigService } from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TenantService {
+  private apiPath = '/query/config/tenants';
+
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {}
+
+  getTenants(): Observable<Tenant[]> {
+    if (this.config.useMockData) {
+      return of(this.generateMockTenants());
+    }
+    return this.http.post<Tenant[]>(`${this.config.apiBaseUrl}${this.apiPath}`, {});
+  }
+
+  getTenant(id: string): Observable<Tenant> {
+    if (this.config.useMockData) {
+      return of(this.generateMockTenant(id));
+    }
+    return this.http.post<Tenant>(`${this.config.apiBaseUrl}/query/config/tenant/${id}`, {});
+  }
+
+  createTenant(request: TenantRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/create/config/tenant`, request);
+  }
+
+  updateTenant(id: string, request: TenantRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/update/config/tenant/${id}`, request);
+  }
+
+  deleteTenant(id: string): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/delete/config/tenant/${id}`, {});
+  }
+
+  private generateMockTenants(): Tenant[] {
+    const tenants: Tenant[] = [];
+    for (let i = 1; i <= 10; i++) {
+      tenants.push({
+        id: `tenant-${i}`,
+        name: `租户 ${i}`,
+        description: `这是第 ${i} 个租户的描述`,
+        created_at: new Date(Date.now() - i * 86400000).toISOString(),
+        updated_at: new Date(Date.now() - i * 43200000).toISOString()
+      });
+    }
+    return tenants;
+  }
+
+  private generateMockTenant(id: string): Tenant {
+    return {
+      id,
+      name: `模拟租户 ${id}`,
+      description: `模拟租户描述`,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    };
+  }
+}

src/app/services/toast.service.ts

@@ -0,0 +1,101 @@
+import { Injectable, ComponentRef, createComponent, ApplicationRef, Injector } from '@angular/core';
+import { ToastComponent } from '../components/toast/toast.component';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface ToastOptions {
+  duration?: number;
+  type?: ToastType;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService {
+  private toasts: ComponentRef<ToastComponent>[] = [];
+  private container: HTMLElement | null = null;
+
+  constructor(
+    private appRef: ApplicationRef,
+    private injector: Injector
+  ) {}
+
+  private ensureContainer() {
+    if (!this.container) {
+      this.container = document.createElement('div');
+      this.container.className = 'toast-container';
+      // 添加一些内联样式
+      this.container.style.position = 'fixed';
+      this.container.style.top = '20px';
+      this.container.style.right = '20px';
+      this.container.style.zIndex = '9999';
+      this.container.style.display = 'flex';
+      this.container.style.flexDirection = 'column';
+      this.container.style.alignItems = 'flex-end';
+      document.body.appendChild(this.container);
+    }
+  }
+
+  show(message: string, options?: ToastOptions) {
+    this.ensureContainer();
+    
+    const type = options?.type || 'info';
+    const duration = options?.duration || 3000;
+
+    const toastRef = createComponent(ToastComponent, {
+      environmentInjector: this.appRef.injector,
+      elementInjector: this.injector
+    });
+
+    // 设置输入属性（类型安全）
+    toastRef.instance.message = message;
+    toastRef.instance.type = type;
+
+    // 添加到DOM
+    this.container?.appendChild(toastRef.location.nativeElement);
+    this.appRef.attachView(toastRef.hostView);
+
+    // 存储引用
+    this.toasts.push(toastRef);
+
+    // 自动移除
+    setTimeout(() => {
+      this.removeToast(toastRef);
+    }, duration);
+
+    return toastRef;
+  }
+
+  success(message: string, options?: Omit<ToastOptions, 'type'>) {
+    return this.show(message, { ...options, type: 'success' });
+  }
+
+  error(message: string, options?: Omit<ToastOptions, 'type'>) {
+    return this.show(message, { ...options, type: 'error' });
+  }
+
+  info(message: string, options?: Omit<ToastOptions, 'type'>) {
+    return this.show(message, { ...options, type: 'info' });
+  }
+
+  warning(message: string, options?: Omit<ToastOptions, 'type'>) {
+    return this.show(message, { ...options, type: 'warning' });
+  }
+
+  private removeToast(toastRef: ComponentRef<ToastComponent>) {
+    const index = this.toasts.indexOf(toastRef);
+    if (index > -1) {
+      this.toasts.splice(index, 1);
+      this.appRef.detachView(toastRef.hostView);
+      toastRef.destroy();
+    }
+  }
+
+  clearAll() {
+    this.toasts.forEach(toastRef => {
+      this.appRef.detachView(toastRef.hostView);
+      toastRef.destroy();
+    });
+    this.toasts = [];
+  }
+}

src/app/services/tree.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TreeService } from './tree.service';
+
+describe('TreeService', () => {
+  let service: TreeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TreeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/tree.service.ts

@@ -0,0 +1,180 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of, catchError, map } from 'rxjs';
+import { TreeNode } from '../models/tree-node.model';
+import { ConfigService } from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TreeService {
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {}
+
+  getTree(): Observable<TreeNode[]> {
+    console.log('TreeService.getTree() 调用');
+    console.log('config.useMockData:', this.config.useMockData);
+    console.log('config.apiBaseUrl:', this.config.apiBaseUrl);
+    
+    if (this.config.useMockData) {
+      console.log('使用模拟树数据');
+      const mockTree = this.getMockTree();
+      console.log('模拟数据节点数:', mockTree.length);
+      // 调试：打印第一个节点的图标信息
+      if (mockTree.length > 0 && mockTree[0].children) {
+        console.log('[模拟数据]第一个分组节点图标:', mockTree[0].icon);
+        console.log('[模拟数据]第一个分组子节点图标:', mockTree[0].children.map(c => ({name: c.name, icon: c.icon})));
+      }
+      console.log('模拟数据结构:', JSON.stringify(mockTree, null, 2));
+      return of(mockTree);
+    }
+    
+    const apiUrl = `${this.config.apiBaseUrl}/projects/tree`;
+    console.log('请求树数据:', apiUrl);
+    
+    return this.http.get<any>(apiUrl).pipe(
+      map(response => {
+        console.log('树数据响应:', response);
+        // 后端返回 {success: true, data: [...]}
+        if (response && response.success && response.data) {
+          console.log('提取data字段，节点数:', response.data.length);
+          // 调试：打印第一个节点的图标信息
+          if (response.data.length > 0 && response.data[0].children) {
+            console.log('第一个分组节点图标:', response.data[0].icon);
+            console.log('第一个分组子节点图标:', response.data[0].children.map((c: any) => ({name: c.name, icon: c.icon})));
+          }
+          return response.data;
+        } else {
+          console.warn('响应格式不符合预期，返回空数组');
+          return [];
+        }
+      }),
+      catchError((error) => {
+        console.error('获取树数据失败:', error);
+        console.error('错误详情:', error.status, error.message, error.url);
+        // 认证失败或其他错误时返回空数组，不显示模拟数据
+        console.warn('API请求失败，回退到模拟数据');
+        const mockTree = this.getMockTree();
+        console.log('回退模拟数据节点数:', mockTree.length);
+        return of(mockTree);
+      })
+    );
+  }
+
+  private getMockTree(): TreeNode[] {
+    // 模拟树数据，基于Go后端返回的结构
+    return [
+      {
+        id: 'home',
+        name: '首页',
+        icon: 'home',
+        type: 'group',
+        children: [
+          {
+            id: 'readme',
+            name: '说明',
+            icon: 'description',
+            type: 'page',
+            route: '/home/readme'
+          }
+        ]
+      },
+      {
+        id: 'service-group',
+        name: '服务',
+        icon: 'settings',
+        type: 'group',
+        children: [
+          {
+            id: 'service-register',
+            name: '注册服务配置',
+            icon: 'app_registration',
+            type: 'page',
+            route: '/service/register-config'
+          },
+          {
+            id: 'service-management',
+            name: '微服务管理',
+            icon: 'dns',
+            type: 'page',
+            route: '/service/management'
+          },
+          {
+            id: 'service-config',
+            name: '微服务配置管理',
+            icon: 'settings_applications',
+            type: 'page',
+            route: '/service/config-management'
+          },
+          {
+            id: 'boot-config',
+            name: '微服务启动配置管理',
+            icon: 'play_circle',
+            type: 'page',
+            route: '/service/boot-config'
+          }
+        ]
+      },
+      {
+        id: 'user-group',
+        name: '项目',
+        icon: 'folder',
+        type: 'group',
+        children: [
+          {
+            id: 'project-management',
+            name: '项目管理',
+            icon: 'folder_open',
+            type: 'page',
+            route: '/project/list'
+          },
+          {
+            id: 'agent-management',
+            name: 'Agent管理',
+            icon: 'smart_toy',
+            type: 'page',
+            route: '/agent/list'
+          },
+          {
+            id: 'skill-management',
+            name: 'Skill管理',
+            icon: 'build',
+            type: 'page',
+            route: '/skill/list'
+          }
+        ]
+      },
+      {
+        id: 'tenant-group',
+        name: '租户管理',
+        icon: 'apartment',
+        type: 'group',
+        children: [
+          {
+            id: 'tenant-management',
+            name: '租户管理',
+            icon: 'apartment',
+            type: 'page',
+            route: '/tenant/list'
+          },
+          {
+            id: 'role-management',
+            name: '角色管理',
+            icon: 'admin_panel_settings',
+            type: 'page',
+            route: '/role/list'
+          },
+          {
+            id: 'user-management',
+            name: '用户管理',
+            icon: 'people',
+            type: 'page',
+            route: '/user/list'
+          }
+        ]
+      }
+    ];
+  }
+}

src/app/services/user.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  let service: UserService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/user.service.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { User, UserRequest } from '../models/user.model';
+import { ConfigService } from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private apiPath = '/query/config/users';
+
+  constructor(
+    private http: HttpClient,
+    private config: ConfigService
+  ) {}
+
+  getUsers(): Observable<User[]> {
+    if (this.config.useMockData) {
+      return of(this.generateMockUsers());
+    }
+    return this.http.post<User[]>(`${this.config.apiBaseUrl}${this.apiPath}`, {});
+  }
+
+  getUser(id: string): Observable<User> {
+    if (this.config.useMockData) {
+      return of(this.generateMockUser(id));
+    }
+    return this.http.post<User>(`${this.config.apiBaseUrl}/query/config/user/${id}`, {});
+  }
+
+  createUser(request: UserRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/create/config/user`, request);
+  }
+
+  updateUser(id: string, request: UserRequest): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/update/config/user/${id}`, request);
+  }
+
+  deleteUser(id: string): Observable<any> {
+    if (this.config.useMockData) {
+      return of({ success: true, data: 1 });
+    }
+    return this.http.post(`${this.config.apiBaseUrl}/delete/config/user/${id}`, {});
+  }
+
+  private generateMockUsers(): User[] {
+    const users: User[] = [];
+    for (let i = 1; i <= 10; i++) {
+      users.push({
+        id: `user-${i}`,
+        username: `user${i}`,
+        email: `user${i}@example.com`,
+        tenant_id: `tenant-${(i % 3) + 1}`,
+        role_id: `role-${(i % 2) + 1}`,
+        created_at: new Date(Date.now() - i * 86400000).toISOString(),
+        updated_at: new Date(Date.now() - i * 43200000).toISOString()
+      });
+    }
+    return users;
+  }
+
+  private generateMockUser(id: string): User {
+    return {
+      id,
+      username: `模拟用户 ${id}`,
+      email: `mock${id}@example.com`,
+      tenant_id: 'tenant-1',
+      role_id: 'role-1',
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    };
+  }
+}

src/styles.scss

@@ -9,6 +9,10 @@
 /* Material Prebuilt Theme */
 @import '@angular/material/prebuilt-themes/indigo-pink.css';
 
+/* AG Grid Theme */
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-alpine.css';
+
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }

tsconfig.json

@@ -19,8 +19,8 @@
     "module": "ES2022",
     "baseUrl": "./",
     "paths": {
-      "ng-base": ["../ng-base/projects/ng-base/src/public-api.ts"],
-      "ng-base/*": ["../ng-base/projects/ng-base/src/lib/*"]
+      "ng-base": ["../ng-base/dist/ng-base"],
+      "ng-base/*": ["../ng-base/dist/ng-base/*"]
     }
   },
   "angularCompilerOptions": {

vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+
+export default defineConfig({
+  plugins: [angular()],
+  optimizeDeps: {
+    include: ['ag-grid-angular', 'ag-grid-community']
+  },
+  ssr: {
+    noExternal: ['ag-grid-angular', 'ag-grid-community']
+  }
+});