diff --git a/core/core-frontend/src/assets/svg/dv-style-blur.svg b/core/core-frontend/src/assets/svg/dv-style-blur.svg new file mode 100644 index 0000000000..7acdb456b8 --- /dev/null +++ b/core/core-frontend/src/assets/svg/dv-style-blur.svg @@ -0,0 +1,12 @@ + + + 模糊修复 + + + + + + + + + diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue index 97f14630fe..4fc82cdac1 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue @@ -196,6 +196,8 @@ const onMouseEnter = () => { const componentBackgroundStyle = computed(() => { if (config.value.commonBackground) { const { + backdropFilterEnable, + backdropFilter, backgroundColorSelect, backgroundColor, backgroundImageEnable, @@ -243,6 +245,9 @@ const componentBackgroundStyle = computed(() => { if (config.value.component !== 'UserView') { style['overflow'] = 'hidden' } + if (backdropFilterEnable) { + style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)' + } return style } return {} 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 36ada2785b..eb8e840b42 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -881,6 +881,8 @@ const padding3D = computed(() => { const componentBackgroundStyle = computed(() => { if (element.value.commonBackground && element.value.component !== 'GroupArea') { const { + backdropFilterEnable, + backdropFilter, backgroundColorSelect, backgroundColor, backgroundImageEnable, @@ -931,6 +933,9 @@ const componentBackgroundStyle = computed(() => { if (element.value.component !== 'UserView') { style['overflow'] = 'hidden' } + if (backdropFilterEnable) { + style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)' + } return style } return {} 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 cd024dff68..ed16dcce4e 100644 --- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue +++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue @@ -53,6 +53,34 @@ + + + {{ $t('chart.backdrop_blur') }} + + +
+
+ + + +
+
+ @@ -135,6 +136,7 @@ watch( class="color-picker-style" :triggerWidth="65" is-custom + show-alpha :effect="themes" :predefine="state.predefineColors" @change="changeStylePre('borderColor')" diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue index 698f79a27b..8d55af9e87 100644 --- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue +++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue @@ -57,6 +57,7 @@ :prefix-icon="styleColorKey.icon" :triggerWidth="styleColorKey.width" is-custom + show-alpha :predefine="state.predefineColors" @change=" changeStyle({ key: styleColorKey.value, value: styleForm[styleColorKey.value] }) @@ -291,6 +292,7 @@ import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg' import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg' import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg' import dvStyleTabHead from '@/assets/svg/dv-style-tab-head.svg' +import dvStyleBlur from '@/assets/svg/dv-style-blur.svg' import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg' import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg' import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg' @@ -371,6 +373,39 @@ const opacitySizeList = [ { name: '0.9', value: 0.9 }, { name: '1', value: 1 } ] +const backdropBlurList = [ + { name: '0', value: 'blur(0px)' }, + { name: '1', value: 'blur(1px)' }, + { name: '2', value: 'blur(2px)' }, + { name: '3', value: 'blur(3px)' }, + { name: '4', value: 'blur(4px)' }, + { name: '5', value: 'blur(5px)' }, + { name: '6', value: 'blur(6px)' }, + { name: '7', value: 'blur(7px)' }, + { name: '8', value: 'blur(8px)' }, + { name: '9', value: 'blur(9px)' }, + { name: '10', value: 'blur(10px)' }, + { name: '11', value: 'blur(11px)' }, + { name: '12', value: 'blur(12px)' }, + { name: '13', value: 'blur(13px)' }, + { name: '14', value: 'blur(14px)' }, + { name: '15', value: 'blur(15px)' }, + { name: '16', value: 'blur(16px)' }, + { name: '17', value: 'blur(17px)' }, + { name: '18', value: 'blur(18px)' }, + { name: '19', value: 'blur(19px)' }, + { name: '20', value: 'blur(20px)' }, + { name: '21', value: 'blur(21px)' }, + { name: '22', value: 'blur(22px)' }, + { name: '23', value: 'blur(23px)' }, + { name: '24', value: 'blur(24px)' }, + { name: '25', value: 'blur(25px)' }, + { name: '26', value: 'blur(26px)' }, + { name: '27', value: 'blur(27px)' }, + { name: '28', value: 'blur(28px)' }, + { name: '29', value: 'blur(29px)' }, + { name: '30', value: 'blur(30px)' } +] const titleHideList = [ { name: '隐藏', value: true }, @@ -479,6 +514,13 @@ const styleOptionKeyArray = [ customOption: titleHideList, width: '90px', icon: dvStyleTabHead + }, + { + value: 'backdropFilter', + label: '背景模糊', + customOption: backdropBlurList, + width: '90px', + icon: dvStyleBlur } ] diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 4c7ea25264..748b692b4a 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -177,12 +177,14 @@ export const MULTI_DIMENSIONAL = { export const COMMON_COMPONENT_BACKGROUND_BASE = { backgroundColorSelect: true, + backdropFilterEnable: false, backgroundImageEnable: false, backgroundType: 'innerImage', innerImage: 'board/board_1.svg', outerImage: null, innerPadding: 12, - borderRadius: 0 + borderRadius: 0, + backdropFilter: 4 } export const COMMON_COMPONENT_BACKGROUND_LIGHT = { @@ -455,7 +457,8 @@ const list = [ style: { width: 40, height: 40, - color: '' + color: '', + backdropFilter: 'blur(0px)' } }, { @@ -474,7 +477,8 @@ const list = [ style: { width: 600, height: 300, - color: 'rgb(255, 255, 255,1)' + color: 'rgb(255, 255, 255,1)', + backdropFilter: 'blur(0px)' } }, { @@ -487,7 +491,8 @@ const list = [ width: 200, height: 200, backgroundColor: 'rgba(236,231,231,0.1)', - borderActive: true + borderActive: true, + backdropFilter: 'blur(0px)' } }, { @@ -502,7 +507,8 @@ const list = [ borderWidth: 1, borderStyle: 'solid', borderColor: '#cccccc', - backgroundColor: 'rgba(236,231,231,0.1)' + backgroundColor: 'rgba(236,231,231,0.1)', + backdropFilter: 'blur(0px)' } }, { @@ -516,7 +522,8 @@ const list = [ height: 200, borderWidth: 1, borderColor: '#cccccc', - backgroundColor: 'rgba(236,231,231,0.1)' + backgroundColor: 'rgba(236,231,231,0.1)', + backdropFilter: 'blur(0px)' } }, { diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index 66f2f802a6..1fc7656859 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/core/core-frontend/src/locales/tw.ts @@ -1231,6 +1231,7 @@ export default { quick_calc: '快速計算', show_name_set: '編輯顯示名稱', show_name: '顯示名稱', + backdrop_blur: '背景模糊', color: '顏色', color_case: '配色方案', pls_slc_color_case: '請選擇配色方案', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index e427f8195e..fa952efc54 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -1244,6 +1244,7 @@ export default { quick_calc: '快速计算', show_name_set: '编辑显示名称', show_name: '显示名称', + backdrop_blur: '背景模糊', color: '颜色', color_case: '配色方案', pls_slc_color_case: '请选择配色方案', diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue index e6641a4ed9..7f3dbd1cda 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue @@ -297,6 +297,33 @@ initParams() :predefine="COLOR_PANEL" /> + + + + {{ $t('chart.backdrop_blur') }} + + + + + +