qiuchenfan
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
Li1304553726 2025-11-14 18:55:21 +08:00
parent 18c87de78a
commit c1ccf0064c
2 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
1114/app/components/weather/WeatherDisplay.tsx
View File

@ -1,5 +1,6 @@
import { useWeatherStore } from "@/store/weatherStore"; import { useWeatherStore } from "@/store/weatherStore";
import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun } from "lucide-react"; import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun, ThermometerSun } from "lucide-react";
import { formatTemperature } from "../lib/utils";
interface WeatherIconProps { interface WeatherIconProps {
description: string; description: string;
@ -31,22 +32,40 @@ export function WeatherDisplay(){
if (!currentWeather) return null; if (!currentWeather) return null;
return ( 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="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-r from-white/10 to-transparent"></div> <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="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-start justify-between mb-6"> <div className="flex items-start justify-between mb-6">
<div> <div>
<h2 className="text-3xl font-semibold mb-2 text-white">{currentWeather.location.name}</h2> <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"> <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"/> <MapPin className="w-3 h-3 text-white/90" />
<div className="text-white text-sm">{currentWeather.location.country}</div> <span className="text-sm text-white/90">{currentWeather.location.country}</span>
</div> </div>
</div> </div>
<div className="text-white/90"> <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"/> */} <WeatherIcon
description={currentWeather.current.weather_descriptions[0]}
isDay={currentWeather.current.is_day}
/>
</div> </div>
</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>
</div> </div>
) )

4
1114/app/store/weatherStore.ts
View File

@ -102,7 +102,7 @@ export const useWeatherStore = create<WeatherStore>()(
set({currentWeather:cachedWeather.data,isLoading:false}); set({currentWeather:cachedWeather.data,isLoading:false});
return; return;
} }
const weatherData = await WeatherAPI.getWeather(city); const weatherData = await WeatherAPI.getCurrentWeather(city);
set({currentWeather:weatherData,isLoading:false}); set({currentWeather:weatherData,isLoading:false});
get().cacheWeather(city,weatherData); get().cacheWeather(city,weatherData);
}catch(error){ }catch(error){
@ -115,7 +115,7 @@ export const useWeatherStore = create<WeatherStore>()(
try{ try{
set({isLoading:true,error:null}); set({isLoading:true,error:null});
const city = currentWeather.location.name; const city = currentWeather.location.name;
const weatherData = await WeatherAPI.getWeather(city); const weatherData = await WeatherAPI.getCurrentWeather(city);
set({currentWeather:weatherData,isLoading:false}); set({currentWeather:weatherData,isLoading:false});
get().cacheWeather(currentWeather.location.name,weatherData); get().cacheWeather(currentWeather.location.name,weatherData);
}catch(error){ }catch(error){