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

1114/app/components/weather/WeatherCard.tsx

@@ -0,0 +1,33 @@
+import { WeathersearchForm } from "./WeatherSearchForm.tsx";
+import { WeatherDisplay } from "./WeatherDisplay.tsx";
+import { WeatherDetailsGrid } from "./WeatherDetailsGrid.tsx";
+import { useWeatherStore } from "./WeatherStore.tsx";
+import Cloud  from "../../../assets/cloud.svg";
+
+export function WeatherCard() {
+  const { currentWeather } = useWeatherStore();
+
+  return (
+    <div>
+      <WeathersearchForm />
+      {currentWeather ? (
+        <div className="P-4">
+          <WeatherDisplay />
+          <WeatherDetailsGrid />
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center h-full">
+          <div className="animate-spin">
+            <div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div>
+            <div className="h-10 w-10">
+              <Cloud/> 
+            </div>
+          </div>
+          <h3 className="text-2xl font-bold text-slate-700 dark:text-slate-200 mb-2">暂无天气数据</h3>
+          <p className="text-sm text-slate-500 dark:text-slate-400">请搜索城市查看实时天气信息</p>
+        </div>
+        
+      )}
+    </div>
+  );
+}

1114/app/routes/weather.tsx

@@ -0,0 +1,55 @@
+import REACT, { use, useEffect } from 'react'
+import { Loader2 } from 'lucide-react';
+import { WeatherCard } from './WeatherCard'
+import { useWeatherstore } from './WeatherStore'
+import { toast } from 'sonner'
+
+
+
+export function meta() {
+    return [
+        { title: "天气查询页面" },
+        { name: "description", content: "查询天气信息" }
+    ]
+
+}
+
+export default function Weather() {
+    const { currentWeather, isLoading, error, seterror } = useWeatherstore()
+    useEffect(() => {
+        if (error) {
+            toast.error(error)
+            seterror("")
+        }
+    }, [error, 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 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>
+                    </div>
+                )}
+                {!isLoading || currentWeather ? (
+                    <div className="flex flex-col items-center justify-center">
+                        <WeatherCard />
+                    </div>
+                ) : null}
+            </div>
+        </div>
+    )
+}