fix(preview): 修复更新版本后的预览逻辑

ww
1 parent 87d47feb
Showing 3 changed files with 127 additions and 8 deletions
index.html
src/views/preview/external/usePreview.ts
src/views/preview/suspenseIndex.vue
--- a/index.html
View file @e06ff2e
+++ b/index.html
View file @e06ff2e
 <!DOCTYPE html>
 <html lang="zh-cmn-Hans">
-<head> 
+<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="renderer" content="webkit" />
@@ -14,7 +14,108 @@
   <title>
     <%= title %>
   </title>
-  <link rel="stylesheet" href="./index.css" />
+  <!-- <link rel="stylesheet" href="./index.css" /> -->
+  <style>
+    * {
+      margin: 0;
+    }
+
+    .first-loading-wrp {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-color: #17171a;
+    }
+
+    .first-loading-wrp>h1 {
+      font-size: 128px;
+    }
+
+    .first-loading-wrp .loading-wrp {
+      padding: 98px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .dot {
+      animation: antRotate 1.2s infinite linear;
+      transform: rotate(45deg);
+      position: relative;
+      display: inline-block;
+      font-size: 32px;
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+    }
+
+    .dot i {
+      width: 14px;
+      height: 14px;
+      position: absolute;
+      display: block;
+      background-color: #1890ff;
+      border-radius: 100%;
+      transform: scale(0.75);
+      transform-origin: 50% 50%;
+      opacity: 0.3;
+      animation: antSpinMove 1s infinite linear alternate;
+    }
+
+    .dot i:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+
+    .dot i:nth-child(2) {
+      top: 0;
+      right: 0;
+      -webkit-animation-delay: 0.4s;
+      animation-delay: 0.4s;
+    }
+
+    .dot i:nth-child(3) {
+      right: 0;
+      bottom: 0;
+      -webkit-animation-delay: 0.8s;
+      animation-delay: 0.8s;
+    }
+
+    .dot i:nth-child(4) {
+      bottom: 0;
+      left: 0;
+      -webkit-animation-delay: 1.2s;
+      animation-delay: 1.2s;
+    }
+
+    @keyframes antRotate {
+      to {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+      }
+    }
+
+    @-webkit-keyframes antRotate {
+      to {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+      }
+    }
+
+    @keyframes antSpinMove {
+      to {
+        opacity: 1;
+      }
+    }
+
+    @-webkit-keyframes antSpinMove {
+      to {
+        opacity: 1;
+      }
+    }
+
+  </style>
 </head>
 <body>
@@ -25,7 +126,7 @@
         <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
       </div>
     </div>
-  </div> 
+  </div>
   <script type="module" src="/src/main.ts"></script>
 </body>
--- a/src/views/preview/external/usePreview.ts
View file @e06ff2e
+++ b/src/views/preview/external/usePreview.ts
View file @e06ff2e
 import { fetchRouteParamsLocation, JSONParse, } from '@/utils'
 import { getDataView } from '@/api/external/contentSave/content'
 import { ChartEditStorageType } from '..'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-export const getSessionStorageInfo = async (): Promise<ChartEditStorageType> => {
+export const getSessionStorageInfo = async () => {
   const id = fetchRouteParamsLocation()
-
+  const chartEditStore = useChartEditStore()
   const res = await getDataView(id)
   if (res) {
     const { dataViewContent, dataViewName, dataViewId } = res
-    return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName } as ChartEditStorageType
+    const content = JSONParse(dataViewContent.content) as ChartEditStorageType
+    if (content) {
+      const { editCanvasConfig, requestGlobalConfig, componentList } = content
+      chartEditStore.editCanvasConfig = editCanvasConfig
+      chartEditStore.requestGlobalConfig = requestGlobalConfig
+      chartEditStore.componentList = componentList
+    }
   }
-  return {} as unknown as ChartEditStorageType
 }
--- a/src/views/preview/suspenseIndex.vue
View file @e06ff2e
+++ b/src/views/preview/suspenseIndex.vue
View file @e06ff2e
@@ -30,7 +30,12 @@
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
 import { getFilterStyle, setTitle } from '@/utils'
-import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+
+// THINGS_KIT 重写预览逻辑,调用接口
+// import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+import { getEditCanvasConfigStyle } from './utils'
+import { getSessionStorageInfo } from './external/usePreview'
+
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
@@ -68,28 +73,35 @@ const { show } = useComInstall(chartEditStore)
   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;
   }