Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/test
This commit is contained in:
commit
0c81f64e0f
|
|
@ -1,33 +1,39 @@
|
|||
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";
|
||||
import React, { useEffect } from 'react';
|
||||
import { WeatherSearchForm } from './WeatherSearchForm';
|
||||
import { WeatherDisplay } from './WeatherDisplay';
|
||||
import { WeatherDetailsGrid } from './WeatherDetailsGrid';
|
||||
import { useWeatherStore } from '@/store/weatherStore';
|
||||
import {Cloud} from "lucide-react";
|
||||
|
||||
export function WeatherCard() {
|
||||
const { currentWeather } = useWeatherStore();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<WeatherSearchForm />
|
||||
<div className="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/80 shadow-2xl shadow-slate-200/50 dark:shadow-slate-900/50 transition-all duration-300">
|
||||
{/* 搜索表单区域 */}
|
||||
<WeatherSearchForm />
|
||||
|
||||
{/* 天气内容区域 */}
|
||||
|
||||
{currentWeather ? (
|
||||
<div className="P-4">
|
||||
<div className="p-6">
|
||||
<WeatherDisplay />
|
||||
<WeatherDetailsGrid />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<div className="animate-spin">
|
||||
<div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div>
|
||||
<div className="h-10 w-10">
|
||||
<Cloud/>
|
||||
<div className="flex flex-col items-center justify-center py-16 px-6 text-center">
|
||||
<div className="relative mb-6">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full opacity-10 blur-2xl"></div>
|
||||
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-blue-100 to-cyan-100 dark:from-blue-900/30 dark:to-cyan-900/30 flex items-center justify-center">
|
||||
<Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-slate-700 dark:text-slate-200 mb-2">暂无天气数据</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">请搜索城市查看实时天气信息</p>
|
||||
<h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2">
|
||||
暂无天气数据
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
请搜索城市查看实时天气信息
|
||||
</p>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Droplets,Wind,Gauge,Cloud,Eye,ThermometerSun} from "lucide-react";
|
||||
import React from "react";
|
||||
import { getWindDirection } from "@/components/lib/utils";
|
||||
import { getWindDirection } from "@/lib/utils";
|
||||
import {useWeatherStore} from "@/store/weatherStore";
|
||||
|
||||
interface WeatherInfoItemProps {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
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,5 +1,5 @@
|
|||
//天气搜索表单组件
|
||||
import { cn } from "@/components/lib/utils";
|
||||
import { cn } from "@/lib/utils";
|
||||
import React ,{useState,type FormEvent,type ChangeEvent, use} from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input} from "../ui/input";
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export function meta() {
|
|||
}
|
||||
|
||||
export default function Weather() {
|
||||
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
||||
|
||||
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
|
|
@ -24,7 +24,7 @@ export default function Weather() {
|
|||
setError("")
|
||||
}
|
||||
}, [error, setError])
|
||||
}, [error, setError])
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-screen">
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ importers:
|
|||
specifier: ^22.19.0
|
||||
version: 22.19.1
|
||||
'@types/react':
|
||||
specifier: ^19.1.13
|
||||
specifier: ^19.2.4
|
||||
version: 19.2.4
|
||||
'@types/react-dom':
|
||||
specifier: ^19.1.9
|
||||
|
|
|
|||
Loading…
Reference in New Issue