form 更新

app/components/WeatherSearchForm.tsx

@@ -7,7 +7,7 @@ import { useWeatherStore } from '@/store/weatherStore';
 
 
 export function WeatherSearchForm() {
-    const [isLoading, currentWeather, searchWeather, refreshWeather] = useWeatherStore();
+    const {isLoading, currentWeather, searchWeather, refreshWeather} = useWeatherStore();
 
     const [city, setCity] = useState('');
     const [inputError, setInputError] = useState('');
@@ -25,11 +25,7 @@ export function WeatherSearchForm() {
                 setInputError('请输入城市名称');
                 return;
             }
-            if (!trimmedCity) {
-                setInputError('请输入有效的城市名称');
-                return;
-            }
-
+        
             if (trimmedCity.length < 2) {
                 setInputError('请输入至少2个字符');
                 return;
@@ -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>
 
 
@@ -99,4 +94,5 @@ export function WeatherSearchForm() {
         )
     }
 
+}
 }