From 287c667d6815e3263d12fa1541d9270890892328 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Wed, 17 Apr 2024 21:04:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AE=8C=E5=96=84=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=85=B6=E4=BB=96=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/auth/index.ts                 |  5 +++
 src/apis/auth/type.ts                  |  5 +++
 src/views/home/components/WorkCard.vue |  1 -
 src/views/login/index.vue              | 44 ++++++++++++++++++++++++--
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/apis/auth/index.ts b/src/apis/auth/index.ts
index e600191..399c8a3 100644
--- a/src/apis/auth/index.ts
+++ b/src/apis/auth/index.ts
@@ -22,3 +22,8 @@ export const getUserInfo = () => {
 export const getUserRoute = () => {
   return http.get<Auth.RouteItem[]>(`${BASE_URL}/route`)
 }
+
+/** @desc 第三方登录授权 */
+export function socialAuth(source: string) {
+  return http.get<Auth.SocialAuthAuthorizeResp>(`/oauth/${source}`)
+}
\ No newline at end of file
diff --git a/src/apis/auth/type.ts b/src/apis/auth/type.ts
index 05b29f4..1ef2cd3 100644
--- a/src/apis/auth/type.ts
+++ b/src/apis/auth/type.ts
@@ -51,3 +51,8 @@ export interface AccountLoginReq {
 export interface LoginResp {
   token: string
 }
+
+// 第三方登录授权类型
+export interface SocialAuthAuthorizeResp {
+  authorizeUrl: string;
+}
\ No newline at end of file
diff --git a/src/views/home/components/WorkCard.vue b/src/views/home/components/WorkCard.vue
index 90a0a8e..f64cd4b 100644
--- a/src/views/home/components/WorkCard.vue
+++ b/src/views/home/components/WorkCard.vue
@@ -39,7 +39,6 @@ const userStore = useUserStore()
 }
 
 .card {
-  margin-top: $margin;
   .content {
     padding: 8px 20px;
     .welcome {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0bf8de9..896e916 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -50,13 +50,24 @@
                 <a-button type="primary" size="large" long :loading="loading" html-type="submit">登录</a-button>
               </a-space>
             </a-form-item>
+            <div class="login-right__oauth">
+              <a-divider orientation="center">其他登录方式</a-divider>
+              <div class="list">
+                <a class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
+                  <GiSvgIcon name="gitee" :size="24" />
+                </a>
+                <a class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
+                  <GiSvgIcon name="github" :size="24" />
+                </a>
+              </div>
+            </div>
           </a-form>
         </div>
       </a-col>
     </a-row>
 
-    <GiThemeBtn class="theme-btn"></GiThemeBtn>
-    <LoginBg></LoginBg>
+    <GiThemeBtn class="theme-btn" />
+    <LoginBg />
 
     <!--    <div class="footer">
       <div class="beian">
@@ -67,7 +78,7 @@
 </template>
 
 <script setup lang="ts">
-import { getImageCaptcha } from '@/apis'
+import { getImageCaptcha, socialAuth } from '@/apis'
 import { Message, type FormInstance } from '@arco-design/web-vue'
 import LoginBg from './components/LoginBg/index.vue'
 import { useAppStore, useUserStore } from '@/stores'
@@ -147,6 +158,12 @@ const getCaptcha = () => {
   })
 }
 
+// 第三方登录授权
+const onOauth = async (source: string) => {
+  const { data } = await socialAuth(source);
+  window.location.href = data.authorizeUrl;
+}
+
 onMounted(() => {
   getCaptcha()
 })
@@ -230,6 +247,27 @@ onMounted(() => {
     font-size: 13px;
     color: var(--color-text-1);
   }
+  &__oauth {
+    margin-bottom: 20px;
+    :deep(.arco-divider-text) {
+      color: var(--color-text-4);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+    :deep(.arco-divider-horizontal) {
+      border-bottom: 1px solid rgb(229, 230, 235);
+    }
+    .list {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      .item {
+        margin-right: 15px;
+      }
+    }
+  }
 }
 
 .theme-btn {