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

Compare commits

base: lzq:8fcd74b79f6f2db62ceb0371f342f6b0bf9f811e
Branches Tags
lzq:main
..
compare: lzq:56c08f7c8f54498d09badeebc287b3df99f9e664
Branches Tags
lzq:main

No commits in common. "8fcd74b79f6f2db62ceb0371f342f6b0bf9f811e" and "56c08f7c8f54498d09badeebc287b3df99f9e664" have entirely different histories.
8fcd74b79f ... 56c08f7c8f

1 changed files with 13 additions and 9 deletions
Show Stats Expand all files Collapse all files

18
app/components/WeatherSearchForm.tsx
View File

@ -25,6 +25,10 @@ export function WeatherSearchForm() {
setInputError('请输入城市名称'); setInputError('请输入城市名称');
return; return;
} }
if (!trimmedCity) {
setInputError('请输入有效的城市名称');
return;
}
if (trimmedCity.length < 2) { if (trimmedCity.length < 2) {
setInputError('请输入至少2个字符'); setInputError('请输入至少2个字符');
@ -36,9 +40,10 @@ export function WeatherSearchForm() {
return; return;
} }
await searchWeather(trimmedCity); await searchWeather(trimmedCity);
}
return ( return (
<div className='p-6 border-6 border-b-slate-200/50 '> <div className='p-6 border-6 '>
<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">
@ -47,16 +52,16 @@ export function WeatherSearchForm() {
<Input <Input
type="text" type="text"
value={city} value={city}
onChange={handleInputChange} onChange={(e) => setCity(e.target.value)}
placeholder="请输入城市名称" placeholder="请输入城市名称"
disabled={isLoading} 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') } className={cn('pl-10 pr-4 py-2 w-full', inputError && 'border-red-500')}
/> />
</div> </div>
{inputError && ( {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"> <div className="text-red-500 text-sm mt-1">
<AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" /> <AlertCircle className="inline w-4 h-4 mr-1" />
<p className="text-red-500 text-xs">{inputError}</p> <p className="inline-block">{inputError}</p>
</div> </div>
@ -95,4 +100,3 @@ export function WeatherSearchForm() {
} }
} }
}