fix: 大屏预览页增加缓存 预加载所有组件

src/App.vue

@@ -22,6 +22,7 @@ import { getToken } from '@/api/path'
 import { useRouterStore } from '@/store/modules/routerStore/routerStore'
 import { useOriginStore } from '@/store/modules/originStore/originStore'
 import { useGetMessageByParent } from '@/utils/utils'
+import router from '@/router'
 
 const {getMessageByParent} = useGetMessageByParent()
 
@@ -43,7 +44,13 @@ getMessageByParent('getStore', (e) => {
   }
 })
 
-getToken()
+getMessageByParent('loaded', (e) => {
+  if(e.data.type === 'changeRoute' && e.data.page === 'customLargeScreen') {
+    routerStore.setToken(e.data.token)
+    router.push(e.data.path ? e.data.path : '/chart/preview/null')
+  }
+})
+// getToken()
 
 // 暗黑主题
 const darkTheme = useDarkThemeHook()

src/api/axios.ts

@@ -55,10 +55,29 @@ axiosInstance.interceptors.response.use(
 
     const logOutCodeList = ['00004', '000012', '000013']
     if(logOutCodeList.some(_ => _ === errcode)) {
-      window['$message'].error(errmsg)
-      setTimeout(() => {
-        postMessageToParent({
-          type: 'logOut'
+      // window['$message'].error(errmsg)
+      // setTimeout(() => {
+      //   postMessageToParent({
+      //     type: 'logOut'
+      //   })
+      // })
+
+      // axios加载时 pinia还没加载好 要异步加载拿到pinia
+      import('@/store/modules/modalStore/modalStore').then(res => {
+        const modalStore = res.useModalStore()
+        modalStore.setModalStore({
+          showModal: true,
+          title: '提示',
+          content: errmsg,
+          positiveText: '重新登录',
+          positiveClick: () => {
+            modalStore.clear()
+            setTimeout(() => {
+              postMessageToParent({
+                type: 'logOut'
+              })
+            }, 500)
+          },
         })
       })
       return Promise.resolve(res.data)

src/api/path/business.api.ts

@@ -4,6 +4,7 @@ import { RequestHttpEnum } from "@/enums/httpEnum";
 import { httpErrorHandle } from '@/utils'
 import moment from 'moment'
 
+/*
 export function getToken() {
     // 为了开发时只单独展示goview 需要localStorage
     // const storage_access_token = localStorage.getItem('access_token_obj')
@@ -26,10 +27,26 @@ export function getToken() {
     // if(query.access_token) localStorage.setItem('access_token_obj', JSON.stringify(obj))
     return query.access_token
 }
+ */
+
+// 初次等待久一点 因为dom加载后才能获取父页面传来的token 才能存入store
+export async function getToken() {
+    return new Promise(resolve => {
+        let timer = setInterval(() => {
+            import('@/store/modules/routerStore/routerStore').then(res => {
+                let routerStore = res.useRouterStore()
+                if(routerStore.token) {
+                    clearInterval(timer)
+                    resolve(routerStore.token)
+                }
+            })
+        }, 100)
+    })
+}
 
 export const publicInterface = async (paramType:string, interfaceType:string, paramData?:unknown) =>{
     try {
-        const access_token = getToken()
+        const access_token = await getToken()
         const res = await http(RequestHttpEnum.POST)<any>(paramType, {
             access_token,
             type: interfaceType,

src/components/VDialog/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <n-modal
+    v-model:show="modalStore.showModal"
+    preset="dialog"
+    :title="modalStore.title"
+    :content="modalStore.content"
+    :positiveText="modalStore.positiveText"
+    :negativeText="modalStore.negativeText"
+    @positive-click="modalStore.positiveClick"
+    @negative-click="modalStore.negativeClick"
+  />
+</template>
+
+<script setup lang="ts">
+import {useModalStore} from '@/store/modules/modalStore/modalStore'
+
+const modalStore = useModalStore()
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/components/LayoutMain/index.vue

@@ -7,4 +7,9 @@
       </keep-alive>
     </template>
   </router-view>
+  <VDialog/>
 </template>
+
+<script setup lang="ts">
+import VDialog from '@/components/VDialog/index.vue'
+</script>

src/router/index.ts

@@ -11,7 +11,8 @@ const RootRoute: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Root',
-    redirect: PageEnum.BASE_HOME,
+    // redirect: PageEnum.BASE_HOME,
+    redirect: '/chart/preview/null',
     component: Layout,
     meta: {
       title: 'Root',

src/store/modules/modalStore/modalStore.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+
+export const useModalStore = defineStore({
+    id: 'useModalStore',
+    state: () => ({
+        showModal: false,
+        title: '',
+        content: '',
+        positiveText: '',
+        negativeText: '',
+        positiveClick: () => {},
+        negativeClick: () => {},
+    }) as Record<string, any>,
+    actions: {
+        setModalStore(obj: Record<string, any>) {
+            for(let k in obj) {
+                this[k] = obj[k]
+            }
+        },
+        clear() {
+            this.showModal = false
+            this.title = ''
+            this.content = ''
+            this.positiveText = ''
+            this.negativeText = ''
+            this.positiveClick = () => {}
+            this.negativeClick = () => {}
+        }
+    }
+})

src/store/modules/routerStore/routerStore.ts

@@ -5,6 +5,7 @@ export const useRouterStore = defineStore({
     state: () => ({
         // 为true是router交给parent调用自身不跳转 为false使用自身路由
         callByParent: false,
+        token: null as null | string,
     }),
     getters: {
         getCallByParent():boolean {
@@ -14,6 +15,9 @@ export const useRouterStore = defineStore({
     actions: {
         setCallByParent(callByParent: boolean) {
             this.callByParent = callByParent
+        },
+        setToken(v: string | null) {
+            this.token = v
         }
     }
 })

src/utils/utils.ts

@@ -294,7 +294,6 @@ export const JSONStringify = <T>(data: T) => {
 
 export const evalFn = (fn: string) => {
   var Fun = Function // 一个变量指向Function，防止前端编译工具报错
-  console.log(fn)
   return new Fun('return ' + fn)()
 }
 

src/views/preview/suspenseIndex.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch, onMounted, ref } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
 import { getFilterStyle, setTitle } from '@/utils'
 import { getEditCanvasConfigStyle, getSessionStorageInfo, keyRecordHandle, dragCanvas } from './utils'
@@ -37,6 +37,7 @@ import { useStore } from './hooks/useStore.hook'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartEditStorageType } from './index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useRoute } from 'vue-router'
 
 // const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
 
@@ -60,10 +61,41 @@ const showEntity = computed(() => {
 
 useStore(chartEditStore)
 const { entityRef, previewRef } = useScale(chartEditStore)
-const { show } = useComInstall(chartEditStore)
+// const { show } = useComInstall(chartEditStore)
 
 // 开启键盘监听
 keyRecordHandle()
+
+const route = useRoute()
+watch(() => {
+  return route
+}, () => {
+  getSessionStorageInfo()
+}, {
+  deep: true
+})
+
+let show = ref(false)
+onMounted(() => {
+  // 全部注册
+  requestIdleCallback(() => {
+    const intComponent = (chartKey: string, target: any) => {
+      if (!window['$vue'].component(chartKey)) {
+        window['$vue'].component(chartKey, target)
+      }
+    }
+    const indexModules: Record<string, { default: string }> = import.meta.glob('@/packages/components/**/index.vue', {
+      eager: true
+    })
+    for(let key in indexModules) {
+      const urlSplit = key.split('/')
+
+      // key与文件名必须一致
+      intComponent(`V${urlSplit[urlSplit.length - 2]}`, indexModules[key].default)
+    }
+    show.value = true
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/views/preview/utils/storage.ts

@@ -4,6 +4,8 @@ import { StorageEnum } from '@/enums/storageEnum'
 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { fetchProjectApi } from '@/api/path'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import {defaultTheme, globalThemeJson} from "@/settings/chartThemes";
+import {previewScaleType, requestInterval, requestIntervalUnit} from "@/settings/designSetting";
 
 const chartEditStore = useChartEditStore()
 
@@ -14,6 +16,67 @@ export interface ChartEditStorageType extends ChartEditStorage {
 // 根据路由 id 获取存储数据的信息
 export const getSessionStorageInfo = async () => {
   const id = Number(fetchRouteParamsLocation())
+  if(isNaN(id)) {
+    chartEditStore.editCanvasConfig = {
+      // 项目名称
+      projectName: undefined,
+      // 默认宽度
+      width: 1920,
+      // 默认高度
+      height: 1080,
+      // 启用滤镜
+      filterShow: false,
+      // 色相
+      hueRotate: 0,
+      // 饱和度
+      saturate: 1,
+      // 对比度
+      contrast: 1,
+      // 亮度
+      brightness: 1,
+      // 透明度
+      opacity: 1,
+      // 变换（暂不更改）
+      rotateZ: 0,
+      rotateX: 0,
+      rotateY: 0,
+      skewX: 0,
+      skewY: 0,
+      // 混合模式
+      blendMode: 'normal',
+      // 默认背景色
+      background: undefined,
+      backgroundImage: undefined,
+      // 是否使用纯颜色
+      selectColor: true,
+      // chart 主题色
+      chartThemeColor: defaultTheme || 'dark',
+      // 自定义颜色列表
+      chartCustomThemeColorInfo: undefined,
+      // 全局配置
+      chartThemeSetting: globalThemeJson,
+      // 适配方式
+      previewScaleType: previewScaleType
+    }
+    chartEditStore.requestGlobalConfig = {
+      requestDataPond: [],
+      requestOriginUrl: '',
+      requestInterval: requestInterval,
+      requestIntervalUnit: requestIntervalUnit,
+      requestParams: {
+        Body: {
+          'form-data': {},
+          'x-www-form-urlencoded': {},
+          json: '',
+          xml: ''
+        },
+        Header: {},
+        Params: {}
+      }
+    }
+    chartEditStore.componentList = []
+    return
+  }
   const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
 
   // 是否本地预览