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

2026-06-17 21:08:31 +08:00 · 2025-07-09 23:01:19 +08:00
parent ed9fb9c1d8
commit 98f581caed
22 changed files with 92 additions and 145 deletions
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -37,6 +37,9 @@ const commonFilterAttrsFilterBorder = [
 ]

 const props = defineProps({
+  curStyle: {
+    type: Object
+  },
  active: {
    type: Boolean,
    default: false
@@ -468,7 +471,7 @@ const updateFromMobile = (e, type) => {
          :dv-type="dvInfo.type"
          :canvas-view-info="canvasViewInfo"
          :style="getComponentStyleDefault(config?.style)"
-          :curStyle="slotStyle"
+          :curStyle="curStyle"
          :prop-value="config?.propValue"
          :element="config"
          :request="config?.request"
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -534,6 +534,7 @@ defineExpose({
        :canvas-id="canvasId"
        :canvas-style-data="canvasStyleData"
        :dv-info="dvInfo"
+        :cur-style="getShapeItemShowStyle(item)"
        :canvas-view-info="canvasViewInfo"
        :view-info="canvasViewInfo[item.id]"
        :key="index"
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@@ -95,11 +95,11 @@ const groupActiveChange = category => {
            <img
              v-else-if="['dynamic_background'].includes(chartInfo.type)"
              class="item-top-icon"
-              :src="`/dynamic-background/${chartInfo.icon}`"
+              :src="`./dynamic-background/${chartInfo.icon}`"
              alt=""
            />
            <DeDecoration
-              :curStyle="{ width: '80px', height: '56px' }"
+              :curStyle="{ width: 530, height: 373 }"
              :element="{ innerType: chartInfo.value }"
              :scale="0.15"
              v-else-if="['de_decoration'].includes(chartInfo.type)"
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -502,9 +502,9 @@ const list = [
    style: {
      width: 400,
      height: 300,
-      color0: null,
-      color1: null,
-      color2: null,
+      color0: '#2862b7',
+      color1: '#2862b7',
+      color2: '#2862b7',
      dur: 6,
      reverse: false,
      borderActive: false,
--- a/core/core-frontend/src/custom-component/de-decoration/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/Attr.vue
@@ -108,6 +108,6 @@ const init = () => {
    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
@@ -1,7 +1,7 @@
 <template>
  <div class="dynamic-shape">
    <component
-      :curStyle="curStyle"
+      :curStyle="curStyleAdaptor"
      :scale="calScale"
      :is="findDecoration(element.innerType)"
      :color="curColor"
@@ -16,6 +16,20 @@ const calScale = computed(() => {
  return props.scale
 })

+const curStyleAdaptor = computed(() => {
+  if (props.showPosition.includes('edit')) {
+    return {
+      width: parseInt(props.curStyle.width) / props.scale,
+      height: parseInt(props.curStyle.height) / props.scale
+    }
+  } else {
+    return {
+      width: parseInt(props.curStyle.width),
+      height: parseInt(props.curStyle.height)
+    }
+  }
+})
+
 const curColor = computed(() => {
  return [props.element.style?.color0 || null, props.element.style?.color1 || null]
 })
@@ -26,6 +40,11 @@ const props = defineProps({
  scale: {
    type: Number
  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
  element: {
    type: Object,
    default() {
--- 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
@@ -76,19 +76,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const refName = ref('border-box-1')
 const border = ref(['left-top', 'right-top', 'left-bottom', 'right-bottom'])
--- 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
@@ -39,19 +39,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']

 const defaultColor = ref(['#2862b7', '#2862b7'])
--- 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
@@ -41,19 +41,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const defaultColor = ref(['#4fd2dd', '#235fa7'])
 const mergedColor = ref<string[]>([])
--- 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
@@ -49,19 +49,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
--- 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
@@ -71,19 +71,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const reverse = computed(() => false)

--- 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
@@ -67,19 +67,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
--- 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
@@ -57,19 +57,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
--- 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
@@ -55,19 +55,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
--- 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
@@ -57,19 +57,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
 import { cloneDeep } from 'lodash-es'
--- 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
@@ -157,19 +157,14 @@ const props = withDefaults(defineProps<Props>(), {
  backgroundColor: 'transparent',
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const defaultColor = ref(['#11eefd', '#0078d2'])
 const mergedColor = ref<string[]>([])
--- 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
@@ -94,19 +94,14 @@ const props = withDefaults(defineProps<Props>(), {
  color: () => [],
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const border_style = computed(() => {
  return {
--- 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
@@ -47,8 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
  color: () => [],
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  },
  reverse: false,
@@ -63,13 +63,8 @@ const h = ref(0)
 const defaultColor = ref(['#3faacb', '#fff'])
 const mergedColor = ref<string[]>([])

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const border_style = computed(() => {
  return {
--- 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
@@ -42,19 +42,14 @@ const props = withDefaults(defineProps<Props>(), {
  color: () => [],
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  }
 })

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const border_style = computed(() => {
  return {
--- 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
@@ -36,8 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
  color: () => [],
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  },
  reverse: false,
@@ -47,14 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
 const refName = ref('decoration-4')
 const defaultColor = ref(['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'])
 const mergedColor = ref<string[]>([])
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
-
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 const border_style = computed(() => {
  return {
    width: `${width.value}px`,
--- 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
@@ -52,8 +52,8 @@ const props = withDefaults(defineProps<Props>(), {
  color: () => [],
  curStyle: () => {
    return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
    }
  },
  dur: 3
@@ -67,13 +67,8 @@ const line2Length = ref(0)
 const defaultColor = ref(['#3f96a5', '#3f96a5'])
 const mergedColor = ref<string[]>([])

-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)

 const border_style = computed(() => {
  return {
--- a/core/core-frontend/src/custom-component/dynamic_background/Component.vue
+++ b/core/core-frontend/src/custom-component/dynamic_background/Component.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="circle-shape">
-    <img class="dynamic-shape" :src="`/dynamic-background/${element.innerType}`" alt="" />
+    <img class="dynamic-shape" :src="`./dynamic-background/${element.innerType}`" alt="" />
  </div>
 </template>