app/routes/weather.tsx

@@ -1,66 +1,49 @@
-
-
-import React, {useEffect} from 'react';
-import { Loader2 } from 'lucide-react';
-import { WeatherCard } from '@/components/weather/WeatherCard';
-import { useWeatherStore } from '@/store/weatherStore';
-import {toast} from "sonner";
-
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+import { useEffect } from "react"
+import { useWeatherStore } from "../store/weatherStore"
+import { WeatherCard } from "@/components/WeatherCard"
 export function meta() {
-  return [
-    { title: '天气 - Apple风格设计' },
-    { name: 'description', content: '优雅的天气查询应用' },
-  ];
+    return [
+        { title: "天气查询页面" },
+        { name: "description", content: "查询天气信息" }
+    ]
 }
-
-
-export default function Weather() {
-  const { currentWeather, isLoading ,error,setError} = useWeatherStore();
-    // Show toast when error changes
+export function Weather() {
+    const { currentWeather, isLoading, error, setError } = useWeatherStore()
     useEffect(() => {
         if (error) {
-            toast.error(error);
-            // Clear error after showing toast
-            setError(null);
+            toast.error(error)
+            setError("")
         }
-    }, [error, setError]);
-  return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-blue-50/30 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 transition-colors duration-500">
-      <div className="max-w-4xl mx-auto px-4 py-8 md:px-6 md:py-12">
-       
-        <header className="text-center mb-8 space-y-3">
-          <h1 className="text-5xl md:text-6xl font-semibold tracking-tight bg-gradient-to-br from-blue-600 via-sky-500 to-cyan-500 dark:from-blue-400 dark:via-sky-400 dark:to-cyan-400 bg-clip-text text-transparent animate-in fade-in slide-in-from-top-4 duration-700">
-            天气
-          </h1>
-          <p className="text-sm md:text-base text-slate-500 dark:text-slate-400 font-medium animate-in fade-in slide-in-from-top-5 duration-700">
-            实时天气信息
-          </p>
-        </header>
-
-       
-        {isLoading && !currentWeather && (
-          <div className="flex items-center justify-center py-20">
-            <div className="text-center space-y-6 animate-in fade-in zoom-in-95 duration-500">
-              <div className="relative w-16 h-16 mx-auto">
-                <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 opacity-20 animate-ping"></div>
-                <div className="relative w-16 h-16 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 flex items-center justify-center">
-                  <Loader2 className="w-8 h-8 text-white animate-spin" />
-                </div>
-              </div>
-              <p className="text-slate-600 dark:text-slate-300 font-medium">
-                正在获取天气数据
-              </p>
+    }, [ErrorEvent, setError])
+    return (
+        <div className="flex flex-col items-center justify-center h-screen">
+            <div className="flex flex-col items-center justify-center">
+                <header className="flex flex-col items-center justify-center">
+                    <h1 className="text-4xl font-bold">天气查询</h1>
+                    <p className="text-sm">实时天气</p>
+                </header>
+                {isLoading && !currentWeather && (
+                    <div className="flex flex-col items-center justify-center">
+                        <div className="flex flex-col items-center justify-center"></div>
+                        <div className="flex flex-col items-center justify-center">
+                            <div className="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-gray-900">
+                            </div>
+                            <div className="text-gray-900 text-lg font-bold">
+                                <Loader2 className="h-10 w-10 animate-spin" />
+                            </div>
+                        </div>
+                        <p className="text-gray-900 text-lg font-bold">正在加载...</p>
+                    </div>
+                )
+                }
+                {isLoading || currentWeather ? (
+                    <div className="flex flex-col items-center justify-center">
+                        <WeatherCard />
+                    </div>
+                ) : null}
             </div>
-          </div>
-        )}
-
-        {!isLoading || currentWeather ? (
-          <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
-            <WeatherCard />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
+        </div>
+    )
 }
-