diff --git a/core/core-frontend/src/hooks/web/useLoading.ts b/core/core-frontend/src/hooks/web/useLoading.ts new file mode 100644 index 0000000000..15db700f5a --- /dev/null +++ b/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 + } +} diff --git a/core/core-frontend/src/permission.ts b/core/core-frontend/src/permission.ts index 59226024e5..9665229f11 100644 --- a/core/core-frontend/src/permission.ts +++ b/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() diff --git a/core/core-frontend/src/views/chart/ChartView.vue b/core/core-frontend/src/views/chart/ChartView.vue index 5cf93572d8..f4f929d428 100644 --- a/core/core-frontend/src/views/chart/ChartView.vue +++ b/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) }) diff --git a/core/core-frontend/src/views/share/link/index.vue b/core/core-frontend/src/views/share/link/index.vue index 9fdd77b65b..3a5f971ab6 100644 --- a/core/core-frontend/src/views/share/link/index.vue +++ b/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