From 0f93b0285b5c948ebb6da2a5e23294298d9b08af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Thu, 16 Mar 2023 20:36:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A9=E9=A2=84=E8=A7=88=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=9B=AE=E5=BD=95=E5=92=8Cmaster-fetch=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/preview/index.vue         | 96 ++--------------------------
 src/views/preview/suspenseIndex.vue | 97 +++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+), 92 deletions(-)
 create mode 100644 src/views/preview/suspenseIndex.vue

diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 4209edab..4e6bc664 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -1,97 +1,9 @@
 <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>
+  <suspense>
+    <suspense-index></suspense-index>
+  </suspense>
 </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
-
-const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
-getSessionStorageInfo()
-
-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)
+import suspenseIndex from './suspenseIndex.vue'
 </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>
diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue
new file mode 100644
index 00000000..fdc3fdf6
--- /dev/null
+++ b/src/views/preview/suspenseIndex.vue
@@ -0,0 +1,97 @@
+<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>