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

app/components/WeatherSearchForm.tsx

@@ -14,7 +14,8 @@ export function WeatherSearchForm() {
         setCity(e.target.value);
         if (inputError) {
             setInputError('');
-        }
+        };
+    }
 
     const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
@@ -33,48 +34,73 @@ export function WeatherSearchForm() {
          }
          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>
+            if (trimmedCity.length < 2) {
+                setInputError('请输入至少2个字符');
+                return;
+            }
+
+            if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
+                setInputError('请输入字母和空格');
+                return;
+            }
+            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>
+
+
+
         )
     }
-}
-}
+
+