Merge branch 'main' of http://113.45.67.59:3003/lzq/test

app/routes/weather.tsx

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