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

app/components/WeatherCard.tsx

@@ -1,5 +1,8 @@
 import { useWeatherStore } from "@/store/weatherStore";
 import { Cloud } from "lucide-react";
+import {WeatherDisplay  } from '@/components/WeatherDisplay'
+import { WeatherSearchForm } from "./WeatherSearchForm";
+import { WeatherDetailsGrid } from "./WeatherDetailsGird";
 
 export function WeatherCard(){
     const{ currentWeather} = useWeatherStore();

app/components/WeatherDetailsGird.tsx

@@ -1,4 +1,5 @@
 import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
+import { useWeatherStore } from "@/store/weatherStore";
 
 interface WeatherDetailsGridProps {
   icon: React.ReactNode;
@@ -25,7 +26,7 @@ function WeatherInfoItem({ icon, label, value, subtitle }: WeatherDetailsGridPro
 }
 
 export function WeatherDetailsGrid(){
-    const currentWeather = useWeatherState();
+    const {currentWeather} = useWeatherStore();
     if(!currentWeather) return null;
     return(
         <div>
@@ -42,7 +43,7 @@ export function WeatherDetailsGrid(){
                         <Droplets className="w-4 h-4 text-blue-500"/>
                         <span>降水量:\
                             <span className="font-semibold">
-                                {currentWeather.current.precipitation} mm
+                                {currentWeather.current.precip} mm
                             </span>
                         </span>
                     </div>

app/components/WeatherDisplay.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import {
+    Cloud,
+    CloudDrizzle,
+    CloudFog,
+    CloudLightning, CloudMoon,
+    CloudRain,
+    CloudSnow,
+    CloudSun,
+    MapPin, Moon, Sun,
+    ThermometerSun
+} from 'lucide-react';
+
+import { formatTemperature } from "@/lib/utils";
+import { useWeatherStore } from '@/store/weatherStore';
+interface WeatherIconProps {
+    description: string;
+    isDay: string;
+    className?: string;
+}
+
+/**
+ * Returns the appropriate weather icon based on description and time of day
+ */
+function WeatherIcon({ description, isDay, className = "w-16 h-16 md:w-20 md:h-20" }: WeatherIconProps) {
+    const desc = description.toLowerCase();
+    const isDaytime = isDay === 'yes';
+
+    if (desc.includes('rain') || desc.includes('雨')) {
+        return desc.includes('heavy') || desc.includes('暴')
+            ? <CloudRain className={className} />
+            : <CloudDrizzle className={className} />;
+    }
+    if (desc.includes('snow') || desc.includes('雪')) return <CloudSnow className={className} />;
+    if (desc.includes('thunder') || desc.includes('storm') || desc.includes('雷')) return <CloudLightning className={className} />;
+    if (desc.includes('fog') || desc.includes('mist') || desc.includes('haze') || desc.includes('雾') || desc.includes('霾')) return <CloudFog className={className} />;
+    if (desc.includes('partly') || desc.includes('scattered') || desc.includes('多云')) {
+        return isDaytime ? <CloudSun className={className} /> : <CloudMoon className={className} />;
+    }
+    if (desc.includes('cloudy') || desc.includes('overcast') || desc.includes('阴')) return <Cloud className={className} />;
+    if (desc.includes('clear') || desc.includes('sunny') || desc.includes('晴')) {
+        return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
+    }
+    return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
+}

app/components/WeatherSearchForm.tsx

@@ -0,0 +1,102 @@
+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>
+
+
+
+        )
+    }
+
+}

app/services/weatherApi.ts

@@ -0,0 +1,80 @@
+import axios,{type AxiosInstance,AxiosError} from 'axios';
+import { type WeatherData } from '@/store/weatherStore';
+
+
+const API_KEY = '0c4679ac2decfe6a756aa09e61f42dc1'; 
+const BASE_URL = 'http://api.weatherstack.com';
+
+const apiClient: AxiosInstance = axios.create({
+    baseURL: BASE_URL,
+    timeout: 10000,
+    headers: {
+        'Content-Type': 'application/json'
+    }
+});
+
+
+apiClient.interceptors.request.use(
+    (config) => {
+        config.params = {...config.params, access_key: API_KEY };
+        if (process.env.NODE_ENV === 'development'){
+            console.log('API Request:', config.method ?.toUpperCase(), config.url);
+        }
+    return config;
+    },
+    (error) => {
+        console.error('Request Error:' ,error);
+        return Promise.reject(error);
+    }
+);
+
+apiClient.interceptors.response.use(
+    (response) => {
+        if (response.data && response.data.error){
+            const error = response.data.error;
+            console.error('API Error:', error);
+            throw new Error(error.info || '请求失效');
+        }
+        if (process.env.NODE_ENV === 'development'){
+            console.log('API Response:', response.config.url,response.data);
+        }
+        return response;
+    },
+  (error :AxiosError)=>{
+
+    console.error('Response Error:',error.message);
+    if (error.response) { 
+        const status = error.response.status;
+        if (status === 404) {
+            throw new Error('未找到该城市的天气信息');
+        } else if (status === 401) {
+            throw new Error('API认证失败，请检查API');
+        } else if (status ===  403) {
+            throw new Error('请检查API密钥是否正确');
+        } 
+    }
+    else  if (error.request) {
+        throw new Error('网络连接失败');
+    }
+    else {
+       return (('配置错误'))
+  }
+  }
+       
+  
+);
+
+export class WeatherApi {
+static async getCurrentWeather(city: string): Promise<WeatherData> {
+  try {
+    const response = await apiClient.get<WeatherData>('/current',{
+      params:{query :city} ,
+    });
+    return response.data;
+}catch (error){
+  throw error;
+}
+}
+
+}
+export default WeatherApi;

app/store/weatherStore.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import {persist,createJSONStorage}  from 'zustand/middleware'
+import { WeatherApi } from '@/services/weatherApi';
 const CACHE_EXPIRY = 10 * 60 * 1000;
 
 export interface Location {
@@ -98,7 +99,7 @@ export const useWeatherStore = create<WeatherStore>()(
                         set({currentWeather:cachedWeather,isLoading:false});
                         return;
                     }
-                    const WeatherData = await WeatherAPI.getcurrentWeather(city);
+                    const WeatherData = await WeatherApi.getCurrentWeather(city);
                     set({currentWeather:WeatherData,isLoading:false});
                     get().cacheWeather(city,WeatherData);
                 }catch(error){
@@ -111,7 +112,7 @@ export const useWeatherStore = create<WeatherStore>()(
                 try{
                     set({isLoading:true,error:null});
                     const city = currentWeather.location.name;
-                    const WeatherData = await WeatherAPI.getcurrentWeather(city);
+                    const WeatherData = await WeatherApi.getCurrentWeather(city);
                     set({currentWeather:WeatherData,isLoading:false});
                     get().cacheWeather(city,WeatherData);
                 }catch(error){

package.json

@@ -8,6 +8,7 @@
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },
+
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",

pnpm-lock.yaml

@@ -868,56 +868,67 @@ packages:
     resolution: {integrity: sha512-EPlb95nUsz6Dd9Qy13fI5kUPXNSljaG9FiJ4YUGU1O/Q77i5DYFW5KR8g1OzTcdZUqQQ1KdDqsTohdFVwCwjqg==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.53.2':
     resolution: {integrity: sha512-BOmnVW+khAUX+YZvNfa0tGTEMVVEerOxN0pDk2E6N6DsEIa2Ctj48FOMfNDdrwinocKaC7YXUZ1pHlKpnkja/Q==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.53.2':
     resolution: {integrity: sha512-Xt2byDZ+6OVNuREgBXr4+CZDJtrVso5woFtpKdGPhpTPHcNG7D8YXeQzpNbFRxzTVqJf7kvPMCub/pcGUWgBjA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.53.2':
     resolution: {integrity: sha512-+LdZSldy/I9N8+klim/Y1HsKbJ3BbInHav5qE9Iy77dtHC/pibw1SR/fXlWyAk0ThnpRKoODwnAuSjqxFRDHUQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.53.2':
     resolution: {integrity: sha512-8ms8sjmyc1jWJS6WdNSA23rEfdjWB30LH8Wqj0Cqvv7qSHnvw6kgMMXRdop6hkmGPlyYBdRPkjJnj3KCUHV/uQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.53.2':
     resolution: {integrity: sha512-3HRQLUQbpBDMmzoxPJYd3W6vrVHOo2cVW8RUo87Xz0JPJcBLBr5kZ1pGcQAhdZgX9VV7NbGNipah1omKKe23/g==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.53.2':
     resolution: {integrity: sha512-fMjKi+ojnmIvhk34gZP94vjogXNNUKMEYs+EDaB/5TG/wUkoeua7p7VCHnE6T2Tx+iaghAqQX8teQzcvrYpaQA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.53.2':
     resolution: {integrity: sha512-XuGFGU+VwUUV5kLvoAdi0Wz5Xbh2SrjIxCtZj6Wq8MDp4bflb/+ThZsVxokM7n0pcbkEr2h5/pzqzDYI7cCgLQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.53.2':
     resolution: {integrity: sha512-w6yjZF0P+NGzWR3AXWX9zc0DNEGdtvykB03uhonSHMRa+oWA6novflo2WaJr6JZakG2ucsyb+rvhrKac6NIy+w==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.53.2':
     resolution: {integrity: sha512-yo8d6tdfdeBArzC7T/PnHd7OypfI9cbuZzPnzLJIyKYFhAQ8SvlkKtKBMbXDxe1h03Rcr7u++nFS7tqXz87Gtw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.53.2':
     resolution: {integrity: sha512-ah59c1YkCxKExPP8O9PwOvs+XRLKwh/mV+3YdKqQ5AMQ0r4M4ZDuOrpWkUaqO7fzAHdINzV9tEVu8vNw48z0lA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.53.2':
     resolution: {integrity: sha512-4VEd19Wmhr+Zy7hbUsFZ6YXEiP48hE//KPLCSVNY5RMGX2/7HZ+QkN55a3atM1C/BZCGIgqN+xrVgtdak2S9+A==}
@@ -982,24 +993,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
     resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
     resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.17':
     resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.17':
     resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
@@ -1686,24 +1701,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}