fix(仪表板、数据大屏): 修复边框背景圆角历史模版适配问题 (#17260)

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -174,6 +174,8 @@ import Board from '@/components/de-board/Board.vue'
 import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
 import { debounce } from 'lodash-es'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { CommonBackground } from '@/components/visualization/component-background/Types'
+import { ShorthandMode } from '@/Types'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
@@ -515,9 +517,43 @@ const backgroundStyle = backgroundParams => {
       innerPadding,
       borderRadius
     } = backgroundParams
+    const commonBackground = backgroundParams as CommonBackground
+    const innerPaddingTarget = ['Group'].includes(element.value.component) ? 0 : innerPadding
+    let innerPaddingStyle = innerPaddingTarget * scale.value + 'px'
+    const paddingMode = commonBackground.innerPadding?.mode
+    if (paddingMode === ShorthandMode.Uniform) {
+      innerPaddingStyle = `${commonBackground.innerPadding?.top * scale.value}px`
+    } else if (paddingMode === ShorthandMode.Axis) {
+      innerPaddingStyle = `${commonBackground.innerPadding?.top * scale.value}px ${
+        commonBackground.innerPadding?.left * scale.value
+      }px`
+    } else if (paddingMode === ShorthandMode.PerEdge) {
+      innerPaddingStyle = `${commonBackground.innerPadding?.top * scale.value}px ${
+        commonBackground.innerPadding?.right * scale.value
+      }px ${commonBackground.innerPadding?.bottom * scale.value}px ${
+        commonBackground.innerPadding?.left * scale.value
+      }px`
+    }
+
+    let borderRadiusStyle = borderRadius + 'px'
+    const borderRadiusMode = commonBackground.borderRadius?.mode
+    if (borderRadiusMode === ShorthandMode.Uniform) {
+      borderRadiusStyle = `${commonBackground.borderRadius?.topLeft * scale.value}px`
+    } else if (borderRadiusMode === ShorthandMode.Axis) {
+      borderRadiusStyle = `${commonBackground.borderRadius?.topLeft * scale.value}px ${
+        commonBackground.borderRadius?.bottomLeft * scale.value
+      }px`
+    } else if (borderRadiusMode === ShorthandMode.PerEdge) {
+      borderRadiusStyle = `${commonBackground.borderRadius?.topLeft * scale.value}px ${
+        commonBackground.borderRadius?.topRight * scale.value
+      }px ${commonBackground.borderRadius?.bottomRight * scale.value}px ${
+        commonBackground.borderRadius?.bottomLeft * scale.value
+      }px`
+    }
+
     let style = {
-      padding: innerPadding * scale.value + 'px',
-      borderRadius: borderRadius + 'px'
+      padding: innerPaddingStyle,
+      borderRadius: borderRadiusStyle
     }
     let colorRGBA = ''
     if (backgroundColorSelect && backgroundColor) {

core/core-frontend/src/utils/canvasUtils.ts

@@ -45,6 +45,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { useCache } from '@/hooks/web/useCache'
 import { isDesktop } from '@/utils/ModelUtil'
+import { ShorthandMode } from '@/Types'
 const { t } = useI18n()
 const appearanceStore = useAppearanceStoreWithOut()
 const { wsCache } = useCache()
@@ -53,6 +54,26 @@ export function chartTransStr2Object(targetIn, copy) {
   return target
 }
 
+const getNewInnerPadding = (commonGap = 0) => {
+  return {
+    mode: ShorthandMode.Uniform,
+    top: commonGap,
+    right: commonGap,
+    bottom: commonGap,
+    left: commonGap
+  }
+}
+
+const getNewBorderRadius = (commonGap = 0) => {
+  return {
+    mode: ShorthandMode.Uniform,
+    topLeft: commonGap,
+    topRight: commonGap,
+    bottomLeft: commonGap,
+    bottomRight: commonGap
+  }
+}
+
 export function chartTransObject2Str(targetIn, copy) {
   const target = copy === 'Y' ? cloneDeep(targetIn) : targetIn
   return target
@@ -98,7 +119,7 @@ export function findNewComponent(componentName, innerType, staticMap?) {
     }
   } else if (['DeDecoration', 'DynamicBackground'].includes(componentName)) {
     newComponent.style.borderWidth = 0
-    newComponent.style.innerPadding = 0
+    newComponent.style.innerPadding = getNewInnerPadding()
   }
   return newComponent
 }
@@ -120,6 +141,10 @@ export function commonHandleDragEnd(e, dvModel) {
   }
 }
 
+function isNumber(value) {
+  return !isNaN(value) && typeof value === 'number'
+}
+
 function matrixAdaptor(componentItem) {
   componentItem.x = 1 + (componentItem.x - 1) * 2
   componentItem.y = 1 + (componentItem.y - 1) * 2
@@ -171,6 +196,19 @@ export function historyItemAdaptor(
     })
   }
 
+  // 历史innerPadding 转换
+  if (isNumber(componentItem['commonBackground'].innerPadding)) {
+    componentItem['commonBackground'].innerPadding = getNewInnerPadding(
+      componentItem['commonBackground'].innerPadding
+    )
+  }
+
+  // 历史borderRadius 转换
+  if (isNumber(componentItem['commonBackground'].borderRadius)) {
+    componentItem['commonBackground'].borderRadius = getNewBorderRadius(
+      componentItem['commonBackground'].borderRadius
+    )
+  }
   if (componentItem.component === 'DeTabs') {
     componentItem['editableTabsValue'] = componentItem['editableTabsValue'] || ''
     componentItem.style['showTabTitle'] =
@@ -188,14 +226,19 @@ export function historyItemAdaptor(
   if (componentItem.style['borderActive'] === undefined) {
     componentItem.style['borderActive'] = false
     componentItem.style['borderWidth'] = 1
-    componentItem.style['borderRadius'] = 5
+    componentItem.style['borderRadius'] = getNewBorderRadius(5)
     componentItem.style['borderStyle'] = 'solid'
     componentItem.style['borderColor'] = '#cccccc'
   } else {
     componentItem.style['borderWidth'] =
       componentItem.style['borderWidth'] === undefined ? 1 : componentItem.style['borderWidth']
     componentItem.style['borderRadius'] =
-      componentItem.style['borderRadius'] === undefined ? 5 : componentItem.style['borderRadius']
+      componentItem.style['borderRadius'] === undefined
+        ? getNewBorderRadius(5)
+        : componentItem.style['borderRadius']
+    if (isNumber(componentItem.style['borderRadius'])) {
+      componentItem.style['borderRadius'] = getNewBorderRadius(componentItem.style['borderRadius'])
+    }
     componentItem.style['borderStyle'] =
       componentItem.style['borderStyle'] === undefined
         ? 'solid'