Compare commits
4 Commits
8fcd74b79f
...
8c3bfc9b4a
| Author | SHA1 | Date |
|---|---|---|
|
|
8c3bfc9b4a | |
|
|
bfeea2dc3f | |
|
|
8bd719f564 | |
|
|
aa2a0e63a0 |
|
|
@ -45,8 +45,6 @@ function WeatherIcon({ description, isDay, className = "w-16 h-16 md:w-20 md:h-2
|
||||||
}
|
}
|
||||||
return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
|
return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export function WeatherDisplay(){
|
export function WeatherDisplay(){
|
||||||
const {currentWeather} = useWeatherStore();
|
const {currentWeather} = useWeatherStore();
|
||||||
if(!currentWeather) return null;
|
if(!currentWeather) return null;
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,8 @@ 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('');
|
||||||
|
|
||||||
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
setCity(e.target.value);
|
setCity(e.target.value);
|
||||||
if (inputError) {
|
if (inputError) {
|
||||||
|
|
@ -25,12 +23,10 @@ export function WeatherSearchForm() {
|
||||||
setInputError('请输入城市名称');
|
setInputError('请输入城市名称');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (trimmedCity.length < 2) {
|
if (trimmedCity.length < 2) {
|
||||||
setInputError('请输入至少2个字符');
|
setInputError('请输入至少2个字符');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
|
if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
|
||||||
setInputError('请输入字母和空格');
|
setInputError('请输入字母和空格');
|
||||||
return;
|
return;
|
||||||
|
|
@ -58,16 +54,10 @@ export function WeatherSearchForm() {
|
||||||
<AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" />
|
<AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" />
|
||||||
<p className="text-red-500 text-xs">{inputError}</p>
|
<p className="text-red-500 text-xs">{inputError}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
<div className='flex gap-2'>
|
<div className='flex gap-2'>
|
||||||
<Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full">
|
<Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{isLoading ? <>
|
{isLoading ? <>
|
||||||
<Loader2 className="animate-spin w-5 h-5 text-white" />
|
<Loader2 className="animate-spin w-5 h-5 text-white" />
|
||||||
<span>搜索中...</span>
|
<span>搜索中...</span>
|
||||||
|
|
@ -76,23 +66,15 @@ export function WeatherSearchForm() {
|
||||||
<span>搜索天气</span>
|
<span>搜索天气</span>
|
||||||
</>)}
|
</>)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{currentWeather && (
|
{currentWeather && (
|
||||||
<Button type="button" variant="outline" onClick={refreshWeather} disabled={isLoading} className="mt-4 w-full" title='刷新数据'>
|
<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")} />
|
<RefreshCw className={cn("w-5 h-5", isLoading && "animate-spin")} />
|
||||||
|
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
708
pnpm-lock.yaml
708
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue