lzq
/
Weather
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11171950

This commit is contained in:
qiuchenfan 2025-11-17 19:50:08 +08:00
parent e8f0ff749a
commit fc449357bd
1 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/routes/weather.tsx
View File

@ -1,49 +1,66 @@
import { toast } from "sonner"
import { Loader2 } from "lucide-react"
import { useEffect } from "react" import React, {useEffect} from 'react';
import { useWeatherStore } from "../store/weatherStore" import { Loader2 } from 'lucide-react';
import { WeatherCard } from "@/components/WeatherCard" import { WeatherCard } from '@/components/weather/WeatherCard';
import { useWeatherStore } from '@/store/weatherStore';
import {toast} from "sonner";
export function meta() { export function meta() {
return [ return [
{ title: "天气查询页面" }, { title: '天气 - Apple风格设计' },
{ name: "description", content: "查询天气信息" } { name: 'description', content: '优雅的天气查询应用' },
] ];
} }
export function Weather() {
const { currentWeather, isLoading, error, setError } = useWeatherStore()
export default function Weather() {
const { currentWeather, isLoading ,error,setError} = useWeatherStore();
// Show toast when error changes
useEffect(() => { useEffect(() => {
if (error) { if (error) {
toast.error(error) toast.error(error);
setError("") // Clear error after showing toast
setError(null);
} }
}, [ErrorEvent, setError]) }, [error, setError]);
return ( return (
<div className="flex flex-col items-center justify-center h-screen"> <div className="min-h-screen bg-gradient-to-b from-slate-50 via-blue-50/30 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 transition-colors duration-500">
<div className="flex flex-col items-center justify-center"> <div className="max-w-4xl mx-auto px-4 py-8 md:px-6 md:py-12">
<header className="flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold">天气查询</h1> <header className="text-center mb-8 space-y-3">
<p className="text-sm">实时天气</p> <h1 className="text-5xl md:text-6xl font-semibold tracking-tight bg-gradient-to-br from-blue-600 via-sky-500 to-cyan-500 dark:from-blue-400 dark:via-sky-400 dark:to-cyan-400 bg-clip-text text-transparent animate-in fade-in slide-in-from-top-4 duration-700">
天气
</h1>
<p className="text-sm md:text-base text-slate-500 dark:text-slate-400 font-medium animate-in fade-in slide-in-from-top-5 duration-700">
实时天气信息
</p>
</header> </header>
{isLoading && !currentWeather && ( {isLoading && !currentWeather && (
<div className="flex flex-col items-center justify-center"> <div className="flex items-center justify-center py-20">
<div className="flex flex-col items-center justify-center"></div> <div className="text-center space-y-6 animate-in fade-in zoom-in-95 duration-500">
<div className="flex flex-col items-center justify-center"> <div className="relative w-16 h-16 mx-auto">
<div className="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-gray-900"> <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 opacity-20 animate-ping"></div>
</div> <div className="relative w-16 h-16 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 flex items-center justify-center">
<div className="text-gray-900 text-lg font-bold"> <Loader2 className="w-8 h-8 text-white animate-spin" />
<Loader2 className="h-10 w-10 animate-spin" />
</div> </div>
</div> </div>
<p className="text-gray-900 text-lg font-bold">正在加载...</p> <p className="text-slate-600 dark:text-slate-300 font-medium">
正在获取天气数据
</p>
</div> </div>
) </div>
} )}
{isLoading || currentWeather ? (
<div className="flex flex-col items-center justify-center"> {!isLoading || currentWeather ? (
<div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
<WeatherCard /> <WeatherCard />
</div> </div>
) : null} ) : null}
</div> </div>
</div> </div>
) );
} }