Merge pull request #13471 from North-CS/pr@dev-v2@feat_support_backdrop_blur

feat: 支持背景模糊/毛玻璃效果

core/core-frontend/src/assets/svg/dv-style-blur.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>模糊修复</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="模糊修复" fill="#BBBFC3" fill-rule="nonzero">
+            <path d="M4.94539535,3.06976745 C3.90986044,3.06976745 3.06976745,3.90883718 3.06976745,4.94539535 L3.06976745,39.0546046 C3.06976745,40.0901396 3.90883718,40.9302326 4.94539535,40.9302326 L39.0546046,40.9302326 C40.0901396,40.9302326 40.9302326,40.0911628 40.9302326,39.0546046 L40.9302326,4.94539535 C40.9302326,3.90986044 40.0911628,3.06976745 39.0546046,3.06976745 L4.94539535,3.06976745 Z M0,4.94539535 C0,2.21412892 2.21412892,0 4.94539535,0 L39.0546046,0 C41.7858711,0 44,2.21412892 44,4.94539535 L44,39.0546046 C44,41.7858711 41.7858711,44 39.0546046,44 L4.94539535,44 C2.21412892,44 0,41.7858711 0,39.0546046 L0,4.94539535 L0,4.94539535 Z" id="形状"></path>
+            <path d="M10,11.4868562 C10,10.6656882 10.6656354,10 11.4867383,10 L33.5132617,10 C34.3343646,10 35,10.6656882 35,11.4868562 L35,33.5131438 C35,34.3343118 34.3343646,35 33.5132617,35 L11.4867383,35 C10.6656354,35 10,34.3343118 10,33.5131438 L10,11.4868562 L10,11.4868562 Z M12.9734765,12.9737123 L12.9734765,32.0262877 L32.0265234,32.0262877 L32.0265234,12.9737123 L12.9734765,12.9737123 Z" id="形状"></path>
+            <path d="M34.5646998,20.3474464 C35.1451,20.9280211 35.1451,21.8691328 34.5646998,22.4497075 L22.4506634,34.5647187 C22.074953,34.9402515 21.5274377,35.0868193 21.0143611,34.9492114 C20.5012846,34.8116035 20.1005953,34.4107259 19.9632291,33.8975852 C19.8258629,33.3844446 19.972689,32.8369991 20.3483993,32.4614663 L32.4624357,20.3474464 C33.0430113,19.7670469 33.9841243,19.7670469 34.5646998,20.3474464 L34.5646998,20.3474464 Z M24.6540264,10.4357952 C25.2344267,11.01637 25.2344267,11.9574817 24.6540264,12.5380565 L12.5380077,24.6530676 C11.9572098,25.233591 11.0157722,25.2333691 10.435248,24.652572 C9.85472385,24.0717749 9.85494572,23.1303387 10.4357436,22.5498153 L22.54978,10.4357952 C22.828627,10.1567699 23.206932,10 23.6014076,10 C23.9958833,10 24.3741883,10.1567699 24.6530352,10.4357952 L24.6540264,10.4357952 Z M34.5646998,10.4357952 C35.1451001,11.01637 35.1451001,11.9574817 34.5646998,12.5380565 L12.5389988,34.5647187 C11.9582009,35.1452421 11.0167634,35.1450202 10.4362392,34.5642231 C9.85571504,33.983426 9.8559369,33.0419897 10.4367348,32.4614663 L32.4624357,10.4357952 C33.0430113,9.85539577 33.9841243,9.85539577 34.5646998,10.4357952 Z" id="形状"></path>
+            <path d="M11.4859238,18.8111098 C11.8802783,18.8111098 12.258481,18.9677602 12.5373316,19.2465999 C12.8161823,19.5254395 12.972839,19.9036272 12.972839,20.297966 L12.972839,32.0262877 L24.7036082,32.0262877 C25.2348319,32.0262876 25.7257028,32.3096808 25.9913146,32.7697157 C26.2569264,33.2297506 26.2569264,33.796537 25.9913146,34.2565719 C25.7257028,34.7166069 25.2348319,35 24.7036082,35 L11.4869151,35 C10.6657146,35 10,34.3343118 10,33.5131438 L10,20.297966 C10,19.9036272 10.1566567,19.5254395 10.4355073,19.2465999 C10.714358,18.9677602 11.0925607,18.8111098 11.4869151,18.8111098 L11.4859238,18.8111098 Z M18.8084853,11.4868562 C18.8084853,11.0925174 18.965142,10.7143297 19.2439927,10.4354901 C19.5228434,10.1566504 19.9010461,10 20.2954005,10 L33.5130849,10 C34.3342854,10 35,10.6656882 35,11.4868562 L35,24.7030253 C35,25.5241932 34.3342854,26.1898814 33.5130849,26.1898814 C32.6918843,26.1898814 32.0261697,25.5241932 32.0261697,24.7030253 L32.0261697,12.9737123 L20.2954005,12.9737123 C19.9010461,12.9737124 19.5228434,12.8170619 19.2439927,12.5382223 C18.965142,12.2593826 18.8084853,11.881195 18.8084853,11.4868562 L18.8084853,11.4868562 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

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 {}

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 {}

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

@@ -53,6 +53,34 @@
         </el-col>
       </el-row>
 
+      <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="state.commonBackground.backdropFilterEnable"
+          @change="onBackgroundChange"
+        >
+          {{ $t('chart.backdrop_blur') }}
+        </el-checkbox>
+      </el-form-item>
+      <div class="indented-container">
+        <div class="indented-item">
+          <el-form-item class="form-item" :class="'form-item-' + themes">
+            <el-input-number
+              style="width: 100%"
+              :effect="themes"
+              controls-position="right"
+              size="middle"
+              :min="0"
+              :max="30"
+              :disabled="!state.commonBackground.backdropFilterEnable"
+              v-model="state.commonBackground.backdropFilter"
+              @change="onBackgroundChange"
+            />
+          </el-form-item>
+        </div>
+      </div>
+
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
         <el-checkbox
           size="small"

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

@@ -96,6 +96,7 @@ watch(
               class="color-picker-style"
               :triggerWidth="65"
               is-custom
+              show-alpha
               :predefine="state.predefineColors"
               @change="changeStylePre('borderColor')"
             >
@@ -135,6 +136,7 @@ watch(
               class="color-picker-style"
               :triggerWidth="65"
               is-custom
+              show-alpha
               :effect="themes"
               :predefine="state.predefineColors"
               @change="changeStylePre('borderColor')"

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
   }
 ]
 

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)'
     }
   },
   {

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: '請選擇配色方案',

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: '请选择配色方案',

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

@@ -297,6 +297,33 @@ initParams()
                 :predefine="COLOR_PANEL"
               />
             </el-form-item>
+
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox
+                size="small"
+                :effect="themes"
+                v-model="commonBackgroundPop.backdropFilterEnable"
+              >
+                {{ $t('chart.backdrop_blur') }}
+              </el-checkbox>
+            </el-form-item>
+            <el-form-item
+              style="padding-left: 20px"
+              class="form-item margin-bottom-8"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                style="width: 100%"
+                :effect="themes"
+                controls-position="right"
+                size="middle"
+                :min="0"
+                :max="30"
+                :disabled="!commonBackgroundPop.backdropFilterEnable"
+                v-model="commonBackgroundPop.backdropFilter"
+              />
+            </el-form-item>
+
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"