feat(component-background): 添加对独立圆角半径的控制支持

实现组件背景圆角的独立控制功能，允许分别设置四个角的半径值。新增 CornerValues 接口和 borderRadius2 属性，并在 UI 中提供三种模式（统一、对称、独立）的配置选项。同时更新 Shape.vue 组件以支持新的圆角渲染逻辑。

修改包括：
1. 在 Types.ts 中新增 CornerValues 接口
2. 在 BackgroundOverallCommon.vue 中实现圆角配置界面
3. 在 Shape.vue 中更新圆角样式计算逻辑

core/core-frontend/src/Types.ts

@@ -23,3 +23,11 @@ export interface EdgeValues {
   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/Shape.vue

@@ -948,9 +948,25 @@ const componentBackgroundStyle = computed(() => {
       }px`
     }
 
+    let borderRadiusStyle = borderRadius + 'px'
+    const borderRadiusMode = commonBackground.borderRadius2?.mode
+    if (borderRadiusMode === ShorthandMode.Uniform) {
+      borderRadiusStyle = `${commonBackground.borderRadius2?.topLeft * scale.value}px`
+    } else if (borderRadiusMode === ShorthandMode.Axis) {
+      borderRadiusStyle = `${commonBackground.borderRadius2?.topLeft * scale.value}px ${
+        commonBackground.borderRadius2?.bottomLeft * scale.value
+      }px`
+    } else if (borderRadiusMode === ShorthandMode.PerEdge) {
+      borderRadiusStyle = `${commonBackground.borderRadius2?.topLeft * scale.value}px ${
+        commonBackground.borderRadius2?.topRight * scale.value
+      }px ${commonBackground.borderRadius2?.bottomRight * scale.value}px ${
+        commonBackground.borderRadius2?.bottomLeft * scale.value
+      }px`
+    }
+
     let style = {
       padding: innerPaddingStyle,
-      borderRadius: borderRadius + 'px'
+      borderRadius: borderRadiusStyle
     }
     let colorRGBA = ''
     if (backgroundColorSelect && backgroundColor) {

core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue

@@ -110,21 +110,76 @@
         </el-col>
       </el-row>
       <el-row :gutter="8">
-        <el-col :span="12">
+        <el-col :span="24">
           <el-form-item
             :label="t('visualization.board_radio')"
             class="form-item w100"
             :class="'form-item-' + themes"
           >
-            <el-input-number
+            <el-segmented
+              v-model="state.commonBackground.borderRadius2.mode"
+              :options="paddingModes"
+              size="small"
               style="width: 100%"
-              :effect="themes"
-              controls-position="right"
-              :min="0"
-              :max="100"
-              v-model="state.commonBackground.borderRadius"
               @change="onBackgroundChange"
             />
+            <el-row :gutter="8">
+              <el-col :span="12">
+                <div style="display: flex; align-items: center; margin-bottom: 8px">
+                  <span style="width: 30%; padding-right: 8px">左上</span>
+                  <el-input-number
+                    style="width: 70%"
+                    :effect="themes"
+                    controls-position="right"
+                    :min="0"
+                    :max="100"
+                    v-model="state.commonBackground.borderRadius2.topLeft"
+                    @change="onBackgroundChange"
+                  />
+                </div>
+                <div style="display: flex; align-items: center">
+                  <span style="width: 30%; padding-right: 8px">左下</span>
+                  <el-input-number
+                    style="width: 70%"
+                    :effect="themes"
+                    controls-position="right"
+                    :min="0"
+                    :max="100"
+                    v-model="state.commonBackground.borderRadius2.bottomLeft"
+                    :disabled="state.commonBackground.borderRadius2.mode === ShorthandMode.Uniform"
+                    @change="onBackgroundChange"
+                  />
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div style="display: flex; align-items: center; margin-bottom: 8px">
+                  <span style="width: 30%; padding-right: 8px">右上</span>
+                  <el-input-number
+                    style="width: 70%"
+                    :effect="themes"
+                    :disabled="state.commonBackground.borderRadius2.mode !== ShorthandMode.PerEdge"
+                    controls-position="right"
+                    :min="0"
+                    :max="100"
+                    v-model="state.commonBackground.borderRadius2.topRight"
+                    @change="onBackgroundChange"
+                  />
+                </div>
+                <div style="display: flex; align-items: center">
+                  <span style="width: 30%; padding-right: 8px">右下</span>
+                  <el-input-number
+                    style="width: 70%"
+                    :effect="themes"
+                    :disabled="state.commonBackground.borderRadius2.mode !== ShorthandMode.PerEdge"
+                    controls-position="right"
+                    :min="0"
+                    :max="100"
+                    v-model="state.commonBackground.borderRadius2.bottomRight"
+                    @change="onBackgroundChange"
+                  />
+                </div>
+              </el-col>
+            </el-row>
           </el-form-item>
         </el-col>
       </el-row>
@@ -362,7 +417,8 @@ import { ShorthandMode } from '@/Types'
 
 const state = reactive<State>({
   commonBackground: {
-    innerPadding: {}
+    innerPadding: {},
+    borderRadius2: {}
   },
   BackgroundShowMap: {},
   checked: false,
@@ -419,6 +475,17 @@ const init = () => {
       left: innerPadding
     }
   }
+  const borderRadius = commonBackgroundPop.borderRadius
+  if (typeof borderRadius !== 'undefined') {
+    commonBackgroundPop.borderRadius2 = {
+      mode: ShorthandMode.Uniform,
+      topLeft: borderRadius,
+      topRight: borderRadius,
+      bottomLeft: borderRadius,
+      bottomRight: borderRadius
+    }
+    commonBackgroundPop.borderRadius = undefined
+  }
   state.commonBackground = commonBackgroundPop
   updateInnerPadding()
   if (state.commonBackground.outerImage) {
@@ -461,8 +528,21 @@ const updateInnerPadding = () => {
   }
 }
 
+const updateBorderRadius = () => {
+  if (state.commonBackground.borderRadius2.mode === ShorthandMode.Uniform) {
+    state.commonBackground.borderRadius2.topLeft = state.commonBackground.borderRadius2.topLeft
+    state.commonBackground.borderRadius2.topRight = state.commonBackground.borderRadius2.topLeft
+    state.commonBackground.borderRadius2.bottomLeft = state.commonBackground.borderRadius2.topLeft
+    state.commonBackground.borderRadius2.bottomRight = state.commonBackground.borderRadius2.topLeft
+  } else if (state.commonBackground.borderRadius2.mode === ShorthandMode.Axis) {
+    state.commonBackground.borderRadius2.bottomRight = state.commonBackground.borderRadius2.topLeft
+    state.commonBackground.borderRadius2.topRight = state.commonBackground.borderRadius2.bottomLeft
+  }
+}
+
 const onBackgroundChange = () => {
   updateInnerPadding()
+  updateBorderRadius()
   emits('onBackgroundChange', state.commonBackground)
 }
 

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

@@ -16,6 +16,7 @@ export interface CommonBackground {
   innerImageColor?: string
   innerImage?: string
   outerImage?: string
+  borderRadius2?: CornerValues
 }
 
 export interface State {