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

src/plugins/loading.ts

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

src/typings/components.d.ts

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

src/views/_builtin/social-callback/index.vue

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