refactor(component-background): 重构内边距处理逻辑并添加多语言支持

- 将 innerPadding 从 number 类型改为 EdgeValues 类型以支持更灵活的内边距设置 - 移除冗余的 innerPadding2 属性 - 添加边缘方向的多语言翻译（上、下、左、右） - 更新组件列表和背景组件的内边距初始化逻辑 - 优化内边距更新函数以支持不同模式
2026-05-15 05:22:13 +08:00 · 2025-09-25 23:09:42 +08:00
parent f0e54f75d4
commit 7df3c67599
6 changed files with 53 additions and 31 deletions
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@@ -22,7 +22,7 @@
            :class="'form-item-' + themes"
          >
            <el-segmented
-              v-model="state.commonBackground.innerPadding2.mode"
+              v-model="state.commonBackground.innerPadding.mode"
              :options="paddingModes"
              size="small"
              style="width: 100%"
@@ -31,55 +31,63 @@
            <el-row :gutter="8">
              <el-col :span="12">
                <div style="display: flex; align-items: center; margin-bottom: 8px">
-                  <span style="width: 20%; padding-right: 8px">顶</span>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.edge_top')
+                  }}</span>
                  <el-input-number
-                    style="width: 80%"
+                    style="width: 70%"
                    :effect="themes"
                    controls-position="right"
                    :min="0"
                    :max="100"
-                    v-model="state.commonBackground.innerPadding2.top"
+                    v-model="state.commonBackground.innerPadding.top"
                    @change="onBackgroundChange"
                  />
                </div>
                <div style="display: flex; align-items: center">
-                  <span style="width: 20%; padding-right: 8px">左</span>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.edge_left')
+                  }}</span>
                  <el-input-number
-                    style="width: 80%"
+                    style="width: 70%"
                    :effect="themes"
                    controls-position="right"
                    :min="0"
                    :max="100"
-                    v-model="state.commonBackground.innerPadding2.left"
-                    :disabled="state.commonBackground.innerPadding2.mode === ShorthandMode.Uniform"
+                    v-model="state.commonBackground.innerPadding.left"
+                    :disabled="state.commonBackground.innerPadding.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: 20%; padding-right: 8px">底</span>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.edge_bottom')
+                  }}</span>
                  <el-input-number
-                    style="width: 80%"
+                    style="width: 70%"
                    :effect="themes"
-                    :disabled="state.commonBackground.innerPadding2.mode !== ShorthandMode.PerEdge"
+                    :disabled="state.commonBackground.innerPadding.mode !== ShorthandMode.PerEdge"
                    controls-position="right"
                    :min="0"
                    :max="100"
-                    v-model="state.commonBackground.innerPadding2.bottom"
+                    v-model="state.commonBackground.innerPadding.bottom"
                    @change="onBackgroundChange"
                  />
                </div>
                <div style="display: flex; align-items: center">
-                  <span style="width: 20%; padding-right: 8px">右</span>
+                  <span style="width: 30%; padding-right: 8px">{{
+                    t('visualization.edge_right')
+                  }}</span>
                  <el-input-number
-                    style="width: 80%"
+                    style="width: 70%"
                    :effect="themes"
-                    :disabled="state.commonBackground.innerPadding2.mode !== ShorthandMode.PerEdge"
+                    :disabled="state.commonBackground.innerPadding.mode !== ShorthandMode.PerEdge"
                    controls-position="right"
                    :min="0"
                    :max="100"
-                    v-model="state.commonBackground.innerPadding2.right"
+                    v-model="state.commonBackground.innerPadding.right"
                    @change="onBackgroundChange"
                  />
                </div>
@@ -340,7 +348,7 @@ import { State, ShorthandMode } from '@/components/visualization/component-backg

 const state = reactive<State>({
  commonBackground: {
-    innerPadding2: {}
+    innerPadding: {}
  },
  BackgroundShowMap: {},
  checked: false,
@@ -388,17 +396,17 @@ const queryBackground = () => {
 const init = () => {
  const commonBackgroundPop = deepCopy(props.commonBackgroundPop)
  const innerPadding = commonBackgroundPop.innerPadding
-  if (typeof innerPadding !== 'undefined') {
-    commonBackgroundPop.innerPadding2 = {
+  if (typeof innerPadding === 'number') {
+    commonBackgroundPop.innerPadding = {
      mode: ShorthandMode.Uniform,
      top: innerPadding,
      right: innerPadding,
      bottom: innerPadding,
      left: innerPadding
    }
-    commonBackgroundPop.innerPadding = undefined
  }
  state.commonBackground = commonBackgroundPop
+  updateInnerPadding()
  if (state.commonBackground.outerImage) {
    state.fileList = [{ url: imgUrlTrans(state.commonBackground.outerImage) }]
  } else {
@@ -429,13 +437,13 @@ const upload = file => {
 }

 const updateInnerPadding = () => {
-  if (state.commonBackground.innerPadding2.mode === ShorthandMode.Uniform) {
-    state.commonBackground.innerPadding2.left = state.commonBackground.innerPadding2.top
-    state.commonBackground.innerPadding2.right = state.commonBackground.innerPadding2.top
-    state.commonBackground.innerPadding2.bottom = state.commonBackground.innerPadding2.top
-  } else if (state.commonBackground.innerPadding2.mode === ShorthandMode.Axis) {
-    state.commonBackground.innerPadding2.right = state.commonBackground.innerPadding2.left
-    state.commonBackground.innerPadding2.bottom = state.commonBackground.innerPadding2.top
+  if (state.commonBackground.innerPadding.mode === ShorthandMode.Uniform) {
+    state.commonBackground.innerPadding.left = state.commonBackground.innerPadding.top
+    state.commonBackground.innerPadding.right = state.commonBackground.innerPadding.top
+    state.commonBackground.innerPadding.bottom = state.commonBackground.innerPadding.top
+  } else if (state.commonBackground.innerPadding.mode === ShorthandMode.Axis) {
+    state.commonBackground.innerPadding.right = state.commonBackground.innerPadding.left
+    state.commonBackground.innerPadding.bottom = state.commonBackground.innerPadding.top
  }
 }

--- a/core/core-frontend/src/components/visualization/component-background/Types.ts
+++ b/core/core-frontend/src/components/visualization/component-background/Types.ts
@@ -30,7 +30,7 @@ export interface EdgeValues {
 }

 export interface CommonBackground {
-  innerPadding?: number
+  innerPadding?: EdgeValues
  borderRadius?: number
  backdropFilterEnable?: boolean
  backdropFilter?: number
@@ -41,7 +41,6 @@ export interface CommonBackground {
  innerImageColor?: string
  innerImage?: string
  outerImage?: string
-  innerPadding2?: EdgeValues
 }

 export interface State {
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -3,7 +3,7 @@ import { deepCopy } from '@/utils/utils'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import { getViewConfig } from '@/views/chart/components/editor/util/chart'
 import { useI18n } from '@/hooks/web/useI18n'
-import { CommonBackground } from '@/components/visualization/component-background/Types'
+import { CommonBackground, ShorthandMode } from '@/components/visualization/component-background/Types'
 const { t } = useI18n()

 export const commonStyle = {
@@ -185,7 +185,10 @@ export const COMMON_COMPONENT_BACKGROUND_BASE: CommonBackground = {
  backgroundType: 'innerImage',
  innerImage: 'board/board_1.svg',
  outerImage: null,
-  innerPadding: 12,
+  innerPadding: {
+    mode: ShorthandMode.Uniform,
+    top: 12
+  },
  borderRadius: 0,
  backdropFilter: 4
 }
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -3388,6 +3388,10 @@ export default {
    inner_padding_shorthand_mode_uniform: 'Uniform',
    inner_padding_shorthand_mode_axis: 'Axis',
    inner_padding_shorthand_mode_per_edge: 'Per Edge',
+    edge_top: 'Top',
+    edge_right: 'Right',
+    edge_bottom: 'Bottom',
+    edge_left: 'Left',
    board_radio: 'Corners',
    web_set_tips: 'Some websites may not allow embedding and will not display.',
    repeat_params: 'Duplicate parameter names exist.',
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -3292,6 +3292,10 @@ export default {
    inner_padding_shorthand_mode_uniform: '統一值',
    inner_padding_shorthand_mode_axis: '軸向',
    inner_padding_shorthand_mode_per_edge: '逐邊',
+    edge_top: '上',
+    edge_right: '右',
+    edge_bottom: '下',
+    edge_left: '左',
    board_radio: '圓角',
    web_set_tips: '部分網站可能設置不允許嵌入而無法顯示',
    repeat_params: '存在名稱重複的參數',
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -3301,6 +3301,10 @@ export default {
    inner_padding_shorthand_mode_uniform: '统一值',
    inner_padding_shorthand_mode_axis: '轴向',
    inner_padding_shorthand_mode_per_edge: '逐边',
+    edge_top: '上',
+    edge_right: '右',
+    edge_bottom: '下',
+    edge_left: '左',
    board_radio: '圆角',
    web_set_tips: '部分网站可能设置不允许嵌入而无法显示',
    repeat_params: '存在名称重复的参数',