From 2c6ad81720720e25c0a2237a17d632efb5b12397 Mon Sep 17 00:00:00 2001
From: landaiqing <3517283258@qq.com>
Date: Fri, 30 Aug 2024 21:52:48 +0800
Subject: [PATCH] :bug: fixed the third-party login bug

---
 components.d.ts                     |   4 -
 src/components/Card3D/Card3D.vue    |   2 +-
 src/store/index.ts                  |   2 +
 src/store/modules/clientStore.ts    |  31 ++++++
 src/views/Forget/ForgetPage.vue     |  18 +++-
 src/views/Forget/index.scss         | 147 ++++++++++++++++++++++++++--
 src/views/Login/LoginFooter.vue     |  31 +++---
 src/views/Login/index.scss          |   1 +
 src/views/Main/MainPage.vue         |  21 ++--
 src/views/QRLogin/QRLogin.vue       |  26 +++--
 src/views/QRLogin/QRLoginFooter.vue |  43 ++++----
 11 files changed, 254 insertions(+), 72 deletions(-)
 create mode 100644 src/store/modules/clientStore.ts

diff --git a/components.d.ts b/components.d.ts
index 4c88db3..ba379e3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
-    AButtonGroup: typeof import('ant-design-vue/es')['ButtonGroup']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
@@ -22,8 +21,6 @@ declare module 'vue' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AQrcode: typeof import('ant-design-vue/es')['QRCode']
-    ASelect: typeof import('ant-design-vue/es')['Select']
-    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
@@ -47,7 +44,6 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SafetyOutlined: typeof import('@ant-design/icons-vue')['SafetyOutlined']
     TabletOutlined: typeof import('@ant-design/icons-vue')['TabletOutlined']
-    TestTheme: typeof import('./src/views/TestTheme.vue')['default']
     UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
     WechatOutlined: typeof import('@ant-design/icons-vue')['WechatOutlined']
   }
diff --git a/src/components/Card3D/Card3D.vue b/src/components/Card3D/Card3D.vue
index ee6c98f..0a59d42 100644
--- a/src/components/Card3D/Card3D.vue
+++ b/src/components/Card3D/Card3D.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="cards" style="transform: rotateX(-10.2deg) rotateY(-17.8deg);">
-    <h3>Movies</h3>
+    <h3>Album</h3>
     <h1>Popular</h1>
     <div class="card card__one">
       <div class="card__bg" style="background-position: -8.01px 4.59px;"></div>
diff --git a/src/store/index.ts b/src/store/index.ts
index 5fff0eb..29705dd 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,11 +1,13 @@
 import {useAuthStore} from '@/store/modules/userStore.ts';
 import {useThemeStore} from "@/store/modules/themeStore.ts";
 import {langStore} from "@/store/modules/langStore.ts";
+import {useClientStore} from "@/store/modules/clientStore.ts";
 
 export default function useStore() {
     return {
         user: useAuthStore(),
         theme: useThemeStore(),
         lang: langStore(),
+        client: useClientStore(),
     };
 }
diff --git a/src/store/modules/clientStore.ts b/src/store/modules/clientStore.ts
new file mode 100644
index 0000000..b43914c
--- /dev/null
+++ b/src/store/modules/clientStore.ts
@@ -0,0 +1,31 @@
+import {defineStore} from 'pinia';
+import {ref} from "vue";
+
+export const useClientStore = defineStore(
+    'clientId',
+    () => {
+        const clientId = ref<string>();
+
+        function setClientId(id: string) {
+            clientId.value = id;
+        }
+
+        function getClientId() {
+            return clientId.value;
+        }
+
+        return {
+            clientId,
+            setClientId,
+            getClientId
+        };
+    },
+    {
+        // 开启数据持久化
+        persist: {
+            key: 'clientId',
+            storage: localStorage,
+            paths: ["clientId"],
+        }
+    }
+);
diff --git a/src/views/Forget/ForgetPage.vue b/src/views/Forget/ForgetPage.vue
index e175794..5c8e4c6 100644
--- a/src/views/Forget/ForgetPage.vue
+++ b/src/views/Forget/ForgetPage.vue
@@ -91,6 +91,20 @@
           :events="resetPasswordRotateEvent"
       />
     </div>
+    <div class="area">
+      <ul class="circles">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -190,9 +204,7 @@ const countDown = () => {
   } else {
     localStorage.setItem('start_time_send_captcha', String(nowTime));
   }
-
   state.countDownTime = surplus;
-
   if (timer) {
     clearInterval(timer);
   }
@@ -258,7 +270,7 @@ async function resetPasswordSubmit() {
 }
 
 /**
- * 刷新验证码  节流
+ * 刷新验证码 防抖
  */
 const refreshCaptcha = useDebounceFn(getRotateCaptcha, 3000);
 
diff --git a/src/views/Forget/index.scss b/src/views/Forget/index.scss
index e388a6a..eab3564 100644
--- a/src/views/Forget/index.scss
+++ b/src/views/Forget/index.scss
@@ -4,16 +4,16 @@
     //background-color: rgb(238, 255, 238);
     width: 100vw;
     height: 100vh;
-    /* 加载背景图 */
-    background-image: url("@/assets/images/background.png");
-    /* 背景图垂直、水平均居中 */
-    background-position: center center;
-    /* 背景图不平铺 */
-    background-repeat: no-repeat;
-    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
-    background-attachment: fixed;
-    /* 让背景图基于容器大小伸缩 */
-    background-size: cover;
+    ///* 加载背景图 */
+    //background-image: url("@/assets/images/background.png");
+    ///* 背景图垂直、水平均居中 */
+    //background-position: center center;
+    ///* 背景图不平铺 */
+    //background-repeat: no-repeat;
+    ///* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+    //background-attachment: fixed;
+    ///* 让背景图基于容器大小伸缩 */
+    //background-size: cover;
     z-index: -1;
 
     .forget-left {
@@ -107,4 +107,131 @@
         background-color: rgba(0, 0, 0, 0.5);
     }
 
+
+    .area {
+        background: #b9f187;
+        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+        width: 100%;
+        height: 100vh;
+        z-index: -1;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+    }
+
+    .circles {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .circles li {
+        position: absolute;
+        display: block;
+        list-style: none;
+        width: 20px;
+        height: 20px;
+        background: rgba(255, 255, 255, 0.5);
+        animation: animate 25s linear infinite;
+        bottom: -150px;
+
+    }
+
+    .circles li:nth-child(1) {
+        left: 25%;
+        width: 80px;
+        height: 80px;
+        animation-delay: 0s;
+    }
+
+
+    .circles li:nth-child(2) {
+        left: 10%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 2s;
+        animation-duration: 12s;
+    }
+
+    .circles li:nth-child(3) {
+        left: 70%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 4s;
+    }
+
+    .circles li:nth-child(4) {
+        left: 40%;
+        width: 60px;
+        height: 60px;
+        animation-delay: 0s;
+        animation-duration: 18s;
+    }
+
+    .circles li:nth-child(5) {
+        left: 65%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 0s;
+    }
+
+    .circles li:nth-child(6) {
+        left: 75%;
+        width: 110px;
+        height: 110px;
+        animation-delay: 3s;
+    }
+
+    .circles li:nth-child(7) {
+        left: 35%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 7s;
+    }
+
+    .circles li:nth-child(8) {
+        left: 50%;
+        width: 25px;
+        height: 25px;
+        animation-delay: 15s;
+        animation-duration: 45s;
+    }
+
+    .circles li:nth-child(9) {
+        left: 20%;
+        width: 15px;
+        height: 15px;
+        animation-delay: 2s;
+        animation-duration: 35s;
+    }
+
+    .circles li:nth-child(10) {
+        left: 85%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 0s;
+        animation-duration: 11s;
+    }
+
+
+    @keyframes animate {
+
+        0% {
+            transform: translateY(0) rotate(0deg);
+            opacity: 1;
+            border-radius: 0;
+        }
+
+        100% {
+            transform: translateY(-1000px) rotate(720deg);
+            opacity: 0;
+            border-radius: 50%;
+        }
+
+    }
+
 }
diff --git a/src/views/Login/LoginFooter.vue b/src/views/Login/LoginFooter.vue
index 175ef8f..dea4c7f 100644
--- a/src/views/Login/LoginFooter.vue
+++ b/src/views/Login/LoginFooter.vue
@@ -73,25 +73,23 @@ async function getQQRedirectUrl() {
  *  获取client_id
  */
 async function getClientId() {
-  const id: string | null = localStorage.getItem('client_id');
-  if (!id) {
-    const res: any = await generateClientId();
-    if (res.code === 0 && res.data) {
-      localStorage.setItem('client_id', res.data);
-    }
+  const client = useStore().client;
+  const res: any = await generateClientId();
+  if (res.code === 0 && res.data) {
+    client.setClientId(res.data);
   }
 }
 
 /**
  *  获取本地client_id
  */
-function getLocalClientId(): string | null {
-  const clientID: string | null = localStorage.getItem('client_id');
-  if (clientID) {
-    return clientID;
+function getLocalClientId() {
+  const client = useStore().client;
+  if (client.getClientId()) {
+    return client.getClientId();
   } else {
     getClientId();
-    return localStorage.getItem('client_id');
+    return client.getClientId();
   }
 }
 
@@ -126,7 +124,11 @@ function openGithubUrl() {
         setTimeout(() => {
           router.push('/main');
         }, 1000);
+      } else {
+        message.error(t('login.loginError'));
+        window.removeEventListener("message", messageHandler);
       }
+
     }
   };
   window.addEventListener("message", messageHandler);
@@ -164,6 +166,9 @@ function openGiteeUrl() {
         setTimeout(() => {
           router.push('/main');
         }, 1000);
+      } else {
+        message.error(t('login.loginError'));
+        window.removeEventListener("message", messageHandler);
       }
     }
   };
@@ -201,7 +206,11 @@ function openQQUrl() {
         setTimeout(() => {
           router.push('/main');
         }, 1000);
+      } else {
+        message.error(t('login.loginError'));
+        window.removeEventListener("message", messageHandler);
       }
+
     }
   };
   window.addEventListener("message", messageHandler);
diff --git a/src/views/Login/index.scss b/src/views/Login/index.scss
index 7fd7026..a0e6a4d 100644
--- a/src/views/Login/index.scss
+++ b/src/views/Login/index.scss
@@ -19,6 +19,7 @@
 
     .login-left {
         width: 50%;
+        background: transparent;
     }
 
     .login-right {
diff --git a/src/views/Main/MainPage.vue b/src/views/Main/MainPage.vue
index c3a7522..47a9c3c 100644
--- a/src/views/Main/MainPage.vue
+++ b/src/views/Main/MainPage.vue
@@ -1,20 +1,19 @@
 <template>
   <div>
     <h1>Welcome to Main Page</h1>
-    <AButton @click="handleClick">获取用户数据</AButton>
-    {{ data }}
+<!--    <AButton @click="handleClick">获取用户数据</AButton>-->
   </div>
 </template>
 <script setup lang="ts">
-import {useRequest} from "alova/client";
-import {getUserInfo} from "@/api/user";
-
-const {data, send} = useRequest(getUserInfo, {
-  immediate: false
-});
-const handleClick = () => {
-  send();
-};
+// import {useRequest} from "alova/client";
+// import {getUserInfo} from "@/api/user";
+//
+// const {data, send} = useRequest(getUserInfo, {
+//   immediate: false
+// });
+// const handleClick = () => {
+//   send();
+// };
 </script>
 <style scoped>
 
diff --git a/src/views/QRLogin/QRLogin.vue b/src/views/QRLogin/QRLogin.vue
index 14de684..f6aeed9 100644
--- a/src/views/QRLogin/QRLogin.vue
+++ b/src/views/QRLogin/QRLogin.vue
@@ -75,12 +75,10 @@ const status = ref<string>('loading');
  *  获取client_id
  */
 async function getClientId() {
-  const id: string | null = localStorage.getItem('client_id');
-  if (!id) {
-    const res: any = await generateClientId();
-    if (res.code === 0 && res.data) {
-      localStorage.setItem('client_id', res.data);
-    }
+  const client = useStore().client;
+  const res: any = await generateClientId();
+  if (res.code === 0 && res.data) {
+    client.setClientId(res.data);
   }
 }
 
@@ -89,13 +87,13 @@ async function getClientId() {
  *  获取二维码
  */
 async function getQrCode() {
-  const clientId: string | null = localStorage.getItem('client_id');
-  if (!clientId) {
+  const client = useStore().client;
+  if (!client.getClientId()) {
     status.value = 'expired';
     await getClientId();
     await getQrCode();
   } else {
-    const res: any = await generateQrCode(clientId);
+    const res: any = await generateQrCode(client.getClientId() as string);
     if (res.code === 0 && res.data) {
       status.value = 'active';
       qrcode.value = res.data;
@@ -108,13 +106,13 @@ async function getQrCode() {
 /**
  *  获取本地client_id
  */
-function getLocalClientId(): string | null {
-  const clientID: string | null = localStorage.getItem('client_id');
-  if (clientID) {
-    return clientID;
+function getLocalClientId() {
+  const client = useStore().client;
+  if (client.getClientId()) {
+    return client.getClientId();
   } else {
     getClientId();
-    return localStorage.getItem('client_id');
+    return client.getClientId();
   }
 }
 
diff --git a/src/views/QRLogin/QRLoginFooter.vue b/src/views/QRLogin/QRLoginFooter.vue
index a769bb3..c21cc72 100644
--- a/src/views/QRLogin/QRLoginFooter.vue
+++ b/src/views/QRLogin/QRLoginFooter.vue
@@ -59,19 +59,6 @@ async function getGiteeRedirectUrl() {
   }
 }
 
-/**
- *  获取client_id
- */
-async function getClientId() {
-  const id: string | null = localStorage.getItem('client_id');
-  if (!id) {
-    const res: any = await generateClientId();
-    if (res.code === 0 && res.data) {
-      localStorage.setItem('client_id', res.data);
-    }
-  }
-}
-
 /**
  * Get the redirect url of QQ OAuth
  */
@@ -83,16 +70,27 @@ async function getQQRedirectUrl() {
   }
 }
 
+/**
+ *  获取client_id
+ */
+async function getClientId() {
+  const client = useStore().client;
+  const res: any = await generateClientId();
+  if (res.code === 0 && res.data) {
+    client.setClientId(res.data);
+  }
+}
+
 /**
  *  获取本地client_id
  */
-function getLocalClientId(): string | null {
-  const clientID: string | null = localStorage.getItem('client_id');
-  if (clientID) {
-    return clientID;
+function getLocalClientId() {
+  const client = useStore().client;
+  if (client.getClientId()) {
+    return client.getClientId();
   } else {
     getClientId();
-    return localStorage.getItem('client_id');
+    return client.getClientId();
   }
 }
 
@@ -127,6 +125,9 @@ function openGithubUrl() {
         setTimeout(() => {
           router.push('/main');
         }, 1000);
+      } else {
+        message.error(t('login.loginError'));
+        window.removeEventListener("message", messageHandler);
       }
     }
   };
@@ -165,6 +166,9 @@ function openGiteeUrl() {
         setTimeout(() => {
           router.push('/main');
         }, 1000);
+      }else {
+        message.error(t('login.loginError'));
+        window.removeEventListener("message", messageHandler);
       }
     }
   };
@@ -202,6 +206,9 @@ function openQQUrl() {
         setTimeout(() => {
           router.push('/main');
         }, 1000);
+      }else {
+        message.error(t('login.loginError'));
+        window.removeEventListener("message", messageHandler);
       }
     }
   };