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

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>