1
This commit is contained in:
zhutao
253
src/components/Screen3Analysis.tsx
Normal file
253
src/components/Screen3Analysis.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user