From 48a4b5b452028c710215780978c6b567586b7512 Mon Sep 17 00:00:00 2001 From: sunlizhou <296190577@qq.com> Date: Mon, 4 Dec 2023 17:39:10 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B8=90=E5=8F=98=E7=BB=84=E4=BB=B6&=E4=BA=A7?= =?UTF-8?q?=E5=93=81=E7=BB=84=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 105 ++++++++++++++++++++++ src/App.vue | 80 ++++++++++++----- src/engineer/configs/BackgroundConfig.vue | 20 +++-- src/engineer/configs/BaseConfig.vue | 14 +-- src/engineer/configs/ColorConfig.vue | 4 +- src/engineer/configs/ListConfig.vue | 7 ++ src/engineer/utils/clone.ts | 2 - src/style.less | 12 +++ 9 files changed, 208 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 8d5a8fd..b7dbdb2 100644 --- 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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7b0cd6a..37a1f22 100644 --- 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: diff --git a/src/App.vue b/src/App.vue index e70d3df..f59fd2a 100644 --- 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: { + } } ], diff --git a/src/engineer/configs/BackgroundConfig.vue b/src/engineer/configs/BackgroundConfig.vue index e9d13bd..6d6eb4d 100644 --- a/src/engineer/configs/BackgroundConfig.vue +++ b/src/engineer/configs/BackgroundConfig.vue @@ -1,6 +1,8 @@ diff --git a/src/engineer/configs/ColorConfig.vue b/src/engineer/configs/ColorConfig.vue index 1c6e8d4..21ba496 100644 --- a/src/engineer/configs/ColorConfig.vue +++ b/src/engineer/configs/ColorConfig.vue @@ -1,4 +1,6 @@ diff --git a/src/engineer/utils/clone.ts b/src/engineer/utils/clone.ts index d18e581..bd5990e 100644 --- a/src/engineer/utils/clone.ts +++ b/src/engineer/utils/clone.ts @@ -1,5 +1,3 @@ -import { error } from "console" - export function clone(v: T): T { switch (typeof v) { case "string": diff --git a/src/style.less b/src/style.less index c0b5d39..e90d91f 100644 --- 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; +}