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 b6e384f..653642a 100644
--- a/package.json
+++ b/package.json
@@ -8,37 +8,6 @@
     "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",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@react-router/node": "^7.9.2",
-    "@react-router/serve": "^7.9.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "isbot": "^5.1.31",
-    "lucide-react": "^0.554.0",
-    "next-themes": "^0.4.6",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-<<<<<<< HEAD
-    "react-router": "^7.9.2",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0"
-=======
-    "react-router": "^7.9.2"
-  },{
-  "name": "1114",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
->>>>>>> 9b018e3e43a44ed8f5b9d08e22c09de35b4ce874
-  },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
@@ -75,16 +44,3 @@
     "vite-tsconfig-paths": "^5.1.4"
   }
 }
-  "devDependencies": {
-    "@react-router/dev": "^7.9.2",
-    "@tailwindcss/vite": "^4.1.13",
-    "@types/node": "^22",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "tailwindcss": "^4.1.13",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
-    "vite-tsconfig-paths": "^5.1.4"
-  }
-}
\ No newline at end of file