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

@@ -35,9 +35,8 @@ class Bestseller extends Component
         $data['register'] = [
             'code'      => 'bestseller',
             'sort'      => 0,
-            // 'name' => trans('admin/design_builder.module_brand'),
+            'name'      => trans('Bestseller::common.module_name'),
-            'name'      => 'Bestseller',
+            'icon'      => plugin_asset('Bestseller', 'image/icon.png'),
-            'icon'      => '',
             'view_path' => 'Bestseller::shop/design_module_bestseller',
         ];
 

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

@@ -30,6 +30,7 @@ class ProductRepo
         ])
             ->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', {
     }
   },
 });
+</script>
 
-const register = @json($register);
+{{-- 定义模块的配置项 --}}
+@push('add-script')
+  <script>
+    register = @json($register);
 
-// 定义模块的配置项
+    register.make = {
-register.make = {
       style: {
         background_color: ''
       },
       title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
       limit: 8,
-}
+    }
 
-setTimeout(() => {
     app.source.modules.push(register)
-}, 100)
+  </script>
-</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-pagination rectangle module-bs-product-{{ $module_id }}-pagination"></div>
-        <div class="swiper-button-prev product-prev"></div>
+        <div class="swiper-button-prev product-bs-prev"></div>
-        <div class="swiper-button-next product-next"></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 }}', {
+    new Swiper ('.module-bs-product-{{ $module_id }}', {
-      loop: 1,
       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',
+        nextEl: '.product-bs-next',
-        prevEl: '.product-prev',
+        prevEl: '.product-bs-prev',
       },
     })
   </script>

plugins/Bestseller/config.json

@@ -1,7 +1,13 @@
 {
     "code": "bestseller",
-    "name": "热卖商品模块",
+    "name": {
-    "description": "首页装修热卖商品模块",
+        "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,10 +168,16 @@ body.page-design {
           display: flex;
           justify-content: center;
           align-items: center;
+
+          .img-icon {
+            width: 36px;
+            height: 36px;
+
             img {
               max-width: 100%;
               max-height: auto;
             }
+          }
 
           i {
             font-size: 26px;

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,9 +105,13 @@ Vue.component('module-editor-brand', {
     },
   }
 });
+</script>
 
-setTimeout(() => {
+@push('add-script')
-  const make = {
+  <script>
+    register = @json($register);
+
+    register.make = {
       style: {
         background_color: ''
       },
@@ -117,9 +121,6 @@ setTimeout(() => {
       brands: []
     }
 
-  let register = @json($register);
-
-  register.make = make;
     app.source.modules.push(register)
-}, 100)
+  </script>
-</script>
+@endpush

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

@@ -86,8 +86,13 @@ Vue.component('module-editor-icons', {
   }
 });
 
-setTimeout(() => {
+</script>
-  const make = {
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    register.make = {
       style: {
         background_color: ''
       },
@@ -96,9 +101,6 @@ setTimeout(() => {
       images: []
     }
 
-  let register = @json($register);
-
-  register.make = make;
     app.source.modules.push(register)
-}, 100)
+  </script>
-</script>
+@endpush

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

@@ -48,9 +48,14 @@ Vue.component('module-editor-image100', {
 
   }
 });
+</script>
 
-setTimeout(() => {
+@push('add-script')
-  const make = {
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
       style: {
         background_color: ''
       },
@@ -68,9 +73,6 @@ setTimeout(() => {
       ]
     }
 
-  let register = @json($register);
-
-  register.make = make;
     app.source.modules.push(register)
-}, 100)
+  </script>
-</script>
+@endpush

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

@@ -60,9 +60,14 @@ Vue.component('module-editor-image401', {
     },
   }
 });
+</script>
 
-setTimeout(() => {
+@push('add-script')
-  const make = {
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
       style: {
         background_color: ''
       },
@@ -103,9 +108,6 @@ setTimeout(() => {
       ]
     }
 
-  let register = @json($register);
-
-  register.make = make;
     app.source.modules.push(register)
-}, 100)
+  </script>
-</script>
+@endpush

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

@@ -119,20 +119,21 @@ Vue.component('module-editor-product', {
     },
   }
 });
+</script>
 
-setTimeout(() => {
+@push('add-script')
-  const make = {
+  <script>
+    register = @json($register);
+
+    register.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>
-</script>
+@endpush

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

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

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

@@ -93,8 +93,14 @@ Vue.component('module-editor-slideshow', {
   }
 });
 
-setTimeout(() => {
+</script>
-  const make = {
+
+@push('add-script')
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
       style: {
         background_color: ''
       },
@@ -120,9 +126,6 @@ setTimeout(() => {
       ]
     }
 
-  let register = @json($register);
-
-  register.make = make;
     app.source.modules.push(register)
-}, 100)
+  </script>
-</script>
+@endpush

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

@@ -157,9 +157,14 @@ Vue.component('module-editor-tab-product', {
     }
   }
 });
+</script>
 
-setTimeout(() => {
+@push('add-script')
-  const make = {
+  <script>
+    register = @json($register);
+
+    // 定义模块的配置项
+    register.make = {
       style: {
         background_color: ''
       },
@@ -168,9 +173,6 @@ setTimeout(() => {
       title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
     }
 
-  let register = @json($register);
-
-  register.make = make;
     app.source.modules.push(register)
-}, 100)
+  </script>
-</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,
         },
       },