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

Compare commits

base: qiuchenfan:37c39d6b6000cc2b93be32237a375c4fb84880fd
Branches Tags
qiuchenfan:main
..
compare: qiuchenfan:d7be705d20df1b2b53f797f86b556bce911c5c33
Branches Tags
qiuchenfan:main

No commits in common. "37c39d6b6000cc2b93be32237a375c4fb84880fd" and "d7be705d20df1b2b53f797f86b556bce911c5c33" have entirely different histories.
37c39d6b60 ... d7be705d20

1 changed files with 20 additions and 26 deletions
Show Stats Expand all files Collapse all files

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

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