fix: 修复单点登录回调页面显示
This commit is contained in:
parent
0724be3202
commit
83b22c9d5d
@ -6,7 +6,9 @@ import { toggleHtmlClass } from '@/utils/common';
|
||||
import systemLogo from '@/assets/imgs/logo.png';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
export function loading() {
|
||||
export function setupLoading() {
|
||||
const app = document.getElementById('app');
|
||||
|
||||
const themeColor = localStg.get('themeColor') || '#2080f0';
|
||||
const darkMode = localStg.get('darkMode') || false;
|
||||
const { r, g, b } = getRgb(themeColor);
|
||||
@ -17,7 +19,7 @@ export function loading() {
|
||||
toggleHtmlClass(DARK_CLASS).add();
|
||||
}
|
||||
|
||||
return `
|
||||
const loading = `
|
||||
<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
|
||||
<div class="w-120px h-120px my-36px">
|
||||
<div class="relative h-full animate-spin">
|
||||
@ -26,12 +28,8 @@ export function loading() {
|
||||
</div>
|
||||
<h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export function setupLoading() {
|
||||
const app = document.getElementById('app');
|
||||
|
||||
if (app) {
|
||||
app.innerHTML = loading();
|
||||
app.innerHTML = loading;
|
||||
}
|
||||
}
|
||||
|
12
src/typings/components.d.ts
vendored
12
src/typings/components.d.ts
vendored
@ -12,7 +12,6 @@ declare module 'vue' {
|
||||
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
|
||||
BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
|
||||
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
|
||||
copy: typeof import('./../components/custom/menu-tree-select copy.vue')['default']
|
||||
CountTo: typeof import('./../components/custom/count-to.vue')['default']
|
||||
DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
|
||||
DeptTree: typeof import('./../components/custom/dept-tree.vue')['default']
|
||||
@ -31,27 +30,17 @@ declare module 'vue' {
|
||||
IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
|
||||
'IconHugeicons:configuration01': typeof import('~icons/hugeicons/configuration01')['default']
|
||||
IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
|
||||
IconIcRoundDownload: typeof import('~icons/ic/round-download')['default']
|
||||
IconIcRoundEdit: typeof import('~icons/ic/round-edit')['default']
|
||||
IconIcRoundFileUpload: typeof import('~icons/ic/round-file-upload')['default']
|
||||
IconIcRoundImage: typeof import('~icons/ic/round-image')['default']
|
||||
IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
|
||||
IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
|
||||
IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
|
||||
IconIcRoundUpload: typeof import('~icons/ic/round-upload')['default']
|
||||
IconLocalBanner: typeof import('~icons/local/banner')['default']
|
||||
'IconMaterialSymbols:add': typeof import('~icons/material-symbols/add')['default']
|
||||
'IconMaterialSymbols:collapseAllRounded': typeof import('~icons/material-symbols/collapse-all-rounded')['default']
|
||||
'IconMaterialSymbols:deleteOutline': typeof import('~icons/material-symbols/delete-outline')['default']
|
||||
'IconMaterialSymbols:download2Rounded': typeof import('~icons/material-symbols/download2-rounded')['default']
|
||||
'IconMaterialSymbols:downloadRounded': typeof import('~icons/material-symbols/download-rounded')['default']
|
||||
'IconMaterialSymbols:expandAllRounded': typeof import('~icons/material-symbols/expand-all-rounded')['default']
|
||||
'IconMaterialSymbols:imageOutline': typeof import('~icons/material-symbols/image-outline')['default']
|
||||
'IconMaterialSymbols:lockOpenOutlineRounded': typeof import('~icons/material-symbols/lock-open-outline-rounded')['default']
|
||||
'IconMaterialSymbols:refreshRounded': typeof import('~icons/material-symbols/refresh-rounded')['default']
|
||||
'IconMaterialSymbols:settingsOutlineRounded': typeof import('~icons/material-symbols/settings-outline-rounded')['default']
|
||||
'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
|
||||
'IconMaterialSymbols:upload2Rounded': typeof import('~icons/material-symbols/upload2-rounded')['default']
|
||||
'IconMaterialSymbols:uploadRounded': typeof import('~icons/material-symbols/upload-rounded')['default']
|
||||
'IconMaterialSymbols:warningOutlineRounded': typeof import('~icons/material-symbols/warning-outline-rounded')['default']
|
||||
IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
|
||||
@ -59,7 +48,6 @@ declare module 'vue' {
|
||||
IconMdiDrag: typeof import('~icons/mdi/drag')['default']
|
||||
IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
|
||||
IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
|
||||
IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
|
||||
'IconQuill:collapse': typeof import('~icons/quill/collapse')['default']
|
||||
'IconQuill:expand': typeof import('~icons/quill/expand')['default']
|
||||
IconUilSearch: typeof import('~icons/uil/search')['default']
|
||||
|
@ -1,8 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { loading as loadingHtml } from '@/plugins/loading';
|
||||
import { fetchSocialLoginCallback } from '@/service/api';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
@ -10,7 +9,7 @@ import { useRouterPush } from '@/hooks/common/router';
|
||||
const route = useRoute();
|
||||
const authStore = useAuthStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
const { loading, startLoading, endLoading } = useLoading();
|
||||
const { loading, startLoading, endLoading } = useLoading(true);
|
||||
|
||||
/**
|
||||
* 接收Route传递的参数
|
||||
@ -23,18 +22,27 @@ const source = route.query.source as string;
|
||||
const stateJson = state ? JSON.parse(atob(state)) : {};
|
||||
const tenantId = (stateJson.tenantId as string) ?? '000000';
|
||||
const domain = (stateJson.domain as string) ?? window.location.host;
|
||||
const msg = ref('正在登录,请稍后......');
|
||||
|
||||
const processResponse = async () => {
|
||||
window.$message?.success('登录成功');
|
||||
msg.value = '登录成功,2s 后即将跳转至首页';
|
||||
setTimeout(() => {
|
||||
msg.value = '登录成功,1s 后即将跳转至首页';
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
routerPushByKey('home');
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleError = () => {
|
||||
msg.value = '登录失败,2s 后即将跳转至登录页';
|
||||
setTimeout(() => {
|
||||
msg.value = '登录失败,1s 后即将跳转至登录页';
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
routerPushByKey('login');
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const callbackByCode = async (data: Api.Auth.SocialLoginForm) => {
|
||||
@ -90,19 +98,17 @@ const init = async () => {
|
||||
onMounted(async () => {
|
||||
await init();
|
||||
});
|
||||
|
||||
watch(loading, val => {
|
||||
if (val) {
|
||||
const app = document.getElementById('social-callback');
|
||||
if (app) {
|
||||
app.innerHTML = loadingHtml();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loading" id="social-callback"></div>
|
||||
<div class="fixed-center flex-col bg-layout">
|
||||
<div class="my-36px h-120px w-120px">
|
||||
<div class="relative h-full" :class="{ 'animate-spin': loading }">
|
||||
<img src="@/assets/imgs/logo.png" width="120" />
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-28px text-primary font-500">{{ msg }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
Loading…
Reference in New Issue
Block a user