refactor: repartition server-side and client-side code

app/.client/components/AuthErrorToast.client.tsx

@@ -0,0 +1,37 @@
+import { useFetcher } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+// 定义错误响应的类型
+interface AuthErrorResponse {
+  errorMessage?: string;
+}
+
+/**
+ * 认证错误提示组件
+ *
+ * 这个组件检测认证过程中的错误，并使用 toast 显示错误消息
+ */
+export function AuthErrorToast() {
+  // 使用 fetcher 从服务器获取错误信息
+  const fetcher = useFetcher<AuthErrorResponse>();
+  const [hasChecked, setHasChecked] = useState(false);
+
+  useEffect(() => {
+    // 只在组件首次加载时检查一次错误
+    if (!hasChecked) {
+      fetcher.load('/api/auth/check-error');
+      setHasChecked(true);
+    }
+  }, [fetcher, hasChecked]);
+
+  useEffect(() => {
+    // 当 fetcher 获取到数据时，如果有错误信息则显示
+    if (fetcher.data?.errorMessage) {
+      toast.error(fetcher.data.errorMessage);
+    }
+  }, [fetcher.data]);
+
+  // 这是一个无形的组件，不渲染任何内容
+  return null;
+}