From fc449357bd3aa2e33621b45033e67246052957c8 Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Mon, 17 Nov 2025 19:50:08 +0800
Subject: [PATCH] 11171950

---
 app/routes/weather.tsx | 103 ++++++++++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 43 deletions(-)

diff --git a/app/routes/weather.tsx b/app/routes/weather.tsx
index bf7860f..c8ce90a 100644
--- a/app/routes/weather.tsx
+++ b/app/routes/weather.tsx
@@ -1,49 +1,66 @@
-import { toast } from "sonner"
-import { Loader2 } from "lucide-react"
-import { useEffect } from "react"
-import { useWeatherStore } from "../store/weatherStore"
-import { WeatherCard } from "@/components/WeatherCard"
+
+
+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";
+
 export function meta() {
-    return [
-        { title: "天气查询页面" },
-        { name: "description", content: "查询天气信息" }
-    ]
+  return [
+    { title: '天气 - Apple风格设计' },
+    { 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)
-            setError("")
+            toast.error(error);
+            // Clear error after showing toast
+            setError(null);
         }
-    }, [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}
+    }, [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>
             </div>
-        </div>
-    )
-}
\ No newline at end of file
+          </div>
+        )}
+
+        {!isLoading || currentWeather ? (
+          <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <WeatherCard />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+