1117
This commit is contained in:
commit
60969a8d92
|
|
@ -1,7 +1,7 @@
|
|||
import { WeathersearchForm } from "@/components/weather/WeatherSearchForm";
|
||||
import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
|
||||
import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsCrid";
|
||||
import { useWeatherStore } from "@/store/weatherStore";
|
||||
import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm.tsx";
|
||||
import { WeatherDisplay } from "@/components/weather/WeatherDisplay.tsx";
|
||||
import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid.tsx";
|
||||
import { useWeatherStore } from "@/store/weatherStore.tsx";
|
||||
import Cloud from "../../../assets/cloud.svg";
|
||||
|
||||
export function WeatherCard() {
|
||||
|
|
@ -9,7 +9,8 @@ export function WeatherCard() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<WeathersearchForm />
|
||||
<WeatherSearchForm />
|
||||
<WeatherSearchForm />
|
||||
{currentWeather ? (
|
||||
<div className="P-4">
|
||||
<WeatherDisplay />
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ interface WeatherInfoItemProps {
|
|||
subtitle?: string;
|
||||
}
|
||||
|
||||
function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
|
||||
export function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
|
||||
|
||||
return (
|
||||
<div className="group rounded-xl bg-slate-50/50 border border-slate-200/50 p-3 hover:bg-slate-100/50 hover:border-slate-300 transition duration-200 ">
|
||||
<div className="flex items-start gap-2">
|
||||
|
|
@ -28,6 +29,8 @@ function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps)
|
|||
|
||||
export function WeatherDetailsGrid() {
|
||||
|
||||
const {currentWeather} = useWeatherStore();
|
||||
if (!currentWeather) return null;
|
||||
<>
|
||||
<div className="grid grids-cols-2 md:grids-cols-3 gap-3 mb-4">
|
||||
<WeatherInfoItem
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,9 +1,25 @@
|
|||
import axios, { type AxiosInstance, AxiosError } from 'axios';
|
||||
import type { WeatherData } from "@/store/weatherStore";
|
||||
//天气搜索表单组件
|
||||
import { cn } from "@/components/lib/utils";
|
||||
import React ,{useState,type FormEvent,type ChangeEvent, use} from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input} from "../ui/input";
|
||||
import {useWeatherStore} from "@/store/weatherStore";
|
||||
import { AlertCircle, Loader2, RefreshCw, Search } from "lucide-react";
|
||||
|
||||
//配置常量
|
||||
const API_KEY = '0c4679ac2decfe6a756aa09e61f42dc1';
|
||||
const BASE_URL = 'http://api.weatherstack.com';
|
||||
//城市输入验证搜索刷新
|
||||
export function WeatherSearchForm() {
|
||||
const {isLoading,currentWeather,setCurrentWeather,refreshWeather,searchWeather} = useWeatherStore();
|
||||
const [city, setCity] = useState('');
|
||||
const [inputError, setInputError] = useState('');
|
||||
//输入框内容
|
||||
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setCity(event.target.value);
|
||||
setInputError('');
|
||||
};
|
||||
//表单提交验证
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const trimmed = city.trim();
|
||||
|
||||
//创建axios实例 统一请求头
|
||||
const apiClient: AxiosInstance = axios.create({
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import REACT, { use, useEffect } from 'react'
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { WeatherCard } from './WeatherCard'
|
||||
import { useWeatherstore } from './WeatherStore'
|
||||
import { WeatherCard } from '@/components/weather/WeatherCard'
|
||||
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()
|
||||
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
toast.error(error)
|
||||
seterror("")
|
||||
setError("")
|
||||
setError("")
|
||||
}
|
||||
}, [error, seterror])
|
||||
}, [error, setError])
|
||||
}, [error, setError])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-screen">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import axios, {type AxiosInstance,AxiosError} from 'axios';
|
||||
import {WeatherData} from "@/store/weatherStore";
|
||||
import {type WeatherData} from "@/store/weatherStore";
|
||||
|
||||
//配置常量
|
||||
const API_KEY = '5097cc3212ea9c460b01e2be936c94d5';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue