diff --git a/app/components/LoginModal.jsx b/app/components/LoginModal.jsx index 70d08be..f9e1dc8 100644 --- a/app/components/LoginModal.jsx +++ b/app/components/LoginModal.jsx @@ -1,7 +1,9 @@ 'use client'; +import Image from 'next/image'; import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'; import { MailIcon } from './Icons'; +import githubImg from "../assets/github.svg"; export default function LoginModal({ onClose, @@ -13,7 +15,8 @@ export default function LoginModal({ loginError, loginSuccess, handleSendOtp, - handleVerifyEmailOtp + handleVerifyEmailOtp, + handleGithubLogin }) { return (
取消 @@ -98,6 +100,53 @@ export default function LoginModal({
+ + {handleGithubLogin && ( + <> +
+
+ 或使用 +
+
+ + + + )}
); diff --git a/app/globals.css b/app/globals.css index 933ccad..c97c74f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3348,6 +3348,35 @@ input[type="number"] { color: var(--success); } +/* ========== GitHub 登录按钮样式 ========== */ +.github-login-btn { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.github-login-btn:hover { + border-color: var(--primary); + background: rgba(34, 211, 238, 0.05); +} + +.github-login-btn:active { + transform: scale(0.98); +} + +[data-theme="light"] .github-login-btn { + background: #f8fafc; + border-color: #e2e8f0; +} + +[data-theme="light"] .github-login-btn:hover { + background: #f1f5f9; + border-color: #94a3af; +} + +[data-theme="light"] .github-login-btn img { + filter: brightness(0.2); +} + .button.secondary { background: transparent; border: 1px solid var(--border); diff --git a/app/lib/supabase.js b/app/lib/supabase.js index fce92de..fc34e66 100644 --- a/app/lib/supabase.js +++ b/app/lib/supabase.js @@ -33,6 +33,7 @@ const createNoopSupabase = () => ({ data: { subscription: { unsubscribe: () => { } } } }), signInWithOtp: async () => ({ data: null, error: { message: 'Supabase not configured' } }), + signInWithOAuth: async () => ({ data: null, error: { message: 'Supabase not configured' } }), verifyOtp: async () => ({ data: null, error: { message: 'Supabase not configured' } }), signOut: async () => ({ error: null }) }, diff --git a/app/page.jsx b/app/page.jsx index 53891d5..1cc6be9 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -2415,6 +2415,29 @@ export default function HomePage() { setLoginLoading(false); }; + const handleGithubLogin = async () => { + setLoginError(''); + if (!isSupabaseConfigured) { + showToast('未配置 Supabase,无法登录', 'error'); + return; + } + try { + isExplicitLoginRef.current = true; + setLoginLoading(true); + const { error } = await supabase.auth.signInWithOAuth({ + provider: 'github', + options: { + redirectTo: window.location.origin + } + }); + if (error) throw error; + } catch (err) { + setLoginError(err.message || 'GitHub 登录失败,请稍后再试'); + isExplicitLoginRef.current = false; + setLoginLoading(false); + } + }; + // 登出 const handleLogout = async () => { isLoggingOutRef.current = true; @@ -3560,7 +3583,6 @@ export default function HomePage() { useEffect(() => { const isAnyModalOpen = - settingsOpen || feedbackOpen || addResultOpen || addFundToGroupOpen || @@ -3596,7 +3618,6 @@ export default function HomePage() { containerRef.current.style.overflow = ''; }; }, [ - settingsOpen, feedbackOpen, addResultOpen, addFundToGroupOpen, @@ -4882,6 +4903,7 @@ export default function HomePage() { setLoginSuccess(''); setLoginEmail(''); setLoginOtp(''); + setLoginLoading(false); }} loginEmail={loginEmail} setLoginEmail={setLoginEmail} @@ -4892,6 +4914,7 @@ export default function HomePage() { loginSuccess={loginSuccess} handleSendOtp={handleSendOtp} handleVerifyEmailOtp={handleVerifyEmailOtp} + handleGithubLogin={isSupabaseConfigured ? handleGithubLogin : undefined} /> )}