fix: builder

biaogebusy · Jan 30, 2024 · 4856d0f · 4856d0f
1 parent 8367bf5
commit 4856d0f
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 70 deletions.
diff --git a/src/app/core/factory/factory.ts b/src/app/core/factory/factory.ts
@@ -81,14 +81,14 @@ export function enableBuilderToolbarFactory(
   router: Router
 ): Observable<boolean> {
   const enableToolbar$ = new BehaviorSubject<boolean>(false);
-  if (router.url === BUILDERPATH) {
+  if (router.url.includes(BUILDERPATH)) {
     enableToolbar$.next(true);
   } else {
     enableToolbar$.next(false);
   }
   router.events.subscribe((event) => {
     if (event instanceof NavigationEnd) {
-      if (router.url === BUILDERPATH) {
+      if (router.url.includes(BUILDERPATH)) {
         enableToolbar$.next(true);
       } else {
         enableToolbar$.next(false);
@@ -140,7 +140,10 @@ export function manageSidebarStateFactory(
   branding$.subscribe((branding) => {
     if (userService.checkShow(branding.header?.sidebar, user)) {
       // init manage sidebar
-      if (doc.location.pathname.split('/').length === 2) {
+      if (
+        doc.location.pathname.split('/').length === 2 ||
+        doc.location.pathname.includes(BUILDERPATH)
+      ) {
         enableSidebar = false;
         state$.next({
           enableSidebar: enableSidebar,
@@ -165,7 +168,7 @@ export function manageSidebarStateFactory(
       router.events.subscribe((event) => {
         if (event instanceof NavigationEnd) {
           const url = event.url;
-          if (url.split('/').length === 2) {
+          if (url.split('/').length === 2 || url.includes(BUILDERPATH)) {
             if (enableSidebar) {
               state$.next({
                 enableSidebar: false,

diff --git a/src/app/modules/builder/builder.component.ts b/src/app/modules/builder/builder.component.ts
@@ -63,13 +63,15 @@ export class BuilderComponent implements OnInit, AfterViewInit, OnDestroy {
     } else {
       utli.openSnackbar('请开启 Builder 功能！', 'ok');
     }
-    this.builder.builderRightContent$.subscribe((content) => {
-      if (content && this.builder.showRightDrawer) {
-        setTimeout(() => {
-          this.builderRightDrawer.open();
-        }, 100);
-      }
-    });
+    this.builder.builderRightContent$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((content) => {
+        if (content && this.builder.showRightDrawer) {
+          setTimeout(() => {
+            this.builderRightDrawer.open();
+          }, 100);
+        }
+      });
   }
 
   ngAfterViewInit(): void {
@@ -86,9 +88,11 @@ export class BuilderComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       });
 
-    this.builder.closeBuilderRightDrawer$.subscribe(() => {
-      this.onClose();
-    });
+    this.builder.closeBuilderRightDrawer$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.onClose();
+      });
 
     this.doc.addEventListener('keydown', (event: any) => {
       const isFull = this.storage.retrieve('builderFullScreen');

diff --git a/src/app/modules/builder/data/base-for-builder.ts b/src/app/modules/builder/data/base-for-builder.ts
@@ -114,10 +114,11 @@ export const base = [
           fullWidth: false,
           bg: {
             classes: 'bg-fill-width',
+            overlay: '',
           },
           layoutAlign: 'center stretch',
           gap: {
-            xs: 8,
+            xs: 0,
             sm: 16,
             md: 32,
             lg: 48,
@@ -160,9 +161,9 @@ export const base = [
                 },
                 {
                   type: 'link',
-                  label: '<h2>链接搭配你的风格</h2><p></p>',
+                  label: '链接搭配你的风格',
                   classes: '',
-                  href: '/manage',
+                  href: '/',
                 },
                 {
                   type: 'img',
@@ -210,9 +211,9 @@ export const base = [
                 },
                 {
                   type: 'link',
-                  label: '<h2>探索更多</h2>',
+                  label: '探索更多',
                   classes: '',
-                  href: '/manage',
+                  href: '/',
                 },
                 {
                   type: 'img',
@@ -224,6 +225,11 @@ export const base = [
               ],
             },
           ],
+          bgClasses: 'bg-fill-width',
+          overlay: '',
+          direction: 'row wrap',
+          horizontal: 'center',
+          vertical: 'stretch',
         },
       },
       {

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -76,17 +76,19 @@ export class LayoutBuilderComponent implements OnInit, OnDestroy {
         }
       });
 
-    this.builder.jsoneditorContent$.subscribe((value) => {
-      const { isLayoutWidget, i, index, data } = value;
-      if (isLayoutWidget) {
-        const { elements } = this.content;
-        elements[i].elements[index] = defaultsDeep(
-          data,
-          elements[i].elements[index]
-        );
-        this.cd.detectChanges();
-      }
-    });
+    this.builder.jsoneditorContent$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((value) => {
+        const { isLayoutWidget, i, index, data } = value;
+        if (isLayoutWidget) {
+          const { elements } = this.content;
+          elements[i].elements[index] = defaultsDeep(
+            data,
+            elements[i].elements[index]
+          );
+          this.cd.detectChanges();
+        }
+      });
   }
 
   isLayoutWidget(i: number | undefined, index: number | undefined): boolean {
@@ -113,7 +115,7 @@ export class LayoutBuilderComponent implements OnInit, OnDestroy {
       },
     });
 
-    this.dialog.afterAllClosed.subscribe(() => {
+    this.dialog.afterAllClosed.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.cd.detectChanges();
     });
   }

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
@@ -19,8 +19,8 @@ import { BuilderState } from '@core/state/BuilderState';
 import { ScreenState } from '@core/state/screen/ScreenState';
 import { BUILDER_CURRENT_PAGE } from '@core/token/token-providers';
 import { map as each } from 'lodash-es';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-builder-list',
@@ -35,6 +35,7 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
   markers: NodeListOf<Element>;
   opened = false;
   previewClass$: Observable<any>;
+  destroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(
     public builder: BuilderState,
@@ -46,14 +47,16 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.builder.previewListDrawer$.subscribe((statue) => {
-      if (statue) {
-        this.drawer.open();
-      } else {
-        this.drawer.close();
-      }
-      this.cd.detectChanges();
-    });
+    this.builder.previewListDrawer$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((statue) => {
+        if (statue) {
+          this.drawer.open();
+        } else {
+          this.drawer.close();
+        }
+        this.cd.detectChanges();
+      });
   }
 
   trackByFn(index: number, item: any): number {
@@ -75,6 +78,7 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
     });
 
     this.previewClass$ = this.builder.switchPreivew$.pipe(
+      takeUntil(this.destroy$),
       map((media) => {
         return {
           preview: media !== 'none' && media !== undefined,
@@ -92,5 +96,9 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
     each(this.markers, (marker) => {
       marker.remove();
     });
+    if (this.destroy$.next) {
+      this.destroy$.next(true);
+      this.destroy$.unsubscribe();
+    }
   }
 }
diff --git a/src/app/modules/builder/main/meta-edit/meta-edit.component.ts b/src/app/modules/builder/main/meta-edit/meta-edit.component.ts
@@ -76,7 +76,7 @@ export class MetaEditComponent implements OnInit, OnDestroy, AfterViewInit {
   ngOnInit(): void {
     this.builder.selectedMedia$
       .pipe(takeUntil(this.destroy$))
-      .subscribe((img: any) => {
+      .subscribe(({ img }) => {
         const { src } = img;
         this.dialog.closeAll();
         this.content.data = img;

diff --git a/src/app/modules/builder/sidebar/builder-panel/builder-panel.component.html b/src/app/modules/builder/sidebar/builder-panel/builder-panel.component.html
@@ -16,9 +16,9 @@
             <div class="item" matRipple fxFlex.lt-sm="50%" fxFlex.gt-xs="0 0 calc(100%/3)"
               [matTooltip]="builder.fixedContent  === widget.content ?'已锁定预览，可查看复制组件JSON' : ''"
               matTooltipPosition='above'>
-              <div *ngIf="widget.type !== 'json'" [cdkDragData]="widget.content" cdkDrag (cdkDragMoved)="onMoved()"
-                (mouseenter)="onShowcase(widget.content)" (mouseleave)="hideShowcase()"
-                (click)="onFixed(widget.content)">
+              <div *ngIf="widget.type !== 'json'" [cdkDragData]="widget.content" cdkDrag
+                (cdkDragStarted)="onDragStarted()" (cdkDragMoved)="onMoved()" (mouseenter)="onShowcase(widget.content)"
+                (mouseleave)="hideShowcase()" (click)="onFixed(widget.content)">
                 <div class="inner move" [ngClass]="builder.fixedContent === widget.content ? 'active' : ''"
                   fxLayout="column" fxLayoutAlign="center center">
                   <app-icon *ngIf="widget.icon" [content]="widget.icon"></app-icon>
@@ -38,8 +38,9 @@
               <div class="item" matRipple fxFlex.lt-sm="50%" fxFlex.gt-xs="0 0 calc(100%/3)"
                 [matTooltip]="builder.fixedContent === item.content ?'已锁定预览，可查看复制组件JSON' : ''"
                 matTooltipPosition='above'>
-                <div *ngIf="item.type !== 'json'" [cdkDragData]="item.content" cdkDrag (cdkDragMoved)="onMoved()"
-                  (mouseenter)="onShowcase(item.content)" (mouseleave)="hideShowcase()" (click)="onFixed(item.content)">
+                <div *ngIf="item.type !== 'json'" [cdkDragData]="item.content" cdkDrag
+                  (cdkDragStarted)="onDragStarted()" (cdkDragMoved)="onMoved()" (mouseenter)="onShowcase(item.content)"
+                  (mouseleave)="hideShowcase()" (click)="onFixed(item.content)">
                   <div class="inner move" [ngClass]="builder.fixedContent === item.content ? 'active' : ''"
                     fxLayout="column" fxLayoutAlign="center center">
                     <app-icon *ngIf="item.icon" [content]="item.icon"></app-icon>

diff --git a/src/app/modules/builder/sidebar/builder-panel/builder-panel.component.ts b/src/app/modules/builder/sidebar/builder-panel/builder-panel.component.ts
@@ -112,6 +112,11 @@ export class BuilderPanelComponent implements OnInit, AfterViewInit {
     });
   }
 
+  onDragStarted(): void {
+    this.builder.closeBuilderRightDrawer$.next(true);
+    this.builder.switchPreivew$.next('none');
+  }
+
   onAfterExpand(): void {
     this.builder.cancelFixedShowcase();
   }

diff --git a/src/app/modules/builder/sidebar/builder-version/builder-version.component.ts b/src/app/modules/builder/sidebar/builder-version/builder-version.component.ts
@@ -3,21 +3,25 @@ import {
   ChangeDetectorRef,
   Component,
   Input,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import { IPage } from '@core/interface/IAppConfig';
 import { BuilderState } from '@core/state/BuilderState';
 import { LocalStorage, LocalStorageService } from 'ngx-webstorage';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-builder-version',
   templateUrl: './builder-version.component.html',
   styleUrls: ['./builder-version.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BuilderVersionComponent implements OnInit {
+export class BuilderVersionComponent implements OnInit, OnDestroy {
   @LocalStorage('version')
   version: IPage[];
+  destroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(
     public builder: BuilderState,
@@ -26,9 +30,12 @@ export class BuilderVersionComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.storage.observe('version').subscribe(() => {
-      this.cd.detectChanges();
-    });
+    this.storage
+      .observe('version')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.cd.detectChanges();
+      });
   }
 
   onDelete(index: number): void {
@@ -124,4 +131,11 @@ export class BuilderVersionComponent implements OnInit {
       this.builder.saveLocalVersions();
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.destroy$.next) {
+      this.destroy$.next(true);
+      this.destroy$.unsubscribe();
+    }
+  }
 }
diff --git a/src/app/modules/builder/toolbar/switch-preview/switch-preview.component.ts b/src/app/modules/builder/toolbar/switch-preview/switch-preview.component.ts
@@ -3,22 +3,25 @@ import {
   ChangeDetectorRef,
   Component,
   Inject,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import { IPage } from '@core/interface/IAppConfig';
 import { UtilitiesService } from '@core/service/utilities.service';
 import { BuilderState } from '@core/state/BuilderState';
 import { BUILDER_CURRENT_PAGE } from '@core/token/token-providers';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-switch-preview',
   templateUrl: './switch-preview.component.html',
   styleUrls: ['./switch-preview.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SwitchPreviewComponent implements OnInit {
+export class SwitchPreviewComponent implements OnInit, OnDestroy {
   currentPage: IPage;
+  destroy$: Subject<boolean> = new Subject<boolean>();
   constructor(
     private builder: BuilderState,
     private cd: ChangeDetectorRef,
@@ -65,7 +68,7 @@ export class SwitchPreviewComponent implements OnInit {
     },
   ];
   ngOnInit(): void {
-    this.currentPage$.subscribe((page) => {
+    this.currentPage$.pipe(takeUntil(this.destroy$)).subscribe((page) => {
       this.currentPage = page;
     });
   }
@@ -85,4 +88,11 @@ export class SwitchPreviewComponent implements OnInit {
     this.builder.closeBuilderRightDrawer$.next(true);
     this.builder.switchPreivew$.next(preview.value);
   }
+
+  ngOnDestroy(): void {
+    if (this.destroy$.next) {
+      this.destroy$.next(true);
+      this.destroy$.unsubscribe();
+    }
+  }
 }