refactor: repartition server-side and client-side code

app/.client/components/auth/AuthButtons.tsx

@@ -0,0 +1,70 @@
+import { useNavigate } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { Button } from '~/.client/components/ui/Button';
+import { useAuth } from '~/.client/hooks/useAuth';
+
+export function SignInButton({ className, children = '登录' }: { className?: string; children?: React.ReactNode }) {
+  const { signIn, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/');
+    }
+  }, [isAuthenticated, navigate]);
+
+  const handleSignIn = () => {
+    signIn('/api/auth/callback');
+  };
+
+  return (
+    <Button onClick={handleSignIn} className={className} disabled={isAuthenticated}>
+      {children}
+    </Button>
+  );
+}
+
+export function SignOutButton({ className, children = '登出' }: { className?: string; children?: React.ReactNode }) {
+  const { signOut, isAuthenticated } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignOut = async () => {
+    if (!isAuthenticated) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('登出失败:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button onClick={handleSignOut} className={className} disabled={!isAuthenticated || isLoading}>
+      {isLoading ? '正在登出...' : children}
+    </Button>
+  );
+}
+
+export function UserAuthButton({
+  className,
+  signInText = '登录',
+  signOutText = '登出',
+}: {
+  className?: string;
+  signInText?: React.ReactNode;
+  signOutText?: React.ReactNode;
+}) {
+  const { isAuthenticated } = useAuth();
+
+  return isAuthenticated ? (
+    <SignOutButton className={className}>{signOutText}</SignOutButton>
+  ) : (
+    <SignInButton className={className}>{signInText}</SignInButton>
+  );
+}

app/.client/components/auth/UserProfile.tsx

@@ -0,0 +1,31 @@
+import { useAuth } from '~/.client/hooks/useAuth';
+
+export function UserProfile({ className }: { className?: string }) {
+  const { isAuthenticated, userInfo, isLoading } = useAuth();
+
+  if (!isAuthenticated) {
+    return <div className={className}>未登录</div>;
+  }
+
+  if (isLoading) {
+    return <div className={className}>加载中...</div>;
+  }
+
+  if (!userInfo) {
+    return <div className={className}>无法获取用户信息</div>;
+  }
+
+  return (
+    <div className={className}>
+      {userInfo.picture && (
+        <img
+          src={userInfo.picture}
+          alt={userInfo.name || userInfo.username || '用户头像'}
+          className="size-10 rounded-full mb-2"
+        />
+      )}
+      <h3 className="text-lg font-semibold">{userInfo.name || userInfo.username || '用户'}</h3>
+      {userInfo.email && <p className="text-sm text-gray-600">{userInfo.email}</p>}
+    </div>
+  );
+}