lzq
/
Weather
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
jinsir 2025-11-17 19:30:10 +08:00
parent 465a52d36f 56c08f7c8f
commit 8fcd74b79f
4 changed files with 99 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/WeatherCard.tsx
View File

@ -1,5 +1,8 @@
import { useWeatherStore } from "@/store/weatherStore";
import { Cloud } from "lucide-react";
import {WeatherDisplay } from '@/components/WeatherDisplay'
import { WeatherSearchForm } from "./WeatherSearchForm";
import { WeatherDetailsGrid } from "./WeatherDetailsGird";
export function WeatherCard(){
const{ currentWeather} = useWeatherStore();

1
app/components/WeatherDetailsGird.tsx
View File

@ -1,5 +1,6 @@
import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
import { useWeatherStore } from "@/store/weatherStore";
import { MapPin, Thermometer } from "lucide-react";
interface WeatherDetailsGridProps {
icon: React.ReactNode;

92
app/components/WeatherDisplay.tsx Normal file
View File

@ -0,0 +1,92 @@
import React from 'react';
import {
Cloud,
CloudDrizzle,
CloudFog,
CloudLightning, CloudMoon,
CloudRain,
CloudSnow,
CloudSun,
MapPin, Moon, Sun,
Thermometer,
ThermometerSun
} from 'lucide-react';
import { formatTemperature } from "@/lib/utils";
import { useWeatherStore } from '@/store/weatherStore';
interface WeatherIconProps {
description: string;
isDay: string;
className?: string;
}
/**
* Returns the appropriate weather icon based on description and time of day
*/
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('rain') || desc.includes('雨')) {
return desc.includes('heavy') || desc.includes('暴')
? <CloudRain className={className} />
: <CloudDrizzle className={className} />;
}
if (desc.includes('snow') || desc.includes('雪')) return <CloudSnow className={className} />;
if (desc.includes('thunder') || desc.includes('storm') || desc.includes('雷')) return <CloudLightning className={className} />;
if (desc.includes('fog') || desc.includes('mist') || desc.includes('haze') || desc.includes('雾') || desc.includes('霾')) return <CloudFog className={className} />;
if (desc.includes('partly') || desc.includes('scattered') || desc.includes('多云')) {
return isDaytime ? <CloudSun className={className} /> : <CloudMoon className={className} />;
}
if (desc.includes('cloudy') || desc.includes('overcast') || desc.includes('阴')) return <Cloud className={className} />;
if (desc.includes('clear') || desc.includes('sunny') || desc.includes('晴')) {
return isDaytime ? <Sun className={className} /> : <Moon 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-b from-blue-500 via-cyan-500 to-blue-500 p-6 mb-4">
<div className="absolute inset-0 bg-gradient-to-br from-white/100 to-transparent"></div>
<div className="absolute -right-8 -top-8 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
<div className="realtive 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="text-white w-3 h-3">
<MapPin className="w-3 h-3 text-white" />
<span className="text-white text-sm">{currentWeather.location.country}</span>
</div>
<div className="text-white ">
<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">
°C
</span>
</div>
<p className="text-lg text-white mb-2 capitalize font-medium">
{currentWeather.current.weather_descriptions[0]}
</p>
<div className="flex items-center gap-2 text-white text-sm">
<ThermometerSun className="w-4 h-4"/>
<span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
</div>
</div>
</div>
</div>
)
}

5
app/store/weatherStore.ts
View File

@ -1,5 +1,6 @@
import { create } from 'zustand'
import {persist,createJSONStorage} from 'zustand/middleware'
import { WeatherApi } from '@/services/weatherApi';
const CACHE_EXPIRY = 10 * 60 * 1000;
export interface Location {
@ -98,7 +99,7 @@ export const useWeatherStore = create<WeatherStore>()(
set({currentWeather:cachedWeather,isLoading:false});
return;
}
const WeatherData = await WeatherAPI.getcurrentWeather(city);
const WeatherData = await WeatherApi.getCurrentWeather(city);
set({currentWeather:WeatherData,isLoading:false});
get().cacheWeather(city,WeatherData);
}catch(error){
@ -111,7 +112,7 @@ export const useWeatherStore = create<WeatherStore>()(
try{
set({isLoading:true,error:null});
const city = currentWeather.location.name;
const WeatherData = await WeatherAPI.getcurrentWeather(city);
const WeatherData = await WeatherApi.getCurrentWeather(city);
set({currentWeather:WeatherData,isLoading:false});
get().cacheWeather(city,WeatherData);
}catch(error){