缩放改好-修改样式

src/app/app.component.html

@@ -39,7 +39,7 @@
     <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
 
       <div class="flex-1 overflow-auto content-area">
-        <div class="p-4 h-full">
+        <div class="pt-0 px-4 pb-4 h-full">
           <router-outlet></router-outlet>
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [class.locked]="isLocked" [class.compact]="isCompact" [ngStyle]="isLocked ? {
+<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [style.min-height]="headerHeight" [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">

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

@@ -21,6 +21,8 @@
       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;
+    height: 100%; /* 填充父容器高度 */
+    min-height: 100%; /* 确保填充最小高度 */
     /* 移除 overflow: hidden，防止内容裁剪 */
   }
 
@@ -70,6 +72,8 @@
       background: #f1f5f9;
       border: 1px solid #cbd5e1;
       margin: 0; /* 移除外边距，确保精确对齐 */
+      height: 100%; /* 填充父容器高度 */
+      min-height: 100%; /* 确保填充最小高度 */
       /* 保持原padding大小 */
     }
 
@@ -116,6 +120,8 @@
         inset 0 0 0 1px rgba(255, 255, 255, 0.8); /* 内边缘高光，增强一体感 */
       background: #f1f5f9; /* 稍微深一点的背景，强调状态变化 */
       border: 1px solid #cbd5e1; /* 保持一致的边框 */
+      height: 100%; /* 填充父容器高度 */
+      min-height: 100%; /* 确保填充最小高度 */
       
       > div:first-child {
         padding-top: 0.375rem;

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

@@ -95,6 +95,9 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
   /** 宽度参考目标选择器（用于锁定状态宽度匹配），如未设置则使用滚动容器 */
   @Input() widthTarget: string | null = null;
 
+  /** 标题区域最小高度（用于测试或固定高度布局），如 '200px', '10rem'，未设置则由内容决定 */
+  @Input() headerHeight: string | null = null;
+
   /** 按钮点击事件 */
   @Output() buttonClick = new EventEmitter<void>();
 

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

@@ -1,4 +1,4 @@
-<div class="h-full flex flex-col p-2 min-w-0">
+<div class="h-full flex flex-col pt-0 px-2 pb-2 min-w-0">
   <!-- 顶部标题区域 -->
   <app-sticky-header
     [title]="title"

src/app/pages/tenant-list/tenant-list.component.html

@@ -1,4 +1,4 @@
-<div class="h-full flex flex-col p-4 min-w-0">
+<div class="h-full flex flex-col pt-0 px-4 pb-4 min-w-0">
    <app-sticky-header
     [title]="'租户管理'"
     [buttonText]="'新增租户'"
@@ -9,6 +9,7 @@
      [scrollThreshold]="20"
     [compactThreshold]="80"
     [widthTarget]="'#tenantMatCard'"
+    [headerHeight]="'200px'"
     (buttonClick)="openAddDialog()">
   </app-sticky-header>