1

app/components/WeatherDisplay.tsx

@@ -45,8 +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

@@ -8,91 +8,73 @@ import { useWeatherStore } from '@/store/weatherStore';
 
 export function WeatherSearchForm() {
     const {isLoading, currentWeather, searchWeather, refreshWeather} = useWeatherStore();
-
     const [city, setCity] = useState('');
     const [inputError, setInputError] = useState('');
-
     const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
         setCity(e.target.value);
         if (inputError) {
             setInputError('');
         }
 
-        const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
-            e.preventDefault();
+        e.preventDefault();
-            const trimmedCity = city.trim();
+        const trimmedCity = city.trim();
-            if (!trimmedCity) {
+        if (!trimmedCity) {
-                setInputError('请输入城市名称');
+            setInputError('请输入城市名称');
-                return;
+            return;
-            }
+        }
-        
+         if (trimmedCity.length < 2) {
-            if (trimmedCity.length < 2) {
+             setInputError('请输入至少2个字符');
-                setInputError('请输入至少2个字符');
+             return;
-                return;
+         }
-            }
+         if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
-
+             setInputError('请输入字母和空格');
-            if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
+             return;
-                setInputError('请输入字母和空格');
+         }
-                return;
+         await searchWeather(trimmedCity);
-            }
-            await searchWeather(trimmedCity);
-        
-        return (
-            <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">
-                            <Search className="w-5 h-5 text-gray-500 dark:text-gray-400" />
-                        </div>
-                        <Input
-                            type="text"
-                            value={city}
-                            onChange={handleInputChange}
-                            placeholder="请输入城市名称"
-                            disabled={isLoading}
-                            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=" 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>
-
-
-                    )
-                    }
-
-                    <div className='flex gap-2'>
-                        <Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full">
-
-
-
-                            {isLoading ? <>
-                                <Loader2 className="animate-spin w-5 h-5 text-white" />
-                                <span>搜索中...</span>
-                            </> : (<>
-                                <Search className="w-5 h-5 text-white" />
-                                <span>搜索天气</span>
-                            </>)}
-                        </Button>
-
-                        {currentWeather && (
-                            <Button type="button" variant="outline" onClick={refreshWeather} disabled={isLoading} className="mt-4 w-full" title='刷新数据'>
-                                <RefreshCw className={cn("w-5 h-5", isLoading && "animate-spin")} />
-
-                            </Button>
-                        )}
-                    </div>
-
-
-                </form>
-            </div>
-
-
         
+    return (
+         <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">
+                         <Search className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                     </div>
+                     <Input
+                         type="text"
+                         value={city}
+                         onChange={handleInputChange}
+                         placeholder="请输入城市名称"
+                         disabled={isLoading}
+                         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=" 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>
+                 )
+                 }
+                 <div className='flex gap-2'>
+                     <Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full">
+                         {isLoading ? <>
+                             <Loader2 className="animate-spin w-5 h-5 text-white" />
+                             <span>搜索中...</span>
+                         </> : (<>
+                             <Search className="w-5 h-5 text-white" />
+                             <span>搜索天气</span>
+                         </>)}
+                     </Button>
+                     {currentWeather && (
+                         <Button type="button" variant="outline" onClick={refreshWeather} disabled={isLoading} className="mt-4 w-full" title='刷新数据'>
+                             <RefreshCw className={cn("w-5 h-5", isLoading && "animate-spin")} />
+                         </Button>
+                     )}
+                 </div>
+             </form>
+         </div>
         )
     }
-
 }
 }