diff --git a/app/components/WeatherDetailsGird.tsx b/app/components/WeatherDetailsGird.tsx
index 2287c34..6765d7e 100644
--- a/app/components/WeatherDetailsGird.tsx
+++ b/app/components/WeatherDetailsGird.tsx
@@ -1,3 +1,5 @@
+import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
+
 interface WeatherDetailsGridProps {
   icon: React.ReactNode;
   label: string;
@@ -5,3 +7,53 @@ interface WeatherDetailsGridProps {
   subtitle?: string;
 }
 
+function WeatherInfoItem({ icon, label, value, subtitle }: WeatherDetailsGridProps) {
+    return(
+        <div className="group rounded-xl bg-slate-50/50 border border-slate-200 p-4 hover:bg-slate-100/80 hover:border-slate-300 transition-all duration-300">
+            <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-tramsform duration-300">
+                    {icon}
+                </div>
+                <div className="flex-1 min-w-0">
+                    <p className="text-sm text-slate-500">{label}</p>
+                    <p className="text-slate-900 text-sm font-semibold">{value}</p>
+                    {subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export function WeatherDetailsGrid(){
+    const currentWeather = useWeatherState();
+    if(!currentWeather) return null;
+    return(
+        <div>
+            <div className="grid grid-cols-2 md:grid-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-blue-500"/>} label="风速" value={`${currentWeather.current.wind_speed} m/s`} />
+                <WeatherInfoItem icon={<Gauge  className="w-4 h-4 text-blue-500"/>} label="气压" value={`${currentWeather.current.pressure} hPa`} />
+                <WeatherInfoItem icon={<Cloud  className="w-4 h-4 text-blue-500"/>} label="云量" value={`${currentWeather.current.cloudcover}%`} />
+                <WeatherInfoItem icon={<ThermometerSun  className="w-4 h-4 text-blue-500"/>} label="紫外线" value={`${currentWeather.current.uv_index} UV`} />
+            </div>
+            <div className="pt-4 border-t border-slate-200">
+                <div className="flex items-center justify-between 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.precipitation} mm
+                            </span>
+                        </span>
+                    </div>
+                        <span className=" text-slate-600">
+                            {currentWeather.current.is_day === "yes" ? "白天" : "夜晚"}
+                        </span>
+                    </div>
+                    <p className="text-xs text-center text-slate-500">
+                        观测时间: {currentWeather.current.observation_time}
+                    </p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 653642a..c7da746 100644
--- a/package.json
+++ b/package.json
@@ -43,4 +43,12 @@
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
   }
+<<<<<<< HEAD
+<<<<<<< HEAD
 }
+=======
+}
+>>>>>>> 34ee14ecd423bb649a4c45f54ab6e3f37ad0f35f
+=======
+}
+>>>>>>> 12e66397d84bd55cde0c1b209d3e943e5e20bcb9