222

1114/app/components/weather/WeatherCard.tsx

@@ -1,6 +1,6 @@
-import { WeathersearchForm } from "@/components/weather/WeatherSearchForm";
+import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm";
 import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
-import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsCrid";
+import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid";
 import { useWeatherStore } from "@/store/weatherStore";
 import Cloud  from "../../../assets/cloud.svg";
 
@@ -9,7 +9,7 @@ export function WeatherCard() {
 
   return (
     <div>
-      <WeathersearchForm />
+      <WeatherSearchForm />
       {currentWeather ? (
         <div className="P-4">
           <WeatherDisplay />

1114/app/components/weather/WeatherDetailsGrid.tsx

@@ -10,7 +10,8 @@ interface WeatherInfoItemProps {
     subtitle?: string;
 }
 
-function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
+export function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
+    
     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="flex items-start gap-2">
@@ -28,6 +29,8 @@ function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps)
 
 export function WeatherDetailsGrid() {
 
+    const {currentWeather} = useWeatherStore();
+    if (!currentWeather) return null;
     <>
        <div className="grid grids-cols-2 md:grids-cols-3 gap-3 mb-4">
          <WeatherInfoItem 

1114/app/components/weather/WeatherSearchForm.tsx

@@ -1,14 +1,14 @@
 //天气搜索表单组件
 import { cn } from "@/components/lib/utils";
 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 {useWeatherStore} from "@/store/weatherStore";
 import { AlertCircle, Loader2, RefreshCw, Search } from "lucide-react";
 
 //城市输入验证搜索刷新
 export function WeatherSearchForm() { 
-const {isLoading,currentWeather,setCurrentWeather,refreshWeather} = useWeatherStore();
+const {isLoading,currentWeather,setCurrentWeather,refreshWeather,searchWeather} = useWeatherStore();
 const [city, setCity] = useState('');
 const [inputError, setInputError] = useState('');
 //输入框内容

1114/app/routes/weather.tsx

@@ -1,7 +1,7 @@
 import REACT, { use, useEffect } from 'react'
 import { Loader2 } from 'lucide-react';
-import { WeatherCard } from './WeatherCard'
-import { useWeatherstore } from './WeatherStore'
+import { WeatherCard } from '@/components/weather/WeatherCard';
+import { useWeatherStore } from '@/store/weatherStore';
 import { toast } from 'sonner'
 
 
@@ -15,13 +15,13 @@ export function meta() {
 }
 
 export default function Weather() {
-    const { currentWeather, isLoading, error, seterror } = useWeatherstore()
+    const { currentWeather, isLoading, error, setError } = useWeatherStore()
     useEffect(() => {
         if (error) {
             toast.error(error)
-            seterror("")
+            setError("")
         }
-    }, [error, seterror])
+    }, [error, setError])
 
     return (
         <div className="flex flex-col items-center justify-center h-screen">

1114/app/services/weatherApi.ts

@@ -1,5 +1,5 @@
 import axios, {type AxiosInstance,AxiosError} from 'axios';
-import {WeatherData} from "@/store/weatherStore";
+import {type WeatherData} from "@/store/weatherStore";
 
 //配置常量
 const API_KEY = '5097cc3212ea9c460b01e2be936c94d5';