@ahmiao666/red-packet-rain-vue
Version:
3 lines (2 loc) • 28.4 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");const t={containerWidth:"100%",containerHeight:"100%",count:20,density:5,speed:{min:2,max:6},size:{width:60,height:80},rotation:!0,rotationSpeed:{min:-.02,max:.02},enablePerformanceMode:!0,maxFPS:60,qualityMaxFPS:144,clickEffect:!0,isParticle:!0};class a{constructor(e,a){this.redPackets=[],this.animationId=null,this.isRunning=!1,this.isPaused=!1,this.lastFrameTime=0,this.frameCount=0,this.lastFpsTime=0,this.currentFPS=0,this.lastSpawnTime=0,this.actualWidth=800,this.actualHeight=600,this.redPacketPool=[],this.poolSize=50,this.redPacketDataIndex=0,this.stats={totalCollected:0,totalValue:0,fps:0},this.redPacketImage=null,this.lastClickTime=0,this.clickDebounceDelay=100,this.debugClicks=[],this.particles=[],this.particlePool=[],this.particlePoolSize=100,this.particleConfig={count:15,speed:{min:2,max:8},size:{min:3,max:8},life:{min:800,max:1500},colors:["#FF6B6B"],gravity:.3,friction:.98,spread:2*Math.PI},this.canvas=e,this.ctx=e.getContext("2d"),this.config={...t,...a},this.optimizeConfig(),this.resizeCanvas(),this.initializePool(),this.initializeParticlePool(),this.bindEvents(),this.loadRedPacketImage()}initializePool(){for(let e=0;e<this.poolSize;e++)this.redPacketPool.push(this.createRedPacket())}initializeParticlePool(){for(let e=0;e<this.particlePoolSize;e++)this.particlePool.push(this.createParticle())}createParticle(){return{id:Math.random().toString(36).slice(2,11),x:0,y:0,vx:0,vy:0,size:5,opacity:1,color:"#FFD700",life:1,maxLife:1e3,gravity:.3,friction:.98,rotation:0,rotationSpeed:0}}getParticleFromPool(){return this.particlePool.pop()||this.createParticle()}returnParticleToPool(e){this.particlePool.length<this.particlePoolSize&&this.particlePool.push(e)}resetParticle(e,t,a){const i=this.particleConfig,n=Math.random()*i.spread,o=i.speed.min+Math.random()*(i.speed.max-i.speed.min);e.x=t,e.y=a,e.vx=Math.cos(n)*o,e.vy=Math.sin(n)*o-2*Math.random(),e.size=i.size.min+Math.random()*(i.size.max-i.size.min),e.initialSize=void 0,e.opacity=1,e.color=i.colors[Math.floor(Math.random()*i.colors.length)],e.maxLife=i.life.min+Math.random()*(i.life.max-i.life.min),e.life=e.maxLife,e.gravity=i.gravity,e.friction=i.friction,e.rotation=Math.random()*Math.PI*2,e.rotationSpeed=.2*(Math.random()-.5)}getRedPacketFromPool(){const e=this.redPacketPool.pop()||this.createRedPacket();return this.resetRedPacket(e),e}returnRedPacketToPool(e){this.redPacketPool.length<this.poolSize&&this.redPacketPool.push(e)}getRedPacketData(){if(!this.config.redPackets||"number"==typeof this.config.redPackets)return null;if(Array.isArray(this.config.redPackets)&&this.config.redPackets.length>0){const e=this.config.redPackets[this.redPacketDataIndex];return this.redPacketDataIndex=(this.redPacketDataIndex+1)%this.config.redPackets.length,e}return null}isSpecialRedPacket(e){return!!this.config.isSpecialFn&&("function"==typeof this.config.isSpecialFn?this.config.isSpecialFn(e):"string"==typeof this.config.isSpecialFn&&!!e[this.config.isSpecialFn])}createRedPacket(){const e=this.getRedPacketData(),t={id:Math.random().toString(36).slice(2,11),x:0,y:0,width:this.config.size.width,height:this.config.size.height,speed:0,rotation:0,rotationSpeed:0,scale:1,opacity:1,collected:!1,value:Math.floor(100*Math.random())+1,type:"normal",originalData:null};return e&&this.isUsingArrayMode()?(t.id=e.id||t.id,t.value=e.value||t.value,t.type=this.isSpecialRedPacket(e)?"special":"normal",t.originalData=e):(t.type="normal",t.originalData=null),t}resetRedPacket(e){const t=this.getRedPacketData();e.x=Math.random()*(this.actualWidth-this.config.size.width),e.y=-this.config.size.height,e.speed=Number(this.config.speed.min)+Math.random()*(Number(this.config.speed.max)-Number(this.config.speed.min)),e.rotation=0,e.rotationSpeed=this.config.rotation?this.config.rotationSpeed.min+Math.random()*(this.config.rotationSpeed.max-this.config.rotationSpeed.min):0,e.scale=.8+.4*Math.random(),e.opacity=1,e.collected=!1,t&&this.isUsingArrayMode()?(e.id=t.id||e.id,e.value=t.value||Math.floor(100*Math.random())+1,e.type=this.isSpecialRedPacket(t)?"special":"normal",e.originalData=t):(e.value=Math.floor(100*Math.random())+1,e.type="normal",e.originalData=null)}optimizeConfig(){this.config.redPackets&&Array.isArray(this.config.redPackets)&&this.config.redPackets.length>0?this.config.count=this.config.redPackets.length:(void 0===this.config.count||null===this.config.count||this.config.count<=0)&&(this.config.count=20)}isUsingArrayMode(){return!!(this.config.redPackets&&Array.isArray(this.config.redPackets)&&this.config.redPackets.length>0)}loadRedPacketImage(){this.config.redPacketImage&&("string"==typeof this.config.redPacketImage?(this.redPacketImage=new Image,this.redPacketImage.src=this.config.redPacketImage):this.redPacketImage=this.config.redPacketImage)}resizeCanvas(){let e=800,t=600;if("string"==typeof this.config.containerWidth&&this.config.containerWidth.includes("%")){const t=this.canvas.parentElement;t&&(e=t.clientWidth*parseFloat(this.config.containerWidth)/100)}else e="number"==typeof this.config.containerWidth?this.config.containerWidth:800;if("string"==typeof this.config.containerHeight&&this.config.containerHeight.includes("%")){const e=this.canvas.parentElement;e&&(t=e.clientHeight*parseFloat(this.config.containerHeight)/100)}else t="number"==typeof this.config.containerHeight?this.config.containerHeight:600;this.canvas.width=this.actualWidth=Math.max(100,Math.min(e,4e3)),this.canvas.height=this.actualHeight=Math.max(100,Math.min(t,4e3))}bindEvents(){this.canvas.addEventListener("click",this.handleClick.bind(this)),this.canvas.addEventListener("touchstart",this.handleTouch.bind(this)),window.addEventListener("resize",this.handleResize.bind(this))}handleClick(e){const t=this.getCanvasCoordinates(e.clientX,e.clientY);this.checkCollision(t.x,t.y,"mouse")}handleTouch(e){e.preventDefault();const t=e.touches[0],a=this.getCanvasCoordinates(t.clientX,t.clientY);this.checkCollision(a.x,a.y,"touch")}getCanvasCoordinates(e,t){const a=this.canvas.getBoundingClientRect(),i=a.width,n=a.height,o=this.canvas.width/i,s=this.canvas.height/n,l=(e-a.left)*o,c=(t-a.top)*s;return this.config.debugMode&&console.log(`🎯 点击坐标转换:\n 客户端坐标: (${e}, ${t})\n Canvas矩形: ${JSON.stringify(a)}\n 缩放比例: (${o.toFixed(3)}, ${s.toFixed(3)})\n 最终坐标: (${l.toFixed(1)}, ${c.toFixed(1)})`),{x:l,y:c}}handleResize(){this.resizeCanvas()}checkCollision(e,t,a="mouse"){const i=Date.now();if(i-this.lastClickTime<this.clickDebounceDelay)return void(this.config.debugMode&&console.log(`🎯 点击被防抖过滤 (间隔: ${i-this.lastClickTime}ms)`));this.lastClickTime=i,this.config.debugMode&&console.log(`🎯 检查碰撞: (${e.toFixed(1)}, ${t.toFixed(1)}) [${a}]`);let n=!1;for(let a=this.redPackets.length-1;a>=0;a--){const i=this.redPackets[a];if(this.isPointInRedPacket(e,t,i)){this.config.debugMode&&console.log(`🎯 命中红包: ${i.id}, 类型: ${i.type}, 价值: ${i.value}`),this.collectRedPacket(i,e,t),this.redPackets.splice(a,1),this.returnRedPacketToPool(i),n=!0;break}}this.config.debugMode&&(this.debugClicks.push({x:e,y:t,time:i,hit:n}),n||(console.log(`🎯 未命中任何红包 - 当前红包数量: ${this.redPackets.length}`),this.redPackets.slice(0,3).forEach((a,i)=>{const n=a.x+a.width/2,o=a.y+a.height/2,s=Math.sqrt((e-n)**2+(t-o)**2);console.log(`红包${i+1}: 中心(${n.toFixed(1)}, ${o.toFixed(1)}), 距离: ${s.toFixed(1)}`)})))}isPointInRedPacket(e,t,a){const i=a.x+a.width/2,n=a.y+a.height/2,o=a.width*a.scale,s=a.height*a.scale,l=o+.1*o,c=s+.1*s,r=e>=i-l/2&&e<=i+l/2&&t>=n-c/2&&t<=n+c/2;return this.config.debugMode&&r&&console.log(`🎯 红包边界检测:\n 红包中心: (${i.toFixed(1)}, ${n.toFixed(1)})\n 原始尺寸: ${o.toFixed(1)} x ${s.toFixed(1)}\n 扩展尺寸: ${l.toFixed(1)} x ${c.toFixed(1)}\n 点击坐标: (${e.toFixed(1)}, ${t.toFixed(1)})\n 距离中心: (${Math.abs(e-i).toFixed(1)}, ${Math.abs(t-n).toFixed(1)})`),r}collectRedPacket(e,t,a){e.collected=!0,this.stats.totalCollected++,this.stats.totalValue+=e.value,!this.config.enablePerformanceMode&&this.config.isParticle&&this.createRedPacketParticles(e,t,a),this.onRedPacketClickCallback&&this.onRedPacketClickCallback({redPacket:e,x:t,y:a,value:e.value})}createRedPacketParticles(e,t,a){const i=this.particleConfig.count,n="special"===e.type?1.5*i:i;for(let i=0;i<n;i++){const i=this.getParticleFromPool();this.resetParticle(i,t,a),"special"===e.type&&(i.color="#FFD700",i.size*=1.3),this.particles.push(i)}this.config.debugMode&&console.log(`🎆 创建了 ${n} 个粒子 [红包类型: ${e.type}]`)}updateParticles(e){const t=e/16.67;for(let a=this.particles.length-1;a>=0;a--){const i=this.particles[a];i.x+=i.vx*t,i.y+=i.vy*t,i.vy+=i.gravity*t,i.vx*=i.friction,i.vy*=i.friction,i.rotation+=i.rotationSpeed*t,i.life-=e;const n=Math.max(0,i.life/i.maxLife);i.opacity=n,i.initialSize||(i.initialSize=i.size);const o=.3+.7*n;i.size=i.initialSize*o,(i.life<=0||i.y>this.actualHeight+50)&&(this.particles.splice(a,1),this.returnParticleToPool(i))}}renderParticles(){const e=this.ctx;for(const t of this.particles){e.save(),e.globalAlpha=t.opacity,e.translate(t.x,t.y),e.rotate(t.rotation);const a=e.createRadialGradient(0,0,0,0,0,t.size);a.addColorStop(0,t.color),a.addColorStop(.7,t.color+"80"),a.addColorStop(1,t.color+"00"),e.fillStyle=a,e.beginPath(),e.arc(0,0,t.size,0,2*Math.PI),e.fill(),"#FFD700"===t.color&&!this.config.enablePerformanceMode&&(e.shadowColor=t.color,e.shadowBlur=2*t.size,e.beginPath(),e.arc(0,0,.5*t.size,0,2*Math.PI),e.fill()),e.restore()}}spawnRedPacket(){const e=Date.now(),t=1e3/this.config.density;if(e-this.lastSpawnTime>t&&this.redPackets.length<this.config.count){const t=this.getRedPacketFromPool();this.redPackets.push(t),this.lastSpawnTime=e}}updateRedPackets(e){for(let t=this.redPackets.length-1;t>=0;t--){const a=this.redPackets[t];a.y+=a.speed*(e/16.67),this.config.rotation&&(a.rotation+=a.rotationSpeed*(e/16.67)),a.y>this.actualHeight&&(this.redPackets.splice(t,1),this.returnRedPacketToPool(a))}}renderRedPackets(){this.ctx.clearRect(0,0,this.actualWidth,this.actualHeight),this.config.customStyles?.backgroundColor&&(this.ctx.fillStyle=this.config.customStyles.backgroundColor,this.ctx.fillRect(0,0,this.actualWidth,this.actualHeight));for(const e of this.redPackets)this.renderRedPacket(e)}renderRedPacket(e){const t=this.ctx,a=e.x+e.width/2,i=e.y+e.height/2;t.save(),t.globalAlpha=e.opacity,t.translate(a,i),this.config.rotation&&t.rotate(e.rotation),t.scale(e.scale,e.scale),!this.config.enablePerformanceMode&&"special"===e.type&&(t.shadowColor="#FFD700",t.shadowBlur=10),this.redPacketImage?t.drawImage(this.redPacketImage,-e.width/2,-e.height/2,e.width,e.height):this.drawDefaultRedPacket(t,e),t.restore()}drawDefaultRedPacket(e,t){const a=t.width,i=t.height;e.fillStyle="special"===t.type?"#FFD700":"#FF6B6B",e.fillRect(-a/2,-i/2,a,i),e.strokeStyle=this.config.customStyles?.borderColor||"#FF4444",e.lineWidth=2,e.strokeRect(-a/2,-i/2,a,i),e.fillStyle="#FFFFFF",e.font="20px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("￥",0,-5),t.value&&(e.font="10px Arial",e.fillText(t.value.toString(),0,8))}animate(e){if(!this.isRunning||this.isPaused)return;const t=1e3/(this.config.enablePerformanceMode?this.config.maxFPS:this.config.qualityMaxFPS||144),a=e-this.lastFrameTime;a<.9*t||(this.lastFrameTime=e,this.updateFPS(e),this.spawnRedPacket(),this.updateRedPackets(a),this.updateParticles(a),this.renderRedPackets(),this.renderParticles(),this.config.debugMode&&this.renderDebugInfo(),this.triggerCallbacks()),this.isRunning&&!this.isPaused&&(this.animationId=requestAnimationFrame(this.animate.bind(this)))}updateFPS(e){this.frameCount++,e-this.lastFpsTime>=1e3&&(this.stats.fps=this.frameCount,this.frameCount=0,this.lastFpsTime=e)}renderDebugInfo(){const e=this.ctx;e.save(),e.fillStyle="rgba(0, 0, 0, 0.8)",e.fillRect(10,10,300,120),e.fillStyle="#00FF00",e.font="14px Arial",e.textAlign="left",e.fillText(`FPS: ${this.stats.fps}`,15,30),e.fillText(`红包数量: ${this.redPackets.length}`,15,50),e.fillText(`粒子数量: ${this.particles.length}`,15,70),e.fillText(`Canvas尺寸: ${this.actualWidth}x${this.actualHeight}`,15,90),e.fillText(`点击记录: ${this.debugClicks.length}`,15,110);for(const t of this.redPackets){const a=t.x+t.width/2,i=t.y+t.height/2,n=t.width*t.scale,o=t.height*t.scale,s=n+.1*n,l=o+.1*o;e.strokeStyle="rgba(255, 0, 0, 0.5)",e.lineWidth=1,e.strokeRect(a-n/2,i-o/2,n,o),e.strokeStyle="rgba(0, 255, 0, 0.7)",e.lineWidth=2,e.strokeRect(a-s/2,i-l/2,s,l),e.fillStyle="rgba(0, 255, 255, 0.8)",e.fillRect(a-2,i-2,4,4)}const t=Date.now();for(const a of this.debugClicks){const i=t-a.time;if(i<2e3){const t=Math.max(0,1-i/2e3);e.fillStyle=a.hit?`rgba(0, 255, 0, ${t})`:`rgba(255, 0, 0, ${t})`,e.fillRect(a.x-5,a.y-5,10,10),e.strokeStyle=a.hit?`rgba(0, 255, 0, ${t})`:`rgba(255, 0, 0, ${t})`,e.lineWidth=2,e.beginPath(),e.arc(a.x,a.y,15,0,2*Math.PI),e.stroke()}}e.restore()}triggerCallbacks(){this.onAnimationStateChangeCallback&&this.onAnimationStateChangeCallback({isRunning:this.isRunning,isPaused:this.isPaused,totalCollected:this.stats.totalCollected,currentRedPackets:[...this.redPackets],fps:this.stats.fps}),this.onPerformanceUpdateCallback&&this.onPerformanceUpdateCallback({fps:this.stats.fps,renderTime:0,updateTime:0,totalRedPackets:this.stats.totalCollected,activeRedPackets:this.redPackets.length})}start(){this.isRunning||(this.isRunning=!0,this.isPaused=!1,this.lastFrameTime=performance.now(),this.animate(this.lastFrameTime))}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}pause(){this.isPaused=!0}resume(){this.isPaused&&this.isRunning&&(this.isPaused=!1,this.lastFrameTime=performance.now(),this.animate(this.lastFrameTime))}clear(){this.redPackets.forEach(e=>this.returnRedPacketToPool(e)),this.redPackets=[],this.particles.forEach(e=>this.returnParticleToPool(e)),this.particles=[],this.ctx.clearRect(0,0,this.actualWidth,this.actualHeight),this.stats.totalCollected=0,this.stats.totalValue=0}updateConfig(e){this.config={...this.config,...e},this.optimizeConfig(),this.resizeCanvas(),e.redPacketImage&&this.loadRedPacketImage(),e.redPackets&&(this.redPacketDataIndex=0)}getStats(){return{fps:this.stats.fps,renderTime:0,updateTime:0,totalRedPackets:this.stats.totalCollected,activeRedPackets:this.redPackets.length}}getCollectionStats(){return{totalCollected:this.stats.totalCollected,totalValue:this.stats.totalValue}}setPerformanceMode(e){this.config.enablePerformanceMode=e}getPerformanceMode(){return this.config.enablePerformanceMode}onRedPacketClick(e){this.onRedPacketClickCallback=e}onAnimationStateChange(e){this.onAnimationStateChangeCallback=e}onPerformanceUpdate(e){this.onPerformanceUpdateCallback=e}setParticleConfig(e){this.particleConfig={...this.particleConfig,...e}}getParticleConfig(){return{...this.particleConfig}}destroy(){this.stop(),this.clear(),this.debugClicks=[],this.lastClickTime=0,this.particlePool=[],this.canvas.removeEventListener("click",this.handleClick.bind(this)),this.canvas.removeEventListener("touchstart",this.handleTouch.bind(this)),window.removeEventListener("resize",this.handleResize.bind(this))}}const i={class:"red-packet-rain-container",style:{fontFamily:"Arial, sans-serif"}},n={key:0,class:"stats-panel"},o={class:"stats-grid"},s={class:"stats-item"},l={class:"stats-value"},c={class:"stats-item"},r={class:"stats-value"},d={class:"stats-item"},h={class:"stats-value"},m={class:"stats-item"},f={class:"stats-value"},g={class:"stats-item"},u={class:"stats-value"},p={key:1,class:"control-buttons"},P={key:2,class:"config-panel"},v={class:"config-item"},k={class:"config-value"},b={class:"config-item"},x={class:"config-value"},y={class:"config-item"},C={class:"config-value"},S={class:"config-item"},F={class:"config-value"},M={class:"config-item"},R={class:"config-value"},V=["width","height"],E={key:3,class:"instructions"};var w=e.defineComponent({__name:"VueRedPacketRain",props:{config:{type:Object,required:!1,default:()=>({})},className:{type:String,required:!1,default:""},style:{type:Object,required:!1,default:()=>({})},autoStart:{type:Boolean,required:!1,default:!0},showControls:{type:Boolean,required:!1,default:!0}},emits:["redPacketClick","animationStateChange","performanceUpdate"],setup(t,{expose:w,emit:N}){const z=t,T=N,D=e.ref(null),$=e.ref(null),I=e.ref(!1),A=e.reactive({fps:0,collected:0,totalValue:0,activeCount:0,performanceMode:"性能模式"}),B=e.reactive({count:15,density:3,speed:{min:2,max:5},maxFPS:60,qualityMaxFPS:144,enablePerformanceMode:!0,enableFrameRateLimit:!0,debugMode:!1,containerWidth:"100%",containerHeight:"100%",...z.config}),H=e.computed(()=>({display:"block",width:"100%",height:"100%",...z.style}));e.watchEffect(()=>{if(!$.value)return;const e=$.value.getStats(),t=B.enablePerformanceMode?"性能模式":"高质量",a=B.enableFrameRateLimit?"限制已启用":"无限制";A.fps=e.fps,A.collected=$.value.getCollectionStats().totalCollected,A.totalValue=$.value.getCollectionStats().totalValue,A.activeCount=e.activeRedPackets,A.performanceMode=`${t}(${a})`});const W=async()=>{if(!D.value||$.value)return;await e.nextTick();const t=D.value.getBoundingClientRect(),i={containerWidth:t.width||800,containerHeight:t.height||600,...B};$.value=new a(D.value,i),$.value.onRedPacketClick(e=>{T("redPacketClick",e)}),$.value.onAnimationStateChange(e=>{T("animationStateChange",e)}),$.value.onPerformanceUpdate(e=>{T("performanceUpdate",e)}),I.value=!0,setTimeout(()=>{console.log("🎮 Vue红包雨组件已初始化"),console.log("🖥️ 正在检测显示器刷新率..."),(()=>{let e=0;const t=performance.now(),a=i=>{if(e++,i-t>=1e3){const t=e;console.log(`🖥️ 检测到显示器刷新率: ${t}Hz`),t<=60?console.log("📺 您的显示器: 60Hz"):t<=120?console.log("📺 您的显示器: 120Hz - 这解释了为什么看到120FPS而不是144FPS"):console.log("📺 您的显示器: 高刷新率，支持144FPS+")}else requestAnimationFrame(a)};requestAnimationFrame(a)})()},1e3),z.autoStart&&$.value.start()},L=()=>{$.value&&$.value.updateConfig(B)},q=()=>{$.value?.start()},U=()=>{$.value?.stop()},_=()=>{$.value?.pause()},O=()=>{$.value?.resume()},j=()=>{$.value?.clear()},Y=()=>{B.debugMode=!B.debugMode,L(),console.log("调试模式:",B.debugMode?"开启":"关闭")},X=()=>{if($.value){const e=$.value.getPerformanceMode();$.value.setPerformanceMode(!e),B.enablePerformanceMode=!e,console.log("性能模式:",e?"已禁用":"已启用")}},G=()=>{B.enableFrameRateLimit=!B.enableFrameRateLimit,L(),console.log("帧率限制:",B.enableFrameRateLimit?"已启用":"已关闭")};return e.onMounted(()=>{W()}),e.onUnmounted(()=>{$.value&&($.value.destroy(),$.value=null)}),w({start:q,stop:U,pause:_,resume:O,clear:j,updateConfig:e=>{Object.assign(B,e),L()},getStats:()=>$.value?.getStats()||{fps:0,renderTime:0,updateTime:0,totalRedPackets:0,activeRedPackets:0},getEngine:()=>$.value,togglePerformanceMode:()=>{if($.value){const e=$.value.getPerformanceMode();return $.value.setPerformanceMode(!e),B.enablePerformanceMode=!e,!e}return!1},setPerformanceMode:e=>{$.value?.setPerformanceMode(e),B.enablePerformanceMode=e},getPerformanceMode:()=>$.value?.getPerformanceMode()||!1}),(t,a)=>(e.openBlock(),e.createElementBlock("div",i,[e.createCommentVNode(" 统计面板 "),t.showControls?(e.openBlock(),e.createElementBlock("div",n,[e.createElementVNode("div",o,[e.createElementVNode("div",s,[e.createElementVNode("div",l,e.toDisplayString(A.fps),1),a[5]||(a[5]=e.createElementVNode("div",{class:"stats-label"},"FPS",-1))]),e.createElementVNode("div",c,[e.createElementVNode("div",r,e.toDisplayString(A.collected),1),a[6]||(a[6]=e.createElementVNode("div",{class:"stats-label"},"已收集",-1))]),e.createElementVNode("div",d,[e.createElementVNode("div",h,"￥"+e.toDisplayString(A.totalValue),1),a[7]||(a[7]=e.createElementVNode("div",{class:"stats-label"},"总价值",-1))]),e.createElementVNode("div",m,[e.createElementVNode("div",f,e.toDisplayString(A.activeCount),1),a[8]||(a[8]=e.createElementVNode("div",{class:"stats-label"},"活跃红包",-1))]),e.createElementVNode("div",g,[e.createElementVNode("div",u,e.toDisplayString(A.performanceMode),1),a[9]||(a[9]=e.createElementVNode("div",{class:"stats-label"},"当前模式",-1))])])])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" 控制按钮 "),t.showControls?(e.openBlock(),e.createElementBlock("div",p,[e.createElementVNode("button",{class:"btn btn-primary",onClick:q},"🚀 开始"),e.createElementVNode("button",{class:"btn btn-secondary",onClick:U},"⏹️ 停止"),e.createElementVNode("button",{class:"btn btn-secondary",onClick:_},"⏸️ 暂停"),e.createElementVNode("button",{class:"btn btn-secondary",onClick:O},"▶️ 继续"),e.createElementVNode("button",{class:"btn btn-secondary",onClick:j},"🧹 清空"),e.createElementVNode("button",{class:e.normalizeClass(["btn",B.debugMode?"btn-primary":"btn-secondary"]),onClick:Y}," 🐛 "+e.toDisplayString(B.debugMode?"关闭调试":"调试模式"),3),e.createElementVNode("button",{class:e.normalizeClass(["btn",B.enablePerformanceMode?"btn-primary":"btn-secondary"]),onClick:X}," ⚡ "+e.toDisplayString(B.enablePerformanceMode?"高质量模式":"性能模式"),3),e.createElementVNode("button",{class:e.normalizeClass(["btn",B.enableFrameRateLimit?"btn-primary":"btn-secondary"]),onClick:G}," 🎯 "+e.toDisplayString(B.enableFrameRateLimit?"关闭限制":"启用限制"),3)])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" 配置面板 "),t.showControls?(e.openBlock(),e.createElementBlock("div",P,[a[15]||(a[15]=e.createElementVNode("h3",null,"⚙️ 配置调整",-1)),e.createElementVNode("div",v,[a[10]||(a[10]=e.createElementVNode("label",null,"红包数量",-1)),e.withDirectives(e.createElementVNode("input",{type:"range",min:"5",max:"50","onUpdate:modelValue":a[0]||(a[0]=e=>B.count=e),onInput:L},null,544),[[e.vModelText,B.count]]),e.createElementVNode("span",k,e.toDisplayString(B.count),1)]),e.createElementVNode("div",b,[a[11]||(a[11]=e.createElementVNode("label",null,"红包密度",-1)),e.withDirectives(e.createElementVNode("input",{type:"range",min:"1",max:"10","onUpdate:modelValue":a[1]||(a[1]=e=>B.density=e),onInput:L},null,544),[[e.vModelText,B.density]]),e.createElementVNode("span",x,e.toDisplayString(B.density),1)]),e.createElementVNode("div",y,[a[12]||(a[12]=e.createElementVNode("label",null,"最小速度",-1)),e.withDirectives(e.createElementVNode("input",{type:"range",min:"1",max:"5","onUpdate:modelValue":a[2]||(a[2]=e=>B.speed.min=e),onInput:L},null,544),[[e.vModelText,B.speed.min]]),e.createElementVNode("span",C,e.toDisplayString(B.speed.min),1)]),e.createElementVNode("div",S,[a[13]||(a[13]=e.createElementVNode("label",null,"最大速度",-1)),e.withDirectives(e.createElementVNode("input",{type:"range",min:"3",max:"10","onUpdate:modelValue":a[3]||(a[3]=e=>B.speed.max=e),onInput:L},null,544),[[e.vModelText,B.speed.max]]),e.createElementVNode("span",F,e.toDisplayString(B.speed.max),1)]),e.createElementVNode("div",M,[a[14]||(a[14]=e.createElementVNode("label",null,"高质量帧率",-1)),e.withDirectives(e.createElementVNode("input",{type:"range",min:"60",max:"240","onUpdate:modelValue":a[4]||(a[4]=e=>B.qualityMaxFPS=e),onInput:L},null,544),[[e.vModelText,B.qualityMaxFPS]]),e.createElementVNode("span",R,e.toDisplayString(B.qualityMaxFPS),1)])])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Canvas容器 "),e.createElementVNode("div",{class:e.normalizeClass(["canvas-container",t.className])},[e.createElementVNode("canvas",{ref_key:"canvasRef",ref:D,style:e.normalizeStyle(H.value),width:B.containerWidth,height:B.containerHeight},null,12,V)],2),e.createCommentVNode(" 使用说明 "),t.showControls?(e.openBlock(),e.createElementBlock("div",E,a[16]||(a[16]=[e.createElementVNode("h3",null,"📖 使用说明",-1),e.createElementVNode("ul",null,[e.createElementVNode("li",null,"🎯 点击红包进行收集，每个红包都有随机的价值"),e.createElementVNode("li",null,"⚡ 金色红包为特殊红包，价值更高"),e.createElementVNode("li",null,"🎛️ 使用滑块实时调整红包参数"),e.createElementVNode("li",null,"📊 观察FPS和性能统计"),e.createElementVNode("li",null,"🔍 性能模式：简化渲染、60FPS限制、对象池复用"),e.createElementVNode("li",null,"🎨 高质量模式：完整视觉效果、144FPS限制、对象池复用"),e.createElementVNode("li",null,"🖥️ 帧率受显示器刷新率限制，会自动检测并调整")],-1)]))):e.createCommentVNode("v-if",!0)]))}});!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&!(typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('\n.red-packet-rain-container[data-v-f127135f] {\n font-family: Arial, sans-serif;\n}\n.stats-panel[data-v-f127135f] {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 20px;\n}\n.stats-grid[data-v-f127135f] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n}\n.stats-item[data-v-f127135f] {\n text-align: center;\n padding: 15px;\n background: white;\n border-radius: 6px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.stats-value[data-v-f127135f] {\n font-size: 2em;\n font-weight: bold;\n color: #ff6b6b;\n}\n.stats-label[data-v-f127135f] {\n color: #666;\n margin-top: 5px;\n}\n.control-buttons[data-v-f127135f] {\n margin-bottom: 20px;\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n.btn[data-v-f127135f] {\n padding: 12px 24px;\n border: none;\n border-radius: 25px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n margin: 5px;\n}\n.btn-primary[data-v-f127135f] {\n background: linear-gradient(45deg, #ff6b6b, #ffa500);\n color: white;\n}\n.btn-secondary[data-v-f127135f] {\n background: #6c757d;\n color: white;\n}\n.btn[data-v-f127135f]:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);\n}\n.config-panel[data-v-f127135f] {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 20px;\n}\n.config-panel h3[data-v-f127135f] {\n margin: 0 0 20px 0;\n color: #ff6b6b;\n}\n.config-item[data-v-f127135f] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n}\n.config-item label[data-v-f127135f] {\n min-width: 80px;\n font-weight: 600;\n color: #333;\n}\n.config-item input[type="range"][data-v-f127135f] {\n flex: 1;\n height: 6px;\n background: #ddd;\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.config-item input[type="range"][data-v-f127135f]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: #ff6b6b;\n border-radius: 50%;\n cursor: pointer;\n}\n.config-item input[type="range"][data-v-f127135f]::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background: #ff6b6b;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n}\n.config-value[data-v-f127135f] {\n min-width: 30px;\n text-align: center;\n font-weight: bold;\n color: #ff6b6b;\n}\n.canvas-container[data-v-f127135f] {\n width: 100%;\n height: 500px;\n overflow: hidden;\n}\n.instructions[data-v-f127135f] {\n background: linear-gradient(135deg, #e8f4f8 0%, #d4e6f1 100%);\n border-radius: 8px;\n padding: 25px;\n margin-top: 20px;\n}\n.instructions h3[data-v-f127135f] {\n color: #2c3e50;\n margin-top: 0;\n}\n.instructions ul[data-v-f127135f] {\n padding-left: 20px;\n}\n.instructions li[data-v-f127135f] {\n margin-bottom: 8px;\n color: #34495e;\n}\ncanvas[data-v-f127135f] {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n');var N=((e,t)=>{const a=e.__vccOpts||e;for(const[e,i]of t)a[e]=i;return a})(w,[["__scopeId","data-v-f127135f"]]);exports.RedPacketRain=N,exports.RedPacketRainEngine=a,exports.VERSION="1.0.0",exports.default=N;
//# sourceMappingURL=index.js.map