From d4deed140d44fd94f1a8c8f9e97ca42549a2de94 Mon Sep 17 00:00:00 2001
From: sunlizhou <296190577@qq.com>
Date: Wed, 13 Dec 2023 17:55:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=AD=94=E6=96=B9=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8F=8A=E5=85=B6=E4=BB=96=E7=BB=84=E4=BB=B6=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/engineer/components/ConfigCurrentView.vue |   1 +
 src/engineer/utils/unit.ts                    |   7 -
 src/modules/category-bar.ts                   | 106 ++++++
 src/modules/index.ts                          | 347 +-----------------
 src/modules/prduct-group.ts                   |  33 +-
 src/modules/search-cube.ts                    |  87 +++++
 src/modules/swiper.ts                         | 194 ++++++++++
 7 files changed, 416 insertions(+), 359 deletions(-)
 create mode 100644 src/modules/category-bar.ts
 create mode 100644 src/modules/search-cube.ts
 create mode 100644 src/modules/swiper.ts

diff --git a/src/engineer/components/ConfigCurrentView.vue b/src/engineer/components/ConfigCurrentView.vue
index 5b5fcfd..4070677 100644
--- a/src/engineer/components/ConfigCurrentView.vue
+++ b/src/engineer/components/ConfigCurrentView.vue
@@ -42,6 +42,7 @@ const label = computed(()=>{
     <template v-if="styles" v-for="([key, value]) in styles" :key="`${ctx.activeViewId}@${key}`">
       <ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
       <NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置"   />
+      <NumberStyle v-if="key === 'fontSize'" :field="value.slice(2)" label="字号设置"   />
 <!--      <div v-else>{{ key }}:{{ value }}</div>-->
     </template>
   </fieldset>
diff --git a/src/engineer/utils/unit.ts b/src/engineer/utils/unit.ts
index e12010b..ce0a38b 100644
--- a/src/engineer/utils/unit.ts
+++ b/src/engineer/utils/unit.ts
@@ -3,13 +3,6 @@ export function unit(n: number | undefined | string) {
     return undefined
   }
   if (typeof n !== 'number') {
-    if(n.split('@@')[1]){
-      if(Number.isInteger(n.split('@@')[1])){
-        return `${n.split('@@')[1]}px`
-      }
-      return n.split('@@')[1]
-    }
-
     return n
   }
   return `${n}px`
diff --git a/src/modules/category-bar.ts b/src/modules/category-bar.ts
new file mode 100644
index 0000000..c81c533
--- /dev/null
+++ b/src/modules/category-bar.ts
@@ -0,0 +1,106 @@
+import { Module } from '../engineer'
+import { createUniqueId } from '../engineer/utils'
+
+const module:Module = {
+  title: '导航条',
+  vid: createUniqueId(),
+  mid: createUniqueId(),
+  maxReferenceCount: -1,
+  referenceCount: 0,
+  image: undefined,
+  configs: [
+    {
+      help: '帮助',
+      addable: true,
+      type: 'list',
+      field: 'items',
+      label: '导航条',
+      configs: [
+        {
+          type: 'image',
+          label: '分类图片',
+          field: 'itemImage',
+          // 表示内联数据
+          inlines: [{
+            type: 'text',
+            field: 'link',
+            label: '链接',
+            help: '请输入链接', // 自动生成："请输入${label}"
+          },
+            {
+              type: 'text',
+              label: '自定义标题',
+              field: 'title',
+            },
+          ]
+        },
+      ]
+    },
+  ],
+  init: {
+    theme: {
+      color: '#fff',
+    },
+    items: [
+      {
+        title: '标题',
+        link: 'link'
+      }
+    ]
+  },
+  theme: {
+    padding: 12,
+    color: '@@theme.color',
+  },
+  children: {
+    theme: {
+      width: '100%',
+      clip: 'autoX',
+      whiteSpace: 'nowrap',
+      flexible: true,
+      crossAlign:'start'
+    },
+    children: {
+      type: 'each',
+      key: 'items',
+      handle: {
+        theme: {
+          width: 60,
+          height: 80,
+          display: 'inline-block',
+
+          margin: {
+            right: 10
+          },
+        },
+        children:[
+          {
+            theme:{
+              width:60,
+              height:60,
+              radius: 30,
+              color: 'pink',
+              clip: 'hidden'
+            },
+            children:'图片'
+          },
+          {
+            theme:{
+              width:60,
+              height:20,
+              textAlign:'center',
+              fontSize: 12,
+              whiteSpace: 'nowrap',
+              clip: 'hidden'
+            },
+            children:{
+              type: 'text',
+              key:'.title'
+            }
+          }
+        ],
+      }
+    },
+  }
+}
+export default module
diff --git a/src/modules/index.ts b/src/modules/index.ts
index 741b1d2..73b9c70 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -1,272 +1,18 @@
 import productGroup from "./prduct-group"
 import imageCube from './image-cube.ts'
+import swiper from './swiper.ts'
 import { createUniqueId } from '../engineer/utils'
 import { Category } from '../engineer'
+import categoryBar from './category-bar.ts'
+import searchCube from './search-cube.ts'
 
 export default {
   icon: 'trash',
   text: '基础',
   modules: [
-    {
-      vid: createUniqueId(),
-      mid: createUniqueId(),
-      title: '轮播图',
-      maxReferenceCount: -1,
-      referenceCount: 0,
-      image: undefined,
-      configs: [
-        {
-          type: 'list',
-          field: 'items',
-          label: '轮播图设置',
-          help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
-          addable: true,
-          configs: [{
-            type: 'image',
-            field: 'image',
-            label: '图片',
-            required: true,
-            // 表示内联数据
-            inlines: [{
-              type: 'text',
-              field: 'title',
-              label: '标题',
-              help: '选填，不超过 4 个字',
-            }, {
-              type: 'text',
-              field: 'link',
-              label: '链接',
-              help: '请输入链接', // 自动生成："请输入${label}"
-            }],
-          }],
-        },
-        {
-          type: 'object',
-          field: 'indicator',
-          label: '指示器',
-          configs: [{
-            type: 'mark',
-            field: 'style',
-            label: '指示器样式',
-            values: [
-              { label: '圆形', value: '#circle' },
-              { label: '直线', value: '#line' },
-              { label: '数字', value: '#number' },
-            ],
-          }, {
-            type: 'mark',
-            field: 'position',
-            label: '指示器位置',
-            values: [
-              { label: '居左', value: 'start' },
-              { label: '居中', value: 'center' },
-              { label: '居右', value: 'end' },
-            ],
-          },
-            {
-              type: 'color',
-              field: 'color',
-              label: '指示器颜色',
-            }],
-        },
-        {
-          type: 'object',
-          field: 'background',
-          label: '背景',
-          configs: [{
-            type: 'boolean',
-            field: 'enabled',
-            label: '是否显示背景色',
-          }, {
-            type: 'background',
-            field: 'value',
-            // 背景的不同实现方式，可以在里面添加 image 选项来支持图片
-            // 这里只能支持颜色和渐变，
-            features: ['color', 'gradient'],
-            label: '背景',
-          }],
-        }
-      ],
-      init: {
-        items: [
-          {
-            image: '',
-            title: '123',
-            link: '123',
-          }
-        ],
-        indicator: {
-          style: '#circle',
-          color: 'green',
-          position: 'start',
-        },
-        background: {
-          enabled: true,
-          value: "#ffffff",
-        },
-        theme: {
-          color: 'white',
-          radius: 24
-        }
-      },
-      templates: {
-        '#circle': {
-          theme: {
-            gap: 20,
-          },
-          children: {
-            type: 'each',
-            key: 'items',
-            handle: {
-              theme: {
-                width: 20,
-                height: 20,
-                radius: 10,
-                color: '@@indicator.color',
-              },
-            }
-          }
-        },
-        '#line': {
-          theme: {
-            gap: 20,
-          },
-          children: {
-            type: 'each',
-            key: 'items',
-            handle: {
-              theme: {
-                width: 40,
-                height: 20,
-                color: '@@indicator.color',
-              },
-            }
-          }
-        },
-        "#number": {
-          theme: {
-            color: 'rgba(0,0,0,0.4)',
-            textColor: '#fff'
-          },
-          children: '1/len(items)'
-        }
-      },
-      theme: {
-        position: 'relative',
-        height: 200,
-        padding: {
-          horizontal: 12.0,
-          vertical: 12,
-        },
-        color: 'cyan',
-      },
-      children: [
-        {
-          vid: createUniqueId(),
-          theme: {
-            width: '100%',
-            height: '100%',
-            color: '@@theme.color',
-            radius: "@@theme.radius",
-            textAlign: 'center',
-          },
-          children: '设置轮播图',
-        },
-        {
-          theme: {
-            position: 'absolute',
-            flexible: true,
-            mainAlign: '@@indicator.position',
-            bottom: 20,
-            left: 20,
-            right: 20,
-            height: 20,
-            color: 'red',
-          },
-          children: {
-            type: 'template',
-            key: 'indicator.style'
-          }
-        }],
-    },
+    swiper,
     productGroup,
-    {
-      title: '产品分类',
-      vid: createUniqueId(),
-      mid: createUniqueId(),
-      maxReferenceCount: -1,
-      referenceCount: 0,
-      image: undefined,
-      configs: [
-        {
-          help: '帮助',
-          addable: true,
-          type: 'list',
-          field: 'items',
-          label: '产品分类列表',
-          configs: [
-            {
-              type: 'image',
-              label: '分类图片',
-              field: 'itemImage',
-              // 表示内联数据
-              inlines: [{
-                type: 'text',
-                field: 'link',
-                label: '链接',
-                help: '请输入链接', // 自动生成："请输入${label}"
-              },
-                {
-                  type: 'text',
-                  label: '自定义标题',
-                  field: 'title',
-                },
-              ]
-            },
-          ]
-        },
-      ],
-      init: {
-        theme: {
-          color: '#fff',
-        },
-        items: [
-          {
-            title: '标题',
-            link: 'link'
-          }
-        ]
-      },
-      theme: {
-        padding: 12,
-        color: '@@theme.color',
-      },
-      children: {
-        theme: {
-          width: '100%',
-          clip: 'autoX',
-          whiteSpace: 'nowrap',
-        },
-        children: {
-          type: 'each',
-          key: 'items',
-          handle: {
-            theme: {
-              width: '60px',
-              height: '60px',
-              display: 'inline-block',
-              radius: 40,
-              color: 'pink',
-              textColor: '#fff',
-              margin: {
-                right: 10
-              },
-            },
-            children: '图片',
-          }
-        },
-      }
-    },
+    categoryBar,
     {
       title: '两列产品卡片',
       vid: createUniqueId(),
@@ -321,13 +67,17 @@ export default {
       ],
       init: {
         Title: '猜你喜欢',
+        theme:{
+          fontSize: 18,
+          color: '#fff'
+        }
       },
       theme: {
         padding: {
           vertical: 15,
           horizontal: 15,
         },
-        color: '#fff',
+        color: '@@theme.color',
         textColor: '#333',
         fontSize: '@@theme.fontSize',
         fontWeight: 900,
@@ -338,82 +88,7 @@ export default {
       }
 
     },
-    {
-      title: '搜索框',
-      vid: createUniqueId(),
-      mid: createUniqueId(),
-      maxReferenceCount: -1,
-      referenceCount: 0,
-      image: undefined,
-      configs: [
-        {
-          type: 'object',
-          field: 'search',
-          label: '搜索框',
-          configs: [
-            {
-              required: true,
-              type: 'text',
-              label: '搜索框内容',
-              field: 'innerText'
-            },
-            {
-              type: 'boolean',
-              field: 'showLogo',
-              label: '是否展示左侧logo',
-            }, {
-              type: 'image',
-              field: 'logoImg',
-              label: '左侧logo',
-            }
-          ]
-        },
-      ],
-      init: {},
-      templates: {
-        'true': {
-          theme: {},
-          children: 'logo'
-        },
-        'false': {
-          theme: {},
-          children: ''
-        }
-      },
-      theme: {
-        display: 'flex',
-        crossAlign: 'center',
-        padding: {
-          horizontal: 15,
-          vertical: 8,
-        },
-        color: 'cyan'
-      },
-      children: [
-        {
-          children: {
-            type: 'template',
-            key: 'search.showLogo'
-          },
-        },
-        {
-          theme: { width: 10 },
-        },
-        {
-          theme: {
-            width: '60%',
-            color: 'white',
-            radius: 30.0,
-            padding: {
-              horizontal: 10,
-              vertical: 5,
-            },
-            fontSize: 14,
-          },
-          children: '猜你喜欢'
-        }
-      ]
-    },
+    searchCube,
     imageCube,
     {
       title: '商品分类',
diff --git a/src/modules/prduct-group.ts b/src/modules/prduct-group.ts
index 6c23b3d..467c0f4 100644
--- a/src/modules/prduct-group.ts
+++ b/src/modules/prduct-group.ts
@@ -62,23 +62,21 @@ const module: Module = {
   ],
   init: {
     titleAndDesc: {
-      mainTitle: '标题123',
-      content: '说明123',
+      mainTitle: '标题',
+      content: '子标题',
       more: '查看更多',
     },
     groups: [
       {
-        title: '111',
+        title: '产品',
       }
     ],
     theme: {
       color: 'pink',
       moreColor: "#5d35b0",
-    },
-    children: {
-      theme: {
-        radius: 12
-      },
+      innerColor: 'white',
+      innerRadius: 12,
+      productBg: 'pink',
     }
   },
   theme: {
@@ -91,9 +89,9 @@ const module: Module = {
     theme: {
       width: '100%',
       height: '100%',
-      color: 'white',
+      color: '@@theme.innerColor',
       clip: 'hidden',
-      radius: '@@children.theme.radius',
+      radius: '@@theme.innerRadius',
       textAlign: 'center',
     },
     children: [
@@ -174,7 +172,7 @@ const module: Module = {
         theme: {
           width: "94%",
           height: "70%",
-          color: 'pink',
+          color: '@@theme.productBg',
           radius: 12.0,
           flexible: true,
           gap: 12,
@@ -196,7 +194,7 @@ const module: Module = {
               width: 100,
               height: '100%',
               radius: 10,
-              color: 'red',
+              color: 'white',
             },
             children: [
               {
@@ -204,8 +202,8 @@ const module: Module = {
                   width: 100,
                   height: 100,
                   border: {
-                    color: "black",
-                    width: 2,
+                    color: "@@theme.color",
+                    width: 1,
                   },
                 },
                 children: {
@@ -215,8 +213,11 @@ const module: Module = {
               },
               {
                 theme: {
-                  textColor: "white",
-                  fontSize: 18
+                  textColor: "#333333",
+                  fontSize: 15,
+                  textAlign: 'center',
+                  clip: 'hidden',
+                  whiteSpace: 'nowrap'
                 },
                 children: {
                   type: "text",
diff --git a/src/modules/search-cube.ts b/src/modules/search-cube.ts
new file mode 100644
index 0000000..0956d92
--- /dev/null
+++ b/src/modules/search-cube.ts
@@ -0,0 +1,87 @@
+import type { Module } from '../engineer'
+import { createUniqueId } from '../engineer/utils'
+
+const module:Module = {
+  title: '搜索框',
+  vid: createUniqueId(),
+  mid: createUniqueId(),
+  maxReferenceCount: -1,
+  referenceCount: 0,
+  image: undefined,
+  configs: [
+    {
+      type: 'object',
+      field: 'search',
+      label: '搜索框',
+      configs: [
+        {
+          required: true,
+          type: 'text',
+          label: '搜索框内容',
+          field: 'innerText'
+        },
+        {
+          type: 'boolean',
+          field: 'showLogo',
+          label: '是否展示左侧logo',
+        }, {
+          type: 'image',
+          field: 'logoImg',
+          label: '左侧logo',
+        }
+      ]
+    },
+  ],
+  init: {
+    search:{
+      innerText:'猜你喜欢'
+    }
+  },
+  templates: {
+    'true': {
+      theme: {},
+      children: 'logo'
+    },
+    'false': {
+      theme: {},
+      children: ''
+    }
+  },
+  theme: {
+    display: 'flex',
+    crossAlign: 'center',
+    padding: {
+      horizontal: 15,
+      vertical: 8,
+    },
+    color: 'cyan'
+  },
+  children: [
+    {
+      children: {
+        type: 'template',
+        key: 'search.showLogo'
+      },
+    },
+    {
+      theme: { width: 10 },
+    },
+    {
+      theme: {
+        width: '60%',
+        color: 'white',
+        radius: 30.0,
+        padding: {
+          horizontal: 10,
+          vertical: 5,
+        },
+        fontSize: 14,
+      },
+      children: {
+        type: 'text',
+        key: 'search.innerText'
+      }
+    }
+  ]
+}
+export default module
diff --git a/src/modules/swiper.ts b/src/modules/swiper.ts
new file mode 100644
index 0000000..c82b029
--- /dev/null
+++ b/src/modules/swiper.ts
@@ -0,0 +1,194 @@
+import type { Module } from '../engineer'
+import { createUniqueId } from '../engineer/utils'
+
+const module:Module = {
+  vid: createUniqueId(),
+  mid: createUniqueId(),
+  title: '轮播图',
+  maxReferenceCount: -1,
+  referenceCount: 0,
+  image: undefined,
+  configs: [
+    {
+      type: 'list',
+      field: 'items',
+      label: '轮播图设置',
+      help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
+      addable: true,
+      configs: [{
+        type: 'image',
+        field: 'image',
+        label: '图片',
+        required: true,
+        // 表示内联数据
+        inlines: [{
+          type: 'text',
+          field: 'title',
+          label: '标题',
+          help: '选填，不超过 4 个字',
+        }, {
+          type: 'text',
+          field: 'link',
+          label: '链接',
+          help: '请输入链接', // 自动生成："请输入${label}"
+        }],
+      }],
+    },
+    {
+      type: 'object',
+      field: 'indicator',
+      label: '指示器',
+      configs: [{
+        type: 'mark',
+        field: 'style',
+        label: '指示器样式',
+        values: [
+          { label: '圆形', value: '#circle' },
+          { label: '直线', value: '#line' },
+          { label: '数字', value: '#number' },
+        ],
+      }, {
+        type: 'mark',
+        field: 'position',
+        label: '指示器位置',
+        values: [
+          { label: '居左', value: 'start' },
+          { label: '居中', value: 'center' },
+          { label: '居右', value: 'end' },
+        ],
+      },
+        {
+          type: 'color',
+          field: 'color',
+          label: '指示器颜色',
+        }],
+    },
+    {
+      type: 'object',
+      field: 'background',
+      label: '背景',
+      configs: [{
+        type: 'boolean',
+        field: 'enabled',
+        label: '是否显示背景色',
+      }, {
+        type: 'background',
+        field: 'value',
+        // 背景的不同实现方式，可以在里面添加 image 选项来支持图片
+        // 这里只能支持颜色和渐变，
+        features: ['color', 'gradient'],
+        label: '背景',
+      }],
+    }
+  ],
+  init: {
+    items: [
+      {
+        image: '',
+        title: '123',
+        link: '123',
+      }
+    ],
+    indicator: {
+      style: '#circle',
+      color: 'green',
+      position: 'start',
+    },
+    background: {
+      enabled: true,
+      value: "#ffffff",
+    },
+    theme: {
+      color: 'white',
+      radius: 24
+    }
+  },
+  templates: {
+    '#circle': {
+      theme: {
+        gap: 1,
+      },
+      children: {
+        type: 'each',
+        key: 'items',
+        handle: {
+          theme: {
+            width: 5,
+            height: 5,
+            radius: 2.5,
+            color: '@@indicator.color',
+          },
+        }
+      }
+    },
+    '#line': {
+      theme: {
+        gap: 1,
+      },
+      children: {
+        type: 'each',
+        key: 'items',
+        handle: {
+          theme: {
+            width: 5,
+            height: 2,
+            color: '@@indicator.color',
+          },
+        }
+      }
+    },
+    "#number": {
+      theme: {
+        color: 'rgba(0,0,0,0.4)',
+        textColor: '#fff',
+        radius:10,
+        padding:{
+          left:10,
+          right:10
+        },
+        flexible:true,
+        mainAlign:'center',
+        crossAlign: 'center'
+      },
+      children: '1/0'
+    }
+  },
+  theme: {
+    position: 'relative',
+    height: 200,
+    padding: {
+      horizontal: 12.0,
+      vertical: 12,
+    },
+    color: 'cyan',
+  },
+  children: [
+    {
+      vid: createUniqueId(),
+      theme: {
+        width: '100%',
+        height: '100%',
+        color: '@@theme.color',
+        radius: "@@theme.radius",
+        textAlign: 'center',
+      },
+      children: '设置轮播图',
+    },
+    {
+      theme: {
+        position: 'absolute',
+        flexible: true,
+        mainAlign: '@@indicator.position',
+        bottom: 20,
+        left: 30,
+        right: 30,
+        height: 20,
+      },
+      children: {
+        type: 'template',
+        key: 'indicator.style'
+      }
+    }],
+}
+
+export default module