feat: 新增滤镜同步变化功能

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

src/views/chart/ContentEdit/index.vue

@@ -14,6 +14,8 @@
     <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
       <!-- 展示 -->
       <edit-range>
+        <!-- 滤镜预览 -->
+        <div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)">
           <!-- 图表 -->
           <edit-shape-box
             v-for="(item, index) in chartEditStore.getComponentList"
@@ -29,13 +31,19 @@
           >
             <component
               class="edit-content-chart"
+              :class="animationsClass(item.styles.animations)"
               :is="item.chartConfig.chartKey"
               :chartConfig="item"
               :themeSetting="themeSetting"
               :themeColor="themeColor"
-            :style="useSizeStyle(item.attr)"
+              :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()