From dd876ce74cd269f461aab71675e5ebf20c99869c Mon Sep 17 00:00:00 2001 From: jinsir <874871581@qq.com> Date: Fri, 14 Nov 2025 18:38:11 +0800 Subject: [PATCH 1/2] jin1114 --- 1114/app/components/weather/WeatherCard.tsx | 33 +++++++++++++ 1114/app/routes/weather.tsx | 55 +++++++++++++++++++++ 2 files changed, 88 insertions(+) diff --git a/1114/app/components/weather/WeatherCard.tsx b/1114/app/components/weather/WeatherCard.tsx index e69de29..732f1d7 100644 --- a/1114/app/components/weather/WeatherCard.tsx +++ b/1114/app/components/weather/WeatherCard.tsx @@ -0,0 +1,33 @@ +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 ( +
+ + {currentWeather ? ( +
+ + +
+ ) : ( +
+
+
+
+ +
+
+

暂无天气数据

+

请搜索城市查看实时天气信息

+
+ + )} +
+ ); +} diff --git a/1114/app/routes/weather.tsx b/1114/app/routes/weather.tsx index e69de29..9a3823f 100644 --- a/1114/app/routes/weather.tsx +++ b/1114/app/routes/weather.tsx @@ -0,0 +1,55 @@ +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 ( +
+
+
+

天气查询

+

实时天气

+
+ {isLoading && !currentWeather && ( +
+
+
+
+
+
+ +
+
+

加载中...

+
+
+ )} + {!isLoading || currentWeather ? ( +
+ +
+ ) : null} +
+
+ ) +} \ No newline at end of file From c8cc492f5785f96b5928f6026050f1227d6c7903 Mon Sep 17 00:00:00 2001 From: qiuchenfan <2035024011@qq.com> Date: Fri, 14 Nov 2025 18:38:54 +0800 Subject: [PATCH 2/2] qiu1 --- .../components/weather/WeatherDetailsCrid.tsx | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/1114/app/components/weather/WeatherDetailsCrid.tsx b/1114/app/components/weather/WeatherDetailsCrid.tsx index e69de29..8b53a89 100644 --- a/1114/app/components/weather/WeatherDetailsCrid.tsx +++ b/1114/app/components/weather/WeatherDetailsCrid.tsx @@ -0,0 +1,77 @@ +import { Droplets,Wind,Gauge,Cloud,Eye,ThermometerSun} from "lucide-react"; +import React from "react"; +import { getWindDirection } from "@/lib/utils"; +import {useWeatherStore} from "@/store/weatherStore"; + +interface WeatherInfoItemProps { + icon: React.ReactNode; + label: string; + value: string; + subtitle?: string; +} + +function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) { + return ( +
+
+
{icon}
+
+

{label}

+

{value}

+ {subtitle &&

{subtitle}

} +
+
+
+ + ); +} + +export function WeatherDetailsGrid() { + + <> +
+ } + label="湿度" + value={'${currentWeather.current.humidity}%'}/> + + } + label="风速" + value={'${currentWeather.current.wind_speed}%'} + subtitle={getWindDirection(currentWeather.current.wind_dir)}/> + + } + label="气压" + value={'${currentWeather.current.humidity}%'}/> + + + } + label="云量" + value={'${currentWeather.current.cloudcover}%'}/> + + + } + label="紫外线" + value={'${currentWeather.current.uv_index}%'}/> + +
+ +
+
+
+ + 降水量：{currentWeather.current.precip}mm + +
+ {currentWeather.current.is_day==="yes"?'白天':'夜晚'} +
+

观测时间：{currentWeather.current.observation_time}

+
+ + + +} \ No newline at end of file