From df52f3c782424d6353b41bd42c6ba9481b159764 Mon Sep 17 00:00:00 2001 From: Dawn <2439646234@qq.com> Date: Wed, 31 Dec 2025 05:25:47 +0800 Subject: [PATCH] style(OAuth Login): :lipstick: optimize OAuth login style --- locales/en/login.json | 6 ++ locales/zh-CN/login.json | 6 ++ public/icon.js | 2 +- src/views/loginWindow/Login.vue | 24 ++++--- src/views/loginWindow/QRCode.vue | 23 ++++++- src/views/loginWindow/ThirdPartyLogin.vue | 76 +++++++++++++++++++++++ 6 files changed, 124 insertions(+), 13 deletions(-) create mode 100644 src/views/loginWindow/ThirdPartyLogin.vue diff --git a/locales/en/login.json b/locales/en/login.json index 7c6b0a7d..a5d39ede 100644 --- a/locales/en/login.json +++ b/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", diff --git a/locales/zh-CN/login.json b/locales/zh-CN/login.json index dcc5162b..edebe49f 100644 --- a/locales/zh-CN/login.json +++ b/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 扫码登录", diff --git a/public/icon.js b/public/icon.js index 4c6f7a45..4b0e158f 100644 --- a/public/icon.js +++ b/public/icon.js @@ -1 +1 @@ -!function(e){var t,n,d,o,i,a,r='';function c(){i||(i=!0,d())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=r,r=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?["complete","loaded","interactive"].indexOf(document.readyState)>-1?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(d=t,o=e.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}(window); \ No newline at end of file +!function(e){var t,n,d,o,i,a,r='';function c(){i||(i=!0,d())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=r,r=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?["complete","loaded","interactive"].indexOf(document.readyState)>-1?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(d=t,o=e.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}(window); \ No newline at end of file diff --git a/src/views/loginWindow/Login.vue b/src/views/loginWindow/Login.vue index bf42efd7..94b3de5e 100644 --- a/src/views/loginWindow/Login.vue +++ b/src/views/loginWindow/Login.vue @@ -5,9 +5,9 @@ - + - + {{ loginText }} @@ -145,6 +145,11 @@ + +
+ +
+
{{ t('login.option.items.forget') }}
-
- Gitee登录 -
-
- GitHub登录 -
(() => [ { diff --git a/src/views/loginWindow/QRCode.vue b/src/views/loginWindow/QRCode.vue index 7f92ca03..54aeffaf 100644 --- a/src/views/loginWindow/QRCode.vue +++ b/src/views/loginWindow/QRCode.vue @@ -4,11 +4,11 @@ - + - +
+ +
+ +
+ - +
{{ t('login.qr.actions.account_login') }}
@@ -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') { diff --git a/src/views/loginWindow/ThirdPartyLogin.vue b/src/views/loginWindow/ThirdPartyLogin.vue new file mode 100644 index 00000000..8d50b8c1 --- /dev/null +++ b/src/views/loginWindow/ThirdPartyLogin.vue @@ -0,0 +1,76 @@ + + +