From f668a2b892e2592dfad33d93933e09065f76fc2c 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: Tue, 3 May 2022 16:43:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=BB=A4=E9=95=9C?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=8F=98=E5=8C=96=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/style.ts                    |  1 -
 src/views/chart/ContentEdit/index.vue | 70 +++++++++++++++------------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/utils/style.ts b/src/utils/style.ts
index 89453eaa..1d7a4a84 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -18,7 +18,6 @@ export const animationsClass = (animations: string[]) => {
 export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
-    // 透明度
     opacity: opacity,
     filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`,
   }
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 295776ec..faeed373 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -14,28 +14,36 @@
     <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
       <!-- 展示 -->
       <edit-range>
-        <!-- 图表 -->
-        <edit-shape-box
-          v-for="(item, index) in chartEditStore.getComponentList"
-          :key="item.id"
-          :data-id="item.id"
-          :index="index"
-          :style="useComponentStyle(item.attr, index)"
-          :item="item"
-          @mousedown="mousedownHandle($event, item)"
-          @mouseenter="mouseenterHandle($event, item)"
-          @mouseleave="mouseleaveHandle($event, item)"
-          @contextmenu="handleContextMenu($event, item)"
-        >
-          <component
-            class="edit-content-chart"
-            :is="item.chartConfig.chartKey"
-            :chartConfig="item"
-            :themeSetting="themeSetting"
-            :themeColor="themeColor"
-            :style="useSizeStyle(item.attr)"
-          ></component>
-        </edit-shape-box>
+        <!-- 滤镜预览 -->
+        <div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)">
+          <!-- 图表 -->
+          <edit-shape-box
+            v-for="(item, index) in chartEditStore.getComponentList"
+            :key="item.id"
+            :data-id="item.id"
+            :index="index"
+            :style="useComponentStyle(item.attr, index)"
+            :item="item"
+            @mousedown="mousedownHandle($event, item)"
+            @mouseenter="mouseenterHandle($event, item)"
+            @mouseleave="mouseleaveHandle($event, item)"
+            @contextmenu="handleContextMenu($event, item)"
+          >
+            <component
+              class="edit-content-chart"
+              :class="animationsClass(item.styles.animations)"
+              :is="item.chartConfig.chartKey"
+              :chartConfig="item"
+              :themeSetting="themeSetting"
+              :themeColor="themeColor"
+              :style="{
+                ...useSizeStyle(item.attr),
+                ...getFilterStyle(item.styles),
+                ...getTranstormStyle(item.styles),
+              }"
+            ></component>
+          </edit-shape-box>
+        </div>
       </edit-range>
     </div>
 
@@ -53,20 +61,22 @@
 
 <script lang="ts" setup>
 import { onMounted, computed } from 'vue'
+import { chartColors } from '@/settings/chartThemes/index'
+import { animationsClass, getFilterStyle, getTranstormStyle } from '@/utils'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+import { useLayout } from './hooks/useLayout.hook'
+import { useAddKeyboard } from '../hooks/useKeyboard.hook'
+import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
+import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
+
 import { ContentBox } from '../contentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
 
-import { useLayout } from './hooks/useLayout.hook'
-import { useAddKeyboard } from '../hooks/useKeyboard.hook'
-import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
-import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
-import { chartColors } from '@/settings/chartThemes/index'
-
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()