feat(component-background): 重构圆角配置为支持多种模式

将borderRadius从单一数值改为支持统一值、对角和逐角三种配置模式
添加多语言支持并移除冗余的borderRadius2属性
更新组件以使用新的圆角配置结构

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

@@ -117,8 +117,8 @@
             :class="'form-item-' + themes"
           >
             <el-segmented
-              v-model="state.commonBackground.borderRadius2.mode"
-              :options="paddingModes"
+              v-model="state.commonBackground.borderRadius.mode"
+              :options="cornerModes"
               size="small"
               style="width: 100%"
               @change="onBackgroundChange"
@@ -126,55 +126,63 @@
             <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>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.corner_top_left')
+                  }}</span>
                   <el-input-number
                     style="width: 70%"
                     :effect="themes"
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.borderRadius2.topLeft"
+                    v-model="state.commonBackground.borderRadius.topLeft"
                     @change="onBackgroundChange"
                   />
                 </div>
                 <div style="display: flex; align-items: center">
-                  <span style="width: 30%; padding-right: 8px">左下</span>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.corner_bottom_left')
+                  }}</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"
+                    v-model="state.commonBackground.borderRadius.bottomLeft"
+                    :disabled="state.commonBackground.borderRadius.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>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.corner_top_right')
+                  }}</span>
                   <el-input-number
                     style="width: 70%"
                     :effect="themes"
-                    :disabled="state.commonBackground.borderRadius2.mode !== ShorthandMode.PerEdge"
+                    :disabled="state.commonBackground.borderRadius.mode !== ShorthandMode.PerEdge"
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.borderRadius2.topRight"
+                    v-model="state.commonBackground.borderRadius.topRight"
                     @change="onBackgroundChange"
                   />
                 </div>
                 <div style="display: flex; align-items: center">
-                  <span style="width: 30%; padding-right: 8px">右下</span>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.corner_bottom_right')
+                  }}</span>
                   <el-input-number
                     style="width: 70%"
                     :effect="themes"
-                    :disabled="state.commonBackground.borderRadius2.mode !== ShorthandMode.PerEdge"
+                    :disabled="state.commonBackground.borderRadius.mode !== ShorthandMode.PerEdge"
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.borderRadius2.bottomRight"
+                    v-model="state.commonBackground.borderRadius.bottomRight"
                     @change="onBackgroundChange"
                   />
                 </div>
@@ -418,7 +426,7 @@ import { ShorthandMode } from '@/Types'
 const state = reactive<State>({
   commonBackground: {
     innerPadding: {},
-    borderRadius2: {}
+    borderRadius: {}
   },
   BackgroundShowMap: {},
   checked: false,
@@ -436,6 +444,11 @@ const paddingModes = Object.values(ShorthandMode).map(item => ({
   value: item
 })) as { label: string; value: ShorthandMode }[]
 
+const cornerModes = Object.values(ShorthandMode).map(item => ({
+  label: t(`visualization.corner_shorthand_mode_${item}`),
+  value: item
+})) as { label: string; value: ShorthandMode }[]
+
 const goFile = () => {
   files.value.click()
 }
@@ -476,18 +489,18 @@ const init = () => {
     }
   }
   const borderRadius = commonBackgroundPop.borderRadius
-  if (typeof borderRadius !== 'undefined') {
-    commonBackgroundPop.borderRadius2 = {
+  if (typeof borderRadius === 'number') {
+    commonBackgroundPop.borderRadius = {
       mode: ShorthandMode.Uniform,
       topLeft: borderRadius,
       topRight: borderRadius,
       bottomLeft: borderRadius,
       bottomRight: borderRadius
     }
-    commonBackgroundPop.borderRadius = undefined
   }
   state.commonBackground = commonBackgroundPop
   updateInnerPadding()
+  updateBorderRadius()
   if (state.commonBackground.outerImage) {
     state.fileList = [{ url: imgUrlTrans(state.commonBackground.outerImage) }]
   } else {
@@ -529,14 +542,13 @@ 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
+  if (state.commonBackground.borderRadius.mode === ShorthandMode.Uniform) {
+    state.commonBackground.borderRadius.topRight = state.commonBackground.borderRadius.topLeft
+    state.commonBackground.borderRadius.bottomLeft = state.commonBackground.borderRadius.topLeft
+    state.commonBackground.borderRadius.bottomRight = state.commonBackground.borderRadius.topLeft
+  } else if (state.commonBackground.borderRadius.mode === ShorthandMode.Axis) {
+    state.commonBackground.borderRadius.bottomRight = state.commonBackground.borderRadius.topLeft
+    state.commonBackground.borderRadius.topRight = state.commonBackground.borderRadius.bottomLeft
   }
 }
 

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

@@ -6,7 +6,7 @@ export type BackgroundType = 'outerImage' | 'innerImage'
 
 export interface CommonBackground {
   innerPadding?: EdgeValues
-  borderRadius?: number
+  borderRadius?: CornerValues
   backdropFilterEnable?: boolean
   backdropFilter?: number
   backgroundColorSelect?: boolean
@@ -16,7 +16,6 @@ export interface CommonBackground {
   innerImageColor?: string
   innerImage?: string
   outerImage?: string
-  borderRadius2?: CornerValues
 }
 
 export interface State {

core/core-frontend/src/custom-component/component-list.ts

@@ -190,7 +190,10 @@ export const COMMON_COMPONENT_BACKGROUND_BASE: CommonBackground = {
     mode: ShorthandMode.Uniform,
     top: 12
   },
-  borderRadius: 0,
+  borderRadius: {
+    mode: ShorthandMode.Uniform,
+    topLeft: 0
+  },
   backdropFilter: 4
 }
 

core/core-frontend/src/locales/en.ts

@@ -3400,6 +3400,13 @@ export default {
     edge_bottom: 'Bottom',
     edge_left: 'Left',
     board_radio: 'Corners',
+    corner_shorthand_mode_uniform: 'Uniform',
+    corner_shorthand_mode_axis: 'Diagonal',
+    corner_shorthand_mode_per_edge: 'Per Corner',
+    corner_top_left: 'Top Left',
+    corner_top_right: 'Top Right',
+    corner_bottom_left: 'Bottom Left',
+    corner_bottom_right: 'Bottom Right',
     web_set_tips: 'Some websites may not allow embedding and will not display.',
     repeat_params: 'Duplicate parameter names exist.',
     enable_outer_param_set: 'Enable External Parameter Settings',

core/core-frontend/src/locales/tw.ts

@@ -3304,6 +3304,13 @@ export default {
     edge_bottom: '下',
     edge_left: '左',
     board_radio: '圓角',
+    corner_shorthand_mode_uniform: '統一值',
+    corner_shorthand_mode_axis: '對角',
+    corner_shorthand_mode_per_edge: '逐角',
+    corner_top_left: '左上',
+    corner_top_right: '右上',
+    corner_bottom_left: '左下',
+    corner_bottom_right: '右下',
     web_set_tips: '部分網站可能設置不允許嵌入而無法顯示',
     repeat_params: '存在名稱重複的參數',
     enable_outer_param_set: '啟用外部參數設置',

core/core-frontend/src/locales/zh-CN.ts

@@ -3313,6 +3313,13 @@ export default {
     edge_bottom: '下',
     edge_left: '左',
     board_radio: '圆角',
+    corner_shorthand_mode_uniform: '统一值',
+    corner_shorthand_mode_axis: '对角',
+    corner_shorthand_mode_per_edge: '逐角',
+    corner_top_left: '左上',
+    corner_top_right: '右上',
+    corner_bottom_left: '左下',
+    corner_bottom_right: '右下',
     web_set_tips: '部分网站可能设置不允许嵌入而无法显示',
     repeat_params: '存在名称重复的参数',
     enable_outer_param_set: '启用外部参数设置',