Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/test
This commit is contained in:
commit
f59b45fb64
|
|
@ -9,6 +9,7 @@ export function WeatherCard() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<WeatherSearchForm />
|
||||||
<WeatherSearchForm />
|
<WeatherSearchForm />
|
||||||
{currentWeather ? (
|
{currentWeather ? (
|
||||||
<div className="P-4">
|
<div className="P-4">
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,8 @@ interface WeatherInfoItemProps {
|
||||||
subtitle?: string;
|
subtitle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
|
export function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="group rounded-xl bg-slate-50/50 border border-slate-200/50 p-3 hover:bg-slate-100/50 hover:border-slate-300 transition duration-200 ">
|
<div className="group rounded-xl bg-slate-50/50 border border-slate-200/50 p-3 hover:bg-slate-100/50 hover:border-slate-300 transition duration-200 ">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
|
|
@ -28,6 +29,8 @@ function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps)
|
||||||
|
|
||||||
export function WeatherDetailsGrid() {
|
export function WeatherDetailsGrid() {
|
||||||
|
|
||||||
|
const {currentWeather} = useWeatherStore();
|
||||||
|
if (!currentWeather) return null;
|
||||||
<>
|
<>
|
||||||
<div className="grid grids-cols-2 md:grids-cols-3 gap-3 mb-4">
|
<div className="grid grids-cols-2 md:grids-cols-3 gap-3 mb-4">
|
||||||
<WeatherInfoItem
|
<WeatherInfoItem
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
//天气搜索表单组件
|
//天气搜索表单组件
|
||||||
import { cn } from "@/components/lib/utils";
|
import { cn } from "@/components/lib/utils";
|
||||||
import React ,{useState,type FormEvent,type ChangeEvent, use} from "react";
|
import React ,{useState,type FormEvent,type ChangeEvent, use} from "react";
|
||||||
import { Button } from "../ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input} from "../ui/input";
|
import { Input} from "../ui/input";
|
||||||
import {useWeatherStore} from "@/store/weatherStore";
|
import {useWeatherStore} from "@/store/weatherStore";
|
||||||
import { AlertCircle, Loader2, RefreshCw, Search } from "lucide-react";
|
import { AlertCircle, Loader2, RefreshCw, Search } from "lucide-react";
|
||||||
|
|
||||||
//城市输入验证搜索刷新
|
//城市输入验证搜索刷新
|
||||||
export function WeatherSearchForm() {
|
export function WeatherSearchForm() {
|
||||||
const {isLoading,currentWeather,setCurrentWeather,refreshWeather} = useWeatherStore();
|
const {isLoading,currentWeather,setCurrentWeather,refreshWeather,searchWeather} = useWeatherStore();
|
||||||
const [city, setCity] = useState('');
|
const [city, setCity] = useState('');
|
||||||
const [inputError, setInputError] = useState('');
|
const [inputError, setInputError] = useState('');
|
||||||
//输入框内容
|
//输入框内容
|
||||||
|
|
|
||||||
|
|
@ -15,13 +15,16 @@ export function meta() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Weather() {
|
export default function Weather() {
|
||||||
|
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
||||||
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (error) {
|
if (error) {
|
||||||
toast.error(error)
|
toast.error(error)
|
||||||
setError("")
|
setError("")
|
||||||
|
setError("")
|
||||||
}
|
}
|
||||||
}, [error, setError])
|
}, [error, setError])
|
||||||
|
}, [error, setError])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center h-screen">
|
<div className="flex flex-col items-center justify-center h-screen">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import axios, {type AxiosInstance,AxiosError} from 'axios';
|
import axios, {type AxiosInstance,AxiosError} from 'axios';
|
||||||
import {WeatherData} from "@/store/weatherStore";
|
import {type WeatherData} from "@/store/weatherStore";
|
||||||
|
|
||||||
//配置常量
|
//配置常量
|
||||||
const API_KEY = '5097cc3212ea9c460b01e2be936c94d5';
|
const API_KEY = '5097cc3212ea9c460b01e2be936c94d5';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue