102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import React, { useState, type FormEvent, type ChangeEvent } from 'react';
|
|
import { Search, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
|
|
import { Button } from '@/ui/button';
|
|
import { Input } from '@/ui/input';
|
|
import { cn } from '@/lib/utils';
|
|
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) {
|
|
setInputError('');
|
|
}
|
|
|
|
const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const trimmedCity = city.trim();
|
|
if (!trimmedCity) {
|
|
setInputError('请输入城市名称');
|
|
return;
|
|
}
|
|
if (!trimmedCity) {
|
|
setInputError('请输入有效的城市名称');
|
|
return;
|
|
}
|
|
|
|
if (trimmedCity.length < 2) {
|
|
setInputError('请输入至少2个字符');
|
|
return;
|
|
}
|
|
|
|
if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
|
|
setInputError('请输入字母和空格');
|
|
return;
|
|
}
|
|
await searchWeather(trimmedCity);
|
|
}
|
|
|
|
return (
|
|
<div className='p-6 border-6 '>
|
|
<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={(e) => setCity(e.target.value)}
|
|
placeholder="请输入城市名称"
|
|
disabled={isLoading}
|
|
className={cn('pl-10 pr-4 py-2 w-full', inputError && 'border-red-500')}
|
|
/>
|
|
</div>
|
|
{inputError && (
|
|
<div className="text-red-500 text-sm mt-1">
|
|
<AlertCircle className="inline w-4 h-4 mr-1" />
|
|
<p className="inline-block">{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>
|
|
)}
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
|
|
|
|
|
|
)
|
|
}
|
|
|
|
} |