1

app/components/WeatherDetailsGird.tsx

@@ -1,5 +1,6 @@
 import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
 import { useWeatherStore } from "@/store/weatherStore";
+import { MapPin, Thermometer } from "lucide-react";
 
 interface WeatherDetailsGridProps {
   icon: React.ReactNode;

app/components/WeatherDisplay.tsx

@@ -9,6 +9,7 @@ import {
     CloudSnow,
     CloudSun,
     MapPin, Moon, Sun,
+    Thermometer,
     ThermometerSun
 } from 'lucide-react';
 
@@ -44,7 +45,6 @@ function WeatherIcon({ description, isDay, className = "w-16 h-16 md:w-20 md:h-2
     }
     return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
 }
-
 export function WeatherDisplay(){
     const {currentWeather} = useWeatherStore();
     if(!currentWeather) return null;

app/components/WeatherSearchForm.tsx

@@ -25,10 +25,6 @@ export function WeatherSearchForm() {
                 setInputError('请输入城市名称');
                 return;
             }
-            if (!trimmedCity) {
-                setInputError('请输入有效的城市名称');
-                return;
-            }
         
             if (trimmedCity.length < 2) {
                 setInputError('请输入至少2个字符');
@@ -40,10 +36,9 @@ export function WeatherSearchForm() {
                 return;
             }
             await searchWeather(trimmedCity);
-        }
         
         return (
-            <div className='p-6 border-6 '>
+            <div className='p-6 border-6 border-b-slate-200/50 '>
                 <form onSubmit={handleFormSubmit} className="space-by-3">
                     <div className="relative">
                         <div className="absolute inset-y-0 left-4 flex items-center pl-3 pointer-events-none">
@@ -52,16 +47,16 @@ export function WeatherSearchForm() {
                         <Input
                             type="text"
                             value={city}
-                            onChange={(e) => setCity(e.target.value)}
+                            onChange={handleInputChange}
                             placeholder="请输入城市名称"
                             disabled={isLoading}
-                            className={cn('pl-10 pr-4 py-2 w-full', inputError && 'border-red-500')}
+                            className={cn('pl-10 pr-4 py-2 w-full text-base rounded-xl bg-slate-50/50 focus:bg-white transition-all', inputError && 'border-red-500') }
                         />
                     </div>
                     {inputError && (
-                        <div className="text-red-500 text-sm mt-1">
-                            <AlertCircle className="inline w-4 h-4 mr-1" />
-                            <p className="inline-block">{inputError}</p>
+                        <div className=" flex items-center gap-2 px-3 py-2 rounded-lg bg-red-50/80 animated-in slide-in-from-top-1 fade-in">
+                            <AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" />
+                            <p className="text-red-500 text-xs">{inputError}</p>
                         </div>
 
 
@@ -100,3 +95,4 @@ export function WeatherSearchForm() {
     }
 
 }
+}