feat: 新增页面预览方式

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

@@ -34,8 +34,6 @@ const props = defineProps({
   }
 })
 
-console.log(getTranstormStyle(props.localStorageInfo.componentList[0].styles))
-
 // 主题色
 const themeSetting = computed(() => {
   const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting

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

@@ -1,31 +1,86 @@
-import { onUnmounted, ref, nextTick, computed } from 'vue'
-import { usePreviewScale } from '@/hooks/index'
+import { ref, nextTick, onMounted, onUnmounted} from 'vue'
+import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from '@/hooks/index'
 import type { ChartEditStorageType } from '../index.d'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 
 export const useScale = (localStorageInfo: ChartEditStorageType) => {
-
+  const entityRef = ref()
   const previewRef = ref()
-
-  const width = ref(localStorageInfo?.editCanvasConfig.width)
-  const height = ref(localStorageInfo?.editCanvasConfig.height)
+  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
-    )
+  onMounted(() => {
+    switch (localStorageInfo.editCanvasConfig.previewScaleType) {
+      case PreviewScaleEnum.FIT: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
+        break;
+      case PreviewScaleEnum.SCROLL_Y: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+          (scale) => {
+            const dom = entityRef.value
+            dom.style.width = `${width.value * scale.width}px`
+            dom.style.height = `${height.value * scale.height}px`
+          }
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
 
-    calcRate()
-    windowResize()
+        break;
+      case PreviewScaleEnum.SCROLL_X: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+          (scale) => {
+            const dom = entityRef.value
+            dom.style.width = `${width.value * scale.width}px`
+            dom.style.height = `${height.value * scale.height}px`
+          }
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
 
-    onUnmounted(() => {
-      unWindowResize()
-    })
+        break;
+      case PreviewScaleEnum.FULL: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
+        break;
+    }
   })
 
   return {
+    entityRef,
     previewRef
   }
 }

src/views/preview/index.vue

@@ -1,15 +1,34 @@
 <template>
-  <div class="go-preview">
-    <!-- 缩放层 -->
-    <div ref="previewRef">
-      <!-- 展示层 -->
-      <div :style="previewRefStyle" v-if="show">
-        <!-- 渲染层 -->
-        <preview-render-list
-          :localStorageInfo="localStorageInfo"
-        ></preview-render-list>
+  <div
+    :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`"
+  >
+    <template v-if="showEntity">
+      <!-- 实体区域 -->
+      <div ref="entityRef" class="go-preview-entity">
+        <!-- 缩放层 -->
+        <div ref="previewRef" class="go-preview-scale">
+          <!-- 展示层 -->
+          <div :style="previewRefStyle" v-if="show">
+            <!-- 渲染层 -->
+            <preview-render-list
+              :localStorageInfo="localStorageInfo"
+            ></preview-render-list>
+          </div>
+        </div>
       </div>
-    </div>
+    </template>
+    <template v-else>
+      <!-- 缩放层 -->
+      <div ref="previewRef" class="go-preview-scale">
+        <!-- 展示层 -->
+        <div :style="previewRefStyle" v-if="show">
+          <!-- 渲染层 -->
+          <preview-render-list
+            :localStorageInfo="localStorageInfo"
+          ></preview-render-list>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -21,28 +40,61 @@ import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartEditStorageType } from './index.d'
 
-const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+const localStorageInfo: ChartEditStorageType =
+  getSessionStorageInfo() as ChartEditStorageType
 
 const previewRefStyle = computed(() => {
-  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getFilterStyle(localStorageInfo.editCanvasConfig) }
+  return {
+    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
+    ...getFilterStyle(localStorageInfo.editCanvasConfig),
+  }
+})
+
+const showEntity = computed(() => {
+  const type = localStorageInfo.editCanvasConfig.previewScaleType
+  return (
+    type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
+  )
 })
 
 useStore(localStorageInfo)
-const { previewRef } = useScale(localStorageInfo)
+const { entityRef, previewRef } = useScale(localStorageInfo)
 const { show } = useComInstall(localStorageInfo)
 </script>
 
 <style lang="scss" scoped>
 @include go('preview') {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   height: 100vh;
   width: 100vw;
-  overflow: hidden;
   @include background-image('background-image');
+  &.fit,
+  &.full {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    .go-preview-scale {
+      transform-origin: center center;
+    }
+  }
+  &.scrollY {
+    overflow-x: hidden;
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+  &.scrollX {
+    overflow-y: hidden;
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+  .go-preview-entity {
+    overflow: hidden;
+  }
 }
 </style>