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

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -6,7 +6,7 @@
 
   <collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
     <template #header>
-      <n-switch v-if="isCanvas" v-model:value="chartStyles.filterShow" size="small"></n-switch>
+      <n-switch v-model:value="chartStyles.filterShow" size="small"></n-switch>
     </template>
     <setting-item-box name="色相" :alone="true">
       <setting-item :name="`值：${chartStyles.hueRotate}deg`">
@@ -126,7 +126,7 @@
     </setting-item-box>
 
     <!-- 提示 -->
-    <n-tag v-show="isCanvas" type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
+    <n-tag type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
   </collapse-item>
 </template>
 

src/packages/components/Informations/Mores/Video/index.vue

@@ -60,7 +60,6 @@ watch(
 <style lang="scss" scoped>
 @include go('video') {
   display: block;
-  mix-blend-mode: screen;
   object-fit: v-bind('option.fit');
   border-radius: v-bind('option.borderRadius');
 }

src/packages/index.d.ts

@@ -83,7 +83,11 @@ export interface PublicConfigType {
     [FilterEnum.SKEW_Y]: number
     // 动画
     animations: string[]
-  }
+  },
+  status: {
+    lock: boolean,
+    hide: boolean,
+  },
   filter?: string
   setPosition: Function
 }

src/packages/public/publicConfig.ts

@@ -45,7 +45,7 @@ export class PublicConfigClass implements PublicConfigType {
   // 基本样式
   public styles = {
     // 使用滤镜
-    filterShow: true,
+    filterShow: false,
     // 色相
     hueRotate: 0,
     // 饱和度
@@ -69,6 +69,11 @@ export class PublicConfigClass implements PublicConfigType {
     // 动画
     animations: []
   }
+  // 状态
+  public status = {
+    lock: false,
+    hide: false
+  }
   // 请求
   public request = cloneDeep(requestConfig)
   // 数据过滤

src/styles/common/format.scss

@@ -8,6 +8,7 @@ body {
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 /* 滚动槽 */
 ::-webkit-scrollbar-track {

src/utils/style.ts

@@ -16,7 +16,7 @@ export const animationsClass = (animations: string[]) => {
 
 // * 滤镜
 export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
-  if(!styles) return {}
+  if(!styles || !styles.filterShow) return {}
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
     opacity: opacity,

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