Optimize plugin types.

wip

wip

wip

Code format

beike/Models/Plugin.php

@@ -19,6 +19,8 @@ class Plugin extends Base
         'total',     // 订单金额
         'social',    // 社交网络
         'feature',   // 功能模块
+        'language',  // 语言翻译
+        'theme',     // 主题模板
     ];
 
     protected $fillable = ['type', 'code'];

plugins/Bestseller/Admin/View/DesignBuilders/Bestseller.php

@@ -33,11 +33,10 @@ class Bestseller extends Component
     public function render(): View
     {
         $data['register'] = [
-            'code' => 'bestseller',
-            'sort' => 0,
-            // 'name' => trans('admin/design_builder.module_brand'),
-            'name'      => 'Bestseller',
-            'icon'      => '',
+            'code'      => 'bestseller',
+            'sort'      => 0,
+            'name'      => trans('Bestseller::common.module_name'),
+            'icon'      => plugin_asset('Bestseller', 'image/icon.png'),
             'view_path' => 'Bestseller::shop/design_module_bestseller',
         ];
 

plugins/Bestseller/Bootstrap.php

@@ -33,7 +33,7 @@ class Bootstrap
             $module = $data['module_code'] ?? '';
 
             if ($module == 'bestseller') {
-                $data['title'] = $data['title'][locale()] ?? '';
+                $data['title']    = $data['title'][locale()] ?? '';
                 $data['products'] = ProductRepo::getBestSellerProducts($data['limit']);
             }
 

plugins/Bestseller/Lang/en/common.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * dd.php
+ *
+ * @copyright  2022 beikeshop.com - All Rights Reserved
+ * @link       https://beikeshop.com
+ * @author     Edward Yang <yangjin@guangda.work>
+ * @created    2022-07-28 16:19:06
+ * @modified   2022-07-28 16:19:06
+ */
+
+return [
+    'module_name'            => 'Bestseller',
+    'limit'                  => 'Limit',
+];

plugins/Bestseller/Lang/zh_cn/common.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * dd.php
+ *
+ * @copyright  2022 beikeshop.com - All Rights Reserved
+ * @link       https://beikeshop.com
+ * @author     Edward Yang <yangjin@guangda.work>
+ * @created    2022-07-28 16:19:06
+ * @modified   2022-07-28 16:19:06
+ */
+
+return [
+    'module_name'            => '热卖模块',
+    'limit'                  => '数量限制',
+];

plugins/Bestseller/Repositories/ProductRepo.php

@@ -25,11 +25,12 @@ class ProductRepo
     {
         $products = \Beike\Repositories\ProductRepo::getBuilder([
             'active' => 1,
-            'sort' => 'products.sales',
-            'order' => 'desc',
+            'sort'   => 'products.sales',
+            'order'  => 'desc',
         ])
             ->whereHas('masterSku')
             ->limit($limit)->get();
+
         return ProductSimple::collection($products)->jsonSerialize();
     }
 }

plugins/Bestseller/Views/admin/design_module_bestseller.blade.php

@@ -6,7 +6,7 @@
       <text-i18n v-model="module.title"></text-i18n>
     </div>
     <div class="module-edit-group">
-      <div class="module-edit-title">数量限制</div>
+      <div class="module-edit-title">{{ __('Bestseller::common.limit') }}</div>
       <el-input type="number" v-model="module.limit" size="small"></el-input>
     </div>
   </div>
@@ -33,19 +33,22 @@ Vue.component('module-editor-bestseller', {
     }
   },
 });
-
-const register = @json($register);
-
-// 定义模块的配置项
-register.make = {
-  style: {
-    background_color: ''
-  },
-  title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
-  limit: 8,
-}
-
-setTimeout(() => {
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+{{-- 定义模块的配置项 --}}
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
+      limit: 8,
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush
+

plugins/Bestseller/Views/shop/design_module_bestseller.blade.php

@@ -4,7 +4,7 @@
     <div class="container position-relative">
       <div class="module-title">{{ $content['title'] }}</div>
       @if ($content['products'])
-        <div class="swiper module-product-{{ $module_id }} module-slideshow">
+        <div class="swiper module-bs-product-{{ $module_id }} module-slideshow">
           <div class="swiper-wrapper">
             @foreach ($content['products'] as $product)
             <div class="swiper-slide">
@@ -13,9 +13,9 @@
             @endforeach
           </div>
         </div>
-        <div class="swiper-pagination rectangle module-product-{{ $module_id }}-pagination"></div>
-        <div class="swiper-button-prev product-prev"></div>
-        <div class="swiper-button-next product-next"></div>
+        <div class="swiper-pagination rectangle module-bs-product-{{ $module_id }}-pagination"></div>
+        <div class="swiper-button-prev product-bs-prev"></div>
+        <div class="swiper-button-next product-bs-next"></div>
       @elseif (!$content['products'] and $design)
       <div class="row">
         @for ($s = 0; $s < 4; $s++)
@@ -36,30 +36,31 @@
   </div>
 
   <script>
-    new Swiper ('.module-product-{{ $module_id }}', {
-      loop: 1,
+    new Swiper ('.module-bs-product-{{ $module_id }}', {
       watchSlidesProgress: true,
-      breakpoints:{
+      breakpoints: {
         320: {
           slidesPerView: 2,
+          slidesPerGroup: 2,
           spaceBetween: 10,
         },
         768: {
           slidesPerView: 4,
+          slidesPerGroup: 4,
           spaceBetween: 30,
         },
       },
       spaceBetween: 30,
       // 如果需要分页器
       pagination: {
-        el: '.module-product-{{ $module_id }}-pagination',
+        el: '.module-bs-product-{{ $module_id }}-pagination',
         clickable: true,
       },
 
       // 如果需要前进后退按钮
       navigation: {
-        nextEl: '.product-next',
-        prevEl: '.product-prev',
+        nextEl: '.product-bs-next',
+        prevEl: '.product-bs-prev',
       },
     })
   </script>

plugins/Bestseller/config.json

@@ -1,7 +1,13 @@
 {
     "code": "bestseller",
-    "name": "热卖商品模块",
-    "description": "首页装修热卖商品模块",
+    "name": {
+        "zh_cn": "热卖商品模块",
+        "en": "Hot Items Module"
+    },
+    "description": {
+        "zh_cn": "首页装修热卖商品模块",
+        "en": "Home Decoration Hot Products Module"
+    },
     "type": "feature",
     "version": "v1.0.0",
     "icon": "/image/logo.png",

resources/beike/admin/css/design/app.scss

@@ -168,9 +168,15 @@ body.page-design {
           display: flex;
           justify-content: center;
           align-items: center;
-          img {
-            max-width: 100%;
-            max-height: auto;
+
+          .img-icon {
+            width: 36px;
+            height: 36px;
+
+            img {
+              max-width: 100%;
+              max-height: auto;
+            }
           }
 
           i {

resources/beike/admin/views/pages/design/builder/index.blade.php

@@ -62,7 +62,10 @@
           <el-col :span="12" v-for="(item, index) in source.modules" :key="index">
             <div @click="addModuleButtonClicked(item.code)" class="module-list">
               <div class="module-info">
-                <div class="icon"><i :style="item.style" class="iconfont" v-html="item.icon"></i></div>
+                <div class="icon">
+                  <i :style="item.style" class="iconfont" v-if="isIcon(item.icon)" v-html="item.icon"></i>
+                  <div class="img-icon" v-else><img :src="item.icon" class="img-fluid"></div>
+                </div>
                 <div class="name">@{{ item.name }}</div>
               </div>
             </div>
@@ -154,6 +157,8 @@
   @include('admin::pages.design.builder.component.rich_text_i18n')
 
   <script>
+    let register = null;
+
     let app = new Vue({
       el: '#app',
       data: {
@@ -244,10 +249,14 @@
         },
 
         viewHome() {
-          // window.open('/');
           location = '/';
         },
 
+        isIcon(code) {
+          // 判断 code 是否以 &# 开头
+          return code.indexOf('&#') == 0;
+        },
+
         showAllModuleButtonClicked() {
           this.design.editType = 'add';
           this.design.editingModuleIndex = 0;
@@ -260,5 +269,6 @@
       },
     })
   </script>
+  @stack('add-script')
 </body>
 </html>

resources/beike/admin/views/pages/design/module/brand.blade.php

@@ -105,21 +105,22 @@ Vue.component('module-editor-brand', {
     },
   }
 });
-
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    floor: languagesFill(''),
-    full: true,
-    title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
-    brands: []
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      floor: languagesFill(''),
+      full: true,
+      title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
+      brands: []
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/icons.blade.php

@@ -86,19 +86,21 @@ Vue.component('module-editor-icons', {
   }
 });
 
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
-    floor: languagesFill(''),
-    images: []
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
+      floor: languagesFill(''),
+      images: []
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/image100.blade.php

@@ -48,29 +48,31 @@ Vue.component('module-editor-image100', {
 
   }
 });
-
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    floor: languagesFill(''),
-    full: true,
-    images: [
-      {
-        image: languagesFill('catalog/demo/banner/banner-2-en.png'),
-        show: true,
-        link: {
-          type: 'product',
-          value:''
-        }
-      }
-    ]
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      floor: languagesFill(''),
+      full: true,
+      images: [
+        {
+          image: languagesFill('catalog/demo/banner/banner-2-en.png'),
+          show: true,
+          link: {
+            type: 'product',
+            value:''
+          }
+        }
+      ]
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/image401.blade.php

@@ -60,52 +60,54 @@ Vue.component('module-editor-image401', {
     },
   }
 });
-
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    floor: languagesFill(''),
-    images: [
-      {
-        image: languagesFill('catalog/demo/image_plus_1-en.png'),
-        show: true,
-        link: {
-          type: 'product',
-          value:''
-        }
-      },
-      {
-        image: languagesFill('catalog/demo/image_plus_2-en.png'),
-        show: false,
-        link: {
-          type: 'product',
-          value:''
-        }
-      },
-      {
-        image: languagesFill('catalog/demo/image_plus_3-en.png'),
-        show: false,
-        link: {
-          type: 'product',
-          value:''
-        }
-      },
-      {
-        image: languagesFill('catalog/demo/image_plus_4-en.png'),
-        show: false,
-        link: {
-          type: 'product',
-          value:''
-        }
-      }
-    ]
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      floor: languagesFill(''),
+      images: [
+        {
+          image: languagesFill('catalog/demo/image_plus_1-en.png'),
+          show: true,
+          link: {
+            type: 'product',
+            value:''
+          }
+        },
+        {
+          image: languagesFill('catalog/demo/image_plus_2-en.png'),
+          show: false,
+          link: {
+            type: 'product',
+            value:''
+          }
+        },
+        {
+          image: languagesFill('catalog/demo/image_plus_3-en.png'),
+          show: false,
+          link: {
+            type: 'product',
+            value:''
+          }
+        },
+        {
+          image: languagesFill('catalog/demo/image_plus_4-en.png'),
+          show: false,
+          link: {
+            type: 'product',
+            value:''
+          }
+        }
+      ]
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/product.blade.php

@@ -119,20 +119,21 @@ Vue.component('module-editor-product', {
     },
   }
 });
-
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    floor: languagesFill(''),
-    products: [],
-    title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      floor: languagesFill(''),
+      products: [],
+      title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
+    };
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/rich_text.blade.php

@@ -37,19 +37,21 @@ Vue.component('module-editor-rich-text', {
 
   }
 });
-
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    floor: languagesFill(''),
-    text: {}
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      floor: languagesFill(''),
+      text: {}
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/slideshow.blade.php

@@ -93,36 +93,39 @@ Vue.component('module-editor-slideshow', {
   }
 });
 
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    full: true,
-    floor: languagesFill(''),
-    images: [
-      {
-        image: languagesFill('catalog/demo/banner/banner-4-en.jpg'),
-        show: true,
-        link: {
-          type: 'product',
-          value:''
-        }
-      },
-      {
-        image: languagesFill('catalog/demo/banner/banner-3-en.jpg'),
-        show: false,
-        link: {
-          type: 'product',
-          value:''
-        }
-      }
-    ]
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      full: true,
+      floor: languagesFill(''),
+      images: [
+        {
+          image: languagesFill('catalog/demo/banner/banner-4-en.jpg'),
+          show: true,
+          link: {
+            type: 'product',
+            value:''
+          }
+        },
+        {
+          image: languagesFill('catalog/demo/banner/banner-3-en.jpg'),
+          show: false,
+          link: {
+            type: 'product',
+            value:''
+          }
+        }
+      ]
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/beike/admin/views/pages/design/module/tab_product.blade.php

@@ -157,20 +157,22 @@ Vue.component('module-editor-tab-product', {
     }
   }
 });
-
-setTimeout(() => {
-  const make = {
-    style: {
-      background_color: ''
-    },
-    floor: languagesFill(''),
-    tabs: [{title: languagesFill('Tab 1'), products: []}],
-    title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
-  }
-
-  let register = @json($register);
-
-  register.make = make;
-  app.source.modules.push(register)
-}, 100)
 </script>
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
+      style: {
+        background_color: ''
+      },
+      floor: languagesFill(''),
+      tabs: [{title: languagesFill('Tab 1'), products: []}],
+      title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
+    }
+
+    app.source.modules.push(register)
+  </script>
+@endpush

resources/lang/de/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'total'                 => 'Auftragsberechnung',
     'social'                => 'Social',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/en/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'social'                => 'Social',
     'total'                 => 'Total',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/es/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'total'                 => 'Cálculo de pedidos',
     'social'                => 'Social',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/fr/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'total'                 => 'Calcul de la commande',
     'social'                => 'Social',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/it/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'total'                 => 'Calcolo dell\'ordine',
     'social'                => 'Social',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/ja/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'total'                 => '注文計算',
     'social'                => 'Social',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/ru/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'total'                 => 'Расчет заказа',
     'social'                => 'Social',
     'feature'               => 'Feature',
+    'language'              => 'Language',
+    'theme'                 => 'Theme',
 ];

resources/lang/zh_cn/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'social'                => '社交网络',
     'total'                 => '订单计算',
     'feature'               => '功能模块',
+    'language'              => '语言翻译',
+    'theme'                 => '主题模板',
 ];

resources/lang/zh_hk/admin/plugin.php

@@ -29,4 +29,6 @@ return [
     'social'                => '社交網絡',
     'total'                 => '訂單計算',
     'feature'               => '功能模塊',
+    'language'              => '语言翻译',
+    'theme'                 => '主题模板',
 ];

themes/default/design/product.blade.php

@@ -38,15 +38,16 @@
 
   <script>
     new Swiper ('.module-product-{{ $module_id }}', {
-      loop: 1,
       watchSlidesProgress: true,
       breakpoints:{
         320: {
           slidesPerView: 2,
+          slidesPerGroup: 2,
           spaceBetween: 10,
         },
         768: {
           slidesPerView: 4,
+          slidesPerGroup: 4,
           spaceBetween: 30,
         },
       },