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

1114/app/components/weather/WeatherCard.tsx

@@ -1,33 +1,39 @@
-import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm";
-import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
-import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid";
-import { useWeatherStore } from "@/store/weatherStore";
-import {Cloud}  from 'lucide-react';
+import React, { useEffect } from 'react';
+import { WeatherSearchForm } from './WeatherSearchForm';
+import { WeatherDisplay } from './WeatherDisplay';
+import { WeatherDetailsGrid } from './WeatherDetailsGrid';
+import { useWeatherStore } from '@/store/weatherStore';
+import {Cloud} from "lucide-react";
 
 export function WeatherCard() {
   const { currentWeather } = useWeatherStore();
-
   return (
-    <div>
-      
+    <div className="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/80 shadow-2xl shadow-slate-200/50 dark:shadow-slate-900/50 transition-all duration-300">
+      {/* 搜索表单区域 */}
       <WeatherSearchForm />
+
+      {/* 天气内容区域 */}
+
       {currentWeather ? (
-        <div className="P-4">
+        <div className="p-6">
           <WeatherDisplay />
           <WeatherDetailsGrid />
         </div>
-      ) : (
-        <div className="flex flex-col items-center justify-center h-full">
-          <div className="animate-spin">
-            <div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div>
-            <div className="h-10 w-10">
-              <Cloud/> 
-            </div>
+      ) :  (
+          <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
+              <div className="relative mb-6">
+                  <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full opacity-10 blur-2xl"></div>
+                  <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-blue-100 to-cyan-100 dark:from-blue-900/30 dark:to-cyan-900/30 flex items-center justify-center">
+                      <Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
+                  </div>
+              </div>
+              <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2">
+                  暂无天气数据
+              </h3>
+              <p className="text-sm text-slate-500 dark:text-slate-400">
+                  请搜索城市查看实时天气信息
+              </p>
           </div>
-          <h3 className="text-2xl font-bold text-slate-700 dark:text-slate-200 mb-2">暂无天气数据</h3>
-          <p className="text-sm text-slate-500 dark:text-slate-400">请搜索城市查看实时天气信息</p>
-        </div>
-        
       )}
     </div>
   );