254 lines
8.3 KiB
TypeScript
254 lines
8.3 KiB
TypeScript
import {motion} from 'motion/react';
|
||
import {useEffect, useState} from 'react';
|
||
import {Brain, Cpu, TrendingUp, Zap} from 'lucide-react';
|
||
|
||
|
||
const analysisSteps = [
|
||
{ dept: '组织架构', message: '发现重复劳动节点...', icon: '🎨' },
|
||
{ dept: 'AI替代方案', message: 'AI替代率 85%...', icon: '✍️' },
|
||
{ dept: 'AI优化方案', message: '智能接入可节省 70%...', icon: '💬' },
|
||
{ dept: 'AI优化空间', message: '数据分析优化空间 60%...', icon: '📊' },
|
||
{ dept: 'AI部署方案', message: '自动化流程提升 75%...', icon: '⚙️' },
|
||
];
|
||
|
||
export function Screen3Analysis() {
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [nodes, setNodes] = useState<Array<{ x: number; y: number; id: number }>>([]);
|
||
|
||
useEffect(() => {
|
||
// Generate random nodes
|
||
const newNodes = Array.from({ length: 15 }, (_, i) => ({
|
||
x: Math.random() * 100,
|
||
y: Math.random() * 100,
|
||
id: i,
|
||
}));
|
||
setNodes(newNodes);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// Progress through analysis steps
|
||
const timer = setInterval(() => {
|
||
setCurrentStep((prev) => {
|
||
if (prev < analysisSteps.length - 1) {
|
||
return prev + 1;
|
||
} else {
|
||
clearInterval(timer);
|
||
return prev;
|
||
}
|
||
});
|
||
}, 800);
|
||
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col items-center justify-center px-6 py-12 relative overflow-hidden">
|
||
{/* Radar scanning effect */}
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<motion.div
|
||
className="absolute w-96 h-96 border-2 border-[#00F0FF]/30 rounded-full"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [0.5, 0, 0.5],
|
||
}}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
ease: 'easeOut',
|
||
}}
|
||
/>
|
||
<motion.div
|
||
className="absolute w-96 h-96 border-2 border-[#7B61FF]/30 rounded-full"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [0.5, 0, 0.5],
|
||
}}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
ease: 'easeOut',
|
||
delay: 0.5,
|
||
}}
|
||
/>
|
||
|
||
{/* Rotating radar beam */}
|
||
<motion.div
|
||
className="absolute w-96 h-1 bg-gradient-to-r from-[#00F0FF]/0 via-[#00F0FF]/80 to-[#00F0FF]/0 origin-left"
|
||
style={{ left: '50%', top: '50%' }}
|
||
animate={{
|
||
rotate: [0, 360],
|
||
}}
|
||
transition={{
|
||
duration: 3,
|
||
repeat: Infinity,
|
||
ease: 'linear',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Node visualization */}
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
{nodes.map((node) => (
|
||
<motion.div
|
||
key={node.id}
|
||
className="absolute w-3 h-3 bg-[#00F0FF] rounded-full"
|
||
style={{
|
||
left: `${node.x}%`,
|
||
top: `${node.y}%`,
|
||
}}
|
||
initial={{ scale: 0, opacity: 0 }}
|
||
animate={{
|
||
scale: [0, 1, 0.8],
|
||
opacity: [0, 1, 0.6],
|
||
}}
|
||
transition={{
|
||
duration: 1,
|
||
delay: node.id * 0.1,
|
||
}}
|
||
>
|
||
{/* Pulse effect */}
|
||
<motion.div
|
||
className="absolute inset-0 bg-[#00F0FF] rounded-full"
|
||
animate={{
|
||
scale: [1, 2, 1],
|
||
opacity: [0.8, 0, 0.8],
|
||
}}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
delay: node.id * 0.1,
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Central AI brain */}
|
||
<motion.div
|
||
className="relative z-10 mb-12"
|
||
initial={{ scale: 0, rotate: -180 }}
|
||
animate={{ scale: 1, rotate: 0 }}
|
||
transition={{ duration: 1, type: 'spring' }}
|
||
>
|
||
<div className="relative">
|
||
<motion.div
|
||
className="w-24 h-24 bg-gradient-to-br from-[#7B61FF] to-[#00F0FF] rounded-full flex items-center justify-center"
|
||
animate={{
|
||
boxShadow: [
|
||
'0 0 20px rgba(123, 97, 255, 0.5)',
|
||
'0 0 40px rgba(0, 240, 255, 0.8)',
|
||
'0 0 20px rgba(123, 97, 255, 0.5)',
|
||
],
|
||
}}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
}}
|
||
>
|
||
<Brain className="w-12 h-12 text-white" />
|
||
</motion.div>
|
||
|
||
{/* Orbiting icons */}
|
||
{[Cpu, Zap, TrendingUp].map((Icon, index) => (
|
||
<motion.div
|
||
key={index}
|
||
className="absolute top-1/2 left-1/2 w-8 h-8 -ml-4 -mt-4"
|
||
animate={{
|
||
rotate: [0, 360],
|
||
}}
|
||
transition={{
|
||
duration: 5,
|
||
repeat: Infinity,
|
||
ease: 'linear',
|
||
delay: index * 0.6,
|
||
}}
|
||
>
|
||
<motion.div
|
||
className="absolute"
|
||
style={{
|
||
transform: `translateX(60px) rotate(-${index * 120}deg)`,
|
||
}}
|
||
animate={{
|
||
rotate: [0, -360],
|
||
}}
|
||
transition={{
|
||
duration: 5,
|
||
repeat: Infinity,
|
||
ease: 'linear',
|
||
delay: index * 0.6,
|
||
}}
|
||
>
|
||
<div className="w-8 h-8 bg-[#0A0F24] border-2 border-[#00F0FF] rounded-full flex items-center justify-center">
|
||
<Icon className="w-4 h-4 text-[#00F0FF]" />
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Analysis progress */}
|
||
<div className="relative z-10 w-full max-w-md space-y-4">
|
||
{analysisSteps.map((step, index) => (
|
||
<motion.div
|
||
key={index}
|
||
className={`flex items-center gap-4 p-4 rounded-xl backdrop-blur-sm transition-all ${
|
||
index === currentStep
|
||
? 'bg-[#00F0FF]/20 border-2 border-[#00F0FF]'
|
||
: index < currentStep
|
||
? 'bg-white/5 border border-gray-600'
|
||
: 'bg-white/5 border border-gray-800 opacity-30'
|
||
}`}
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{
|
||
opacity: index <= currentStep ? 1 : 0.3,
|
||
x: 0,
|
||
}}
|
||
transition={{ delay: index * 0.1 }}
|
||
>
|
||
<span className="text-2xl">{step.icon}</span>
|
||
<div className="flex-1">
|
||
<div className="text-sm text-gray-300">正在分析{step.dept}</div>
|
||
<div className="text-xs text-[#00F0FF] mt-1">{step.message}</div>
|
||
</div>
|
||
{index === currentStep && (
|
||
<motion.div
|
||
className="w-6 h-6 border-2 border-[#00F0FF] border-t-transparent rounded-full"
|
||
animate={{ rotate: 360 }}
|
||
transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
|
||
/>
|
||
)}
|
||
{index < currentStep && (
|
||
<div className="w-6 h-6 bg-[#00F0FF] rounded-full flex items-center justify-center">
|
||
<svg className="w-4 h-4 text-[#0A0F24]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Status text */}
|
||
<motion.div
|
||
className="mt-12 text-center"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: [0, 1, 0] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
>
|
||
<p className="text-[#00F0FF] text-sm">AI深度分析中，请稍候...</p>
|
||
</motion.div>
|
||
|
||
{/* Progress bar */}
|
||
<motion.div className="mt-6 w-64 h-1 bg-gray-800 rounded-full overflow-hidden">
|
||
<motion.div
|
||
className="h-full bg-gradient-to-r from-[#7B61FF] to-[#00F0FF]"
|
||
initial={{ width: '0%' }}
|
||
animate={{ width: `${((currentStep + 1) / analysisSteps.length) * 100}%` }}
|
||
transition={{ duration: 0.5 }}
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|