tree左边样式ok锁定

web/src/app/components/sticky-header/sticky-header.component.html

@@ -0,0 +1,69 @@
+<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [class.locked]="isLocked" [class.compact]="isCompact" [ngStyle]="isLocked ? {
+  width: headerWidth ? (typeof headerWidth === 'number' ? headerWidth + 'px' : headerWidth) : null,
+  left: headerLeft ? (typeof headerLeft === 'number' ? headerLeft + 'px' : headerLeft) : null
+} : null">
+  <!-- 主标题区域 -->
+  <div class="header-content bg-white rounded-lg border border-gray-200 shadow-sm transition-all duration-300">
+    <div class="flex justify-between items-center p-4 transition-all duration-300">
+      <h1 class="header-title text-2xl font-bold transition-all duration-300">{{ title }}</h1>
+      <button 
+        mat-raised-button 
+        [color]="buttonColor" 
+        (click)="onButtonClick()" 
+        [disabled]="disabled || loading"
+        class="flex items-center gap-2"
+      >
+        <mat-icon *ngIf="!loading">{{ buttonIcon }}</mat-icon>
+        <mat-progress-spinner 
+          *ngIf="loading" 
+          diameter="20" 
+          mode="indeterminate" 
+          class="inline-block"
+        ></mat-progress-spinner>
+        {{ loading ? '处理中...' : buttonText }}
+       </button>
+    </div>
+    
+    <!-- 提示信息 -->
+    @if (hintText) {
+      <div class="hint-section border-t border-gray-100 p-3 bg-blue-50/30 transition-all duration-300 overflow-hidden">
+        <p class="text-sm text-gray-600 m-0 transition-all duration-300">{{ hintText }}</p>
+      </div>
+    }
+    
+    <!-- 调试信息区域 -->
+    @if (showDebugInfo && (debugDataSource || debugRegisterUrl || debugListUrl)) {
+      <div class="debug-section border-t border-gray-100 overflow-hidden">
+        <!-- 数据源信息 -->
+        @if (debugDataSource) {
+          <div class="debug-info text-xs text-gray-500 p-2 bg-gray-50 transition-all duration-300">
+            <div class="flex gap-4 flex-wrap transition-all duration-300">
+              <span>数据源: <span class="font-mono">{{ debugDataSource }}</span></span>
+              <span>记录条数: <span class="font-mono">{{ debugRecordCount }}</span></span>
+              <span>更新时间: <span class="font-mono">{{ debugLastUpdated }}</span></span>
+              @if (debugUseMockData) {
+                <span class="text-amber-600 font-medium">⚠ 使用模拟数据</span>
+              } @else {
+                <span class="text-green-600 font-medium">✓ 使用API数据</span>
+              }
+            </div>
+          </div>
+        }
+        
+        <!-- API URL信息 -->
+        @if (debugRegisterUrl || debugListUrl) {
+          <div class="debug-urls text-xs text-gray-500 p-2 bg-gray-50 border-t border-gray-100 transition-all duration-300">
+            <div class="flex flex-col gap-1 transition-all duration-300">
+              @if (debugRegisterUrl) {
+                <span>注册API: <span class="font-mono">{{ debugRegisterUrl || '未调用' }}</span></span>
+              }
+              @if (debugListUrl) {
+                <span>列表API: <span class="font-mono">{{ debugListUrl || '未调用' }}</span></span>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  </div>
+</div>

web/src/app/components/sticky-header/sticky-header.component.scss

@@ -0,0 +1,162 @@
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 1000; /* 进一步提高z-index确保在最顶部 */
+  transition: all 0.3s ease-in-out;
+  margin-bottom: 1.5rem; /* 为内容区域提供间距 */
+  align-self: flex-start; /* 确保在flex容器中sticky生效 */
+  background-color: white; /* 确保不透明，防止内容透出 */
+  /* 创建新的层叠上下文，确保z-index生效 */
+  transform: translateZ(0);
+  will-change: transform;
+  /* 轻微的内阴影，增强立体感 */
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
+
+  .header-content {
+    background: #f8fafc; /* 简洁的灰白色背景 */
+    border-radius: 0.5rem;
+    border: 1px solid #e2e8f0; /* 柔和的边框 */
+    box-shadow: 
+      inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), /* 轻微内阴影，创造凹陷感 */
+      inset 0 0 0 1px rgba(255, 255, 255, 0.9), /* 内边缘高光，增强立体感 */
+      0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 轻微外阴影，保持与页面融合 */
+    transition: all 0.3s ease-in-out;
+    /* 移除 overflow: hidden，防止内容裁剪 */
+  }
+
+  .header-title {
+    font-size: 1.75rem; /* text-3xl */
+    font-weight: 800;
+    transition: all 0.3s ease-in-out;
+    margin: 0;
+    color: #1e293b; /* text-slate-800 */
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* 轻微文字阴影，增强可读性 */
+  }
+
+  .debug-section {
+    transition: all 0.3s ease-in-out;
+    max-height: 200px;
+    opacity: 1;
+    
+    .debug-info, .debug-urls {
+      &:not(:last-child) {
+        border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
+      }
+    }
+  }
+
+  .hint-section {
+    transition: all 0.3s ease-in-out;
+    max-height: 100px;
+    opacity: 1;
+  }
+
+  /* 锁定状态 - 固定在视口顶部，保持原大小 */
+  &.locked {
+    position: fixed;
+    top: 0;
+    z-index: 1100; /* 提高z-index确保在最顶层 */
+    margin-bottom: 0; /* 移除margin，因为现在是fixed定位 */
+    transform: none; /* 移除transform层叠上下文 */
+    will-change: auto;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* 外阴影，表示浮动状态 */
+    background-color: white; /* 确保背景不透明 */
+    
+    .header-content {
+      border-radius: 0.5rem;
+      box-shadow: 
+        inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
+        0 2px 4px 0 rgba(0, 0, 0, 0.1); /* 更强外阴影，强调固定状态 */
+      background: #f1f5f9;
+      border: 1px solid #cbd5e1;
+      margin: 1rem; /* 添加外边距，避免贴边 */
+      /* 保持原padding大小 */
+    }
+
+    .header-title {
+      /* 保持原字体大小：1.75rem */
+      font-weight: 800;
+      color: #1e293b;
+      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+    }
+
+    .hint-section {
+      max-height: 0;
+      opacity: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      border: none;
+      
+      p {
+        font-size: 0.8125rem;
+        opacity: 0;
+      }
+    }
+    
+    .debug-section {
+      max-height: 0;
+      opacity: 0;
+      
+      .debug-info, .debug-urls {
+        padding-top: 0;
+        padding-bottom: 0;
+        font-size: 0.6875rem;
+        opacity: 0;
+        border: none;
+      }
+    }
+  }
+
+  /* 缩小状态 - 在锁定基础上进一步缩小 */
+  &.compact {
+    .header-content {
+      border-radius: 0.375rem;
+      box-shadow: 
+        inset 0 3px 6px 0 rgba(0, 0, 0, 0.08), /* 更强的内阴影，增强凹陷感 */
+        inset 0 0 0 1px rgba(255, 255, 255, 0.8), /* 内边缘高光 */
+        0 1px 3px 0 rgba(0, 0, 0, 0.1); /* 轻微外阴影 */
+      background: #f1f5f9; /* 稍微深一点的背景，强调状态变化 */
+      border: 1px solid #cbd5e1; /* 保持一致的边框 */
+      
+      > div:first-child {
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
+      }
+    }
+
+    .header-title {
+      font-size: 1.125rem; /* 更小一点 */
+      font-weight: 800;
+      color: #0f172a; /* 更深的文字颜色，增强可读性 */
+      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); /* 保持文字阴影 */
+      letter-spacing: -0.025em; /* 紧凑的字母间距 */
+    }
+
+    .hint-section {
+      max-height: 0;
+      opacity: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      border: none;
+      
+      p {
+        font-size: 0.8125rem; /* 比text-sm小一点 */
+        opacity: 0;
+      }
+    }
+    
+    .debug-section {
+      max-height: 0;
+      opacity: 0;
+      
+      .debug-info, .debug-urls {
+        padding-top: 0;
+        padding-bottom: 0;
+        font-size: 0.6875rem; /* 比text-xs更小 */
+        opacity: 0;
+        border: none;
+      }
+    }
+  }
+}

web/src/app/components/sticky-header/sticky-header.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'app-sticky-header',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
+  templateUrl: './sticky-header.component.html',
+  styleUrl: './sticky-header.component.scss'
+})
+export class StickyHeaderComponent {
+  /** 标题文本 */
+  @Input() title = '';
+  
+  /** 按钮文本 */
+  @Input() buttonText = '操作';
+  
+  /** 按钮图标 */
+  @Input() buttonIcon = 'add';
+  
+  /** 按钮颜色，默认primary */
+  @Input() buttonColor: 'primary' | 'accent' | 'warn' = 'primary';
+  
+  /** 是否禁用按钮 */
+  @Input() disabled = false;
+  
+  /** 是否显示加载状态 */
+  @Input() loading = false;
+  
+  /** 滚动阈值（像素），默认为5 */
+  @Input() scrollThreshold = 5;
+
+  /** 是否显示调试信息框 */
+  @Input() showDebugInfo = false;
+  
+  /** 调试信息数据源 */
+  @Input() debugDataSource = '';
+  
+  /** 调试信息记录数 */
+  @Input() debugRecordCount = 0;
+  
+  /** 调试信息更新时间 */
+  @Input() debugLastUpdated = '';
+  
+  /** 调试信息是否使用模拟数据 */
+  @Input() debugUseMockData = false;
+  
+  /** 调试信息注册API URL */
+  @Input() debugRegisterUrl = '';
+  
+  /** 调试信息列表API URL */
+  @Input() debugListUrl = '';
+
+  /** 提示文本，显示在标题下方 */
+  @Input() hintText = '';
+
+  /** 是否已滚动（由父组件控制，向后兼容） */
+  @Input() isScrolled = false;
+
+  /** 是否锁定在顶部（到达滚动容器顶部） */
+  @Input() isLocked = false;
+
+  /** 是否缩小状态（锁定后进一步缩小） */
+  @Input() isCompact = false;
+
+  /** 锁定时的宽度（像素或百分比） */
+  @Input() headerWidth: string | number | null = null;
+
+  /** 锁定时的左侧偏移（像素） */
+  @Input() headerLeft: string | number | null = null;
+
+  /** 按钮点击事件 */
+  @Output() buttonClick = new EventEmitter<void>();
+
+  onButtonClick() {
+    if (!this.disabled && !this.loading) {
+      this.buttonClick.emit();
+    }
+  }
+}

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

@@ -1,40 +1,30 @@
 <div class="h-full flex flex-col p-4 min-w-0">
-  <div class="flex justify-between items-center mb-4">
-    <h1 class="text-2xl font-bold">{{ title }}</h1>
-    <button mat-raised-button color="primary" (click)="onRegister()" [disabled]="registering">
-      <mat-icon *ngIf="!registering">add</mat-icon>
-      <mat-progress-spinner *ngIf="registering" diameter="20" mode="indeterminate" class="inline-block"></mat-progress-spinner>
-      {{ registering ? '注册中...' : '注册' }}
-    </button>
-  </div>
+  <!-- 顶部标题区域 -->
+  <app-sticky-header
+    [title]="title"
+    [hintText]="hintText"
+    [isScrolled]="isScrolled"
+    [isLocked]="isLocked"
+    [isCompact]="isCompact"
+    [buttonText]="'注册'"
+    [buttonIcon]="'add'"
+    [buttonColor]="'primary'"
+    [disabled]="registering"
+    [loading]="registering"
+    [showDebugInfo]="true"
+    [debugDataSource]="debugInfo.dataSource"
+    [debugRecordCount]="debugInfo.recordCount"
+    [debugLastUpdated]="debugInfo.lastUpdated"
+    [debugUseMockData]="debugInfo.useMockData"
+    [debugRegisterUrl]="lastRegisterUrl"
+    [debugListUrl]="lastListUrl"
+    [headerWidth]="headerWidth"
+    [headerLeft]="headerLeft"
+    (buttonClick)="onRegister()"
+  ></app-sticky-header>
    
-   <!-- 调试信息 -->
-   @if (debugInfo.dataSource) {
-     <div class="debug-info text-xs text-gray-500 mt-1 mb-2 p-2 bg-gray-50 rounded border border-gray-200">
-       <div class="flex gap-4">
-         <span>数据源: <span class="font-mono">{{ debugInfo.dataSource }}</span></span>
-         <span>记录条数: <span class="font-mono">{{ debugInfo.recordCount }}</span></span>
-         <span>更新时间: <span class="font-mono">{{ debugInfo.lastUpdated }}</span></span>
-         @if (debugInfo.useMockData) {
-           <span class="text-amber-600 font-medium">⚠ 使用模拟数据</span>
-         } @else {
-           <span class="text-green-600 font-medium">✓ 使用API数据</span>
-         }
-        </div>
-      </div>
-      <div class="debug-urls text-xs text-gray-500 mt-1 mb-2 p-2 bg-gray-50 rounded border border-gray-200">
-        <div class="flex flex-col gap-1">
-          <span>注册API: <span class="font-mono">{{ lastRegisterUrl || '未调用' }}</span></span>
-          <span>列表API: <span class="font-mono">{{ lastListUrl || '未调用' }}</span></span>
-        </div>
-      </div>
-    }
-   
-   <mat-card class="flex-1">
+    <mat-card #matCard class="flex-1">
     <mat-card-content>
-      <div class="mb-4">
-        <p class="text-gray-600">点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。</p>
-      </div>
 
       <div *ngIf="configMetaList.length > 0" class="overflow-auto">
         <table mat-table [dataSource]="configMetaList" class="w-full">

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

@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener, ChangeDetectorRef, AfterViewInit, ElementRef, Renderer2, OnDestroy, ViewChild } from '@angular/core';
+import { StickyHeaderComponent } from '../../components/sticky-header/sticky-header.component';
 import { CommonModule } from '@angular/common';
 import { MatCard, MatCardContent } from '@angular/material/card';
-import { MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { ConfigMetaService } from '../../services/config-meta.service';
@@ -13,16 +13,26 @@ import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-service-register-config',
-  imports: [CommonModule, MatCard, MatCardContent, MatButton, MatIcon, MatTableModule, MatProgressSpinner],
+  imports: [CommonModule, MatCard, MatCardContent, MatTableModule, MatProgressSpinner, StickyHeaderComponent],
   templateUrl: './service-register-config.component.html',
   styleUrl: './service-register-config.component.scss'
 })
-export class ServiceRegisterConfigComponent implements OnInit {
+export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, OnDestroy {
   title = '注册服务配置';
+  hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
   displayedColumns: string[] = ['configName', 'fieldName', 'fieldType', 'yamlName', 'fieldDesc'];
   configMetaList: ConfigMeta[] = [];
   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;
 
   debugInfo = {
     dataSource: '',
@@ -31,19 +41,212 @@ export class ServiceRegisterConfigComponent implements OnInit {
     useMockData: false
   };
 
+  @ViewChild('matCard', { read: ElementRef }) matCardRef!: ElementRef;
+  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 toastService: ToastService,
+    private cdRef: ChangeDetectorRef,
+    private elementRef: ElementRef,
+    private renderer: Renderer2
   ) {}
 
   ngOnInit() {
     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';
+    }
+    
+    // 向后兼容：保持isScrolled逻辑
+    const scrolled = scrollTop > this.scrollThreshold;
+    
+
+    
+    // 阶段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;
+      }
+    }
+    
+    if (this.isCompact !== shouldCompact) {
+      this.isCompact = shouldCompact;
+      needsUpdate = true;
+      console.log('缩小状态变化:', this.isCompact);
+    }
+    
+    if (needsUpdate) {
+      this.cdRef.detectChanges();
+    }
+  }
+
   onRegister() {
     this.lastRegisterUrl = this.configMetaService.getInitUrl();
     console.debug('[注册] 请求URL:', this.lastRegisterUrl);