diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue
index e94ee741..fdc3fdf6 100644
--- a/src/views/preview/suspenseIndex.vue
+++ b/src/views/preview/suspenseIndex.vue
@@ -1,16 +1,97 @@
-<!--
- Copyright 2023 MT
- 
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- 
-     http://www.apache.org/licenses/LICENSE-2.0
- 
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
+<template>
+  <div :class="`go-preview ${chartEditStore.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></preview-render-list>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <!-- 缩放层 -->
+      <div ref="previewRef" class="go-preview-scale">
+        <!-- 展示层 -->
+        <div :style="previewRefStyle" v-if="show">
+          <!-- 渲染层 -->
+          <preview-render-list></preview-render-list>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
 
+<script setup lang="ts">
+import { computed } from 'vue'
+import { PreviewRenderList } from './components/PreviewRenderList'
+import { getFilterStyle, setTitle } 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'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
+import type { ChartEditStorageType } from './index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+
+await getSessionStorageInfo()
+const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
+
+setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
+
+const previewRefStyle = computed(() => {
+  return {
+    ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
+    ...getFilterStyle(chartEditStore.editCanvasConfig)
+  }
+})
+
+const showEntity = computed(() => {
+  const type = chartEditStore.editCanvasConfig.previewScaleType
+  return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
+})
+
+useStore(chartEditStore)
+const { entityRef, previewRef } = useScale(chartEditStore)
+const { show } = useComInstall(chartEditStore)
+</script>
+
+<style lang="scss" scoped>
+@include go('preview') {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  @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>