From 87773bb442b7243caa0e11d400a1655ef7b188d4 Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 25 Sep 2025 06:21:09 +0800 Subject: [PATCH] =?UTF-8?q?refactor(component-background):=20=E9=87=8D?= =?UTF-8?q?=E6=9E=84=E5=86=85=E8=BE=B9=E8=B7=9D=E5=A4=84=E7=90=86=E9=80=BB?= =?UTF-8?q?=E8=BE=91=EF=BC=8C=E4=BD=BF=E7=94=A8=E7=BB=9F=E4=B8=80=E7=BB=93?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将分散的内边距属性整合为 InnerPadding 接口，简化状态管理 移除冗余的 paddingMode 属性，统一通过 innerPadding2.mode 控制 添加初始化逻辑处理旧版数据格式 --- .../BackgroundOverallCommon.vue | 55 ++++++++++++------- .../component-background/Types.ts | 15 +++-- .../src/custom-component/component-list.ts | 6 +- 3 files changed, 47 insertions(+), 29 deletions(-) diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue index 81971ed096..c2f5f24112 100644 --- 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" > @@ -50,8 +50,8 @@ controls-position="right" :min="0" :max="100" - v-model="state.commonBackground.innerPaddingLeft" - :disabled="state.commonBackground.paddingMode === PaddingMode.Uniform" + v-model="state.commonBackground.innerPadding2.left" + :disabled="state.commonBackground.innerPadding2.mode === PaddingMode.Uniform" @change="onBackgroundChange" /> @@ -62,11 +62,11 @@ @@ -75,11 +75,11 @@ @@ -339,7 +339,9 @@ const props = withDefaults( import { State, PaddingMode } from '@/components/visualization/component-background/Types' const state = reactive({ - commonBackground: {}, + commonBackground: { + innerPadding2: {} + }, BackgroundShowMap: {}, checked: false, backgroundOrigin: {}, @@ -384,7 +386,19 @@ const queryBackground = () => { } const init = () => { - state.commonBackground = deepCopy(props.commonBackgroundPop) + const commonBackgroundPop = deepCopy(props.commonBackgroundPop) + const innerPadding = commonBackgroundPop.innerPadding + if (innerPadding) { + commonBackgroundPop.innerPadding2 = { + mode: PaddingMode.Uniform, + top: innerPadding, + right: innerPadding, + bottom: innerPadding, + left: innerPadding + } + commonBackgroundPop.innerPadding = undefined + } + state.commonBackground = commonBackgroundPop if (state.commonBackground.outerImage) { state.fileList = [{ url: imgUrlTrans(state.commonBackground.outerImage) }] } else { @@ -414,16 +428,19 @@ const upload = file => { }) } -const onBackgroundChange = () => { - if (state.commonBackground.paddingMode === PaddingMode.Uniform) { - state.commonBackground.innerPaddingLeft = state.commonBackground.innerPadding - state.commonBackground.innerPaddingRight = state.commonBackground.innerPadding - state.commonBackground.innerPaddingBottom = state.commonBackground.innerPadding - } else if (state.commonBackground.paddingMode === PaddingMode.V_H) { - state.commonBackground.innerPaddingRight = - state.commonBackground.innerPaddingLeft ?? state.commonBackground.innerPadding - state.commonBackground.innerPaddingBottom = state.commonBackground.innerPadding +const updateInnerPadding = () => { + if (state.commonBackground.innerPadding2.mode === PaddingMode.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 === PaddingMode.V_H) { + state.commonBackground.innerPadding2.right = state.commonBackground.innerPadding2.left + state.commonBackground.innerPadding2.bottom = state.commonBackground.innerPadding2.top } +} + +const onBackgroundChange = () => { + updateInnerPadding() emits('onBackgroundChange', state.commonBackground) } 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 6685770c41..f1ca8c2ccb 100644 --- a/core/core-frontend/src/components/visualization/component-background/Types.ts +++ b/core/core-frontend/src/components/visualization/component-background/Types.ts @@ -10,11 +10,16 @@ export enum PaddingMode { PerSide = 'per_side' } +export interface InnerPadding { + mode?: PaddingMode + top?: number + right?: number + bottom?: number + left?: number +} + export interface CommonBackground { innerPadding?: number - innerPaddingRight?: number - innerPaddingBottom?: number - innerPaddingLeft?: number borderRadius?: number backdropFilterEnable?: boolean backdropFilter?: number @@ -24,8 +29,8 @@ export interface CommonBackground { backgroundType?: BackgroundType innerImageColor?: string innerImage?: string - outerImage?: string | null - paddingMode?: PaddingMode + outerImage?: string + innerPadding2?: InnerPadding } export interface State { diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 53ddb22a2f..2f47f16fc4 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -189,12 +189,8 @@ export const COMMON_COMPONENT_BACKGROUND_BASE: CommonBackground = { innerImage: 'board/board_1.svg', outerImage: null, innerPadding: 12, - innerPaddingRight: 12, - innerPaddingBottom: 12, - innerPaddingLeft: 12, borderRadius: 0, - backdropFilter: 4, - paddingMode: PaddingMode.Uniform + backdropFilter: 4 } export const COMMON_COMPONENT_BACKGROUND_LIGHT = {