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

1114/app/components/weather/WeatherCard.tsx

@@ -1,7 +1,7 @@
-import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm";
+import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm.tsx";
-import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
+import { WeatherDisplay } from "@/components/weather/WeatherDisplay.tsx";
-import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid";
+import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid.tsx";
-import { useWeatherStore } from "@/store/weatherStore";
+import { useWeatherStore } from "@/store/weatherStore.tsx";
 import Cloud  from "../../../assets/cloud.svg";
 
 export function WeatherCard() {
@@ -9,6 +9,7 @@ export function WeatherCard() {
 
   return (
     <div>
+      <WeatherSearchForm />
       <WeatherSearchForm />
       {currentWeather ? (
         <div className="P-4">

1114/app/components/weather/WeatherDisplay.tsx

@@ -1,72 +0,0 @@
-import { useWeatherStore } from "@/store/weatherStore";
-import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun, ThermometerSun } from "lucide-react";
-import { formatTemperature } from "../lib/utils";
-
-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-br from-blue-500 via-cyan-500 to-blue-600 dark:from-blue-600 dark:via-cyan-600 dark:to-blue-700 p-6 mb-4">
-      <div className="absolute inset-0 bg-gradient-to-br 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 text-white mb-2">{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" />
-              <span className="text-sm text-white/90">{currentWeather.location.country}</span>
-            </div>
-          </div>
-          <div className="text-white/90">
-            <WeatherIcon
-              description={currentWeather.current.weather_descriptions[0]}
-              isDay={currentWeather.current.is_day}
-            />
-          </div>
-        </div>
-
-        <div className="flex items-baseline gap-2 mb-2">
-          <span className="text-6xl font-light text-white">
-            {formatTemperature(currentWeather.current.temperature)}
-          </span>
-          <span className="text-2xl text-white/80">°C</span>
-        </div>
-        <p className="text-lg text-white/90 font-medium mb-2 capitalize">
-          {currentWeather.current.weather_descriptions[0]}
-        </p>
-        <div className="flex items-center gap-2 text-white/80 text-sm">
-          <ThermometerSun className="w-4 h-4" />
-          <span>体感 {formatTemperature(currentWeather.current.feelslike)}°C</span>
-        </div>
-      </div>
-    </div>
-    )
-}

1114/app/routes/weather.tsx

@@ -1,7 +1,7 @@
 import REACT, { use, useEffect } from 'react'
 import { Loader2 } from 'lucide-react';
-import { WeatherCard } from '@/components/weather/WeatherCard';
+import { WeatherCard } from '@/components/weather/WeatherCard'
-import { useWeatherStore } from '@/store/weatherStore';
+import { useWeatherStore } from '@/store/weatherStore'
 import { toast } from 'sonner'
 
 
@@ -15,13 +15,16 @@ export function meta() {
 }
 
 export default function Weather() {
+    const { currentWeather, isLoading, error, setError } = useWeatherStore()
     const { currentWeather, isLoading, error, setError } = useWeatherStore()
     useEffect(() => {
         if (error) {
             toast.error(error)
             setError("")
+            setError("")
         }
     }, [error, setError])
+    }, [error, setError])
 
     return (
         <div className="flex flex-col items-center justify-center h-screen">

1114/app/store/weatherStore.ts

@@ -1,142 +0,0 @@
-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.getCurrentWeather(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.getCurrentWeather(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.2.4",
+    "@types/react": "^19.1.13",
     "@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"
   }
-}
+}