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