fix(仪表板、数据大屏): 修复边框背景圆角编辑预览不一致问题 (#17259)

core/core-frontend/src/Types.ts

@@ -0,0 +1,29 @@
+/**
+ * 简写模式枚举，用于定义不同的边值设置模式
+ */
+export enum ShorthandMode {
+  /**
+   * 统一模式，所有边使用相同的值
+   */
+  Uniform = 'uniform',
+  /**
+   * 逐边模式，可单独设置每条边的值
+   */
+  PerEdge = 'per_edge'
+}
+
+export interface EdgeValues {
+  mode?: ShorthandMode
+  top?: number
+  right?: number
+  bottom?: number
+  left?: number
+}
+
+export interface CornerValues {
+  mode?: ShorthandMode
+  topLeft?: number
+  topRight?: number
+  bottomLeft?: number
+  bottomRight?: number
+}

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -32,6 +32,8 @@ import DePreviewPopDialog from '@/components/visualization/DePreviewPopDialog.vu
 import Icon from '../../icon-custom/src/Icon.vue'
 const appStore = useAppStoreWithOut()
 import replaceOutlined from '@/assets/svg/icon_replace_outlined.svg'
+import { CommonBackground } from '@/components/visualization/component-background/Types'
+import { ShorthandMode } from '@/Types'
 
 const componentWrapperInnerRef = ref(null)
 const componentEditBarRef = ref(null)
@@ -245,10 +247,75 @@ const blurBgStyle = computed(() => {
 
 const componentBackgroundStyle = computed(() => {
   if (config.value.commonBackground) {
-    return getComponentBackgroundStyle(config.value.commonBackground, {
-      scale: deepScale.value,
-      isUserView: config.value.component === 'UserView'
-    })
+    const {
+      backdropFilterEnable,
+      backdropFilter,
+      backgroundColorSelect,
+      backgroundColor,
+      backgroundImageEnable,
+      backgroundType,
+      outerImage,
+      innerPadding,
+      borderRadius
+    } = config.value.commonBackground
+    const commonBackground = config.value.commonBackground as CommonBackground
+    const innerPaddingTarget = ['Group'].includes(config.value.component) ? 0 : innerPadding
+    let innerPaddingStyle = innerPaddingTarget * deepScale.value + 'px'
+    const paddingMode = commonBackground.innerPadding?.mode
+    if (paddingMode === ShorthandMode.Uniform) {
+      innerPaddingStyle = `${commonBackground.innerPadding?.top * deepScale.value}px`
+    } else if (paddingMode === ShorthandMode.Axis) {
+      innerPaddingStyle = `${commonBackground.innerPadding?.top * deepScale.value}px ${
+        commonBackground.innerPadding?.left * deepScale.value
+      }px`
+    } else if (paddingMode === ShorthandMode.PerEdge) {
+      innerPaddingStyle = `${commonBackground.innerPadding?.top * deepScale.value}px ${
+        commonBackground.innerPadding?.right * deepScale.value
+      }px ${commonBackground.innerPadding?.bottom * deepScale.value}px ${
+        commonBackground.innerPadding?.left * deepScale.value
+      }px`
+    }
+
+    let borderRadiusStyle = borderRadius + 'px'
+    const borderRadiusMode = commonBackground.borderRadius?.mode
+    if (borderRadiusMode === ShorthandMode.Uniform) {
+      borderRadiusStyle = `${commonBackground.borderRadius?.topLeft * deepScale.value}px`
+    } else if (borderRadiusMode === ShorthandMode.Axis) {
+      borderRadiusStyle = `${commonBackground.borderRadius?.topLeft * deepScale.value}px ${
+        commonBackground.borderRadius?.bottomLeft * deepScale.value
+      }px`
+    } else if (borderRadiusMode === ShorthandMode.PerEdge) {
+      borderRadiusStyle = `${commonBackground.borderRadius?.topLeft * deepScale.value}px ${
+        commonBackground.borderRadius?.topRight * deepScale.value
+      }px ${commonBackground.borderRadius?.bottomRight * deepScale.value}px ${
+        commonBackground.borderRadius?.bottomLeft * deepScale.value
+      }px`
+    }
+
+    let style = {
+      padding: innerPaddingStyle,
+      borderRadius: borderRadiusStyle
+    }
+    let colorRGBA = ''
+    if (backgroundColorSelect && backgroundColor) {
+      colorRGBA = backgroundColor
+    }
+    if (backgroundImageEnable) {
+      if (backgroundType === 'outerImage' && typeof outerImage === 'string') {
+        style['background'] = `url(${imgUrlTrans(outerImage)}) no-repeat ${colorRGBA}`
+      } else {
+        style['background-color'] = colorRGBA
+      }
+    } else {
+      style['background-color'] = colorRGBA
+    }
+    if (config.value.component !== 'UserView') {
+      style['overflow'] = 'hidden'
+    }
+    if (backdropFilterEnable) {
+      style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
+    }
+    return style
   }
   return {}
 })

core/core-frontend/src/components/visualization/component-background/Types.ts

@@ -1,3 +1,4 @@
+import { EdgeValues, CornerValues } from '@/Types'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import type { UploadFile } from 'element-plus-secondary'