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

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

This commit is contained in:
qiuchenfan 2025-11-17 19:59:04 +08:00
parent dfa1473b3d 041c26283b
commit 99bbe5599c
1 changed files with 40 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
app/components/WeatherSearchForm.tsx
View File

@ -36,57 +36,46 @@ export function WeatherSearchForm() {
}
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 pl-15 w-full text-base rounded-xl bg-slate-50/50 focus:bg-white transition-all', inputError && 'border-red-500') }
/>
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>
{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>
</>)}
<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>
{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>
)}
</div>
</form>
</div>
)
}
}