From d7bc1b6d5cc6d4a4e346d9931b9535b4180a682a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 26 Sep 2022 19:40:46 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8E=BB=E9=99=A4=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=BB=A4=E9=95=9C=E5=92=8C=E5=8F=98=E6=8D=A2?=
 =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E6=A8=A1=E7=B3=8A=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/ChartItemSetting/StylesSetting.vue      |  4 ++--
 .../components/Informations/Mores/Video/index.vue |  1 -
 src/packages/index.d.ts                           |  6 +++++-
 src/packages/public/publicConfig.ts               |  7 ++++++-
 src/styles/common/format.scss                     |  1 +
 src/utils/style.ts                                |  2 +-
 .../ContentEdit/components/EditShapeBox/index.vue |  3 ---
 .../ContentEdit/components/EditTools/index.vue    |  5 -----
 src/views/chart/ContentEdit/index.vue             |  4 ++--
 src/views/chart/hooks/useSync.hook.ts             | 15 ++++++++-------
 .../components/PreviewRenderGroup/index.vue       |  1 -
 .../components/PreviewRenderList/index.vue        |  1 -
 src/views/preview/index.vue                       |  2 +-
 13 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/StylesSetting.vue b/src/components/Pages/ChartItemSetting/StylesSetting.vue
index bf63eab8..424efb70 100644
--- a/src/components/Pages/ChartItemSetting/StylesSetting.vue
+++ b/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>
 
diff --git a/src/packages/components/Informations/Mores/Video/index.vue b/src/packages/components/Informations/Mores/Video/index.vue
index e62bc709..e5d602ff 100644
--- a/src/packages/components/Informations/Mores/Video/index.vue
+++ b/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');
 }
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 04931c06..e7d8cdf4 100644
--- a/src/packages/index.d.ts
+++ b/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
 }
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 2c59131e..2657c600 100644
--- a/src/packages/public/publicConfig.ts
+++ b/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)
   // 数据过滤
diff --git a/src/styles/common/format.scss b/src/styles/common/format.scss
index 30163c51..8fefec95 100644
--- a/src/styles/common/format.scss
+++ b/src/styles/common/format.scss
@@ -8,6 +8,7 @@ body {
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 /* 滚动槽 */
 ::-webkit-scrollbar-track {
diff --git a/src/utils/style.ts b/src/utils/style.ts
index d8bc200c..be74ef00 100644
--- a/src/utils/style.ts
+++ b/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,
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index 93450fed..b7b3bd65 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/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;
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index b14dd6d9..a510d4e9 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/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 {
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 9043444d..2f6d9cc3 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/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>
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index a448f0e7..bfa7400d 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/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])
       }
     }
   }
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index f3ae9ac7..d5bdf767 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/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>
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 9094dba0..c943be66 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/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>
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 75431eb7..fbe74eca 100644
--- a/src/views/preview/index.vue
+++ b/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)
   }
 })