qdy 1 месяц назад
Родитель
Сommit
fb0f47e5bb

+ 1
- 0
projects/base-core/src/lib/components/index.ts Просмотреть файл

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

+ 41
- 16
projects/base-core/src/lib/components/sticky-header/sticky-header.component.html Просмотреть файл

6
   <div class="header-content bg-white rounded-lg border border-gray-200 shadow-sm transition-all duration-300">
6
   <div class="header-content bg-white rounded-lg border border-gray-200 shadow-sm transition-all duration-300">
7
     <div class="flex justify-between items-center p-4 transition-all duration-300">
7
     <div class="flex justify-between items-center p-4 transition-all duration-300">
8
       <h1 class="header-title text-2xl font-bold transition-all duration-300">{{ title }}</h1>
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
     </div>
50
     </div>
26
     
51
     
27
     <!-- 提示信息 -->
52
     <!-- 提示信息 -->

+ 27
- 3
projects/base-core/src/lib/components/sticky-header/sticky-header.component.ts Просмотреть файл

4
 import { MatIconModule } from '@angular/material/icon';
4
 import { MatIconModule } from '@angular/material/icon';
5
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
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
 @Component({
16
 @Component({
8
   selector: 'app-sticky-header',
17
   selector: 'app-sticky-header',
9
   standalone: true,
18
   standalone: true,
35
   /** 按钮颜色,默认primary */
44
   /** 按钮颜色,默认primary */
36
   @Input() buttonColor: 'primary' | 'accent' | 'warn' = 'primary';
45
   @Input() buttonColor: 'primary' | 'accent' | 'warn' = 'primary';
37
   
46
   
47
+  /** 多个按钮配置,如果设置则忽略单个按钮属性 */
48
+  @Input() buttons: StickyHeaderButton[] = [];
49
+  
38
   /** 是否禁用按钮 */
50
   /** 是否禁用按钮 */
39
   @Input() disabled = false;
51
   @Input() disabled = false;
40
   
52
   
100
 
112
 
101
   /** 按钮点击事件 */
113
   /** 按钮点击事件 */
102
   @Output() buttonClick = new EventEmitter<void>();
114
   @Output() buttonClick = new EventEmitter<void>();
115
+  
116
+  /** 多个按钮点击事件,返回按钮name标识符 */
117
+  @Output() buttonAction = new EventEmitter<string>();
103
 
118
 
104
   // 自动滚动检测的私有属性
119
   // 自动滚动检测的私有属性
105
   private scrollListener: (() => void) | null = null;
120
   private scrollListener: (() => void) | null = null;
106
   private canScroll = false;
121
   private canScroll = false;
107
   private isAutoDetecting = false;
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
 

Загрузка…
Отмена
Сохранить