merge

biaogebusy · Jan 10, 2025 · 2de8eae · 2de8eae
2 parents cb28690 + c25f77f
commit 2de8eae
Show file tree

Hide file tree

Showing 110 changed files with 2,039 additions and 2,266 deletions.
diff --git 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/)

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
@@ -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/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
@@ -126,19 +126,24 @@ export interface ILayoutBlock {
 export interface ILayoutSetting {
   type: 'layout-setting';
   fields: FormlyFieldConfig[];
-  pageIndex?: number;
   content?: any;
   path?: string;
   fullWidth: boolean;
 }
 
 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
@@ -503,20 +503,11 @@ 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.widgetsPicker$.next({
+      type: 'widget-picker',
+      addType,
+      path,
+      content,
     });
   }
 

diff --git 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
@@ -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 widgetsPicker$ = new Subject<IWidgetPicker | false>();
   public closeRightDrawer$ = new Subject<boolean>();
   public fixedChange$ = new Subject<boolean>();
   public animateDisable$ = new Subject<boolean>();
@@ -153,14 +156,26 @@ export class BuilderState {
     this.storage.store(this.versionKey, Object.assign([], this.version));
   }
 
-  upDownComponent(index: number, direction: string): void {
+  getArrsByPath(path: string, body: any[]): any[] {
+    if (path.includes('.')) {
+      const after = path.slice(0, path.lastIndexOf('.'));
+      return get(body, after);
+    } else {
+      // 一级组件
+      return body;
+    }
+  }
+
+  upDownComponent(direction: string, path: string): void {
     const { body } = this.currentPage;
+    const arrs = this.getArrsByPath(path, body);
+    const index = this.targetIndex(path);
     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,16 +191,21 @@ export class BuilderState {
     }
   }
 
-  deleteComponent(index: number): void {
+  deleteComponent(path: string): void {
     const { body } = this.currentPage;
-    body.splice(index, 1);
+    const arrs = this.getArrsByPath(path, body);
+    const index = this.targetIndex(path);
+    arrs.splice(index, 1);
     this.updatePage();
   }
 
-  updateComponent(index: number, content: any): void {
-    const { body } = this.currentPage;
-    body[index] = content;
-    this.updatePage();
+  targetIndex(path: string): number {
+    const lastDotIndex = path.lastIndexOf('.');
+    if (lastDotIndex !== -1) {
+      return Number(path.slice(lastDotIndex + 1));
+    } else {
+      return Number(path);
+    }
   }
 
   bulkUpdateComponent(content: object): void {
@@ -198,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/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/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';
@@ -51,6 +49,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,
@@ -84,7 +83,6 @@ const components = [
     PageListComponent,
     BuilderSidebarComponent,
     LayoutToolbarComponent,
-    BlockToolbarComponent,
     BuilderWorkspaceComponent,
     ManagePageComponent,
     DefaultPageComponent,
@@ -97,6 +95,7 @@ const components = [
     DragDropModule,
     BuilderRoutingModule,
     FormModule,
+    MonacoEditorModule.forRoot(),
   ],
   providers: [
     {

diff --git 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,18 +3423,39 @@ 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: [
               {
                 src: '/assets/video/storybook.mp4',
                 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',
           },