enhance: layout builder

biaogebusy · Mar 10, 2024 · d5a9557 · d5a9557
1 parent f4a1fee
commit d5a9557
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 40 deletions.
diff --git a/src/app/modules/builder/factory/getBlockSetting.ts b/src/app/modules/builder/factory/getBlockSetting.ts
@@ -12,7 +12,7 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
               type: 'slider',
               key: 'xs',
               className: 'width-100',
-              defaultValue: layout.row.xs,
+              defaultValue: layout?.row?.xs || 12,
               templateOptions: {
                 min: 1,
                 max: 12,
@@ -24,7 +24,7 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
               type: 'slider',
               key: 'sm',
               className: 'width-100',
-              defaultValue: layout.row.sm,
+              defaultValue: layout?.row?.sm || 12,
               templateOptions: {
                 min: 1,
                 max: 12,
@@ -36,7 +36,7 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
               type: 'slider',
               key: 'md',
               className: 'width-100',
-              defaultValue: layout.row.md,
+              defaultValue: layout?.row?.md || 12,
               templateOptions: {
                 min: 1,
                 max: 12,
@@ -48,7 +48,7 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
               type: 'slider',
               key: 'lg',
               className: 'width-100',
-              defaultValue: layout.row.lg,
+              defaultValue: layout?.row?.lg || 12,
               templateOptions: {
                 min: 1,
                 max: 12,

diff --git a/src/app/modules/builder/factory/getComponentSetting.ts b/src/app/modules/builder/factory/getComponentSetting.ts
@@ -281,21 +281,21 @@ export function getComponentSetting(content: any): FormlyFieldConfig[] {
             type: 'select',
             key: 'direction',
             className: 'width-100',
-            defaultValue: content.direction || 'row',
+            defaultValue: content.direction || 'row wrap',
             templateOptions: {
               label: '组件布局方向',
               options: [
                 {
-                  label: 'Column',
-                  value: 'column',
+                  label: 'Row Wrap',
+                  value: 'row wrap',
                 },
                 {
                   label: 'Row',
                   value: 'row',
                 },
                 {
-                  label: 'Row Wrap',
-                  value: 'row wrap',
+                  label: 'Column',
+                  value: 'column',
                 },
               ],
             },

diff --git a/src/app/modules/builder/factory/getImg.ts b/src/app/modules/builder/factory/getImg.ts
@@ -11,6 +11,16 @@ export function getImg(widget: any, options?: any[]): FormlyFieldConfig[] {
             label: '图片',
           },
           fieldGroup: [
+            {
+              key: 'src',
+              type: 'img-picker',
+              defaultValue: widget.src || '',
+              templateOptions: {
+                label: '更新图片',
+                fileName: widget.src.split('/').pop(),
+                alt: widget.alt || '',
+              },
+            },
             {
               key: 'classes',
               type: 'input',

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -203,6 +203,9 @@ export class LayoutBuilderComponent
       case 'icon':
         fields = getIcon(widget, [animateConfig]);
         break;
+      case 'layout-builder':
+        fields = getBlockSetting(widget);
+        break;
       default:
         fields = getNone(widget, [animateConfig]);
     }

diff --git a/src/app/modules/builder/main/builder-showcase/builder-showcase.component.scss b/src/app/modules/builder/main/builder-showcase/builder-showcase.component.scss
@@ -16,32 +16,37 @@
   padding-bottom: 60px;
   border-radius: 4px;
   overflow: hidden;
-  ::ng-deep {
-    .card-1v1 {
-      transform: none !important;
-      max-height: 75vh;
-      overflow: auto;
-      .title {
-        margin-bottom: 0;
-      }
-      > .card-body {
-        display: none;
-      }
-    }
-    .component-toolbar {
-      + app-spacer {
-        display: block;
+  > app-card-1v1 {
+    ::ng-deep {
+      > .card-1v1 {
+        transform: none !important;
+        max-height: 75vh;
+        overflow: auto;
+        > .components {
+          padding: 0;
+        }
+        .title {
+          margin-bottom: 0;
+        }
+        > .card-body {
+          display: none;
+        }
       }
-    }
-    .layout-builder {
-      .block-toolbar,
-      .block-menu,
-      .actions {
-        display: none !important;
+      .component-toolbar {
+        + app-spacer {
+          display: block;
+        }
       }
-      .layout {
-        .placeholder {
-          pointer-events: none;
+      .layout-builder {
+        .block-toolbar,
+        .block-menu,
+        .actions {
+          display: none !important;
+        }
+        .layout {
+          .placeholder {
+            pointer-events: none;
+          }
         }
       }
     }

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
@@ -37,7 +37,6 @@
     position: relative;
     width: 100%;
     height: 100%;
-    text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/app/uiux/widgets/card/card1v1/card1v1.component.html b/src/app/uiux/widgets/card/card1v1/card1v1.component.html
@@ -1,14 +1,16 @@
 <div class="card-1v1" [ngClass]="content.classes">
-  <app-feature-box *ngIf="content.feature" [content]="content.feature"></app-feature-box>
+  <app-feature-box [attr.data-path]="'feature'" *ngIf="content.feature" [content]="content.feature"></app-feature-box>
   <div class="components" *ngIf="content.components">
-    <app-dynamic-component *ngFor="let item of content.components" [inputs]="item"></app-dynamic-component>
+    <app-dynamic-component [attr.data-path]="'components.'+i" *ngFor="let item of content.components;index as i"
+      [inputs]="item"></app-dynamic-component>
   </div>
   <div class="card-body p-y-sm p-x-sm">
     <div class="title mat-h2 two-line" *ngIf="content.link">
-      <app-link [content]="content.link"></app-link>
+      <app-link [attr.data-path]="'link'" [content]="content.link"></app-link>
     </div>
     <div class="post-meta" fxLayoutAlign="space-between center" *ngIf="content.moreLabel">
-      <a *ngIf="content.link" [href]="content.link.href" class="text-muted readmore">{{content.moreLabel}}
+      <a *ngIf="content.link" [href]="content.link.href" class="text-muted readmore">
+        <span contentedit="moreLabel">{{content.moreLabel}}</span>
         <mat-icon inline="true">navigate_next</mat-icon>
       </a>
     </div>

diff --git a/src/app/uiux/widgets/feature-box/feature-box.component.html b/src/app/uiux/widgets/feature-box/feature-box.component.html
@@ -16,7 +16,7 @@
     </ng-template>
     <div class="feature-inner-ling">
       <div class="media" [ngClass]="box.ratios || 'media-4-3'">
-        <app-img *ngIf="box.img" [content]="box.img"></app-img>
+        <app-img [attr.data-path]="'img'" *ngIf="box.img" [content]="box.img"></app-img>
       </div>
       <div class="title one-line p-x-xs" *ngIf="content?.mode === 'float' || type !== 'picture'">{{title}}</div>
     </div>

diff --git a/src/assets/app/core/base.json b/src/assets/app/core/base.json
@@ -507,7 +507,7 @@
             "title": {
               "label": "欢迎使用 <strong class=\"text-primary\">Web builder </strong> <br>快速构建页面",
               "style": "style-v4",
-              "classes": "mat-display-2 bold"
+              "classes": "mat-display-1 bold"
             },
             "body": "从左侧选择组件拖动到编辑区：<ul class=\"list-done\"><li>可视化编辑组件图文数据，所见即所得；</li><li>可以复制整个页面的 JSON 或者单个组件的 JSON；</li></ul><p>欢迎入群一起探索更多的可能性和数字创新体验，QQ 交流群：<span class=\"text-primary\">1176468251</span></p><p style=\"display:flex\"><img width=\"120px\" src=\"/assets/icons/large-left-arrow.svg\"><video muted=\"\" autoplay=\"\" loop=\"\" width=\"120px\" src=\"/assets/video/drag-drop.mp4\"></video></p>",
             "actions": [