From ce0dc6c2320984a182f0a78bc7aff38ebd0ba890 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 4 Jan 2026 18:12:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=90=8D=E5=AF=86=E7=A0=81=E7=99=BB=E5=BD=95=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=EF=BC=8C=E7=9B=B4=E6=8E=A5=E8=B7=B3=E8=BD=AC=E5=88=B0?=
 =?UTF-8?q?=20OAuth2=20=E6=8E=88=E6=9D=83=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除登录弹窗中的用户名密码表单及相关代码
- 修改 handleLogin 函数，直接调用 authStore.login() 跳转到授权页面
- 优化注册成功后的流程，自动跳转到 OAuth2 登录
- 清理未使用的代码和导入（axios, switchToSignup 等）
- 符合 OAuth2 最佳实践，提升安全性和用户体验
---
 src/views/HomePage.vue | 157 +++++++----------------------------------
 1 file changed, 24 insertions(+), 133 deletions(-)

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index e84671c..bb81d4c 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -9,7 +9,6 @@ import { signupApi } from '@/shared/api/auth'
 import AppHeader from '@/app/layouts/AppHeader.vue'
 import AppSidebar from '@/app/layouts/AppSidebar.vue'
 import { compressImageFile } from '@/shared/utils/imageResize'
-import axios from 'axios'
 
 const message = useMessage()
 const authStore = useAuthStore()
@@ -17,30 +16,10 @@ const appName = computed(() => localStorage.getItem('appName') || 'Jingrow')
 const currentYear = computed(() => new Date().getFullYear())
 const logoUrl = computed(() => '/logo.svg')
 
-// 登录/注册弹窗状态
-const showLoginModal = ref(false)
+// 注册弹窗状态
 const showSignupModal = ref(false)
-const loginFormRef = ref()
 const signupFormRef = ref()
-const loginLoading = ref(false)
 const signupLoading = ref(false)
-const showSignupLink = ref(true)
-
-// 登录表单
-const loginFormData = reactive({
-  username: '',
-  password: ''
-})
-
-const loginRules = {
-  username: [
-    { required: true, message: t('Please enter username'), trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: t('Please enter password'), trigger: 'blur' },
-    { min: 6, message: t('Password must be at least 6 characters'), trigger: 'blur' }
-  ]
-}
 
 // 注册表单
 const signupFormData = reactive({
@@ -134,36 +113,21 @@ const signupRules = computed(() => {
   return rules
 })
 
-const handleLogin = () => {
-  showLoginModal.value = true
+const handleLogin = async () => {
+  try {
+    // 直接跳转到 OAuth2 授权页面
+    await authStore.login()
+    // login 方法会重定向到授权页面，这里不会继续执行
+  } catch (error: any) {
+    console.error('Login error:', error)
+    message.error(error.message || t('Login failed, please try again'))
+  }
 }
 
 const handleSignup = () => {
   showSignupModal.value = true
 }
 
-const handleLoginSubmit = async () => {
-  try {
-    await loginFormRef.value?.validate()
-    loginLoading.value = true
-
-    const result = await authStore.login(loginFormData.username, loginFormData.password)
-    
-    if (result.success) {
-      message.success(t('Login successful'))
-      showLoginModal.value = false
-      loginFormData.username = ''
-      loginFormData.password = ''
-    } else {
-      message.error(result.error || t('Login failed'))
-    }
-  } catch (error) {
-    console.error('Login error:', error)
-    message.error(t('Login failed, please check username and password'))
-  } finally {
-    loginLoading.value = false
-  }
-}
 
 const handleSignupSubmit = async () => {
   try {
@@ -191,19 +155,18 @@ const handleSignupSubmit = async () => {
         signupFormData.email = ''
         signupFormData.phoneNumber = ''
       } else {
-        const loginResult = await authStore.login(signupFormData.username, signupFormData.password)
-        if (loginResult.success) {
-          showSignupModal.value = false
-          signupFormData.username = ''
-          signupFormData.password = ''
-          signupFormData.confirmPassword = ''
-          signupFormData.email = ''
-          signupFormData.phoneNumber = ''
-        } else {
-          message.warning(loginResult.error || t('Sign up successful, but auto login failed. Please login manually'))
-          showSignupModal.value = false
-          showLoginModal.value = true
-        }
+        // 注册成功后，提示用户登录
+        showSignupModal.value = false
+        signupFormData.username = ''
+        signupFormData.password = ''
+        signupFormData.confirmPassword = ''
+        signupFormData.email = ''
+        signupFormData.phoneNumber = ''
+        message.success(t('Sign up successful, please login'))
+        // 延迟跳转到登录页面
+        setTimeout(() => {
+          handleLogin()
+        }, 1000)
       }
     } else {
       const errorMsg = result.error || t('Sign up failed')
@@ -218,14 +181,10 @@ const handleSignupSubmit = async () => {
   }
 }
 
-const switchToSignup = () => {
-  showLoginModal.value = false
-  showSignupModal.value = true
-}
 
 const switchToLogin = () => {
   showSignupModal.value = false
-  showLoginModal.value = true
+  handleLogin()
 }
 
 // 登录状态
@@ -651,7 +610,7 @@ const handleDownload = async () => {
   // 检查登录状态
   if (!isLoggedIn.value) {
     message.warning(t('Please login to download'))
-    showLoginModal.value = true
+    handleLogin()
     return
   }
 
@@ -1464,74 +1423,6 @@ onUnmounted(() => {
       </n-layout>
     </template>
 
-    <!-- 登录弹窗 -->
-    <n-modal
-      v-model:show="showLoginModal"
-      preset="card"
-      :title="appName"
-      size="large"
-      :bordered="false"
-      :mask-closable="true"
-      style="max-width: 500px;"
-      class="auth-modal"
-    >
-      <n-form
-        ref="loginFormRef"
-        :model="loginFormData"
-        :rules="loginRules"
-        size="medium"
-        :show-label="false"
-        @keyup.enter="handleLoginSubmit"
-      >
-        <n-form-item path="username">
-          <n-input
-            v-model:value="loginFormData.username"
-            :placeholder="t('Username')"
-            :input-props="{ autocomplete: 'username' }"
-          >
-            <template #prefix>
-              <Icon icon="tabler:user" />
-            </template>
-          </n-input>
-        </n-form-item>
-
-        <n-form-item path="password">
-          <n-input
-            v-model:value="loginFormData.password"
-            type="password"
-            :placeholder="t('Password')"
-            :input-props="{ autocomplete: 'current-password' }"
-            show-password-on="click"
-          >
-            <template #prefix>
-              <Icon icon="tabler:lock" />
-            </template>
-          </n-input>
-        </n-form-item>
-
-        <n-form-item>
-          <n-button
-            type="primary"
-            size="large"
-            block
-            :loading="loginLoading"
-            @click="handleLoginSubmit"
-            class="brand-button"
-          >
-            {{ t('Login') }}
-          </n-button>
-        </n-form-item>
-      </n-form>
-
-      <div class="auth-footer" v-if="showSignupLink">
-        <n-text depth="3">
-          {{ t("Don't have an account?") }}
-          <a href="javascript:void(0)" class="auth-link" @click="switchToSignup">
-            {{ t('Sign up') }}
-          </a>
-        </n-text>
-      </div>
-    </n-modal>
 
     <!-- 注册弹窗 -->
     <n-modal