style(OAuth Login): 💄 optimize OAuth login style

locales/en/login.json

@@ -34,6 +34,12 @@
     "acc_pss": "Account & Password Login"
   },
   "register": "Register Account",
+  "third_party": {
+    "title": "OAuth Login / Sign Up",
+    "gitee": "Login with Gitee",
+    "github": "Login with GitHub",
+    "gitcode": "Login with GitCode"
+  },
   "qr_code_expired": "QR code expired",
   "qr_code_expired_hint": "Please try again later",
   "qr_code_scan_hint": "Please use HuLa App to scan the QR code",

locales/zh-CN/login.json

@@ -34,6 +34,12 @@
     "acc_pss": "账密登录"
   },
   "register": "注册账号",
+  "third_party": {
+    "title": "第三方登录/注册",
+    "gitee": "使用 Gitee 登录",
+    "github": "使用 GitHub 登录",
+    "gitcode": "使用 GitCode 登录"
+  },
   "qr_code_expired": "二维码已过期",
   "qr_code_expired_hint": "请稍后再试",
   "qr_code_scan_hint": "请使用 HuLa App 扫码登录",

src/views/loginWindow/Login.vue

@@ -5,9 +5,9 @@
     <ActionBar :max-w="false" :shrink="false" proxy />
 
     <!--  手动登录样式  -->
-    <n-flex vertical :size="25" v-if="uiState === 'manual'">
+    <n-flex vertical :size="22" v-if="uiState === 'manual'">
       <!-- 头像 -->
-      <n-flex justify="center" class="w-full pt-35px" data-tauri-drag-region>
+      <n-flex justify="center" class="w-full pt-12px" data-tauri-drag-region>
         <n-avatar
           class="welcome size-80px rounded-50% border-(2px solid #fff) dark:border-(2px solid #606060)"
           :color="themes.content === ThemeEnum.DARK ? '#282828' : '#fff'"
@@ -102,7 +102,7 @@
           :disabled="loginDisabled"
           tertiary
           style="color: #fff"
-          class="gradient-button w-full mt-8px mb-50px"
+          class="gradient-button w-full mt-8px mb-10px"
           @click="normalLogin('PC', true, false)">
           <span>{{ loginText }}</span>
         </n-button>
@@ -145,6 +145,11 @@
       </n-flex>
     </n-flex>
 
+    <!-- 第三方登录 -->
+    <div class="w-full pb-22px pt-3px">
+      <ThirdPartyLogin :login-context="loginContext" />
+    </div>
+
     <!-- 底部操作栏 -->
     <div class="text-14px grid grid-cols-[1fr_auto_1fr] items-center gap-x-12px w-full" id="bottomBar">
       <div
@@ -183,12 +188,6 @@
               @click="createWebviewWindow('忘记密码', 'forgetPassword', 600, 600)">
               {{ t('login.option.items.forget') }}
             </div>
-            <div class="text-14px cursor-pointer hover:bg-#90909030 hover:rounded-6px p-8px" @click="giteeLogin()">
-              Gitee登录
-            </div>
-            <div class="text-14px cursor-pointer hover:bg-#90909030 hover:rounded-6px p-8px" @click="githubLogin()">
-              GitHub登录
-            </div>
             <div
               v-if="!isCompatibility()"
               @click="router.push('/network')"
@@ -226,6 +225,7 @@ import { clearListener } from '@/utils/ReadCountQueue'
 import { useLogin } from '@/hooks/useLogin'
 import { formatBottomText } from '@/utils/Formatting'
 import { ThemeEnum } from '@/enums'
+import ThirdPartyLogin, { type ThirdPartyLoginContext } from './ThirdPartyLogin.vue'
 
 const { t } = useI18n()
 
@@ -249,6 +249,12 @@ const moreShow = ref(false)
 const { createWebviewWindow, createModalWindow, getWindowPayload } = useWindow()
 const { checkUpdate, CHECK_UPDATE_LOGIN_TIME } = useCheckUpdate()
 const { normalLogin, giteeLogin, githubLogin, loading, loginText, loginDisabled, info, uiState } = useLogin()
+const loginContext: ThirdPartyLoginContext = {
+  giteeLogin,
+  githubLogin,
+  loading,
+  loginDisabled
+}
 
 const driverSteps = computed<DriverStepConfig[]>(() => [
   {

src/views/loginWindow/QRCode.vue

@@ -4,11 +4,11 @@
     <ActionBar :max-w="false" :shrink="false" proxy data-tauri-drag-region />
 
     <n-flex justify="center" class="mt-15px" data-tauri-drag-region>
-      <img src="/hula.png" class="w-140px h-60px drop-shadow-xl" alt="" data-tauri-drag-region />
+      <img src="/hula.png" class="w-100px h-40px drop-shadow-xl" alt="" data-tauri-drag-region />
     </n-flex>
 
     <!-- 二维码 -->
-    <n-flex justify="center" class="mt-25px" data-tauri-drag-region>
+    <n-flex justify="center" class="mt-15px" data-tauri-drag-region>
       <n-skeleton v-if="loading" style="border-radius: 12px" :width="204" :height="204" :sharp="false" size="medium" />
       <div v-else class="relative">
         <n-qr-code
@@ -55,8 +55,13 @@
       {{ loadText }}
     </n-flex>
 
+    <!-- 第三方登录 -->
+    <div class="w-full pb-22px pt-14px">
+      <ThirdPartyLogin :extra-disabled="thirdPartyExtraDisabled" :login-context="loginContext" />
+    </div>
+
     <!-- 底部操作栏 -->
-    <n-flex justify="center" class="text-14px mt-48px" data-tauri-drag-region>
+    <n-flex justify="center" class="text-14px" data-tauri-drag-region>
       <div class="color-#13987f cursor-pointer" @click="router.push('/login')">
         {{ t('login.qr.actions.account_login') }}
       </div>
@@ -76,12 +81,14 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useWindow } from '@/hooks/useWindow.ts'
 import router from '@/router'
+import { useLogin } from '@/hooks/useLogin'
 import { getEnhancedFingerprint } from '@/services/fingerprint'
 import { loginCommand } from '@/services/tauriCommand'
 import { TauriCommand } from '@/enums'
 import { useGlobalStore } from '@/stores/global'
 import { useSettingStore } from '@/stores/setting'
 import { checkQRStatus, generateQRCode } from '@/utils/ImRequestUtils'
+import ThirdPartyLogin, { type ThirdPartyLoginContext } from './ThirdPartyLogin.vue'
 
 const globalStore = useGlobalStore()
 const settingStore = useSettingStore()
@@ -120,6 +127,16 @@ const scanStatusText = computed(() =>
   scanStatus.value.textKey ? t(`login.qr.overlay.${scanStatus.value.textKey}`) : ''
 )
 
+// 第三方登录相关逻辑
+const { giteeLogin, githubLogin, loading: loginLoading, loginDisabled } = useLogin()
+const loginContext: ThirdPartyLoginContext = {
+  giteeLogin,
+  githubLogin,
+  loading: loginLoading,
+  loginDisabled
+}
+const thirdPartyExtraDisabled = computed(() => loading.value)
+
 /** 刷新二维码 */
 const refreshQRCode = () => {
   if (scanStatus.value.status !== 'error' && scanStatus.value.status !== 'auth') {

src/views/loginWindow/ThirdPartyLogin.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="flex items-center justify-center gap-12px text-12px color-#909090">
+    <span class="h-px w-60px bg-#dadada dark:bg-#3a3a3a"></span>
+    <span>{{ thirdPartyLabel }}</span>
+    <span class="h-px w-60px bg-#dadada dark:bg-#3a3a3a"></span>
+  </div>
+  <div class="flex justify-center gap-28px mt-16px">
+    <div
+      v-for="item in thirdPartyOptions"
+      :key="item.key"
+      :title="item.label"
+      :aria-label="item.label"
+      :disabled="thirdPartyDisabled"
+      @click="item.action()">
+      <svg :class="item.style" class="size-22px cursor-pointer">
+        <use :href="item.icon"></use>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useLogin } from '@/hooks/useLogin'
+
+export type ThirdPartyLoginContext = Pick<
+  ReturnType<typeof useLogin>,
+  'giteeLogin' | 'githubLogin' | 'loading' | 'loginDisabled'
+>
+
+const props = withDefaults(
+  defineProps<{
+    extraDisabled?: boolean
+    loginContext?: ThirdPartyLoginContext
+  }>(),
+  {
+    extraDisabled: false
+  }
+)
+
+const { t } = useI18n()
+
+const resolvedContext = props.loginContext ?? useLogin()
+
+const thirdPartyLabel = computed(() => t('login.third_party.title'))
+const thirdPartyOptions = computed(() => [
+  {
+    key: 'gitee',
+    label: t('login.third_party.gitee'),
+    icon: '#gitee-login',
+    style: 'color-#d5304f dark:color-#d5304f80',
+    action: resolvedContext.giteeLogin
+  },
+  {
+    key: 'github',
+    label: t('login.third_party.github'),
+    icon: '#github-login',
+    style: 'color-#303030 dark:color-#fefefe90',
+    action: resolvedContext.githubLogin
+  },
+  {
+    key: 'gitcode',
+    label: t('login.third_party.gitcode'),
+    icon: '#gitcode-login',
+    style: 'color-#d5304f dark:color-#d5304f80',
+    action: () => {
+      window.$message.warning('GitCode 正在对接')
+    }
+  }
+])
+
+const thirdPartyDisabled = computed(
+  () => resolvedContext.loading.value || resolvedContext.loginDisabled.value || props.extraDisabled
+)
+</script>