From 9438ae8cc8dc9f304f3f5ab1ba0e17dad0d5a1b4 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 2 Jan 2025 14:16:50 +0800
Subject: [PATCH 01/35] refact: common toolbar

---
 .../layout-builder.component.html             |  2 +-
 .../builder-list/builder-list.component.html  |  2 +-
 .../builder-list/builder-list.component.scss  | 24 ++++++++++-
 .../dynamic-component.component.html          | 40 ++++++++++---------
 .../dynamic-component.component.ts            | 20 ++++------
 src/theme/component/_builder.scss             | 19 ---------
 .../component/builder/_builder-list.scss      |  8 ++--
 7 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index 69a0d2c22..bf24c78ae 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -95,7 +95,7 @@
                       />
                     </div>
                   }
-                  <app-dynamic-component [inputs]="item" />
+                  <app-dynamic-component [inputs]="item" [index]="index" />
                 </div>
               }
             </div>
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index 4f7ae6b41..f4eb099ff 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -25,7 +25,7 @@
             @if (item) {
               <app-dynamic-component
                 [attr.data-path]="i"
-                [inputs]="{ content: item, showToolbar: true }"
+                [inputs]="{ content: item }"
                 [index]="i"
               />
               @if (builderConfig$ | async; as builderConfig) {
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.scss b/src/app/modules/builder/main/builder-list/builder-list.component.scss
index 6b96dd510..2a2c9e8bc 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.scss
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.scss
@@ -30,11 +30,33 @@
       transform: translateX(-50%);
     }
     &:hover {
-      outline-offset: -1px;
       .add-new-section {
         display: flex;
       }
     }
+    ::ng-deep {
+      .active-toolbar {
+        position: relative;
+        display: block;
+        box-sizing: content-box;
+        padding: 2px;
+        &:hover {
+          z-index: 10;
+          outline-offset: -1px;
+          > .component-toolbar {
+            display: block !important;
+          }
+        }
+        > .component-toolbar {
+          position: absolute;
+          left: 0;
+          top: 0px;
+          width: 100%;
+          z-index: 999;
+          line-height: 1;
+        }
+      }
+    }
   }
 
   .actions {
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index 41bdbdf55..bb06a6ae2 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -1,23 +1,25 @@
-@if (showToolbar) {
-  <app-component-toolbar #toolbar [content]="inputs" [index]="index" />
-}
-@let content = inputs.type ? inputs : inputs.content;
-<div class="relative overflow-hidden" [ngClass]="content?.containerClasses">
-  @if (content?.id) {
-    <span class="anchor" [id]="content.id"></span>
-  }
-  @if (content?.spacer) {
-    <app-spacer [size]="content.spacer" />
-  }
-  @if (content?.bg) {
-    <app-bg-img [attr.data-path]="'bg'" [content]="content.bg" />
+<div [class.active-toolbar]="showToolbar()">
+  @if (showToolbar()) {
+    <app-component-toolbar #toolbar [content]="inputs" [index]="index" />
   }
+  @let content = inputs.type ? inputs : inputs.content;
+  <div class="relative overflow-hidden" [ngClass]="content?.containerClasses">
+    @if (content?.id) {
+      <span class="anchor" [id]="content.id"></span>
+    }
+    @if (content?.spacer) {
+      <app-spacer [size]="content.spacer" />
+    }
+    @if (content?.bg) {
+      <app-bg-img [attr.data-path]="'bg'" [content]="content.bg" />
+    }
 
-  <div class="{{ content?.fullWidth ? '' : 'container' }}">
-    <ng-template #componentContainer />
-  </div>
+    <div class="{{ content?.fullWidth ? '' : 'container' }}">
+      <ng-template #componentContainer />
+    </div>
 
-  @if (content?.spacer) {
-    <app-spacer [size]="content.spacer" />
-  }
+    @if (content?.spacer) {
+      <app-spacer [size]="content.spacer" />
+    }
+  </div>
 </div>
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index 69d9f1eda..d0d742570 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -20,6 +20,7 @@ import {
   ViewRef,
   createComponent,
   inject,
+  signal,
 } from '@angular/core';
 import { Observable } from 'rxjs';
 import { BuilderState } from '@core/state/BuilderState';
@@ -39,11 +40,10 @@ export class DynamicComponentComponent
   implements OnInit, AfterViewInit, OnChanges, OnDestroy, AfterContentInit
 {
   @Input() inputs: IDynamicInputs;
-  @Input() index: number;
-  @HostBinding('class.active-toolbar') activeToolbarClass: boolean;
+  @Input() index: number; // just for order
   @ViewChild('componentContainer', { read: ViewContainerRef, static: true })
   container: ViewContainerRef;
-  showToolbar: boolean;
+  showToolbar = signal(false);
 
   ele = inject(ElementRef);
   cd = inject(ChangeDetectorRef);
@@ -60,11 +60,7 @@ export class DynamicComponentComponent
     @Inject(IS_BUILDER_MODE) public isBuilderMode$: Observable<boolean>
   ) {}
 
-  ngOnInit(): void {
-    if (this.screenService.isPlatformBrowser()) {
-      this.showToolbar = !!this.coreConfig.builder?.enable && this.inputs?.showToolbar;
-    }
-  }
+  ngOnInit(): void {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (!changes.inputs.firstChange) {
@@ -74,11 +70,11 @@ export class DynamicComponentComponent
 
   ngAfterContentInit(): void {
     this.isBuilderMode$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(state => {
-      if (!this.inputs?.showToolbar) {
-        this.activeToolbarClass = false;
-        return;
+      if (state) {
+        this.showToolbar.set(true);
+      } else {
+        this.showToolbar.set(false);
       }
-      this.activeToolbarClass = state;
     });
   }
 
diff --git a/src/theme/component/_builder.scss b/src/theme/component/_builder.scss
index 16f91e88a..6607f40be 100644
--- a/src/theme/component/_builder.scss
+++ b/src/theme/component/_builder.scss
@@ -146,25 +146,6 @@ $dark-theme: mat.m2-define-dark-theme(
     }
   }
 
-  // for dynamic-component host class
-  .active-toolbar {
-    position: relative;
-    display: block;
-    box-sizing: content-box;
-    &:hover {
-      > .component-toolbar {
-        display: block !important;
-      }
-    }
-    > .component-toolbar {
-      position: absolute;
-      left: 0;
-      top: 0px;
-      width: 100%;
-      z-index: 999;
-      line-height: 1;
-    }
-  }
   .drawer-right {
     .builder-list {
       min-width: 85vw;
diff --git a/src/theme/component/builder/_builder-list.scss b/src/theme/component/builder/_builder-list.scss
index 7656824ac..87130a488 100644
--- a/src/theme/component/builder/_builder-list.scss
+++ b/src/theme/component/builder/_builder-list.scss
@@ -2,9 +2,11 @@
 @mixin builder-list($background, $foreground, $primary, $warn) {
   background-color: mat.m2-get-color-from-palette($background, card);
   .component-item {
-    &:hover {
-      outline: 1px dashed mat.m2-get-color-from-palette($primary);
-      z-index: 10;
+    // for dynamic-component host class
+    .active-toolbar {
+      &:hover {
+        outline: 1px dashed mat.m2-get-color-from-palette($primary);
+      }
     }
     .animate-warn {
       &::after {

From 8d3fdde7dee66ef23e43f139cd7f19dbc5f4b6f6 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 2 Jan 2025 14:59:00 +0800
Subject: [PATCH 02/35] refact: common updown component

---
 src/app/core/state/BuilderState.ts            | 24 ++++++++++++++-----
 .../component-toolbar.component.html          | 11 ++++++---
 .../component-toolbar.component.ts            | 10 ++++----
 .../dynamic-component.component.ts            | 22 +++++++----------
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index de19bc051..237634ee7 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -153,14 +153,25 @@ export class BuilderState {
     this.storage.store(this.versionKey, Object.assign([], this.version));
   }
 
-  upDownComponent(index: number, direction: string): void {
+  getObjectByPath(path: string, body: any[]): any[] {
+    if (path.includes('.')) {
+      const after = path.slice(0, path.lastIndexOf('.'));
+      return get(body, after);
+    } else {
+      // 一级组件
+      return body;
+    }
+  }
+
+  upDownComponent(index: number, direction: string, path: string): void {
     const { body } = this.currentPage;
+    let arrs = this.getObjectByPath(path, body);
     if (direction === 'up') {
-      [body[index - 1], body[index]] = [body[index], body[index - 1]];
+      [arrs[index - 1], arrs[index]] = [arrs[index], arrs[index - 1]];
     }
 
-    if (direction === 'down' && index < body.length - 1) {
-      [body[index], body[index + 1]] = [body[index + 1], body[index]];
+    if (direction === 'down' && index < arrs.length - 1) {
+      [arrs[index], arrs[index + 1]] = [arrs[index + 1], arrs[index]];
     }
     this.closeRightDrawer$.next(true);
     this.saveLocalVersions();
@@ -176,9 +187,10 @@ export class BuilderState {
     }
   }
 
-  deleteComponent(index: number): void {
+  deleteComponent(index: number, path: string): void {
     const { body } = this.currentPage;
-    body.splice(index, 1);
+    const arrs = this.getObjectByPath(path, body);
+    arrs.splice(index, 1);
     this.updatePage();
   }
 
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index 5d592e430..2297d000a 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -3,7 +3,7 @@
     @if (index > 0) {
       <div
         class="item"
-        (click)="onUpdown(index, 'up')"
+        (click)="onUpdown(index, 'up', $event)"
         [matTooltip]="'上移'"
         matTooltipPosition="above"
       >
@@ -19,7 +19,7 @@
     }
     <div
       class="item"
-      (click)="onUpdown(index, 'down')"
+      (click)="onUpdown(index, 'down', $event)"
       [matTooltip]="'下移'"
       matTooltipPosition="above"
     >
@@ -54,7 +54,12 @@
         />
       </div>
     }
-    <div class="item" (click)="onDelete(index)" [matTooltip]="'移除'" matTooltipPosition="above">
+    <div
+      class="item"
+      (click)="onDelete(index, $event)"
+      [matTooltip]="'移除'"
+      matTooltipPosition="above"
+    >
       <app-btn
         [content]="{
           label: '',
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index 92829afd4..bd206d66f 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -51,8 +51,9 @@ export class ComponentToolbarComponent implements OnInit {
     return this.content.type || this.content.content?.type || '';
   }
 
-  onUpdown(index: number, direction: string): void {
-    this.builder.upDownComponent(index, direction);
+  onUpdown(index: number, direction: string, event: any): void {
+    const path = this.util.generatePath(event.target);
+    this.builder.upDownComponent(index, direction, path);
   }
 
   onCopy(): void {
@@ -81,7 +82,8 @@ export class ComponentToolbarComponent implements OnInit {
     this.builder.showComponentSetting(component, fields, path);
   }
 
-  onDelete(index: number): void {
-    this.builder.deleteComponent(index);
+  onDelete(index: number, event: any): void {
+    const path = this.util.generatePath(event.target);
+    this.builder.deleteComponent(index, path);
   }
 }
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index d0d742570..87fd688c0 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -7,7 +7,6 @@ import {
   DestroyRef,
   ElementRef,
   EnvironmentInjector,
-  HostBinding,
   Inject,
   Input,
   OnChanges,
@@ -23,13 +22,12 @@ import {
   signal,
 } from '@angular/core';
 import { Observable } from 'rxjs';
-import { BuilderState } from '@core/state/BuilderState';
 import { ScreenService } from '@core/service/screen.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UtilitiesService } from '@core/service/utilities.service';
 import { ComponentService } from '@core/service/component.service';
-import type { ICoreConfig, IDynamicInputs } from '@core/interface/IAppConfig';
-import { CORE_CONFIG, IS_BUILDER_MODE } from '@core/token/token-providers';
+import type { IDynamicInputs } from '@core/interface/IAppConfig';
+import { IS_BUILDER_MODE } from '@core/token/token-providers';
 
 @Component({
   selector: 'app-dynamic-component',
@@ -47,25 +45,23 @@ export class DynamicComponentComponent
 
   ele = inject(ElementRef);
   cd = inject(ChangeDetectorRef);
-  builder = inject(BuilderState);
   util = inject(UtilitiesService);
   screenService = inject(ScreenService);
   private destroyRef = inject(DestroyRef);
   componentService = inject(ComponentService);
-  private readonly environmentInjector = inject(EnvironmentInjector);
   private readonly renderer = inject(Renderer2);
+  private readonly environmentInjector = inject(EnvironmentInjector);
   public componentRef: ComponentRef<unknown> | ComponentRef<any> | undefined | any;
-  constructor(
-    @Inject(CORE_CONFIG) public coreConfig: ICoreConfig,
-    @Inject(IS_BUILDER_MODE) public isBuilderMode$: Observable<boolean>
-  ) {}
+  constructor(@Inject(IS_BUILDER_MODE) public isBuilderMode$: Observable<boolean>) {}
 
   ngOnInit(): void {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (!changes.inputs.firstChange) {
-      this.loadComponent();
-    }
+    Object.keys(changes).forEach(key => {
+      if (!changes[key].firstChange) {
+        this.loadComponent();
+      }
+    });
   }
 
   ngAfterContentInit(): void {

From 13c9a5506a0fd40536f6e675e8534eddd32ce773 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 2 Jan 2025 18:08:15 +0800
Subject: [PATCH 03/35] refact: remove block toolbar

---
 .../layout-builder.component.html             | 20 +++++++----------
 .../layout-builder.component.scss             | 22 +++++++++++++++++--
 src/stories/Changelog.mdx                     |  3 ++-
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index bf24c78ae..064a188d7 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -81,21 +81,17 @@
                   class="item relative box-border item-{{ item.type }} col-span-12"
                   [attr.data-path]="'elements.' + index"
                 >
+                  <app-dynamic-component [inputs]="item" [index]="index" />
                   @if (isBuilderMode$ | async) {
-                    <div
-                      class="toolbar absolute z-10 whitespace-nowrap rounded-tl-[4px] rounded-tr-[4px] hidden"
-                    >
-                      <app-block-toolbar
-                        [layout]="layout"
-                        [block]="item"
-                        [index]="index"
-                        [i]="i"
-                        [lbContent]="content"
-                        [pageIndex]="pageIndex"
-                      />
+                    <div class="block-toolbar" #action>
+                      <button mat-raised-button (click)="addBlock('widget', content, action)">
+                        <div class="flex">
+                          <app-icon class="mr-1" [content]="{ svg: 'arrow-right-bottom' }" />
+                          <span>插入组件</span>
+                        </div>
+                      </button>
                     </div>
                   }
-                  <app-dynamic-component [inputs]="item" [index]="index" />
                 </div>
               }
             </div>
diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.scss b/src/app/modules/builder/layout-builder/layout-builder.component.scss
index 82938c3c1..32b56d2fa 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.scss
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.scss
@@ -14,10 +14,28 @@
         &.item-layout-builder {
           @apply w-full;
         }
-        > .toolbar {
+        ::ng-deep {
+          .component-toolbar {
+            .actions {
+              top: auto;
+              bottom: 100%;
+              border-radius: 4px 4px 0 0;
+            }
+          }
+        }
+        .block-toolbar {
+          position: absolute;
           left: 50%;
-          bottom: 100%;
+          bottom: -34px;
           transform: translateX(-50%);
+          z-index: 99;
+          display: none;
+          white-space: nowrap;
+        }
+        &:hover {
+          .block-toolbar {
+            display: block;
+          }
         }
       }
     }
diff --git a/src/stories/Changelog.mdx b/src/stories/Changelog.mdx
index f1fe8b01c..b37dd1011 100644
--- a/src/stories/Changelog.mdx
+++ b/src/stories/Changelog.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # 更新日志
 
-## 9.0.2(2025-01-01)
+## 9.0.2(2025-01-02)
 
 - 新增了账户更新组件；
 - 重构了复合组件和基组件个Formly配置；
@@ -25,6 +25,7 @@ import { Meta } from '@storybook/blocks';
 - 修改了媒体库svg的显示问题；
 - 按钮组件Icon支持左右两侧位置；
 - 可视化box、card、card1v1基组件配置；
+- 重构了component toolbar，移除了block toolbar;
 
 ## 9.0.1(2024-12-03)
 

From 21221991d53d5602d6718dc0dbc7f56e585687ff Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 2 Jan 2025 23:24:36 +0800
Subject: [PATCH 04/35] refact: toolbar

---
 .../core/directive/contentedit.directive.ts   |    2 +-
 src/app/core/interface/IBuilder.ts            |    8 +-
 src/app/core/service/builder.service.ts       |   34 +-
 src/app/core/state/BuilderState.ts            |    3 +
 src/app/core/token/token-providers.ts         |    4 +-
 .../builder/data/widgets-for-builder.ts       | 2327 +++++++++--------
 .../block-toolbar/block-toolbar.component.ts  |    2 +-
 .../builder-list/builder-list.component.html  |    4 +
 .../builder-list/builder-list.component.scss  |   10 +
 .../widget-picker.component.html              |  102 +-
 .../widget-picker.component.scss              |    4 -
 .../widget-picker/widget-picker.component.ts  |   22 +-
 .../component/builder/_builder-list.scss      |    4 +
 13 files changed, 1297 insertions(+), 1229 deletions(-)

diff --git a/src/app/core/directive/contentedit.directive.ts b/src/app/core/directive/contentedit.directive.ts
index 3750c6e92..e6955fa39 100644
--- a/src/app/core/directive/contentedit.directive.ts
+++ b/src/app/core/directive/contentedit.directive.ts
@@ -93,7 +93,7 @@ export class ContenteditDirective implements AfterViewInit, OnInit {
             },
           };
           this.builder.rightContent$.next({
-            mode: 'push',
+            mode: 'over',
             hasBackdrop: false,
             style: {
               'width': '260px',
diff --git a/src/app/core/interface/IBuilder.ts b/src/app/core/interface/IBuilder.ts
index 38abb3461..1d71d7e68 100644
--- a/src/app/core/interface/IBuilder.ts
+++ b/src/app/core/interface/IBuilder.ts
@@ -134,11 +134,17 @@ export interface ILayoutSetting {
 
 export interface IWidgetPicker {
   type: 'widget-picker';
-  addType: 'widget' | 'layout';
+  addType: string;
   path: string;
   content: any;
 }
 
+export interface IWidgets {
+  label: string;
+  icon: IIcon;
+  elements: any[];
+}
+
 export interface IMetaEdit {
   type: string;
   data: any;
diff --git a/src/app/core/service/builder.service.ts b/src/app/core/service/builder.service.ts
index 786ee51e1..55292554c 100644
--- a/src/app/core/service/builder.service.ts
+++ b/src/app/core/service/builder.service.ts
@@ -503,21 +503,27 @@ export class BuilderService extends ApiService {
   }
 
   addBlock(addType: string, content: any, path: string): void {
-    this.builder.rightContent$.next({
-      mode: 'over',
-      hasBackdrop: false,
-      style: {
-        width: '308px',
-      },
-      elements: [
-        {
-          type: 'widget-picker',
-          addType,
-          path,
-          content,
-        },
-      ],
+    this.builder.wigetsPicker$.next({
+      type: 'widget-picker',
+      addType,
+      path,
+      content,
     });
+    // this.builder.rightContent$.next({
+    //   mode: 'over',
+    //   hasBackdrop: false,
+    //   style: {
+    //     width: '308px',
+    //   },
+    //   elements: [
+    //     {
+    //       type: 'widget-picker',
+    //       addType,
+    //       path,
+    //       content,
+    //     },
+    //   ],
+    // });
   }
 
   initExtraBody(body: any[], isTemplate?: boolean): any[] {
diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index 237634ee7..6a9934334 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -6,6 +6,8 @@ import {
   IBuilderDynamicContent,
   IBuilderShowcase,
   ILayoutSetting,
+  IWidgetPicker,
+  IWidgets,
 } from '@core/interface/IBuilder';
 import { ICard1v1 } from '@core/interface/widgets/ICard';
 import { UtilitiesService } from '@core/service/utilities.service';
@@ -28,6 +30,7 @@ export class BuilderState {
   public showcase$ = new Subject<IBuilderShowcase | false>();
   public themeMode = new BehaviorSubject<'light' | 'dark'>('light');
   public rightContent$ = new Subject<IBuilderDynamicContent>();
+  public wigetsPicker$ = new Subject<IWidgetPicker>();
   public closeRightDrawer$ = new Subject<boolean>();
   public fixedChange$ = new Subject<boolean>();
   public animateDisable$ = new Subject<boolean>();
diff --git a/src/app/core/token/token-providers.ts b/src/app/core/token/token-providers.ts
index a01828de8..9a45e37b1 100644
--- a/src/app/core/token/token-providers.ts
+++ b/src/app/core/token/token-providers.ts
@@ -4,7 +4,7 @@ import { IUser } from '@core/interface/IUser';
 import { Observable } from 'rxjs';
 import { IBranding } from '../interface/branding/IBranding';
 import { INotify } from '@core/interface/widgets/IWidgets';
-import { IBuilderConfig, IUiux } from '@core/interface/IBuilder';
+import { IBuilderConfig, IUiux, IWidgets } from '@core/interface/IBuilder';
 import { IThemePreview } from '@core/interface/combs/IThemePreview';
 import { ILanguage } from '@core/interface/IEnvironment';
 import { IManageAssets } from '@core/interface/manage/IManage';
@@ -29,4 +29,4 @@ export const BUILDER_FULL_SCREEN = new InjectionToken<Observable<boolean>>('buil
 export const UIUX = new InjectionToken<IUiux[]>('builder uiux data');
 export const IS_BUILDER_MODE = new InjectionToken<Observable<boolean>>('is builder mode');
 
-export const WIDGETS = new InjectionToken<any[]>('builder widgets for popup select');
+export const WIDGETS = new InjectionToken<IWidgets[]>('builder widgets for popup select');
diff --git a/src/app/modules/builder/data/widgets-for-builder.ts b/src/app/modules/builder/data/widgets-for-builder.ts
index a02cb3889..07028802f 100644
--- a/src/app/modules/builder/data/widgets-for-builder.ts
+++ b/src/app/modules/builder/data/widgets-for-builder.ts
@@ -1,286 +1,989 @@
 export const widgets = [
   {
-    label: 'Layout',
-    icon: {
-      svg: 'view-dashboard-outline',
-    },
-    preview: '/assets/images/builder/widgets/layout.png',
-    content: {
-      gap: {
-        xs: 0,
-        sm: 0,
-        md: 0,
-        lg: 0,
+    label: '基础',
+    elements: [
+      {
+        label: '标题',
+        icon: {
+          svg: 'format-header-2',
+        },
+        content: {
+          type: 'title',
+          label: '欢迎使用<strong class="text-primary">Web Builder</strong>构建页面',
+          classes: 'mat-headline-3 bold',
+          style: 'style-v4',
+        },
       },
-      wrapperClass: '',
-      spacer: 'none',
-      type: 'layout-builder',
-      fullWidth: false,
-      bg: {
-        classes: 'bg-fill-width',
+      {
+        label: '富文本',
+        icon: {
+          svg: 'format-text',
+        },
+        content: {
+          type: 'text',
+          spacer: 'none',
+          body: '信使UI是基于 Material 的 Angular 前端框架，丰富的组件可提供优秀的数字创新体验，使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。',
+        },
       },
-      elements: [
-        {
+      {
+        label: '链接',
+        icon: {
+          svg: 'link',
+        },
+        content: {
+          type: 'link',
+          label: '更多',
           classes: '',
-          row: {
-            xs: 12,
-            sm: 12,
-            md: 6,
-            lg: 6,
+          href: '/',
+        },
+      },
+      {
+        label: '按钮',
+        icon: {
+          svg: 'button-cursor',
+        },
+        content: {
+          type: 'btn',
+          href: '/node/1',
+          target: '_blank',
+          label: '了解更多',
+          mode: 'raised',
+          color: 'primary',
+        },
+      },
+      {
+        label: '间距',
+        icon: {
+          svg: 'minus-thick',
+        },
+        content: {
+          type: 'spacer',
+          size: 'sm',
+        },
+      },
+      {
+        label: '分割线',
+        icon: {
+          svg: 'border-horizontal',
+        },
+        content: {
+          type: 'divider',
+        },
+      },
+      {
+        label: 'JSON',
+        icon: {
+          svg: 'code-json',
+        },
+        content: {
+          type: 'json',
+          name: 'sample',
+          spacer: {
+            x: 'none',
+            y: 'none',
           },
-          elements: [],
         },
-        {
-          classes: '',
-          row: {
-            xs: 12,
-            sm: 12,
-            md: 6,
-            lg: 6,
+      },
+      {
+        label: '表格',
+        icon: {
+          svg: 'table',
+        },
+        preview: '/assets/images/builder/widgets/table.png',
+        content: {
+          type: 'dynamic-table',
+          header: [
+            {
+              label: '模块',
+              key: 'module',
+            },
+            {
+              label: '描述',
+              key: 'info',
+            },
+            {
+              label: '安装量',
+              key: 'tatol',
+            },
+            {
+              label: '备注',
+              key: 'remarks',
+              dialog: {
+                shorten: 5,
+                label: '更多',
+              },
+            },
+          ],
+          elements: [
+            {
+              module: 'Slick Carousel',
+              tatol: 2992,
+              info: 'Slick 轮播，强大响应式且性能优异的图片轮播解决方案，有非常丰富的配置选项，slick 官网自己调侃这是你最后使用的图片轮播',
+              remarks: '查看',
+            },
+            {
+              module: 'Views Slideshow',
+              tatol: 5501,
+              info: '视图轮播模块，该模块是最受欢迎的幻灯片模块，可放任何内容，高度定制\t',
+              remarks: '查看',
+            },
+            {
+              module: 'Colorbox',
+              tatol: 4438,
+              info: '轻量级高可定制幻灯片模块，高度集成在 Drupal 中，可放图片，Iframed 或者在线内容等等\t',
+              remarks: '查看',
+            },
+            {
+              module: 'Flex Slider',
+              tatol: 8930,
+              info: '响应式、可调整大小、适配浏览器和移动设备，支持移动设备手势滑动\t',
+              remarks: '查看',
+            },
+            {
+              module: 'Owl Carousel',
+              tatol: 1000,
+              info: '提供视图样式，字段格式化和管理 UI，支持响应式、移动手势、高定制幻灯片，CSS3 动画，JSON，有可用的回调，自定义事件等\t',
+              remarks: '查看',
+            },
+          ],
+        },
+      },
+      {
+        label: '联系我们',
+        icon: {
+          svg: 'account-box-outline',
+        },
+        preview: '/assets/images/builder/widgets/contact.png',
+        content: {
+          type: 'contact-us',
+          params: {
+            webform_id: 'contact',
+          },
+          bg: {
+            classes: 'bg-fill-width',
+            icon: 'wave',
+          },
+          action: {
+            label: '提交表单',
           },
-          elements: [],
+          formOrder: '1',
+          contact: [
+            {
+              title: {
+                label: '地址',
+              },
+              icon: {
+                name: 'location_on',
+              },
+              style: 'style-v7 small-box',
+              content: '创客城2栋',
+            },
+            {
+              title: {
+                label: '电话号码',
+              },
+              style: 'style-v7 small-box',
+              icon: {
+                name: 'phone',
+              },
+              content: '+086 0771xxxx',
+            },
+            {
+              title: {
+                label: '邮件',
+              },
+              style: 'style-v7 small-box',
+              icon: {
+                name: 'mail',
+              },
+              content: 'service@example.com',
+            },
+            {
+              title: {
+                label: '微信',
+              },
+              style: 'style-v7 small-box',
+              icon: {
+                name: 'chat_bubble',
+              },
+              content: 'biaogebusy',
+            },
+          ],
+          form: [
+            {
+              type: 'input',
+              key: 'name',
+              className: 'w-full',
+              props: {
+                label: '姓名',
+                appearance: 'outline',
+                required: true,
+              },
+            },
+            {
+              type: 'input',
+              key: 'email',
+              className: 'w-full',
+              props: {
+                label: '邮箱',
+                appearance: 'outline',
+                required: true,
+              },
+            },
+            {
+              type: 'input',
+              key: 'subject',
+              className: 'w-full',
+              props: {
+                label: '主题',
+                appearance: 'outline',
+              },
+            },
+            {
+              type: 'textarea',
+              key: 'message',
+              className: 'w-full',
+              props: {
+                label: '内容',
+                placeholder: 'Message',
+                appearance: 'fill',
+                rows: 5,
+              },
+            },
+          ],
         },
-      ],
-    },
-  },
-  {
-    label: 'Tailwind',
-    icon: {
-      svg: 'code-json',
-    },
-    preview: '/assets/images/builder/widgets/tailwind-v1.png',
-    content: {
-      type: 'custom-template',
-      json: {
-        title: 'web builder',
-        subTitle: '是一款通过拖拽组件构建页面的低代码',
-        img: '/assets/images/avatar/05.jpeg',
-        content:
-          '信使UI是一款开源的前端框架，基于Angular Material UI，支持SSR，多应用，后端可根据实际情况自由配置，可自定义开发、新增组件库。',
       },
-      html: '<div class="text-center md:text-left md:flex bg-shadow rounded-xl p-8 md:p-0 m-5 mx-auto overflow-hidden">\n          <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full" src="{{img}}" alt="" width="384" height="512">\n          <div class="pt-6 md:p-8 text-center md:text-left space-y-4">\n             <p class="text-lg font-medium">\n                “{{content}}”\n              </p>\n            <div class="font-medium">\n              <div class="text-xl mb-2">\n                {{title}}\n              </div>\n              <div class="opacity-75 text-sm">\n                {{subTitle}}\n              </div>\n            </div>\n          </div>\n        </div>',
-    },
-  },
-  {
-    label: 'API',
-    icon: {
-      svg: 'api',
-    },
-    preview: '/assets/images/builder/widgets/tailwind-v2.png',
-    content: {
-      type: 'custom-template',
-      isAPI: true,
-      api: '/api/v1/content',
-      html: '<div class="flex flex-wrap">\n    {{#rows }}\n    <div class="flex-12/12 sm:flex-6/12 md:flex-4/12">\n        <div class="m-3 shadow-md transition-all flex flex-col break-all rounded-md overflow-hidden hover:shadow-lg">\n            <a href="{{url}}">\n                {{#img}}\n                <img class="object-cover w-full" height="200px" src="{{img}}" /></a>\n                {{/img}}\n                {{^img}}\n                <img class="object-cover w-full" height="200px" src="/assets/images/hero/182.jpg" /></a>\n                {{/img}}\n            <div class="p-5">\n                <a class="!text-black opacity-95 hover:!opacity-80 text-lg one-line" href="{{url}}">{{title}}</a>\n                <div class="three-line opacity-90">{{body}}</div>\n                <div class="footer flex items-center mt-5">\n                    <img class="w-10 h-10 rounded-full mr-3" src="{{picture}}" />\n                    <div class="flex flex-col">\n                        <div class="font-bold">{{user}}</div>\n                        <div class="small">{{created}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    {{/rows}}\n</div>',
-    },
-  },
-  {
-    label: 'JSON',
-    icon: {
-      svg: 'code-json',
-    },
-    content: {
-      type: 'json',
-      name: 'sample',
-      spacer: {
-        x: 'none',
-        y: 'none',
+      {
+        label: '折叠面板',
+        icon: {
+          svg: 'format-line-weight',
+        },
+        content: {
+          type: 'panel',
+          elements: [
+            {
+              title: '组件驱动开发',
+              icon: 'person',
+              params: {
+                expanded: true,
+              },
+              elements: [
+                {
+                  type: 'text',
+                  spacer: 'none',
+                  body: 'Storybook采用了组件驱动开发的方法，即将UI组件作为开发的核心单元。开发人员可以在Storybook中为每个UI组件创建"stories"，描述组件在不同状态和交互方式下的行为和外观。这种方法能够提高组件的可重用性和可测试性。',
+                },
+              ],
+            },
+            {
+              title: '组件展示和测试',
+              icon: 'faviores',
+              elements: [
+                {
+                  type: 'text',
+                  spacer: 'none',
+                  body: 'Storybook提供了一个交互式的界面，用于展示和测试UI组件。开发人员可以在浏览器中浏览和交互组件，以便检查其外观和行为，并确保它们在各种条件下正常工作。这有助于加快开发迭代周期，提高组件的质量。',
+                },
+              ],
+            },
+            {
+              title: '文档化',
+              icon: 'faviores',
+              elements: [
+                {
+                  type: 'text',
+                  spacer: 'none',
+                  body: 'Storybook不仅可以展示和测试组件，还可以自动生成组件的文档。开发人员可以使用Markdown或其他文档格式编写组件文档，并将其与组件关联。这使得团队成员可以更好地理解和使用组件，减少了沟通成本。',
+                },
+              ],
+            },
+            {
+              title: '插件和工具生态系统',
+              icon: 'faviores',
+              elements: [
+                {
+                  type: 'text',
+                  spacer: 'none',
+                  body: 'Storybook拥有丰富的插件和工具生态系统，可以扩展其功能。这些插件可以用于模拟数据、测试组件的不同状态和交互，并生成自动化测试报告。这样，开发人员可以根据自己的需求定制和扩展Storybook。',
+                },
+              ],
+            },
+          ],
+        },
       },
-    },
+    ],
   },
   {
-    label: '标题',
-    icon: {
-      svg: 'format-header-2',
-    },
-    content: {
-      type: 'title',
-      label: '欢迎使用<strong class="text-primary">Web Builder</strong>构建页面',
-      classes: 'mat-headline-3 bold',
-      style: 'style-v4',
-    },
-  },
-  {
-    label: '富文本',
-    icon: {
-      svg: 'format-text',
-    },
-    content: {
-      type: 'text',
-      spacer: 'none',
-      body: '信使UI是基于 Material 的 Angular 前端框架，丰富的组件可提供优秀的数字创新体验，使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。',
-    },
-  },
-  {
-    label: '图片',
-    icon: {
-      svg: 'image-outline',
-    },
-    content: {
-      type: 'img',
-      hostClasses: 'text-center',
-      classes: 'object-contain',
-      src: '/assets/images/illustration/08.png',
-      alt: 'alt',
-      width: 400,
-      height: 300,
-    },
-  },
-  {
-    label: '视频',
-    icon: {
-      svg: 'play-circle-outline',
-    },
-    content: {
-      type: 'video',
-      options: {
-        controls: true,
-        aspectRatio: '1:1',
-        poster: '/assets/video/poster01.png',
-        sources: [
-          {
-            src: '/assets/video/storybook.mp4',
-            type: 'video/mp4',
-          },
-        ],
+    label: '自定义',
+    elements: [
+      {
+        label: 'Layout',
+        icon: {
+          svg: 'view-dashboard-outline',
+        },
+        preview: '/assets/images/builder/widgets/layout.png',
+        content: {
+          gap: {
+            xs: 0,
+            sm: 0,
+            md: 0,
+            lg: 0,
+          },
+          wrapperClass: '',
+          spacer: 'none',
+          type: 'layout-builder',
+          fullWidth: false,
+          bg: {
+            classes: 'bg-fill-width',
+          },
+          elements: [
+            {
+              classes: '',
+              row: {
+                xs: 12,
+                sm: 12,
+                md: 6,
+                lg: 6,
+              },
+              elements: [],
+            },
+            {
+              classes: '',
+              row: {
+                xs: 12,
+                sm: 12,
+                md: 6,
+                lg: 6,
+              },
+              elements: [],
+            },
+          ],
+        },
       },
-    },
-  },
-  {
-    label: '链接',
-    icon: {
-      svg: 'link',
-    },
-    content: {
-      type: 'link',
-      label: '更多',
-      classes: '',
-      href: '/',
-    },
-  },
-  {
-    label: '按钮',
-    icon: {
-      svg: 'button-cursor',
-    },
-    content: {
-      type: 'btn',
-      href: '/node/1',
-      target: '_blank',
-      label: '了解更多',
-      mode: 'raised',
-      color: 'primary',
-    },
-  },
-  {
-    label: '间距',
-    icon: {
-      svg: 'minus-thick',
-    },
-    content: {
-      type: 'spacer',
-      size: 'sm',
-    },
-  },
-  {
-    label: '分割线',
-    icon: {
-      svg: 'border-horizontal',
-    },
-    content: {
-      type: 'divider',
-    },
-  },
-  {
-    label: '图标',
-    icon: {
-      svg: 'svg',
-    },
-    content: {
-      type: 'icon',
-      color: 'primary',
-      svg: 'border-color',
-    },
+      {
+        label: 'Tailwind',
+        icon: {
+          svg: 'code-json',
+        },
+        preview: '/assets/images/builder/widgets/tailwind-v1.png',
+        content: {
+          type: 'custom-template',
+          json: {
+            title: 'web builder',
+            subTitle: '是一款通过拖拽组件构建页面的低代码',
+            img: '/assets/images/avatar/05.jpeg',
+            content:
+              '信使UI是一款开源的前端框架，基于Angular Material UI，支持SSR，多应用，后端可根据实际情况自由配置，可自定义开发、新增组件库。',
+          },
+          html: '<div class="text-center md:text-left md:flex bg-shadow rounded-xl p-8 md:p-0 m-5 mx-auto overflow-hidden">\n          <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full" src="{{img}}" alt="" width="384" height="512">\n          <div class="pt-6 md:p-8 text-center md:text-left space-y-4">\n             <p class="text-lg font-medium">\n                “{{content}}”\n              </p>\n            <div class="font-medium">\n              <div class="text-xl mb-2">\n                {{title}}\n              </div>\n              <div class="opacity-75 text-sm">\n                {{subTitle}}\n              </div>\n            </div>\n          </div>\n        </div>',
+        },
+      },
+      {
+        label: 'API',
+        icon: {
+          svg: 'api',
+        },
+        preview: '/assets/images/builder/widgets/tailwind-v2.png',
+        content: {
+          type: 'custom-template',
+          isAPI: true,
+          api: '/api/v1/content',
+          html: '<div class="flex flex-wrap">\n    {{#rows }}\n    <div class="flex-12/12 sm:flex-6/12 md:flex-4/12">\n        <div class="m-3 shadow-md transition-all flex flex-col break-all rounded-md overflow-hidden hover:shadow-lg">\n            <a href="{{url}}">\n                {{#img}}\n                <img class="object-cover w-full" height="200px" src="{{img}}" /></a>\n                {{/img}}\n                {{^img}}\n                <img class="object-cover w-full" height="200px" src="/assets/images/hero/182.jpg" /></a>\n                {{/img}}\n            <div class="p-5">\n                <a class="!text-black opacity-95 hover:!opacity-80 text-lg one-line" href="{{url}}">{{title}}</a>\n                <div class="three-line opacity-90">{{body}}</div>\n                <div class="footer flex items-center mt-5">\n                    <img class="w-10 h-10 rounded-full mr-3" src="{{picture}}" />\n                    <div class="flex flex-col">\n                        <div class="font-bold">{{user}}</div>\n                        <div class="small">{{created}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    {{/rows}}\n</div>',
+        },
+      },
+    ],
   },
   {
-    label: '幻灯片',
-    icon: {
-      svg: 'view-array-outline',
-    },
-    preview: '/assets/images/builder/widgets/swiper.png',
-    content: {
-      type: 'swiper',
-      params: {
-        navigation: false,
-        breakpoints: {
-          '600': {
-            slidesPerView: 3,
-            spaceBetween: 20,
-          },
-          '960': {
-            slidesPerView: 3,
-            spaceBetween: 50,
+    label: '媒体',
+    elements: [
+      {
+        label: '图片',
+        icon: {
+          svg: 'image-outline',
+        },
+        content: {
+          type: 'img',
+          hostClasses: 'text-center',
+          classes: 'object-contain',
+          src: '/assets/images/illustration/08.png',
+          alt: 'alt',
+          width: 400,
+          height: 300,
+        },
+      },
+      {
+        label: '视频',
+        icon: {
+          svg: 'play-circle-outline',
+        },
+        content: {
+          type: 'video',
+          options: {
+            controls: true,
+            aspectRatio: '1:1',
+            poster: '/assets/video/poster01.png',
+            sources: [
+              {
+                src: '/assets/video/storybook.mp4',
+                type: 'video/mp4',
+              },
+            ],
           },
         },
       },
-      classes: '',
-      elements: [
-        {
-          type: 'card',
-          title: '高性能',
-          subTitle: 'High Performance',
-          classes: 'card-no-shadow',
-          body: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
-          feature: {
-            fullIcon: 'fullscreen',
-            openIcon: 'open_in_new',
-            link: '#',
-            ratios: 'media-4-3',
-            img: {
-              classes: 'object-fit',
-              src: '/assets/images/cases/porto1.jpg',
-              alt: 'alt',
+      {
+        label: '播放按钮',
+        icon: {
+          svg: 'play-circle-outline',
+        },
+        content: {
+          type: 'btn-video',
+          color: 'primary',
+          video: {
+            type: 'video',
+            options: {
+              controls: true,
+              aspectRatio: '16:9',
+              poster: '/assets/video/poster01.png',
+              sources: [
+                {
+                  src: '/assets/video/storybook.mp4',
+                  type: 'video/mp4',
+                },
+              ],
             },
           },
         },
-        {
-          type: 'card',
-          feature: {
-            fullIcon: 'fullscreen',
-            openIcon: 'open_in_new',
-            link: '#',
-            ratios: 'media-4-3',
-            img: {
-              classes: 'object-fit',
-              src: '/assets/images/cases/porto7.jpg',
-              alt: 'alt',
+      },
+      {
+        label: '图标',
+        icon: {
+          svg: 'svg',
+        },
+        content: {
+          type: 'icon',
+          color: 'primary',
+          svg: 'border-color',
+        },
+      },
+      {
+        label: '幻灯片',
+        icon: {
+          svg: 'view-array-outline',
+        },
+        preview: '/assets/images/builder/widgets/swiper.png',
+        content: {
+          type: 'swiper',
+          params: {
+            navigation: false,
+            breakpoints: {
+              '600': {
+                slidesPerView: 3,
+                spaceBetween: 20,
+              },
+              '960': {
+                slidesPerView: 3,
+                spaceBetween: 50,
+              },
             },
           },
-          title: '易用的编辑器',
-          subTitle: 'Simplicity for Editors',
-          classes: 'card-no-shadow',
-          body: '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作；',
+          classes: '',
+          elements: [
+            {
+              type: 'card',
+              title: '高性能',
+              subTitle: 'High Performance',
+              classes: 'card-no-shadow',
+              body: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
+              feature: {
+                fullIcon: 'fullscreen',
+                openIcon: 'open_in_new',
+                link: '#',
+                ratios: 'media-4-3',
+                img: {
+                  classes: 'object-fit',
+                  src: '/assets/images/cases/porto1.jpg',
+                  alt: 'alt',
+                },
+              },
+            },
+            {
+              type: 'card',
+              feature: {
+                fullIcon: 'fullscreen',
+                openIcon: 'open_in_new',
+                link: '#',
+                ratios: 'media-4-3',
+                img: {
+                  classes: 'object-fit',
+                  src: '/assets/images/cases/porto7.jpg',
+                  alt: 'alt',
+                },
+              },
+              title: '易用的编辑器',
+              subTitle: 'Simplicity for Editors',
+              classes: 'card-no-shadow',
+              body: '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作；',
+            },
+            {
+              type: 'card',
+              feature: {
+                fullIcon: 'fullscreen',
+                openIcon: 'open_in_new',
+                link: '#',
+                ratios: 'media-4-3',
+                img: {
+                  classes: 'object-fit',
+                  src: '/assets/images/cases/porto2.jpg',
+                  alt: 'alt',
+                },
+              },
+              title: '多语言',
+              subTitle: 'Leader in Multilingual',
+              classes: 'card-no-shadow',
+              body: 'Drupal 100多种语言提供了无以伦比的支持和翻译工作流程；',
+            },
+            {
+              type: 'card',
+              feature: {
+                fullIcon: 'fullscreen',
+                openIcon: 'open_in_new',
+                link: '#',
+                ratios: 'media-4-3',
+                img: {
+                  classes: 'object-fit',
+                  src: '/assets/images/cases/porto3.jpg',
+                  alt: 'alt',
+                },
+              },
+              title: '更有弹性',
+              subTitle: 'Flexibility',
+              classes: 'card-no-shadow',
+              body: '无论是一个还是多个站点，Drupal 总是可以游刃有余的构建；',
+            },
+            {
+              type: 'card',
+              feature: {
+                fullIcon: 'fullscreen',
+                openIcon: 'open_in_new',
+                link: '#',
+                ratios: 'media-4-3',
+                img: {
+                  classes: 'object-fit',
+                  src: '/assets/images/cases/porto4.jpg',
+                  alt: 'alt',
+                },
+              },
+              title: '安全性',
+              subTitle: 'Rigorous Security',
+              classes: 'card-no-shadow',
+              body: '为了抵御安全漏洞，将有一组团队解决并发布安全修补程序，超过45000名贡献者使该平台成为市场上最安全、最稳定的平台之一；',
+            },
+          ],
         },
-        {
-          type: 'card',
-          feature: {
-            fullIcon: 'fullscreen',
-            openIcon: 'open_in_new',
-            link: '#',
-            ratios: 'media-4-3',
-            img: {
-              classes: 'object-fit',
-              src: '/assets/images/cases/porto2.jpg',
-              alt: 'alt',
+      },
+      {
+        label: 'Lightbox',
+        icon: {
+          svg: 'view-carousel-outline',
+        },
+        content: {
+          type: 'inline-lightbox',
+          label: ['查看图片', 'Word 下载', 'PDF 预览'],
+          elements: [
+            {
+              src: '/assets/images/cases/porto1.jpg',
+            },
+            {
+              src: '/assets/images/cases/porto2.pdf',
+            },
+            {
+              src: '/assets/images/cases/porto3.pdf',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    label: 'Box',
+    elements: [
+      {
+        label: 'Box',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          img: {
+            src: '/assets/images/svg/Asset187.svg',
+            alt: 'browser',
+          },
+          style: 'style-v3 use-image',
+          title: {
+            href: '#',
+            label: '高性能',
+          },
+          content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
+        },
+      },
+      {
+        label: 'Box v1',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v1',
+          icon: {
+            name: 'fingerprint',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v2',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v2',
+          icon: {
+            name: 'verified_user',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v3',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v3',
+          icon: {
+            name: 'verified_user',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v4',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v4',
+          icon: {
+            name: 'verified_user',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v5',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v5',
+          icon: {
+            name: 'verified_user',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v6',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v6',
+          icon: {
+            name: 'verified_user',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v7',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v7',
+          icon: {
+            name: 'verified_user',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v9',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v9',
+          icon: {
+            name: 'fingerprint',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+      {
+        label: 'Box v10',
+        icon: {
+          svg: 'box',
+        },
+        content: {
+          type: 'box',
+          style: 'style-v10',
+          icon: {
+            name: 'fingerprint',
+          },
+          title: {
+            href: '/',
+            label: '组件编辑',
+          },
+          content: '通过简单的管理界面对复杂的可视化编辑',
+          more: {
+            href: '#',
+            label: '更多',
+          },
+        },
+      },
+    ],
+  },
+  {
+    label: '图表',
+    elements: [
+      {
+        label: '柱状图',
+        icon: {
+          svg: 'chart-bar',
+        },
+        preview: '/assets/images/builder/widgets/bar.png',
+        content: {
+          type: 'chart',
+          title: {
+            text: '年度活动金额预算',
+            subtext: '南宁',
+          },
+          legend: {
+            bottom: '10px',
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          dataset: {
+            source: [
+              ['红包预算', '2020', '2021', '2022'],
+              ['第一季度', 4180, 9056, 7942],
+              ['第二季度', 7908, 9032, 8471],
+              ['第三季度', 4785, 7987, 4172],
+            ],
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'bar',
+            },
+            {
+              type: 'bar',
+            },
+            {
+              type: 'bar',
+            },
+          ],
+        },
+      },
+      {
+        label: '折线图',
+        icon: {
+          svg: 'chart-line',
+        },
+        preview: '/assets/images/builder/widgets/line.png',
+        content: {
+          type: 'chart',
+          title: {
+            text: '年度活动金额预算',
+            subtext: '南宁',
+          },
+          legend: {
+            bottom: '10px',
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          dataset: {
+            source: [
+              ['红包预算', '2020', '2021', '2022'],
+              ['第一季度', 4180, 9056, 7942],
+              ['第二季度', 7908, 9032, 8471],
+              ['第三季度', 4785, 7987, 4172],
+            ],
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'line',
+            },
+            {
+              type: 'line',
+            },
+            {
+              type: 'line',
             },
+          ],
+        },
+      },
+      {
+        label: '饼图',
+        icon: {
+          svg: 'chart-pie',
+        },
+        preview: '/assets/images/builder/widgets/pie.png',
+        content: {
+          type: 'chart',
+          title: {
+            text: '金额预算占比',
+            subtext: '2022年9月',
+            left: 'center',
           },
-          title: '多语言',
-          subTitle: 'Leader in Multilingual',
-          classes: 'card-no-shadow',
-          body: 'Drupal 100多种语言提供了无以伦比的支持和翻译工作流程；',
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: {},
+          dataset: {
+            source: [
+              ['预算', '费用'],
+              ['大额红包总金额', 398],
+              ['小额红包总金额', 916],
+              ['提成总额', 370],
+            ],
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%',
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    label: '卡片',
+    elements: [
+      {
+        label: '卡片',
+        icon: {
+          svg: 'card-outline',
         },
-        {
+        preview: '/assets/images/builder/widgets/card.png',
+        content: {
           type: 'card',
+          title: '高性能',
+          subTitle: 'High Performance',
+          classes: 'card-no-shadow',
+          body: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
           feature: {
             fullIcon: 'fullscreen',
             openIcon: 'open_in_new',
@@ -292,13 +995,22 @@ export const widgets = [
               alt: 'alt',
             },
           },
-          title: '更有弹性',
-          subTitle: 'Flexibility',
-          classes: 'card-no-shadow',
-          body: '无论是一个还是多个站点，Drupal 总是可以游刃有余的构建；',
         },
-        {
-          type: 'card',
+      },
+      {
+        label: '卡片1v1',
+        icon: {
+          svg: 'numeric-1',
+        },
+        preview: '/assets/images/builder/widgets/card-1v1.png',
+        content: {
+          type: 'card-1v1',
+          link: {
+            href: '#',
+            label: 'Drupal 100多种语言提供了无以伦比的支持和翻译工作流程',
+          },
+          user: '表歌',
+          time: '2022/09/27',
           feature: {
             fullIcon: 'fullscreen',
             openIcon: 'open_in_new',
@@ -306,944 +1018,267 @@ export const widgets = [
             ratios: 'media-4-3',
             img: {
               classes: 'object-fit',
-              src: '/assets/images/cases/porto4.jpg',
+              src: '/assets/images/cases/porto3.jpg',
               alt: 'alt',
             },
           },
-          title: '安全性',
-          subTitle: 'Rigorous Security',
-          classes: 'card-no-shadow',
-          body: '为了抵御安全漏洞，将有一组团队解决并发布安全修补程序，超过45000名贡献者使该平台成为市场上最安全、最稳定的平台之一；',
+          moreLabel: '查看更多',
         },
-      ],
-    },
-  },
-  {
-    label: '联系我们',
-    icon: {
-      svg: 'account-box-outline',
-    },
-    preview: '/assets/images/builder/widgets/contact.png',
-    content: {
-      type: 'contact-us',
-      params: {
-        webform_id: 'contact',
       },
-      bg: {
-        classes: 'bg-fill-width',
-        icon: 'wave',
-      },
-      action: {
-        label: '提交表单',
-      },
-      formOrder: '1',
-      contact: [
-        {
-          title: {
-            label: '地址',
-          },
-          icon: {
-            name: 'location_on',
-          },
-          style: 'style-v7 small-box',
-          content: '创客城2栋',
+      {
+        label: '卡片2v2',
+        icon: {
+          svg: 'numeric-2',
         },
-        {
-          title: {
-            label: '电话号码',
-          },
-          style: 'style-v7 small-box',
-          icon: {
-            name: 'phone',
+        preview: '/assets/images/builder/widgets/card-1v2.png',
+        content: {
+          type: 'card-1v2',
+          link: {
+            href: '#',
+            label: 'Drupal 100多种语言提供了无以伦比的支持和翻译工作流程',
           },
-          content: '+086 0771xxxx',
-        },
-        {
-          title: {
-            label: '邮件',
+          subTitle: '多语言',
+          img: {
+            href: '#',
+            src: '/assets/images/cases/porto3.jpg',
+            alt: 'alt',
           },
-          style: 'style-v7 small-box',
-          icon: {
-            name: 'mail',
+          bg: {
+            classes: 'object-fit',
+            img: {
+              hostClasses: '',
+              src: '/assets/images/showcase/pattern-01.png',
+            },
           },
-          content: 'service@example.com',
         },
-        {
-          title: {
-            label: '微信',
-          },
-          style: 'style-v7 small-box',
-          icon: {
-            name: 'chat_bubble',
-          },
-          content: 'biaogebusy',
-        },
-      ],
-      form: [
-        {
-          type: 'input',
-          key: 'name',
-          className: 'w-full',
-          props: {
-            label: '姓名',
-            appearance: 'outline',
-            required: true,
-          },
-        },
-        {
-          type: 'input',
-          key: 'email',
-          className: 'w-full',
-          props: {
-            label: '邮箱',
-            appearance: 'outline',
-            required: true,
-          },
-        },
-        {
-          type: 'input',
-          key: 'subject',
-          className: 'w-full',
-          props: {
-            label: '主题',
-            appearance: 'outline',
-          },
-        },
-        {
-          type: 'textarea',
-          key: 'message',
-          className: 'w-full',
-          props: {
-            label: '内容',
-            placeholder: 'Message',
-            appearance: 'fill',
-            rows: 5,
-          },
-        },
-      ],
-    },
-  },
-  {
-    label: '柱状图',
-    icon: {
-      svg: 'chart-bar',
-    },
-    preview: '/assets/images/builder/widgets/bar.png',
-    content: {
-      type: 'chart',
-      title: {
-        text: '年度活动金额预算',
-        subtext: '南宁',
-      },
-      legend: {
-        bottom: '10px',
-      },
-      tooltip: {
-        trigger: 'axis',
       },
-      dataset: {
-        source: [
-          ['红包预算', '2020', '2021', '2022'],
-          ['第一季度', 4180, 9056, 7942],
-          ['第二季度', 7908, 9032, 8471],
-          ['第三季度', 4785, 7987, 4172],
-        ],
-      },
-      xAxis: {
-        type: 'category',
-      },
-      yAxis: {},
-      series: [
-        {
-          type: 'bar',
-        },
-        {
-          type: 'bar',
+      {
+        label: '卡片1v4',
+        icon: {
+          svg: 'numeric-4',
         },
-        {
-          type: 'bar',
+        content: {
+          type: 'card-1v4',
+          img: {
+            classes: 'w-full h-full object-cover',
+            src: '/assets/images/avatar/01.jpeg',
+          },
+          star: 5,
+          title: '- Johnson',
+          subTitle: '前端开发',
+          body: '信使是一个灵活可扩展性高的前端Anuglar框架，动态组件可以使得组件之间变得更加灵活，但是依赖循环也变得复杂。',
         },
-      ],
-    },
-  },
-  {
-    label: '折线图',
-    icon: {
-      svg: 'chart-line',
-    },
-    preview: '/assets/images/builder/widgets/line.png',
-    content: {
-      type: 'chart',
-      title: {
-        text: '年度活动金额预算',
-        subtext: '南宁',
       },
-      legend: {
-        bottom: '10px',
-      },
-      tooltip: {
-        trigger: 'axis',
-      },
-      dataset: {
-        source: [
-          ['红包预算', '2020', '2021', '2022'],
-          ['第一季度', 4180, 9056, 7942],
-          ['第二季度', 7908, 9032, 8471],
-          ['第三季度', 4785, 7987, 4172],
-        ],
-      },
-      xAxis: {
-        type: 'category',
-      },
-      yAxis: {},
-      series: [
-        {
-          type: 'line',
-        },
-        {
-          type: 'line',
+      {
+        label: '卡片1v5',
+        icon: {
+          svg: 'numeric-5',
         },
-        {
-          type: 'line',
+        content: {
+          type: 'card-1v5',
+          title: '讨论 Builder 架构',
+          body: '讨论未来的发展方向和基础架构，是否可以融入 AI 生成相应的内容，为用户提供优秀的数字创新体验。',
+          more: {
+            href: '/node/1',
+            target: '_blank',
+            label: '查看更多',
+          },
+          footer: {
+            label: 'Step 01.',
+            icon: {
+              svg: 'chevron-double-right',
+            },
+          },
         },
-      ],
-    },
-  },
-  {
-    label: '饼图',
-    icon: {
-      svg: 'chart-pie',
-    },
-    preview: '/assets/images/builder/widgets/pie.png',
-    content: {
-      type: 'chart',
-      title: {
-        text: '金额预算占比',
-        subtext: '2022年9月',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
       },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      xAxis: {
-        type: 'category',
-      },
-      yAxis: {},
-      dataset: {
-        source: [
-          ['预算', '费用'],
-          ['大额红包总金额', 398],
-          ['小额红包总金额', 916],
-          ['提成总额', 370],
-        ],
-      },
-      series: [
-        {
-          name: 'Access From',
-          type: 'pie',
-          radius: '50%',
-          label: {
-            formatter: '{b}: {d}%',
-          },
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
+      {
+        label: '卡片1v6',
+        icon: {
+          svg: 'numeric-6',
+        },
+        content: {
+          title: {
+            classes: 'text-primary',
+            label: '免费',
           },
+          type: 'card-1v6',
+          prefix: '¥',
+          number: '79',
+          suffix: '/月',
+          body: '<ul class="list-done"><li>完全开放</li><li>安全检测机制</li><li>高质量交付源码文件</li><li>免费一个域名绑定</li><li>二十四小时免费技术支持</li></ul>',
+          classes: '',
+          actionsAlign: 'start',
+          actions: [
+            {
+              href: '#',
+              label: '开始',
+              type: 'btn',
+              color: 'primary',
+              mode: 'raised',
+            },
+            {
+              type: 'btn',
+              label: '立即购买',
+              href: '#',
+              mode: 'raised',
+              color: 'primary',
+            },
+          ],
         },
-      ],
-    },
+      },
+    ],
   },
   {
-    label: '折叠面板',
-    icon: {
-      svg: 'format-line-weight',
-    },
-    content: {
-      type: 'panel',
-      elements: [
-        {
-          title: '组件驱动开发',
-          icon: 'person',
+    label: '其他',
+    elements: [
+      {
+        label: '进步器',
+        icon: {
+          svg: 'debug-step-over',
+        },
+        content: {
+          type: 'stepper',
           params: {
-            expanded: true,
+            mode: 'horizontal',
+            labelPosition: 'bottom',
+            linear: true,
           },
-          elements: [
+          steps: [
             {
-              type: 'text',
-              spacer: 'none',
-              body: 'Storybook采用了组件驱动开发的方法，即将UI组件作为开发的核心单元。开发人员可以在Storybook中为每个UI组件创建"stories"，描述组件在不同状态和交互方式下的行为和外观。这种方法能够提高组件的可重用性和可测试性。',
+              label: '指派中',
             },
-          ],
-        },
-        {
-          title: '组件展示和测试',
-          icon: 'faviores',
-          elements: [
             {
-              type: 'text',
-              spacer: 'none',
-              body: 'Storybook提供了一个交互式的界面，用于展示和测试UI组件。开发人员可以在浏览器中浏览和交互组件，以便检查其外观和行为，并确保它们在各种条件下正常工作。这有助于加快开发迭代周期，提高组件的质量。',
+              label: '接受',
+              completed: true,
             },
-          ],
-        },
-        {
-          title: '文档化',
-          icon: 'faviores',
-          elements: [
             {
-              type: 'text',
-              spacer: 'none',
-              body: 'Storybook不仅可以展示和测试组件，还可以自动生成组件的文档。开发人员可以使用Markdown或其他文档格式编写组件文档，并将其与组件关联。这使得团队成员可以更好地理解和使用组件，减少了沟通成本。',
+              label: '停止',
             },
-          ],
-        },
-        {
-          title: '插件和工具生态系统',
-          icon: 'faviores',
-          elements: [
             {
-              type: 'text',
-              spacer: 'none',
-              body: 'Storybook拥有丰富的插件和工具生态系统，可以扩展其功能。这些插件可以用于模拟数据、测试组件的不同状态和交互，并生成自动化测试报告。这样，开发人员可以根据自己的需求定制和扩展Storybook。',
+              label: '转移',
             },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    label: '表格',
-    icon: {
-      svg: 'table',
-    },
-    preview: '/assets/images/builder/widgets/table.png',
-    content: {
-      type: 'dynamic-table',
-      header: [
-        {
-          label: '模块',
-          key: 'module',
-        },
-        {
-          label: '描述',
-          key: 'info',
-        },
-        {
-          label: '安装量',
-          key: 'tatol',
-        },
-        {
-          label: '备注',
-          key: 'remarks',
-          dialog: {
-            shorten: 5,
-            label: '更多',
-          },
-        },
-      ],
-      elements: [
-        {
-          module: 'Slick Carousel',
-          tatol: 2992,
-          info: 'Slick 轮播，强大响应式且性能优异的图片轮播解决方案，有非常丰富的配置选项，slick 官网自己调侃这是你最后使用的图片轮播',
-          remarks: '查看',
-        },
-        {
-          module: 'Views Slideshow',
-          tatol: 5501,
-          info: '视图轮播模块，该模块是最受欢迎的幻灯片模块，可放任何内容，高度定制\t',
-          remarks: '查看',
-        },
-        {
-          module: 'Colorbox',
-          tatol: 4438,
-          info: '轻量级高可定制幻灯片模块，高度集成在 Drupal 中，可放图片，Iframed 或者在线内容等等\t',
-          remarks: '查看',
-        },
-        {
-          module: 'Flex Slider',
-          tatol: 8930,
-          info: '响应式、可调整大小、适配浏览器和移动设备，支持移动设备手势滑动\t',
-          remarks: '查看',
-        },
-        {
-          module: 'Owl Carousel',
-          tatol: 1000,
-          info: '提供视图样式，字段格式化和管理 UI，支持响应式、移动手势、高定制幻灯片，CSS3 动画，JSON，有可用的回调，自定义事件等\t',
-          remarks: '查看',
-        },
-      ],
-    },
-  },
-  {
-    label: '播放按钮',
-    icon: {
-      svg: 'play-circle-outline',
-    },
-    content: {
-      type: 'btn-video',
-      color: 'primary',
-      video: {
-        type: 'video',
-        options: {
-          controls: true,
-          aspectRatio: '16:9',
-          poster: '/assets/video/poster01.png',
-          sources: [
             {
-              src: '/assets/video/storybook.mp4',
-              type: 'video/mp4',
+              label: '已完成',
             },
           ],
         },
       },
-    },
-  },
-  {
-    label: 'Box',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      img: {
-        src: '/assets/images/svg/Asset187.svg',
-        alt: 'browser',
-      },
-      style: 'style-v3 use-image',
-      title: {
-        href: '#',
-        label: '高性能',
-      },
-      content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
-    },
-  },
-  {
-    label: 'Box v1',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v1',
-      icon: {
-        name: 'fingerprint',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v2',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v2',
-      icon: {
-        name: 'verified_user',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v3',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v3',
-      icon: {
-        name: 'verified_user',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v4',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v4',
-      icon: {
-        name: 'verified_user',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v5',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v5',
-      icon: {
-        name: 'verified_user',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v6',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v6',
-      icon: {
-        name: 'verified_user',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v7',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v7',
-      icon: {
-        name: 'verified_user',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v9',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v9',
-      icon: {
-        name: 'fingerprint',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: 'Box v10',
-    icon: {
-      svg: 'box',
-    },
-    content: {
-      type: 'box',
-      style: 'style-v10',
-      icon: {
-        name: 'fingerprint',
-      },
-      title: {
-        href: '/',
-        label: '组件编辑',
-      },
-      content: '通过简单的管理界面对复杂的可视化编辑',
-      more: {
-        href: '#',
-        label: '更多',
-      },
-    },
-  },
-  {
-    label: '卡片',
-    icon: {
-      svg: 'card-outline',
-    },
-    preview: '/assets/images/builder/widgets/card.png',
-    content: {
-      type: 'card',
-      title: '高性能',
-      subTitle: 'High Performance',
-      classes: 'card-no-shadow',
-      body: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
-      feature: {
-        fullIcon: 'fullscreen',
-        openIcon: 'open_in_new',
-        link: '#',
-        ratios: 'media-4-3',
-        img: {
-          classes: 'object-fit',
-          src: '/assets/images/cases/porto3.jpg',
-          alt: 'alt',
-        },
-      },
-    },
-  },
-  {
-    label: '卡片1v1',
-    icon: {
-      svg: 'numeric-1',
-    },
-    preview: '/assets/images/builder/widgets/card-1v1.png',
-    content: {
-      type: 'card-1v1',
-      link: {
-        href: '#',
-        label: 'Drupal 100多种语言提供了无以伦比的支持和翻译工作流程',
-      },
-      user: '表歌',
-      time: '2022/09/27',
-      feature: {
-        fullIcon: 'fullscreen',
-        openIcon: 'open_in_new',
-        link: '#',
-        ratios: 'media-4-3',
-        img: {
-          classes: 'object-fit',
-          src: '/assets/images/cases/porto3.jpg',
-          alt: 'alt',
+      {
+        label: '进度组',
+        icon: {
+          svg: 'format-list-group',
         },
-      },
-      moreLabel: '查看更多',
-    },
-  },
-  {
-    label: '卡片2v2',
-    icon: {
-      svg: 'numeric-2',
-    },
-    preview: '/assets/images/builder/widgets/card-1v2.png',
-    content: {
-      type: 'card-1v2',
-      link: {
-        href: '#',
-        label: 'Drupal 100多种语言提供了无以伦比的支持和翻译工作流程',
-      },
-      subTitle: '多语言',
-      img: {
-        href: '#',
-        src: '/assets/images/cases/porto3.jpg',
-        alt: 'alt',
-      },
-      bg: {
-        classes: 'object-fit',
-        img: {
-          hostClasses: '',
-          src: '/assets/images/showcase/pattern-01.png',
+        content: {
+          type: 'progress-group',
+          elements: [
+            {
+              label: 'HTML/CSS',
+              value: 95,
+            },
+            {
+              label: 'Angular/JavaScript',
+              value: 79,
+            },
+            {
+              label: 'Drupal',
+              value: 60,
+            },
+          ],
         },
       },
-    },
-  },
-  {
-    label: '卡片1v4',
-    icon: {
-      svg: 'numeric-4',
-    },
-    content: {
-      type: 'card-1v4',
-      img: {
-        classes: 'w-full h-full object-cover',
-        src: '/assets/images/avatar/01.jpeg',
-      },
-      star: 5,
-      title: '- Johnson',
-      subTitle: '前端开发',
-      body: '信使是一个灵活可扩展性高的前端Anuglar框架，动态组件可以使得组件之间变得更加灵活，但是依赖循环也变得复杂。',
-    },
-  },
-  {
-    label: '卡片1v5',
-    icon: {
-      svg: 'numeric-5',
-    },
-    content: {
-      type: 'card-1v5',
-      title: '讨论 Builder 架构',
-      body: '讨论未来的发展方向和基础架构，是否可以融入 AI 生成相应的内容，为用户提供优秀的数字创新体验。',
-      more: {
-        href: '/node/1',
-        target: '_blank',
-        label: '查看更多',
-      },
-      footer: {
-        label: 'Step 01.',
+      {
+        label: '列表',
         icon: {
-          svg: 'chevron-double-right',
-        },
-      },
-    },
-  },
-  {
-    label: '卡片1v6',
-    icon: {
-      svg: 'numeric-6',
-    },
-    content: {
-      title: {
-        classes: 'text-primary',
-        label: '免费',
-      },
-      type: 'card-1v6',
-      prefix: '¥',
-      number: '79',
-      suffix: '/月',
-      body: '<ul class="list-done"><li>完全开放</li><li>安全检测机制</li><li>高质量交付源码文件</li><li>免费一个域名绑定</li><li>二十四小时免费技术支持</li></ul>',
-      classes: '',
-      actionsAlign: 'start',
-      actions: [
-        {
-          href: '#',
-          label: '开始',
-          type: 'btn',
-          color: 'primary',
-          mode: 'raised',
+          svg: 'format-list-checkbox',
         },
-        {
-          type: 'btn',
-          label: '立即购买',
-          href: '#',
-          mode: 'raised',
-          color: 'primary',
+        content: {
+          type: 'media-list',
+          title: '热门文章',
+          elements: [
+            {
+              link: {
+                label: '使用 DevTools 对 Angular 前端应用性能分析优化',
+                href: '/node/417',
+              },
+              img: {
+                src: '../assets/images/showcase/blog1-large.jpeg',
+                alt: '',
+              },
+              changed: '2024-07-16',
+            },
+            {
+              link: {
+                label: '使用 takeUntil 操作符管理 Angular 组件的订阅',
+                href: '/node/415',
+              },
+              img: {
+                src: '../assets/images/showcase/blog2-large.jpeg',
+                alt: '',
+              },
+              changed: '2024-07-16',
+            },
+            {
+              link: {
+                label: '你应该了解的 Angular 最佳实践',
+                href: '2024-07-16',
+              },
+              img: {
+                src: '../assets/images/showcase/blog3-large.jpeg',
+                alt: '',
+              },
+              changed: '2024-07-16',
+            },
+            {
+              link: {
+                label: 'Angular 5 rxjs 5.5.2 多个 http 并行 forkJoin 请求',
+                href: '2024-07-16',
+              },
+              img: {
+                src: '../assets/images/showcase/blog4-large.jpeg',
+                alt: '',
+              },
+              changed: '2024-07-16',
+            },
+          ],
         },
-      ],
-    },
-  },
-  {
-    label: '进步器',
-    icon: {
-      svg: 'debug-step-over',
-    },
-    content: {
-      type: 'stepper',
-      params: {
-        mode: 'horizontal',
-        labelPosition: 'bottom',
-        linear: true,
       },
-      steps: [
-        {
-          label: '指派中',
-        },
-        {
-          label: '接受',
-          completed: true,
-        },
-        {
-          label: '停止',
-        },
-        {
-          label: '转移',
-        },
-        {
-          label: '已完成',
-        },
-      ],
-    },
-  },
-  {
-    label: '进度组',
-    icon: {
-      svg: 'format-list-group',
-    },
-    content: {
-      type: 'progress-group',
-      elements: [
-        {
-          label: 'HTML/CSS',
-          value: 95,
-        },
-        {
-          label: 'Angular/JavaScript',
-          value: 79,
-        },
-        {
-          label: 'Drupal',
-          value: 60,
-        },
-      ],
-    },
-  },
-  {
-    label: '列表',
-    icon: {
-      svg: 'format-list-checkbox',
-    },
-    content: {
-      type: 'media-list',
-      title: '热门文章',
-      elements: [
-        {
-          link: {
-            label: '使用 DevTools 对 Angular 前端应用性能分析优化',
-            href: '/node/417',
-          },
-          img: {
-            src: '../assets/images/showcase/blog1-large.jpeg',
-            alt: '',
-          },
-          changed: '2024-07-16',
+      {
+        label: '对象',
+        icon: {
+          svg: 'format-list-bulleted-type',
         },
-        {
-          link: {
-            label: '使用 takeUntil 操作符管理 Angular 组件的订阅',
-            href: '/node/415',
-          },
+        content: {
+          type: 'media-object',
           img: {
-            src: '../assets/images/showcase/blog2-large.jpeg',
-            alt: '',
+            src: '/assets/images/avatar/01.jpeg',
+            width: 45,
+            height: 45,
+            alt: 'logo',
           },
-          changed: '2024-07-16',
+          meta: '2024-07',
+          title: '前端开发工程师',
+          subTitle: 'Davyin',
+          content:
+            '专注于 Drupal 前端主题开发，目前主要从事于 Angular 前端开发，终身学习体验者，热衷于健身，希望明天比今天好一点。',
         },
-        {
-          link: {
-            label: '你应该了解的 Angular 最佳实践',
-            href: '2024-07-16',
-          },
-          img: {
-            src: '../assets/images/showcase/blog3-large.jpeg',
-            alt: '',
-          },
-          changed: '2024-07-16',
+      },
+      {
+        label: '感言',
+        icon: {
+          svg: 'format-wrap-square',
         },
-        {
-          link: {
-            label: 'Angular 5 rxjs 5.5.2 多个 http 并行 forkJoin 请求',
-            href: '2024-07-16',
-          },
+        content: {
+          type: 'testimonial',
+          style: 'style-v2',
+          title: 'Johnson',
+          subTitle: 'FrontEnd',
           img: {
-            src: '../assets/images/showcase/blog4-large.jpeg',
+            src: '/assets/images/avatar/01.jpeg',
             alt: '',
           },
-          changed: '2024-07-16',
+          body: '作为一名非专业的Web开发者，我曾经因为缺乏编码和设计技能而感到十分困惑。然而自从我开始使用Builder构建页面后，我的许多顾虑就消失了。',
         },
-      ],
-    },
-  },
-  {
-    label: '对象',
-    icon: {
-      svg: 'format-list-bulleted-type',
-    },
-    content: {
-      type: 'media-object',
-      img: {
-        src: '/assets/images/avatar/01.jpeg',
-        width: 45,
-        height: 45,
-        alt: 'logo',
-      },
-      meta: '2024-07',
-      title: '前端开发工程师',
-      subTitle: 'Davyin',
-      content:
-        '专注于 Drupal 前端主题开发，目前主要从事于 Angular 前端开发，终身学习体验者，热衷于健身，希望明天比今天好一点。',
-    },
-  },
-  {
-    label: '感言',
-    icon: {
-      svg: 'format-wrap-square',
-    },
-    content: {
-      type: 'testimonial',
-      style: 'style-v2',
-      title: 'Johnson',
-      subTitle: 'FrontEnd',
-      img: {
-        src: '/assets/images/avatar/01.jpeg',
-        alt: '',
       },
-      body: '作为一名非专业的Web开发者，我曾经因为缺乏编码和设计技能而感到十分困惑。然而自从我开始使用Builder构建页面后，我的许多顾虑就消失了。',
-    },
-  },
-  {
-    label: 'Lightbox',
-    icon: {
-      svg: 'view-carousel-outline',
-    },
-    content: {
-      type: 'inline-lightbox',
-      label: ['查看图片', 'Word 下载', 'PDF 预览'],
-      elements: [
-        {
-          src: '/assets/images/cases/porto1.jpg',
-        },
-        {
-          src: '/assets/images/cases/porto2.pdf',
-        },
-        {
-          src: '/assets/images/cases/porto3.pdf',
-        },
-      ],
-    },
+    ],
   },
 ];
diff --git a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts b/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts
index b32592cd1..e4bc69b80 100644
--- a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts
+++ b/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts
@@ -42,7 +42,7 @@ export class BlockToolbarComponent {
   }
 
   addBlock(addType: string, content: any, target: any): void {
-    this.builderSerivce.addBlock(addType, content, this.util.generatePath(target));
+    // this.builderSerivce.addBlock(addType, content, this.util.generatePath(target));
   }
 
   onCopy(widget: any): any {
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index f4eb099ff..a48acf662 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -60,6 +60,10 @@
           <app-iframe class="preview-iframe" [content]="{ url: '/preview' }" />
         </div>
       }
+
+      @if (builder.wigetsPicker$ | async; as wigetsPicker) {
+        <app-widget-picker [content]="wigetsPicker"></app-widget-picker>
+      }
     </div>
   </div>
 }
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.scss b/src/app/modules/builder/main/builder-list/builder-list.component.scss
index 2a2c9e8bc..a10a67f8f 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.scss
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.scss
@@ -17,6 +17,16 @@
       overflow: auto;
       padding-bottom: 150px;
     }
+    ::ng-deep {
+      .widget-picker {
+        position: absolute;
+        right: 40px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 999;
+        border-radius: 20px;
+      }
+    }
   }
   .component-item {
     position: relative;
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
index f8aabf68a..64ecb28b7 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.html
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -1,43 +1,69 @@
-<div class="widget-picker p-4" (mouseleave)="onLeave()">
+<div class="widget-picker p-2" (mouseleave)="onLeave()">
   @if (widgets) {
-    <div class="box grid grid-cols-12 gap-3">
-      @if (bcData) {
-        <div
-          #copy
-          class="item col-span-4"
-          (click)="onPasteData()"
-          (mouseenter)="onHover({ content: bcData }, copy)"
-          matRipple
-        >
+    @for (group of widgets; track $index) {
+      <div class="box flex flex-col justify-center items-center">
+        @if (bcData) {
           <div
-            class="inner flex flex-col justify-center items-center m-[2px] p-[6px] bg-primary hover:!text-gray-700"
+            #copy
+            class="item"
+            (click)="onPasteData()"
+            (mouseenter)="onHover({ content: bcData }, copy)"
+            matRipple
           >
-            <app-icon [content]="{ svg: 'content-paste' }" />
-            <div class="title">粘贴组件</div>
+            <div
+              class="inner flex flex-col justify-center items-center m-[2px] p-[6px] bg-primary hover:!text-gray-700"
+            >
+              <app-icon [content]="{ svg: 'content-paste' }" />
+              <div class="title">粘贴组件</div>
+            </div>
           </div>
-        </div>
-      }
-      @for (widget of widgets; track widget) {
-        <div
-          class="item col-span-4"
-          #item
-          (mouseenter)="onHover(widget, item)"
-          (click)="onSelect(widget.content)"
-          matRipple
-        >
+        }
+        <div class="item" #item (mouseenter)="onHover(group, item)" matRipple>
           <div class="inner flex flex-col justify-center items-center m-[2px] p-[6px]">
-            @if (widget.icon) {
-              <app-icon [content]="widget.icon" />
+            @if (group.icon) {
+              <app-icon [content]="group.icon" />
             }
-            <div class="title" title="{{ widget.label }}">
-              {{ widget.label }}
+            <div class="title" title="{{ group.label }}">
+              {{ group.label }}
             </div>
           </div>
         </div>
-      }
-    </div>
+      </div>
+    }
+    @if (help) {
+      <div class="help item" [matTooltip]="help.tooltip">
+        <app-btn
+          [content]="{
+            label: '',
+            mode: 'icon',
+            color: undefined,
+            href: help.link,
+            target: '_blank',
+            icon: { svg: 'help-circle', inline: true },
+          }"
+        />
+      </div>
+    }
   }
-  <div class="popup p-4 z-10 w-[560px] h-[300px]" #popup>
+  <div #groupPopup>
+    @if (group$ | async; as group) {
+      <div class="popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[400px]">
+        <h2>{{ group.label }}</h2>
+        <div class="grid grid-cols-12 gap-4 w-full">
+          @for (item of group.elements; track $index) {
+            <div
+              (click)="onSelect(item.content)"
+              class="col-span-4 border border-solid border-gray-300 rounded-md p-4 flex flex-col justify-center items-center cursor-pointer"
+            >
+              <app-icon [content]="item.icon"></app-icon>
+              {{ item.label }}
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>
+  <!-- <div class="popup p-4 z-10 w-[560px] h-[300px]" #popup>
     @if (widget$ | async; as widget) {
       <div class="hover-show w-full h-full flex justify-center items-center relative">
         @if (widget.preview) {
@@ -47,19 +73,5 @@
         }
       </div>
     }
-  </div>
-  @if (help) {
-    <div class="help absolute right-5 bottom-5" [matTooltip]="help.tooltip">
-      <app-btn
-        [content]="{
-          label: '',
-          mode: 'icon',
-          color: undefined,
-          href: help.link,
-          target: '_blank',
-          icon: { svg: 'help-circle', inline: true },
-        }"
-      />
-    </div>
-  }
+  </div> -->
 </div>
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
index 1b2143e6e..81efb7100 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
@@ -16,11 +16,7 @@
     }
   }
   .popup {
-    display: none;
-    position: fixed;
     border-radius: 4px;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
     box-sizing: border-box;
     &[data-popper-placement] {
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index 67bb49eae..eb6a6aae1 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -26,8 +26,9 @@ import { cloneDeep } from 'lodash-es';
 })
 export class WidgetPickerComponent implements OnInit, AfterViewInit {
   @Input() content: IWidgetPicker;
-  @ViewChild('popup', { static: false }) popup: ElementRef;
+  @ViewChild('groupPopup', { static: false }) groupPopup: ElementRef;
   public widget$ = new Subject<any>();
+  public group$ = new Subject<any>();
   help: any;
   popper: any;
 
@@ -84,7 +85,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
   }
 
   onLeave(): void {
-    this.widget$.next(false);
+    this.group$.next(false);
     this.popper.destroy();
   }
   copyLayoutLastChild(elements: any[], widget: any): any {
@@ -93,23 +94,14 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     return last;
   }
 
-  onHover(widget: any, ele: any): void {
-    if (this.popup?.nativeElement) {
+  onHover(group: any, ele: any): void {
+    if (this.groupPopup?.nativeElement) {
       const parentRect = this.ele.nativeElement.getBoundingClientRect();
       const widgetRect = ele.getBoundingClientRect();
       const offset = widgetRect.left - parentRect.left;
-      this.widget$.next(widget);
-      this.popper = createPopper(ele, this.popup.nativeElement, {
+      this.group$.next(group);
+      this.popper = createPopper(ele, this.groupPopup.nativeElement, {
         placement: 'left',
-        strategy: 'fixed',
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, offset + 24],
-            },
-          },
-        ],
       });
     }
   }
diff --git a/src/theme/component/builder/_builder-list.scss b/src/theme/component/builder/_builder-list.scss
index 87130a488..0a2142ca2 100644
--- a/src/theme/component/builder/_builder-list.scss
+++ b/src/theme/component/builder/_builder-list.scss
@@ -25,6 +25,10 @@
     #builder-list {
       @include scrollbar(mat.m2-get-color-from-palette($primary));
     }
+    .widget-picker {
+      background-color: mat.m2-get-color-from-palette($background, card);
+      @include mat.elevation(4, mat.m2-get-color-from-palette($background, tooltip), 0.5);
+    }
   }
   .preview {
     background-color: mat.m2-get-color-from-palette($foreground, elevation, 0.85);

From 9bcd60465ab04415cb6d3d6c734b9110505b1806 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Fri, 3 Jan 2025 16:48:09 +0800
Subject: [PATCH 05/35] feat: widget toolbar

---
 .../builder/data/widgets-for-builder.ts       | 21 +++++++++++++++
 .../widget-picker.component.html              | 23 ++++++++--------
 .../widget-picker/widget-picker.component.ts  |  3 +--
 src/theme/component/_builder.scss             | 22 ---------------
 .../component/builder/_builder-list.scss      | 27 ++++++++++++++++++-
 5 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/src/app/modules/builder/data/widgets-for-builder.ts b/src/app/modules/builder/data/widgets-for-builder.ts
index 07028802f..eadc5718e 100644
--- a/src/app/modules/builder/data/widgets-for-builder.ts
+++ b/src/app/modules/builder/data/widgets-for-builder.ts
@@ -1,6 +1,9 @@
 export const widgets = [
   {
     label: '基础',
+    icon: {
+      svg: 'format-letter-case',
+    },
     elements: [
       {
         label: '标题',
@@ -315,6 +318,9 @@ export const widgets = [
   },
   {
     label: '自定义',
+    icon: {
+      svg: 'view-dashboard',
+    },
     elements: [
       {
         label: 'Layout',
@@ -395,6 +401,9 @@ export const widgets = [
   },
   {
     label: '媒体',
+    icon: {
+      svg: 'image',
+    },
     elements: [
       {
         label: '图片',
@@ -607,6 +616,9 @@ export const widgets = [
   },
   {
     label: 'Box',
+    icon: {
+      svg: 'box',
+    },
     elements: [
       {
         label: 'Box',
@@ -829,6 +841,9 @@ export const widgets = [
   },
   {
     label: '图表',
+    icon: {
+      svg: 'chart-box',
+    },
     elements: [
       {
         label: '柱状图',
@@ -971,6 +986,9 @@ export const widgets = [
   },
   {
     label: '卡片',
+    icon: {
+      svg: 'credit-card-chip-outline',
+    },
     elements: [
       {
         label: '卡片',
@@ -1130,6 +1148,9 @@ export const widgets = [
   },
   {
     label: '其他',
+    icon: {
+      svg: 'debug-step-over',
+    },
     elements: [
       {
         label: '进步器',
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
index 64ecb28b7..bd31d079c 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.html
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -1,4 +1,4 @@
-<div class="widget-picker p-2" (mouseleave)="onLeave()">
+<div class="widget-picker py-4" (mouseleave)="onLeave()">
   @if (widgets) {
     @for (group of widgets; track $index) {
       <div class="box flex flex-col justify-center items-center">
@@ -7,7 +7,7 @@
             #copy
             class="item"
             (click)="onPasteData()"
-            (mouseenter)="onHover({ content: bcData }, copy)"
+            (mouseenter)="onHoverGroup({ content: bcData }, copy)"
             matRipple
           >
             <div
@@ -18,20 +18,17 @@
             </div>
           </div>
         }
-        <div class="item" #item (mouseenter)="onHover(group, item)" matRipple>
+        <div class="item" #item (mouseenter)="onHoverGroup(group, item)" matRipple>
           <div class="inner flex flex-col justify-center items-center m-[2px] p-[6px]">
             @if (group.icon) {
               <app-icon [content]="group.icon" />
             }
-            <div class="title" title="{{ group.label }}">
-              {{ group.label }}
-            </div>
           </div>
         </div>
       </div>
     }
     @if (help) {
-      <div class="help item" [matTooltip]="help.tooltip">
+      <div class="help box" [matTooltip]="help.tooltip">
         <app-btn
           [content]="{
             label: '',
@@ -47,16 +44,18 @@
   }
   <div #groupPopup>
     @if (group$ | async; as group) {
-      <div class="popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[400px]">
-        <h2>{{ group.label }}</h2>
+      <div
+        class="group-popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[400px] min-h-[360px]"
+      >
+        <h2 class="text-gray-400">{{ group.label }}</h2>
         <div class="grid grid-cols-12 gap-4 w-full">
           @for (item of group.elements; track $index) {
             <div
               (click)="onSelect(item.content)"
-              class="col-span-4 border border-solid border-gray-300 rounded-md p-4 flex flex-col justify-center items-center cursor-pointer"
+              class="col-span-4 border border-solid border-gray-200 rounded-md p-4 flex gap-3 flex-col justify-center items-center cursor-pointer item"
             >
-              <app-icon [content]="item.icon"></app-icon>
-              {{ item.label }}
+              <app-icon class="text-primary" [content]="item.icon"></app-icon>
+              <div class="text-sm opacity-90">{{ item.label }}</div>
             </div>
           }
         </div>
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index eb6a6aae1..005e4dbee 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -3,7 +3,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  Inject,
   Input,
   OnInit,
   ViewChild,
@@ -94,7 +93,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     return last;
   }
 
-  onHover(group: any, ele: any): void {
+  onHoverGroup(group: any, ele: any): void {
     if (this.groupPopup?.nativeElement) {
       const parentRect = this.ele.nativeElement.getBoundingClientRect();
       const widgetRect = ele.getBoundingClientRect();
diff --git a/src/theme/component/_builder.scss b/src/theme/component/_builder.scss
index 6607f40be..626181400 100644
--- a/src/theme/component/_builder.scss
+++ b/src/theme/component/_builder.scss
@@ -152,28 +152,6 @@ $dark-theme: mat.m2-define-dark-theme(
     }
   }
 
-  .widget-picker {
-    .popup {
-      @include mat.elevation(2, mat.m2-get-color-from-palette($background, hover), 0.4);
-      background-color: mat.m2-get-color-from-palette($background, card);
-      border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
-      .hover-show {
-        > app-dynamic-component {
-          > app-spacer {
-            background-color: mat.m2-get-color-from-palette($primary, 0.5);
-          }
-        }
-      }
-    }
-    .item {
-      .inner {
-        &:hover {
-          background-color: mat.m2-get-color-from-palette($primary, 0.1);
-        }
-      }
-    }
-  }
-
   .builder-template {
     .card {
       border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
diff --git a/src/theme/component/builder/_builder-list.scss b/src/theme/component/builder/_builder-list.scss
index 0a2142ca2..0d320db8a 100644
--- a/src/theme/component/builder/_builder-list.scss
+++ b/src/theme/component/builder/_builder-list.scss
@@ -27,7 +27,32 @@
     }
     .widget-picker {
       background-color: mat.m2-get-color-from-palette($background, card);
-      @include mat.elevation(4, mat.m2-get-color-from-palette($background, tooltip), 0.5);
+      @include mat.elevation(5, mat.m2-get-color-from-palette($background, tooltip), 0.5);
+      .box {
+        color: mat.m2-get-color-from-palette($primary, 600);
+      }
+      .group-popup,
+      .popup {
+        @include mat.elevation(2, mat.m2-get-color-from-palette($background, hover), 0.4);
+        background-color: mat.m2-get-color-from-palette($background, card);
+        border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+      }
+      .group-popup {
+        .item {
+          &:hover {
+            background-color: mat.m2-get-color-from-palette($primary, 0.1);
+          }
+        }
+      }
+      .popup {
+        .hover-show {
+          > app-dynamic-component {
+            > app-spacer {
+              background-color: mat.m2-get-color-from-palette($primary, 0.5);
+            }
+          }
+        }
+      }
     }
   }
   .preview {

From 7d0dd537bfd5ee47e338f34a75eab1da854ec72b Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Fri, 3 Jan 2025 17:54:16 +0800
Subject: [PATCH 06/35] refact: widget picker

---
 src/app/core/state/BuilderState.ts            |  2 +-
 .../builder-list/builder-list.component.scss  |  3 +-
 .../widget-picker.component.html              | 90 +++++++++----------
 .../widget-picker.component.scss              |  6 ++
 .../widget-picker/widget-picker.component.ts  | 37 ++++++--
 .../component/builder/_builder-list.scss      | 14 +--
 6 files changed, 85 insertions(+), 67 deletions(-)

diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index 6a9934334..5d8fc811b 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -30,7 +30,7 @@ export class BuilderState {
   public showcase$ = new Subject<IBuilderShowcase | false>();
   public themeMode = new BehaviorSubject<'light' | 'dark'>('light');
   public rightContent$ = new Subject<IBuilderDynamicContent>();
-  public wigetsPicker$ = new Subject<IWidgetPicker>();
+  public wigetsPicker$ = new Subject<IWidgetPicker | false>();
   public closeRightDrawer$ = new Subject<boolean>();
   public fixedChange$ = new Subject<boolean>();
   public animateDisable$ = new Subject<boolean>();
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.scss b/src/app/modules/builder/main/builder-list/builder-list.component.scss
index a10a67f8f..df2b7adab 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.scss
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.scss
@@ -20,11 +20,10 @@
     ::ng-deep {
       .widget-picker {
         position: absolute;
-        right: 40px;
+        right: 0;
         top: 50%;
         transform: translateY(-50%);
         z-index: 999;
-        border-radius: 20px;
       }
     }
   }
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
index bd31d079c..885b89623 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.html
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -1,58 +1,48 @@
-<div class="widget-picker py-4" (mouseleave)="onLeave()">
+<div class="widget-picker p-5" (mouseleave)="onLeave()">
   @if (widgets) {
-    @for (group of widgets; track $index) {
-      <div class="box flex flex-col justify-center items-center">
-        @if (bcData) {
-          <div
-            #copy
-            class="item"
-            (click)="onPasteData()"
-            (mouseenter)="onHoverGroup({ content: bcData }, copy)"
-            matRipple
-          >
-            <div
-              class="inner flex flex-col justify-center items-center m-[2px] p-[6px] bg-primary hover:!text-gray-700"
-            >
-              <app-icon [content]="{ svg: 'content-paste' }" />
-              <div class="title">粘贴组件</div>
+    <div class="widget-wrapper" #wrapper>
+      @for (group of widgets; track $index) {
+        <div
+          class="box flex flex-col justify-center items-center"
+          (mouseenter)="onHoverGroup(group, wrapper)"
+        >
+          <div class="item" #item matRipple>
+            <div class="inner flex flex-col justify-center items-center m-[2px] p-[6px]">
+              @if (group.icon) {
+                <app-icon [content]="group.icon" />
+              }
             </div>
           </div>
-        }
-        <div class="item" #item (mouseenter)="onHoverGroup(group, item)" matRipple>
-          <div class="inner flex flex-col justify-center items-center m-[2px] p-[6px]">
-            @if (group.icon) {
-              <app-icon [content]="group.icon" />
-            }
-          </div>
         </div>
-      </div>
-    }
-    @if (help) {
-      <div class="help box" [matTooltip]="help.tooltip">
-        <app-btn
-          [content]="{
-            label: '',
-            mode: 'icon',
-            color: undefined,
-            href: help.link,
-            target: '_blank',
-            icon: { svg: 'help-circle', inline: true },
-          }"
-        />
-      </div>
-    }
+      }
+      @if (help) {
+        <div class="help box" [matTooltip]="help.tooltip">
+          <app-btn
+            [content]="{
+              label: '',
+              mode: 'icon',
+              color: undefined,
+              href: help.link,
+              target: '_blank',
+              icon: { svg: 'help-circle', inline: true },
+            }"
+          />
+        </div>
+      }
+    </div>
   }
   <div #groupPopup>
     @if (group$ | async; as group) {
       <div
-        class="group-popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[400px] min-h-[360px]"
+        class="group-popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[280px] min-h-[360px]"
       >
         <h2 class="text-gray-400">{{ group.label }}</h2>
         <div class="grid grid-cols-12 gap-4 w-full">
           @for (item of group.elements; track $index) {
             <div
+              (mouseenter)="onHoverWidget(item, groupPopup)"
               (click)="onSelect(item.content)"
-              class="col-span-4 border border-solid border-gray-200 rounded-md p-4 flex gap-3 flex-col justify-center items-center cursor-pointer item"
+              class="col-span-6 border border-solid border-gray-200 rounded-md p-4 flex gap-3 flex-col justify-center items-center cursor-pointer item"
             >
               <app-icon class="text-primary" [content]="item.icon"></app-icon>
               <div class="text-sm opacity-90">{{ item.label }}</div>
@@ -62,15 +52,17 @@ <h2 class="text-gray-400">{{ group.label }}</h2>
       </div>
     }
   </div>
-  <!-- <div class="popup p-4 z-10 w-[560px] h-[300px]" #popup>
+  <div class="popup" #popup>
     @if (widget$ | async; as widget) {
-      <div class="hover-show w-full h-full flex justify-center items-center relative">
-        @if (widget.preview) {
-          <img [src]="widget.preview" alt="" />
-        } @else {
-          <app-dynamic-component [inputs]="widget.content" />
-        }
+      <div class="p-4 z-10 w-[560px] h-[300px]">
+        <div class="hover-show w-full h-full flex justify-center items-center relative">
+          @if (widget.preview) {
+            <img [src]="widget.preview" alt="" />
+          } @else {
+            <app-dynamic-component [inputs]="widget.content" />
+          }
+        </div>
       </div>
     }
-  </div> -->
+  </div>
 </div>
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
index 81efb7100..7c8396c6b 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
@@ -1,5 +1,8 @@
 @import '../../../../../theme/variable/breakpoint';
 .widget-picker {
+  .widget-wrapper {
+    border-radius: 20px;
+  }
   .item {
     position: relative;
     .title {
@@ -15,6 +18,9 @@
       cursor: pointer;
     }
   }
+  .group-popup {
+    border-radius: 12px;
+  }
   .popup {
     border-radius: 4px;
     overflow: hidden;
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index 005e4dbee..b19edbd8c 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -26,12 +26,12 @@ import { cloneDeep } from 'lodash-es';
 export class WidgetPickerComponent implements OnInit, AfterViewInit {
   @Input() content: IWidgetPicker;
   @ViewChild('groupPopup', { static: false }) groupPopup: ElementRef;
+  @ViewChild('popup', { static: false }) widgetPopup: ElementRef;
   public widget$ = new Subject<any>();
   public group$ = new Subject<any>();
   help: any;
   popper: any;
 
-  public bcData: any;
   ele = inject(ElementRef);
   widgets = inject(WIDGETS);
   dialog = inject(MatDialog);
@@ -44,16 +44,10 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
       widgetPicker: { help },
     } = this.builderService.builderConfig;
     this.help = help;
-    this.bcData = this.storage.retrieve(this.builder.COPYWIDGETKEY);
   }
 
   ngAfterViewInit(): void {}
 
-  onPasteData(): void {
-    this.onSelect(this.bcData);
-    this.storage.clear(this.builder.COPYWIDGETKEY);
-  }
-
   onSelect(widget: any): void {
     const { addType, path, content } = this.content;
     const data = cloneDeep(content);
@@ -86,6 +80,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
   onLeave(): void {
     this.group$.next(false);
     this.popper.destroy();
+    this.builder.wigetsPicker$.next(false);
   }
   copyLayoutLastChild(elements: any[], widget: any): any {
     const last = Object.assign({}, elements[elements.length - 1]);
@@ -95,12 +90,36 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
 
   onHoverGroup(group: any, ele: any): void {
     if (this.groupPopup?.nativeElement) {
+      this.group$.next(group);
+      this.popper = createPopper(ele, this.groupPopup.nativeElement, {
+        placement: 'left',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 4],
+            },
+          },
+        ],
+      });
+    }
+  }
+  onHoverWidget(widget: any, ele: any): void {
+    if (this.widgetPopup?.nativeElement) {
       const parentRect = this.ele.nativeElement.getBoundingClientRect();
       const widgetRect = ele.getBoundingClientRect();
       const offset = widgetRect.left - parentRect.left;
-      this.group$.next(group);
-      this.popper = createPopper(ele, this.groupPopup.nativeElement, {
+      this.widget$.next(widget);
+      this.popper = createPopper(ele, this.widgetPopup.nativeElement, {
         placement: 'left',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 2],
+            },
+          },
+        ],
       });
     }
   }
diff --git a/src/theme/component/builder/_builder-list.scss b/src/theme/component/builder/_builder-list.scss
index 0d320db8a..f822d67bb 100644
--- a/src/theme/component/builder/_builder-list.scss
+++ b/src/theme/component/builder/_builder-list.scss
@@ -26,16 +26,18 @@
       @include scrollbar(mat.m2-get-color-from-palette($primary));
     }
     .widget-picker {
-      background-color: mat.m2-get-color-from-palette($background, card);
-      @include mat.elevation(5, mat.m2-get-color-from-palette($background, tooltip), 0.5);
-      .box {
-        color: mat.m2-get-color-from-palette($primary, 600);
+      .widget-wrapper {
+        background-color: mat.m2-get-color-from-palette($background, card);
+        @include mat.elevation(5, mat.m2-get-color-from-palette($background, tooltip), 0.5);
+        .box {
+          color: mat.m2-get-color-from-palette($primary, 600);
+        }
       }
       .group-popup,
       .popup {
-        @include mat.elevation(2, mat.m2-get-color-from-palette($background, hover), 0.4);
+        @include mat.elevation(10, mat.m2-get-color-from-palette($background, hover), 0.4);
         background-color: mat.m2-get-color-from-palette($background, card);
-        border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+        border: 1px solid mat.m2-get-color-from-palette($foreground, divider, 0.1);
       }
       .group-popup {
         .item {

From 9848cb1ad64c6195cc3ae067a760b65517d48420 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Sun, 5 Jan 2025 15:51:37 +0800
Subject: [PATCH 07/35] refact: toolbar

---
 .../builder/data/widgets-for-builder.ts       | 291 +++++++++---------
 .../builder-list/builder-list.component.html  |   5 +-
 .../builder-list/builder-list.component.scss  |   5 -
 .../widget-picker.component.html              |  25 +-
 .../widget-picker.component.scss              |  34 +-
 .../widget-picker/widget-picker.component.ts  |  47 ++-
 .../component-toolbar.component.html          |   9 +-
 .../widgets/divider/divider.component.html    |   2 +-
 .../component/builder/_builder-list.scss      |   4 +-
 9 files changed, 227 insertions(+), 195 deletions(-)

diff --git a/src/app/modules/builder/data/widgets-for-builder.ts b/src/app/modules/builder/data/widgets-for-builder.ts
index eadc5718e..3286508e2 100644
--- a/src/app/modules/builder/data/widgets-for-builder.ts
+++ b/src/app/modules/builder/data/widgets-for-builder.ts
@@ -614,6 +614,151 @@ export const widgets = [
       },
     ],
   },
+  {
+    label: '图表',
+    icon: {
+      svg: 'chart-box',
+    },
+    elements: [
+      {
+        label: '柱状图',
+        icon: {
+          svg: 'chart-bar',
+        },
+        preview: '/assets/images/builder/widgets/bar.png',
+        content: {
+          type: 'chart',
+          title: {
+            text: '年度活动金额预算',
+            subtext: '南宁',
+          },
+          legend: {
+            bottom: '10px',
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          dataset: {
+            source: [
+              ['红包预算', '2020', '2021', '2022'],
+              ['第一季度', 4180, 9056, 7942],
+              ['第二季度', 7908, 9032, 8471],
+              ['第三季度', 4785, 7987, 4172],
+            ],
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'bar',
+            },
+            {
+              type: 'bar',
+            },
+            {
+              type: 'bar',
+            },
+          ],
+        },
+      },
+      {
+        label: '折线图',
+        icon: {
+          svg: 'chart-line',
+        },
+        preview: '/assets/images/builder/widgets/line.png',
+        content: {
+          type: 'chart',
+          title: {
+            text: '年度活动金额预算',
+            subtext: '南宁',
+          },
+          legend: {
+            bottom: '10px',
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          dataset: {
+            source: [
+              ['红包预算', '2020', '2021', '2022'],
+              ['第一季度', 4180, 9056, 7942],
+              ['第二季度', 7908, 9032, 8471],
+              ['第三季度', 4785, 7987, 4172],
+            ],
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'line',
+            },
+            {
+              type: 'line',
+            },
+            {
+              type: 'line',
+            },
+          ],
+        },
+      },
+      {
+        label: '饼图',
+        icon: {
+          svg: 'chart-pie',
+        },
+        preview: '/assets/images/builder/widgets/pie.png',
+        content: {
+          type: 'chart',
+          title: {
+            text: '金额预算占比',
+            subtext: '2022年9月',
+            left: 'center',
+          },
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: {},
+          dataset: {
+            source: [
+              ['预算', '费用'],
+              ['大额红包总金额', 398],
+              ['小额红包总金额', 916],
+              ['提成总额', 370],
+            ],
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%',
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
   {
     label: 'Box',
     icon: {
@@ -839,151 +984,7 @@ export const widgets = [
       },
     ],
   },
-  {
-    label: '图表',
-    icon: {
-      svg: 'chart-box',
-    },
-    elements: [
-      {
-        label: '柱状图',
-        icon: {
-          svg: 'chart-bar',
-        },
-        preview: '/assets/images/builder/widgets/bar.png',
-        content: {
-          type: 'chart',
-          title: {
-            text: '年度活动金额预算',
-            subtext: '南宁',
-          },
-          legend: {
-            bottom: '10px',
-          },
-          tooltip: {
-            trigger: 'axis',
-          },
-          dataset: {
-            source: [
-              ['红包预算', '2020', '2021', '2022'],
-              ['第一季度', 4180, 9056, 7942],
-              ['第二季度', 7908, 9032, 8471],
-              ['第三季度', 4785, 7987, 4172],
-            ],
-          },
-          xAxis: {
-            type: 'category',
-          },
-          yAxis: {},
-          series: [
-            {
-              type: 'bar',
-            },
-            {
-              type: 'bar',
-            },
-            {
-              type: 'bar',
-            },
-          ],
-        },
-      },
-      {
-        label: '折线图',
-        icon: {
-          svg: 'chart-line',
-        },
-        preview: '/assets/images/builder/widgets/line.png',
-        content: {
-          type: 'chart',
-          title: {
-            text: '年度活动金额预算',
-            subtext: '南宁',
-          },
-          legend: {
-            bottom: '10px',
-          },
-          tooltip: {
-            trigger: 'axis',
-          },
-          dataset: {
-            source: [
-              ['红包预算', '2020', '2021', '2022'],
-              ['第一季度', 4180, 9056, 7942],
-              ['第二季度', 7908, 9032, 8471],
-              ['第三季度', 4785, 7987, 4172],
-            ],
-          },
-          xAxis: {
-            type: 'category',
-          },
-          yAxis: {},
-          series: [
-            {
-              type: 'line',
-            },
-            {
-              type: 'line',
-            },
-            {
-              type: 'line',
-            },
-          ],
-        },
-      },
-      {
-        label: '饼图',
-        icon: {
-          svg: 'chart-pie',
-        },
-        preview: '/assets/images/builder/widgets/pie.png',
-        content: {
-          type: 'chart',
-          title: {
-            text: '金额预算占比',
-            subtext: '2022年9月',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-          },
-          xAxis: {
-            type: 'category',
-          },
-          yAxis: {},
-          dataset: {
-            source: [
-              ['预算', '费用'],
-              ['大额红包总金额', 398],
-              ['小额红包总金额', 916],
-              ['提成总额', 370],
-            ],
-          },
-          series: [
-            {
-              name: 'Access From',
-              type: 'pie',
-              radius: '50%',
-              label: {
-                formatter: '{b}: {d}%',
-              },
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)',
-                },
-              },
-            },
-          ],
-        },
-      },
-    ],
-  },
+
   {
     label: '卡片',
     icon: {
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index a48acf662..bd9651b9a 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -60,9 +60,8 @@
           <app-iframe class="preview-iframe" [content]="{ url: '/preview' }" />
         </div>
       }
-
-      @if (builder.wigetsPicker$ | async; as wigetsPicker) {
-        <app-widget-picker [content]="wigetsPicker"></app-widget-picker>
+      @if (page.body.length > 0) {
+        <app-widget-picker></app-widget-picker>
       }
     </div>
   </div>
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.scss b/src/app/modules/builder/main/builder-list/builder-list.component.scss
index df2b7adab..a9aa6824c 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.scss
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.scss
@@ -19,11 +19,6 @@
     }
     ::ng-deep {
       .widget-picker {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 999;
       }
     }
   }
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
index 885b89623..7c73dddd8 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.html
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -1,6 +1,6 @@
 <div class="widget-picker p-5" (mouseleave)="onLeave()">
   @if (widgets) {
-    <div class="widget-wrapper" #wrapper>
+    <div class="widget-wrapper py-4" #wrapper>
       @for (group of widgets; track $index) {
         <div
           class="box flex flex-col justify-center items-center"
@@ -16,6 +16,7 @@
         </div>
       }
       @if (help) {
+        <app-divider></app-divider>
         <div class="help box" [matTooltip]="help.tooltip">
           <app-btn
             [content]="{
@@ -36,7 +37,7 @@
       <div
         class="group-popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[280px] min-h-[360px]"
       >
-        <h2 class="text-gray-400">{{ group.label }}</h2>
+        <h2>{{ group.label }}</h2>
         <div class="grid grid-cols-12 gap-4 w-full">
           @for (item of group.elements; track $index) {
             <div
@@ -52,15 +53,19 @@ <h2 class="text-gray-400">{{ group.label }}</h2>
       </div>
     }
   </div>
-  <div class="popup" #popup>
+  <div #popup>
     @if (widget$ | async; as widget) {
-      <div class="p-4 z-10 w-[560px] h-[300px]">
-        <div class="hover-show w-full h-full flex justify-center items-center relative">
-          @if (widget.preview) {
-            <img [src]="widget.preview" alt="" />
-          } @else {
-            <app-dynamic-component [inputs]="widget.content" />
-          }
+      <div class="p-3">
+        <div class="widget-popup">
+          <div class="p-4 z-10 w-[560px] h-[300px]">
+            <div class="hover-show w-full h-full flex justify-center items-center relative">
+              @if (widget.preview) {
+                <img [src]="widget.preview" alt="" />
+              } @else {
+                <app-dynamic-component [inputs]="widget.content" />
+              }
+            </div>
+          </div>
         </div>
       </div>
     }
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
index 7c8396c6b..190278574 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
@@ -1,28 +1,30 @@
 @import '../../../../../theme/variable/breakpoint';
 .widget-picker {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 999;
+  width: 48px;
   .widget-wrapper {
     border-radius: 20px;
-  }
-  .item {
-    position: relative;
-    .title {
-      font-size: 14px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      text-align: center;
-    }
-    .inner {
-      border-radius: 4px;
-      cursor: pointer;
+    .item {
+      position: relative;
+      .inner {
+        border-radius: 4px;
+        cursor: pointer;
+      }
     }
   }
   .group-popup {
+    position: relative;
+    right: 10px;
+  }
+  .group-popup,
+  .widget-popup {
     border-radius: 12px;
   }
-  .popup {
-    border-radius: 4px;
+  .widget-popup {
     overflow: hidden;
     box-sizing: border-box;
     &[data-popper-placement] {
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index b19edbd8c..0b8e64a70 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -24,13 +24,14 @@ import { cloneDeep } from 'lodash-es';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WidgetPickerComponent implements OnInit, AfterViewInit {
-  @Input() content: IWidgetPicker;
+  @Input() content: IWidgetPicker | false;
   @ViewChild('groupPopup', { static: false }) groupPopup: ElementRef;
   @ViewChild('popup', { static: false }) widgetPopup: ElementRef;
   public widget$ = new Subject<any>();
   public group$ = new Subject<any>();
   help: any;
-  popper: any;
+  groupPopper: any;
+  widgetPopper: any;
 
   ele = inject(ElementRef);
   widgets = inject(WIDGETS);
@@ -46,9 +47,16 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     this.help = help;
   }
 
-  ngAfterViewInit(): void {}
+  ngAfterViewInit(): void {
+    this.builder.wigetsPicker$.subscribe(content => {
+      this.content = content;
+    });
+  }
 
   onSelect(widget: any): void {
+    if (!this.content) {
+      return;
+    }
     const { addType, path, content } = this.content;
     const data = cloneDeep(content);
     const widgetContent = cloneDeep(widget);
@@ -79,7 +87,13 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
 
   onLeave(): void {
     this.group$.next(false);
-    this.popper.destroy();
+    this.widget$.next(false);
+    if (this.groupPopper) {
+      this.groupPopper.destroy();
+    }
+    if (this.widgetPopper) {
+      this.widgetPopper.destroy();
+    }
     this.builder.wigetsPicker$.next(false);
   }
   copyLayoutLastChild(elements: any[], widget: any): any {
@@ -90,9 +104,18 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
 
   onHoverGroup(group: any, ele: any): void {
     if (this.groupPopup?.nativeElement) {
+      this.group$.next(false);
+      this.widget$.next(false);
+      if (this.groupPopper) {
+        this.groupPopper.destroy();
+      }
+      if (this.widgetPopper) {
+        this.widgetPopper.destroy();
+      }
       this.group$.next(group);
-      this.popper = createPopper(ele, this.groupPopup.nativeElement, {
-        placement: 'left',
+      // debugger;
+      this.groupPopper = createPopper(ele, this.groupPopup.nativeElement, {
+        placement: 'left-start',
         modifiers: [
           {
             name: 'offset',
@@ -102,25 +125,27 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
           },
         ],
       });
+      this.groupPopper.update();
     }
   }
   onHoverWidget(widget: any, ele: any): void {
     if (this.widgetPopup?.nativeElement) {
-      const parentRect = this.ele.nativeElement.getBoundingClientRect();
-      const widgetRect = ele.getBoundingClientRect();
-      const offset = widgetRect.left - parentRect.left;
+      if (this.widgetPopper) {
+        this.widgetPopper.destroy();
+      }
       this.widget$.next(widget);
-      this.popper = createPopper(ele, this.widgetPopup.nativeElement, {
+      this.widgetPopper = createPopper(ele, this.widgetPopup.nativeElement, {
         placement: 'left',
         modifiers: [
           {
             name: 'offset',
             options: {
-              offset: [0, 2],
+              offset: [0, 10],
             },
           },
         ],
       });
+      this.widgetPopper.update();
     }
   }
 }
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index 2297d000a..f656fa05a 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -32,7 +32,7 @@
         }"
       />
     </div>
-    <div class="item" matTooltip="复制JSON" (click)="onCopy()">
+    <div class="item" matTooltip="复制JSON" matTooltipPosition="above" (click)="onCopy()">
       <app-btn
         [content]="{
           label: '',
@@ -43,7 +43,12 @@
       />
     </div>
     @if (bcData) {
-      <div class="item" matTooltip="粘贴复制的组件到下面" (click)="onPaste($event, bcData)">
+      <div
+        class="item"
+        matTooltip="粘贴复制的组件到下面"
+        matTooltipPosition="above"
+        (click)="onPaste($event, bcData)"
+      >
         <app-btn
           [content]="{
             label: '',
diff --git a/src/app/uiux/widgets/divider/divider.component.html b/src/app/uiux/widgets/divider/divider.component.html
index 2bbd91d02..46142fccb 100644
--- a/src/app/uiux/widgets/divider/divider.component.html
+++ b/src/app/uiux/widgets/divider/divider.component.html
@@ -1 +1 @@
-<mat-divider [inset]="content.inset" [vertical]="content.vertical" />
+<mat-divider [inset]="content?.inset" [vertical]="content?.vertical" />
diff --git a/src/theme/component/builder/_builder-list.scss b/src/theme/component/builder/_builder-list.scss
index f822d67bb..bb3d9a655 100644
--- a/src/theme/component/builder/_builder-list.scss
+++ b/src/theme/component/builder/_builder-list.scss
@@ -34,7 +34,7 @@
         }
       }
       .group-popup,
-      .popup {
+      .widget-popup {
         @include mat.elevation(10, mat.m2-get-color-from-palette($background, hover), 0.4);
         background-color: mat.m2-get-color-from-palette($background, card);
         border: 1px solid mat.m2-get-color-from-palette($foreground, divider, 0.1);
@@ -46,7 +46,7 @@
           }
         }
       }
-      .popup {
+      .widget-popup {
         .hover-show {
           > app-dynamic-component {
             > app-spacer {

From 3852c2e0a5f9c628444a07fe9a14a9eb894ed7d7 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Sun, 5 Jan 2025 15:55:26 +0800
Subject: [PATCH 08/35] quick fix

---
 .../builder/main/widget-picker/widget-picker.component.ts   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index 0b8e64a70..98fce1cf4 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -14,7 +14,6 @@ import { WIDGETS } from '@core/token/token-providers';
 import { Subject } from 'rxjs';
 import { createPopper } from '@popperjs/core';
 import { LocalStorageService } from 'ngx-webstorage';
-import { MatDialog } from '@angular/material/dialog';
 import { BuilderService } from '@core/service/builder.service';
 import { cloneDeep } from 'lodash-es';
 @Component({
@@ -35,7 +34,6 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
 
   ele = inject(ElementRef);
   widgets = inject(WIDGETS);
-  dialog = inject(MatDialog);
   builder = inject(BuilderState);
   storage = inject(LocalStorageService);
   builderService = inject(BuilderService);
@@ -64,7 +62,6 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     // add widget from layout builder toolbar
     if (addType === 'widget') {
       this.builder.updatePageContentByPath(path, widgetContent, 'add');
-      this.dialog.closeAll();
       return;
     }
 
@@ -74,7 +71,6 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
         this.copyLayoutLastChild(data.elements, widgetContent),
         'add'
       );
-      this.dialog.closeAll();
       return;
     }
 
@@ -82,7 +78,6 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     const lists = [...data.elements];
     lists.splice(lists.length, 0, widgetContent);
     this.builder.updatePageContentByPath(`${path}.elements`, lists);
-    this.dialog.closeAll();
   }
 
   onLeave(): void {
@@ -113,7 +108,6 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
         this.widgetPopper.destroy();
       }
       this.group$.next(group);
-      // debugger;
       this.groupPopper = createPopper(ele, this.groupPopup.nativeElement, {
         placement: 'left-start',
         modifiers: [

From 43e0071bf5f3fa728c03534cd3826996a0c10061 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Sun, 5 Jan 2025 17:10:16 +0800
Subject: [PATCH 09/35] fix: matSelct defaultValue

---
 .../form/formly-type/mat-select/mat-select.component.ts     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/uiux/combs/form/formly-type/mat-select/mat-select.component.ts b/src/app/uiux/combs/form/formly-type/mat-select/mat-select.component.ts
index 8acdbaa1d..485826bc8 100644
--- a/src/app/uiux/combs/form/formly-type/mat-select/mat-select.component.ts
+++ b/src/app/uiux/combs/form/formly-type/mat-select/mat-select.component.ts
@@ -38,7 +38,11 @@ export class MatSelectComponent extends FieldType<FieldTypeConfig> implements On
     if (this.fieldConfig.props.api) {
       this.getOptionsFromApi();
     } else {
-      this.matOptions = this.to.options || [];
+      this.matOptions = this.props.options || [];
+      const { defaultValue } = this.fieldConfig;
+      if (defaultValue) {
+        this.formControl.setValue(defaultValue);
+      }
       this.filteredOptions.next(this.matOptions.slice());
     }
 

From c55108dd49aea4dbb5ce96b23db15cce303f1d22 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Sun, 5 Jan 2025 22:19:31 +0800
Subject: [PATCH 10/35] fix: widget toolbar

---
 .../builder/layout-builder/layout-builder.component.ts       | 5 ++++-
 .../builder/main/widget-picker/widget-picker.component.html  | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
index 4f94d1907..638e1ec54 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -16,6 +16,7 @@ import { BuilderService } from '@core/service/builder.service';
 import { IPage } from '@core/interface/IAppConfig';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ScreenService } from '@core/service/screen.service';
+import { BuilderState } from '@core/state/BuilderState';
 
 @Component({
   selector: 'app-layout-builder',
@@ -29,9 +30,10 @@ export class LayoutBuilderComponent implements OnInit, AfterViewInit {
 
   util = inject(UtilitiesService);
   ele = inject(ElementRef);
-  builderSerivce = inject(BuilderService);
+  builder = inject(BuilderState);
   destroyRef = inject(DestroyRef);
   screenService = inject(ScreenService);
+  builderSerivce = inject(BuilderService);
   constructor(
     @Inject(IS_BUILDER_MODE) public isBuilderMode$: Observable<boolean>,
     @Inject(BUILDER_CURRENT_PAGE) public currentPage$: Observable<IPage>
@@ -52,6 +54,7 @@ export class LayoutBuilderComponent implements OnInit, AfterViewInit {
   }
 
   addBlock(addType: string, content: any, target: any): void {
+    this.builder.closeRightDrawer$.next(true);
     this.builderSerivce.addBlock(addType, content, this.util.generatePath(target));
   }
 
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
index 7c73dddd8..ec40f4f48 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.html
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -32,7 +32,7 @@
       }
     </div>
   }
-  <div #groupPopup>
+  <div #groupPopup class="absolute">
     @if (group$ | async; as group) {
       <div
         class="group-popup p-4 z-10 flex-col justify-start items-start whitespace-nowrap w-[280px] min-h-[360px]"
@@ -53,7 +53,7 @@ <h2>{{ group.label }}</h2>
       </div>
     }
   </div>
-  <div #popup>
+  <div #popup class="absolute">
     @if (widget$ | async; as widget) {
       <div class="p-3">
         <div class="widget-popup">

From 4e43331d0fee5a14ed1f8277fbd381a7d343701d Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Sun, 5 Jan 2025 23:12:30 +0800
Subject: [PATCH 11/35] refact: block toolbar

---
 .../layout-builder.component.html             | 10 +++++--
 .../layout-builder.component.scss             | 15 ++++------
 .../layout-builder.component.ts               | 28 +++++++++++++++++++
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index 064a188d7..e75ac4991 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -7,6 +7,7 @@
   @let horizontal = content.horizontal;
   @let alignItems = content.alignItems;
   @let wrapperClass = content.wrapperClass;
+  @let isBuilderMode = isBuilderMode$ | async;
 
   <div class="layout-builder relative" [ngClass]="classes" [ngStyle]="style">
     <div
@@ -34,7 +35,7 @@
           }} md:col-span-{{ row.md }} lg:col-span-{{ row.lg }}"
           [attr.data-path]="'elements.' + i"
         >
-          @if (isBuilderMode$ | async) {
+          @if (isBuilderMode) {
             <div class="toolbar hidden absolute z-50">
               <app-layout-toolbar
                 [lbContent]="content"
@@ -78,11 +79,14 @@
               }
               @for (item of elements; track item; let index = $index) {
                 <div
+                  #widget
+                  (mouseleave)="onLeaveWidget(isBuilderMode)"
+                  (mouseenter)="onHoverWidget(widget, isBuilderMode)"
                   class="item relative box-border item-{{ item.type }} col-span-12"
                   [attr.data-path]="'elements.' + index"
                 >
-                  <app-dynamic-component [inputs]="item" [index]="index" />
-                  @if (isBuilderMode$ | async) {
+                  <app-dynamic-component class="component" [inputs]="item" [index]="index" />
+                  @if (isBuilderMode) {
                     <div class="block-toolbar" #action>
                       <button mat-raised-button (click)="addBlock('widget', content, action)">
                         <div class="flex">
diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.scss b/src/app/modules/builder/layout-builder/layout-builder.component.scss
index 32b56d2fa..74d3ab906 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.scss
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.scss
@@ -24,17 +24,12 @@
           }
         }
         .block-toolbar {
-          position: absolute;
-          left: 50%;
-          bottom: -34px;
-          transform: translateX(-50%);
-          z-index: 99;
-          display: none;
+          opacity: 0;
+          height: 0;
           white-space: nowrap;
-        }
-        &:hover {
-          .block-toolbar {
-            display: block;
+          &[data-popper-placement] {
+            opacity: 1;
+            height: auto;
           }
         }
       }
diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
index 638e1ec54..1df2e1b73 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -17,6 +17,7 @@ import { IPage } from '@core/interface/IAppConfig';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ScreenService } from '@core/service/screen.service';
 import { BuilderState } from '@core/state/BuilderState';
+import { createPopper } from '@popperjs/core';
 
 @Component({
   selector: 'app-layout-builder',
@@ -34,6 +35,7 @@ export class LayoutBuilderComponent implements OnInit, AfterViewInit {
   destroyRef = inject(DestroyRef);
   screenService = inject(ScreenService);
   builderSerivce = inject(BuilderService);
+  popup: any;
   constructor(
     @Inject(IS_BUILDER_MODE) public isBuilderMode$: Observable<boolean>,
     @Inject(BUILDER_CURRENT_PAGE) public currentPage$: Observable<IPage>
@@ -66,4 +68,30 @@ export class LayoutBuilderComponent implements OnInit, AfterViewInit {
       this.util.initAnimate(item, animateEle, this.ele.nativeElement);
     });
   }
+
+  onHoverWidget(widget: any, isBuilderMode: boolean | null): void {
+    if (isBuilderMode) {
+      const component = widget.querySelector('.component');
+      const popup = widget.querySelector('.block-toolbar');
+      this.popup = createPopper(component, popup, {
+        placement: 'bottom',
+        strategy: 'fixed',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [1, 0],
+            },
+          },
+        ],
+      });
+      this.popup.update();
+    }
+  }
+
+  onLeaveWidget(isBuilderMode: boolean | null): void {
+    if (isBuilderMode) {
+      this.popup?.destroy();
+    }
+  }
 }

From 28728487aad9795f2ba5f4037c6477ecf4ab839e Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Mon, 6 Jan 2025 16:02:52 +0800
Subject: [PATCH 12/35] test: just render in bowser

---
 .../modules/render/block/block.component.ts   |  2 +-
 .../dynamic-component.component.html          |  2 +-
 .../dynamic-component.component.ts            | 67 +++++++++----------
 3 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/app/modules/render/block/block.component.ts b/src/app/modules/render/block/block.component.ts
index f766d8af1..2b29334da 100644
--- a/src/app/modules/render/block/block.component.ts
+++ b/src/app/modules/render/block/block.component.ts
@@ -25,7 +25,7 @@ import { ScreenService } from '@core/service/screen.service';
   selector: 'app-block',
   templateUrl: './block.component.html',
   styleUrls: ['./block.component.scss'],
-  host: { ngSkipHydration: 'true' },
+  // host: { ngSkipHydration: 'true' },
   providers: [
     {
       provide: PAGE_CONTENT,
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index 41bdbdf55..539a4d58e 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -14,7 +14,7 @@
   }
 
   <div class="{{ content?.fullWidth ? '' : 'container' }}">
-    <ng-template #componentContainer />
+    <ng-container #componentContainer />
   </div>
 
   @if (content?.spacer) {
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index 69d9f1eda..a32595b6c 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -87,43 +87,42 @@ export class DynamicComponentComponent
   }
 
   async loadComponent(): Promise<void> {
-    const type = this.inputs.type
-      ? this.inputs.type
-      : this.inputs.content
-        ? this.inputs.content.type
-        : null;
-    if (!type) {
-      return;
-    }
-
-    this.container.clear();
+    if (this.screenService.isPlatformBrowser()) {
+      const type = this.inputs.type
+        ? this.inputs.type
+        : this.inputs.content
+          ? this.inputs.content.type
+          : null;
+      if (!type) {
+        return;
+      }
+      this.container.clear();
 
-    const componentType = await this.componentService.getComponentType(type);
-    const hostElement = this.renderer.createElement('div');
-    this.componentRef = createComponent(componentType, {
-      environmentInjector: this.environmentInjector,
-      hostElement,
-    });
-    if (!componentType) {
-      console.log('无法识别该组件：', this.inputs);
-      return;
-    }
-    if (this.componentRef.instance && this.inputs) {
-      if (!this.inputs.type && this.inputs.content) {
-        Object.keys(this.inputs).forEach(key => {
-          if (this.componentRef) {
-            this.componentRef.instance[key] = this.inputs[key];
-          }
-        });
-      } else {
-        this.componentRef.instance.content = this.inputs;
+      const componentType = await this.componentService.getComponentType(type);
+      const hostElement = this.renderer.createElement('div');
+      this.componentRef = createComponent(componentType, {
+        environmentInjector: this.environmentInjector,
+        hostElement,
+      });
+      if (!componentType) {
+        console.log('无法识别该组件：', this.inputs);
+        return;
+      }
+      if (this.componentRef.instance && this.inputs) {
+        if (!this.inputs.type && this.inputs.content) {
+          Object.keys(this.inputs).forEach(key => {
+            if (this.componentRef) {
+              this.componentRef.instance[key] = this.inputs[key];
+            }
+          });
+        } else {
+          this.componentRef.instance.content = this.inputs;
+        }
+        this.componentRef.instance.pageIndex = this.index;
       }
-      this.componentRef.instance.pageIndex = this.index;
-    }
 
-    this.container.insert(this.componentRef.hostView);
-    this.componentRef.changeDetectorRef.detectChanges();
-    if (this.screenService.isPlatformBrowser()) {
+      this.container.insert(this.componentRef.hostView);
+      this.componentRef.changeDetectorRef.detectChanges();
       this.util.initAnimate(
         this.inputs,
         this.ele.nativeElement.lastElementChild,

From 326f33407a860c9b17c4af6a9b4db4405f3a571b Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Mon, 6 Jan 2025 18:04:50 +0800
Subject: [PATCH 13/35] fix: code editor

---
 src/app/modules/builder/builder.module.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/modules/builder/builder.module.ts b/src/app/modules/builder/builder.module.ts
index b6bada23b..e16779e6c 100644
--- a/src/app/modules/builder/builder.module.ts
+++ b/src/app/modules/builder/builder.module.ts
@@ -51,6 +51,7 @@ import { CardListComponent } from './main/card-list/card-list.component';
 import { CardPageComponent } from './main/card-list/card-page/card-page.component';
 import { DefaultPageComponent } from './main/default-page/default-page.component';
 import { FormModule } from '@uiux/combs/form/form.module';
+import { MonacoEditorModule } from 'ngx-monaco-editor';
 
 const components = [
   JsonComponent,
@@ -97,6 +98,7 @@ const components = [
     DragDropModule,
     BuilderRoutingModule,
     FormModule,
+    MonacoEditorModule.forRoot(),
   ],
   providers: [
     {

From d5f0aa311f6dfae0d3f24c87376d0c04f34b1ac9 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Mon, 6 Jan 2025 21:41:22 +0800
Subject: [PATCH 14/35] style: layout builder

---
 .../layout-builder.component.scss             | 14 ++++------
 .../builder-list/builder-list.component.scss  |  5 ----
 src/theme/component/_layout-builder.scss      | 28 +++----------------
 3 files changed, 9 insertions(+), 38 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.scss b/src/app/modules/builder/layout-builder/layout-builder.component.scss
index 74d3ab906..1dc9d5977 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.scss
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.scss
@@ -10,6 +10,9 @@
     .blocks {
       > .item {
         max-width: 100%;
+        &:hover {
+          z-index: 100;
+        }
         &.item-divider,
         &.item-layout-builder {
           @apply w-full;
@@ -27,8 +30,10 @@
           opacity: 0;
           height: 0;
           white-space: nowrap;
+          pointer-events: none;
           &[data-popper-placement] {
             opacity: 1;
+            pointer-events: auto;
             height: auto;
           }
         }
@@ -51,15 +56,6 @@
           display: block;
         }
       }
-      .blocks {
-        > .item {
-          &:hover {
-            > .toolbar {
-              display: block;
-            }
-          }
-        }
-      }
     }
   }
 }
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.scss b/src/app/modules/builder/main/builder-list/builder-list.component.scss
index a9aa6824c..6a6c1af1c 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.scss
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.scss
@@ -17,10 +17,6 @@
       overflow: auto;
       padding-bottom: 150px;
     }
-    ::ng-deep {
-      .widget-picker {
-      }
-    }
   }
   .component-item {
     position: relative;
@@ -46,7 +42,6 @@
         padding: 2px;
         &:hover {
           z-index: 10;
-          outline-offset: -1px;
           > .component-toolbar {
             display: block !important;
           }
diff --git a/src/theme/component/_layout-builder.scss b/src/theme/component/_layout-builder.scss
index 701016d68..af3dec9fc 100644
--- a/src/theme/component/_layout-builder.scss
+++ b/src/theme/component/_layout-builder.scss
@@ -19,25 +19,13 @@
           .layout-toolbar {
             .toggle {
               background-color: #333;
-              color: mat.m2-get-color-from-palette(
-                $primary,
-                default-contrast,
-                0.8
-              );
+              color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
             }
             .actions {
               background-color: #333;
-              @include mat.elevation(
-                2,
-                mat.m2-get-color-from-palette($background, tooltip),
-                0.25
-              );
+              @include mat.elevation(2, mat.m2-get-color-from-palette($background, tooltip), 0.25);
               .mat-mdc-button-base {
-                color: mat.m2-get-color-from-palette(
-                  $primary,
-                  default-contrast,
-                  0.8
-                );
+                color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
               }
             }
           }
@@ -49,10 +37,6 @@
           }
           .blocks {
             > .item {
-              &:hover {
-                outline: 1px solid mat.m2-get-color-from-palette($primary);
-                z-index: 10;
-              }
               > .toolbar {
                 background-color: #333;
 
@@ -64,11 +48,7 @@
 
                 .mat-mdc-button-base,
                 .title {
-                  color: mat.m2-get-color-from-palette(
-                    $primary,
-                    default-contrast,
-                    0.8
-                  );
+                  color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
                 }
                 .title {
                   background: rgb(0 0 0 / 40%);

From 617e48e131093123a73dd9371c24053b3c1bcd44 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Mon, 6 Jan 2025 22:50:32 +0800
Subject: [PATCH 15/35] style: block toolbar

---
 .../modules/builder/layout-builder/layout-builder.component.ts | 3 +--
 .../builder/main/builder-list/builder-list.component.scss      | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
index 1df2e1b73..2fe8318e5 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -27,7 +27,6 @@ import { createPopper } from '@popperjs/core';
 export class LayoutBuilderComponent implements OnInit, AfterViewInit {
   @Input() content: ILayoutBuilder;
   @Input() pageIndex: number;
-  @Input() uuid: string;
 
   util = inject(UtilitiesService);
   ele = inject(ElementRef);
@@ -80,7 +79,7 @@ export class LayoutBuilderComponent implements OnInit, AfterViewInit {
           {
             name: 'offset',
             options: {
-              offset: [1, 0],
+              offset: [0, 0],
             },
           },
         ],
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.scss b/src/app/modules/builder/main/builder-list/builder-list.component.scss
index 6a6c1af1c..1eb6cbb14 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.scss
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.scss
@@ -42,6 +42,7 @@
         padding: 2px;
         &:hover {
           z-index: 10;
+          outline-offset: -2px;
           > .component-toolbar {
             display: block !important;
           }

From cd9b7d6a718e87b2dcc7bf25915e5426283ab251 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Tue, 7 Jan 2025 17:12:32 +0800
Subject: [PATCH 16/35] fix:toolbar

---
 .../layout-builder/layout-builder.component.html       |  5 ++++-
 .../main/builder-list/builder-list.component.html      |  3 ++-
 .../main/widget-picker/widget-picker.component.scss    | 10 +++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index e75ac4991..09b4eb4c9 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -77,7 +77,7 @@
               @if (bg) {
                 <app-bg-img [attr.data-path]="'bg'" [content]="bg" />
               }
-              @for (item of elements; track item; let index = $index) {
+              @for (item of elements; track item; let index = $index; let last = $last) {
                 <div
                   #widget
                   (mouseleave)="onLeaveWidget(isBuilderMode)"
@@ -95,6 +95,9 @@
                         </div>
                       </button>
                     </div>
+                    @if (last) {
+                      <div class="py-6"></div>
+                    }
                   }
                 </div>
               }
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index bd9651b9a..b7afc90b4 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -61,7 +61,8 @@
         </div>
       }
       @if (page.body.length > 0) {
-        <app-widget-picker></app-widget-picker>
+        @let active = builder.wigetsPicker$ | async;
+        <app-widget-picker [class.active]="active"></app-widget-picker>
       }
     </div>
   </div>
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
index 190278574..58833117d 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
@@ -1,11 +1,12 @@
 @import '../../../../../theme/variable/breakpoint';
 .widget-picker {
   position: absolute;
-  right: 0;
+  right: -88px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
   width: 48px;
+  transition: right 0.3s ease-out;
   .widget-wrapper {
     border-radius: 20px;
     .item {
@@ -39,3 +40,10 @@
     }
   }
 }
+
+:host(.active) {
+  .widget-picker {
+    right: 20px;
+    transition: right 0.3s ease;
+  }
+}

From e0081c3babef15c9f87ec59d88b80b8be7a0afd4 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Tue, 7 Jan 2025 17:58:35 +0800
Subject: [PATCH 17/35] fix: widget picker

---
 src/app/core/service/builder.service.ts                    | 2 +-
 src/app/core/state/BuilderState.ts                         | 2 +-
 src/app/modules/builder/factory/getComponentSetting.ts     | 2 +-
 .../layout-toolbar/layout-toolbar.component.html           | 6 +++++-
 .../layout-toolbar/layout-toolbar.component.ts             | 4 ++++
 .../builder/main/builder-list/builder-list.component.html  | 2 +-
 .../builder/main/builder-list/builder-list.component.ts    | 1 +
 .../builder/main/widget-picker/widget-picker.component.ts  | 7 +++++--
 .../component-toolbar/component-toolbar.component.html     | 2 +-
 .../component-toolbar/component-toolbar.component.ts       | 4 ++++
 10 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/app/core/service/builder.service.ts b/src/app/core/service/builder.service.ts
index 55292554c..0cf5240de 100644
--- a/src/app/core/service/builder.service.ts
+++ b/src/app/core/service/builder.service.ts
@@ -503,7 +503,7 @@ export class BuilderService extends ApiService {
   }
 
   addBlock(addType: string, content: any, path: string): void {
-    this.builder.wigetsPicker$.next({
+    this.builder.widgetsPicker$.next({
       type: 'widget-picker',
       addType,
       path,
diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index 5d8fc811b..aa14941f5 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -30,7 +30,7 @@ export class BuilderState {
   public showcase$ = new Subject<IBuilderShowcase | false>();
   public themeMode = new BehaviorSubject<'light' | 'dark'>('light');
   public rightContent$ = new Subject<IBuilderDynamicContent>();
-  public wigetsPicker$ = new Subject<IWidgetPicker | false>();
+  public widgetsPicker$ = new Subject<IWidgetPicker | false>();
   public closeRightDrawer$ = new Subject<boolean>();
   public fixedChange$ = new Subject<boolean>();
   public animateDisable$ = new Subject<boolean>();
diff --git a/src/app/modules/builder/factory/getComponentSetting.ts b/src/app/modules/builder/factory/getComponentSetting.ts
index e7036febf..3ae48659a 100644
--- a/src/app/modules/builder/factory/getComponentSetting.ts
+++ b/src/app/modules/builder/factory/getComponentSetting.ts
@@ -233,7 +233,7 @@ export function getComponentSetting(content: any): FormlyFieldConfig[] {
           label: '文本',
         },
         fieldGroup: [
-          getTitle(content.title),
+          content.title ? getTitle(content.title) : {},
           {
             key: 'body',
             type: 'rich-text',
diff --git a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html
index 3b04c1d42..6c22d6efe 100644
--- a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html
+++ b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html
@@ -1,4 +1,8 @@
-<div class="layout-toolbar inline-flex justify-end items-center" #toolbar>
+<div
+  class="layout-toolbar inline-flex justify-end items-center"
+  #toolbar
+  (click)="hiddenWidgetPicker()"
+>
   <app-btn
     [matMenuTriggerFor]="menu"
     class="toggle block"
diff --git a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
index 542227fa3..92450eba6 100644
--- a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
@@ -56,4 +56,8 @@ export class LayoutToolbarComponent implements OnInit {
     const fields: FormlyFieldConfig[] = getLayoutSetting(layout);
     this.builder.showComponentSetting(layout, fields, path);
   }
+
+  hiddenWidgetPicker(): void {
+    this.builder.widgetsPicker$.next(false);
+  }
 }
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index b7afc90b4..9837fb856 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -61,7 +61,7 @@
         </div>
       }
       @if (page.body.length > 0) {
-        @let active = builder.wigetsPicker$ | async;
+        @let active = builder.widgetsPicker$ | async;
         <app-widget-picker [class.active]="active"></app-widget-picker>
       }
     </div>
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.ts b/src/app/modules/builder/main/builder-list/builder-list.component.ts
index 588bcf2b7..089ca9184 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.ts
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.ts
@@ -126,6 +126,7 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   addNewSection(event: any, type: 'widget' | 'section', newSection: any): void {
+    this.builder.widgetsPicker$.next(false);
     this.router.navigate(['/builder']);
     const path = this.util.generatePath(event.target);
     if (type === 'section') {
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index 98fce1cf4..519439402 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -2,6 +2,7 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   Input,
   OnInit,
@@ -16,6 +17,7 @@ import { createPopper } from '@popperjs/core';
 import { LocalStorageService } from 'ngx-webstorage';
 import { BuilderService } from '@core/service/builder.service';
 import { cloneDeep } from 'lodash-es';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Component({
   selector: 'app-widget-picker',
   templateUrl: './widget-picker.component.html',
@@ -37,6 +39,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
   builder = inject(BuilderState);
   storage = inject(LocalStorageService);
   builderService = inject(BuilderService);
+  destroyRef = inject(DestroyRef);
 
   ngOnInit(): void {
     const {
@@ -46,7 +49,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.builder.wigetsPicker$.subscribe(content => {
+    this.builder.widgetsPicker$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(content => {
       this.content = content;
     });
   }
@@ -89,7 +92,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     if (this.widgetPopper) {
       this.widgetPopper.destroy();
     }
-    this.builder.wigetsPicker$.next(false);
+    this.builder.widgetsPicker$.next(false);
   }
   copyLayoutLastChild(elements: any[], widget: any): any {
     const last = Object.assign({}, elements[elements.length - 1]);
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index f656fa05a..8f63a64ca 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -1,4 +1,4 @@
-<div class="wrapper flex justify-between items-center">
+<div class="wrapper flex justify-between items-center" (click)="hiddenPicker()">
   <div class="actions flex">
     @if (index > 0) {
       <div
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index bd206d66f..2d81fee85 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -86,4 +86,8 @@ export class ComponentToolbarComponent implements OnInit {
     const path = this.util.generatePath(event.target);
     this.builder.deleteComponent(index, path);
   }
+
+  hiddenPicker(): void {
+    this.builder.widgetsPicker$.next(false);
+  }
 }

From 18f264181e170259aa1c53b9e1b8e1c700f83cac Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Tue, 7 Jan 2025 23:12:34 +0800
Subject: [PATCH 18/35] feat: widget toolbar

---
 src/app/modules/builder/builder.module.ts     |  3 -
 .../block-toolbar.component.html              | 73 -------------------
 .../block-toolbar.component.scss              | 29 --------
 .../block-toolbar.component.spec.ts           | 24 ------
 .../block-toolbar/block-toolbar.component.ts  | 68 -----------------
 .../widget-picker.component.html              | 21 +++++-
 .../widget-picker.component.scss              |  8 +-
 .../widget-picker/widget-picker.component.ts  | 18 +++++
 .../chart/chart-box/chart-box.component.html  |  2 +-
 .../dashboard-box.component.html              |  6 +-
 .../combs/dashboard/dashboard.component.html  |  4 +-
 .../component-toolbar.component.html          | 18 +++--
 .../component-toolbar.component.ts            |  4 +
 .../uiux/widgets/divider/divider.component.ts |  8 +-
 src/stories/Changelog.mdx                     |  2 +-
 src/theme/component/_layout-builder.scss      |  2 +-
 .../component/builder/_builder-list.scss      | 17 ++++-
 17 files changed, 81 insertions(+), 226 deletions(-)
 delete mode 100644 src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.html
 delete mode 100644 src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.scss
 delete mode 100644 src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.spec.ts
 delete mode 100644 src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts

diff --git a/src/app/modules/builder/builder.module.ts b/src/app/modules/builder/builder.module.ts
index e16779e6c..b53b7fae5 100644
--- a/src/app/modules/builder/builder.module.ts
+++ b/src/app/modules/builder/builder.module.ts
@@ -29,7 +29,6 @@ import {
   getBuilderConfig,
   mediaAssetsFactory,
 } from '@core/factory/factory';
-import { LocalStorageService } from 'ngx-webstorage';
 import { InlineEditComponent } from './main/inline-editor/inline-editor.component';
 import { LayoutBuilderComponent } from './layout-builder/layout-builder.component';
 import { WidgetPickerComponent } from './main/widget-picker/widget-picker.component';
@@ -42,7 +41,6 @@ import { PageListComponent } from './sidebar/page-list/page-list.component';
 import { BuilderSidebarComponent } from './sidebar/builder-sidebar/builder-sidebar.component';
 import { BuilderTemplateComponent } from './main/builder-template/builder-template.component';
 import { LayoutToolbarComponent } from './layout-builder/layout-toolbar/layout-toolbar.component';
-import { BlockToolbarComponent } from './layout-builder/block-toolbar/block-toolbar.component';
 import { PageSettingComponent } from './main/page-setting/page-setting.component';
 import { BuilderWorkspaceComponent } from './main/builder-workspace/builder-workspace.component';
 import { ManagePageComponent } from './main/manage-page/manage-page.component';
@@ -85,7 +83,6 @@ const components = [
     PageListComponent,
     BuilderSidebarComponent,
     LayoutToolbarComponent,
-    BlockToolbarComponent,
     BuilderWorkspaceComponent,
     ManagePageComponent,
     DefaultPageComponent,
diff --git a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.html b/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.html
deleted file mode 100644
index d6e9cf0b6..000000000
--- a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<div class="block-toolbar flex justify-center items-center" #toolbar>
-  <div class="title rounded-xl">{{ block.type }}</div>
-  @if (index > 0 && index < layout.elements.length) {
-    <app-btn
-      matTooltip="上移"
-      matTooltipPosition="above"
-      (click)="onUpDown('up', i, index)"
-      [content]="{
-        label: '',
-        color: 'primary',
-        mode: 'icon',
-        icon: { svg: 'arrow-collapse-up', inline: true },
-      }"
-    ></app-btn>
-  }
-  @if (index > -1 && index < layout.elements.length - 1) {
-    <app-btn
-      matTooltip="下移"
-      matTooltipPosition="above"
-      (click)="onUpDown('down', i, index)"
-      [content]="{
-        label: '',
-        color: 'primary',
-        mode: 'icon',
-        icon: { svg: 'arrow-collapse-down', inline: true },
-      }"
-    ></app-btn>
-  }
-  <app-btn
-    matTooltip="复制JSON"
-    matTooltipPosition="above"
-    (click)="onCopy(block)"
-    [content]="{
-      label: '',
-      color: 'primary',
-      mode: 'icon',
-      icon: { svg: 'content-copy', inline: true },
-    }"
-  ></app-btn>
-  <app-btn
-    matTooltip="插入组件"
-    matTooltipPosition="above"
-    (click)="addBlock('widget', lbContent, toolbar)"
-    [content]="{
-      label: '',
-      color: 'primary',
-      mode: 'icon',
-      icon: { svg: 'plus' },
-    }"
-  ></app-btn>
-  <app-btn
-    matTooltip="删除"
-    matTooltipPosition="above"
-    (click)="deleteBlock(i, index)"
-    [content]="{
-      label: '',
-      color: 'primary',
-      mode: 'icon',
-      icon: { svg: 'close', inline: true },
-    }"
-  ></app-btn>
-  <app-btn
-    matTooltip="编辑{{ block.type }}组件"
-    matTooltipPosition="above"
-    (click)="onWidgetSetting(block, toolbar)"
-    [content]="{
-      label: '',
-      color: 'primary',
-      mode: 'icon',
-      icon: { svg: 'pencil', inline: true },
-    }"
-  ></app-btn>
-</div>
diff --git a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.scss b/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.scss
deleted file mode 100644
index 567cfbf7b..000000000
--- a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use '@angular/material' as mat;
-
-:host {
-  transform: translateX(-50%);
-}
-.block-toolbar {
-  .title {
-    line-height: 8px;
-    padding: 5px 6px;
-    margin: 0 4px;
-    font-size: 12px;
-    @apply capitalize;
-  }
-  ::ng-deep {
-    .mat-mdc-icon-button {
-      &.mat-mdc-button-base {
-        --mdc-icon-button-state-layer-size: 30px;
-        padding: 0;
-      }
-      .custom.mat-icon {
-        svg {
-          width: 16px !important;
-          height: 16px !important;
-          line-height: 16px !important;
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.spec.ts b/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.spec.ts
deleted file mode 100644
index df6e7eead..000000000
--- a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BlockToolbarComponent } from './block-toolbar.component';
-
-describe('BlockToolbarComponent', () => {
-  let component: BlockToolbarComponent;
-  let fixture: ComponentFixture<BlockToolbarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [BlockToolbarComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BlockToolbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts b/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts
deleted file mode 100644
index e4bc69b80..000000000
--- a/src/app/modules/builder/layout-builder/block-toolbar/block-toolbar.component.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
-import { BuilderService } from '@core/service/builder.service';
-import { UtilitiesService } from '@core/service/utilities.service';
-import { BuilderState } from '@core/state/BuilderState';
-import { getAnimate } from '@modules/builder/factory/getAnimate';
-import { getWidgetSetting } from '@modules/builder/factory/getWidgetSetting';
-import { LocalStorageService } from 'ngx-webstorage';
-
-@Component({
-  selector: 'app-block-toolbar',
-  templateUrl: './block-toolbar.component.html',
-  styleUrls: ['./block-toolbar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BlockToolbarComponent {
-  @Input() layout: any;
-  @Input() block: any;
-  @Input() index: number;
-  @Input() i: number;
-  @Input() lbContent: any;
-  @Input() pageIndex: number;
-
-  private builder = inject(BuilderState);
-  private builderSerivce = inject(BuilderService);
-  private util = inject(UtilitiesService);
-  private storage = inject(LocalStorageService);
-
-  onUpDown(direction: string, i: number, index: number): void {
-    const { elements } = this.lbContent;
-    if (direction === 'up') {
-      [elements[i].elements[index - 1], elements[i].elements[index]] = [
-        elements[i].elements[index],
-        elements[i].elements[index - 1],
-      ];
-    } else {
-      [elements[i].elements[index], elements[i].elements[index + 1]] = [
-        elements[i].elements[index + 1],
-        elements[i].elements[index],
-      ];
-    }
-    this.builder.updateComponent(this.pageIndex, this.lbContent);
-  }
-
-  addBlock(addType: string, content: any, target: any): void {
-    // this.builderSerivce.addBlock(addType, content, this.util.generatePath(target));
-  }
-
-  onCopy(widget: any): any {
-    this.util.openSnackbar(`已复制${widget.type}的JSON`);
-    this.util.copy(JSON.stringify(widget));
-    this.storage.store(this.builder.COPYWIDGETKEY, widget);
-  }
-
-  deleteBlock(i: number, index: number): void {
-    const { elements } = this.lbContent;
-    elements[i].elements.splice(index, 1);
-    this.builder.updateComponent(this.pageIndex, this.lbContent);
-  }
-
-  onWidgetSetting(widget: any, target: any): void {
-    const path = this.util.generatePath(target);
-    const animateConfig = getAnimate(widget);
-    const fields = getWidgetSetting(widget);
-
-    fields.fieldGroup?.push(animateConfig);
-    this.builder.showComponentSetting(widget, [fields], path);
-  }
-}
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
index ec40f4f48..c7db2f73e 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.html
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -1,6 +1,23 @@
 <div class="widget-picker p-5" (mouseleave)="onLeave()">
   @if (widgets) {
-    <div class="widget-wrapper py-4" #wrapper>
+    <div class="widget-wrapper py-4 flex flex-col items-center" #wrapper>
+      @if (bcData()) {
+        <div
+          #copy
+          class="box flex flex-col justify-center items-center"
+          (click)="onPasteData()"
+          (mouseenter)="onHoverCopy({ content: bcData() }, copy)"
+          matTooltip="选择复制的组件"
+          matTooltipPosition="above"
+        >
+          <div class="item" matRipple>
+            <div class="inner flex flex-col justify-center items-center m-[2px] p-[6px]">
+              <app-icon [content]="{ svg: 'content-paste' }" />
+            </div>
+          </div>
+        </div>
+        <app-divider />
+      }
       @for (group of widgets; track $index) {
         <div
           class="box flex flex-col justify-center items-center"
@@ -16,7 +33,7 @@
         </div>
       }
       @if (help) {
-        <app-divider></app-divider>
+        <app-divider class="opacity-50 w-[40px]"></app-divider>
         <div class="help box" [matTooltip]="help.tooltip">
           <app-btn
             [content]="{
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
index 58833117d..6abd51a39 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
@@ -6,9 +6,8 @@
   transform: translateY(-50%);
   z-index: 999;
   width: 48px;
-  transition: right 0.3s ease-out;
+  transition: right 0.5s ease-out;
   .widget-wrapper {
-    border-radius: 20px;
     .item {
       position: relative;
       .inner {
@@ -21,9 +20,10 @@
     position: relative;
     right: 10px;
   }
+  .widget-wrapper,
   .group-popup,
   .widget-popup {
-    border-radius: 12px;
+    border-radius: 8px;
   }
   .widget-popup {
     overflow: hidden;
@@ -44,6 +44,6 @@
 :host(.active) {
   .widget-picker {
     right: 20px;
-    transition: right 0.3s ease;
+    transition: right 0.5s ease-in;
   }
 }
diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
index 519439402..7d199b450 100644
--- a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
+++ b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -8,6 +8,7 @@ import {
   OnInit,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core';
 import type { IWidgetPicker } from '@core/interface/IBuilder';
 import { BuilderState } from '@core/state/BuilderState';
@@ -34,6 +35,7 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
   groupPopper: any;
   widgetPopper: any;
 
+  public bcData = signal(false);
   ele = inject(ElementRef);
   widgets = inject(WIDGETS);
   builder = inject(BuilderState);
@@ -46,6 +48,9 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
       widgetPicker: { help },
     } = this.builderService.builderConfig;
     this.help = help;
+    this.storage.observe(this.builder.COPYCOMPONENTKEY).subscribe(data => {
+      this.bcData.set(data);
+    });
   }
 
   ngAfterViewInit(): void {
@@ -54,6 +59,11 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
     });
   }
 
+  onPasteData(): void {
+    this.onSelect(this.bcData());
+    this.storage.clear(this.builder.COPYCOMPONENTKEY);
+  }
+
   onSelect(widget: any): void {
     if (!this.content) {
       return;
@@ -145,4 +155,12 @@ export class WidgetPickerComponent implements OnInit, AfterViewInit {
       this.widgetPopper.update();
     }
   }
+
+  onHoverCopy(widget: any, ele: any): void {
+    this.group$.next(false);
+    if (this.groupPopper) {
+      this.groupPopper.destroy();
+    }
+    this.onHoverWidget(widget, ele);
+  }
 }
diff --git a/src/app/uiux/combs/chart/chart-box/chart-box.component.html b/src/app/uiux/combs/chart/chart-box/chart-box.component.html
index 4e8356a27..1b709d9a2 100644
--- a/src/app/uiux/combs/chart/chart-box/chart-box.component.html
+++ b/src/app/uiux/combs/chart/chart-box/chart-box.component.html
@@ -1,7 +1,7 @@
 @if (data$ | async; as data) {
   <div class="chart-box p-5 flex justify-center items-end">
     <div class="w-full flex flex-col justify-center items-start">
-      <div class="title mat-h3 one-line">
+      <div class="title mat-h3 one-line" [attr.data-path]="'label'" contentedit="label">
         {{ data.label }}
       </div>
       <div class="count one-line">
diff --git a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
index 32b80c159..9fc14c710 100644
--- a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
+++ b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
@@ -2,7 +2,11 @@
   @if (content.title || content.form) {
     <div class="box-header flex flex-row justify-between items-center">
       @if (content.title) {
-        <div class="mat-h3 font-bold m-bottom-0">
+        <div
+          class="mat-h3 font-bold m-bottom-0"
+          [attr.data-path]="'title.label'"
+          contentedit="label"
+        >
           {{ content.title.label }}
         </div>
       }
diff --git a/src/app/uiux/combs/dashboard/dashboard.component.html b/src/app/uiux/combs/dashboard/dashboard.component.html
index daf903368..4f07c96cc 100644
--- a/src/app/uiux/combs/dashboard/dashboard.component.html
+++ b/src/app/uiux/combs/dashboard/dashboard.component.html
@@ -1,9 +1,9 @@
 @if (content) {
   <div class="dashboard">
     <div class="wrapper flex flex-wrap" *reqRolesIf="content">
-      @for (box of content.elements; track box) {
+      @for (box of content.elements; track box; let index = $index) {
         <div class="flex-12/12 md:flex-{{ box.row }}/12 overflow-hidden">
-          <app-dashboard-box class="box" [content]="box" />
+          <app-dashboard-box [attr.data-path]="'elements.' + index" class="box" [content]="box" />
         </div>
       }
     </div>
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index 8f63a64ca..9f991b897 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -1,5 +1,5 @@
-<div class="wrapper flex justify-between items-center" (click)="hiddenPicker()">
-  <div class="actions flex">
+<div class="wrapper flex justify-between items-center">
+  <div class="actions flex gap-1">
     @if (index > 0) {
       <div
         class="item"
@@ -59,10 +59,11 @@
         />
       </div>
     }
+
     <div
       class="item"
-      (click)="onDelete(index, $event)"
-      [matTooltip]="'移除'"
+      (click)="onSetting(content, $event)"
+      [matTooltip]="'编辑组件通用配置'"
       matTooltipPosition="above"
     >
       <app-btn
@@ -70,14 +71,15 @@
           label: '',
           color: 'primary',
           mode: 'icon',
-          icon: { svg: 'delete', inline: true },
+          icon: { svg: 'tune-vertical', inline: true },
         }"
       />
     </div>
+    <app-divider [content]="{ vertical: true }" />
     <div
       class="item"
-      (click)="onSetting(content, $event)"
-      [matTooltip]="'编辑组件通用配置'"
+      (click)="onDelete(index, $event)"
+      [matTooltip]="'移除'"
       matTooltipPosition="above"
     >
       <app-btn
@@ -85,7 +87,7 @@
           label: '',
           color: 'primary',
           mode: 'icon',
-          icon: { svg: 'tune-vertical', inline: true },
+          icon: { svg: 'delete', inline: true },
         }"
       />
     </div>
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index 2d81fee85..affd7f1c3 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -54,6 +54,7 @@ export class ComponentToolbarComponent implements OnInit {
   onUpdown(index: number, direction: string, event: any): void {
     const path = this.util.generatePath(event.target);
     this.builder.upDownComponent(index, direction, path);
+    this.hiddenPicker();
   }
 
   onCopy(): void {
@@ -71,6 +72,7 @@ export class ComponentToolbarComponent implements OnInit {
   onPaste(event: any, content: any): void {
     const path = this.util.generatePath(event.target);
     this.builder.updatePageContentByPath(path, content, 'add');
+    this.hiddenPicker();
     this.storage.clear(this.builder.COPYCOMPONENTKEY);
   }
 
@@ -79,11 +81,13 @@ export class ComponentToolbarComponent implements OnInit {
     const path = this.util.generatePath(event.target);
     const component = type ? content : content.content;
     const fields: FormlyFieldConfig[] = getComponentSetting(component);
+    this.hiddenPicker();
     this.builder.showComponentSetting(component, fields, path);
   }
 
   onDelete(index: number, event: any): void {
     const path = this.util.generatePath(event.target);
+    this.hiddenPicker();
     this.builder.deleteComponent(index, path);
   }
 
diff --git a/src/app/uiux/widgets/divider/divider.component.ts b/src/app/uiux/widgets/divider/divider.component.ts
index f441efbfd..2c43d7d7a 100644
--- a/src/app/uiux/widgets/divider/divider.component.ts
+++ b/src/app/uiux/widgets/divider/divider.component.ts
@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-divider',
@@ -13,7 +8,6 @@ import {
 })
 export class DividerComponent implements OnInit {
   @Input() content: any;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/stories/Changelog.mdx b/src/stories/Changelog.mdx
index b37dd1011..4bf37584d 100644
--- a/src/stories/Changelog.mdx
+++ b/src/stories/Changelog.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # 更新日志
 
-## 9.0.2(2025-01-02)
+## 9.0.2(2025-01-07)
 
 - 新增了账户更新组件；
 - 重构了复合组件和基组件个Formly配置；
diff --git a/src/theme/component/_layout-builder.scss b/src/theme/component/_layout-builder.scss
index af3dec9fc..7b4c656f8 100644
--- a/src/theme/component/_layout-builder.scss
+++ b/src/theme/component/_layout-builder.scss
@@ -18,7 +18,7 @@
           }
           .layout-toolbar {
             .toggle {
-              background-color: #333;
+              background-color: #272727;
               color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
             }
             .actions {
diff --git a/src/theme/component/builder/_builder-list.scss b/src/theme/component/builder/_builder-list.scss
index bb3d9a655..496af5482 100644
--- a/src/theme/component/builder/_builder-list.scss
+++ b/src/theme/component/builder/_builder-list.scss
@@ -28,7 +28,13 @@
     .widget-picker {
       .widget-wrapper {
         background-color: mat.m2-get-color-from-palette($background, card);
-        @include mat.elevation(5, mat.m2-get-color-from-palette($background, tooltip), 0.5);
+        box-shadow:
+          0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
+          0px 0.4px 1.3px rgba(0, 0, 0, 0.028),
+          0px 0.8px 2.5px rgba(0, 0, 0, 0.035),
+          0px 1.3px 4.5px rgba(0, 0, 0, 0.042),
+          0px 2.5px 8.4px rgba(0, 0, 0, 0.05),
+          0px 6px 20px rgba(0, 0, 0, 0.07);
         .box {
           color: mat.m2-get-color-from-palette($primary, 600);
         }
@@ -86,11 +92,18 @@
   }
   .component-toolbar {
     .actions {
-      background-color: #333;
+      background-color: #272727;
       @include mat.elevation(2, mat.m2-get-color-from-palette($background, tooltip), 0.25);
       .mat-mdc-button-base {
         color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
       }
+      .mat-divider {
+        height: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        position: relative;
+        border-right-color: mat.m2-get-color-from-palette($primary, default-contrast, 0.4);
+      }
     }
   }
 }

From 6ed054fd16259d724703f6fd8882dc47655ce712 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 11:02:41 +0800
Subject: [PATCH 19/35] quick fix

---
 .../layout-builder.component.html             |  2 +-
 .../layout-setting.component.ts               | 50 +++++++++++--------
 .../layout-toolbar.component.ts               |  1 -
 .../builder-list/builder-list.component.html  |  8 +--
 .../builder-list/builder-list.component.ts    |  4 --
 .../component-toolbar.component.html          |  4 +-
 .../component-toolbar.component.ts            |  8 ++-
 .../dynamic-component.component.html          |  2 +-
 8 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index 09b4eb4c9..e1f57e0b3 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -35,7 +35,7 @@
           }} md:col-span-{{ row.md }} lg:col-span-{{ row.lg }}"
           [attr.data-path]="'elements.' + i"
         >
-          @if (isBuilderMode) {
+          @if (isBuilderMode && screenService.isPlatformBrowser()) {
             <div class="toolbar hidden absolute z-50">
               <app-layout-toolbar
                 [lbContent]="content"
diff --git a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
index cba5a022a..02e013778 100644
--- a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
@@ -4,9 +4,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   Input,
   inject,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import type { ILayoutSetting } from '@core/interface/IBuilder';
@@ -15,7 +17,6 @@ import { BuilderService } from '@core/service/builder.service';
 import { BuilderState } from '@core/state/BuilderState';
 import { DialogComponent } from '@uiux/widgets/dialog/dialog.component';
 import { cloneDeep, defaultsDeep, get } from 'lodash-es';
-import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-layout-setting',
@@ -27,13 +28,13 @@ export class LayoutSettingComponent {
   @Input() content: ILayoutSetting;
   form = new UntypedFormGroup({});
   model: any = {};
-  destroy$: Subject<boolean> = new Subject<boolean>();
 
-  builder = inject(BuilderState);
+  doc = inject(DOCUMENT);
   dialog = inject(MatDialog);
+  builder = inject(BuilderState);
   cd = inject(ChangeDetectorRef);
+  destroyRef = inject(DestroyRef);
   builderService = inject(BuilderService);
-  doc = inject(DOCUMENT);
 
   onModelChange(value: any): void {
     const { path } = this.content;
@@ -86,11 +87,14 @@ export class LayoutSettingComponent {
       },
     });
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.builder.bulkUpdateComponent({ animate });
-      }
-    });
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        if (result) {
+          this.builder.bulkUpdateComponent({ animate });
+        }
+      });
   }
 
   onWidgetPicker(): void {
@@ -111,7 +115,7 @@ export class LayoutSettingComponent {
       },
     });
 
-    this.dialog.afterAllClosed.subscribe(() => {
+    this.dialog.afterAllClosed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       this.cd.detectChanges();
     });
   }
@@ -163,17 +167,23 @@ export class LayoutSettingComponent {
         },
       });
 
-      dialogRef.afterOpened().subscribe(() => {
-        builderList = this.doc.querySelector('#builder-list');
-        builderList.style.paddingBottom = '500px';
-        this.builder.fullScreen$.next(true);
-        this.builder.closeRightDrawer$.next(true);
-      });
+      dialogRef
+        .afterOpened()
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => {
+          builderList = this.doc.querySelector('#builder-list');
+          builderList.style.paddingBottom = '500px';
+          this.builder.fullScreen$.next(true);
+          this.builder.closeRightDrawer$.next(true);
+        });
 
-      dialogRef.afterClosed().subscribe(() => {
-        builderList.style.paddingBottom = '150px';
-        this.builder.fullScreen$.next(false);
-      });
+      dialogRef
+        .afterClosed()
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => {
+          builderList.style.paddingBottom = '150px';
+          this.builder.fullScreen$.next(false);
+        });
     }
   }
 }
diff --git a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
index 92450eba6..8994f708c 100644
--- a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
@@ -21,7 +21,6 @@ export class LayoutToolbarComponent implements OnInit {
   util = inject(UtilitiesService);
   builder = inject(BuilderState);
   builderService = inject(BuilderService);
-  constructor() {}
 
   ngOnInit(): void {}
 
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index 9837fb856..3d5aa66e7 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -14,7 +14,7 @@
         [cdkDropListData]="page.body"
         (cdkDropListDropped)="drop($event)"
       >
-        @for (item of page.body; track trackByFn(i, item); let i = $index) {
+        @for (item of page.body; track item; let i = $index) {
           <div
             id="item-{{ i }}"
             class="component-item"
@@ -23,11 +23,7 @@
             [cdkDragData]="item"
           >
             @if (item) {
-              <app-dynamic-component
-                [attr.data-path]="i"
-                [inputs]="{ content: item }"
-                [index]="i"
-              />
+              <app-dynamic-component [attr.data-path]="i" [inputs]="item" [index]="i" />
               @if (builderConfig$ | async; as builderConfig) {
                 <div class="add-new-section gap-2 items-center" [attr.data-path]="i">
                   <button
diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.ts b/src/app/modules/builder/main/builder-list/builder-list.component.ts
index 089ca9184..8fd9f3e42 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.ts
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.ts
@@ -87,10 +87,6 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
     animateElement.forEach((el: any) => observer.observe(el));
   }
 
-  trackByFn(index: number, item: any): number {
-    return index;
-  }
-
   drop(event: CdkDragDrop<string[]>): void {
     this.builder.onDrop(event);
   }
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index 9f991b897..727efe2d3 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -42,12 +42,12 @@
         }"
       />
     </div>
-    @if (bcData) {
+    @if (bcData()) {
       <div
         class="item"
         matTooltip="粘贴复制的组件到下面"
         matTooltipPosition="above"
-        (click)="onPaste($event, bcData)"
+        (click)="onPaste($event, bcData())"
       >
         <app-btn
           [content]="{
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index affd7f1c3..70291fdbc 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -1,12 +1,12 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   HostBinding,
   Inject,
   Input,
   OnInit,
   inject,
+  signal,
 } from '@angular/core';
 import type { IComponentToolbar } from '@core/interface/combs/IBuilder';
 import { UtilitiesService } from '@core/service/utilities.service';
@@ -29,12 +29,11 @@ export class ComponentToolbarComponent implements OnInit {
   @HostBinding('class.component-toolbar') hostClass = true;
   dialogRef: any;
 
-  public bcData: any;
+  public bcData = signal(false);
 
   builder = inject(BuilderState);
   storage = inject(LocalStorageService);
   util = inject(UtilitiesService);
-  cd = inject(ChangeDetectorRef);
   constructor(
     @Inject(IS_BUILDER_MODE)
     public isBDMode$: Observable<boolean>
@@ -42,8 +41,7 @@ export class ComponentToolbarComponent implements OnInit {
 
   ngOnInit(): void {
     this.storage.observe(this.builder.COPYCOMPONENTKEY).subscribe(data => {
-      this.bcData = data;
-      this.cd.detectChanges();
+      this.bcData.set(data);
     });
   }
 
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index a1d151562..821e9b331 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -1,5 +1,5 @@
 <div [class.active-toolbar]="showToolbar()">
-  @if (showToolbar()) {
+  @if (showToolbar() && screenService.isPlatformBrowser()) {
     <app-component-toolbar #toolbar [content]="inputs" [index]="index" />
   }
   @let content = inputs.type ? inputs : inputs.content;

From 56c3a07fa8a4d8d7156b22cd518a8d6ef60b0a85 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 11:45:52 +0800
Subject: [PATCH 20/35] fix: bg img, chart

---
 .../builder/data/components-for-builder.ts    | 40 +++++++++----------
 .../builder/data/system-for-builder.ts        |  6 +--
 src/app/modules/builder/factory/getChart.ts   |  4 +-
 src/app/modules/user/user.component.ts        |  6 +--
 .../uiux/combs/chart/chart/chart.component.ts |  1 -
 .../dashboard-box.component.html              |  2 +-
 .../search-header.component.html              |  4 +-
 .../dynamic-component.component.html          |  2 +-
 src/app/uiux/widgets/img/img.component.scss   | 34 ----------------
 .../carousel/carousel1v1.stories.ts           | 39 ++++++------------
 .../carousel/carousel2v1.stories.ts           |  9 +----
 .../components/profile/profile1v1.stories.ts  | 11 ++---
 .../components/search/search.stories.ts       |  9 +----
 .../feature/builder/Jsoneditor.stories.ts     |  7 +---
 src/stories/feature/hero/hero1v1.stories.ts   |  9 +----
 src/stories/feature/hero/hero1v2.stories.ts   |  9 +----
 src/stories/feature/hero/hero1v4.stories.ts   | 15 ++-----
 src/stories/feature/hero/hero2v3.stories.ts   | 11 ++---
 .../feature/showcase/showcase1v3.stories.ts   | 19 ++++-----
 src/stories/sample/calendar-page.stories.ts   | 21 ++--------
 src/stories/sample/home/data/home_v11.ts      |  2 +-
 src/stories/sample/home/data/home_v13.ts      | 12 +++---
 src/stories/sample/home/data/home_v2.ts       | 10 ++---
 src/stories/sample/home/data/home_v3.ts       |  8 ++--
 src/stories/sample/home/data/home_v4.ts       | 12 +++---
 src/stories/sample/home/data/home_v5.ts       | 18 ++++-----
 src/stories/sample/home/data/home_v6.ts       |  6 +--
 src/stories/sample/home/data/home_v8.ts       |  8 ++--
 src/stories/widgets/card/Card1v1.stories.ts   |  6 +--
 29 files changed, 106 insertions(+), 234 deletions(-)

diff --git a/src/app/modules/builder/data/components-for-builder.ts b/src/app/modules/builder/data/components-for-builder.ts
index 526650b77..fe04f6a39 100644
--- a/src/app/modules/builder/data/components-for-builder.ts
+++ b/src/app/modules/builder/data/components-for-builder.ts
@@ -45,7 +45,7 @@ export const components: any[] = [
                     },
                     classes: 'xy-center',
                     bg: {
-                      classes: 'bg-center overlay overlay-80',
+                      classes: ' overlay overlay-80',
                       img: {
                         src: '/assets/images/16-9/business-14.jpeg',
                         mobile: '/assets/images/mobile/mobile-03.jpg',
@@ -284,7 +284,7 @@ export const components: any[] = [
                 ],
               },
               bg: {
-                classes: 'bg-center overlay overlay-80',
+                classes: ' overlay overlay-80',
                 img: {
                   src: '/assets/images/hero/bg-pattern-hero.png',
                   mobile: '/assets/images/hero/bg-pattern-hero.png',
@@ -332,7 +332,7 @@ export const components: any[] = [
                 classes: 'bg-fill-width overlay- overlay-',
                 img: {
                   src: '/assets/images/bg/bg-02.png',
-                  hostClasses: 'bg-center',
+                  hostClasses: '',
                 },
               },
               order: -1,
@@ -407,13 +407,13 @@ export const components: any[] = [
               params: {
                 height: '750px',
               },
-               bg: {
-                  classes: 'bg-shadow overlay overlay-20',
-                  img: {
-                    src: '/assets/images/hero/light-bg.jpeg',
-                    mobile: '/assets/images/mobile/follower-04.jpg',
-                  },
+              bg: {
+                classes: 'bg-shadow overlay overlay-20',
+                img: {
+                  src: '/assets/images/hero/light-bg.jpeg',
+                  mobile: '/assets/images/mobile/follower-04.jpg',
                 },
+              },
               text: {
                 title: {
                   label: '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
@@ -449,12 +449,12 @@ export const components: any[] = [
                 height: '750px',
               },
               bg: {
-                  classes: 'bg-shadow overlay overlay-80',
-                  img: {
-                    src: '/assets/images/hero/light-bg.jpeg',
-                    mobile: '/assets/images/mobile/mobile-02.jpg',
-                  },
+                classes: 'bg-shadow overlay overlay-80',
+                img: {
+                  src: '/assets/images/hero/light-bg.jpeg',
+                  mobile: '/assets/images/mobile/mobile-02.jpg',
                 },
+              },
               text: {
                 title: {
                   label: '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
@@ -528,9 +528,9 @@ export const components: any[] = [
               spacer: 'lg',
               shape: true,
               bg: {
-                classes: 'bg-center',
+                classes: '',
                 img: {
-                  hostClasses: 'bg-center',
+                  hostClasses: '',
                   src: '/assets/images/bg/bg-04.png',
                 },
               },
@@ -1258,7 +1258,7 @@ export const components: any[] = [
               bg: {
                 classes: 'bg-fill-width overlay overlay-20',
                 img: {
-                  hostClasses: 'bg-center',
+                  hostClasses: '',
                   src: '/assets/images/hero/bg-pattern-hero.png',
                   alt: 'page title',
                 },
@@ -1436,7 +1436,7 @@ export const components: any[] = [
               bg: {
                 classes: 'bg-fill-width overlay overlay-80',
                 img: {
-                  hostClasses: 'bg-center',
+                  hostClasses: '',
                   src: '/assets/images/showcase/8.jpg',
                   alt: 'page title',
                 },
@@ -4163,7 +4163,7 @@ export const components: any[] = [
                           },
                           classes: 'xy-center',
                           bg: {
-                            classes: 'bg-center overlay overlay-80',
+                            classes: ' overlay overlay-80',
                             img: {
                               src: '/assets/images/16-9/business-14.jpeg',
                               mobile: '/assets/images/mobile/mobile-03.jpg',
@@ -5031,7 +5031,7 @@ export const components: any[] = [
                 classes: 'bg-fill-width overlay overlay-80',
                 img: {
                   src: '/assets/images/bg/bg-03.jpeg',
-                  hostClasses: 'bg-center',
+                  hostClasses: '',
                 },
               },
               classes: '',
diff --git a/src/app/modules/builder/data/system-for-builder.ts b/src/app/modules/builder/data/system-for-builder.ts
index 7570c1632..e6003ef28 100644
--- a/src/app/modules/builder/data/system-for-builder.ts
+++ b/src/app/modules/builder/data/system-for-builder.ts
@@ -1838,7 +1838,7 @@ export const system: any[] = [
           bannerBg: {
             classes: 'bg-fill-width overlay overlay-80',
             img: {
-              hostClasses: 'bg-center',
+              hostClasses: '',
               src: '/assets/images/16-9/business-14.jpeg',
               alt: 'page title',
             },
@@ -2089,7 +2089,7 @@ export const system: any[] = [
           bannerBg: {
             classes: 'bg-fill-width overlay overlay-80',
             img: {
-              hostClasses: 'bg-center',
+              hostClasses: '',
               src: '/assets/images/16-9/business-14.jpeg',
               alt: 'page title',
             },
@@ -2331,7 +2331,7 @@ export const system: any[] = [
             bg: {
               classes: 'bg-shadow overlay overlay-80',
               img: {
-                hostClasses: 'bg-center',
+                hostClasses: '',
                 src: '/assets/images/hero/1-6.jpg',
                 mobile: '/assets/images/mobile/mobile-03.jpg',
               },
diff --git a/src/app/modules/builder/factory/getChart.ts b/src/app/modules/builder/factory/getChart.ts
index be8cbad89..c661432bb 100644
--- a/src/app/modules/builder/factory/getChart.ts
+++ b/src/app/modules/builder/factory/getChart.ts
@@ -17,7 +17,7 @@ export function getChart(widget: any): FormlyFieldConfig {
               {
                 key: 'text',
                 type: 'input',
-                defaultValue: widget.title.text,
+                defaultValue: widget?.title?.text,
                 props: {
                   label: '标题',
                 },
@@ -25,7 +25,7 @@ export function getChart(widget: any): FormlyFieldConfig {
               {
                 key: 'subtext',
                 type: 'input',
-                defaultValue: widget.title.subtext,
+                defaultValue: widget?.title?.subtext,
                 props: {
                   label: '副标题',
                 },
diff --git a/src/app/modules/user/user.component.ts b/src/app/modules/user/user.component.ts
index 3e4877c7e..d5af83c20 100644
--- a/src/app/modules/user/user.component.ts
+++ b/src/app/modules/user/user.component.ts
@@ -46,9 +46,7 @@ export class UserComponent implements OnInit {
       this.userService.userSub$.subscribe(user => {
         if (!user) {
           setTimeout(() => {
-            this.route.navigate([
-              environment.drupalProxy ? '/my' : '/me/login',
-            ]);
+            this.route.navigate([environment.drupalProxy ? '/my' : '/me/login']);
           }, 2000);
         } else {
           window.location.reload();
@@ -113,7 +111,7 @@ export class UserComponent implements OnInit {
     return {
       classes: 'bg-fill-width overlay overlay-80',
       img: {
-        hostClasses: 'bg-center',
+        hostClasses: '',
         src: this.coreConfig?.user?.banner,
       },
     };
diff --git a/src/app/uiux/combs/chart/chart/chart.component.ts b/src/app/uiux/combs/chart/chart/chart.component.ts
index 5ed132aae..c1f90ee0e 100644
--- a/src/app/uiux/combs/chart/chart/chart.component.ts
+++ b/src/app/uiux/combs/chart/chart/chart.component.ts
@@ -7,7 +7,6 @@ import {
   Input,
   OnInit,
   ViewChild,
-  afterRender,
   inject,
 } from '@angular/core';
 import type { EChartsOption } from 'echarts';
diff --git a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
index 9fc14c710..eca532677 100644
--- a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
+++ b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
@@ -25,7 +25,7 @@
       </div>
     </div>
   }
-  <app-dynamic-component [inputs]="{ content: widget$ | async }" />
+  <app-dynamic-component [attr.data-path]="'widget'" [inputs]="{ content: widget$ | async }" />
   @if (loading) {
     <div class="loading-inner">
       <mat-spinner diameter="50" />
diff --git a/src/app/uiux/combs/search/search-header/search-header.component.html b/src/app/uiux/combs/search/search-header/search-header.component.html
index a32d8329c..08c68df25 100644
--- a/src/app/uiux/combs/search/search-header/search-header.component.html
+++ b/src/app/uiux/combs/search/search-header/search-header.component.html
@@ -1,9 +1,7 @@
 @if (content) {
   <div class="search-header relative bg-shadow p-y-xl">
     @if (content.bg) {
-      <app-bg [content]="content.bg">
-        <app-img [attr.data-path]="'bg.img'" [content]="content.bg.img" />
-      </app-bg>
+      <app-bg-img [attr.data-path]="'bg'" [content]="content.bg"> </app-bg-img>
     }
     <div class="container relative">
       <app-text [attr.data-path]="'text'" [content]="content.text" />
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index 821e9b331..ffc6cba7e 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -3,7 +3,7 @@
     <app-component-toolbar #toolbar [content]="inputs" [index]="index" />
   }
   @let content = inputs.type ? inputs : inputs.content;
-  <div class="relative overflow-hidden" [ngClass]="content?.containerClasses">
+  <div class="relative" [ngClass]="content?.containerClasses">
     @if (content?.id) {
       <span class="anchor" [id]="content.id"></span>
     }
diff --git a/src/app/uiux/widgets/img/img.component.scss b/src/app/uiux/widgets/img/img.component.scss
index e10f35556..e52382939 100644
--- a/src/app/uiux/widgets/img/img.component.scss
+++ b/src/app/uiux/widgets/img/img.component.scss
@@ -33,37 +33,3 @@ img {
     transform: rotate(130deg);
   }
 }
-
-// will deprecated, user .object-fit
-:host(.bg-center) {
-  @media #{$lt-md} {
-    img {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      left: 0;
-      object-fit: cover;
-      width: 100vw;
-      height: 100%;
-    }
-  }
-  @media #{$gt-sm} {
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200% !important;
-    height: 200% !important;
-    max-width: none !important;
-    img {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      left: 0;
-      margin: auto;
-      min-height: 50%;
-      min-width: 50%;
-    }
-  }
-}
diff --git a/src/stories/components/carousel/carousel1v1.stories.ts b/src/stories/components/carousel/carousel1v1.stories.ts
index e7e5ea207..7bf6fcd36 100644
--- a/src/stories/components/carousel/carousel1v1.stories.ts
+++ b/src/stories/components/carousel/carousel1v1.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Carousel1v1Component } from '@uiux/combs/carousel/carousel1v1/carousel1v1.component';
 import { StorysModule } from '@core/module/storys.module';
@@ -491,7 +486,7 @@ FullScreen.args = {
                 },
                 classes: 'xy-center',
                 bg: {
-                  classes: 'bg-center overlay overlay-80',
+                  classes: ' overlay overlay-80',
                   img: {
                     src: '/assets/images/16-9/business-14.jpeg',
                     mobile: '/assets/images/mobile/mobile-03.jpg',
@@ -579,8 +574,7 @@ FullScreen.args = {
           classes: '',
           text: {
             title: {
-              label:
-                '使用 <strong class="text-primary">Storybook</strong> 开发组件',
+              label: '使用 <strong class="text-primary">Storybook</strong> 开发组件',
               style: 'style-v1',
               classes: 'mat-headline-2 bold',
             },
@@ -705,8 +699,7 @@ FullScreen.args = {
                 href: '/',
                 label: '高性能',
               },
-              content:
-                '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
+              content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
               more: {
                 href: '#',
                 label: '更多',
@@ -722,8 +715,7 @@ FullScreen.args = {
                 href: '/',
                 label: '易用的编辑器',
               },
-              content:
-                '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作',
+              content: '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作',
               more: {
                 href: '#',
                 label: '更多',
@@ -780,8 +772,7 @@ FullScreen.args = {
                 href: '/',
                 label: '高性能',
               },
-              content:
-                '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
+              content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
               more: {},
             },
             {
@@ -794,8 +785,7 @@ FullScreen.args = {
                 href: '/',
                 label: '易用的编辑器',
               },
-              content:
-                '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作',
+              content: '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作',
               more: {},
             },
             {
@@ -818,8 +808,7 @@ FullScreen.args = {
                 href: '#',
                 label: '安全性',
               },
-              content:
-                '超过45000名贡献者使该平台成为市场上最安全、最稳定的平台之一',
+              content: '超过45000名贡献者使该平台成为市场上最安全、最稳定的平台之一',
             },
           ],
         },
@@ -871,8 +860,7 @@ FullScreen.args = {
                 href: '/',
                 label: '高性能',
               },
-              content:
-                '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
+              content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
               more: {},
             },
           ],
@@ -887,8 +875,7 @@ FullScreen.args = {
                 href: '/',
                 label: '易用的编辑器',
               },
-              content:
-                '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作',
+              content: '通过友好的预览、拖放媒体提高内容编辑的易用性，高效的工作',
               more: {},
             },
             {
@@ -911,8 +898,7 @@ FullScreen.args = {
                 href: '#',
                 label: '安全性',
               },
-              content:
-                '超过45000名贡献者使该平台成为市场上最安全、最稳定的平台之一',
+              content: '超过45000名贡献者使该平台成为市场上最安全、最稳定的平台之一',
             },
           ],
         },
@@ -921,8 +907,7 @@ FullScreen.args = {
           spacer: 'md',
           body: '信使UI是基于 Material 的 Angular 前端框架， 五十多个丰富的组件可提供优秀的数字创新体验，使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。Builder 与众不同的是它完全融入到了 <strong class="text-primary">Storybook</strong> 当中，它是一个面向UI组件开发的工具，提供了组件驱动的开发方式、交互式展示和测试界面，以及文档化功能。<ul class="list-done"><li>可以复制整个页面的 JSON 或者单个组件的 JSON；</li><li>可以直接编辑组件的 JSON，所见即所得；</li></ul>',
           title: {
-            label:
-              '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
+            label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
             style: 'style-v1',
             classes: 'mat-headline-2 bold',
           },
diff --git a/src/stories/components/carousel/carousel2v1.stories.ts b/src/stories/components/carousel/carousel2v1.stories.ts
index 2ce6506d9..ae66c6770 100644
--- a/src/stories/components/carousel/carousel2v1.stories.ts
+++ b/src/stories/components/carousel/carousel2v1.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Carousel2v1Component } from '@uiux/combs/carousel/carousel2v1/carousel2v1.component';
 import { StorysModule } from '@core/module/storys.module';
@@ -38,7 +33,7 @@ const content: ICarouselBase = {
     classes: 'bg-fill-width overlay overlay-80',
     img: {
       src: '/assets/images/bg/bg-03.jpeg',
-      hostClasses: 'bg-center',
+      hostClasses: '',
     },
   },
   classes: '',
diff --git a/src/stories/components/profile/profile1v1.stories.ts b/src/stories/components/profile/profile1v1.stories.ts
index 6bb5cb09a..60a11c1e3 100644
--- a/src/stories/components/profile/profile1v1.stories.ts
+++ b/src/stories/components/profile/profile1v1.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Profile1v1Component } from '@uiux/combs/profile/profile1v1/profile1v1.component';
 import * as SwiperStories from 'src/stories/widgets/Swiper.stories';
@@ -47,7 +42,7 @@ const content: IProfile1v1 = {
   bannerBg: {
     classes: 'bg-fill-width overlay overlay-80',
     img: {
-      hostClasses: 'bg-center',
+      hostClasses: '',
       src: '/assets/images/16-9/business-14.jpeg',
       alt: 'page title',
     },
@@ -165,7 +160,7 @@ const componey: IProfile1v1 = {
   bannerBg: {
     classes: 'bg-fill-width overlay overlay-80',
     img: {
-      hostClasses: 'bg-center',
+      hostClasses: '',
       src: '/assets/images/16-9/business-14.jpeg',
       alt: 'page title',
     },
diff --git a/src/stories/components/search/search.stories.ts b/src/stories/components/search/search.stories.ts
index cb657ab77..1f2fc0858 100644
--- a/src/stories/components/search/search.stories.ts
+++ b/src/stories/components/search/search.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { SearchComponent } from '@uiux/combs/search/search.component';
 import { StorysModule } from '@core/module/storys.module';
@@ -45,7 +40,7 @@ const content: ISearch = {
     bg: {
       classes: 'bg-shadow overlay overlay-80',
       img: {
-        hostClasses: 'bg-center',
+        hostClasses: '',
         src: '/assets/images/hero/1-6.jpg',
         mobile: '/assets/images/mobile/mobile-03.jpg',
       },
diff --git a/src/stories/feature/builder/Jsoneditor.stories.ts b/src/stories/feature/builder/Jsoneditor.stories.ts
index f9755ee79..8b75c7bd9 100644
--- a/src/stories/feature/builder/Jsoneditor.stories.ts
+++ b/src/stories/feature/builder/Jsoneditor.stories.ts
@@ -11,10 +11,7 @@ import { BrandingModule } from '@core/branding/branding.module';
 import { CalculatorModule } from '@uiux/combs/calculator/calculator.module';
 import { of } from 'rxjs';
 import { BRANDING } from '@core/token/token-providers';
-import {
-  defaultHeader,
-  footerInverse,
-} from '@modules/builder/data/Branding.json';
+import { defaultHeader, footerInverse } from '@modules/builder/data/Branding.json';
 import { JsoneditorComponent } from '@uiux/combs/other/jsoneditor/jsoneditor.component';
 import { IJsoneditor } from '@core/interface/widgets/IJsoneditor';
 import { importProvidersFrom } from '@angular/core';
@@ -82,7 +79,7 @@ const content: IJsoneditor = {
           },
           classes: 'xy-center',
           bg: {
-            classes: 'bg-center overlay overlay-80',
+            classes: ' overlay overlay-80',
             img: {
               src: '/assets/images/16-9/business-14.jpeg',
               mobile: '/assets/images/mobile/mobile-03.jpg',
diff --git a/src/stories/feature/hero/hero1v1.stories.ts b/src/stories/feature/hero/hero1v1.stories.ts
index b76ca26c1..bf044a1d4 100644
--- a/src/stories/feature/hero/hero1v1.stories.ts
+++ b/src/stories/feature/hero/hero1v1.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Hero1v1Component } from '@uiux/combs/hero/hero1v1/hero1v1.component';
 import { StorysModule } from '@core/module/storys.module';
@@ -72,7 +67,7 @@ const content: IHero1v1 = {
         },
         classes: 'xy-center',
         bg: {
-          classes: 'bg-center overlay overlay-80',
+          classes: ' overlay overlay-80',
           img: {
             src: '/assets/images/16-9/business-14.jpeg',
             mobile: '/assets/images/mobile/mobile-03.jpg',
diff --git a/src/stories/feature/hero/hero1v2.stories.ts b/src/stories/feature/hero/hero1v2.stories.ts
index a1406c6a7..93daa0040 100644
--- a/src/stories/feature/hero/hero1v2.stories.ts
+++ b/src/stories/feature/hero/hero1v2.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Hero1v2Component } from '@uiux/combs/hero/hero1v2/hero1v2.component';
 import { StorysModule } from '@core/module/storys.module';
@@ -194,7 +189,7 @@ const content: IHero1v2 = {
     ],
   },
   bg: {
-    classes: 'bg-center overlay overlay-80',
+    classes: ' overlay overlay-80',
     img: {
       src: '/assets/images/hero/bg-pattern-hero.png',
       mobile: '/assets/images/hero/bg-pattern-hero.png',
diff --git a/src/stories/feature/hero/hero1v4.stories.ts b/src/stories/feature/hero/hero1v4.stories.ts
index 2c317f85b..a2167d412 100644
--- a/src/stories/feature/hero/hero1v4.stories.ts
+++ b/src/stories/feature/hero/hero1v4.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { StorysModule } from '@core/module/storys.module';
 import { Hero1v4Component } from '@uiux/combs/hero/hero1v4/hero1v4.component';
@@ -41,8 +36,7 @@ const content: IHero1v4 = {
   classes: '',
   text: {
     title: {
-      label:
-        '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
+      label: '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
       classes: 'mat-headline-2 bold',
       style: 'style-v1',
     },
@@ -86,8 +80,7 @@ const shape: IHero1v4 = {
   classes: '',
   text: {
     title: {
-      label:
-        '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
+      label: '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
       classes: 'mat-headline-2 bold',
       style: 'style-v1',
     },
@@ -119,7 +112,7 @@ const shape: IHero1v4 = {
     classes: 'bg-fill-width overlay- overlay-',
     img: {
       src: '/assets/images/bg/bg-02.png',
-      hostClasses: 'bg-center',
+      hostClasses: '',
     },
   },
   order: -1,
diff --git a/src/stories/feature/hero/hero2v3.stories.ts b/src/stories/feature/hero/hero2v3.stories.ts
index cac2c426e..1c8a3e919 100644
--- a/src/stories/feature/hero/hero2v3.stories.ts
+++ b/src/stories/feature/hero/hero2v3.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Hero2v3Component } from '@uiux/combs/hero/hero2v3/hero2v3.component';
 import { StorysModule } from '@core/module/storys.module';
@@ -41,9 +36,9 @@ const content: IHero2v3 = {
   spacer: 'lg',
   shape: true,
   bg: {
-    classes: 'bg-center',
+    classes: '',
     img: {
-      hostClasses: 'bg-center',
+      hostClasses: '',
       src: '/assets/images/bg/bg-04.png',
     },
   },
diff --git a/src/stories/feature/showcase/showcase1v3.stories.ts b/src/stories/feature/showcase/showcase1v3.stories.ts
index e0291a2e3..29ee1af20 100644
--- a/src/stories/feature/showcase/showcase1v3.stories.ts
+++ b/src/stories/feature/showcase/showcase1v3.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  StoryObj,
-  applicationConfig,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular';
 
 import { Showcase1v3Component } from '@uiux/combs/showcase/showcase1v3/showcase1v3.component';
 import * as ContactUs from '@stories/drupal/form/ContactUs.stories';
@@ -46,7 +41,7 @@ const content: IShowcase1v3 = {
   bg: {
     classes: 'bg-fill-width overlay overlay-20',
     img: {
-      hostClasses: 'bg-center',
+      hostClasses: '',
       src: '/assets/images/hero/bg-pattern-hero.png',
       alt: 'page title',
     },
@@ -56,9 +51,9 @@ const content: IShowcase1v3 = {
       type: 'text',
       spacer: 'none',
       style: {
-        margin: '0 auto',
+        'margin': '0 auto',
         'text-align': 'center',
-        width: '600px',
+        'width': '600px',
       },
       body: 'Storybook是一个用于开发和展示UI组件的工具。它提供了一个独立的环境，开发人员可以在其中构建、测试和文档化单个UI组件，而无需依赖于整个应用程序的上下文，Storybook是一个用于开发和展示UI组件的工具。',
       actionsAlign: 'center center',
@@ -140,7 +135,7 @@ const video: IShowcase1v3 = {
   bg: {
     classes: 'bg-fill-width overlay overlay-80',
     img: {
-      hostClasses: 'bg-center',
+      hostClasses: '',
       src: '/assets/images/showcase/8.jpg',
       alt: 'page title',
     },
@@ -150,9 +145,9 @@ const video: IShowcase1v3 = {
       type: 'text',
       spacer: 'none',
       style: {
-        margin: '0 auto',
+        'margin': '0 auto',
         'text-align': 'center',
-        width: '600px',
+        'width': '600px',
       },
       body: 'Storybook是一个开源的前端工具，用于开发、测试和文档化UI组件。它提供了一个独立的环境，开发人员可以在其中构建和展示单个UI组件，而无需依赖于整个应用程序的上下文。',
       actionsAlign: 'center center',
diff --git a/src/stories/sample/calendar-page.stories.ts b/src/stories/sample/calendar-page.stories.ts
index 420644e44..e7d60567e 100644
--- a/src/stories/sample/calendar-page.stories.ts
+++ b/src/stories/sample/calendar-page.stories.ts
@@ -1,9 +1,4 @@
-import {
-  moduleMetadata,
-  Meta,
-  componentWrapperDecorator,
-  StoryObj,
-} from '@storybook/angular';
+import { moduleMetadata, Meta, componentWrapperDecorator, StoryObj } from '@storybook/angular';
 
 import { BlockComponent } from '@modules/render/block/block.component';
 import { RenderModule } from '@modules/render/render.module';
@@ -14,10 +9,7 @@ import { of } from 'rxjs';
 import * as calendarStory from '@stories/widgets/Calendar.stories';
 import { BRANDING } from '@core/token/token-providers';
 const calendar: any = calendarStory.Default.args;
-import {
-  defaultHeader,
-  footerInverse,
-} from '@modules/builder/data/Branding.json';
+import { defaultHeader, footerInverse } from '@modules/builder/data/Branding.json';
 const meta: Meta<BlockComponent> = {
   title: '示例页面/工作日历',
   id: 'calendar-page',
@@ -26,12 +18,7 @@ const meta: Meta<BlockComponent> = {
     moduleMetadata({
       declarations: [],
       entryComponents: [...StorysModule.forEntryComponents()],
-      imports: [
-        RenderModule,
-        StorysModule.forRoot(),
-        CalendarModule,
-        BrandingModule,
-      ],
+      imports: [RenderModule, StorysModule.forRoot(), CalendarModule, BrandingModule],
       providers: [
         {
           provide: BRANDING,
@@ -73,7 +60,7 @@ const content = of({
       bannerBg: {
         classes: 'bg-fill-width overlay overlay-40',
         img: {
-          hostClasses: 'bg-center',
+          hostClasses: '',
           src: '/assets/images/16-9/business-03.jpg',
           alt: 'grass-3251984_1920.jpg',
         },
diff --git a/src/stories/sample/home/data/home_v11.ts b/src/stories/sample/home/data/home_v11.ts
index b7e6523bc..e2028f278 100644
--- a/src/stories/sample/home/data/home_v11.ts
+++ b/src/stories/sample/home/data/home_v11.ts
@@ -108,7 +108,7 @@ export const home_v11 = {
         ],
       },
       bg: {
-        classes: 'bg-center overlay overlay-80',
+        classes: ' overlay overlay-80',
         img: {
           src: '/assets/images/hero/bg-pattern-hero.png',
           mobile: '/assets/images/hero/bg-pattern-hero.png',
diff --git a/src/stories/sample/home/data/home_v13.ts b/src/stories/sample/home/data/home_v13.ts
index 04d6ad469..0d61d20c1 100644
--- a/src/stories/sample/home/data/home_v13.ts
+++ b/src/stories/sample/home/data/home_v13.ts
@@ -121,8 +121,7 @@ export const home_v13 = {
     {
       type: 'showcase-1v1',
       title: {
-        label:
-          '<p style="display: inline-block; margin-bottom: 0px;">我们的服务</p>',
+        label: '<p style="display: inline-block; margin-bottom: 0px;">我们的服务</p>',
         style: 'style-v2',
       },
       subTitle: {
@@ -347,7 +346,7 @@ export const home_v13 = {
           src: '/assets/images/showcase/6.jpg',
           classes: 'object-contain',
           alt: '6',
-          hostClasses: 'bg-center',
+          hostClasses: '',
         },
         classes: 'bg-fill-width overlay overlay-80',
         overlay: ' ',
@@ -375,8 +374,7 @@ export const home_v13 = {
       type: 'showcase-1v3',
       text: {
         title: {
-          label:
-            '<p style="display: inline-block; margin-bottom: 0px;">市场领导力</p>',
+          label: '<p style="display: inline-block; margin-bottom: 0px;">市场领导力</p>',
           style: 'style-v1',
           classes: 'mat-headline-1',
         },
@@ -386,9 +384,9 @@ export const home_v13 = {
           type: 'text',
           spacer: 'none',
           style: {
-            margin: '0 auto',
+            'margin': '0 auto',
             'text-align': 'center',
-            width: '600px',
+            'width': '600px',
           },
           body: '作为行业领导者，我们公司凭借卓越的产品质量、创新的技术研发以及优质的客户服务，在市场中稳居主导地位，持续引领行业发展。',
           actionsAlign: 'center center',
diff --git a/src/stories/sample/home/data/home_v2.ts b/src/stories/sample/home/data/home_v2.ts
index 863748877..215737ee5 100644
--- a/src/stories/sample/home/data/home_v2.ts
+++ b/src/stories/sample/home/data/home_v2.ts
@@ -23,9 +23,9 @@ export const home_v2 = {
       spacer: 'lg',
       shape: true,
       bg: {
-        classes: 'bg-center',
+        classes: '',
         img: {
-          hostClasses: 'bg-center',
+          hostClasses: '',
           src: '/assets/images/bg/bg-04.png',
         },
       },
@@ -106,8 +106,7 @@ export const home_v2 = {
     {
       type: 'showcase-1v1',
       title: {
-        label:
-          '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
+        label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
         style: 'style-v3',
       },
       row: 3,
@@ -344,8 +343,7 @@ export const home_v2 = {
             href: '/',
             label: '高性能',
           },
-          content:
-            '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
+          content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快',
           more: {
             href: '#',
             label: '更多',
diff --git a/src/stories/sample/home/data/home_v3.ts b/src/stories/sample/home/data/home_v3.ts
index 7d5408546..ca24bbd40 100644
--- a/src/stories/sample/home/data/home_v3.ts
+++ b/src/stories/sample/home/data/home_v3.ts
@@ -48,7 +48,7 @@ export const home_v3 = {
             },
             classes: 'xy-center',
             bg: {
-              classes: 'bg-center overlay overlay-80',
+              classes: ' overlay overlay-80',
               img: {
                 src: '/assets/images/16-9/business-14.jpeg',
                 mobile: '/assets/images/mobile/mobile-03.jpg',
@@ -244,8 +244,7 @@ export const home_v3 = {
             href: '#',
             label: '高性能',
           },
-          content:
-            '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
+          content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
           more: {
             href: '#',
             label: '+',
@@ -527,8 +526,7 @@ export const home_v3 = {
     {
       type: 'text',
       title: {
-        label:
-          '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
+        label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
         style: 'style-v1',
         classes: 'mat-headline-2 bold',
       },
diff --git a/src/stories/sample/home/data/home_v4.ts b/src/stories/sample/home/data/home_v4.ts
index fb6f96ed9..61d83f144 100644
--- a/src/stories/sample/home/data/home_v4.ts
+++ b/src/stories/sample/home/data/home_v4.ts
@@ -30,8 +30,7 @@ export const home_v4 = {
             href: '#',
             label: '高性能',
           },
-          content:
-            '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
+          content: '默认情况下，Drupal 运行速度很快，您可以优化部署，使其运行得更快；',
           more: {
             href: '#',
             label: '+',
@@ -298,7 +297,7 @@ export const home_v4 = {
       bg: {
         classes: 'bg-fill-width overlay overlay-80',
         img: {
-          hostClasses: 'bg-center',
+          hostClasses: '',
           src: '/assets/images/showcase/8.jpg',
           alt: 'page title',
         },
@@ -308,9 +307,9 @@ export const home_v4 = {
           type: 'text',
           spacer: 'none',
           style: {
-            margin: '0 auto',
+            'margin': '0 auto',
             'text-align': 'center',
-            width: '600px',
+            'width': '600px',
           },
           body: 'Storybook是一个开源的前端工具，用于开发、测试和文档化UI组件。它提供了一个独立的环境，开发人员可以在其中构建和展示单个UI组件，而无需依赖于整个应用程序的上下文。',
           actionsAlign: 'center center',
@@ -665,8 +664,7 @@ export const home_v4 = {
     {
       type: 'text',
       title: {
-        label:
-          '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
+        label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
         style: 'style-v1',
         classes: 'mat-headline-1 bold',
       },
diff --git a/src/stories/sample/home/data/home_v5.ts b/src/stories/sample/home/data/home_v5.ts
index e77557042..1bdc87950 100644
--- a/src/stories/sample/home/data/home_v5.ts
+++ b/src/stories/sample/home/data/home_v5.ts
@@ -133,8 +133,7 @@ export const home_v5 = {
             href: '#',
             label: '会员无限制访问',
           },
-          content:
-            '<p>只要支付799元/年，就可以成为会员，无限制观看所有的视频课程</p>\r\n',
+          content: '<p>只要支付799元/年，就可以成为会员，无限制观看所有的视频课程</p>\r\n',
           more: {
             href: '#',
             label: '成为会员',
@@ -149,8 +148,7 @@ export const home_v5 = {
             href: '#',
             label: '我们的课程',
           },
-          content:
-            '<p>课程包括了初入职场的初级课程，也包括进阶高级的精品好课</p>\r\n',
+          content: '<p>课程包括了初入职场的初级课程，也包括进阶高级的精品好课</p>\r\n',
           more: {
             href: '#',
             label: '浏览更多',
@@ -165,8 +163,7 @@ export const home_v5 = {
             href: '#',
             label: '优秀的老师',
           },
-          content:
-            '<p>所有的老师都是层层筛选和把关，为学员提供真实有效的技能和经验</p>\r\n',
+          content: '<p>所有的老师都是层层筛选和把关，为学员提供真实有效的技能和经验</p>\r\n',
           more: {
             href: '#',
             label: '成为老师',
@@ -363,7 +360,7 @@ export const home_v5 = {
       bg: {
         classes: 'bg-fill-width overlay overlay-80',
         img: {
-          hostClasses: 'bg-center',
+          hostClasses: '',
           src: '/assets/images/showcase/8.jpg',
           alt: 'page title',
         },
@@ -373,9 +370,9 @@ export const home_v5 = {
           type: 'text',
           spacer: 'none',
           style: {
-            margin: '0 auto',
+            'margin': '0 auto',
             'text-align': 'center',
-            width: '600px',
+            'width': '600px',
           },
           body: 'Storybook是一个开源的前端工具，用于开发、测试和文档化UI组件。它提供了一个独立的环境，开发人员可以在其中构建和展示单个UI组件，而无需依赖于整个应用程序的上下文。',
           actionsAlign: 'center center',
@@ -601,8 +598,7 @@ export const home_v5 = {
     {
       type: 'text',
       title: {
-        label:
-          '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
+        label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
         style: 'style-v1',
         classes: 'mat-headline-2 bold',
       },
diff --git a/src/stories/sample/home/data/home_v6.ts b/src/stories/sample/home/data/home_v6.ts
index d0d81b073..45d6d4b13 100644
--- a/src/stories/sample/home/data/home_v6.ts
+++ b/src/stories/sample/home/data/home_v6.ts
@@ -459,7 +459,7 @@ export const home_v6 = {
       bg: {
         classes: 'bg-fill-width overlay overlay-80',
         img: {
-          hostClasses: 'bg-center',
+          hostClasses: '',
           src: '/assets/images/showcase/8.jpg',
           alt: 'page title',
         },
@@ -469,9 +469,9 @@ export const home_v6 = {
           type: 'text',
           spacer: 'none',
           style: {
-            margin: '0 auto',
+            'margin': '0 auto',
             'text-align': 'center',
-            width: '800px',
+            'width': '800px',
           },
           body: '作为行业内的领军企业，始终秉承“科技以人为本，创新引领健康”的理念，积极履行社会责任，投身于公益医疗项目和公共卫生能力建设。我们坚信，只有不断探索前沿医疗科技，才能更好地应对未来全球健康挑战，让高品质医疗服务触手可及，普惠全民。',
           actionsAlign: 'center center',
diff --git a/src/stories/sample/home/data/home_v8.ts b/src/stories/sample/home/data/home_v8.ts
index 332f9fed6..07d43fec9 100644
--- a/src/stories/sample/home/data/home_v8.ts
+++ b/src/stories/sample/home/data/home_v8.ts
@@ -23,8 +23,7 @@ export const home_v8 = {
       classes: '',
       text: {
         title: {
-          label:
-            '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
+          label: '欢迎使用 <strong class="text-primary">Builder</strong> 快速构建页面',
           classes: 'mat-headline-2 bold',
           style: 'style-v1',
         },
@@ -56,7 +55,7 @@ export const home_v8 = {
         classes: 'bg-fill-width overlay- overlay-',
         img: {
           src: '/assets/images/bg/bg-02.png',
-          hostClasses: 'bg-center',
+          hostClasses: '',
         },
       },
       order: -1,
@@ -563,8 +562,7 @@ export const home_v8 = {
     {
       type: 'text',
       title: {
-        label:
-          '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
+        label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
         style: 'style-v1',
         classes: 'mat-headline-1 bold',
       },
diff --git a/src/stories/widgets/card/Card1v1.stories.ts b/src/stories/widgets/card/Card1v1.stories.ts
index af9757604..3fe7b9bdf 100644
--- a/src/stories/widgets/card/Card1v1.stories.ts
+++ b/src/stories/widgets/card/Card1v1.stories.ts
@@ -22,9 +22,7 @@ const meta: Meta<Card1v1Component> = {
     moduleMetadata({
       declarations: [...StorysModule.forEntryComponents()],
     }),
-    componentWrapperDecorator(
-      story => `<div class="widget relative  w-[300px]">${story}</div>`
-    ),
+    componentWrapperDecorator(story => `<div class="widget relative  w-[300px]">${story}</div>`),
   ],
 };
 
@@ -91,7 +89,7 @@ const comp: ICard1v1 = {
         classes: 'bg-fill-width overlay overlay-',
         img: {
           src: '/assets/images/bg/home-shape.png',
-          hostClasses: 'bg-center',
+          hostClasses: '',
         },
       },
       widget: [

From f5992ddf6fccbca1d7d9a3b49a56e8230ab35124 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 15:26:56 +0800
Subject: [PATCH 21/35] fix: common component, update builder data

---
 .../modules/builder/data/base-for-builder.ts  | 27 ++++++++++-
 .../builder/data/components-for-builder.ts    | 45 +++++++++++++++----
 .../builder/data/system-for-builder.ts        | 23 +++++++++-
 .../combs/carousel/swiper/swiper.component.ts | 22 +++------
 .../uiux/combs/chart/chart/chart.component.ts |  2 +
 .../dynamic-component.component.html          |  2 +-
 .../text-hero/text-hero.component.html        |  5 ++-
 src/theme/base/_layout.scss                   |  4 --
 tailwind.config.js                            |  1 +
 9 files changed, 97 insertions(+), 34 deletions(-)

diff --git a/src/app/modules/builder/data/base-for-builder.ts b/src/app/modules/builder/data/base-for-builder.ts
index 30c87ddae..cf455ad89 100644
--- a/src/app/modules/builder/data/base-for-builder.ts
+++ b/src/app/modules/builder/data/base-for-builder.ts
@@ -2802,6 +2802,7 @@ export const base = [
           svg: 'format-size',
         },
         content: {
+          spacer: 'md',
           type: 'text',
           title: {
             label: '欢迎使用 <strong class="text-primary">Web Builder</strong> 快速构建页面',
@@ -3422,10 +3423,24 @@ export const base = [
           svg: 'play-circle-outline',
         },
         content: {
-          type: 'video',
+          fullWidth: false,
+          spacer: 'none',
+          bgClasses: 'bg- bg-fill-width',
+          overlay: '',
+          containerClasses: '',
+          id: '',
+          bg: {
+            img: {
+              src: '',
+              alt: '',
+            },
+            classes: 'bg- bg-fill-width',
+            overlay: '',
+          },
           options: {
+            loop: false,
             controls: true,
-            aspectRatio: '16:9',
+            aspectRatio: '1:1',
             poster: '/assets/video/poster01.png',
             sources: [
               {
@@ -3433,7 +3448,14 @@ export const base = [
                 type: 'video/mp4',
               },
             ],
+            mode: 'cover',
+          },
+          animate: {
+            aos: {
+              enable: false,
+            },
           },
+          type: 'video',
         },
       },
       {
@@ -3503,6 +3525,7 @@ export const base = [
         },
         content: {
           type: 'contact-us',
+          spacer: 'xl',
           params: {
             webform_id: 'contact',
           },
diff --git a/src/app/modules/builder/data/components-for-builder.ts b/src/app/modules/builder/data/components-for-builder.ts
index fe04f6a39..dbe9cda7b 100644
--- a/src/app/modules/builder/data/components-for-builder.ts
+++ b/src/app/modules/builder/data/components-for-builder.ts
@@ -284,7 +284,7 @@ export const components: any[] = [
                 ],
               },
               bg: {
-                classes: ' overlay overlay-80',
+                classes: ' overlay overlay-',
                 img: {
                   src: '/assets/images/hero/bg-pattern-hero.png',
                   mobile: '/assets/images/hero/bg-pattern-hero.png',
@@ -467,7 +467,7 @@ export const components: any[] = [
                   left: '40%',
                   top: '10%',
                 },
-                classes: 'absolute',
+                classes: '!absolute',
                 body: '开启 Builder 后，可以从左侧选择组件拖动到想要的位置，甚至你可以在浏览前台任何页面时或者浏览 <strong class="text-primary">Storybook</strong> 页面时添加组件到预览页面。',
                 actionsAlign: 'start center',
                 actions: [
@@ -524,8 +524,8 @@ export const components: any[] = [
             label: '2v3',
             content: {
               type: 'hero-2v3',
-              id: 'xxx',
-              spacer: 'lg',
+              fullWidth: true,
+              spacer: 'none',
               shape: true,
               bg: {
                 classes: '',
@@ -710,6 +710,7 @@ export const components: any[] = [
               bg: {
                 classes: '',
               },
+              spacer: 'md',
               classes: '',
               elements: [
                 {
@@ -793,6 +794,7 @@ export const components: any[] = [
               bg: {
                 classes: 'bg- bg-fill-width',
               },
+              spacer: 'md',
               classes: '',
               elements: [
                 {
@@ -871,6 +873,7 @@ export const components: any[] = [
                 style: 'style-v3',
                 classes: 'mat-headline-3',
               },
+              spacer: 'md',
               row: 3,
               bg: {
                 classes: 'bg- bg-fill-width',
@@ -954,6 +957,7 @@ export const components: any[] = [
                 style: 'style-v1',
                 classes: 'mat-headline-3',
               },
+              spacer: 'md',
               subTitle: {
                 spacer: 'none',
                 classes: 'text-center',
@@ -1016,6 +1020,7 @@ export const components: any[] = [
                 style: 'style-v4',
                 classes: 'mat-headline-3',
               },
+              spacer: 'md',
               row: 3,
               bg: {
                 classes: 'bg-shadow bg-fill-width',
@@ -1098,6 +1103,7 @@ export const components: any[] = [
                 style: 'style-v5',
                 classes: 'mat-headline-3',
               },
+              spacer: 'md',
               row: 3,
               bg: {
                 classes: '',
@@ -1169,6 +1175,7 @@ export const components: any[] = [
               bg: {
                 classes: 'bg-none bg-fill-width',
               },
+              spacer: 'md',
               row: 3,
               classes: '',
               elements: [
@@ -1254,6 +1261,7 @@ export const components: any[] = [
                   classes: 'mat-headline-3',
                 },
               },
+              spacer: 'md',
               classes: 'text-light',
               bg: {
                 classes: 'bg-fill-width overlay overlay-20',
@@ -1309,6 +1317,7 @@ export const components: any[] = [
                   classes: 'mat-headline-3',
                 },
               },
+              spacer: 'md',
               classes: '',
               bg: {
                 classes: '',
@@ -1432,6 +1441,7 @@ export const components: any[] = [
                   classes: 'mat-headline-3',
                 },
               },
+              spacer: 'md',
               classes: 'text-light',
               bg: {
                 classes: 'bg-fill-width overlay overlay-80',
@@ -1802,6 +1812,7 @@ export const components: any[] = [
                 classes: 'text-center',
                 body: '<p class="text-center">欢迎分享 Drupal 优秀的数字创新体验</p>',
               },
+              spacer: 'md',
               bg: {
                 classes: '',
               },
@@ -1812,7 +1823,7 @@ export const components: any[] = [
                   type: 'card',
                   subTitle: '2024-07-13',
                   avatar: {
-                    src: '/assets/images/avatar/01.jpeg',
+                    src: '/assets/images/cases/porto1.jpg',
                     alt: '',
                   },
                   carousel: {
@@ -2128,6 +2139,7 @@ export const components: any[] = [
               bg: {
                 classes: '',
               },
+              spacer: 'md',
               classes: '',
               text: {
                 title: {
@@ -2230,6 +2242,7 @@ export const components: any[] = [
             label: '2v2',
             content: {
               type: 'showcase-2v2',
+              spacer: 'md',
               text: {
                 title: {
                   label: '本年度<strong class="text-primary">艺术作品</strong>代表作',
@@ -2472,7 +2485,7 @@ export const components: any[] = [
                   style: 'style-v1',
                   classes: 'mat-headline-3 blod',
                 },
-                classes: 'text-center',
+                classes: 'text-center mb-10',
                 body: '<p class="text-center">Storybook是一个用于开发和展示UI组件的工具。它提供了一个独立的环境，开发人员可以在其中构建、测试和文档化单个UI组件，而无需依赖于整个应用程序的上下文</p>',
               },
               spacer: 'md',
@@ -2546,7 +2559,7 @@ export const components: any[] = [
                 label: 'Storybook 是什么？',
                 href: '#',
               },
-              spacer: 'none',
+              spacer: 'md',
               bg: {
                 classes: '',
               },
@@ -2572,7 +2585,7 @@ export const components: any[] = [
                 label: 'Storybook 是什么？',
                 href: '#',
               },
-              spacer: 'none',
+              spacer: 'md',
               bg: {
                 classes: '',
               },
@@ -2611,6 +2624,7 @@ export const components: any[] = [
                 style: 'style-v1',
                 classes: 'mat-headline-3',
               },
+              spacer: 'md',
               bg: {
                 classes: 'bg-light bg-fill-width',
               },
@@ -2692,6 +2706,7 @@ export const components: any[] = [
             content: {
               type: 'showcase-3v5',
               id: '',
+              spacer: 'md',
               title: {
                 type: 'text',
                 spacer: 'sm',
@@ -2802,6 +2817,7 @@ export const components: any[] = [
             content: {
               type: 'showcase-3v6',
               id: '',
+              spacer: 'md',
               title: {
                 type: 'text',
                 spacer: 'sm',
@@ -2887,6 +2903,7 @@ export const components: any[] = [
             content: {
               type: 'showcase-3v6',
               id: '',
+              spacer: 'md',
               title: {
                 type: 'text',
                 spacer: 'sm',
@@ -3026,6 +3043,7 @@ export const components: any[] = [
             label: '3v7',
             content: {
               type: 'showcase-3v7',
+              spacer: 'md',
               title: {
                 type: 'text',
                 spacer: 'sm',
@@ -3130,6 +3148,7 @@ export const components: any[] = [
             label: '3v9',
             content: {
               type: 'showcase-3v9',
+              spacer: 'md',
               bg: {
                 classes: 'bg-fill-width',
                 img: {
@@ -3676,6 +3695,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      type: 'text',
                       title: {
                         label: '高性能',
                         style: 'style-v4',
@@ -3711,6 +3731,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      type: 'text',
                       title: {
                         label: '易用的编辑器',
                         style: 'style-v4',
@@ -3745,6 +3766,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      type: 'text',
                       title: {
                         label: '多语言',
                         style: 'style-v4',
@@ -3964,6 +3986,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      'type': 'text',
                       'title': {
                         label: '组件驱动开发',
                         style: 'style-v1',
@@ -4001,6 +4024,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      type: 'text',
                       title: {
                         label: '组件展示和测试',
                         style: 'style-v4',
@@ -4035,6 +4059,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      type: 'text',
                       title: {
                         label: '文档化',
                         style: 'style-v4',
@@ -4070,6 +4095,7 @@ export const components: any[] = [
                       height: '750px',
                     },
                     text: {
+                      type: 'text',
                       title: {
                         label: '插件和工具生态系统',
                         style: 'style-v4',
@@ -4619,6 +4645,7 @@ export const components: any[] = [
                 label: '近期作品',
                 style: 'style-v5',
               },
+              spacer: 'md',
               classes: '',
               bg: {
                 classes: 'bg-white bg-fill-width',
@@ -5022,6 +5049,7 @@ export const components: any[] = [
             label: '2v1',
             content: {
               type: 'carousel-2v1',
+              spacer: 'md',
               title: {
                 label: '用户是如何评价 Storybook',
                 style: 'style-v1',
@@ -5205,6 +5233,7 @@ export const components: any[] = [
         label: '洗牌',
         content: {
           type: 'shuffle',
+          spacer: 'md',
           title: {
             label: 'Vue 开发',
             style: 'style-v1',
diff --git a/src/app/modules/builder/data/system-for-builder.ts b/src/app/modules/builder/data/system-for-builder.ts
index e6003ef28..e5811d6d2 100644
--- a/src/app/modules/builder/data/system-for-builder.ts
+++ b/src/app/modules/builder/data/system-for-builder.ts
@@ -9,6 +9,8 @@ export const system: any[] = [
         },
         content: {
           style: 'normal',
+          fullWidth: true,
+          spacer: 'none',
           type: 'banner-simple',
           bannerBg: {
             classes: 'bg-fill-width overlay overlay-60',
@@ -42,6 +44,8 @@ export const system: any[] = [
         },
         content: {
           type: 'article',
+          fullWidth: true,
+          spacer: 'none',
           title: '使用 DevTools 对 Angular 前端应用性能分析优化',
           banner: {
             img: {
@@ -1570,6 +1574,8 @@ export const system: any[] = [
         },
         content: {
           type: 'user-center',
+          fullWidth: true,
+          spacer: 'none',
           params: {
             showProfile: false,
             showDetails: false,
@@ -1835,6 +1841,8 @@ export const system: any[] = [
         },
         content: {
           type: 'profile-1v1',
+          fullWidth: true,
+          spacer: 'none',
           bannerBg: {
             classes: 'bg-fill-width overlay overlay-80',
             img: {
@@ -2086,6 +2094,8 @@ export const system: any[] = [
         },
         content: {
           type: 'profile-1v1',
+          fullWidth: true,
+          spacer: 'none',
           bannerBg: {
             classes: 'bg-fill-width overlay overlay-80',
             img: {
@@ -2327,6 +2337,8 @@ export const system: any[] = [
         content: {
           type: 'search',
           api: '/api/v1/content',
+          fullWidth: true,
+          spacer: 'none',
           header: {
             bg: {
               classes: 'bg-shadow overlay overlay-80',
@@ -3234,6 +3246,7 @@ export const system: any[] = [
         },
         content: {
           type: 'full-calendar',
+          fullWidth: true,
           spacer: 'xxl',
           text: {
             title: {
@@ -3455,6 +3468,8 @@ export const system: any[] = [
         },
         content: {
           type: 'location',
+          fullWidth: true,
+          spacer: 'md',
           title: {
             label: '我的位置',
             style: 'style-v1',
@@ -3484,7 +3499,7 @@ export const system: any[] = [
           svg: 'text-search-variant',
         },
         content: {
-          fullWidth: false,
+          fullWidth: true,
           spacer: 'md',
           bgClasses: 'bg-fill-width',
           overlay: '',
@@ -3672,6 +3687,7 @@ export const system: any[] = [
         label: '问答',
         content: {
           type: 'question',
+          fullWidth: true,
           title: '作为一个前端开发人员，如何让自己保持学习的热忱并坚持下去？',
           body: '前端技术不断更迭，日新月异，如何保持学习的心态。',
           topic: {
@@ -3725,13 +3741,14 @@ export const system: any[] = [
         label: '联系表单',
         content: {
           type: 'contact-us-1v1',
+          fullWidth: true,
           text: {
             title: {
               label: '联系我们',
               style: 'style-v1',
               classes: 'mat-headline-3',
             },
-            classes: 'text-light text-center',
+            classes: 'text-light text-center mb-10',
             body: '如果您有任何需要帮助，请联系我们！',
           },
           classes: 'text-center',
@@ -4978,6 +4995,8 @@ export const system: any[] = [
         label: '位置列表',
         content: {
           type: 'map-list-v1',
+          fullWidth: true,
+          spacer: 'lg',
           title: {
             label: '南宁市创业孵化服务中心',
             style: 'style-v4',
diff --git a/src/app/uiux/combs/carousel/swiper/swiper.component.ts b/src/app/uiux/combs/carousel/swiper/swiper.component.ts
index 3dd47df70..32e37afed 100644
--- a/src/app/uiux/combs/carousel/swiper/swiper.component.ts
+++ b/src/app/uiux/combs/carousel/swiper/swiper.component.ts
@@ -10,7 +10,6 @@ import {
   EventEmitter,
   inject,
   OnChanges,
-  SimpleChange,
   SimpleChanges,
 } from '@angular/core';
 
@@ -26,9 +25,7 @@ register();
   styleUrls: ['./swiper.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SwiperComponent
-  implements OnInit, AfterViewInit, OnChanges, OnDestroy
-{
+export class SwiperComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   @Input() content: ISwiper;
   @Input() index: number;
   @Input() navigationSub: Subject<any>;
@@ -58,23 +55,16 @@ export class SwiperComponent
         },
       };
     }
-    this.config = Object.assign(
-      this.defaultConfig,
-      this.content.params,
-      customPagination
-    );
+    this.config = Object.assign(this.defaultConfig, this.content.params, customPagination);
   }
   ngAfterViewInit(): void {
     if (this.screenService.isPlatformBrowser()) {
       Object.assign(this.swiper.nativeElement, this.config);
       this.swiper.nativeElement.initialize();
-      this.swiper.nativeElement.addEventListener(
-        'swiperslidechange',
-        (event: any) => {
-          const [swiper] = event.detail;
-          this.slideChange.emit(swiper);
-        }
-      );
+      this.swiper.nativeElement.addEventListener('swiperslidechange', (event: any) => {
+        const [swiper] = event.detail;
+        this.slideChange.emit(swiper);
+      });
       if (this.navigationSub) {
         this.navigationSub.subscribe(action => {
           if (action > 0) {
diff --git a/src/app/uiux/combs/chart/chart/chart.component.ts b/src/app/uiux/combs/chart/chart/chart.component.ts
index c1f90ee0e..9db8c95c4 100644
--- a/src/app/uiux/combs/chart/chart/chart.component.ts
+++ b/src/app/uiux/combs/chart/chart/chart.component.ts
@@ -19,6 +19,7 @@ import {
   GridComponent,
   DatasetComponent,
   TransformComponent,
+  LegendComponent,
 } from 'echarts/components';
 // Features like Universal Transition and Label Layout
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -40,6 +41,7 @@ echarts.use([
   LabelLayout,
   UniversalTransition,
   CanvasRenderer,
+  LegendComponent,
 ]);
 @Component({
   selector: 'app-chart',
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index ffc6cba7e..a231af58a 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -14,7 +14,7 @@
       <app-bg-img [attr.data-path]="'bg'" [content]="content.bg" />
     }
 
-    <div class="{{ content?.fullWidth ? '' : 'container' }}">
+    <div class="relative z-10 {{ content?.fullWidth ? '' : 'container' }}">
       <ng-container #componentContainer />
     </div>
 
diff --git a/src/app/uiux/widgets/text-hero/text-hero.component.html b/src/app/uiux/widgets/text-hero/text-hero.component.html
index 719f39a9f..e300a58d4 100644
--- a/src/app/uiux/widgets/text-hero/text-hero.component.html
+++ b/src/app/uiux/widgets/text-hero/text-hero.component.html
@@ -4,6 +4,9 @@
     [style]="content.params"
     [ngClass]="content.theme"
   >
-    <app-text [attr.data-path]="'text'" [content]="content.text" />
+    <app-dynamic-component
+      [attr.data-path]="'text'"
+      [inputs]="content.text"
+    ></app-dynamic-component>
   </div>
 }
diff --git a/src/theme/base/_layout.scss b/src/theme/base/_layout.scss
index 126641372..b2cfe0b52 100644
--- a/src/theme/base/_layout.scss
+++ b/src/theme/base/_layout.scss
@@ -109,10 +109,6 @@ img {
   vertical-align: middle;
 }
 
-.relative {
-  z-index: 0;
-}
-
 .clearfix {
   &:before,
   &:after {
diff --git a/tailwind.config.js b/tailwind.config.js
index b295b3a14..06df5e742 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -72,6 +72,7 @@ module.exports = {
     'order-1',
     'order-0',
     '!overflow-visible',
+    '!absolute',
   ],
   theme: {
     screens: {

From f1221ccc88f161489e8adb6c8a26e2790bdf14c9 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 22:44:08 +0800
Subject: [PATCH 22/35] style: page list menu btn

---
 .../modules/builder/sidebar/page-list/page-list.component.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/builder/sidebar/page-list/page-list.component.scss b/src/app/modules/builder/sidebar/page-list/page-list.component.scss
index 9ddfb27b8..2be32c27e 100644
--- a/src/app/modules/builder/sidebar/page-list/page-list.component.scss
+++ b/src/app/modules/builder/sidebar/page-list/page-list.component.scss
@@ -52,7 +52,7 @@
         .mat-mdc-button-base {
           font-size: 12px;
           line-height: 24px;
-          height: auto;
+          height: 24px;
         }
       }
       &.active {

From 94526606aff15e1d33e664e96e3a6f7b96a55539 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 22:52:16 +0800
Subject: [PATCH 23/35] style: widget toolbar

---
 .../builder/layout-builder/layout-builder.component.scss     | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.scss b/src/app/modules/builder/layout-builder/layout-builder.component.scss
index 1dc9d5977..b2e98f8b0 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.scss
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.scss
@@ -27,14 +27,11 @@
           }
         }
         .block-toolbar {
+          position: absolute;
           opacity: 0;
-          height: 0;
           white-space: nowrap;
-          pointer-events: none;
           &[data-popper-placement] {
             opacity: 1;
-            pointer-events: auto;
-            height: auto;
           }
         }
       }

From b9eda54bb6c95d24ff5c358381e544593f3674fa Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 23:09:17 +0800
Subject: [PATCH 24/35] quick fix

---
 src/app/modules/builder/factory/getComponentSetting.ts         | 3 ++-
 .../builder/component-toolbar/component-toolbar.component.ts   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/builder/factory/getComponentSetting.ts b/src/app/modules/builder/factory/getComponentSetting.ts
index 3ae48659a..7f8333d5f 100644
--- a/src/app/modules/builder/factory/getComponentSetting.ts
+++ b/src/app/modules/builder/factory/getComponentSetting.ts
@@ -7,7 +7,8 @@ import { getBgClasses, getGridLayoutConfig, getOverlay, getSpacerOptions } from
 import { getVideo } from './getVideo';
 import { getWidgetSetting } from './getWidgetSetting';
 
-export function getComponentSetting(content: any): FormlyFieldConfig[] {
+export function getComponentSetting(content: any, path: string): FormlyFieldConfig[] {
+  // TODO: base path to order tabs
   const fields: FormlyFieldConfig = {
     type: 'tabs',
     key: 'component',
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index 70291fdbc..d32d4287d 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -78,7 +78,7 @@ export class ComponentToolbarComponent implements OnInit {
     const { type } = content;
     const path = this.util.generatePath(event.target);
     const component = type ? content : content.content;
-    const fields: FormlyFieldConfig[] = getComponentSetting(component);
+    const fields: FormlyFieldConfig[] = getComponentSetting(component, path);
     this.hiddenPicker();
     this.builder.showComponentSetting(component, fields, path);
   }

From 98978d251f48abd3d2c8569e82102de8ae6d7652 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Wed, 8 Jan 2025 23:21:38 +0800
Subject: [PATCH 25/35] update docs

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 065c86432..561c248b5 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,8 @@
 | 页面预览             | 调转到新窗口查看真实的页面                                            |
 | 响应式预览           | 可切换不同设备尺寸查看页面响应式排版                                  |
 
+> 基于 DeepSeek AI 生成UI组件、图表、文案已经开发测试当中，敬请期待。
+
 ## Web builder 管理微信小程序的页面和组件
 
 <p align="center">
@@ -71,8 +73,9 @@
 
 ## 相关视频演示
 
+- [使用Web builder 构建Drupal CMS 预览版宣传着陆页](https://www.bilibili.com/video/BV1mD6hY6Et3/)
+- [支持AOS通用页面滚动动画](https://www.bilibili.com/video/BV1VKkSY3E1r/)
 - [Layout 嵌套](https://www.bilibili.com/video/BV1pH4y1L7qk)
-- [组件动画配置](https://www.bilibili.com/video/BV17F4m157uP)
 - [API 数据来源](https://www.bilibili.com/video/BV1ux4y1n7MA/) | [静态数据来源](https://www.bilibili.com/video/BV1rf421R7He/) TailwindCss 自定义组件
 - [复制功能快速构建组件](https://www.bilibili.com/video/BV1nF4m1w7cs/)
 - [多语言发布及媒体库管理](https://www.bilibili.com/video/BV1XohfeoEtz/)

From 59d30919d72e4bdbeb778b2d833010c50124b4a8 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 9 Jan 2025 10:39:07 +0800
Subject: [PATCH 26/35] quick fix

---
 .../header-banner/header-banner.component.html    |  2 +-
 .../main/default-page/default-page.component.html |  2 +-
 .../main/manage-page/manage-page.component.html   |  2 +-
 .../combs/carousel/swiper/swiper.component.html   |  2 +-
 .../dashboard-box/dashboard-box.component.html    |  2 +-
 .../combs/hero/hero1v4/hero1v4.component.html     |  2 +-
 .../taxonomy-thin-list.component.html             |  2 +-
 .../combs/masonry/shuffle/shuffle.component.html  |  2 +-
 .../summary-item/summary-item.component.html      |  2 +-
 .../node/common/summary/summary.component.html    |  2 +-
 .../uiux/combs/node/relate/relate.component.html  |  2 +-
 .../uiux/combs/node/report/report.component.html  |  2 +-
 .../other/autoclose/autoclose.component.html      |  2 +-
 .../user-center/user-center.component.html        |  2 +-
 .../search/search-list/search-list.component.html |  2 +-
 .../showcase3v9/showcase3v9.component.html        |  4 ++--
 .../widgets/card/card1v6/card1v6.component.html   |  5 +----
 src/app/uiux/widgets/dialog/dialog.component.html |  4 ++--
 src/app/uiux/widgets/panel/panel.component.html   |  5 +----
 src/app/uiux/widgets/tab/tab.component.html       | 15 +++------------
 20 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/src/app/core/branding/header/header-banner/header-banner.component.html b/src/app/core/branding/header/header-banner/header-banner.component.html
index e5cf891bb..8e304e2c8 100644
--- a/src/app/core/branding/header/header-banner/header-banner.component.html
+++ b/src/app/core/branding/header/header-banner/header-banner.component.html
@@ -1,3 +1,3 @@
 <div class="header-banner relative">
-  <app-dynamic-component [inputs]="{ content: content }" />
+  <app-dynamic-component [inputs]="content" />
 </div>
diff --git a/src/app/modules/builder/main/default-page/default-page.component.html b/src/app/modules/builder/main/default-page/default-page.component.html
index b44f960ef..45a4056e8 100644
--- a/src/app/modules/builder/main/default-page/default-page.component.html
+++ b/src/app/modules/builder/main/default-page/default-page.component.html
@@ -1,7 +1,7 @@
 <div class="default-page" matTooltip="从边栏拖动组件到编辑区">
   @if (content$ | async; as content) {
     @for (item of content.body; track item) {
-      <app-dynamic-component [inputs]="{ content: item }" />
+      <app-dynamic-component [inputs]="item" />
     }
   }
 </div>
diff --git a/src/app/modules/builder/main/manage-page/manage-page.component.html b/src/app/modules/builder/main/manage-page/manage-page.component.html
index 4becece73..2e7151c27 100644
--- a/src/app/modules/builder/main/manage-page/manage-page.component.html
+++ b/src/app/modules/builder/main/manage-page/manage-page.component.html
@@ -2,7 +2,7 @@
   @if (pageContent$ | async; as page) {
     @if (page.body) {
       @for (item of page.body; track $index) {
-        <app-dynamic-component [inputs]="{ content: item }" />
+        <app-dynamic-component [inputs]="item" />
       }
     } @else {
       <mat-spinner class="page-loading" diameter="50" color="primary" />
diff --git a/src/app/uiux/combs/carousel/swiper/swiper.component.html b/src/app/uiux/combs/carousel/swiper/swiper.component.html
index 07606bbc8..f3bd6a8b5 100644
--- a/src/app/uiux/combs/carousel/swiper/swiper.component.html
+++ b/src/app/uiux/combs/carousel/swiper/swiper.component.html
@@ -10,7 +10,7 @@
       <app-dynamic-component
         [attr.data-path]="i"
         [ngClass]="content.sliderClasses"
-        [inputs]="{ content: slide }"
+        [inputs]="slide"
       />
     </swiper-slide>
   }
diff --git a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
index eca532677..b9a6164ad 100644
--- a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
+++ b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
@@ -25,7 +25,7 @@
       </div>
     </div>
   }
-  <app-dynamic-component [attr.data-path]="'widget'" [inputs]="{ content: widget$ | async }" />
+  <app-dynamic-component [attr.data-path]="'widget'" [inputs]="widget$ | async" />
   @if (loading) {
     <div class="loading-inner">
       <mat-spinner diameter="50" />
diff --git a/src/app/uiux/combs/hero/hero1v4/hero1v4.component.html b/src/app/uiux/combs/hero/hero1v4/hero1v4.component.html
index 916543779..3dd8cd5b0 100644
--- a/src/app/uiux/combs/hero/hero1v4/hero1v4.component.html
+++ b/src/app/uiux/combs/hero/hero1v4/hero1v4.component.html
@@ -7,7 +7,7 @@
       @if (content.widget) {
         <div class="basis-full order-{{ content.order }} flex justify-center items-center">
           @for (item of content.widget; track item; let i = $index) {
-            <app-dynamic-component [attr.data-path]="'widget.' + i" [inputs]="{ content: item }" />
+            <app-dynamic-component [attr.data-path]="'widget.' + i" [inputs]="item" />
           }
         </div>
       }
diff --git a/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.html b/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.html
index ec290e5e1..08ea773be 100644
--- a/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.html
+++ b/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.html
@@ -6,7 +6,7 @@
         @if (content.sidebar) {
           <div class="thin-sidebar p-3 col-sapn-12 md:col-span-3">
             @for (item of content.sidebar; track item) {
-              <app-dynamic-component [inputs]="{ content: item }" />
+              <app-dynamic-component [inputs]="item" />
             }
           </div>
         }
diff --git a/src/app/uiux/combs/masonry/shuffle/shuffle.component.html b/src/app/uiux/combs/masonry/shuffle/shuffle.component.html
index f3251409c..78ce0ba4e 100644
--- a/src/app/uiux/combs/masonry/shuffle/shuffle.component.html
+++ b/src/app/uiux/combs/masonry/shuffle/shuffle.component.html
@@ -23,7 +23,7 @@
     <div class="shuffle-inner flex w-full h-full flex-wrap">
       @for (item of content.elements; track item) {
         <div class="item w-[100%] sm:w-[50%] md:w-[25%]" [attr.data-groups]="item.category">
-          <app-dynamic-component [inputs]="{ content: item }" />
+          <app-dynamic-component [inputs]="item" />
         </div>
       }
       <div class="sizer w-[100%] sm:w-[50%] md:w-[25%]"></div>
diff --git a/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.html b/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.html
index a2ba0fe10..44faf2ee2 100644
--- a/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.html
+++ b/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.html
@@ -11,7 +11,7 @@
             </div>
           }
         } @else {
-          <app-dynamic-component class="w-full" [inputs]="{ content: list }" />
+          <app-dynamic-component class="w-full" [inputs]="list" />
         }
       </div>
     }
diff --git a/src/app/uiux/combs/node/common/summary/summary.component.html b/src/app/uiux/combs/node/common/summary/summary.component.html
index baf431d15..18eb350ab 100644
--- a/src/app/uiux/combs/node/common/summary/summary.component.html
+++ b/src/app/uiux/combs/node/common/summary/summary.component.html
@@ -2,7 +2,7 @@
   <div class="node-summary flex flex-wrap">
     <div class="left flex flex-col justify-center items-center flex-12/12 md:flex-4/12">
       @for (item of content.left; track item) {
-        <app-dynamic-component [inputs]="{ content: item }" />
+        <app-dynamic-component [inputs]="item" />
       }
     </div>
     <div class="middle flex-12/12 md:flex-4/12">
diff --git a/src/app/uiux/combs/node/relate/relate.component.html b/src/app/uiux/combs/node/relate/relate.component.html
index 2fbc1fb8f..b5519aa78 100644
--- a/src/app/uiux/combs/node/relate/relate.component.html
+++ b/src/app/uiux/combs/node/relate/relate.component.html
@@ -5,7 +5,7 @@
         <app-title [content]="content.title" />
       }
       @for (action of content.actions; track action) {
-        <app-dynamic-component [inputs]="{ content: action }" />
+        <app-dynamic-component [inputs]="action" />
       }
     </div>
     <app-summary [content]="content.summary" />
diff --git a/src/app/uiux/combs/node/report/report.component.html b/src/app/uiux/combs/node/report/report.component.html
index ba051e910..abf530b88 100644
--- a/src/app/uiux/combs/node/report/report.component.html
+++ b/src/app/uiux/combs/node/report/report.component.html
@@ -26,7 +26,7 @@
         @for (item of box; track item) {
           <app-dynamic-component
             class="item block m-bottom col-span-12 md:col-span-6"
-            [inputs]="{ content: item.content }"
+            [inputs]="item.content"
           />
         }
       }
diff --git a/src/app/uiux/combs/other/autoclose/autoclose.component.html b/src/app/uiux/combs/other/autoclose/autoclose.component.html
index fd0e9a6f8..e97a551fc 100644
--- a/src/app/uiux/combs/other/autoclose/autoclose.component.html
+++ b/src/app/uiux/combs/other/autoclose/autoclose.component.html
@@ -1,7 +1,7 @@
 <div class="auto-close relative">
   <div class="container">
     @for (block of content.elements; track block) {
-      <app-dynamic-component [inputs]="{ content: block }" />
+      <app-dynamic-component [inputs]="block" />
     }
   </div>
 </div>
diff --git a/src/app/uiux/combs/profile/user-center/user-center.component.html b/src/app/uiux/combs/profile/user-center/user-center.component.html
index 8c9d0ce00..70d6aa4ee 100644
--- a/src/app/uiux/combs/profile/user-center/user-center.component.html
+++ b/src/app/uiux/combs/profile/user-center/user-center.component.html
@@ -29,7 +29,7 @@
         @if (content.right.length) {
           <div class="right col-span-12 md:col-span-9">
             @for (item of content.right; track item) {
-              <app-dynamic-component *reqRolesIf="item" class="box" [inputs]="{ content: item }" />
+              <app-dynamic-component *reqRolesIf="item" class="box" [inputs]="item" />
             }
           </div>
         }
diff --git a/src/app/uiux/combs/search/search-list/search-list.component.html b/src/app/uiux/combs/search/search-list/search-list.component.html
index 2b3ccda9f..af7dc812a 100644
--- a/src/app/uiux/combs/search/search-list/search-list.component.html
+++ b/src/app/uiux/combs/search/search-list/search-list.component.html
@@ -40,7 +40,7 @@ <h2 class="title">
                   }
                   <div class="actions flex">
                     @for (action of item.actions; track action) {
-                      <app-dynamic-component [inputs]="{ content: action }" />
+                      <app-dynamic-component [inputs]="action" />
                     }
                   </div>
                 </div>
diff --git a/src/app/uiux/combs/showcase/showcase3v9/showcase3v9.component.html b/src/app/uiux/combs/showcase/showcase3v9/showcase3v9.component.html
index 926029ab2..83608fb04 100644
--- a/src/app/uiux/combs/showcase/showcase3v9/showcase3v9.component.html
+++ b/src/app/uiux/combs/showcase/showcase3v9/showcase3v9.component.html
@@ -11,7 +11,7 @@
             <app-dynamic-component
               [attr.data-path]="'left.' + i"
               class="p-x-sm w-full flex justify-center items-center"
-              [inputs]="{ content: item }"
+              [inputs]="item"
             />
           }
         </div>
@@ -24,7 +24,7 @@
             <app-dynamic-component
               [attr.data-path]="'right.' + i"
               class="block w-full"
-              [inputs]="{ content: item }"
+              [inputs]="item"
             />
           }
         </div>
diff --git a/src/app/uiux/widgets/card/card1v6/card1v6.component.html b/src/app/uiux/widgets/card/card1v6/card1v6.component.html
index cbc7ba39d..d53232fd1 100644
--- a/src/app/uiux/widgets/card/card1v6/card1v6.component.html
+++ b/src/app/uiux/widgets/card/card1v6/card1v6.component.html
@@ -31,10 +31,7 @@
       @if (content.actions) {
         <div class="actions gap-3 flex justify-{{ content.actionsAlign }} items-center">
           @for (action of content.actions; track action; let i = $index) {
-            <app-dynamic-component
-              [attr.data-path]="'actions.' + i"
-              [inputs]="{ content: action }"
-            />
+            <app-dynamic-component [attr.data-path]="'actions.' + i" [inputs]="action" />
           }
         </div>
       }
diff --git a/src/app/uiux/widgets/dialog/dialog.component.html b/src/app/uiux/widgets/dialog/dialog.component.html
index c58a59de5..3b25c5871 100644
--- a/src/app/uiux/widgets/dialog/dialog.component.html
+++ b/src/app/uiux/widgets/dialog/dialog.component.html
@@ -10,10 +10,10 @@ <h2 mat-dialog-title>{{ data.title }}</h2>
   <mat-dialog-content>
     @if (data.inputData | isArray) {
       @for (widget of data.inputData; track widget) {
-        <app-dynamic-component [inputs]="{ content: widget }" />
+        <app-dynamic-component [inputs]="widget" />
       }
     } @else {
-      <app-dynamic-component [inputs]="{ content: data.inputData.content }" />
+      <app-dynamic-component [inputs]="data.inputData.content" />
     }
   </mat-dialog-content>
   @if (!data.disableCloseButton) {
diff --git a/src/app/uiux/widgets/panel/panel.component.html b/src/app/uiux/widgets/panel/panel.component.html
index fc799fd74..b8f89cd58 100644
--- a/src/app/uiux/widgets/panel/panel.component.html
+++ b/src/app/uiux/widgets/panel/panel.component.html
@@ -39,10 +39,7 @@
               }
             </mat-expansion-panel-header>
             @for (item of item.elements; track item; let i = $index) {
-              <app-dynamic-component
-                [attr.data-path]="'elements.' + i"
-                [inputs]="{ content: item }"
-              />
+              <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
             }
           </mat-expansion-panel>
         }
diff --git a/src/app/uiux/widgets/tab/tab.component.html b/src/app/uiux/widgets/tab/tab.component.html
index 362e28ea7..2041da6d0 100644
--- a/src/app/uiux/widgets/tab/tab.component.html
+++ b/src/app/uiux/widgets/tab/tab.component.html
@@ -23,10 +23,7 @@
                     <app-bg-img [content]="content.bg" />
                   }
                   @for (item of item.elements; track item; let i = $index) {
-                    <app-dynamic-component
-                      [attr.data-path]="'elements.' + i"
-                      [inputs]="{ content: item }"
-                    />
+                    <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
                   }
                 </div>
               </mat-tab>
@@ -47,10 +44,7 @@
                     <app-bg-img [content]="content.bg" />
                   }
                   @for (item of item.elements; track item; let i = $index) {
-                    <app-dynamic-component
-                      [attr.data-path]="'elements.' + i"
-                      [inputs]="{ content: item }"
-                    />
+                    <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
                   }
                 </div>
               </mat-tab>
@@ -71,10 +65,7 @@
                     <app-bg-img [content]="content.bg" />
                   }
                   @for (item of item.elements; track item; let i = $index) {
-                    <app-dynamic-component
-                      [attr.data-path]="'elements.' + i"
-                      [inputs]="{ content: item }"
-                    />
+                    <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
                   }
                 </div>
               </mat-tab>

From 0984822b9211df80592aa0f789a431e9a474e49d Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 9 Jan 2025 11:59:16 +0800
Subject: [PATCH 27/35] quick fix

---
 .../dashboard-box.component.html              |  6 ++++--
 .../dashboard-box/dashboard-box.component.ts  | 14 +++++--------
 .../dynamic-component.component.ts            | 20 +++++++------------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
index b9a6164ad..d7dbe6611 100644
--- a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
+++ b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.html
@@ -25,8 +25,10 @@
       </div>
     </div>
   }
-  <app-dynamic-component [attr.data-path]="'widget'" [inputs]="widget$ | async" />
-  @if (loading) {
+  @if (widget$ | async; as widget) {
+    <app-dynamic-component [attr.data-path]="'widget'" [inputs]="widget" />
+  }
+  @if (loading()) {
     <div class="loading-inner">
       <mat-spinner diameter="50" />
     </div>
diff --git a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts
index 0089b3aa5..1e0a06854 100644
--- a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts
+++ b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts
@@ -1,11 +1,11 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   DestroyRef,
   Input,
   OnInit,
   inject,
+  signal,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup } from '@angular/forms';
@@ -28,11 +28,10 @@ export class DashboardBoxComponent extends BaseComponent implements OnInit {
   @Input() form = new UntypedFormGroup({});
   @Input() model: any = {};
   widget$: Observable<any>;
-  loading = true;
+  loading = signal(true);
 
   formService = inject(FormService);
   nodeService = inject(NodeService);
-  cd = inject(ChangeDetectorRef);
   destroyRef = inject(DestroyRef);
   constructor() {
     super();
@@ -43,8 +42,7 @@ export class DashboardBoxComponent extends BaseComponent implements OnInit {
       this.getContent();
     } else {
       this.widget$ = of(this.content.widget);
-      this.loading = false;
-      this.cd.detectChanges();
+      this.loading.set(false);
     }
   }
 
@@ -57,7 +55,7 @@ export class DashboardBoxComponent extends BaseComponent implements OnInit {
     const api = this.content.params?.api || '';
     const params = this.getApiParams(options);
     const type = this.content.widget.type;
-    this.loading = true;
+    this.loading.set(true);
     this.widget$ = this.nodeService.fetch(api, params).pipe(
       catchError(() => {
         let data: any[] = [];
@@ -147,13 +145,11 @@ export class DashboardBoxComponent extends BaseComponent implements OnInit {
             );
             break;
         }
-        this.loading = false;
-        this.cd.detectChanges();
+        this.loading.set(false);
         return data;
       }),
       takeUntilDestroyed(this.destroyRef)
     );
-    this.cd.detectChanges();
   }
 
   reload(): void {
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index 78af478a2..41041e1c9 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -80,32 +80,26 @@ export class DynamicComponentComponent
 
   async loadComponent(): Promise<void> {
     if (this.screenService.isPlatformBrowser()) {
-      const type = this.inputs.type
-        ? this.inputs.type
-        : this.inputs.content
-          ? this.inputs.content.type
-          : null;
+      const type = this.inputs.type ?? this.inputs.content?.type ?? null;
       if (!type) {
         return;
       }
       this.container.clear();
 
       const componentType = await this.componentService.getComponentType(type);
+      if (!componentType) {
+        console.log('无法识别该组件：', this.inputs);
+        return;
+      }
       const hostElement = this.renderer.createElement('div');
       this.componentRef = createComponent(componentType, {
         environmentInjector: this.environmentInjector,
         hostElement,
       });
-      if (!componentType) {
-        console.log('无法识别该组件：', this.inputs);
-        return;
-      }
-      if (this.componentRef.instance && this.inputs) {
+      if (this.componentRef?.instance && this.inputs) {
         if (!this.inputs.type && this.inputs.content) {
           Object.keys(this.inputs).forEach(key => {
-            if (this.componentRef) {
-              this.componentRef.instance[key] = this.inputs[key];
-            }
+            this.componentRef.instance[key] = this.inputs[key];
           });
         } else {
           this.componentRef.instance.content = this.inputs;

From 9962fe620e17e696de63d910de059ec55b036baa Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 9 Jan 2025 15:16:58 +0800
Subject: [PATCH 28/35] quick fix

---
 src/app/uiux/base/base.widget.ts              |  2 +-
 .../showcase1v1/showcase1v1.component.ts      | 19 +------------------
 .../dynamic-component.component.ts            |  6 ------
 3 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/app/uiux/base/base.widget.ts b/src/app/uiux/base/base.widget.ts
index ddeb8c45d..50d9a1431 100644
--- a/src/app/uiux/base/base.widget.ts
+++ b/src/app/uiux/base/base.widget.ts
@@ -2,7 +2,7 @@ import { Injectable, inject } from '@angular/core';
 import { Params } from '@angular/router';
 import { IPager } from '@core/interface/widgets/IWidgets';
 import { ApiService } from '@core/service/api.service';
-import { isArray, remove, result } from 'lodash-es';
+import { isArray, result } from 'lodash-es';
 @Injectable()
 export abstract class BaseComponent {
   apiService = inject(ApiService);
diff --git a/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts b/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts
index e2da2eecd..19db38b83 100644
--- a/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts
+++ b/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts
@@ -1,20 +1,6 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Inject,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { BaseComponent } from '@uiux/base/base.widget';
-import type { ICoreConfig } from '@core/interface/IAppConfig';
-import { ScreenService } from '@core/service/screen.service';
-import { CORE_CONFIG } from '@core/token/token-providers';
 import type { IShowcase1v1 } from '@core/interface/combs/IShowcase';
-import { ContentState } from '@core/state/ContentState';
-import { BuilderState } from '@core/state/BuilderState';
 
 @Component({
   selector: 'app-showcase-1v1',
@@ -24,8 +10,5 @@ import { BuilderState } from '@core/state/BuilderState';
 })
 export class Showcase1v1Component extends BaseComponent implements OnInit {
   @Input() content: IShowcase1v1;
-  @ViewChild('title', { read: ElementRef }) title: ElementRef;
-  disableAnimate = false;
-
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index 41041e1c9..3d3ddd571 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -1,7 +1,6 @@
 import {
   AfterContentInit,
   AfterViewInit,
-  ChangeDetectorRef,
   Component,
   ComponentRef,
   DestroyRef,
@@ -16,7 +15,6 @@ import {
   SimpleChanges,
   ViewChild,
   ViewContainerRef,
-  ViewRef,
   createComponent,
   inject,
   signal,
@@ -44,7 +42,6 @@ export class DynamicComponentComponent
   showToolbar = signal(false);
 
   ele = inject(ElementRef);
-  cd = inject(ChangeDetectorRef);
   util = inject(UtilitiesService);
   screenService = inject(ScreenService);
   private destroyRef = inject(DestroyRef);
@@ -123,8 +120,5 @@ export class DynamicComponentComponent
     if (this.componentRef) {
       this.componentRef.destroy();
     }
-    if (this.cd && !(this.cd as ViewRef).destroyed) {
-      this.cd.detectChanges();
-    }
   }
 }

From 3a7dd2d0e3f8b5d8008453907ce2c00d694d0178 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 9 Jan 2025 16:04:05 +0800
Subject: [PATCH 29/35] refact: remove OnPush

---
 .../combs/carousel/swiper/swiper.component.ts |  3 --
 .../dashboard-box/dashboard-box.component.ts  | 11 +-----
 .../contact-us1v1/contact-us1v1.component.ts  | 13 +------
 .../list/list-thin/list-thin.component.ts     | 13 ++-----
 .../taxonomy-thin-list.component.ts           | 11 +-----
 .../map/map-list-v1/map-list-v1.component.ts  | 11 ++----
 .../masonry/shuffle/shuffle.component.ts      | 10 +----
 .../combs/node/article/article.component.ts   | 37 +++++++------------
 .../relate-showcase.component.ts              |  9 +----
 .../summary-item/summary-item.component.ts    |  9 +----
 .../node/common/summary/summary.component.ts  |  9 +----
 .../combs/node/relate/relate.component.ts     |  9 +----
 .../combs/node/report/report.component.ts     | 19 ++--------
 .../other/jsoneditor/jsoneditor.component.ts  |  2 -
 .../profile1v1/profile1v1.component.ts        |  2 -
 .../user-center/user-center.component.ts      |  2 -
 .../search-list/search-list.component.ts      |  1 -
 .../showcase1v1/showcase1v1.component.ts      |  3 +-
 .../showcase1v3/showcase1v3.component.ts      | 11 +-----
 .../showcase2v1/showcase2v1.component.ts      | 23 ++----------
 .../showcase2v4/showcase2v4.component.ts      |  9 +----
 .../showcase2v6/showcase2v6.component.ts      |  9 +----
 .../showcase3v6/showcase3v6.component.ts      | 11 +-----
 .../video/video-bg/video-bg.component.ts      | 10 +----
 .../widgets/card/card1v1/card1v1.component.ts |  9 +----
 .../widgets/card/card1v6/card1v6.component.ts |  9 +----
 .../card/user-card/user-card.component.ts     |  2 -
 .../uiux/widgets/dialog/dialog.component.ts   | 15 ++------
 .../dynamic-table/dynamic-table.component.ts  | 28 ++++----------
 src/app/uiux/widgets/img/img.component.ts     | 11 +-----
 src/app/uiux/widgets/panel/panel.component.ts | 10 +----
 .../uiux/widgets/sidebar/sidebar.component.ts |  9 +----
 .../uiux/widgets/stepper/stepper.component.ts | 11 +-----
 src/app/uiux/widgets/tab/tab.component.ts     | 16 ++------
 .../widgets/text-hero/text-hero.component.ts  |  9 +----
 src/app/uiux/widgets/text/text.component.ts   |  9 +----
 src/stories/Changelog.mdx                     |  3 +-
 37 files changed, 67 insertions(+), 321 deletions(-)

diff --git a/src/app/uiux/combs/carousel/swiper/swiper.component.ts b/src/app/uiux/combs/carousel/swiper/swiper.component.ts
index 32e37afed..dcb98bdbe 100644
--- a/src/app/uiux/combs/carousel/swiper/swiper.component.ts
+++ b/src/app/uiux/combs/carousel/swiper/swiper.component.ts
@@ -5,7 +5,6 @@ import {
   ViewChild,
   AfterViewInit,
   OnDestroy,
-  ChangeDetectionStrategy,
   Output,
   EventEmitter,
   inject,
@@ -23,7 +22,6 @@ register();
   selector: 'app-swiper',
   templateUrl: './swiper.component.html',
   styleUrls: ['./swiper.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SwiperComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   @Input() content: ISwiper;
@@ -32,7 +30,6 @@ export class SwiperComponent implements OnInit, AfterViewInit, OnChanges, OnDest
   @Output() slideChange = new EventEmitter<Swiper>();
   @ViewChild('swiper', { static: false }) swiper: any;
   screenService = inject(ScreenService);
-  constructor() {}
 
   defaultConfig = {
     slidesPerView: 'auto',
diff --git a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts
index 1e0a06854..4a581f961 100644
--- a/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts
+++ b/src/app/uiux/combs/dashboard/dashboard-box/dashboard-box.component.ts
@@ -1,12 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  Input,
-  OnInit,
-  inject,
-  signal,
-} from '@angular/core';
+import { Component, DestroyRef, Input, OnInit, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup } from '@angular/forms';
 import type { IDashboardBox } from '@core/interface/combs/IDashboard';
@@ -21,7 +13,6 @@ import { catchError, delay, map } from 'rxjs/operators';
   selector: 'app-dashboard-box',
   templateUrl: './dashboard-box.component.html',
   styleUrls: ['./dashboard-box.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardBoxComponent extends BaseComponent implements OnInit {
   @Input() content: IDashboardBox;
diff --git a/src/app/uiux/combs/form/contact-us1v1/contact-us1v1.component.ts b/src/app/uiux/combs/form/contact-us1v1/contact-us1v1.component.ts
index 44333602e..e2f9fcca0 100644
--- a/src/app/uiux/combs/form/contact-us1v1/contact-us1v1.component.ts
+++ b/src/app/uiux/combs/form/contact-us1v1/contact-us1v1.component.ts
@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import type { IContactUs1v1 } from '@core/interface/combs/IForm';
 import { FormService } from '@core/service/form.service';
@@ -14,7 +9,6 @@ import { BaseComponent } from '@uiux/base/base.widget';
   selector: 'app-contact-us-1v1',
   templateUrl: './contact-us1v1.component.html',
   styleUrls: ['./contact-us1v1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContactUs1v1Component extends BaseComponent implements OnInit {
   @Input() content: IContactUs1v1;
@@ -34,10 +28,7 @@ export class ContactUs1v1Component extends BaseComponent implements OnInit {
       this.form.markAllAsTouched();
       return;
     }
-    const data = this.formService.getwebFormData(
-      this.content.params,
-      value.form
-    );
+    const data = this.formService.getwebFormData(this.content.params, value.form);
     this.formService.submitWebForm(data).subscribe(
       res => {
         this.util.openSnackbar('成功提交！');
diff --git a/src/app/uiux/combs/list/list/list-thin/list-thin.component.ts b/src/app/uiux/combs/list/list/list-thin/list-thin.component.ts
index 320deebac..84cfa1cb0 100644
--- a/src/app/uiux/combs/list/list/list-thin/list-thin.component.ts
+++ b/src/app/uiux/combs/list/list/list-thin/list-thin.component.ts
@@ -1,18 +1,10 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
 import type { IListThin } from '@core/interface/combs/IList';
 import { ScreenService } from '@core/service/screen.service';
 @Component({
   selector: 'app-list-thin',
   templateUrl: './list-thin.component.html',
   styleUrls: ['./list-thin.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListThinComponent implements OnInit {
   @Input() content: IListThin[];
@@ -21,7 +13,8 @@ export class ListThinComponent implements OnInit {
 
   @Output() pageChange: EventEmitter<string> = new EventEmitter();
   p = 1;
-  constructor(private screenService: ScreenService) {}
+  private screenService = inject(ScreenService);
+  constructor() {}
 
   ngOnInit(): void {}
 
diff --git a/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.ts b/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.ts
index f377886fd..57df0d1c9 100644
--- a/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.ts
+++ b/src/app/uiux/combs/list/taxonomy-thin-list/taxonomy-thin-list.component.ts
@@ -1,9 +1,4 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import type { ITaxonomyThinList } from '@core/interface/combs/IList';
 import { BaseComponent } from '@uiux/base/base.widget';
 
@@ -11,13 +6,9 @@ import { BaseComponent } from '@uiux/base/base.widget';
   selector: 'app-taxonomy-thin-list',
   templateUrl: './taxonomy-thin-list.component.html',
   styleUrls: ['./taxonomy-thin-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TaxonomyThinListComponent extends BaseComponent implements OnInit {
   @Input() content: ITaxonomyThinList;
-  constructor() {
-    super();
-  }
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/map/map-list-v1/map-list-v1.component.ts b/src/app/uiux/combs/map/map-list-v1/map-list-v1.component.ts
index 1f8b0974c..5aca78653 100644
--- a/src/app/uiux/combs/map/map-list-v1/map-list-v1.component.ts
+++ b/src/app/uiux/combs/map/map-list-v1/map-list-v1.component.ts
@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import type { IMapListv1 } from '@core/interface/combs/IMap';
 import type { IMark } from '@core/interface/IAmap';
 import { AmapService } from '@core/service/amap.service';
@@ -12,14 +7,14 @@ import { AmapService } from '@core/service/amap.service';
   selector: 'app-map-list-v1',
   templateUrl: './map-list-v1.component.html',
   styleUrls: ['./map-list-v1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MapListV1Component implements OnInit {
   @Input() content: IMapListv1;
   elements: any[];
   loading: boolean;
   selectedId: number;
-  constructor(private amapService: AmapService) {}
+  private amapService = inject(AmapService);
+  constructor() {}
 
   ngOnInit(): void {
     this.elements = this.content.map.elements.map(item => {
diff --git a/src/app/uiux/combs/masonry/shuffle/shuffle.component.ts b/src/app/uiux/combs/masonry/shuffle/shuffle.component.ts
index 8758c3907..8724b5f34 100644
--- a/src/app/uiux/combs/masonry/shuffle/shuffle.component.ts
+++ b/src/app/uiux/combs/masonry/shuffle/shuffle.component.ts
@@ -1,18 +1,10 @@
-import {
-  Component,
-  Input,
-  ElementRef,
-  ChangeDetectionStrategy,
-  inject,
-  afterNextRender,
-} from '@angular/core';
+import { Component, Input, ElementRef, inject, afterNextRender } from '@angular/core';
 import type { IShuffle } from '@core/interface/combs/IMasonry';
 import Shuffle from 'shufflejs';
 @Component({
   selector: 'app-shuffle',
   templateUrl: './shuffle.component.html',
   styleUrls: ['./shuffle.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShuffleComponent {
   @Input() content: IShuffle;
diff --git a/src/app/uiux/combs/node/article/article.component.ts b/src/app/uiux/combs/node/article/article.component.ts
index 2e230095e..1e76bc308 100644
--- a/src/app/uiux/combs/node/article/article.component.ts
+++ b/src/app/uiux/combs/node/article/article.component.ts
@@ -4,7 +4,6 @@ import {
   OnInit,
   AfterViewInit,
   Inject,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   inject,
   DestroyRef,
@@ -33,12 +32,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   selector: 'app-article',
   templateUrl: './article.component.html',
   styleUrls: ['./article.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ArticleComponent
-  extends NodeComponent
-  implements OnInit, AfterViewInit
-{
+export class ArticleComponent extends NodeComponent implements OnInit, AfterViewInit {
   @Input() content: IBaseNode;
   currentUserRule: string[];
   comments: IComment[];
@@ -77,29 +72,25 @@ export class ArticleComponent
 
     this.checkAccess();
 
-    this.userService.userSub$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.cd.markForCheck();
-      });
+    this.userService.userSub$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      this.cd.markForCheck();
+    });
   }
 
   checkAccess(): void {
     if (!environment.production) {
       return;
     }
-    this.pageContent$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(page => {
-        const entityId = page.config?.node?.entityId || '';
-        this.nodeService
-          .checkNodeAccess(this.content.params, entityId, this.user)
-          .subscribe(access => {
-            this.canAccess = access.canAccess;
-            this.isReqRoles = access.isReqRoles;
-            this.cd.detectChanges();
-          });
-      });
+    this.pageContent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(page => {
+      const entityId = page.config?.node?.entityId || '';
+      this.nodeService
+        .checkNodeAccess(this.content.params, entityId, this.user)
+        .subscribe(access => {
+          this.canAccess = access.canAccess;
+          this.isReqRoles = access.isReqRoles;
+          this.cd.detectChanges();
+        });
+    });
   }
 
   ngAfterViewInit(): void {
diff --git a/src/app/uiux/combs/node/common/relate-showcase/relate-showcase.component.ts b/src/app/uiux/combs/node/common/relate-showcase/relate-showcase.component.ts
index 386f50cf1..a34dd96b9 100644
--- a/src/app/uiux/combs/node/common/relate-showcase/relate-showcase.component.ts
+++ b/src/app/uiux/combs/node/common/relate-showcase/relate-showcase.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IRelateShowcase } from '@core/interface/node/IRelate';
 
 @Component({
   selector: 'app-relate-showcase',
   templateUrl: './relate-showcase.component.html',
   styleUrls: ['./relate-showcase.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RelateShowcaseComponent implements OnInit {
   @Input() content: IRelateShowcase;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.ts b/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.ts
index 5ba54bab6..d1db0a63a 100644
--- a/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.ts
+++ b/src/app/uiux/combs/node/common/summary/summary-item/summary-item.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { ISummaryItem } from '@core/interface/node/ISummaryItem';
 
 @Component({
   selector: 'app-summary-item',
   templateUrl: './summary-item.component.html',
   styleUrls: ['./summary-item.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SummaryItemComponent implements OnInit {
   @Input() content: ISummaryItem;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/node/common/summary/summary.component.ts b/src/app/uiux/combs/node/common/summary/summary.component.ts
index feaaef990..e84f6c2c6 100644
--- a/src/app/uiux/combs/node/common/summary/summary.component.ts
+++ b/src/app/uiux/combs/node/common/summary/summary.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { ISummary } from '@core/interface/node/IRelate';
 
 @Component({
   selector: 'app-summary',
   templateUrl: './summary.component.html',
   styleUrls: ['./summary.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SummaryComponent implements OnInit {
   @Input() content: ISummary;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/node/relate/relate.component.ts b/src/app/uiux/combs/node/relate/relate.component.ts
index e75a406c3..5d0063c22 100644
--- a/src/app/uiux/combs/node/relate/relate.component.ts
+++ b/src/app/uiux/combs/node/relate/relate.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IRelate } from '@core/interface/node/IRelate';
 
 @Component({
   selector: 'app-relate',
   templateUrl: './relate.component.html',
   styleUrls: ['./relate.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RelateComponent implements OnInit {
   @Input() content: IRelate;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/node/report/report.component.ts b/src/app/uiux/combs/node/report/report.component.ts
index 67a227cce..d3ac3f624 100644
--- a/src/app/uiux/combs/node/report/report.component.ts
+++ b/src/app/uiux/combs/node/report/report.component.ts
@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectorRef, inject } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { BaseComponent } from '@uiux/base/base.widget';
 import { NodeService } from '@core/service/node.service';
@@ -17,7 +11,6 @@ import { map } from 'rxjs/operators';
   selector: 'app-report',
   templateUrl: './report.component.html',
   styleUrls: ['./report.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ReportComponent extends BaseComponent implements OnInit {
   @Input() content: IReport;
@@ -25,13 +18,9 @@ export class ReportComponent extends BaseComponent implements OnInit {
   @Input() model: any = {};
   box$: Observable<any[]>;
   loading: boolean;
-  constructor(
-    private nodeService: NodeService,
-    private cd: ChangeDetectorRef,
-    private formService: FormService
-  ) {
-    super();
-  }
+  private nodeService = inject(NodeService);
+  private cd = inject(ChangeDetectorRef);
+  private formService = inject(FormService);
 
   ngOnInit(): void {
     if (this.content?.params?.api) {
diff --git a/src/app/uiux/combs/other/jsoneditor/jsoneditor.component.ts b/src/app/uiux/combs/other/jsoneditor/jsoneditor.component.ts
index f2752eefe..427df7179 100644
--- a/src/app/uiux/combs/other/jsoneditor/jsoneditor.component.ts
+++ b/src/app/uiux/combs/other/jsoneditor/jsoneditor.component.ts
@@ -1,6 +1,5 @@
 import {
   AfterViewInit,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -24,7 +23,6 @@ import { catchError, debounceTime, distinctUntilChanged } from 'rxjs/operators';
   selector: 'app-jsoneditor',
   templateUrl: './jsoneditor.component.html',
   styleUrls: ['./jsoneditor.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JsoneditorComponent implements OnInit, AfterViewInit {
   @Input() content: IJsoneditor;
diff --git a/src/app/uiux/combs/profile/profile1v1/profile1v1.component.ts b/src/app/uiux/combs/profile/profile1v1/profile1v1.component.ts
index c788e36ba..4bd1ef098 100644
--- a/src/app/uiux/combs/profile/profile1v1/profile1v1.component.ts
+++ b/src/app/uiux/combs/profile/profile1v1/profile1v1.component.ts
@@ -1,6 +1,5 @@
 import {
   AfterViewInit,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -25,7 +24,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   selector: 'app-profile-1v1',
   templateUrl: './profile1v1.component.html',
   styleUrls: ['./profile1v1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Profile1v1Component implements OnInit, AfterViewInit {
   @Input() content: IProfile1v1;
diff --git a/src/app/uiux/combs/profile/user-center/user-center.component.ts b/src/app/uiux/combs/profile/user-center/user-center.component.ts
index af28d2450..08f59a81e 100644
--- a/src/app/uiux/combs/profile/user-center/user-center.component.ts
+++ b/src/app/uiux/combs/profile/user-center/user-center.component.ts
@@ -1,5 +1,4 @@
 import {
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -25,7 +24,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   selector: 'app-user-center',
   templateUrl: './user-center.component.html',
   styleUrls: ['./user-center.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserCenterComponent implements OnInit {
   @Input() content: IUserCenter;
diff --git a/src/app/uiux/combs/search/search-list/search-list.component.ts b/src/app/uiux/combs/search/search-list/search-list.component.ts
index caefd7ff4..061f00a07 100644
--- a/src/app/uiux/combs/search/search-list/search-list.component.ts
+++ b/src/app/uiux/combs/search/search-list/search-list.component.ts
@@ -20,7 +20,6 @@ export class SearchListComponent implements OnInit {
   @Input() loading: boolean;
 
   @Output() pageChange = new EventEmitter();
-  constructor() {}
 
   ngOnInit(): void {}
 
diff --git a/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts b/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts
index 19db38b83..4ea6b9f5e 100644
--- a/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts
+++ b/src/app/uiux/combs/showcase/showcase1v1/showcase1v1.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { BaseComponent } from '@uiux/base/base.widget';
 import type { IShowcase1v1 } from '@core/interface/combs/IShowcase';
 
@@ -6,7 +6,6 @@ import type { IShowcase1v1 } from '@core/interface/combs/IShowcase';
   selector: 'app-showcase-1v1',
   templateUrl: './showcase1v1.component.html',
   styleUrls: ['./showcase1v1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Showcase1v1Component extends BaseComponent implements OnInit {
   @Input() content: IShowcase1v1;
diff --git a/src/app/uiux/combs/showcase/showcase1v3/showcase1v3.component.ts b/src/app/uiux/combs/showcase/showcase1v3/showcase1v3.component.ts
index 4b01b7bde..f4255d135 100644
--- a/src/app/uiux/combs/showcase/showcase1v3/showcase1v3.component.ts
+++ b/src/app/uiux/combs/showcase/showcase1v3/showcase1v3.component.ts
@@ -1,22 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IShowcase1v3 } from '@core/interface/combs/IShowcase';
 
 @Component({
   selector: 'app-showcase-1v3',
   templateUrl: './showcase1v3.component.html',
   styleUrls: ['./showcase1v3.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Showcase1v3Component implements OnInit {
   @Input() content: IShowcase1v3;
 
-  constructor(private cd: ChangeDetectorRef) {}
-
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/showcase/showcase2v1/showcase2v1.component.ts b/src/app/uiux/combs/showcase/showcase2v1/showcase2v1.component.ts
index 5515c7734..9ab41ec76 100644
--- a/src/app/uiux/combs/showcase/showcase2v1/showcase2v1.component.ts
+++ b/src/app/uiux/combs/showcase/showcase2v1/showcase2v1.component.ts
@@ -1,11 +1,4 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, inject } from '@angular/core';
 import type { IShowcase2v1 } from '@core/interface/combs/IShowcase';
 import { BaseComponent } from '@uiux/base/base.widget';
 import { NodeService } from '@core/service/node.service';
@@ -16,20 +9,12 @@ import { of } from 'rxjs';
   selector: 'app-showcase-2v1',
   templateUrl: './showcase2v1.component.html',
   styleUrls: ['./showcase2v1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Showcase2v1Component
-  extends BaseComponent
-  implements OnInit, AfterViewInit
-{
+export class Showcase2v1Component extends BaseComponent implements OnInit, AfterViewInit {
   @Input() content: IShowcase2v1;
   elements: ICard1v1[];
-  constructor(
-    private nodeService: NodeService,
-    private cd: ChangeDetectorRef
-  ) {
-    super();
-  }
+  private nodeService = inject(NodeService);
+  private cd = inject(ChangeDetectorRef);
 
   ngOnInit(): void {}
 
diff --git a/src/app/uiux/combs/showcase/showcase2v4/showcase2v4.component.ts b/src/app/uiux/combs/showcase/showcase2v4/showcase2v4.component.ts
index a14fca718..924eeb3ac 100644
--- a/src/app/uiux/combs/showcase/showcase2v4/showcase2v4.component.ts
+++ b/src/app/uiux/combs/showcase/showcase2v4/showcase2v4.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IShowcase2v4 } from '@core/interface/combs/IShowcase';
 
 @Component({
   selector: 'app-showcase-2v4',
   templateUrl: './showcase2v4.component.html',
   styleUrls: ['./showcase2v4.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Showcase2v4Component implements OnInit {
   @Input() content: IShowcase2v4;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/showcase/showcase2v6/showcase2v6.component.ts b/src/app/uiux/combs/showcase/showcase2v6/showcase2v6.component.ts
index a07d22c6f..a8bd0d55b 100644
--- a/src/app/uiux/combs/showcase/showcase2v6/showcase2v6.component.ts
+++ b/src/app/uiux/combs/showcase/showcase2v6/showcase2v6.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IShowcase2v6 } from '@core/interface/combs/IShowcase';
 
 @Component({
   selector: 'app-showcase-2v6',
   templateUrl: './showcase2v6.component.html',
   styleUrls: ['./showcase2v6.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Showcase2v6Component implements OnInit {
   @Input() content: IShowcase2v6;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/showcase/showcase3v6/showcase3v6.component.ts b/src/app/uiux/combs/showcase/showcase3v6/showcase3v6.component.ts
index c70545ec9..6e8162d7c 100644
--- a/src/app/uiux/combs/showcase/showcase3v6/showcase3v6.component.ts
+++ b/src/app/uiux/combs/showcase/showcase3v6/showcase3v6.component.ts
@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IShowcase3v6 } from '@core/interface/combs/IShowcase';
 import { BaseComponent } from '@uiux/base/base.widget';
 
@@ -11,13 +6,9 @@ import { BaseComponent } from '@uiux/base/base.widget';
   selector: 'app-showcase-3v6',
   templateUrl: './showcase3v6.component.html',
   styleUrls: ['./showcase3v6.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Showcase3v6Component extends BaseComponent implements OnInit {
   @Input() content: IShowcase3v6;
-  constructor() {
-    super();
-  }
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/combs/video/video-bg/video-bg.component.ts b/src/app/uiux/combs/video/video-bg/video-bg.component.ts
index 4de1e7f91..565b29429 100644
--- a/src/app/uiux/combs/video/video-bg/video-bg.component.ts
+++ b/src/app/uiux/combs/video/video-bg/video-bg.component.ts
@@ -1,11 +1,4 @@
-import {
-  Component,
-  Input,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  inject,
-} from '@angular/core';
+import { Component, Input, AfterViewInit, ChangeDetectorRef, inject } from '@angular/core';
 import type { IVideoBg } from '@core/interface/combs/IVideoBg';
 import type { IVideo } from '@core/interface/widgets/IVideo';
 import { ScreenService } from '@core/service/screen.service';
@@ -13,7 +6,6 @@ import { ScreenService } from '@core/service/screen.service';
   selector: 'app-video-bg',
   templateUrl: './video-bg.component.html',
   styleUrls: ['./video-bg.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VideoBgComponent implements AfterViewInit {
   @Input() content: IVideoBg;
diff --git a/src/app/uiux/widgets/card/card1v1/card1v1.component.ts b/src/app/uiux/widgets/card/card1v1/card1v1.component.ts
index b1e9fad93..64ea42021 100644
--- a/src/app/uiux/widgets/card/card1v1/card1v1.component.ts
+++ b/src/app/uiux/widgets/card/card1v1/card1v1.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { ICard1v1 } from '@core/interface/widgets/ICard';
 
 @Component({
   selector: 'app-card-1v1',
   templateUrl: './card1v1.component.html',
   styleUrls: ['./card1v1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Card1v1Component implements OnInit {
   @Input() content: ICard1v1;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/card/card1v6/card1v6.component.ts b/src/app/uiux/widgets/card/card1v6/card1v6.component.ts
index 2b9101dff..d73a43996 100644
--- a/src/app/uiux/widgets/card/card1v6/card1v6.component.ts
+++ b/src/app/uiux/widgets/card/card1v6/card1v6.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { ICard1v6 } from '@core/interface/widgets/ICard';
 
 @Component({
   selector: 'app-card-1v6',
   templateUrl: './card1v6.component.html',
   styleUrls: ['./card1v6.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Card1v6Component implements OnInit {
   @Input() content: ICard1v6;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/card/user-card/user-card.component.ts b/src/app/uiux/widgets/card/user-card/user-card.component.ts
index fc82a709d..1de7d4844 100644
--- a/src/app/uiux/widgets/card/user-card/user-card.component.ts
+++ b/src/app/uiux/widgets/card/user-card/user-card.component.ts
@@ -1,5 +1,4 @@
 import {
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -24,7 +23,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   selector: 'app-user-card',
   templateUrl: './user-card.component.html',
   styleUrls: ['./user-card.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserCardComponent extends BaseComponent implements OnInit {
   @Input() content: IUserCard;
diff --git a/src/app/uiux/widgets/dialog/dialog.component.ts b/src/app/uiux/widgets/dialog/dialog.component.ts
index 0cdff959f..a284e269e 100644
--- a/src/app/uiux/widgets/dialog/dialog.component.ts
+++ b/src/app/uiux/widgets/dialog/dialog.component.ts
@@ -1,23 +1,14 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnInit,
-} from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import type { IDialog } from '@core/interface/IDialog';
 
 @Component({
   selector: 'app-dialog',
   templateUrl: './dialog.component.html',
   styleUrls: ['./dialog.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogComponent implements OnInit {
-  constructor(
-    public dialogRef: MatDialogRef<DialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: IDialog
-  ) {}
+  constructor(@Inject(MAT_DIALOG_DATA) public data: IDialog) {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/dynamic-table/dynamic-table.component.ts b/src/app/uiux/widgets/dynamic-table/dynamic-table.component.ts
index 753113109..0cc42e420 100644
--- a/src/app/uiux/widgets/dynamic-table/dynamic-table.component.ts
+++ b/src/app/uiux/widgets/dynamic-table/dynamic-table.component.ts
@@ -2,25 +2,19 @@ import {
   Component,
   Input,
   OnInit,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   AfterViewInit,
   ViewChild,
   OnChanges,
   SimpleChanges,
+  inject,
 } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { DialogComponent } from '../dialog/dialog.component';
 import type { IDynamicTable } from '../../../core/interface/widgets/IWidgets';
 import { RouteService } from '@core/service/route.service';
 import { isArray } from 'lodash-es';
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { MatSort } from '@angular/material/sort';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
@@ -29,15 +23,11 @@ import { MatTableDataSource } from '@angular/material/table';
   selector: 'app-dynamic-table',
   templateUrl: './dynamic-table.component.html',
   styleUrls: ['./dynamic-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition(
-        'expanded <=> collapsed',
-        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
-      ),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
     ]),
   ],
 })
@@ -52,11 +42,9 @@ export class DynamicTableComponent implements OnInit, OnChanges, AfterViewInit {
   columnsToDisplayWithExpand: string[];
   expandedElement: null;
   isExpand: boolean;
-  constructor(
-    private dialog: MatDialog,
-    private routService: RouteService,
-    private cd: ChangeDetectorRef
-  ) {}
+  private dialog = inject(MatDialog);
+  private routService = inject(RouteService);
+  private cd = inject(ChangeDetectorRef);
 
   ngOnInit(): void {
     this.dataSource = new MatTableDataSource(this.content.elements);
@@ -64,9 +52,7 @@ export class DynamicTableComponent implements OnInit, OnChanges, AfterViewInit {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.content?.currentValue) {
-      this.dataSource = new MatTableDataSource(
-        changes.content.currentValue.elements
-      );
+      this.dataSource = new MatTableDataSource(changes.content.currentValue.elements);
     }
   }
 
diff --git a/src/app/uiux/widgets/img/img.component.ts b/src/app/uiux/widgets/img/img.component.ts
index 0692f97dc..aafe4eea6 100644
--- a/src/app/uiux/widgets/img/img.component.ts
+++ b/src/app/uiux/widgets/img/img.component.ts
@@ -1,12 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Inject,
-  Input,
-  OnInit,
-  inject,
-} from '@angular/core';
+import { Component, HostBinding, Inject, Input, OnInit, inject } from '@angular/core';
 import type { IImg } from '@core/interface/widgets/IImg';
 import type { ICoreConfig } from '@core/interface/IAppConfig';
 import { ScreenService } from '@core/service/screen.service';
@@ -16,7 +8,6 @@ import { CORE_CONFIG } from '@core/token/token-providers';
   selector: 'app-img',
   templateUrl: './img.component.html',
   styleUrls: ['./img.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ImgComponent implements OnInit {
   @Input() content: IImg | undefined;
diff --git a/src/app/uiux/widgets/panel/panel.component.ts b/src/app/uiux/widgets/panel/panel.component.ts
index d9e9c0c63..4f1a31643 100644
--- a/src/app/uiux/widgets/panel/panel.component.ts
+++ b/src/app/uiux/widgets/panel/panel.component.ts
@@ -1,22 +1,14 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatAccordion } from '@angular/material/expansion';
 @Component({
   selector: 'app-panel',
   templateUrl: './panel.component.html',
   styleUrls: ['./panel.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PanelComponent implements OnInit {
   @Input() content: any;
   @ViewChild(MatAccordion) accordion: MatAccordion;
   isAll = false;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/sidebar/sidebar.component.ts b/src/app/uiux/widgets/sidebar/sidebar.component.ts
index 6002cc382..41e4d1ae7 100644
--- a/src/app/uiux/widgets/sidebar/sidebar.component.ts
+++ b/src/app/uiux/widgets/sidebar/sidebar.component.ts
@@ -1,19 +1,12 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SidebarComponent implements OnInit {
   @Input() content: any[];
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/stepper/stepper.component.ts b/src/app/uiux/widgets/stepper/stepper.component.ts
index d300a71f6..18a10fae6 100644
--- a/src/app/uiux/widgets/stepper/stepper.component.ts
+++ b/src/app/uiux/widgets/stepper/stepper.component.ts
@@ -1,22 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { BaseComponent } from '@uiux/base/base.widget';
 
 @Component({
   selector: 'app-stepper',
   templateUrl: './stepper.component.html',
   styleUrls: ['./stepper.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StepperComponent extends BaseComponent implements OnInit {
   @Input() content: any;
-  constructor() {
-    super();
-  }
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/tab/tab.component.ts b/src/app/uiux/widgets/tab/tab.component.ts
index 97a931108..942c4a0a4 100644
--- a/src/app/uiux/widgets/tab/tab.component.ts
+++ b/src/app/uiux/widgets/tab/tab.component.ts
@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import type { ITab } from '@core/interface/widgets/ITab';
 
@@ -13,15 +7,13 @@ import type { ITab } from '@core/interface/widgets/ITab';
   templateUrl: './tab.component.html',
   styleUrls: ['./tab.component.scss'],
   host: { ngSkipHydration: 'true' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TabComponent implements OnInit {
   @Input() content: ITab;
   selectedIndex: number | null;
-  constructor(
-    private route: ActivatedRoute,
-    private cd: ChangeDetectorRef
-  ) {}
+  private route = inject(ActivatedRoute);
+  private cd = inject(ChangeDetectorRef);
+  constructor() {}
 
   ngOnInit(): void {
     this.route.queryParams.subscribe(qp => {
diff --git a/src/app/uiux/widgets/text-hero/text-hero.component.ts b/src/app/uiux/widgets/text-hero/text-hero.component.ts
index a780b6114..8f2255f87 100644
--- a/src/app/uiux/widgets/text-hero/text-hero.component.ts
+++ b/src/app/uiux/widgets/text-hero/text-hero.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { ITextHero } from '@core/interface/widgets/IText';
 
 @Component({
   selector: 'app-text-hero',
   templateUrl: './text-hero.component.html',
   styleUrls: ['./text-hero.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextHeroComponent implements OnInit {
   @Input() content: ITextHero;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/app/uiux/widgets/text/text.component.ts b/src/app/uiux/widgets/text/text.component.ts
index 358995249..edc8be9b5 100644
--- a/src/app/uiux/widgets/text/text.component.ts
+++ b/src/app/uiux/widgets/text/text.component.ts
@@ -1,20 +1,13 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import type { IText } from '@core/interface/widgets/IText';
 
 @Component({
   selector: 'app-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextComponent implements OnInit {
   @Input() content: IText;
-  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/stories/Changelog.mdx b/src/stories/Changelog.mdx
index 4bf37584d..2d773315a 100644
--- a/src/stories/Changelog.mdx
+++ b/src/stories/Changelog.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # 更新日志
 
-## 9.0.2(2025-01-07)
+## 9.0.2(2025-01-09)
 
 - 新增了账户更新组件；
 - 重构了复合组件和基组件个Formly配置；
@@ -26,6 +26,7 @@ import { Meta } from '@storybook/blocks';
 - 按钮组件Icon支持左右两侧位置；
 - 可视化box、card、card1v1基组件配置；
 - 重构了component toolbar，移除了block toolbar;
+- 移除OnPush策略，在动态组件中，多层子嵌套会导致子组件不更新，也为后续Signal做准备；
 
 ## 9.0.1(2024-12-03)
 

From 2a0b13004efdd556ad5de530174742d41044faa2 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 9 Jan 2025 18:10:39 +0800
Subject: [PATCH 30/35] refact: common component toolbar

---
 src/app/core/service/builder.service.ts       | 15 ------------
 src/app/core/state/BuilderState.ts            | 17 ++++++++++----
 .../layout-setting.component.html             |  2 +-
 .../layout-setting.component.scss             |  2 +-
 .../layout-setting.component.ts               | 23 +++----------------
 .../component-toolbar.component.html          |  7 +-----
 .../component-toolbar.component.ts            |  4 ++--
 7 files changed, 20 insertions(+), 50 deletions(-)

diff --git a/src/app/core/service/builder.service.ts b/src/app/core/service/builder.service.ts
index 0cf5240de..2773efffc 100644
--- a/src/app/core/service/builder.service.ts
+++ b/src/app/core/service/builder.service.ts
@@ -509,21 +509,6 @@ export class BuilderService extends ApiService {
       path,
       content,
     });
-    // this.builder.rightContent$.next({
-    //   mode: 'over',
-    //   hasBackdrop: false,
-    //   style: {
-    //     width: '308px',
-    //   },
-    //   elements: [
-    //     {
-    //       type: 'widget-picker',
-    //       addType,
-    //       path,
-    //       content,
-    //     },
-    //   ],
-    // });
   }
 
   initExtraBody(body: any[], isTemplate?: boolean): any[] {
diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index aa14941f5..3e5cca418 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -156,7 +156,7 @@ export class BuilderState {
     this.storage.store(this.versionKey, Object.assign([], this.version));
   }
 
-  getObjectByPath(path: string, body: any[]): any[] {
+  getArrsByPath(path: string, body: any[]): any[] {
     if (path.includes('.')) {
       const after = path.slice(0, path.lastIndexOf('.'));
       return get(body, after);
@@ -168,7 +168,7 @@ export class BuilderState {
 
   upDownComponent(index: number, direction: string, path: string): void {
     const { body } = this.currentPage;
-    let arrs = this.getObjectByPath(path, body);
+    let arrs = this.getArrsByPath(path, body);
     if (direction === 'up') {
       [arrs[index - 1], arrs[index]] = [arrs[index], arrs[index - 1]];
     }
@@ -190,10 +190,17 @@ export class BuilderState {
     }
   }
 
-  deleteComponent(index: number, path: string): void {
+  deleteComponent(path: string): void {
     const { body } = this.currentPage;
-    const arrs = this.getObjectByPath(path, body);
-    arrs.splice(index, 1);
+    const arrs = this.getArrsByPath(path, body);
+    const lastDotIndex = path.lastIndexOf('.');
+    if (lastDotIndex !== -1) {
+      const index = path.slice(lastDotIndex + 1);
+      arrs.splice(Number(index), 1);
+    } else {
+      // 一级组件
+      arrs.splice(Number(path), 1);
+    }
     this.updatePage();
   }
 
diff --git a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.html b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.html
index 3910eef2d..7d308a9b4 100644
--- a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.html
+++ b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.html
@@ -50,7 +50,7 @@
         @if (elements[0]?.type | isString) {
           <div class="actions my-5 flex justify-center">
             <app-btn
-              (click)="onWidgetPicker()"
+              (click)="onWidgetPicker(elements.length)"
               [content]="{
                 label: '新增',
                 icon: { svg: 'plus' },
diff --git a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.scss b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.scss
index c9992ead5..8283879f6 100644
--- a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.scss
+++ b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.scss
@@ -52,7 +52,7 @@
     &:hover {
       @apply opacity-100;
       .actions {
-        @apply block;
+        @apply flex;
       }
     }
   }
diff --git a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
index 02e013778..57e97c74a 100644
--- a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
@@ -97,27 +97,10 @@ export class LayoutSettingComponent {
       });
   }
 
-  onWidgetPicker(): void {
-    // 有layout builder，有普通的组件
+  onWidgetPicker(last: number): void {
     const { content, path } = this.content;
-    this.dialog.open(DialogComponent, {
-      width: '700px',
-      position: { bottom: '20px' },
-      data: {
-        disableCloseButton: true,
-        inputData: {
-          content: {
-            type: 'widget-picker',
-            content,
-            path,
-          },
-        },
-      },
-    });
-
-    this.dialog.afterAllClosed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      this.cd.detectChanges();
-    });
+    this.builder.closeRightDrawer$.next(true);
+    this.builderService.addBlock('widget', content, `${path}.elements.${last}`);
   }
 
   editorJSON(): void {
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index 727efe2d3..7f45b72f3 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -76,12 +76,7 @@
       />
     </div>
     <app-divider [content]="{ vertical: true }" />
-    <div
-      class="item"
-      (click)="onDelete(index, $event)"
-      [matTooltip]="'移除'"
-      matTooltipPosition="above"
-    >
+    <div class="item" (click)="onDelete($event)" [matTooltip]="'移除'" matTooltipPosition="above">
       <app-btn
         [content]="{
           label: '',
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index d32d4287d..d50ee4edf 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -83,10 +83,10 @@ export class ComponentToolbarComponent implements OnInit {
     this.builder.showComponentSetting(component, fields, path);
   }
 
-  onDelete(index: number, event: any): void {
+  onDelete(event: any): void {
     const path = this.util.generatePath(event.target);
     this.hiddenPicker();
-    this.builder.deleteComponent(index, path);
+    this.builder.deleteComponent(path);
   }
 
   hiddenPicker(): void {

From 9233348bd58be8ef6eb378024e9c85cd6e5c79f9 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Thu, 9 Jan 2025 23:50:13 +0800
Subject: [PATCH 31/35] refact: toolbar index

---
 src/app/core/service/utilities.service.ts     |  1 +
 src/app/core/state/BuilderState.ts            | 18 ++++---
 .../component-toolbar.component.html          | 39 +++++++-------
 .../component-toolbar.component.ts            | 51 +++++++++++++++----
 .../dynamic-component.component.html          |  2 +-
 5 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/src/app/core/service/utilities.service.ts b/src/app/core/service/utilities.service.ts
index 40bc8a927..dc2bd290d 100644
--- a/src/app/core/service/utilities.service.ts
+++ b/src/app/core/service/utilities.service.ts
@@ -199,6 +199,7 @@ export class UtilitiesService {
   }
 
   generatePath(contenteditableElement: any): string {
+    // 注意：get path只能在 component-item 区域使用
     let path = contenteditableElement.getAttribute('data-path') || '';
     let element = contenteditableElement;
     while (
diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index 3e5cca418..547b937bd 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -166,9 +166,10 @@ export class BuilderState {
     }
   }
 
-  upDownComponent(index: number, direction: string, path: string): void {
+  upDownComponent(direction: string, path: string): void {
     const { body } = this.currentPage;
-    let arrs = this.getArrsByPath(path, body);
+    const arrs = this.getArrsByPath(path, body);
+    const index = this.targetIndex(path);
     if (direction === 'up') {
       [arrs[index - 1], arrs[index]] = [arrs[index], arrs[index - 1]];
     }
@@ -193,15 +194,18 @@ export class BuilderState {
   deleteComponent(path: string): void {
     const { body } = this.currentPage;
     const arrs = this.getArrsByPath(path, body);
+    const index = this.targetIndex(path);
+    arrs.splice(index, 1);
+    this.updatePage();
+  }
+
+  targetIndex(path: string): number {
     const lastDotIndex = path.lastIndexOf('.');
     if (lastDotIndex !== -1) {
-      const index = path.slice(lastDotIndex + 1);
-      arrs.splice(Number(index), 1);
+      return Number(path.slice(lastDotIndex + 1));
     } else {
-      // 一级组件
-      arrs.splice(Number(path), 1);
+      return Number(path);
     }
-    this.updatePage();
   }
 
   updateComponent(index: number, content: any): void {
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
index 7f45b72f3..fef1a0a2f 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -1,25 +1,25 @@
 <div class="wrapper flex justify-between items-center">
   <div class="actions flex gap-1">
-    @if (index > 0) {
-      <div
-        class="item"
-        (click)="onUpdown(index, 'up', $event)"
-        [matTooltip]="'上移'"
-        matTooltipPosition="above"
-      >
-        <app-btn
-          [content]="{
-            label: '',
-            color: 'primary',
-            mode: 'icon',
-            icon: { svg: 'arrow-collapse-up', inline: true },
-          }"
-        />
-      </div>
-    }
     <div
-      class="item"
-      (click)="onUpdown(index, 'down', $event)"
+      class="item hidden"
+      [class.!block]="index() > 0"
+      (click)="onUpdown('up', $event)"
+      [matTooltip]="'上移'"
+      matTooltipPosition="above"
+    >
+      <app-btn
+        [content]="{
+          label: '',
+          color: 'primary',
+          mode: 'icon',
+          icon: { svg: 'arrow-collapse-up', inline: true },
+        }"
+      />
+    </div>
+    <div
+      class="item hidden"
+      [class.!block]="index() < length() && index() !== length() - 1"
+      (click)="onUpdown('down', $event)"
       [matTooltip]="'下移'"
       matTooltipPosition="above"
     >
@@ -59,7 +59,6 @@
         />
       </div>
     }
-
     <div
       class="item"
       (click)="onSetting(content, $event)"
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
index d50ee4edf..a34575f9b 100644
--- a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
+++ b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -1,6 +1,7 @@
 import {
-  ChangeDetectionStrategy,
+  AfterViewInit,
   Component,
+  ElementRef,
   HostBinding,
   Inject,
   Input,
@@ -8,35 +9,39 @@ import {
   inject,
   signal,
 } from '@angular/core';
+import { IPage } from '@core/interface/IAppConfig';
 import type { IComponentToolbar } from '@core/interface/combs/IBuilder';
 import { UtilitiesService } from '@core/service/utilities.service';
 import { BuilderState } from '@core/state/BuilderState';
-import { IS_BUILDER_MODE } from '@core/token/token-providers';
+import { BUILDER_CURRENT_PAGE, IS_BUILDER_MODE } from '@core/token/token-providers';
 import { getComponentSetting } from '@modules/builder/factory/getComponentSetting';
 import { FormlyFieldConfig } from '@ngx-formly/core';
+import { get } from 'lodash-es';
 import { LocalStorageService } from 'ngx-webstorage';
-import { Observable } from 'rxjs';
+import { Observable, delay } from 'rxjs';
 
 @Component({
   selector: 'app-component-toolbar',
   templateUrl: './component-toolbar.component.html',
   styleUrls: ['./component-toolbar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ComponentToolbarComponent implements OnInit {
+export class ComponentToolbarComponent implements OnInit, AfterViewInit {
   @Input() content: IComponentToolbar;
-  @Input() index: number;
+  index = signal(0);
+  length = signal(0);
   @HostBinding('class.component-toolbar') hostClass = true;
-  dialogRef: any;
 
   public bcData = signal(false);
 
   builder = inject(BuilderState);
   storage = inject(LocalStorageService);
   util = inject(UtilitiesService);
+  ele = inject(ElementRef);
+  currentPage: IPage;
   constructor(
     @Inject(IS_BUILDER_MODE)
-    public isBDMode$: Observable<boolean>
+    public isBDMode$: Observable<boolean>,
+    @Inject(BUILDER_CURRENT_PAGE) private currentPage$: Observable<IPage>
   ) {}
 
   ngOnInit(): void {
@@ -45,13 +50,39 @@ export class ComponentToolbarComponent implements OnInit {
     });
   }
 
+  ngAfterViewInit(): void {
+    this.currentPage$.pipe(delay(500)).subscribe(page => {
+      this.currentPage = page;
+      this.getIndex();
+    });
+  }
+
+  getIndex(): void {
+    const path = this.util.generatePath(this.ele.nativeElement);
+    const index = this.builder.targetIndex(path);
+    this.index.set(index);
+    const lastDotIndex = path.lastIndexOf('.');
+    const body = this.currentPage.body;
+    if (lastDotIndex !== -1) {
+      // child component
+      const before = path.slice(0, lastDotIndex);
+      const targetArray = get(body, before);
+      if (Array.isArray(targetArray)) {
+        this.length.set(targetArray.length);
+      }
+    } else {
+      // top parent component
+      this.length.set(body.length);
+    }
+  }
+
   get type(): string {
     return this.content.type || this.content.content?.type || '';
   }
 
-  onUpdown(index: number, direction: string, event: any): void {
+  onUpdown(direction: string, event: any): void {
     const path = this.util.generatePath(event.target);
-    this.builder.upDownComponent(index, direction, path);
+    this.builder.upDownComponent(direction, path);
     this.hiddenPicker();
   }
 
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index a231af58a..404584262 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -1,6 +1,6 @@
 <div [class.active-toolbar]="showToolbar()">
   @if (showToolbar() && screenService.isPlatformBrowser()) {
-    <app-component-toolbar #toolbar [content]="inputs" [index]="index" />
+    <app-component-toolbar #toolbar [content]="inputs" />
   }
   @let content = inputs.type ? inputs : inputs.content;
   <div class="relative" [ngClass]="content?.containerClasses">

From aba55cc241f9763d15b21d6649f8a1e382cbfe4c Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Fri, 10 Jan 2025 09:53:19 +0800
Subject: [PATCH 32/35] refact: showtoolbar logic

---
 .../builder-list/builder-list.component.html  |  7 +++++-
 .../dynamic-component.component.html          |  4 +--
 .../dynamic-component.component.ts            | 25 ++-----------------
 src/stories/Changelog.mdx                     |  2 +-
 4 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.html b/src/app/modules/builder/main/builder-list/builder-list.component.html
index 3d5aa66e7..3d04adf7b 100644
--- a/src/app/modules/builder/main/builder-list/builder-list.component.html
+++ b/src/app/modules/builder/main/builder-list/builder-list.component.html
@@ -23,7 +23,12 @@
             [cdkDragData]="item"
           >
             @if (item) {
-              <app-dynamic-component [attr.data-path]="i" [inputs]="item" [index]="i" />
+              <app-dynamic-component
+                [attr.data-path]="i"
+                [inputs]="item"
+                [index]="i"
+                [showToolbar]="true"
+              />
               @if (builderConfig$ | async; as builderConfig) {
                 <div class="add-new-section gap-2 items-center" [attr.data-path]="i">
                   <button
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index 404584262..d21c9d727 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -1,5 +1,5 @@
-<div [class.active-toolbar]="showToolbar()">
-  @if (showToolbar() && screenService.isPlatformBrowser()) {
+<div [class.active-toolbar]="showToolbar">
+  @if (showToolbar && screenService.isPlatformBrowser()) {
     <app-component-toolbar #toolbar [content]="inputs" />
   }
   @let content = inputs.type ? inputs : inputs.content;
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index 3d3ddd571..2db4f6bde 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -1,12 +1,9 @@
 import {
-  AfterContentInit,
   AfterViewInit,
   Component,
   ComponentRef,
-  DestroyRef,
   ElementRef,
   EnvironmentInjector,
-  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -17,39 +14,31 @@ import {
   ViewContainerRef,
   createComponent,
   inject,
-  signal,
 } from '@angular/core';
-import { Observable } from 'rxjs';
 import { ScreenService } from '@core/service/screen.service';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UtilitiesService } from '@core/service/utilities.service';
 import { ComponentService } from '@core/service/component.service';
 import type { IDynamicInputs } from '@core/interface/IAppConfig';
-import { IS_BUILDER_MODE } from '@core/token/token-providers';
 
 @Component({
   selector: 'app-dynamic-component',
   templateUrl: './dynamic-component.component.html',
   styleUrls: ['./dynamic-component.component.scss'],
 })
-export class DynamicComponentComponent
-  implements OnInit, AfterViewInit, OnChanges, OnDestroy, AfterContentInit
-{
+export class DynamicComponentComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   @Input() inputs: IDynamicInputs;
   @Input() index: number; // just for order
+  @Input() showToolbar = false;
   @ViewChild('componentContainer', { read: ViewContainerRef, static: true })
   container: ViewContainerRef;
-  showToolbar = signal(false);
 
   ele = inject(ElementRef);
   util = inject(UtilitiesService);
   screenService = inject(ScreenService);
-  private destroyRef = inject(DestroyRef);
   componentService = inject(ComponentService);
   private readonly renderer = inject(Renderer2);
   private readonly environmentInjector = inject(EnvironmentInjector);
   public componentRef: ComponentRef<unknown> | ComponentRef<any> | undefined | any;
-  constructor(@Inject(IS_BUILDER_MODE) public isBuilderMode$: Observable<boolean>) {}
 
   ngOnInit(): void {}
 
@@ -61,16 +50,6 @@ export class DynamicComponentComponent
     });
   }
 
-  ngAfterContentInit(): void {
-    this.isBuilderMode$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(state => {
-      if (state) {
-        this.showToolbar.set(true);
-      } else {
-        this.showToolbar.set(false);
-      }
-    });
-  }
-
   ngAfterViewInit(): void {
     this.loadComponent();
   }
diff --git a/src/stories/Changelog.mdx b/src/stories/Changelog.mdx
index 2d773315a..9b0022735 100644
--- a/src/stories/Changelog.mdx
+++ b/src/stories/Changelog.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # 更新日志
 
-## 9.0.2(2025-01-09)
+## 9.0.2(2025-01-10)
 
 - 新增了账户更新组件；
 - 重构了复合组件和基组件个Formly配置；

From ead49857f531b3c7c01ec81c458801fb16dc9226 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Fri, 10 Jan 2025 11:41:52 +0800
Subject: [PATCH 33/35] remove PageIndex

---
 src/app/core/state/BuilderState.ts            | 55 +++++++++++--------
 .../layout-builder.component.html             | 11 ++--
 .../layout-builder.component.ts               |  1 -
 .../layout-toolbar.component.html             |  2 +-
 .../layout-toolbar.component.ts               | 14 ++---
 .../dynamic-component.component.html          |  4 +-
 6 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
index 547b937bd..664fd3c05 100644
--- a/src/app/core/state/BuilderState.ts
+++ b/src/app/core/state/BuilderState.ts
@@ -208,12 +208,6 @@ export class BuilderState {
     }
   }
 
-  updateComponent(index: number, content: any): void {
-    const { body } = this.currentPage;
-    body[index] = content;
-    this.updatePage();
-  }
-
   bulkUpdateComponent(content: object): void {
     this.currentPage.body = this.currentPage.body.map(item => {
       return {
@@ -224,27 +218,42 @@ export class BuilderState {
     this.saveLocalVersions();
   }
 
-  updatePageContentByPath(path: string, content: any, addType?: 'add'): void {
+  /**
+   * example: "2.elements.1"
+   * before: 2
+   * targetIndex: 1
+   */
+  updatePageContentByPath(path: string, content: any, addType?: 'add' | 'remove'): void {
     const { body } = this.currentPage;
-    if (!addType) {
-      set(body, path, content);
-    }
-
-    if (addType === 'add') {
-      const lastDotIndex = path.lastIndexOf('.');
-      if (lastDotIndex !== -1) {
-        // loop element 等，新增组件到数组
-        const before = path.slice(0, lastDotIndex);
-        const index = path.slice(lastDotIndex + 1);
-        const targetArray = get(body, before);
+    const lastDotIndex = path.lastIndexOf('.');
+    const before = path.slice(0, lastDotIndex);
+    const targetIndex = Number(path.slice(lastDotIndex + 1));
+    const targetArray = get(body, before);
+
+    switch (addType) {
+      case 'add':
+        if (lastDotIndex !== -1) {
+          // 对子级组件的数组操作
+          if (Array.isArray(targetArray)) {
+            targetArray.splice(targetIndex + 1, 0, content);
+            set(body, before, targetArray);
+          }
+        } else {
+          // body 一级组件
+          body.splice(Number(path) + 1, 0, cloneDeep(content));
+        }
+        break;
+      case 'remove':
+        // 移除子级数组的组件
         if (Array.isArray(targetArray)) {
-          targetArray.splice(Number(index) + 1, 0, content);
+          targetArray.splice(targetIndex, 1);
           set(body, before, targetArray);
         }
-      } else {
-        // body 一级组件
-        body.splice(Number(path) + 1, 0, cloneDeep(content));
-      }
+        break;
+      default:
+        // 根据路径直接覆盖，整个对象、某个属性等
+        set(body, path, content);
+        break;
     }
 
     this.updatePage();
diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index e1f57e0b3..68a212cc2 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -36,13 +36,8 @@
           [attr.data-path]="'elements.' + i"
         >
           @if (isBuilderMode && screenService.isPlatformBrowser()) {
-            <div class="toolbar hidden absolute z-50">
-              <app-layout-toolbar
-                [lbContent]="content"
-                [i]="i"
-                [layout]="layout"
-                [pageIndex]="pageIndex"
-              />
+            <div class="toolbar hidden absolute z-[1000]">
+              <app-layout-toolbar [lbContent]="content" [i]="i" [layout]="layout" />
             </div>
             @if (elements.length === 0) {
               <div
@@ -104,6 +99,8 @@
             </div>
           </div>
         </div>
+      } @empty {
+        <div class="p-5 text-center col-span-12 opacity-50">当前无Layout，可重新删除新建</div>
       }
     </div>
   </div>
diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
index 2fe8318e5..d57fcdca3 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -26,7 +26,6 @@ import { createPopper } from '@popperjs/core';
 })
 export class LayoutBuilderComponent implements OnInit, AfterViewInit {
   @Input() content: ILayoutBuilder;
-  @Input() pageIndex: number;
 
   util = inject(UtilitiesService);
   ele = inject(ElementRef);
diff --git a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html
index 6c22d6efe..ae4d3a8ee 100644
--- a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html
+++ b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.html
@@ -43,7 +43,7 @@
         <span>选择组件插入新一栏</span>
       </div>
     </button>
-    <button mat-menu-item (click)="onDeleteRow(i)">
+    <button mat-menu-item (click)="onDeleteRow(toolbar)">
       <div class="flex items-center">
         <app-icon [content]="{ svg: 'close', inline: true }"></app-icon>
         <span>移除当前栏</span>
diff --git a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
index 8994f708c..71a6ecd11 100644
--- a/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
+++ b/src/app/modules/builder/layout-builder/layout-toolbar/layout-toolbar.component.ts
@@ -17,14 +17,13 @@ export class LayoutToolbarComponent implements OnInit {
   @Input() lbContent: any;
   @Input() i: number;
   @Input() layout: any;
-  @Input() pageIndex: number;
   util = inject(UtilitiesService);
   builder = inject(BuilderState);
   builderService = inject(BuilderService);
 
   ngOnInit(): void {}
 
-  onMoveCol(direction: 'left' | 'right', lists: any[], target: any, index: number): void {
+  onMoveCol(direction: 'left' | 'right', lists: any[], target: Element, index: number): void {
     const elements = cloneDeep(lists);
     const path = this.util.generatePath(target);
     const lastDotIndex = path.lastIndexOf('.');
@@ -40,17 +39,16 @@ export class LayoutToolbarComponent implements OnInit {
     this.builder.updatePageContentByPath(arrayPath, elements);
   }
 
-  addBlock(addType: string, content: any, target: any): void {
+  addBlock(addType: string, content: any, target: Element): void {
     this.builderService.addBlock(addType, content, this.util.generatePath(target));
   }
 
-  onDeleteRow(index: number): void {
-    const { elements } = this.lbContent;
-    elements.splice(index, 1);
-    this.builder.updateComponent(this.pageIndex, this.lbContent);
+  onDeleteRow(target: Element): void {
+    const path = this.util.generatePath(target);
+    this.builder.updatePageContentByPath(path, this.lbContent, 'remove');
   }
 
-  onLayoutSettings(layout: any, target: any): void {
+  onLayoutSettings(layout: any, target: Element): void {
     const path = this.util.generatePath(target);
     const fields: FormlyFieldConfig[] = getLayoutSetting(layout);
     this.builder.showComponentSetting(layout, fields, path);
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
index d21c9d727..4a8eeccf7 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.html
@@ -1,6 +1,6 @@
 <div [class.active-toolbar]="showToolbar">
-  @if (showToolbar && screenService.isPlatformBrowser()) {
-    <app-component-toolbar #toolbar [content]="inputs" />
+  @if (showToolbar) {
+    <app-component-toolbar [content]="inputs" />
   }
   @let content = inputs.type ? inputs : inputs.content;
   <div class="relative" [ngClass]="content?.containerClasses">

From 281c52f2f900bcc5262a3ceccb7e054c7b397173 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Fri, 10 Jan 2025 11:58:24 +0800
Subject: [PATCH 34/35] remove pageIndex for update component

---
 src/app/core/interface/IBuilder.ts                             | 1 -
 .../builder/dynamic-component/dynamic-component.component.ts   | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/core/interface/IBuilder.ts b/src/app/core/interface/IBuilder.ts
index 1d71d7e68..7026bfdc7 100644
--- a/src/app/core/interface/IBuilder.ts
+++ b/src/app/core/interface/IBuilder.ts
@@ -126,7 +126,6 @@ export interface ILayoutBlock {
 export interface ILayoutSetting {
   type: 'layout-setting';
   fields: FormlyFieldConfig[];
-  pageIndex?: number;
   content?: any;
   path?: string;
   fullWidth: boolean;
diff --git a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
index 2db4f6bde..ec47cb157 100644
--- a/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
+++ b/src/app/uiux/widgets/builder/dynamic-component/dynamic-component.component.ts
@@ -27,7 +27,7 @@ import type { IDynamicInputs } from '@core/interface/IAppConfig';
 })
 export class DynamicComponentComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   @Input() inputs: IDynamicInputs;
-  @Input() index: number; // just for order
+  @Input() index: number; // just for animate count
   @Input() showToolbar = false;
   @ViewChild('componentContainer', { read: ViewContainerRef, static: true })
   container: ViewContainerRef;
@@ -80,7 +80,6 @@ export class DynamicComponentComponent implements OnInit, AfterViewInit, OnChang
         } else {
           this.componentRef.instance.content = this.inputs;
         }
-        this.componentRef.instance.pageIndex = this.index;
       }
 
       this.container.insert(this.componentRef.hostView);

From 1273a2ac23d90e1a6b71ecd3308545333c5e3f43 Mon Sep 17 00:00:00 2001
From: biaogebusy <349255833@qq.com>
Date: Fri, 10 Jan 2025 12:03:14 +0800
Subject: [PATCH 35/35] quick fix

---
 .../builder/layout-builder/layout-builder.component.html   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
index 68a212cc2..fce5bb7d9 100644
--- a/src/app/modules/builder/layout-builder/layout-builder.component.html
+++ b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -80,7 +80,12 @@
                   class="item relative box-border item-{{ item.type }} col-span-12"
                   [attr.data-path]="'elements.' + index"
                 >
-                  <app-dynamic-component class="component" [inputs]="item" [index]="index" />
+                  <app-dynamic-component
+                    class="component"
+                    [inputs]="item"
+                    [index]="index"
+                    [showToolbar]="true"
+                  />
                   @if (isBuilderMode) {
                     <div class="block-toolbar" #action>
                       <button mat-raised-button (click)="addBlock('widget', content, action)">