Showing
3 changed files
with
134 additions
and
104 deletions
1 | +<!-- THINGS_KIT --> | ||
2 | + | ||
1 | <template> | 3 | <template> |
2 | - <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`"> | ||
3 | - <template v-if="showEntity"> | ||
4 | - <!-- 实体区域 --> | ||
5 | - <div ref="entityRef" class="go-preview-entity"> | ||
6 | - <!-- 缩放层 --> | ||
7 | - <div ref="previewRef" class="go-preview-scale"> | ||
8 | - <!-- 展示层 --> | ||
9 | - <div :style="previewRefStyle" v-if="show"> | ||
10 | - <!-- 渲染层 --> | ||
11 | - <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list> | ||
12 | - </div> | ||
13 | - </div> | ||
14 | - </div> | ||
15 | - </template> | ||
16 | - <template v-else> | ||
17 | - <!-- 缩放层 --> | ||
18 | - <div ref="previewRef" class="go-preview-scale"> | ||
19 | - <!-- 展示层 --> | ||
20 | - <div :style="previewRefStyle" v-if="show"> | ||
21 | - <!-- 渲染层 --> | ||
22 | - <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list> | ||
23 | - </div> | ||
24 | - </div> | ||
25 | - </template> | ||
26 | - </div> | 4 | + <suspense> |
5 | + <suspense-index></suspense-index> | ||
6 | + </suspense> | ||
27 | </template> | 7 | </template> |
28 | 8 | ||
29 | <script setup lang="ts"> | 9 | <script setup lang="ts"> |
30 | -import { computed } from 'vue' | ||
31 | -import { PreviewRenderList } from './components/PreviewRenderList' | ||
32 | -import { getFilterStyle, setTitle } from '@/utils' | ||
33 | -import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils' | ||
34 | -import { useComInstall } from './hooks/useComInstall.hook' | ||
35 | -import { useScale } from './hooks/useScale.hook' | ||
36 | -import { useStore } from './hooks/useStore.hook' | ||
37 | -import { PreviewScaleEnum } from '@/enums/styleEnum' | ||
38 | -import type { ChartEditStorageType } from './index.d' | ||
39 | - | ||
40 | -const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType | ||
41 | -setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`) | ||
42 | - | ||
43 | -const previewRefStyle = computed(() => { | ||
44 | - return { | ||
45 | - ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), | ||
46 | - ...getFilterStyle(localStorageInfo.editCanvasConfig) | ||
47 | - } | ||
48 | -}) | ||
49 | - | ||
50 | -const showEntity = computed(() => { | ||
51 | - const type = localStorageInfo.editCanvasConfig.previewScaleType | ||
52 | - return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X | ||
53 | -}) | ||
54 | - | ||
55 | -useStore(localStorageInfo) | ||
56 | -const { entityRef, previewRef } = useScale(localStorageInfo) | ||
57 | -const { show } = useComInstall(localStorageInfo) | 10 | +import suspenseIndex from './suspenseIndex.vue' |
58 | </script> | 11 | </script> |
59 | - | ||
60 | -<style lang="scss" scoped> | ||
61 | -@include go('preview') { | ||
62 | - position: relative; | ||
63 | - height: 100vh; | ||
64 | - width: 100vw; | ||
65 | - @include background-image('background-image'); | ||
66 | - &.fit, | ||
67 | - &.full { | ||
68 | - display: flex; | ||
69 | - align-items: center; | ||
70 | - justify-content: center; | ||
71 | - overflow: hidden; | ||
72 | - .go-preview-scale { | ||
73 | - transform-origin: center center; | ||
74 | - } | ||
75 | - } | ||
76 | - &.scrollY { | ||
77 | - overflow-x: hidden; | ||
78 | - .go-preview-scale { | ||
79 | - transform-origin: left top; | ||
80 | - } | ||
81 | - } | ||
82 | - &.scrollX { | ||
83 | - overflow-y: hidden; | ||
84 | - .go-preview-scale { | ||
85 | - transform-origin: left top; | ||
86 | - } | ||
87 | - } | ||
88 | - .go-preview-entity { | ||
89 | - overflow: hidden; | ||
90 | - } | ||
91 | -} | ||
92 | -</style> |
src/views/preview/suspenseIndex.vue
0 → 100644
1 | +<!-- THINGS_KIT --> | ||
2 | +<template> | ||
3 | + <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`"> | ||
4 | + <template v-if="showEntity"> | ||
5 | + <!-- 实体区域 --> | ||
6 | + <div ref="entityRef" class="go-preview-entity"> | ||
7 | + <!-- 缩放层 --> | ||
8 | + <div ref="previewRef" class="go-preview-scale"> | ||
9 | + <!-- 展示层 --> | ||
10 | + <div :style="previewRefStyle" v-if="show"> | ||
11 | + <!-- 渲染层 --> | ||
12 | + <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list> | ||
13 | + </div> | ||
14 | + </div> | ||
15 | + </div> | ||
16 | + </template> | ||
17 | + <template v-else> | ||
18 | + <!-- 缩放层 --> | ||
19 | + <div ref="previewRef" class="go-preview-scale"> | ||
20 | + <!-- 展示层 --> | ||
21 | + <div :style="previewRefStyle" v-if="show"> | ||
22 | + <!-- 渲染层 --> | ||
23 | + <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list> | ||
24 | + </div> | ||
25 | + </div> | ||
26 | + </template> | ||
27 | + </div> | ||
28 | +</template> | ||
29 | + | ||
30 | +<script setup lang="ts"> | ||
31 | +import { computed } from 'vue' | ||
32 | +import { PreviewRenderList } from './components/PreviewRenderList' | ||
33 | +import { getFilterStyle, routerTurnByName, getSessionStorage, setTitle } from '@/utils' | ||
34 | +import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils' | ||
35 | +import { PageEnum } from '@/enums/pageEnum' | ||
36 | +import { StorageEnum } from '@/enums/storageEnum' | ||
37 | +import { useScale } from './hooks/useScale.hook' | ||
38 | +import { useStore } from './hooks/useStore.hook' | ||
39 | +import { PreviewScaleEnum } from '@/enums/styleEnum' | ||
40 | +import { useComInstall } from './hooks/useComInstall.hook' | ||
41 | +import type { ChartEditStorageType } from './index.d' | ||
42 | + | ||
43 | +const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST) | ||
44 | +// THINGS_KIT | ||
45 | +const localStorageInfo = (await getSessionStorageInfo()) as unknown as ChartEditStorageType | ||
46 | +console.log(localStorageInfo) | ||
47 | +setTitle(`预览-${localStorageInfo?.projectName}`) | ||
48 | +// THINGS_KIT | ||
49 | +// @ts-ignore | ||
50 | +if (localStorageInfo.isRelease === false) { | ||
51 | + // routerTurnByName(PageEnum.REDIRECT_UN_PUBLISH_NAME, true, false) | ||
52 | +} | ||
53 | + | ||
54 | +const previewRefStyle = computed(() => { | ||
55 | + return { | ||
56 | + ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), | ||
57 | + ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined) | ||
58 | + } | ||
59 | +}) | ||
60 | + | ||
61 | +const showEntity = computed(() => { | ||
62 | + const type = localStorageInfo.editCanvasConfig.previewScaleType | ||
63 | + return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X | ||
64 | +}) | ||
65 | + | ||
66 | +useStore(localStorageInfo) | ||
67 | +const { entityRef, previewRef } = useScale(localStorageInfo) | ||
68 | +const { show } = useComInstall(localStorageInfo) | ||
69 | +</script> | ||
70 | + | ||
71 | +<style lang="scss" scoped> | ||
72 | +@include go('preview') { | ||
73 | + position: relative; | ||
74 | + height: 100vh; | ||
75 | + width: 100vw; | ||
76 | + @include background-image('background-image'); | ||
77 | + &.fit, | ||
78 | + &.full { | ||
79 | + display: flex; | ||
80 | + align-items: center; | ||
81 | + justify-content: center; | ||
82 | + overflow: hidden; | ||
83 | + .go-preview-scale { | ||
84 | + transform-origin: center center; | ||
85 | + } | ||
86 | + } | ||
87 | + &.scrollY { | ||
88 | + overflow-x: hidden; | ||
89 | + .go-preview-scale { | ||
90 | + transform-origin: left top; | ||
91 | + } | ||
92 | + } | ||
93 | + &.scrollX { | ||
94 | + overflow-y: hidden; | ||
95 | + .go-preview-scale { | ||
96 | + transform-origin: left top; | ||
97 | + } | ||
98 | + } | ||
99 | + .go-preview-entity { | ||
100 | + overflow: hidden; | ||
101 | + } | ||
102 | +} | ||
103 | +</style> |
1 | -import { getSessionStorage } from '@/utils' | 1 | +import { getSessionStorage, fetchRouteParamsLocation, JSONParse } from '@/utils' |
2 | import { StorageEnum } from '@/enums/storageEnum' | 2 | import { StorageEnum } from '@/enums/storageEnum' |
3 | import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' | 3 | import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' |
4 | +import { getDataView } from '@/api/external/contentSave/content' | ||
4 | 5 | ||
5 | export interface ChartEditStorageType extends ChartEditStorage { | 6 | export interface ChartEditStorageType extends ChartEditStorage { |
6 | id: string | 7 | id: string |
7 | } | 8 | } |
8 | - | 9 | +// THINGS_KIT |
9 | // 根据路由 id 获取存储数据的信息 | 10 | // 根据路由 id 获取存储数据的信息 |
10 | -export const getSessionStorageInfo = () => { | ||
11 | - const urlHash = document.location.hash | ||
12 | - const toPathArray = urlHash.split('/') | ||
13 | - const id = toPathArray && toPathArray[toPathArray.length - 1] | ||
14 | - | ||
15 | - const storageList: ChartEditStorageType[] = getSessionStorage( | ||
16 | - StorageEnum.GO_CHART_STORAGE_LIST | ||
17 | - ) | ||
18 | - | ||
19 | - if(!storageList) return | ||
20 | - | ||
21 | - for (let i = 0; i < storageList.length; i++) { | ||
22 | - if (id.toString() === storageList[i]['id']) { | ||
23 | - return storageList[i] | 11 | +export const getSessionStorageInfo = async () => { |
12 | + const id = fetchRouteParamsLocation() | ||
13 | + const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST) | ||
14 | + // 是否本地预览 | ||
15 | + if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) { | ||
16 | + // 接口调用 | ||
17 | + const res = await getDataView(id) | ||
18 | + if (res) { | ||
19 | + const { dataViewContent, state, dataViewName, dataViewId } = res | ||
20 | + // if (state === 1) { | ||
21 | + // // 跳转未发布页 | ||
22 | + // return { isRelease: false } | ||
23 | + // } | ||
24 | + return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName } | ||
25 | + } else { | ||
26 | + // 本地读取 | ||
27 | + for (let i = 0; i < storageList.length; i++) { | ||
28 | + if (id.toString() === storageList[i]['id']) { | ||
29 | + return storageList[i] | ||
30 | + } | ||
31 | + } | ||
24 | } | 32 | } |
25 | } | 33 | } |
26 | -} | ||
34 | +} |