feat(login): 添加登录等待页面并优化登录流程

- 新增登录等待页面，展示加载动画
- 优化登录逻辑，处理授权成功后的页面跳转
- 调整单点登录的 redirect_uri 为根路径

src/api/sso.ts

@@ -29,7 +29,7 @@ export const ssoLogin = ({ username, password }: Record<string, any>) => {
     // 统一认证的地址
     sso_uri: `${ssoHost || window.location.origin}/api/blade-auth`,
     // 必须加/
-    redirect_uri: `${window.location.origin}/dashboard/workplace`
+    redirect_uri: `${window.location.origin}/`
   });
 };
 

src/pages/login/index.tsx

@@ -15,13 +15,12 @@ function Login() {
   const handleLogin = async () => {
     const url = new URL(window.location.href);
     const code = url.searchParams.get('code');
-    const { origin } = window.location;
+    const { origin, pathname } = window.location;
 
     setIsNeedLogin(code === null);
-    console.log('code:', code);
 
     if (code) {
-      const callbackUrl = `${origin}`;
+      const callbackUrl = `${origin}/`;
       try {
         // 根据code向后端获取token
         const res: any = await getToken({
@@ -43,7 +42,6 @@ function Login() {
             return;
           }
           else {
-            // 使用Next.js标准路由跳转方式
             router.push('/dashboard/workplace');
           }
         }
@@ -56,29 +54,46 @@ function Login() {
   useEffect(() => {
     document.body.setAttribute('arco-theme', 'light');
 
-    // 模拟Vue的onMounted行为，在组件挂载后执行
     handleLogin();
   }, [router]); // 依赖数组包含router，确保router变化时能正确执行
 
   return (
     <div className={styles.container}>
-      <div className={styles.logo}>
+      <>
-        <Logo />
+        <div className={styles.logo}>
-        <div className={styles['logo-text']}>Arco Design Pro</div>
+          <Logo />
-      </div>
+          <div className={styles['logo-text']}>Arco Design Pro</div>
-      <div className={styles.banner}>
-        <div className={styles['banner-inner']}>
-          <LoginBanner />
         </div>
-      </div>
+        <div className={styles.banner}>
-      <div className={styles.content}>
+          <div className={styles['banner-inner']}>
-        <div className={styles['content-inner']}>
+            <LoginBanner />
-          <LoginForm />
+          </div>
         </div>
-        {/*<div className={styles.footer}>*/}
+        <div className={styles.content}>
-        {/*  <Footer />*/}
+          <div className={styles['content-inner']}>
-        {/*</div>*/}
+            {isNeedLogin ? (
-      </div>
+              <LoginForm />
+            ) : (
+              <div className={styles['loading-content']}>
+                <h3 className={styles['loading-text']}>获取授权中...</h3>
+                <div className={styles['page-loading-warp']}>
+                  <div className={`${styles['ant-spin']} ${styles['ant-spin-lg']} ${styles['ant-spin-spinning']}`}>
+                    <span className={`${styles['ant-spin-dot']} ${styles['ant-spin-dot-spin']}`}>
+                      <i className={styles['ant-spin-dot-item']} />
+                      <i className={styles['ant-spin-dot-item']} />
+                      <i className={styles['ant-spin-dot-item']} />
+                      <i className={styles['ant-spin-dot-item']} />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          {/*<div className={styles.footer}>*/}
+          {/*  <Footer />*/}
+          {/*</div>*/}
+        </div>
+      </>
     </div>
   );
 }

src/pages/login/style/index.module.less

@@ -118,3 +118,146 @@
     color: var(--color-text-3) !important;
   }
 }
+
+.loading-content {
+  .page-loading-warp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 26px;
+
+    .ant-spin {
+      position: absolute;
+      display: none;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: rgba(0, 0, 0, 0.65);
+      color: #1890ff;
+      font-size: 14px;
+      font-variant: tabular-nums;
+      line-height: 1.5;
+      text-align: center;
+      list-style: none;
+      opacity: 0;
+      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
+      -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      -webkit-font-feature-settings: 'tnum';
+      font-feature-settings: 'tnum';
+    }
+
+    .ant-spin-spinning {
+      position: static;
+      display: inline-block;
+      opacity: 1;
+    }
+
+    .ant-spin-dot {
+      position: relative;
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      font-size: 20px;
+    }
+
+    .ant-spin-dot-item {
+      position: absolute;
+      display: block;
+      width: 9px;
+      height: 9px;
+      background-color: #0e42d2;
+      border-radius: 100%;
+      -webkit-transform: scale(0.75);
+      -ms-transform: scale(0.75);
+      transform: scale(0.75);
+      -webkit-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+      transform-origin: 50% 50%;
+      opacity: 0.3;
+      -webkit-animation: antspinmove 1s infinite linear alternate;
+      animation: antSpinMove 1s infinite linear alternate;
+    }
+
+    .ant-spin-dot-item:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+
+    .ant-spin-dot-item:nth-child(2) {
+      top: 0;
+      right: 0;
+      -webkit-animation-delay: 0.4s;
+      animation-delay: 0.4s;
+    }
+
+    .ant-spin-dot-item:nth-child(3) {
+      right: 0;
+      bottom: 0;
+      -webkit-animation-delay: 0.8s;
+      animation-delay: 0.8s;
+    }
+
+    .ant-spin-dot-item:nth-child(4) {
+      bottom: 0;
+      left: 0;
+      -webkit-animation-delay: 1.2s;
+      animation-delay: 1.2s;
+    }
+
+    .ant-spin-dot-spin {
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      -webkit-animation: antrotate 1.2s infinite linear;
+      animation: antRotate 1.2s infinite linear;
+    }
+
+    .ant-spin-lg .ant-spin-dot {
+      width: 32px;
+      height: 32px;
+      font-size: 32px;
+    }
+
+    .ant-spin-lg .ant-spin-dot i {
+      width: 14px;
+      height: 14px;
+    }
+
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      .ant-spin-blur {
+        background: #fff;
+        opacity: 0.5;
+      }
+    }
+
+    @-webkit-keyframes antSpinMove {
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes antSpinMove {
+      to {
+        opacity: 1;
+      }
+    }
+
+    @-webkit-keyframes antRotate {
+      to {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+      }
+    }
+
+    @keyframes antRotate {
+      to {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+      }
+    }
+  }
+}