lzq
/
Weather
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

form 更新

This commit is contained in:
jinsir 2025-11-17 19:29:59 +08:00
parent 4bf2c78132
commit 465a52d36f
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/WeatherSearchForm.tsx
View File

@ -7,7 +7,7 @@ import { useWeatherStore } from '@/store/weatherStore';
export function WeatherSearchForm() { export function WeatherSearchForm() {
const [isLoading, currentWeather, searchWeather, refreshWeather] = useWeatherStore(); const {isLoading, currentWeather, searchWeather, refreshWeather} = useWeatherStore();
const [city, setCity] = useState(''); const [city, setCity] = useState('');
const [inputError, setInputError] = useState(''); const [inputError, setInputError] = useState('');
@ -25,10 +25,6 @@ export function WeatherSearchForm() {
setInputError('请输入城市名称'); setInputError('请输入城市名称');
return; return;
} }
if (!trimmedCity) {
setInputError('请输入有效的城市名称');
return;
}
if (trimmedCity.length < 2) { if (trimmedCity.length < 2) {
setInputError('请输入至少2个字符'); setInputError('请输入至少2个字符');
@ -40,10 +36,9 @@ export function WeatherSearchForm() {
return; return;
} }
await searchWeather(trimmedCity); await searchWeather(trimmedCity);
}
return ( 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"> <form onSubmit={handleFormSubmit} className="space-by-3">
<div className="relative"> <div className="relative">
<div className="absolute inset-y-0 left-4 flex items-center pl-3 pointer-events-none"> <div className="absolute inset-y-0 left-4 flex items-center pl-3 pointer-events-none">
@ -52,16 +47,16 @@ export function WeatherSearchForm() {
<Input <Input
type="text" type="text"
value={city} value={city}
onChange={(e) => setCity(e.target.value)} onChange={handleInputChange}
placeholder="请输入城市名称" placeholder="请输入城市名称"
disabled={isLoading} 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> </div>
{inputError && ( {inputError && (
<div className="text-red-500 text-sm mt-1"> <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 mr-1" /> <AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" />
<p className="inline-block">{inputError}</p> <p className="text-red-500 text-xs">{inputError}</p>
</div> </div>
@ -100,3 +95,4 @@ export function WeatherSearchForm() {
} }
} }
}