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

Compare commits

base: lzq:8c3bfc9b4a243f58dd70c5d3c63f0dc95bd73775
Branches Tags
lzq:main
..
compare: lzq:39ac8592c3eb2a902485329554171d44eb2b288c
Branches Tags
lzq:main

2 Commits
8c3bfc9b4a ... 39ac8592c3

Author SHA1 Message Date
qiuchenfan 39ac8592c3 Merge branch 'main' of http://113.45.67.59:3003/lzq/test 2025-11-17 19:36:29 +08:00
qiuchenfan d42096efed 1115 2025-11-17 19:36:05 +08:00
1 changed files with 70 additions and 44 deletions
Show Stats Expand all files Collapse all files

114
app/components/WeatherSearchForm.tsx
View File

@ -14,7 +14,8 @@ export function WeatherSearchForm() {
setCity(e.target.value); setCity(e.target.value);
if (inputError) { if (inputError) {
setInputError(''); setInputError('');
} };
}
const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => { const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -33,48 +34,73 @@ export function WeatherSearchForm() {
} }
await searchWeather(trimmedCity); await searchWeather(trimmedCity);
return ( if (trimmedCity.length < 2) {
<div className='p-6 border-6 border-b-slate-200/50 '> setInputError('请输入至少2个字符');
<form onSubmit={handleFormSubmit} className="space-by-3"> return;
<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" /> if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
</div> setInputError('请输入字母和空格');
<Input return;
type="text" }
value={city} await searchWeather(trimmedCity);
onChange={handleInputChange} }
placeholder="请输入城市名称"
disabled={isLoading} return (
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 className='p-6 border-6 border-b-slate-200/50 '>
/> <form onSubmit={handleFormSubmit} className="space-by-3">
</div> <div className="relative">
{inputError && ( <div className="absolute inset-y-0 left-4 flex items-center pl-3 pointer-events-none">
<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"> <Search className="w-5 h-5 text-gray-500 dark:text-gray-400" />
<AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" /> </div>
<p className="text-red-500 text-xs">{inputError}</p> <Input
</div> type="text"
) value={city}
} onChange={handleInputChange}
<div className='flex gap-2'> placeholder="请输入城市名称"
<Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full"> disabled={isLoading}
{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') }
<Loader2 className="animate-spin w-5 h-5 text-white" /> />
<span>搜索中...</span> </div>
</> : (<> {inputError && (
<Search className="w-5 h-5 text-white" /> <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">
<span>搜索天气</span> <AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" />
</>)} <p className="text-red-500 text-xs">{inputError}</p>
</Button> </div>
{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> <div className='flex gap-2'>
</form> <Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full">
</div>
{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>
) )
} }
}
}