From 8fa1978748c4489f77dd2b5560a627155ab4b813 Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 25 Sep 2025 08:44:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(component-background):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=AF=B9=E7=8B=AC=E7=AB=8B=E5=9C=86=E8=A7=92=E5=8D=8A?= =?UTF-8?q?=E5=BE=84=E7=9A=84=E6=8E=A7=E5=88=B6=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 实现组件背景圆角的独立控制功能，允许分别设置四个角的半径值。新增 CornerValues 接口和 borderRadius2 属性，并在 UI 中提供三种模式（统一、对称、独立）的配置选项。同时更新 Shape.vue 组件以支持新的圆角渲染逻辑。 修改包括： 1. 在 Types.ts 中新增 CornerValues 接口 2. 在 BackgroundOverallCommon.vue 中实现圆角配置界面 3. 在 Shape.vue 中更新圆角样式计算逻辑 --- core/core-frontend/src/Types.ts | 8 ++ .../data-visualization/canvas/Shape.vue | 18 +++- .../BackgroundOverallCommon.vue | 96 +++++++++++++++++-- .../component-background/Types.ts | 1 + 4 files changed, 114 insertions(+), 9 deletions(-) diff --git a/core/core-frontend/src/Types.ts b/core/core-frontend/src/Types.ts index a2ccd0d949..7d2b5eeaf6 100644 --- a/core/core-frontend/src/Types.ts +++ b/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 +} diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index e09d3e65f4..a76b661d8d 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/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) { 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 df5cd53f6d..88fad5375e 100644 --- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue +++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue @@ -110,21 +110,76 @@ - + - + + +
+ 左上 + +
+
+ 左下 + +
+ + +
+ 右上 + +
+
+ 右下 + +
+ + @@ -362,7 +417,8 @@ import { ShorthandMode } from '@/Types' const state = reactive({ 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) } 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 9f22a127ce..36dda623db 100644 --- a/core/core-frontend/src/components/visualization/component-background/Types.ts +++ b/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 {