1

1114/app/components/weather/WeatherCard.tsx

@@ -1,7 +1,7 @@
-import { WeathersearchForm } from "./WeatherSearchForm.tsx";
-import { WeatherDisplay } from "./WeatherDisplay.tsx";
-import { WeatherDetailsGrid } from "./WeatherDetailsGrid.tsx";
-import { useWeatherStore } from "./WeatherStore.tsx";
+import { WeathersearchForm } from "@/components/weather/WeatherSearchForm";
+import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
+import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsCrid";
+import { useWeatherStore } from "@/store/weatherStore";
 import Cloud  from "../../../assets/cloud.svg";
 
 export function WeatherCard() {

1114/app/components/weather/WeatherDisplay.tsx

@@ -0,0 +1,53 @@
+import { useWeatherStore } from "@/store/weatherStore";
+import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun } from "lucide-react";
+
+interface WeatherIconProps {
+    description: string;
+    isDay: string;
+    className?: string;
+}
+
+function WeatherIcon({ description, isDay, className='w-16 h-16 md:w-20 md:h-20' }: WeatherIconProps) {
+    const desc = description.toLowerCase();
+    const isDaytime = isDay === 'yes';
+
+    if(desc.includes('雨') || desc.includes('rain')) return <CloudRain className={className}/>
+    if(desc.includes('雪') || desc.includes('snow')) return <CloudSnow className={className}/>
+    if(desc.includes('雷') || desc.includes('thunderstorm')) return <CloudLightning className={className}/>
+    if(desc.includes('fog') || desc.includes('雾')) return <CloudFog className={className}/>
+    if(desc.includes('cloudy') || desc.includes('阴') || desc.includes('overcast')) return <Cloud className={className}/>
+    if(desc.includes('heavy') || desc.includes('暴')) return <CloudDrizzle className={className}/>
+    if(desc.includes('晴') || desc.includes('clear') || desc.includes('sunny')) return (
+        isDaytime ? <Sun className={className}/> : <Moon className={className}/>
+    )
+    if(desc.includes('scattered') || desc.includes('多云') || desc.includes('partial')) return (
+        isDaytime ? <CloudSun className={className}/> : <CloudMoon className={className}/>
+    )
+    return isDaytime ? <Sun className={className}/> : <Moon className={className}/>
+}
+
+export function WeatherDisplay(){
+    const {currentWeather} = useWeatherStore();
+    if (!currentWeather) return null;
+
+    return (
+        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-[#3498db] to-[#2980b9] via-cyan-500 p-6 mb-4">
+            <div className="absolute inset-0 bg-gradient-to-r from-white/10 to-transparent"></div>
+            <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
+            <div className="relative z-10">
+                <div className="flex items-start justify-between mb-6">
+                    <div>
+                        <h2 className="text-3xl font-semibold mb-2 text-white">{currentWeather.location.name}</h2>
+                        <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-white/20 backdrop-blur-sm">
+                            <MapPin className="w-3 h-3 text-white/90"/>
+                            <div className="text-white text-sm">{currentWeather.location.country}</div>
+                        </div>
+                    </div>
+                    <div className="text-white/90">
+                        {/* <WeatherIcon description={currentWeather.current.} isDay={currentWeather.current.is_day} className="w-12 h-12 md:w-16 md:h-16"/> */}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

1114/app/store/weatherStore.ts

@@ -0,0 +1,142 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { WeatherAPI } from '@/services/weatherApi';
+
+const CACHE_EXPIRY = 10 * 60 * 1000;
+
+export interface Location {
+    name: string;      
+    country: string;   
+    region: string;     
+    lat: string;     
+    lon: string;     
+    timezone_id: string
+    localtime: string;     
+    localtime_epoch: number; 
+    utc_offset: string;     
+}
+
+export interface Current {
+    observation_time: string;      
+    temperature: number;          
+    weather_code: number;        
+    weather_icons: string[];       
+    weather_descriptions: string[]; 
+    wind_speed: number;          
+    wind_degree: number;           
+    wind_dir: string;             
+    pressure: number;            
+    precip: number;               
+    humidity: number;           
+    cloudcover: number;         
+    feelslike: number;         
+    uv_index: number;           
+    visibility: number;           
+    is_day: string;                
+}
+
+export interface WeatherData {
+    request?: {
+        type: string;
+        query: string;
+        language: string;
+        unit: string;
+    };
+    location: Location;
+    current: Current;
+}
+
+export interface WeatherCache {
+    data: WeatherData;
+    timestamp: number;
+}
+
+
+export interface WeatherStore {
+
+    currentWeather: WeatherData | null;
+    weatherCache: Map<string, WeatherCache>; 
+    isLoading: boolean;
+    error: string | null;
+
+    // Actions
+    setCurrentWeather: (weather: WeatherData | null) => void;
+    getWeatherFromCache: (city: string) => WeatherData | null;
+    cacheWeather: (city: string, weather: WeatherData) => void;
+    setLoading: (loading: boolean) => void;
+    setError: (error: string | null) => void;
+    reset: () => void;
+
+    // API Actions
+    searchWeather: (city: string) => Promise<void>;
+    refreshWeather: () => Promise<void>;
+}
+
+export const useWeatherStore = create<WeatherStore>()(
+	persist(
+        (set,get)=>({
+            currentWeather:null,
+		weatherCache:new Map(),
+		isLoading:false,
+		error:null,
+		setCurrentWeather:(weather)=>set({currentWeather:weather}),
+		getWeatherFromCache:(city)=>{
+		const cache = get().weatherCache.get(city.toLowerCase());
+		if(!cache) return null;
+        const isExpired = Date.now() - cache.timestamp > CACHE_EXPIRY;
+        return isExpired ? null : cache.data;
+        },
+        cacheWeather:(city,weather)=>set((state)=>{
+            const newCache = new Map(state.weatherCache);
+            newCache.set(city.toLowerCase(),{data:weather,timestamp:Date.now()});
+            return {weatherCache:newCache};
+        }),
+        setLoading:(loading)=>set({isLoading:loading}),
+        setError:(error)=>set({error:error}),
+        reset:()=>set({currentWeather:null,weatherCache:new Map(),isLoading:false,error:null}),
+        searchWeather:async(city:string)=>{
+            try{ 
+                set({isLoading:true,error:null});
+                const cachedWeather = get().weatherCache.get(city.toLowerCase());
+                if(cachedWeather){
+                    set({currentWeather:cachedWeather.data,isLoading:false});
+                    return;
+                }
+                const weatherData = await WeatherAPI.getWeather(city);
+                set({currentWeather:weatherData,isLoading:false});
+                get().cacheWeather(city,weatherData);
+            }catch(error){
+                set({error:error instanceof Error ? error.message : '获取失败'});
+            }
+        },
+        refreshWeather:async()=>{
+            const currentWeather = get().currentWeather;
+            if(!currentWeather) return;
+            try{
+                set({isLoading:true,error:null});
+                const city = currentWeather.location.name;
+                const weatherData = await WeatherAPI.getWeather(city);
+                set({currentWeather:weatherData,isLoading:false});
+                get().cacheWeather(currentWeather.location.name,weatherData);
+            }catch(error){
+                set({error:error instanceof Error ? error.message : '刷新失败'});
+                set({isLoading:false});
+            }
+        }
+        }
+        ),
+        {
+            name:'weatherStore',
+            storage:createJSONStorage(()=>localStorage),
+            partialize:(state)=>({
+                weatherCache:Array.from(state.weatherCache.entries())
+            }),
+            onRehydrateStorage:(state)=>{ 
+                if(state && Array.isArray(state.weatherCache)){
+                    state.weatherCache = new Map(state.weatherCache as any);
+                }
+            }
+        }
+    )
+		
+)

1114/package.json

@@ -34,7 +34,7 @@
     "@react-router/dev": "^7.9.2",
     "@tailwindcss/vite": "^4.1.13",
     "@types/node": "^22.19.0",
-    "@types/react": "^19.1.13",
+    "@types/react": "^19.2.4",
     "@types/react-dom": "^19.1.9",
     "tailwindcss": "^4.1.13",
     "tw-animate-css": "^1.4.0",
@@ -42,4 +42,4 @@
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}