简柏林 / thingskit-view · Commits

Commit e06ff2e7ef962a4a65f8c80a658a5aff4b21d3c7

Authored by ww
1 parent 87d47feb

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

Inline Side-by-side
Showing 3 changed files with 127 additions and 8 deletions
1 1 <!DOCTYPE html>
2 2 <html lang="zh-cmn-Hans">
3 3
4   -<head>
  4 +<head>
5 5 <meta charset="UTF-8" />
6 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 7 <meta name="renderer" content="webkit" />
... ... @@ -14,7 +14,108 @@
14 14 <title>
15 15 <%= title %>
16 16 </title>
17   - <link rel="stylesheet" href="./index.css" />
  17 + <!-- <link rel="stylesheet" href="./index.css" /> -->
  18 + <style>
  19 + * {
  20 + margin: 0;
  21 + }
  22 +
  23 + .first-loading-wrp {
  24 + display: flex;
  25 + justify-content: center;
  26 + align-items: center;
  27 + height: 100vh;
  28 + background-color: #17171a;
  29 + }
  30 +
  31 + .first-loading-wrp>h1 {
  32 + font-size: 128px;
  33 + }
  34 +
  35 + .first-loading-wrp .loading-wrp {
  36 + padding: 98px;
  37 + display: flex;
  38 + justify-content: center;
  39 + align-items: center;
  40 + }
  41 +
  42 + .dot {
  43 + animation: antRotate 1.2s infinite linear;
  44 + transform: rotate(45deg);
  45 + position: relative;
  46 + display: inline-block;
  47 + font-size: 32px;
  48 + width: 32px;
  49 + height: 32px;
  50 + box-sizing: border-box;
  51 + }
  52 +
  53 + .dot i {
  54 + width: 14px;
  55 + height: 14px;
  56 + position: absolute;
  57 + display: block;
  58 + background-color: #1890ff;
  59 + border-radius: 100%;
  60 + transform: scale(0.75);
  61 + transform-origin: 50% 50%;
  62 + opacity: 0.3;
  63 + animation: antSpinMove 1s infinite linear alternate;
  64 + }
  65 +
  66 + .dot i:nth-child(1) {
  67 + top: 0;
  68 + left: 0;
  69 + }
  70 +
  71 + .dot i:nth-child(2) {
  72 + top: 0;
  73 + right: 0;
  74 + -webkit-animation-delay: 0.4s;
  75 + animation-delay: 0.4s;
  76 + }
  77 +
  78 + .dot i:nth-child(3) {
  79 + right: 0;
  80 + bottom: 0;
  81 + -webkit-animation-delay: 0.8s;
  82 + animation-delay: 0.8s;
  83 + }
  84 +
  85 + .dot i:nth-child(4) {
  86 + bottom: 0;
  87 + left: 0;
  88 + -webkit-animation-delay: 1.2s;
  89 + animation-delay: 1.2s;
  90 + }
  91 +
  92 + @keyframes antRotate {
  93 + to {
  94 + -webkit-transform: rotate(405deg);
  95 + transform: rotate(405deg);
  96 + }
  97 + }
  98 +
  99 + @-webkit-keyframes antRotate {
  100 + to {
  101 + -webkit-transform: rotate(405deg);
  102 + transform: rotate(405deg);
  103 + }
  104 + }
  105 +
  106 + @keyframes antSpinMove {
  107 + to {
  108 + opacity: 1;
  109 + }
  110 + }
  111 +
  112 + @-webkit-keyframes antSpinMove {
  113 + to {
  114 + opacity: 1;
  115 + }
  116 + }
  117 +
  118 + </style>
18 119 </head>
19 120
20 121 <body>
... ... @@ -25,7 +126,7 @@
25 126 <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
26 127 </div>
27 128 </div>
28   - </div>
  129 + </div>
29 130 <script type="module" src="/src/main.ts"></script>
30 131 </body>
31 132
... ...
1 1 import { fetchRouteParamsLocation, JSONParse, } from '@/utils'
2 2 import { getDataView } from '@/api/external/contentSave/content'
3 3 import { ChartEditStorageType } from '..'
  4 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
4 5
5   -export const getSessionStorageInfo = async (): Promise<ChartEditStorageType> => {
  6 +export const getSessionStorageInfo = async () => {
6 7 const id = fetchRouteParamsLocation()
7   -
  8 + const chartEditStore = useChartEditStore()
8 9 const res = await getDataView(id)
9 10 if (res) {
10 11 const { dataViewContent, dataViewName, dataViewId } = res
11   - return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName } as ChartEditStorageType
  12 + const content = JSONParse(dataViewContent.content) as ChartEditStorageType
  13 + if (content) {
  14 + const { editCanvasConfig, requestGlobalConfig, componentList } = content
  15 + chartEditStore.editCanvasConfig = editCanvasConfig
  16 + chartEditStore.requestGlobalConfig = requestGlobalConfig
  17 + chartEditStore.componentList = componentList
  18 + }
12 19 }
13   - return {} as unknown as ChartEditStorageType
14 20 }
15 21
... ...
... ... @@ -30,7 +30,12 @@
30 30 import { computed } from 'vue'
31 31 import { PreviewRenderList } from './components/PreviewRenderList'
32 32 import { getFilterStyle, setTitle } from '@/utils'
33   -import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
  33 +
  34 +// THINGS_KIT 重写预览逻辑,调用接口
  35 +// import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
  36 +import { getEditCanvasConfigStyle } from './utils'
  37 +import { getSessionStorageInfo } from './external/usePreview'
  38 +
34 39 import { useComInstall } from './hooks/useComInstall.hook'
35 40 import { useScale } from './hooks/useScale.hook'
36 41 import { useStore } from './hooks/useStore.hook'
... ... @@ -68,28 +73,35 @@ const { show } = useComInstall(chartEditStore)
68 73 height: 100vh;
69 74 width: 100vw;
70 75 @include background-image('background-image');
  76 +
71 77 &.fit,
72 78 &.full {
73 79 display: flex;
74 80 align-items: center;
75 81 justify-content: center;
76 82 overflow: hidden;
  83 +
77 84 .go-preview-scale {
78 85 transform-origin: center center;
79 86 }
80 87 }
  88 +
81 89 &.scrollY {
82 90 overflow-x: hidden;
  91 +
83 92 .go-preview-scale {
84 93 transform-origin: left top;
85 94 }
86 95 }
  96 +
87 97 &.scrollX {
88 98 overflow-y: hidden;
  99 +
89 100 .go-preview-scale {
90 101 transform-origin: left top;
91 102 }
92 103 }
  104 +
93 105 .go-preview-entity {
94 106 overflow: hidden;
95 107 }
... ...