feat: 新增页面预览方式

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>