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

Compare commits

base: qiuchenfan:470c91d0105c7495416168f18094d21a220b1fd1
Branches Tags
qiuchenfan:main
..
compare: qiuchenfan:de3234a5842e61f203e08397d29a0f5669d7f07c
Branches Tags
qiuchenfan:main

No commits in common. "470c91d0105c7495416168f18094d21a220b1fd1" and "de3234a5842e61f203e08397d29a0f5669d7f07c" have entirely different histories.
470c91d010 ... de3234a584

2 changed files with 0 additions and 88 deletions
Show Stats Expand all files Collapse all files

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

@ -1,33 +0,0 @@
import { WeathersearchForm } from "./WeatherSearchForm.tsx";
import { WeatherDisplay } from "./WeatherDisplay.tsx";
import { WeatherDetailsGrid } from "./WeatherDetailsGrid.tsx";
import { useWeatherStore } from "./WeatherStore.tsx";
import Cloud from "../../../assets/cloud.svg";
export function WeatherCard() {
const { currentWeather } = useWeatherStore();
return (
<div>
<WeathersearchForm />
{currentWeather ? (
<div className="P-4">
<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>
</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>
);
}

55
1114/app/routes/weather.tsx
View File

@ -1,55 +0,0 @@
import REACT, { use, useEffect } from 'react'
import { Loader2 } from 'lucide-react';
import { WeatherCard } from './WeatherCard'
import { useWeatherstore } from './WeatherStore'
import { toast } from 'sonner'
export function meta() {
return [
{ title: "天气查询页面" },
{ name: "description", content: "查询天气信息" }
]
}
export default function Weather() {
const { currentWeather, isLoading, error, seterror } = useWeatherstore()
useEffect(() => {
if (error) {
toast.error(error)
seterror("")
}
}, [error, seterror])
return (
<div className="flex flex-col items-center justify-center h-screen">
<div className="flex flex-col items-center justify-center">
<header className="flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold">天气查询</h1>
<p className="text-sm">实时天气</p>
</header>
{isLoading && !currentWeather && (
<div className="flex flex-col items-center justify-center">
<div className="flex flex-col items-center justify-center">
<div className='flex flex-col items-center justify-center'>
<div className="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-gray-900">
</div>
<div className="text-gray-900 text-lg font-bold">
<Loader2 className="h-10 w-10 animate-spin" />
</div>
</div>
<p className="text-gray-900 text-lg font-bold"> 加载中...</p>
</div>
</div>
)}
{!isLoading || currentWeather ? (
<div className="flex flex-col items-center justify-center">
<WeatherCard />
</div>
) : null}
</div>
</div>
)
}