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

app/components/WeatherCard.tsx

@@ -0,0 +1,35 @@
+import { useWeatherStore } from "@/store/weatherStore";
+import { Cloud } from "lucide-react";
+
+export function WeatherCard(){
+    const{ currentWeather} = useWeatherStore();
+    //样式待修改
+    return (
+        <div className ="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-800/80 
+        backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/80 shadow-2xl shadow-slate-200/50
+        dark:shadow-slate-900/50 transition-all duration-300">
+            <WeatherSearchForm />
+            {currentWeather ? (
+            <div className="p-6"> 
+                <WeatherDisplay />
+                <WeatherDetailsGrid />
+            </div>
+            ) :(
+                <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
+                    <div className="relative mb-6">
+                        <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full opacity-10 blur-2xl"></div>
+                            <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-blue-100 to-cyan-100 dark:from-blue-900/30 dark:to-cyan-900/30 flex items-center justify-center">
+                                <Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
+                            </div>
+                    </div>
+                    <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2">
+                        暂无天气数据
+                    </h3>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">
+                            请搜索城市查看实时天气信息
+                        </p>
+                </div>
+      )}
+        </div>
+    );
+}

app/lib/utils.ts

@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export const formatTemperature = (
+    temp: number,
+    unit: 'celsius' | 'fahrenheit' = 'celsius'
+): string => {
+    const value = unit === 'fahrenheit' ? (temp * 9) / 5 + 32 : temp;
+    const symbol = unit === 'fahrenheit' ? '°F' : '°C';
+    return `${Math.round(value)}${symbol}`;
+};

app/routes/weather.tsx

@@ -0,0 +1,49 @@
+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: "天气查询页面" },
+        { name: "description", content: "查询天气信息" }
+    ]
+}
+export function Weather() {
+    const { currentWeather, isLoading, error, setError } = useWeatherStore()
+    useEffect(() => {
+        if (error) {
+            toast.error(error)
+            setError("")
+        }
+    }, [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>
+    )
+}

package.json

@@ -44,7 +44,11 @@
     "vite-tsconfig-paths": "^5.1.4"
   }
 <<<<<<< HEAD
+<<<<<<< HEAD
 }
 =======
 }
 >>>>>>> 34ee14ecd423bb649a4c45f54ab6e3f37ad0f35f
+=======
+}
+>>>>>>> 12e66397d84bd55cde0c1b209d3e943e5e20bcb9