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

card修改

This commit is contained in:
jinsir 2025-11-14 19:15:26 +08:00
parent f59b45fb64
commit 561723e5b4
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
1114/app/components/weather/WeatherCard.tsx
View File

@ -1,33 +1,39 @@
import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm.tsx"; import React, { useEffect } from 'react';
import { WeatherDisplay } from "@/components/weather/WeatherDisplay.tsx"; import { WeatherSearchForm } from './WeatherSearchForm';
import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid.tsx"; import { WeatherDisplay } from './WeatherDisplay';
import { useWeatherStore } from "@/store/weatherStore.tsx"; import { WeatherDetailsGrid } from './WeatherDetailsGrid';
import Cloud from "../../../assets/cloud.svg"; import { useWeatherStore } from '@/store/weatherStore';
import {Cloud} from "lucide-react";
export function WeatherCard() { export function WeatherCard() {
const { currentWeather } = useWeatherStore(); const { currentWeather } = useWeatherStore();
return ( return (
<div> <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 /> {/* 搜索表单区域 */}
<WeatherSearchForm /> <WeatherSearchForm />
{/* 天气内容区域 */}
{currentWeather ? ( {currentWeather ? (
<div className="P-4"> <div className="p-6">
<WeatherDisplay /> <WeatherDisplay />
<WeatherDetailsGrid /> <WeatherDetailsGrid />
</div> </div>
) : ( ) : (
<div className="flex flex-col items-center justify-center h-full"> <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
<div className="animate-spin"> <div className="relative mb-6">
<div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div> <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full opacity-10 blur-2xl"></div>
<div className="h-10 w-10"> <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/> <Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
</div> </div>
</div>
<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>
<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>
</div>
)} )}
</div> </div>
); );