生产管理系统 loading页面美化

crop-x/src/app/layout.tsx

@@ -1,5 +1,5 @@
 'use client';
-
+import "@/styles/globals.css"
 import { useEffect } from 'react';
 import { AuthProvider } from '@/components/auth/AuthContext';
 import { ClientAuthInterceptor } from '@/components/auth/ClientAuthInterceptor';

crop-x/src/app/page.tsx

@@ -1,30 +1,10 @@
 
 'use client';
 
-import { useAuth } from '@/components/auth/AuthContext';
-import { LoadingScreen } from '@/components/auth/LoadingScreen';
-import { redirect } from 'next/navigation';
-
 export default function HomePage() {
-  const { user, loading, isAuthenticated } = useAuth();
-
-  // 如果正在加载，显示加载屏幕
-  if (loading) {
-    return <LoadingScreen />;
-  }
-  console.log('isAuthenticated:',isAuthenticated)
-  // 如果未认证，重定向到登录页
-  if (!isAuthenticated) {
-    redirect('/login');
-  }
-
-  // 如果已认证，重定向到个人中心
-  if (isAuthenticated) {
-    redirect('/central-config/personal-center/personal-info');
-  }
-
-  // 兜底显示（一般不会执行到这里）
   return (
-    <div></div>
+    <div>
+      
+    </div>
   );
 }

crop-x/src/components/auth/ClientAuthInterceptor.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from './AuthContext';
+import { LoadingScreen } from './loadingScreen';
 
 interface ClientAuthInterceptorProps {
   children: React.ReactNode;
@@ -43,14 +44,7 @@ export function ClientAuthInterceptor({ children }: ClientAuthInterceptorProps)
 
   // 如果正在加载，显示加载状态
   if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="text-center">
-          <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
-          <p className="text-gray-600">验证用户身份中...</p>
-        </div>
-      </div>
-    );
+    return <LoadingScreen variant="auth" />;
   }
 
   // 如果在认证页面（包括 /login 开头的所有路径），直接渲染子组件，不需要认证检查
@@ -60,14 +54,7 @@ export function ClientAuthInterceptor({ children }: ClientAuthInterceptorProps)
 
   // 如果未认证且不在认证页面，显示跳转状态
   if (!isAuthenticated) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="text-center">
-          <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mb-4"></div>
-          <p className="text-gray-600">正在跳转到登录页...</p>
-        </div>
-      </div>
-    );
+    return <LoadingScreen variant="redirect" />;
   }
 
   // 认证通过，渲染子组件

crop-x/src/components/auth/LoadingScreen.tsx

@@ -2,29 +2,49 @@
 
 import React from 'react';
 import { Loader2 } from 'lucide-react';
+import { SmartFieldBackground } from './SmartFieldBackground';
 
 interface LoadingScreenProps {
   message?: string;
+  subMessage?: string;
+  variant?: 'default' | 'auth' | 'redirect';
 }
 
-export function LoadingScreen({ message = '正在验证用户身份...' }: LoadingScreenProps) {
+export function LoadingScreen({
+  message,
+  subMessage,
+  variant = 'default'
+}: LoadingScreenProps) {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
-          <Loader2 className="w-8 h-8 text-green-600 animate-spin" />
-        </div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">智慧农业生产管理系统</h2>
-        <p className="text-gray-600">{message}</p>
+    <div className="min-h-screen flex items-center justify-center relative overflow-hidden">
+      {/* 智慧大田动态背景 - 使用登录页面相同的背景效果 */}
+      <SmartFieldBackground />
 
-        {/* 加载进度条 */}
-        <div className="mt-6 w-64 h-2 bg-gray-200 rounded-full overflow-hidden">
-          <div className="h-full bg-green-600 rounded-full animate-pulse" style={{ width: '60%' }}></div>
+      {/* 主要内容 */}
+      <div className="relative z-10 text-center">
+        {/* 大型加载器 */}
+        <div className="relative inline-block">
+          {/* 外圈 */}
+          <div className="w-32 h-32 border-4 border-green-400/20 rounded-full animate-pulse"></div>
+          {/* 中圈 */}
+          <div className="absolute top-0 left-0 w-32 h-32 border-4 border-green-400/40 rounded-full animate-spin border-t-transparent border-r-transparent"></div>
+          {/* 内圈 */}
+          <div className="absolute top-4 left-4 w-24 h-24 border-4 border-green-400/60 rounded-full animate-spin border-t-transparent border-l-transparent" style={{ animationDirection: 'reverse' }}></div>
+          {/* 中心 */}
+          <div className="absolute top-12 left-12 w-8 h-8 bg-gradient-to-br from-green-400 to-emerald-400 rounded-full animate-pulse shadow-lg shadow-green-500/50">
+            <div className="w-full h-full bg-white rounded-full animate-ping opacity-30"></div>
+          </div>
+          {/* Loader2 */}
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            <Loader2 className="w-12 h-12 text-white/80 animate-spin" />
+          </div>
         </div>
 
-        {/* 提示信息 */}
-        <div className="mt-8 text-sm text-gray-500 max-w-md">
-          <p>正在验证您的身份信息，请稍候...</p>
+        {/* 加载标题 */}
+        <div className="mt-16">
+          <p className="text-white/90 text-xl font-medium tracking-wide drop-shadow-lg">
+            正在加载智慧农业生产管理系统
+          </p>
         </div>
       </div>
     </div>