From ab93fa0adf8ab0d4e4400f1e17194ae4381eb486 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:29:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=90=E5=8F=96=E6=BB=A4=E9=95=9C?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=98=E6=8D=A2=EF=BC=8C=E5=8A=A8=E7=94=BB=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E5=88=B0=E5=85=A8=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/style.ts                            | 33 ++++++++++++++++++-
 .../components/PreviewRenderList/index.vue    |  4 +--
 src/views/preview/index.vue                   |  3 +-
 src/views/preview/utils/style.ts              | 26 ---------------
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/utils/style.ts b/src/utils/style.ts
index c206c45f..89453eaa 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -1,5 +1,36 @@
-import { useDesignStore } from '@/store/modules/designStore/designStore'
 import Color from 'color'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { PickCreateComponentType } from '@/packages/index.d'
+import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+type AttrType = PickCreateComponentType<'attr'>
+type StylesType = PickCreateComponentType<'styles'>
+
+// 动画
+export const animationsClass = (animations: string[]) => {
+  if (animations.length) {
+    return `animate__animated  animate__${animations[0]}`
+  }
+  return ''
+}
+
+// 滤镜
+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})`,
+  }
+}
+
+// 变换
+export const getTranstormStyle = (styles: StylesType) => {
+  const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
+  return {
+    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`,
+  }
+}
 
 /**
  * * hsla 转换 
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 88714162..bf48fe2b 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -24,8 +24,8 @@
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { getSizeStyle, getFilterStyle, getTranstormStyle, getComponentAttrStyle, animationsClass } from '../../utils'
-
+import { animationsClass, getFilterStyle, getTranstormStyle } from '@/utils'
+import { getSizeStyle, getComponentAttrStyle } from '../../utils'
 
 const props = defineProps({
   localStorageInfo: {
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 951bd415..70ba9c3a 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -16,7 +16,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
-import { getEditCanvasConfigStyle, getFilterStyle, getSessionStorageInfo } from './utils'
+import { getFilterStyle } from '@/utils'
+import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts
index f9d17000..1ae54448 100644
--- a/src/views/preview/utils/style.ts
+++ b/src/views/preview/utils/style.ts
@@ -37,29 +37,3 @@ export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
     ...computedBackground
   }
 }
-
-// 动画
-export const animationsClass = (animations: string[]) => {
-  if (animations.length) {
-    return `animate__animated  animate__${animations[0]}`
-  }
-  return ''
-}
-
-// 滤镜
-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})`,
-  }
-}
-
-// 变换
-export const getTranstormStyle = (styles: StylesType) => {
-  const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
-  return {
-    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`,
-  }
-}