qdy il y a 1 mois
révision
b36b9293ea

+ 1
- 0
projects/base-core/src/lib/components/index.ts Voir le fichier

@@ -1,5 +1,6 @@
1 1
 export * from './toast/toast.component';
2 2
 export * from './sticky-header/sticky-header.component';
3
+export type { StickyHeaderButton } from './sticky-header/sticky-header.component';
3 4
 export * from './tree-nav/tree-nav.component';
4 5
 // export * from './sidebar/sidebar.component';
5 6
 // export * from './grid/grid.component';

+ 41
- 16
projects/base-core/src/lib/components/sticky-header/sticky-header.component.html Voir le fichier

@@ -6,22 +6,47 @@
6 6
   <div class="header-content bg-white rounded-lg border border-gray-200 shadow-sm transition-all duration-300">
7 7
     <div class="flex justify-between items-center p-4 transition-all duration-300">
8 8
       <h1 class="header-title text-2xl font-bold transition-all duration-300">{{ title }}</h1>
9
-      <button 
10
-        mat-raised-button 
11
-        [color]="buttonColor" 
12
-        (click)="onButtonClick()" 
13
-        [disabled]="disabled || loading"
14
-        class="flex items-center gap-2"
15
-      >
16
-        <mat-icon *ngIf="!loading">{{ buttonIcon }}</mat-icon>
17
-        <mat-progress-spinner 
18
-          *ngIf="loading" 
19
-          diameter="20" 
20
-          mode="indeterminate" 
21
-          class="inline-block"
22
-        ></mat-progress-spinner>
23
-        {{ loading ? '处理中...' : buttonText }}
24
-       </button>
9
+       @if (buttons.length > 0) {
10
+         <!-- 多个按钮模式 -->
11
+         <div class="flex items-center gap-2">
12
+           @for (button of buttons; track button.name) {
13
+             <button 
14
+               mat-raised-button 
15
+               [color]="button.color || 'primary'"
16
+               (click)="onButtonClick(button.name)" 
17
+               [disabled]="button.disabled || button.loading || disabled"
18
+               class="flex items-center gap-2"
19
+             >
20
+               <mat-icon *ngIf="!button.loading">{{ button.icon || 'add' }}</mat-icon>
21
+               <mat-progress-spinner 
22
+                 *ngIf="button.loading" 
23
+                 diameter="20" 
24
+                 mode="indeterminate" 
25
+                 class="inline-block"
26
+               ></mat-progress-spinner>
27
+               {{ button.loading ? '处理中...' : button.title }}
28
+             </button>
29
+           }
30
+         </div>
31
+       } @else {
32
+         <!-- 单个按钮模式(向后兼容) -->
33
+         <button 
34
+           mat-raised-button 
35
+           [color]="buttonColor" 
36
+           (click)="onButtonClick()" 
37
+           [disabled]="disabled || loading"
38
+           class="flex items-center gap-2"
39
+         >
40
+           <mat-icon *ngIf="!loading">{{ buttonIcon }}</mat-icon>
41
+           <mat-progress-spinner 
42
+             *ngIf="loading" 
43
+             diameter="20" 
44
+             mode="indeterminate" 
45
+             class="inline-block"
46
+           ></mat-progress-spinner>
47
+           {{ loading ? '处理中...' : buttonText }}
48
+         </button>
49
+       }
25 50
     </div>
26 51
     
27 52
     <!-- 提示信息 -->

+ 27
- 3
projects/base-core/src/lib/components/sticky-header/sticky-header.component.ts Voir le fichier

@@ -4,6 +4,15 @@ import { MatButtonModule } from '@angular/material/button';
4 4
 import { MatIconModule } from '@angular/material/icon';
5 5
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
6 6
 
7
+export interface StickyHeaderButton {
8
+  title: string;    // 显示文本
9
+  name: string;     // 标识符(事件返回)
10
+  icon?: string;    // 可选图标
11
+  color?: 'primary' | 'accent' | 'warn';
12
+  disabled?: boolean;
13
+  loading?: boolean;
14
+}
15
+
7 16
 @Component({
8 17
   selector: 'app-sticky-header',
9 18
   standalone: true,
@@ -35,6 +44,9 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
35 44
   /** 按钮颜色,默认primary */
36 45
   @Input() buttonColor: 'primary' | 'accent' | 'warn' = 'primary';
37 46
   
47
+  /** 多个按钮配置,如果设置则忽略单个按钮属性 */
48
+  @Input() buttons: StickyHeaderButton[] = [];
49
+  
38 50
   /** 是否禁用按钮 */
39 51
   @Input() disabled = false;
40 52
   
@@ -100,15 +112,27 @@ export class StickyHeaderComponent implements AfterViewInit, OnDestroy {
100 112
 
101 113
   /** 按钮点击事件 */
102 114
   @Output() buttonClick = new EventEmitter<void>();
115
+  
116
+  /** 多个按钮点击事件,返回按钮name标识符 */
117
+  @Output() buttonAction = new EventEmitter<string>();
103 118
 
104 119
   // 自动滚动检测的私有属性
105 120
   private scrollListener: (() => void) | null = null;
106 121
   private canScroll = false;
107 122
   private isAutoDetecting = false;
108 123
 
109
-  onButtonClick() {
110
-    if (!this.disabled && !this.loading) {
111
-      this.buttonClick.emit();
124
+  onButtonClick(name?: string) {
125
+    if (this.buttons.length > 0) {
126
+      // 多个按钮模式
127
+      const button = this.buttons.find(b => b.name === name);
128
+      if (button && !button.disabled && !button.loading) {
129
+        this.buttonAction.emit(name);
130
+      }
131
+    } else {
132
+      // 单个按钮模式(向后兼容)
133
+      if (!this.disabled && !this.loading) {
134
+        this.buttonClick.emit();
135
+      }
112 136
     }
113 137
   }
114 138
 

Loading…
Annuler
Enregistrer