perf: 去除组件默认滤镜和变换，避免模糊问题

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -70,9 +70,6 @@ const select = computed(() => {
   position: absolute;
   cursor: move;
 
-  // 混合模式
-  mix-blend-mode: screen;
-
   /* 锚点 */
   .shape-point {
     z-index: 1;

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -163,7 +163,6 @@ $asideBottom: 70px;
   align-items: center;
   border-radius: 25px;
   border: 1px solid;
-  mix-blend-mode: luminosity;
   @include fetch-border-color('hover-border-color-shallow');
   &.aside {
     flex-direction: column-reverse;
@@ -248,14 +247,12 @@ $asideBottom: 70px;
           height: 0;
           padding: 5px;
           bottom: $dockMiniBottom;
-          mix-blend-mode: screen;
         }
         100% {
           height: $dockHeight;
           padding: 8px 30px;
           bottom: $dockBottom;
           border-radius: 25px;
-          mix-blend-mode: none;
         }
       }
     }
@@ -268,7 +265,6 @@ $asideBottom: 70px;
       border-radius: 8px;
       cursor: pointer;
       border: 0px;
-      mix-blend-mode: screen;
       animation: dock-mini-in 1s ease forwards;
       @keyframes dock-mini-in {
         0% {
@@ -291,7 +287,6 @@ $asideBottom: 70px;
           height: 0;
           padding: 5px;
           bottom: $dockMiniBottom;
-          mix-blend-mode: screen;
         }
       }
       .btn-item {

src/views/chart/ContentEdit/index.vue

@@ -19,7 +19,7 @@
         <!-- 滤镜预览 -->
         <div
           :style="{
-            ...getFilterStyle(filterShow ? chartEditStore.getEditCanvasConfig : undefined),
+            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
             ...rangeStyle
           }"
         >
@@ -54,7 +54,7 @@
                 :themeColor="themeColor"
                 :style="{
                   ...useSizeStyle(item.attr),
-                  ...getFilterStyle(filterShow ? item.styles : undefined),
+                  ...getFilterStyle(item.styles),
                   ...getTransformStyle(item.styles)
                 }"
               ></component>

src/views/chart/hooks/useSync.hook.ts

@@ -5,6 +5,7 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
+import merge from 'lodash/merge'
 
 // 请求处理
 export const useSync = () => {
@@ -56,19 +57,19 @@ export const useSync = () => {
             let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
             if (callBack) {
               if (changeId) {
-                callBack(Object.assign(newComponent, { ..._componentInstance, id: getUUID() }))
+                callBack(merge(newComponent, { ..._componentInstance, id: getUUID() }))
               } else {
-                callBack(Object.assign(newComponent, _componentInstance))
+                callBack(merge(newComponent, _componentInstance))
               }
             } else {
               if (changeId) {
                 chartEditStore.addComponentList(
-                  Object.assign(newComponent, { ..._componentInstance, id: getUUID() }),
+                  merge(newComponent, { ..._componentInstance, id: getUUID() }),
                   false,
                   true
                 )
               } else {
-                chartEditStore.addComponentList(Object.assign(newComponent, _componentInstance), false, true)
+                chartEditStore.addComponentList(merge(newComponent, _componentInstance), false, true)
               }
             }
           }
@@ -77,9 +78,9 @@ export const useSync = () => {
             // 创建分组
             let groupClass = new PublicGroupConfigClass()
             if (changeId) {
-              groupClass = Object.assign(groupClass, { ...comItem, id: getUUID() })
+              groupClass = merge(groupClass, { ...comItem, id: getUUID() })
             } else {
-              groupClass = Object.assign(groupClass, comItem)
+              groupClass = merge(groupClass, comItem)
             }
 
             // 注册子应用
@@ -100,7 +101,7 @@ export const useSync = () => {
       } else {
         // 非组件(顺便排除脏数据)
         if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
-        Object.assign(chartEditStore[key], projectData[key])
+        merge(chartEditStore[key], projectData[key])
       }
     }
   }

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -49,6 +49,5 @@ const props = defineProps({
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  mix-blend-mode: screen;
 }
 </style>

src/views/preview/components/PreviewRenderList/index.vue

@@ -63,6 +63,5 @@ const themeColor = computed(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  mix-blend-mode: screen;
 }
 </style>

src/views/preview/index.vue

@@ -42,7 +42,7 @@ const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartE
 const previewRefStyle = computed(() => {
   return {
     ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
-    ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)
+    ...getFilterStyle(localStorageInfo.editCanvasConfig)
   }
 })