app/components/WeatherDisplay.tsx

@@ -45,6 +45,8 @@ 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,8 +8,10 @@ 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) {
@@ -23,10 +25,12 @@ export function WeatherSearchForm() {
                 setInputError('请输入城市名称');
                 return;
             }
+        
             if (trimmedCity.length < 2) {
                 setInputError('请输入至少2个字符');
                 return;
             }
+
             if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
                 setInputError('请输入字母和空格');
                 return;
@@ -54,10 +58,16 @@ export function WeatherSearchForm() {
                             <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>
@@ -66,15 +76,23 @@ export function WeatherSearchForm() {
                                 <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>
+
+
+
         )
     }
+
 }
 }