渐变组件&产品组配置

1 year ago · 48a4b5b452
parent 32a7696b66
commit 48a4b5b452
9 changed files with 208 additions and 37 deletions
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
  },
  "dependencies": {
    "vue": "^3.3.8",
+    "vue3-colorpicker": "^2.2.3",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/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:
--- a/src/App.vue
+++ b/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',
-        field: 'arr',
-        label: '列表',
+        type: 'object',
+        field: 'titleAndDesc',
+        label: '产品标题及说明',
        configs: [
+          {
+            type:'text',
+            label:'产品标题',
+            field: 'mainTitle'
+          },
          {
            type: 'text',
-            field: 'title',
-            label: '文字'
+            label: '说明',
+            field: 'content',
          },
        ]
      },
      {
-        type: 'text',
-        label: '内容',
-        field: 'content',
-      }
+        help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
+        addable: true,
+        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: {
-      theme: {
-        border: {
-          width: 2,
-          style: 'dashed',
-          color: 'red'
-        },
-        margin: 24,
-        padding: 12,
+    init: {
+      groups: [
+        {
+          productTitle: '111',
+        }
+      ],
+
+    },
+    theme: {
+      height: 200,
+      padding: {
+        horizontal: 12.0,
      },
-      children: {
-        type: 'text',
-        key: 'content'
-      }
+      color: 'pink',
+    },
+    children: {
+
    }
  }
 ],
--- a/src/engineer/configs/BackgroundConfig.vue
+++ b/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>
-            <input v-model="tempString" type="color">
-          </label>
+        <span>颜色</span>
+        <color-picker v-model:pureColor="tempString" />
+      </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>
--- a/src/engineer/configs/BaseConfig.vue
+++ b/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
-  help?:string
+  label: string
+  help?: string
 }>()

-const tempStr = useSource<string>(props.field)
 </script>
 <template>
  <div>

+    <span>{{ label }}</span>
  </div>
 </template>
--- a/src/engineer/configs/ColorConfig.vue
+++ b/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>
--- a/src/engineer/configs/ListConfig.vue
+++ b/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>
--- a/src/engineer/utils/clone.ts
+++ b/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":
--- a/src/style.less
+++ b/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;
+}