渐变组件&产品组配置

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.3.8",
+    "vue3-colorpicker": "^2.2.3",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   vue:
     specifier: ^3.3.8
     version: 3.3.9(typescript@5.3.2)
+  vue3-colorpicker:
+    specifier: ^2.2.3
+    version: 2.2.3(@aesoper/normal-utils@0.1.5)(@popperjs/core@2.11.8)(@vueuse/core@10.6.1)(gradient-parser@1.0.2)(lodash-es@4.17.21)(tinycolor2@1.6.0)(vue-types@4.2.1)(vue@3.3.9)
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.3.9)
@@ -34,6 +37,10 @@ devDependencies:
 
 packages:
 
+  /@aesoper/normal-utils@0.1.5:
+    resolution: {integrity: sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==}
+    dev: false
+
   /@babel/helper-string-parser@7.23.4:
     resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
     engines: {node: '>=6.9.0'}
@@ -258,6 +265,10 @@ packages:
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
   /@rollup/rollup-android-arm-eabi@4.6.0:
     resolution: {integrity: sha512-keHkkWAe7OtdALGoutLY3utvthkGF+Y17ws9LYT8pxMBYXaCoH/8dXS2uzo6e8+sEhY7y/zi5RFo22Dy2lFpDw==}
     cpu: [arm]
@@ -360,6 +371,10 @@ packages:
       undici-types: 5.26.5
     dev: true
 
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: false
+
   /@vitejs/plugin-vue@4.5.0(vite@5.0.3)(vue@3.3.9):
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -482,6 +497,31 @@ packages:
   /@vue/shared@3.3.9:
     resolution: {integrity: sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==}
 
+  /@vueuse/core@10.6.1(vue@3.3.9):
+    resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.6.1
+      '@vueuse/shared': 10.6.1(vue@3.3.9)
+      vue-demi: 0.14.6(vue@3.3.9)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata@10.6.1:
+    resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
+    dev: false
+
+  /@vueuse/shared@10.6.1(vue@3.3.9):
+    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.3.9)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -578,6 +618,11 @@ packages:
     dev: true
     optional: true
 
+  /gradient-parser@1.0.2:
+    resolution: {integrity: sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -600,6 +645,11 @@ packages:
     dev: true
     optional: true
 
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /is-what@3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
     dev: true
@@ -624,6 +674,10 @@ packages:
       - supports-color
     dev: true
 
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -786,6 +840,10 @@ packages:
     dev: true
     optional: true
 
+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: false
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -840,6 +898,21 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /vue-demi@0.14.6(vue@3.3.9):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.9(typescript@5.3.2)
+    dev: false
+
   /vue-template-compiler@2.7.15:
     resolution: {integrity: sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==}
     dependencies:
@@ -859,6 +932,38 @@ packages:
       typescript: 5.3.2
     dev: true
 
+  /vue-types@4.2.1(vue@3.3.9):
+    resolution: {integrity: sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==}
+    engines: {node: '>=12.16.0'}
+    peerDependencies:
+      vue: ^2.0.0 || ^3.0.0
+    dependencies:
+      is-plain-object: 5.0.0
+      vue: 3.3.9(typescript@5.3.2)
+    dev: false
+
+  /vue3-colorpicker@2.2.3(@aesoper/normal-utils@0.1.5)(@popperjs/core@2.11.8)(@vueuse/core@10.6.1)(gradient-parser@1.0.2)(lodash-es@4.17.21)(tinycolor2@1.6.0)(vue-types@4.2.1)(vue@3.3.9):
+    resolution: {integrity: sha512-hGGH3gfXU8nv7FzSy+xCslOGPCH7YgLxsuY+pQ/GN8SwVZYAd5BXDNt1/8DF+A3wihZ8Whow9XIWwrDhAlJW1Q==}
+    peerDependencies:
+      '@aesoper/normal-utils': ^0.1.5
+      '@popperjs/core': ^2.11.8
+      '@vueuse/core': ^10.1.2
+      gradient-parser: ^1.0.2
+      lodash-es: ^4.17.21
+      tinycolor2: ^1.4.2
+      vue: ^3.2.6
+      vue-types: ^4.1.0
+    dependencies:
+      '@aesoper/normal-utils': 0.1.5
+      '@popperjs/core': 2.11.8
+      '@vueuse/core': 10.6.1(vue@3.3.9)
+      gradient-parser: 1.0.2
+      lodash-es: 4.17.21
+      tinycolor2: 1.6.0
+      vue: 3.3.9(typescript@5.3.2)
+      vue-types: 4.2.1(vue@3.3.9)
+    dev: false
+
   /vue@3.3.9(typescript@5.3.2):
     resolution: {integrity: sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==}
     peerDependencies:

src/App.vue

@@ -243,43 +243,77 @@ categories.value.unshift({
   {
     vid: hash(`${++nextId}`),
     mid: hash(`${++nextId}`),
-    title: '测试',
+    title: '产品组',
     maxReferenceCount: -1,
     referenceCount: 0,
     image: undefined,
     configs: [
       {
-        type: 'list',
+        type: 'object',
-        field: 'arr',
+        field: 'titleAndDesc',
-        label: '列表',
+        label: '产品标题及说明',
         configs: [
+          {
+            type:'text',
+            label:'产品标题',
+            field: 'mainTitle'
+          },
           {
             type: 'text',
-            field: 'title',
+            label: '说明',
-            label: '文字'
+            field: 'content',
           },
         ]
       },
       {
-        type: 'text',
+        help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
-        label: '内容',
+        addable: true,
-        field: 'content',
+        type: 'list',
-      }
+        field: 'groups',
+        label: '产品组列表',
+        configs: [
+          {
+            type:'image',
+            label:'产品图片',
+            field: 'productPhoto',
+            // 表示内联数据
+            inlines: [ {
+              type: 'text',
+              field: 'link',
+              label: '链接',
+              help: '请输入链接', // 自动生成："请输入${label}"
+            }]
+          },
+          {
+            type:'text',
+            label:'自定义标题',
+            field: 'productTitle',
+          },
+          {
+            type:'text',
+            label:'自定义说明',
+            field: 'productDesc',
+          },
+        ]
+      },
     ],
-    children: {
+    init: {
-      theme: {
+      groups: [
-        border: {
+        {
-          width: 2,
+          productTitle: '111',
-          style: 'dashed',
+        }
-          color: 'red'
+      ],
-        },
+
-        margin: 24,
+    },
-        padding: 12,
+    theme: {
+      height: 200,
+      padding: {
+        horizontal: 12.0,
       },
-      children: {
+      color: 'pink',
-        type: 'text',
+    },
-        key: 'content'
+    children: {
-      }
+
     }
   }
 ],

src/engineer/configs/BackgroundConfig.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { useSource } from "../context"
+import { useSource } from "../context";
+import { ColorPicker } from "vue3-colorpicker";
+import "vue3-colorpicker/style.css";
 defineOptions({
   name: "DddBackgroundConfig"
 })
@@ -14,7 +16,7 @@ const props = defineProps<{
 const tempString = useSource<string>(props.field)
 
 const chooseType = ref<string>()
-if(typeof tempString.value === 'string'){
+if (typeof tempString.value === 'string') {
   chooseType.value = 'color'
 }
 
@@ -50,9 +52,17 @@ function formart(str: string) {
     </div>
     <template v-if="chooseType === 'color'">
       <label style="display: flex;justify-content: space-between;">
-            <span>颜色</span>
+        <span>颜色</span>
-            <input v-model="tempString" type="color">
+        <color-picker v-model:pureColor="tempString" />
-          </label>
+      </label>
+    </template>
+    <template v-else>
+      <label style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
+        <span>颜色</span>
+        <color-picker useType="gradient" v-model:gradientColor="tempString" />
+      </label>
+
+
     </template>
   </div>
 </template>

src/engineer/configs/BaseConfig.vue

@@ -1,19 +1,21 @@
+
+import { Script } from 'vm';
+Script
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useSource } from "../context"
 defineOptions({
   name: 'DddBaseConfig'
 })
-const props = defineProps<{
+
+defineProps<{
   field: string
-  label?: string
+  label: string
-  help?:string
+  help?: string
 }>()
 
-const tempStr = useSource<string>(props.field)
 </script>
 <template>
   <div>
 
+    <span>{{ label }}</span>
   </div>
 </template>

src/engineer/configs/ColorConfig.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ColorPicker } from "vue3-colorpicker";
+import "vue3-colorpicker/style.css";
 import { useSource} from "../context"
 
 defineOptions({
@@ -16,6 +18,6 @@ const tempStr = useSource<string>(props.field)
 <template>
   <label style="display: flex;justify-content: space-between;align-items: center;">
     <span>{{ label }}</span>
-    <input v-model="tempStr" type="color">
+    <color-picker v-model:pureColor="tempStr" />
   </label>
 </template>

src/engineer/configs/ListConfig.vue

@@ -32,6 +32,12 @@ const add = () => {
     list.value.push(item)
   }
 }
+
+const minus = () => {
+  if(list.value?.length && list.value.length >=2){
+    list.value.pop()
+  }
+}
 </script>
 
 <template>
@@ -48,6 +54,7 @@ const add = () => {
 
     <div>
       <button @click="add">+增加</button>
+      <button v-if="list!.length >= 2 " @click="minus">-减少</button>
     </div>
   </fieldset>
 </template>

src/engineer/utils/clone.ts

@@ -1,5 +1,3 @@
-import { error } from "console"
-
 export function clone<T>(v: T): T {
   switch (typeof v) {
     case "string":

src/style.less

@@ -38,3 +38,15 @@ body {
   height: 100vh;
   /*background: #eee;*/
 }
+
+.vc-color-wrap {
+  margin-right: 0 !important;
+  width: 50px;
+  height: 24px;
+  box-shadow: 3px 0 5px #00000014;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+}