Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/test

1114/app/components/weather/WeatherCard.tsx

@@ -1,33 +1,39 @@
-import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm.tsx";
+import React, { useEffect } from 'react';
-import { WeatherDisplay } from "@/components/weather/WeatherDisplay.tsx";
+import { WeatherSearchForm } from './WeatherSearchForm';
-import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid.tsx";
+import { WeatherDisplay } from './WeatherDisplay';
-import { useWeatherStore } from "@/store/weatherStore.tsx";
+import { WeatherDetailsGrid } from './WeatherDetailsGrid';
-import Cloud  from "../../../assets/cloud.svg";
+import { useWeatherStore } from '@/store/weatherStore';
+import {Cloud} from "lucide-react";
 
 export function WeatherCard() {
   const { currentWeather } = useWeatherStore();
-
   return (
-    <div>
+    <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">
-      <WeatherSearchForm />
+      {/* 搜索表单区域 */}
       <WeatherSearchForm />
+
+      {/* 天气内容区域 */}
+
       {currentWeather ? (
-        <div className="P-4">
+        <div className="p-6">
           <WeatherDisplay />
           <WeatherDetailsGrid />
         </div>
       ) :  (
-        <div className="flex flex-col items-center justify-center h-full">
+          <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
-          <div className="animate-spin">
+              <div className="relative mb-6">
-            <div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div>
+                  <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">
+                  <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/> 
+                      <Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
                   </div>
               </div>
-          <h3 className="text-2xl font-bold text-slate-700 dark:text-slate-200 mb-2">暂无天气数据</h3>
+              <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2">
-          <p className="text-sm text-slate-500 dark:text-slate-400">请搜索城市查看实时天气信息</p>
+                  暂无天气数据
+              </h3>
+              <p className="text-sm text-slate-500 dark:text-slate-400">
+                  请搜索城市查看实时天气信息
+              </p>
           </div>
-        
       )}
     </div>
   );

1114/app/components/weather/WeatherDetailsGrid.tsx

@@ -1,6 +1,6 @@
 import { Droplets,Wind,Gauge,Cloud,Eye,ThermometerSun} from "lucide-react";
 import React from "react";
-import { getWindDirection } from "@/components/lib/utils";
+import { getWindDirection } from "@/lib/utils";
 import {useWeatherStore} from "@/store/weatherStore";
 
 interface WeatherInfoItemProps {

1114/app/components/weather/WeatherDisplay.tsx

@@ -0,0 +1,72 @@
+import { useWeatherStore } from "@/store/weatherStore";
+import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun, ThermometerSun } from "lucide-react";
+import { formatTemperature } from "../../lib/utils";
+
+interface WeatherIconProps {
+    description: string;
+    isDay: string;
+    className?: string;
+}
+
+function WeatherIcon({ description, isDay, className='w-16 h-16 md:w-20 md:h-20' }: WeatherIconProps) {
+    const desc = description.toLowerCase();
+    const isDaytime = isDay === 'yes';
+
+    if(desc.includes('雨') || desc.includes('rain')) return <CloudRain className={className}/>
+    if(desc.includes('雪') || desc.includes('snow')) return <CloudSnow className={className}/>
+    if(desc.includes('雷') || desc.includes('thunderstorm')) return <CloudLightning className={className}/>
+    if(desc.includes('fog') || desc.includes('雾')) return <CloudFog className={className}/>
+    if(desc.includes('cloudy') || desc.includes('阴') || desc.includes('overcast')) return <Cloud className={className}/>
+    if(desc.includes('heavy') || desc.includes('暴')) return <CloudDrizzle className={className}/>
+    if(desc.includes('晴') || desc.includes('clear') || desc.includes('sunny')) return (
+        isDaytime ? <Sun className={className}/> : <Moon className={className}/>
+    )
+    if(desc.includes('scattered') || desc.includes('多云') || desc.includes('partial')) return (
+        isDaytime ? <CloudSun className={className}/> : <CloudMoon className={className}/>
+    )
+    return isDaytime ? <Sun className={className}/> : <Moon className={className}/>
+}
+
+export function WeatherDisplay(){
+    const {currentWeather} = useWeatherStore();
+    if (!currentWeather) return null;
+
+    return (
+        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 via-cyan-500 to-blue-600 dark:from-blue-600 dark:via-cyan-600 dark:to-blue-700 p-6 mb-4">
+      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
+      <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
+
+      <div className="relative z-10">
+        <div className="flex items-start justify-between mb-6">
+          <div>
+            <h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
+            <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-white/20 backdrop-blur-sm">
+              <MapPin className="w-3 h-3 text-white/90" />
+              <span className="text-sm text-white/90">{currentWeather.location.country}</span>
+            </div>
+          </div>
+          <div className="text-white/90">
+            <WeatherIcon
+              description={currentWeather.current.weather_descriptions[0]}
+              isDay={currentWeather.current.is_day}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-baseline gap-2 mb-2">
+          <span className="text-6xl font-light text-white">
+            {formatTemperature(currentWeather.current.temperature)}
+          </span>
+          <span className="text-2xl text-white/80">°C</span>
+        </div>
+        <p className="text-lg text-white/90 font-medium mb-2 capitalize">
+          {currentWeather.current.weather_descriptions[0]}
+        </p>
+        <div className="flex items-center gap-2 text-white/80 text-sm">
+          <ThermometerSun className="w-4 h-4" />
+          <span>体感 {formatTemperature(currentWeather.current.feelslike)}°C</span>
+        </div>
+      </div>
+    </div>
+    )
+}

1114/app/components/weather/WeatherSearchForm.tsx

@@ -1,5 +1,5 @@
 //天气搜索表单组件
-import { cn } from "@/components/lib/utils";
+import { cn } from "@/lib/utils";
 import React ,{useState,type FormEvent,type ChangeEvent, use} from "react";
 import { Button } from "@/components/ui/button";
 import { Input} from "../ui/input";

1114/app/routes/weather.tsx

@@ -15,7 +15,7 @@ export function meta() {
 }
 
 export default function Weather() {
-    const { currentWeather, isLoading, error, setError } = useWeatherStore()
+   
     const { currentWeather, isLoading, error, setError } = useWeatherStore()
     useEffect(() => {
         if (error) {
@@ -24,7 +24,7 @@ export default function Weather() {
             setError("")
         }
     }, [error, setError])
-    }, [error, setError])
+  
 
     return (
         <div className="flex flex-col items-center justify-center h-screen">

1114/pnpm-lock.yaml

@@ -79,7 +79,7 @@ importers:
         specifier: ^22.19.0
         version: 22.19.1
       '@types/react':
-        specifier: ^19.1.13
+        specifier: ^19.2.4
         version: 19.2.4
       '@types/react-dom':
         specifier: ^19.1.9