Merge branch 'main' of github.com:nagisa77/OpenIsle

2026-02-21 14:30:59 +08:00 · 2025-08-04 02:06:34 +08:00
parent c154967564 3c7915e672
commit f5f09cddcc
12 changed files with 126 additions and 104 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,23 +1,14 @@
 <template>
  <div id="app">
    <div class="header-container">
-      <HeaderComponent
-        @toggle-menu="menuVisible = !menuVisible"
-        :show-menu-btn="!hideMenu"
-      />
+      <HeaderComponent @toggle-menu="menuVisible = !menuVisible" :show-menu-btn="!hideMenu" />
    </div>

    <div class="main-container">
      <div class="menu-container">
-        <MenuComponent
-          :visible="!hideMenu && menuVisible"
-          @item-click="menuVisible = false"
-        />
+        <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
      </div>
-      <div
-        class="content"
-        :class="{ 'menu-open': menuVisible && !hideMenu }"
-      >
+      <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
        <router-view />
      </div>
    </div>
@@ -40,7 +31,17 @@ export default {
  },
  computed: {
    hideMenu() {
-      return ['/login', '/signup', '/404', '/signup-reason', '/github-callback', '/twitter-callback', '/discord-callback', '/forgot-password'].includes(this.$route.path)
+      return [
+        '/login',
+        '/signup', 
+        '/404',
+        '/signup-reason',
+        '/github-callback',
+        '/twitter-callback',
+        '/discord-callback',
+        '/forgot-password',
+        '/google-callback'
+      ].includes(this.$route.path)
    }
  },
  async mounted() {
@@ -59,8 +60,7 @@ export default {
  z-index: 1000;
 }

-.menu-container {
-}
+.menu-container {}

 .content {
  flex: 1;
@@ -80,6 +80,7 @@ export default {
 }

@media (max-width: 768px) {
+
  .content,
  .content.menu-open {
    max-width: 100% !important;
--- a/frontend/src/components/CallbackPage.vue
+++ b/frontend/src/components/CallbackPage.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="callback-page">
+    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="callback-page-text">Magic is happening...</div>
+  </div>
+</template>
+
+<script>
+import { hatch } from 'ldrs'
+
+hatch.register()
+
+export default {
+  name: 'CallbackPage'
+}
+</script>
+
+<style scoped>
+.callback-page {
+  background-color: var(--background-color);
+  height: calc(100vh - var(--header-height));
+  padding-top: var(--header-height);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.callback-page-text {
+  margin-top: 25px;
+  font-size: 16px;
+  color: var(--primary-color);
+  font-weight: bold;
+}
+</style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -9,8 +9,8 @@ import './assets/toast.css'
 // If you prefer Bootstrap style, replace with theme-bootstrap.css instead.
 import { useToast } from 'vue-toastification'
 import { checkToken, clearToken, isLogin } from './utils/auth'
-import { initTheme } from './utils/theme'
 import { loginWithGoogle } from './utils/google'
+import { initTheme } from './utils/theme'
 import { clearVditorStorage } from './utils/clearVditorStorage'

 // Configurable API domain and port
@@ -51,9 +51,10 @@ checkToken().then(valid => {
    clearToken()
  }

+  // 引导用户优先采用Google Login登录
  if (!isLogin()) {
    setTimeout(() => {
      loginWithGoogle()
    }, 3000)
  }
-})
+})
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -16,6 +16,7 @@ import NotFoundPageView from '../views/NotFoundPageView.vue'
 import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 import DiscordCallbackPageView from '../views/DiscordCallbackPageView.vue'
 import TwitterCallbackPageView from '../views/TwitterCallbackPageView.vue'
+import GoogleCallbackPageView from '../views/GoogleCallbackPageView.vue'
 import ForgotPasswordPageView from '../views/ForgotPasswordPageView.vue'

 const routes = [
@@ -104,6 +105,11 @@ const routes = [
    name: 'twitter-callback',
    component: TwitterCallbackPageView
  },
+  {
+    path: '/google-callback',
+    name: 'google-callback',
+    component: GoogleCallbackPageView
+  },
  {
    path: '/404',
    name: 'not-found',
--- a/frontend/src/utils/google.js
+++ b/frontend/src/utils/google.js
@@ -1,6 +1,7 @@
 import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
+import { WEBSITE_BASE_URL } from '../constants'

 export async function googleGetIdToken() {
  return new Promise((resolve, reject) => {
@@ -18,6 +19,17 @@ export async function googleGetIdToken() {
  })
 }

+export function googleAuthorize() {
+  if (!GOOGLE_CLIENT_ID) {
+    toast.error('Google 登录不可用, 请检查网络设置与VPN')
+    return
+  }
+  const redirectUri = `${WEBSITE_BASE_URL}/google-callback`
+  const nonce = Math.random().toString(36).substring(2)
+  const url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=id_token&scope=openid%20email%20profile&nonce=${nonce}`
+  window.location.href = url
+}
+
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
  try {
    const res = await fetch(`${API_BASE_URL}/api/auth/google`, {
@@ -36,7 +48,7 @@ export async function googleAuthWithToken(idToken, redirect_success, redirect_no
      toast.info('当前为注册审核模式，请填写注册理由')
      if (redirect_not_approved) redirect_not_approved(data.token)
    } else if (data.reason_code === 'IS_APPROVING') {
-      toast.info('您的注册理由正在审批中')      
+      toast.info('您的注册理由正在审批中')
      if (redirect_success) redirect_success()
    }
  } catch (e) {
--- a/frontend/src/views/DiscordCallbackPageView.vue
+++ b/frontend/src/views/DiscordCallbackPageView.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="discord-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="discord-callback-page-text">Magic is happening...</div>
-  </div>
+  <CallbackPage />
 </template>

 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { discordExchange } from '../utils/discord'
-import { hatch } from 'ldrs'
-
-hatch.register()

 export default {
  name: 'DiscordCallbackPageView',
+  components: { CallbackPage },
  async mounted() {
    const url = new URL(window.location.href)
    const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
 }
 </script>

-<style scoped>
-.discord-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.discord-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>
--- a/frontend/src/views/GithubCallbackPageView.vue
+++ b/frontend/src/views/GithubCallbackPageView.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="github-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="github-callback-page-text">Magic is happening...</div>
-  </div>
+  <CallbackPage />
 </template>

 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { githubExchange } from '../utils/github'
-import { hatch } from 'ldrs'
-hatch.register()
-

 export default {
  name: 'GithubCallbackPageView',
+  components: { CallbackPage },
  async mounted() {
    const url = new URL(window.location.href)
    const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
 }
 </script>

-<style scoped>
-.github-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.github-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>
--- a/frontend/src/views/GoogleCallbackPageView.vue
+++ b/frontend/src/views/GoogleCallbackPageView.vue
@@ -0,0 +1,27 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script>
+import CallbackPage from '../components/CallbackPage.vue'
+import { googleAuthWithToken } from '../utils/google'
+
+export default {
+  name: 'GoogleCallbackPageView',
+  components: { CallbackPage },
+  async mounted() {
+    const hash = new URLSearchParams(window.location.hash.substring(1))
+    const idToken = hash.get('id_token')
+    if (idToken) {
+      await googleAuthWithToken(idToken, () => {
+        this.$router.push('/')
+      }, token => {
+        this.$router.push('/signup-reason?token=' + token)
+      })
+    } else {
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
--- a/frontend/src/views/LoginPageView.vue
+++ b/frontend/src/views/LoginPageView.vue
@@ -31,7 +31,7 @@
    </div>

    <div class="other-login-page-content">
-      <div class="login-page-button" @click="loginWithGoogle">
+      <div class="login-page-button" @click="googleAuthorize">
        <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
        <div class="login-page-button-text">Google 登录</div>
      </div>
@@ -54,7 +54,7 @@
 <script>
 import { API_BASE_URL, toast } from '../main'
 import { setToken, loadCurrentUser } from '../utils/auth'
-import { loginWithGoogle } from '../utils/google'
+import { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -64,8 +64,8 @@ export default {
  name: 'LoginPageView',
  components: { BaseInput },
  setup() {
-    return { loginWithGoogle }
-  }, 
+    return { googleAuthorize }
+  },
  data() {
    return {
      username: '',
--- a/frontend/src/views/SignupPageView.vue
+++ b/frontend/src/views/SignupPageView.vue
@@ -67,7 +67,7 @@
    </div>

    <div class="other-signup-page-content">
-      <div class="signup-page-button" @click="loginWithGoogle">
+      <div class="signup-page-button" @click="googleAuthorize">
        <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
        <div class="signup-page-button-text">Google 注册</div>
      </div>
@@ -89,7 +89,7 @@

 <script>
 import { API_BASE_URL, toast } from '../main'
-import { loginWithGoogle } from '../utils/google'
+import { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -98,7 +98,7 @@ export default {
  name: 'SignupPageView',
  components: { BaseInput },
  setup() {
-    return { loginWithGoogle }
+    return { googleAuthorize }
  },
  data() {
    return {
--- a/frontend/src/views/TwitterCallbackPageView.vue
+++ b/frontend/src/views/TwitterCallbackPageView.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="twitter-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="twitter-callback-page-text">Magic is happening...</div>
-  </div>
+  <CallbackPage />
 </template>

 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { twitterExchange } from '../utils/twitter'
-import { hatch } from 'ldrs'
-hatch.register()

 export default {
  name: 'TwitterCallbackPageView',
+  components: { CallbackPage },
  async mounted() {
    const url = new URL(window.location.href)
    const code = url.searchParams.get('code')
@@ -27,21 +24,3 @@ export default {
 }
 </script>

-<style scoped>
-.twitter-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: var(--header-height);
-}
-
-.twitter-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>