{"ast":null,"code":"import _objectSpread from\"/Users/apple/Documents/cursor/Web\\u8BFE\\u4EF6/AI\\u8BFE/education_web_\\u591AAgent\\u534F\\u4F5C\\u7CFB\\u7EDF/node_modules/@babel/runtime/helpers/esm/objectSpread2.js\";import React,{useState,useEffect}from'react';import{motion}from'framer-motion';// 霓虹网格线\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";const NeonGrid=()=>{return/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0 overflow-hidden\",children:/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0\",style:{backgroundImage:\"\\n linear-gradient(rgba(244, 63, 94, 0.3) 1px, transparent 1px),\\n linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px)\\n \",backgroundSize:'50px 50px',animation:'grid-move 20s linear infinite',transform:'perspective(500px) rotateX(60deg) translateZ(0)',transformOrigin:'center center',filter:'brightness(1.5)',mixBlendMode:'screen'}})});};// 日文字符数据雨效果\nconst DataRain=()=>{const columns=15;// 减少列数从30到15\nconst[charColumns,setCharColumns]=useState([]);// 日文字符集合(片假名、平假名和汉字)\nconst japaneseChars=['ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン','日','本','語','愛','雨','桜','心','風','光','影','夢','星','月','雲','龍','侍','忍','者','武','士','道','禅','気','力','火','水','土','空','時','無','有','生','死','闇'];useEffect(()=>{// 初始化列\nconst drops=Array.from({length:columns},(_,i)=>({chars:Array.from({length:15},()=>// 改为15个字符\njapaneseChars[Math.floor(Math.random()*japaneseChars.length)]),delay:Math.random()*5,duration:12+Math.random()*6,x:i/columns*100}));setCharColumns(drops);// 定期更新字符 - 加快更新频率\nconst interval=setInterval(()=>{setCharColumns(prev=>prev.map(column=>_objectSpread(_objectSpread({},column),{},{chars:column.chars.map(char=>Math.random()<0.1?japaneseChars[Math.floor(Math.random()*japaneseChars.length)]:char// 从0.02增加到0.1\n)})));},50);// 从100ms减少到50ms\nreturn()=>clearInterval(interval);},[]);return/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0 overflow-hidden opacity-60\",children:charColumns.map((column,i)=>/*#__PURE__*/_jsx(motion.div,{className:\"absolute flex flex-col text-green-400\",style:{left:\"\".concat(column.x,\"%\"),fontSize:'12px',// 从18px减小到12px\nfontFamily:\"'Courier New', monospace\",fontWeight:'normal',// 从bold改为normal\nlineHeight:'1',letterSpacing:'0px'},initial:{y:-50}// 从更接近顶部的位置开始\n,animate:{y:window.innerHeight+100},transition:{duration:column.duration,repeat:Infinity,delay:column.delay,ease:\"linear\"},children:column.chars.map((char,idx)=>/*#__PURE__*/_jsx(\"div\",{style:{opacity:idx===0?1:Math.max(0.05,1-idx/column.chars.length*0.95),color:idx===0?'#ffffff':idx<2?'#66ff66':'#00ff00',textShadow:idx===0?'0 0 8px #ffffff, 0 0 15px #00ff00':idx<2?'0 0 3px rgba(102, 255, 102, 0.8)':'0 0 2px rgba(0, 255, 0, 0.3)',height:'14px',// 从20px减小到14px\ndisplay:'flex',alignItems:'center',justifyContent:'center'},children:char},idx))},i))});};// 霓虹光束\nconst NeonBeams=()=>{return/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0 overflow-hidden\",children:[...Array(5)].map((_,i)=>/*#__PURE__*/_jsx(motion.div,{className:\"absolute h-px\",style:{background:\"linear-gradient(90deg, \\n transparent, \\n \".concat(i%2===0?'#f43f5e':'#06b6d4',\", \\n transparent\\n )\"),width:'200%',top:\"\".concat(20+i*15,\"%\"),filter:\"blur(\".concat(i===0?2:1,\"px)\"),boxShadow:\"0 0 \".concat(10+i*5,\"px \").concat(i%2===0?'#f43f5e':'#06b6d4')},animate:{x:['-100%','0%']},transition:{duration:10+i*2,repeat:Infinity,ease:\"linear\"}},i))});};// 故障效果\nconst GlitchOverlay=()=>{const[isGlitching,setIsGlitching]=useState(false);useEffect(()=>{const interval=setInterval(()=>{setIsGlitching(true);setTimeout(()=>setIsGlitching(false),200);},5000);return()=>clearInterval(interval);},[]);if(!isGlitching)return null;return/*#__PURE__*/_jsx(motion.div,{className:\"absolute inset-0 pointer-events-none\",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{background:\"repeating-linear-gradient(\\n 0deg,\\n transparent,\\n transparent 2px,\\n rgba(244, 63, 94, 0.03) 2px,\\n rgba(244, 63, 94, 0.03) 4px\\n )\",animation:'glitch 0.3s infinite'}});};// 粒子效果\nconst ParticleField=()=>{const[particles,setParticles]=useState([]);useEffect(()=>{const newParticles=Array.from({length:50},()=>({x:Math.random()*100,y:Math.random()*100,size:Math.random()*3+1,delay:Math.random()*5}));setParticles(newParticles);},[]);return/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0 overflow-hidden\",children:particles.map((particle,i)=>/*#__PURE__*/_jsx(motion.div,{className:\"absolute rounded-full\",style:{left:\"\".concat(particle.x,\"%\"),top:\"\".concat(particle.y,\"%\"),width:particle.size,height:particle.size,background:i%3===0?'#f43f5e':i%3===1?'#a855f7':'#06b6d4',boxShadow:\"0 0 \".concat(particle.size*2,\"px currentColor\")},animate:{y:[0,-30,0],opacity:[0.2,1,0.2]},transition:{duration:3+particle.size,repeat:Infinity,delay:particle.delay}},i))});};// 主背景组件 - 原始版本\nconst CyberpunkBackground=()=>{return/*#__PURE__*/_jsxs(\"div\",{className:\"fixed inset-0 pointer-events-none overflow-hidden z-0\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0\",style:{background:\"\\n radial-gradient(circle at 20% 50%, rgba(244, 63, 94, 0.1) 0%, transparent 50%),\\n radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),\\n radial-gradient(circle at 50% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),\\n linear-gradient(180deg, #0a0a0a 0%, #030712 100%)\\n \"}}),/*#__PURE__*/_jsx(NeonGrid,{}),/*#__PURE__*/_jsx(NeonBeams,{}),/*#__PURE__*/_jsx(DataRain,{}),/*#__PURE__*/_jsx(ParticleField,{}),/*#__PURE__*/_jsx(GlitchOverlay,{}),/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0\",style:{background:\"\\n radial-gradient(ellipse at center, \\n transparent 20%, \\n rgba(0, 0, 0, 0.3) 40%,\\n rgba(0, 0, 0, 0.6) 70%,\\n rgba(0, 0, 0, 0.9) 100%\\n )\\n \"}}),/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0\",style:{boxShadow:'inset 0 0 200px 50px rgba(0, 0, 0, 0.9)'}}),/*#__PURE__*/_jsx(\"div\",{className:\"absolute inset-0 opacity-30\",style:{backgroundImage:\"repeating-linear-gradient(\\n 0deg,\\n transparent,\\n transparent 2px,\\n rgba(255, 255, 255, 0.03) 2px,\\n rgba(255, 255, 255, 0.03) 4px\\n )\",animation:'scan 8s linear infinite'}})]});};export default CyberpunkBackground;","map":{"version":3,"names":["React","useState","useEffect","motion","jsx","_jsx","jsxs","_jsxs","NeonGrid","className","children","style","backgroundImage","backgroundSize","animation","transform","transformOrigin","filter","mixBlendMode","DataRain","columns","charColumns","setCharColumns","japaneseChars","drops","Array","from","length","_","i","chars","Math","floor","random","delay","duration","x","interval","setInterval","prev","map","column","_objectSpread","char","clearInterval","div","left","concat","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing","initial","y","animate","window","innerHeight","transition","repeat","Infinity","ease","idx","opacity","max","color","textShadow","height","display","alignItems","justifyContent","NeonBeams","background","width","top","boxShadow","GlitchOverlay","isGlitching","setIsGlitching","setTimeout","exit","ParticleField","particles","setParticles","newParticles","size","particle","CyberpunkBackground"],"sources":["/Users/apple/Documents/cursor/Web课件/AI课/education_web_多Agent协作系统/src/components/CyberpunkBackground.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { motion } from 'framer-motion';\n\n// 霓虹网格线\nconst NeonGrid: React.FC = () => {\n return (\n