11171851

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/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

@@ -22,45 +22,9 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-<<<<<<< HEAD
     "react-router": "^7.9.2",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0"
+    "sooner": "^1.1.4"
-=======
-    "react-router": "^7.9.2"
-  },{
-  "name": "1114",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
->>>>>>> 9b018e3e43a44ed8f5b9d08e22c09de35b4ce874
-  },
-  "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-toast": "^1.2.2",
-    "@react-router/node": "^7.9.2",
-    "@react-router/serve": "^7.9.2",
-    "axios": "^1.13.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.19",
-    "immer": "^10.2.0",
-    "isbot": "^5.1.31",
-    "lucide-react": "^0.553.0",
-    "next-themes": "^0.4.6",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router": "^7.9.2",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@react-router/dev": "^7.9.2",
@@ -74,17 +38,4 @@
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
-  "devDependencies": {
-    "@react-router/dev": "^7.9.2",
-    "@tailwindcss/vite": "^4.1.13",
-    "@types/node": "^22",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "tailwindcss": "^4.1.13",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
-    "vite-tsconfig-paths": "^5.1.4"
-  }
 }