67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
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,
|
|
subMessage,
|
|
variant = 'default'
|
|
}: LoadingScreenProps) {
|
|
const variantTitles = {
|
|
default: '??????????????',
|
|
auth: '??????????',
|
|
redirect: '???????????'
|
|
} as const;
|
|
|
|
const variantSubtitles = {
|
|
default: '??????????',
|
|
auth: '????????????',
|
|
redirect: '????????'
|
|
} as const;
|
|
|
|
const primaryMessage = message || variantTitles[variant];
|
|
const secondaryMessage = subMessage || variantSubtitles[variant];
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
|
{/* 智慧大田动态背景 - 使用登录页面相同的背景效果 */}
|
|
<SmartFieldBackground />
|
|
|
|
{/* 主要内容 */}
|
|
<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-16">
|
|
<p className="text-white/90 text-xl font-medium tracking-wide drop-shadow-lg">
|
|
正在加载智慧农业生产管理系统
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |