55 lines
1.7 KiB
React
55 lines
1.7 KiB
React
|
import React, { useState, useEffect } from 'react'
|
||
|
|
import { Tag, Spin, Tooltip } from 'antd'
|
||
|
|
import { CloudOutlined, SunOutlined, CloudRain, ThunderboltOutlined } from '@ant-design/icons'
|
||
|
|
import axios from 'axios'
|
||
|
|
|
||
|
|
function Weather() {
|
||
|
|
const [weather, setWeather] = useState(null)
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchWeather()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const fetchWeather = async () => {
|
||
|
|
try {
|
||
|
|
const res = await axios.get('/api/weather/current?city=beijing')
|
||
|
|
if (res.data.success) {
|
||
|
|
setWeather(res.data.data)
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
console.error('获取天气失败:', err)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const getWeatherIcon = (code) => {
|
||
|
|
if (code === 0) return <SunOutlined style={{ color: '#faad14' }} />
|
||
|
|
if ([95, 96, 99].includes(code)) return <ThunderboltOutlined style={{ color: '#722ed1' }} />
|
||
|
|
if ([61, 63, 65, 80, 81, 82].includes(code)) return <CloudRainOutlined style={{ color: '#1890ff' }} />
|
||
|
|
return <CloudOutlined style={{ color: '#8c8c8c' }} />
|
||
|
|
}
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return <Spin size="small" />
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!weather) {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Tooltip title={`${weather.city} · 湿度 ${weather.current.humidity}% · 风速 ${weather.current.windSpeed}km/h`}>
|
||
|
|
<Tag icon={getWeatherIcon(weather.current.code)} color="default" style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', fontSize: 14 }}>
|
||
|
|
<span>{weather.city}</span>
|
||
|
|
<span style={{ fontWeight: 600 }}>{weather.current.temp}°C</span>
|
||
|
|
<span>{weather.current.weather}</span>
|
||
|
|
<span style={{ color: '#999', fontSize: 12 }}>H:{weather.daily.maxTemp}° L:{weather.daily.minTemp}°</span>
|
||
|
|
</Tag>
|
||
|
|
</Tooltip>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Weather
|