fix: 修复单点登录回调页面显示

This commit is contained in:
xlsea 2025-05-10 16:18:36 +08:00
parent 0724be3202
commit 83b22c9d5d
3 changed files with 26 additions and 34 deletions

View File

@ -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;
}
}

View File

@ -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']

View File

@ -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>