feat(嵌入式): 嵌入或者分享链接访问时第一次加载的时候很慢，添加一个加载动效

core/core-frontend/src/hooks/web/useLoading.ts

@@ -0,0 +1,17 @@
+import { ElLoading } from 'element-plus-secondary'
+let loadingInstance = null
+
+export const useLoading = () => {
+  const open = () => {
+    loadingInstance = ElLoading.service({ fullscreen: true })
+  }
+
+  const close = () => {
+    loadingInstance?.close()
+  }
+
+  return {
+    open,
+    close
+  }
+}

core/core-frontend/src/permission.ts

@@ -12,6 +12,7 @@ import { isMobile, checkPlatform, isLarkPlatform, isPlatformClient } from '@/uti
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { useEmbedded } from '@/store/modules/embedded'
+import { useLoading } from '@/hooks/web/useLoading'
 const appearanceStore = useAppearanceStoreWithOut()
 const { wsCache } = useCache()
 const permissionStore = usePermissionStoreWithOut()
@@ -20,13 +21,16 @@ const userStore = useUserStoreWithOut()
 const appStore = useAppStoreWithOut()
 
 const { start, done } = useNProgress()
-
+const { open } = useLoading()
 const { loadStart, loadDone } = usePageLoading()
 
 const whiteList = ['/login', '/de-link', '/chart-view', '/admin-login', '/401'] // 不重定向白名单
 const embeddedWindowWhiteList = ['/dvCanvas', '/dashboard', '/preview', '/dataset-embedded-form']
 const embeddedRouteWhiteList = ['/dataset-embedded', '/dataset-form', '/dataset-embedded-form']
 router.beforeEach(async (to, from, next) => {
+  if (['/chart-view'].includes(to.path) || to.path.startsWith('/de-link/')) {
+    open()
+  }
   start()
   loadStart()
   const platform = checkPlatform()

core/core-frontend/src/views/chart/ChartView.vue

@@ -5,12 +5,15 @@ import {
   ref,
   onBeforeUnmount,
   onBeforeMount,
+  onMounted,
   nextTick
 } from 'vue'
 import { debounce } from 'lodash-es'
 import { XpackComponent } from '@/components/plugin'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { useLoading } from '@/hooks/web/useLoading'
 
+const { close } = useLoading()
 const currentComponent = shallowRef()
 const Preview = defineAsyncComponent(() => import('@/views/data-visualization/PreviewCanvas.vue'))
 const VisualizationEditor = defineAsyncComponent(
@@ -55,7 +58,9 @@ onBeforeMount(() => {
   window.addEventListener('resize', setStyle)
   setStyle()
 })
-
+onMounted(() => {
+  close()
+})
 onBeforeUnmount(() => {
   window.removeEventListener('resize', setStyle)
 })

core/core-frontend/src/views/share/link/index.vue

@@ -34,6 +34,7 @@ import { onMounted, nextTick, ref, reactive, onBeforeUnmount } from 'vue'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import PreviewCanvas from '@/views/data-visualization/PreviewCanvas.vue'
+import { useLoading } from '@/hooks/web/useLoading'
 import { ProxyInfo, shareProxy } from './ShareProxy'
 import PwdTips from './pwd.vue'
 import ErrorTemplate from './ErrorTemplate.vue'
@@ -52,6 +53,7 @@ const linkExist = ref(false)
 const loading = ref(true)
 const linkExp = ref(false)
 const pwdValid = ref(false)
+const { close } = useLoading()
 const { t } = useI18n()
 const state = reactive({
   ticketValidVO: {
@@ -61,6 +63,7 @@ const state = reactive({
   }
 })
 onMounted(async () => {
+  close()
   const proxyInfo = (await shareProxy.loadProxy()) as ProxyInfo
   if (proxyInfo?.shareDisable) {
     loading.value = false