Skip to content

Commit 9080c0b

Browse files
author
liubo
committed
feat: 支持背景模糊/毛玻璃效果
1 parent 3563dcf commit 9080c0b

File tree

9 files changed

+124
-6
lines changed

9 files changed

+124
-6
lines changed

‎core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,8 @@ const onMouseEnter = () => {
196196
const componentBackgroundStyle = computed(() => {
197197
if (config.value.commonBackground) {
198198
const {
199+
backdropFilterEnable,
200+
backdropFilter,
199201
backgroundColorSelect,
200202
backgroundColor,
201203
backgroundImageEnable,
@@ -243,6 +245,9 @@ const componentBackgroundStyle = computed(() => {
243245
if (config.value.component !== 'UserView') {
244246
style['overflow'] = 'hidden'
245247
}
248+
if (backdropFilterEnable) {
249+
style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
250+
}
246251
return style
247252
}
248253
return {}

‎core/core-frontend/src/components/data-visualization/canvas/Shape.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -881,6 +881,8 @@ const padding3D = computed(() => {
881881
const componentBackgroundStyle = computed(() => {
882882
if (element.value.commonBackground && element.value.component !== 'GroupArea') {
883883
const {
884+
backdropFilterEnable,
885+
backdropFilter,
884886
backgroundColorSelect,
885887
backgroundColor,
886888
backgroundImageEnable,
@@ -931,6 +933,9 @@ const componentBackgroundStyle = computed(() => {
931933
if (element.value.component !== 'UserView') {
932934
style['overflow'] = 'hidden'
933935
}
936+
if (backdropFilterEnable) {
937+
style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
938+
}
934939
return style
935940
}
936941
return {}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,34 @@
5353
</el-col>
5454
</el-row>
5555

56+
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
57+
<el-checkbox
58+
size="small"
59+
:effect="themes"
60+
v-model="state.commonBackground.backdropFilterEnable"
61+
@change="onBackgroundChange"
62+
>
63+
{{ $t('chart.backdrop_blur') }}
64+
</el-checkbox>
65+
</el-form-item>
66+
<div class="indented-container">
67+
<div class="indented-item">
68+
<el-form-item class="form-item" :class="'form-item-' + themes">
69+
<el-input-number
70+
style="width: 100%"
71+
:effect="themes"
72+
controls-position="right"
73+
size="middle"
74+
:min="0"
75+
:max="30"
76+
:disabled="!state.commonBackground.backdropFilterEnable"
77+
v-model="state.commonBackground.backdropFilter"
78+
@change="onBackgroundChange"
79+
/>
80+
</el-form-item>
81+
</div>
82+
</div>
83+
5684
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
5785
<el-checkbox
5886
size="small"

‎core/core-frontend/src/custom-component/common/CommonBorderSetting.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ watch(
9696
class="color-picker-style"
9797
:triggerWidth="65"
9898
is-custom
99+
show-alpha
99100
:predefine="state.predefineColors"
100101
@change="changeStylePre('borderColor')"
101102
>
@@ -135,6 +136,7 @@ watch(
135136
class="color-picker-style"
136137
:triggerWidth="65"
137138
is-custom
139+
show-alpha
138140
:effect="themes"
139141
:predefine="state.predefineColors"
140142
@change="changeStylePre('borderColor')"

‎core/core-frontend/src/custom-component/common/CommonStyleSet.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
:prefix-icon="styleColorKey.icon"
5858
:triggerWidth="styleColorKey.width"
5959
is-custom
60+
show-alpha
6061
:predefine="state.predefineColors"
6162
@change="
6263
changeStyle({ key: styleColorKey.value, value: styleForm[styleColorKey.value] })
@@ -291,6 +292,7 @@ import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg'
291292
import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
292293
import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
293294
import dvStyleTabHead from '@/assets/svg/dv-style-tab-head.svg'
295+
import dvStyleBlur from '@/assets/svg/dv-style-blur.svg'
294296
import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
295297
import dvStyleLetterSpacing from '@/assets/svg/dv-style-letterSpacing.svg'
296298
import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
@@ -371,6 +373,39 @@ const opacitySizeList = [
371373
{ name: '0.9', value: 0.9 },
372374
{ name: '1', value: 1 }
373375
]
376+
const backdropBlurList = [
377+
{ name: '0', value: 'blur(0px)' },
378+
{ name: '1', value: 'blur(1px)' },
379+
{ name: '2', value: 'blur(2px)' },
380+
{ name: '3', value: 'blur(3px)' },
381+
{ name: '4', value: 'blur(4px)' },
382+
{ name: '5', value: 'blur(5px)' },
383+
{ name: '6', value: 'blur(6px)' },
384+
{ name: '7', value: 'blur(7px)' },
385+
{ name: '8', value: 'blur(8px)' },
386+
{ name: '9', value: 'blur(9px)' },
387+
{ name: '10', value: 'blur(10px)' },
388+
{ name: '11', value: 'blur(11px)' },
389+
{ name: '12', value: 'blur(12px)' },
390+
{ name: '13', value: 'blur(13px)' },
391+
{ name: '14', value: 'blur(14px)' },
392+
{ name: '15', value: 'blur(15px)' },
393+
{ name: '16', value: 'blur(16px)' },
394+
{ name: '17', value: 'blur(17px)' },
395+
{ name: '18', value: 'blur(18px)' },
396+
{ name: '19', value: 'blur(19px)' },
397+
{ name: '20', value: 'blur(20px)' },
398+
{ name: '21', value: 'blur(21px)' },
399+
{ name: '22', value: 'blur(22px)' },
400+
{ name: '23', value: 'blur(23px)' },
401+
{ name: '24', value: 'blur(24px)' },
402+
{ name: '25', value: 'blur(25px)' },
403+
{ name: '26', value: 'blur(26px)' },
404+
{ name: '27', value: 'blur(27px)' },
405+
{ name: '28', value: 'blur(28px)' },
406+
{ name: '29', value: 'blur(29px)' },
407+
{ name: '30', value: 'blur(30px)' }
408+
]
374409
375410
const titleHideList = [
376411
{ name: '隐藏', value: true },
@@ -479,6 +514,13 @@ const styleOptionKeyArray = [
479514
customOption: titleHideList,
480515
width: '90px',
481516
icon: dvStyleTabHead
517+
},
518+
{
519+
value: 'backdropFilter',
520+
label: '背景模糊',
521+
customOption: backdropBlurList,
522+
width: '90px',
523+
icon: dvStyleBlur
482524
}
483525
]
484526

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,14 @@ export const MULTI_DIMENSIONAL = {
177177

178178
export const COMMON_COMPONENT_BACKGROUND_BASE = {
179179
backgroundColorSelect: true,
180+
backdropFilterEnable: false,
180181
backgroundImageEnable: false,
181182
backgroundType: 'innerImage',
182183
innerImage: 'board/board_1.svg',
183184
outerImage: null,
184185
innerPadding: 12,
185-
borderRadius: 0
186+
borderRadius: 0,
187+
backdropFilter: 4
186188
}
187189

188190
export const COMMON_COMPONENT_BACKGROUND_LIGHT = {
@@ -455,7 +457,8 @@ const list = [
455457
style: {
456458
width: 40,
457459
height: 40,
458-
color: ''
460+
color: '',
461+
backdropFilter: 'blur(0px)'
459462
}
460463
},
461464
{
@@ -474,7 +477,8 @@ const list = [
474477
style: {
475478
width: 600,
476479
height: 300,
477-
color: 'rgb(255, 255, 255,1)'
480+
color: 'rgb(255, 255, 255,1)',
481+
backdropFilter: 'blur(0px)'
478482
}
479483
},
480484
{
@@ -487,7 +491,8 @@ const list = [
487491
width: 200,
488492
height: 200,
489493
backgroundColor: 'rgba(236,231,231,0.1)',
490-
borderActive: true
494+
borderActive: true,
495+
backdropFilter: 'blur(0px)'
491496
}
492497
},
493498
{
@@ -502,7 +507,8 @@ const list = [
502507
borderWidth: 1,
503508
borderStyle: 'solid',
504509
borderColor: '#cccccc',
505-
backgroundColor: 'rgba(236,231,231,0.1)'
510+
backgroundColor: 'rgba(236,231,231,0.1)',
511+
backdropFilter: 'blur(0px)'
506512
}
507513
},
508514
{
@@ -516,7 +522,8 @@ const list = [
516522
height: 200,
517523
borderWidth: 1,
518524
borderColor: '#cccccc',
519-
backgroundColor: 'rgba(236,231,231,0.1)'
525+
backgroundColor: 'rgba(236,231,231,0.1)',
526+
backdropFilter: 'blur(0px)'
520527
}
521528
},
522529
{

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1231,6 +1231,7 @@ export default {
12311231
quick_calc: '快速計算',
12321232
show_name_set: '編輯顯示名稱',
12331233
show_name: '顯示名稱',
1234+
backdrop_blur: '背景模糊',
12341235
color: '顏色',
12351236
color_case: '配色方案',
12361237
pls_slc_color_case: '請選擇配色方案',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1244,6 +1244,7 @@ export default {
12441244
quick_calc: '快速计算',
12451245
show_name_set: '编辑显示名称',
12461246
show_name: '显示名称',
1247+
backdrop_blur: '背景模糊',
12471248
color: '颜色',
12481249
color_case: '配色方案',
12491250
pls_slc_color_case: '请选择配色方案',

‎core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,33 @@ initParams()
297297
:predefine="COLOR_PANEL"
298298
/>
299299
</el-form-item>
300+
301+
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
302+
<el-checkbox
303+
size="small"
304+
:effect="themes"
305+
v-model="commonBackgroundPop.backdropFilterEnable"
306+
>
307+
{{ $t('chart.backdrop_blur') }}
308+
</el-checkbox>
309+
</el-form-item>
310+
<el-form-item
311+
style="padding-left: 20px"
312+
class="form-item margin-bottom-8"
313+
:class="'form-item-' + themes"
314+
>
315+
<el-input-number
316+
style="width: 100%"
317+
:effect="themes"
318+
controls-position="right"
319+
size="middle"
320+
:min="0"
321+
:max="30"
322+
:disabled="!commonBackgroundPop.backdropFilterEnable"
323+
v-model="commonBackgroundPop.backdropFilter"
324+
/>
325+
</el-form-item>
326+
300327
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
301328
<el-checkbox
302329
:effect="themes"

0 commit comments

Comments
 (0)