feat: 更新认证组件以支持登录注册成功后的回调功能

app/components/auth/Login.tsx

@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 import { useAuth } from '~/hooks/useAuth';
 import type { LoginResponse } from '~/routes/api.auth.login';
 
-export function Login({ onClose }: { onClose: () => void }) {
+interface LoginProps {
+  onClose: () => void;
+  onLoginSuccess: () => void;
+}
+
+export function Login({ onClose, onLoginSuccess }: LoginProps) {
   const [phone, setPhone] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
@@ -24,6 +29,7 @@ export function Login({ onClose }: { onClose: () => void }) {
       if (response.ok && data.token && data.user) {
         login(data.token, data.user);
         onClose(); // 登录成功后关闭登录窗口
+        onLoginSuccess();
       } else {
         setError(data.error || '登录失败，请检查您的手机号和密码');
       }

app/components/auth/LoginRegisterDialog.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
+import { Login } from './Login';
+import { Register } from './Register';
+
+interface LoginRegisterDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoginSuccess: () => void;
+}
+
+export function LoginRegisterDialog({ isOpen, onClose, onLoginSuccess }: LoginRegisterDialogProps) {
+  const [isLoginView, setIsLoginView] = useState(true);
+
+  const toggleView = () => setIsLoginView(!isLoginView);
+
+  return (
+    <DialogRoot open={isOpen}>
+      <Dialog onBackdrop={onClose} onClose={onClose} className="w-full max-w-md">
+        <DialogTitle>{isLoginView ? '登录' : '注册'}</DialogTitle>
+        <DialogDescription>
+          {isLoginView ? (
+            <Login onClose={onClose} onLoginSuccess={onLoginSuccess} />
+          ) : (
+            <Register onClose={onClose} onRegisterSuccess={onLoginSuccess} />
+          )}
+          <div className="mt-4 text-center">
+            <button
+              onClick={toggleView}
+              className="text-bolt-elements-item-contentAccent hover:underline"
+            >
+              {isLoginView ? '没有账号？点击注册' : '已有账号？点击登录'}
+            </button>
+          </div>
+        </DialogDescription>
+      </Dialog>
+    </DialogRoot>
+  );
+}

app/components/auth/Register.tsx

@@ -3,7 +3,12 @@ import { useAuth } from '~/hooks/useAuth';
 import type { RegisterResponse } from '~/routes/api.auth.register';
 import { uploadToOSS } from '~/utils/uploadToOSS';
 
-export function Register() {
+interface RegisterProps {
+  onClose: () => void;
+  onRegisterSuccess: () => void;
+}
+
+export function Register({ onClose, onRegisterSuccess }: RegisterProps) {
   const [phone, setPhone] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -62,7 +67,8 @@ export function Register() {
       const data = await registerResponse.json() as RegisterResponse;
       if (registerResponse.ok && data.token && data.user) {
         login(data.token, data.user);
-        // 登录成功后，直接显示用户信息，不跳转
+        onClose(); // 关闭注册窗口
+        onRegisterSuccess(); // 调用注册成功的回调
       } else {
         setError(data.error || '注册失败，请稍后再试');
       }

app/components/auth/SubscriptionDialog.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '~/hooks/useAuth';
 import { toast } from 'react-toastify';
 import { PaymentModal } from './PaymentModal';
+import { LoginRegisterDialog } from './LoginRegisterDialog';
 import type { SubscriptionPlan } from '~/types/subscription';
 import pkg from 'lodash';
 const {toString} = pkg;
@@ -46,6 +47,7 @@ export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps)
   const [isLoading, setIsLoading] = useState(true);
   const { user, token, isAuthenticated, login } = useAuth();
   const [paymentData, setPaymentData] = useState<PaymentResponse | null>(null);
+  const [isLoginRegisterOpen, setIsLoginRegisterOpen] = useState(false);
 
   useEffect(() => {
     if (isOpen) {
@@ -94,10 +96,7 @@ export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps)
 
   const handlePurchase = async (planId: string) => {
     if (!isAuthenticated) {
-      // 如果用户未登录，提示用户登录
-      toast.info('请先登录以继续购买');
-      // 这里可以触发登录流程，例如打开登录对话框
-      // openLoginDialog();
+      setIsLoginRegisterOpen(true);
       return;
     }
     if (!token) {
@@ -133,6 +132,12 @@ export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps)
     toast.success('订阅成功！');
   }, [fetchUserSubscription]);
 
+  const handleLoginSuccess = useCallback(() => {
+    setIsLoginRegisterOpen(false);
+    fetchUserSubscription();
+    toast.success('登录成功！');
+  }, [fetchUserSubscription]);
+
   if (isLoading) return null;
 
   return (
@@ -232,6 +237,11 @@ export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps)
           onPaymentSuccess={handlePaymentSuccess}
         />
       )}
+      <LoginRegisterDialog
+        isOpen={isLoginRegisterOpen}
+        onClose={() => setIsLoginRegisterOpen(false)}
+        onLoginSuccess={handleLoginSuccess}
+      />
     </>
   );
 }