添加按钮-测试通过

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

@@ -17,14 +17,17 @@
                [disabled]="button.disabled || button.loading || disabled"
                class="flex items-center gap-2"
              >
-               <mat-icon *ngIf="!button.loading">{{ button.icon || 'add' }}</mat-icon>
-               <mat-progress-spinner 
-                 *ngIf="button.loading" 
-                 diameter="20" 
-                 mode="indeterminate" 
-                 class="inline-block"
-               ></mat-progress-spinner>
-               {{ button.loading ? '处理中...' : button.title }}
+               <div class="flex items-center gap-2">
+                 <mat-icon *ngIf="!button.loading">{{ button.icon || 'add' }}</mat-icon>
+                 <mat-progress-spinner 
+                   *ngIf="button.loading" 
+                   diameter="20" 
+                   mode="indeterminate" 
+                   class="inline-block"
+                   [color]="button.color || 'primary'"
+                 ></mat-progress-spinner>
+                 <span>{{ button.loading ? '处理中...' : button.title }}</span>
+               </div>
              </button>
            }
          </div>
@@ -37,14 +40,17 @@
            [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 }}
+            <div 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"
+                [color]="buttonColor"
+              ></mat-progress-spinner>
+              <span>{{ loading ? '处理中...' : buttonText }}</span>
+            </div>
          </button>
        }
     </div>

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

@@ -163,4 +163,35 @@
       }
     }
   }
+}
+
+// 优化进度条样式，消除难看灰色背景
+::ng-deep .sticky-header {
+  button {
+    .mat-mdc-progress-spinner {
+      width: 20px;
+      height: 20px;
+      
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+      
+      // 直接设置circle元素颜色，避免灰色背景
+      svg circle {
+        stroke: currentColor;
+        stroke-width: 10%;
+      }
+      
+      // 背景环（第一个circle）
+      svg circle:nth-child(1) {
+        stroke-opacity: 0.2;
+      }
+      
+      // 前景动画环（第二个circle）
+      svg circle:nth-child(2) {
+        stroke-opacity: 1;
+      }
+    }
+  }
 }