fix: 预览页改成hook写法

src/views/preview/components/PreviewRenderList/index.vue

@@ -4,7 +4,7 @@
     :class="animationsClass(item.styles.animations)"
     v-for="(item, index) in localStorageInfo.componentList"
     :key="item.id"
-    :style="{ ...useComponentAttrStyle(item.attr, index), ...useSizeStyle(item.attr), ...useStyle(item.styles)}"
+    :style="{ ...getComponentAttrStyle(item.attr, index), ...getSizeStyle(item.attr), ...getStyle(item.styles)}"
   >
     <component
       :is="item.chartConfig.chartKey"
@@ -19,7 +19,7 @@
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { useSizeStyle, useStyle, useComponentAttrStyle, animationsClass } from '../../utils'
+import { getSizeStyle, getStyle, getComponentAttrStyle, animationsClass } from '../../utils'
 
 const props = defineProps({
   localStorageInfo: {

src/views/preview/hooks/useComInstall.hook.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import { ChartEditStorageType } from '../index.d'
+import { CreateComponentType } from '@/packages/index.d'
+import { fetchChartComponent } from '@/packages/index'
+
+export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
+  const show = ref(false)
+
+  // 注册组件(一开始无法获取window['$vue'])
+  const intervalTiming = setInterval(() => {
+    if (window['$vue'].component) {
+      clearInterval(intervalTiming)
+      show.value = true
+      localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
+        if (!window['$vue'].component(e.chartConfig.chartKey)) {
+          window['$vue'].component(
+            e.chartConfig.chartKey,
+            fetchChartComponent(e.chartConfig)
+          )
+        }
+      })
+    }
+  }, 200)
+
+  return {
+    show
+  }
+}

src/views/preview/hooks/useScale.hook.ts

@@ -0,0 +1,31 @@
+import { onUnmounted, ref, nextTick, computed } from 'vue'
+import { usePreviewScale } from '@/hooks/index'
+import type { ChartEditStorageType } from '..'
+
+export const useScale = (localStorageInfo: ChartEditStorageType) => {
+
+  const previewRef = ref()
+
+  const width = ref(localStorageInfo?.editCanvasConfig.width)
+  const height = ref(localStorageInfo?.editCanvasConfig.height)
+
+  // 屏幕适配
+  nextTick(() => {
+    const { calcRate, windowResize, unWindowResize } = usePreviewScale(
+      width.value as number,
+      height.value as number,
+      previewRef.value
+    )
+
+    calcRate()
+    windowResize()
+
+    onUnmounted(() => {
+      unWindowResize()
+    })
+  })
+
+  return {
+    previewRef
+  }
+}

src/views/preview/index.vue

@@ -5,64 +5,30 @@
       <!-- 展示层 -->
       <div :style="previewRefStyle" v-if="show">
         <!-- 渲染层 -->
-        <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
+        <preview-render-list
+          :localStorageInfo="localStorageInfo"
+        ></preview-render-list>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref, nextTick, computed } from 'vue'
+import { computed } from 'vue'
-import { usePreviewScale } from '@/hooks/index'
+import { PreviewRenderList } from './components/PreviewRenderList'
-import { PreviewRenderList } from './components/PreviewRenderList/index'
+import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
-import { ChartEditStorageType } from './index.d'
+import { useComInstall } from './hooks/useComInstall.hook'
-import { useEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+import { useScale } from './hooks/useScale.hook'
-import { CreateComponentType } from '@/packages/index.d'
+import type { ChartEditStorageType } from './index.d'
-import { fetchChartComponent } from '@/packages/index'
-
-const previewRef = ref()
 
 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
 
-const width = ref(localStorageInfo?.editCanvasConfig.width)
-const height = ref(localStorageInfo?.editCanvasConfig.height)
-const show = ref(false)
-
 const previewRefStyle: any = computed(() => {
-  return useEditCanvasConfigStyle(localStorageInfo.editCanvasConfig)
+  return getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig)
 })
 
-// 注册组件(一开始无法获取window['$vue'])
+const { previewRef } = useScale(localStorageInfo)
-const intervalTiming = setInterval(() => {
+const { show } = useComInstall(localStorageInfo)
-  if (window['$vue'].component) {
-    clearInterval(intervalTiming)
-    show.value = true
-    localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
-      if (!window['$vue'].component(e.chartConfig.chartKey)) {
-        window['$vue'].component(
-          e.chartConfig.chartKey,
-          fetchChartComponent(e.chartConfig)
-        )
-      }
-    })
-  }
-}, 200)
-
-// 屏幕适配
-nextTick(() => {
-  const { calcRate, windowResize, unWindowResize } = usePreviewScale(
-    width.value as number,
-    height.value as number,
-    previewRef.value
-  )
-
-  calcRate()
-  windowResize()
-
-  onUnmounted(() => {
-    unWindowResize()
-  })
-})
 </script>
 
 <style lang="scss" scoped>

src/views/preview/utils/style.ts

@@ -4,7 +4,7 @@ import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditSt
 type AttrType = PickCreateComponentType<'attr'>
 type StylesType = PickCreateComponentType<'styles'>
 
-export const useComponentAttrStyle = (attr: AttrType, index: number) => {
+export const getComponentAttrStyle = (attr: AttrType, index: number) => {
   const componentStyle = {
     zIndex: index + 1,
     left: `${attr.x}px`,
@@ -13,7 +13,7 @@ export const useComponentAttrStyle = (attr: AttrType, index: number) => {
   return componentStyle
 }
 
-export const useSizeStyle = (attr: AttrType, scale?: number) => {
+export const getSizeStyle = (attr: AttrType, scale?: number) => {
   const sizeStyle = {
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`
@@ -21,7 +21,7 @@ export const useSizeStyle = (attr: AttrType, scale?: number) => {
   return sizeStyle
 }
 
-export const useEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
+export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
   // 背景
   const computedBackground = canvas.selectColor
     ? { background: canvas.background }
@@ -44,7 +44,7 @@ export const animationsClass = (animations: string[]) => {
   return ''
 }
 
-export const useStyle = (styles: StylesType) => {
+export const getStyle = (styles: StylesType) => {
   return {
     // 透明度
     opacity: styles.opacity