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 './WeatherSearchForm';
import { WeatherDisplay } from './WeatherDisplay';
import { WeatherDetailsGrid } from './WeatherDetailsGrid';
import { useWeatherStore } from '@/store/weatherStore';
import {Cloud} from "lucide-react";
import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm";
import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid";
import { useWeatherStore } from "@/store/weatherStore";
import {Cloud} from 'lucide-react';
export function WeatherCard() {
const { currentWeather } = useWeatherStore();
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 />
{/* 天气内容区域 */}
{currentWeather ? (
<div className="p-6">
<div className="P-4">
<WeatherDisplay />
<WeatherDetailsGrid />
</div>
) : (
<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-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 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>
</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>
);