feat: 新增预览页缩放功能

src/hooks/index.ts

@@ -1 +1,2 @@
-export * from '@/hooks/themeHook'
+export * from '@/hooks/theme.hook'
+export * from '@/hooks/previewScale.hook'

src/hooks/previewScale.hook.ts

@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import throttle from 'lodash/throttle'
+
+export const usePreviewScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null
+) => {
+  // * 指向最外层容器（没生效不知道为啥）
+  const appRef = ref()
+
+  // * 屏幕尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    width: '1',
+    height: '1',
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    // 当前宽高比
+    const currentRate = parseFloat(
+      (window.innerWidth / window.innerHeight).toFixed(5)
+    )
+    if (scaleDom) {
+      if (currentRate > baseProportion) {
+        // 表示更宽
+        scale.width = (
+          (window.innerHeight * baseProportion) /
+          baseWidth
+        ).toFixed(5)
+        scale.height = (window.innerHeight / baseHeight).toFixed(5)
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+      } else {
+        // 表示更高
+        scale.height = (
+          window.innerWidth /
+          baseProportion /
+          baseHeight
+        ).toFixed(5)
+        scale.width = (window.innerWidth / baseWidth).toFixed(5)
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+      }
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 改变窗口大小重新绘制
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    appRef,
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -189,7 +189,7 @@ export const useMousePointHandle = (
     attr.w = newWidth > 0 ? newWidth : 0
     attr.x = itemAttrX + (isLeft ? currX : 0)
     attr.y = itemAttrY + (isTop ? currY : 0)
-  })
+  }, 50)
 
   const mouseup = () => {
     // 设置拖拽状态

src/views/preview/index.vue

@@ -1,33 +1,66 @@
 <template>
   <div class="go-preview">
+    <div ref="previewRef">
       <h1>预览</h1>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { onUnmounted, ref, nextTick } from 'vue'
+import { usePreviewScale } from '@/hooks/index'
 import { getLocalStorage, fetchRouteParams } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
+import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 
-const init = () => {
+interface ChartEditStorageType extends ChartEditStorage {
+  id: string
+}
+
+const previewRef = ref()
+
+const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
   const routeParamsRes = fetchRouteParams()
   if (!routeParamsRes) return
   const { id } = routeParamsRes
 
-  const storageList = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST)
+  const storageList: ChartEditStorageType[] = getLocalStorage(
+    StorageEnum.GO_CHART_STORAGE_LIST
+  )
 
   for (let i = 0; i < storageList.length; i++) {
     if (id.toString() === storageList[i]['id']) {
-      console.log(storageList[i]);
-      break; 
+      return storageList[i]
     }
   }
 }
 
-init()
+const localStorageInfo: ChartEditStorageType | undefined = getLocalStorageInfo()
+const width = localStorageInfo?.editCanvasConfig.width
+const height = localStorageInfo?.editCanvasConfig.height
+
+if (!localStorageInfo) {
+  window['$message'].warning('获取数据失败')
+}
+
+nextTick(() => {
+  const { calcRate, windowResize, unWindowResize } = usePreviewScale(width as number, height as number, previewRef.value)
+
+  calcRate()
+  windowResize()
+
+  onUnmounted(() => {
+    unWindowResize()
+  })
+})
+
 </script>
 
 <style lang="scss" scoped>
 @include go("preview") {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100vh;
   width: 100vw;
   overflow: hidden;

src/views/preview/utils/index.ts

@@ -0,0 +1,23 @@
+import { getLocalStorage, fetchRouteParams } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+export interface ChartEditStorageType extends ChartEditStorage {
+  id: string
+}
+
+export const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
+  const routeParamsRes = fetchRouteParams()
+  if (!routeParamsRes) return
+  const { id } = routeParamsRes
+
+  const storageList: ChartEditStorageType[] = getLocalStorage(
+    StorageEnum.GO_CHART_STORAGE_LIST
+  )
+
+  for (let i = 0; i < storageList.length; i++) {
+    if (id.toString() === storageList[i]['id']) {
+      return storageList[i]
+    }
+  }
+}