From ed9fb9c1d89ceac2e4cd4f452c381b0543d89ac5 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 9 Jul 2025 18:56:15 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20=E8=A3=85=E9=A5=B0=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=85=8D=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/custom-component/component-list.ts | 4 +- .../custom-component/de-decoration/Attr.vue | 104 +++++++++++++++++- .../de-decoration/Component.vue | 5 + .../component_details/DeBoard1.vue | 5 +- .../component_details/DeBoard10.vue | 5 +- .../component_details/DeBoard2.vue | 5 +- .../component_details/DeBoard3.vue | 5 +- .../component_details/DeBoard4.vue | 5 +- .../component_details/DeBoard5.vue | 5 +- .../component_details/DeBoard6.vue | 5 +- .../component_details/DeBoard7.vue | 5 +- .../component_details/DeBoard8.vue | 5 +- .../component_details/DeBoard9.vue | 3 +- .../component_details/DeDecoration1.vue | 5 +- .../component_details/DeDecoration2.vue | 5 +- .../component_details/DeDecoration3.vue | 5 +- .../component_details/DeDecoration4.vue | 5 +- .../component_details/DeDecoration5.vue | 9 +- .../de-decoration/component_details/config.ts | 6 + core/core-frontend/src/locales/en.ts | 1 + core/core-frontend/src/locales/tw.ts | 1 + core/core-frontend/src/locales/zh-CN.ts | 1 + 22 files changed, 166 insertions(+), 33 deletions(-) diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 1b3dd34b87..2c2c300843 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -245,7 +245,8 @@ export const commonAttr = { 'videoLinks', 'streamLinks', 'carouselInfo', - 'events' + 'events', + 'decoration_style' ], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验 linkage: { duration: 0, // 过渡持续时间 @@ -505,6 +506,7 @@ const list = [ color1: null, color2: null, dur: 6, + reverse: false, borderActive: false, backdropFilter: 'blur(0px)' } diff --git a/core/core-frontend/src/custom-component/de-decoration/Attr.vue b/core/core-frontend/src/custom-component/de-decoration/Attr.vue index 50031ca63e..0ef8840ccc 100644 --- a/core/core-frontend/src/custom-component/de-decoration/Attr.vue +++ b/core/core-frontend/src/custom-component/de-decoration/Attr.vue @@ -1,6 +1,61 @@ @@ -8,6 +63,51 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import CommonAttr from '@/custom-component/common/CommonAttr.vue' import { storeToRefs } from 'pinia' +import { useI18n } from '@/hooks/web/useI18n' +import { onMounted, reactive, watch } from 'vue' +import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart' +import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' +const { t } = useI18n() const dvMainStore = dvMainStoreWithOut() -const { curComponent } = storeToRefs(dvMainStore) +const { curComponent, mobileInPc } = storeToRefs(dvMainStore) +import dvStyleColor from '@/assets/svg/dv-style-color.svg' +const state = reactive({ + style: { + color0: null, + color1: null, + color2: null, + dur: 6, + reverse: false + }, + predefineColors: COLOR_PANEL +}) + +const snapshotStore = snapshotStoreWithOut() + +const onStyleChange = key => { + curComponent.value.style[key] = state.style[key] + snapshotStore.recordSnapshotCache('decoration') +} + +watch( + [() => curComponent.value], + () => { + init() + }, + { + deep: true + } +) + +onMounted(() => { + init() +}) + +const init = () => { + setTimeout(() => { + state.style.color0 = curComponent.value.style.color0 + state.style.color1 = curComponent.value.style.color1 + state.style.color2 = curComponent.value.style.color2 + }, 1000) +} diff --git a/core/core-frontend/src/custom-component/de-decoration/Component.vue b/core/core-frontend/src/custom-component/de-decoration/Component.vue index 7622ff31de..832e91ebcd 100644 --- a/core/core-frontend/src/custom-component/de-decoration/Component.vue +++ b/core/core-frontend/src/custom-component/de-decoration/Component.vue @@ -4,6 +4,7 @@ :curStyle="curStyle" :scale="calScale" :is="findDecoration(element.innerType)" + :color="curColor" > @@ -14,6 +15,10 @@ import { computed } from 'vue' const calScale = computed(() => { return props.scale }) + +const curColor = computed(() => { + return [props.element.style?.color0 || null, props.element.style?.color1 || null] +}) const props = defineProps({ curStyle: { type: Object diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue index 5faee9273c..becccfa6ed 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue @@ -94,10 +94,11 @@ const refName = ref('border-box-1') const border = ref(['left-top', 'right-top', 'left-bottom', 'right-bottom']) const defaultColor = ref(['#4fd2dd', '#235fa7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue index 8c8bfb2569..22da1044c7 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue @@ -56,10 +56,11 @@ const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom'] const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue index 0f6e80495f..d80792b9a3 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue @@ -57,10 +57,11 @@ const height = computed(() => { const defaultColor = ref(['#4fd2dd', '#235fa7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue index 43e558eac8..0511bc201b 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue @@ -65,10 +65,11 @@ const height = computed(() => { const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue index e4697ec082..ca3291b583 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue @@ -89,10 +89,11 @@ const reverse = computed(() => false) const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue index 1f68e8f599..bdddeb6198 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue @@ -83,11 +83,12 @@ const height = computed(() => { const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const reverse = computed(() => false) const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue index 298d142231..0d815a7fa6 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue @@ -73,10 +73,11 @@ const height = computed(() => { const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue index d81e3e98e5..1c856e16a6 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue @@ -71,10 +71,11 @@ const height = computed(() => { const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue index e370be0284..34b58137ce 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue @@ -72,15 +72,16 @@ const height = computed(() => { }) const defaultColor = ref(['#2862b7', '#2862b7']) const mergedColor = ref([]) -import { cloneDeep, merge } from 'lodash-es' +import { cloneDeep } from 'lodash-es' import { uuid } from 'vue-uuid' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const id = uuid const path = `border-box-8-path-${id}` const gradient = `border-box-8-gradient-${id}` const mask = `border-box-8-mask-${id}` const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const length = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue index f7da17e056..dea2eba4e2 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue @@ -175,6 +175,7 @@ const defaultColor = ref(['#11eefd', '#0078d2']) const mergedColor = ref([]) import { cloneDeep, merge } from 'lodash-es' import { uuid } from 'vue-uuid' +import { customMergeColor } from '@/custom-component/de-decoration/component_details/config' const id = uuid @@ -182,7 +183,7 @@ const gradientId = `border-box-9-gradient-${id}` const maskId = `border-box-9-mask-${id}` const mergeColor = () => { - mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[] + mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color) } const border_style = computed(() => { diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue index b7391e34bb..385e18e16d 100644 --- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue +++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue @@ -81,7 +81,8 @@