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

1114/app/components/weather/WeatherDetailsCrid.tsx

@@ -0,0 +1,77 @@
+import { Droplets,Wind,Gauge,Cloud,Eye,ThermometerSun} from "lucide-react";
+import React from "react";
+import { getWindDirection } from "@/lib/utils";
+import {useWeatherStore} from "@/store/weatherStore";
+
+interface WeatherInfoItemProps {
+    icon: React.ReactNode;
+    label: string;
+    value: string;
+    subtitle?: string;
+}
+
+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">
+            <div className="flex-shrink-0 w-9 h-9 rounded-full bg-white flex items-center justify-center group-hover:scale-100 transition-transform duration-200">{icon}</div>
+            <div className="flex-1 min-w-0">
+            <p className="text-xs text-slate-500">{label}</p>
+            <p className="text-sm  font-semibold text-slate-900">{value}</p>
+            {subtitle && <p className="text-xs text-slate-500">{subtitle}</p>}
+        </div>
+        </div>
+    </div>
+
+    );
+}
+
+export function WeatherDetailsGrid() {
+
+    <>
+       <div className="grid grids-cols-2 md:grids-cols-3 gap-3 mb-4">
+         <WeatherInfoItem 
+                         icon={<Droplets className="w-4 h-4 text-blue-500"/>}
+                         label="湿度"
+                         value={'${currentWeather.current.humidity}%'}/>
+
+                          <WeatherInfoItem 
+                         icon={<Wind className="w-4 h-4 text-green-500"/>}
+                         label="风速"
+                         value={'${currentWeather.current.wind_speed}%'}
+                         subtitle={getWindDirection(currentWeather.current.wind_dir)}/>
+
+                          <WeatherInfoItem 
+                         icon={<Gauge className="w-4 h-4 text-purple-500"/>}
+                         label="气压"
+                         value={'${currentWeather.current.humidity}%'}/>
+
+
+                          <WeatherInfoItem 
+                         icon={<Cloud className="w-4 h-4 text-gray-500"/>}
+                         label="云量"
+                         value={'${currentWeather.current.cloudcover}%'}/>
+
+
+                          <WeatherInfoItem 
+                         icon={<ThermometerSun className="w-4 h-4 text-orange-500"/>}
+                         label="紫外线"
+                         value={'${currentWeather.current.uv_index}%'}/>
+
+       </div>
+
+       <div className="pt-4 border-t border-slate-200">
+        <div className="flex items-center justify-center text-sm mb-2">
+            <div className="flex items-center gap-2 text-slate-600">
+                <Droplets className="w-4 h-4 text-blue-500"/>
+                    <span>降水量：<span className="font-semibold">{currentWeather.current.precip}mm</span></span>
+                
+            </div>
+            <span className="text-xs text-center text-slate-500">{currentWeather.current.is_day==="yes"?'白天':'夜晚'}</span>
+        </div>
+        <p>观测时间：{currentWeather.current.observation_time}</p>
+       </div>
+    
+    
+    </>
+}