refactor(数据大屏): 装饰组件支持配色

2026-05-15 05:22:13 +08:00 · 2025-07-09 18:56:15 +08:00
parent fef1a4b564
commit ed9fb9c1d8
22 changed files with 166 additions and 33 deletions
--- 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)'
    }
--- 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 @@
 <template>
  <div class="attr-list de-collapse-style">
-    <CommonAttr :element="curComponent"></CommonAttr>
+    <CommonAttr :element="curComponent">
+      <el-collapse-item
+        effect="dark"
+        :title="t('visualization.style')"
+        name="decoration_style"
+        v-if="curComponent && !mobileInPc"
+      >
+        <div style="display: flex">
+          <el-tooltip effect="dark" placement="bottom">
+            <template #content> {{ t('visualization.color_setting', [1]) }} </template>
+            <el-form-item
+              effect="dark"
+              style="margin-left: 12px"
+              class="form-item no-margin-bottom"
+              :class="'form-item-dark'"
+            >
+              <el-color-picker
+                :title="t('visualization.color_setting', [1])"
+                v-model="state.style.color0"
+                class="color-picker-style"
+                :prefix-icon="dvStyleColor"
+                :triggerWidth="80"
+                is-custom
+                show-alpha
+                :predefine="state.predefineColors"
+                @change="onStyleChange('color0')"
+              >
+              </el-color-picker>
+            </el-form-item>
+          </el-tooltip>
+
+          <el-tooltip effect="dark" placement="bottom">
+            <template #content> {{ t('visualization.color_setting', [2]) }} </template>
+            <el-form-item
+              effect="dark"
+              style="margin-left: 12px"
+              class="form-item no-margin-bottom"
+              :class="'form-item-dark'"
+            >
+              <el-color-picker
+                :title="t('visualization.color_setting', [2])"
+                v-model="curComponent.style.color1"
+                class="color-picker-style"
+                :prefix-icon="dvStyleColor"
+                :triggerWidth="80"
+                is-custom
+                show-alpha
+                :predefine="state.predefineColors"
+                @change="onStyleChange('color0')"
+              >
+              </el-color-picker>
+            </el-form-item>
+          </el-tooltip>
+        </div>
+      </el-collapse-item>
+    </CommonAttr>
  </div>
 </template>

@@ -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)
+}
 </script>
--- 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"
    ></component>
  </div>
 </template>
@@ -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
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
-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(() => {
--- 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<string[]>([])
 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(() => {
--- 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 @@

 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { cloneDeep, merge } from 'lodash-es'
+import { cloneDeep } from 'lodash-es'
+import { customMergeColor } from '@/custom-component/de-decoration/component_details/config'

 interface Props {
  color?: string[]
@@ -159,7 +160,7 @@ const calcSVGData = () => {
 }

 const mergeColor = () => {
-  mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[]
+  mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color)
 }

 const onResize = () => {
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration2.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration2.vue
@@ -32,7 +32,8 @@

 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { cloneDeep, merge } from 'lodash-es'
+import { cloneDeep } from 'lodash-es'
+import { customMergeColor } from '@/custom-component/de-decoration/component_details/config'

 interface Props {
  color?: string[]
@@ -93,7 +94,7 @@ const calcSVGData = () => {
 }

 const mergeColor = () => {
-  mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[]
+  mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color)
 }

 // Watchers
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration3.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration3.vue
@@ -29,7 +29,8 @@

 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { cloneDeep, merge } from 'lodash-es'
+import { cloneDeep } from 'lodash-es'
+import { customMergeColor } from '@/custom-component/de-decoration/component_details/config'

 interface Props {
  color?: string[]
@@ -64,7 +65,7 @@ const border_style = computed(() => {
 })

 const mergeColor = () => {
-  mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[]
+  mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color)
 }

 // Constants
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration4.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration4.vue
@@ -21,7 +21,8 @@

 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { cloneDeep, merge } from 'lodash-es'
+import { cloneDeep } from 'lodash-es'
+import { customMergeColor } from '@/custom-component/de-decoration/component_details/config'

 interface Props {
  color?: string[]
@@ -63,7 +64,7 @@ const border_style = computed(() => {
 })

 const mergeColor = () => {
-  mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[]
+  mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color)
 }

 // Computed properties
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration5.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration5.vue
@@ -35,8 +35,11 @@

 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { getPointDistances } from '@/custom-component/de-decoration/component_details/config'
-import { cloneDeep, merge, sum } from 'lodash-es'
+import {
+  customMergeColor,
+  getPointDistances
+} from '@/custom-component/de-decoration/component_details/config'
+import { cloneDeep, sum } from 'lodash-es'

 interface Props {
  color?: string[]
@@ -81,7 +84,7 @@ const border_style = computed(() => {
 })

 const mergeColor = () => {
-  mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) as string[]
+  mergedColor.value = customMergeColor(cloneDeep(defaultColor.value), props.color)
 }

 const calcSVGData = () => {
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/config.ts
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/config.ts
@@ -53,3 +53,9 @@ export function getPointDistances(points) {
    .fill(0)
    .map((_, i) => calcTwoPointDistance(points[i], points[i + 1]))
 }
+
+export function customMergeColor(defaultColor: string[], newColor: []) {
+  return defaultColor.map((defaultVal, index) => {
+    return newColor && newColor[index] !== null ? newColor[index] : defaultVal
+  })
+}
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -2906,6 +2906,7 @@ export default {
    column_name: 'Field name'
  },
  visualization: {
+    color_setting: 'Color{0}',
    decoration_name: 'Decoration {0}',
    decoration: 'Decoration',
    dynamic_background_name: 'Animated {0}',
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -2825,6 +2825,7 @@ export default {
    column_name: '欄位名稱'
  },
  visualization: {
+    color_setting: '配色{0}',
    decoration_name: '裝飾{0}',
    decoration: '裝飾',
    dynamic_background_name: '動圖{0}',
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2831,6 +2831,7 @@ export default {
    column_name: '字段名称'
  },
  visualization: {
+    color_setting: '配色{0}',
    decoration_name: '装饰{0}',
    decoration: '装饰',
    dynamic_background_name: '背景{0}',