From b10690cc70409e689289a527eaab12eef4b3ded9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
 <42510293+ziyujiahao@users.noreply.github.com>
Date: Mon, 27 Oct 2025 13:58:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E8=83=8C=E6=99=AF=E5=9C=86=E8=A7=92=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=A2=84=E8=A7=88=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#17259)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/Types.ts               | 29 +++++++
 .../canvas/ComponentWrapper.vue               | 75 ++++++++++++++++++-
 .../component-background/Types.ts             |  1 +
 3 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 core/core-frontend/src/Types.ts

diff --git a/core/core-frontend/src/Types.ts b/core/core-frontend/src/Types.ts
new file mode 100644
index 0000000000..0098b6da71
--- /dev/null
+++ b/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
+}
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index fa548a1111..2c39804caf 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/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 {}
 })
diff --git a/core/core-frontend/src/components/visualization/component-background/Types.ts b/core/core-frontend/src/components/visualization/component-background/Types.ts
index 6d94c5f23f..33efaa0ca2 100644
--- a/core/core-frontend/src/components/visualization/component-background/Types.ts
+++ b/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'