vue-pure-admin/static/js/index-CHMkjOAX.js

import{d as H,a as E,p as h,r as G,m as P,y as Z,a3 as q,x as $,L as _,k as ee,e as J,g as f,O as te,v as ne,o as Ae,b as ae,w as m,f as v,t as R,a4 as se,u as le,j as i,h as z,a5 as oe,_ as ue}from"./index-DMqaFtX4.js";const T=[{avatar:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAFBAYBAgMAB//aAAgBAQAAAAD7HU4ObhMC3AnlYvY8ISwA+6WDOd4/RA96FVeF66BOVWB3TsAOgZC27wv/xAAYAQEBAQEBAAAAAAAAAAAAAAACAwQAAf/aAAgBAhAAAAC3sw8uyRDQPV//xAAYAQADAQEAAAAAAAAAAAAAAAAAAgMBBP/aAAgBAxAAAACQ7LfmoUTNvFf/xAA0EAACAQMBBAcHAwUAAAAAAAABAgMABBESBRMxQRAhIjJRYbEUIzRCUnOBM3KSU2KRoeH/2gAIAQEAAT8AmmSCJpHOAoq6vZp8lmITkgonSQCMZxikkdGDxsVbxFbK2l7TGUkwHQfy6Ln4if7jetbcdglvH9TFv40hD71CGzlQpAyACRkt4VcxojxOdIj06GzwA5VKkilGUdjUcNxD9XlwI5g1Bfm0u4nC5UHDeYNWu0LS4B3D6mHHIwaufiJ/uN61tm6Et6GPCIbv8mtqi4gtrFkzjeuxIGRq+TP4orI1jpK+8MHAfVprYcM8kVysmoIGiwG8UfVgVcwh1ecDGiYcvlNWk7W9zDKucqwyPEVOczzfvb1q/wBkXWqR4Sja8nDHGCajAEagHIAx/jourmK0haaV9KrWyrFZLRZJ07MqNhc8Q3M/irfZFlaOGQF2HzOc1cACeYD+o3r0XptYEJKAyMx06TgsxOaupr+MhkIQk6TlfPlkVNCIxBc3A9onLjRG/WtWV1BPFlRp09TpzBHLoufiJ/uN69G05JLxt8C2ksQpTiAMHIq0mQz6HnMnZwurBwBRhKTLLK5Y6Oz/AGf9qwla3u4TykBRh/sdFx8RN9xvWpri43Unv5O6fmNSSSCHGtsb0DGfKrFm3zdZ7o9RUskhMnbbu+NLJJrh7bfqJz869onxjfSY/callk3knvG7x51//8QAIxEAAgEEAQMFAAAAAAAAAAAAAQIRAAMSMRAEIXETMjNBUf/aAAgBAgEBPwBMUTNv3tSdQrgZDYpwMmx0N8PdFv0iBMAyKS4QroF99JcxDhhMntwxgUCoJIER90jZCeG2PBpvjNWtHzx//8QAIBEAAgICAgIDAAAAAAAAAAAAAQIAERASAyEyM0GBkf/aAAgBAwEBPwBtmbURuErdRb1W/nCIW3vqMgJVr8YyWVIyvYG/5CKwJze36jY//9k=",name:"美绪",text:"马什么梅？"},{avatar:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQIDBAEGB//aAAgBAQAAAAD65hzG3WLcATfCbHYQ9IY0uiEfRkU1IOr+RoUG1ornWj7Y6//EABgBAQADAQAAAAAAAAAAAAAAAAQAAgUD/9oACAECEAAAACEf3IJba51tGDNq/wD/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQMFAv/aAAgBAxAAAABSg0MWQdj+c6VozP/EAC0QAAIBAwMBBgUFAAAAAAAAAAECEQADBBASMUEiUVJhcZEFExQhgSAyQoKx/9oACAEBAAE/AKu5oEi2A3meKOXf8cfgV9Xe2kEgyOeCKsZSXAqs0XP91z7+wC3MSCzeg/RbuG06uO8T6a5kNkOOu0CpUXWQMdo4kQRPQihPd9tH+4jXIw0yDukq0RNHFu2/iOVku0pfx7foHt91MttbMyN7njqQDo3BPkdWEqRJEjkV8QOV2LVq2xBBlkoq+y181CrgHn1nXHffZQ+UH8aEwCaEoJP9qzbe+ySOUO7XCuxca2f5CR6jS477H7bftPWt7+NvekdzbWXYyo60rvtXtHgda3v4j71Yd/qLPaPJ6+Vb38be9f/EACYRAAECBAQHAQAAAAAAAAAAAAECAwAEEBIREzFSITNBQlFhgXL/2gAIAQIBAT8AffKDYjXqYznd5hhwuI46ijjOOaSfaYUm232Ik9F/KKQFRMN2LHgiJVdrmG6s32fYa5iP0Kf/xAAmEQABAgQFBAMAAAAAAAAAAAABAgMAEBESBBNCUoEhMTNhUXFy/9oACAEDAQE/AGGAoXK4EZLWwQ+2G19Oxk28RlhI9GEqur9xi9HMm3C2qtAfRhhy9J+axiUXIrtnhdfEOeNf5Mv/2Q==",name:"博士",text:"马东什么？"},{avatar:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAxAAACAgMBAAAAAAAAAAAAAAAABgQFAQIHAwEBAAMBAAAAAAAAAAAAAAAAAwABAgT/2gAMAwEAAhADEAAAAI7CsPnN1VeZ0okpTbSWASKzwmMPRy3PuuWhpv4KvQ7pcJYTUb+hdLQYWJoaVU+RU3jcXiaoegAhWOAPeeaBd1wGtf/EAC4QAAIBAwIEBAUFAQAAAAAAAAECAwAEEQUhBhASMRMiQWEUI3KBoSAzQlFSkv/aAAgBAQABPwDTxidHHbdTyZGjdkcYYelBGKM4HlUgH7/osXInRfQsK0q18abxGHkj/JrV0KXrEfzUGtLiE0F1G48r4GfcVJDJFI0TbMp52W91D9VXt42mWQCu0QUqHZQC7SyDIRA22QO5NXkFyLeFpnWRggYsMZw/+ioAPsRVlOtrpsshx+6d2OFGw3J/oVK897YR6nbfORCTkp0OVQ7lRk5Aq5gMZSVR8qVepfbPpy0jDSRyEZxIg/6JrjKJytlEEJ63uJD7ttXB6Tn41bhW8Mwxxjqzt3OBWrx+Bw9fQsRvIgBzjYutcP3F8upWVmZZltvjFPQW22BqeAJpHh+kWyeyhsL+KXS9RcB1WLpYZGSc4NcKwxTrcRy+qrj2IJIqe3S5AEsSOAcgMobB+9Lb9KhVAAHYCntRIjI6hkYYZWGQRUGm2ltMssVsiSKCAVGMZqWFZ4fDY4XYn7ULaEgF182N/Me9cIuI3kY9gFodLAEHINFgKDKdqwK1LVotOMSsnWz5JAPYUeJZyTiKMVwv2n+la08npcZOBjke3LVWZtRuizE4kI5f/8QAIBEBAAIBAgcAAAAAAAAAAAAAAQARAwIQEiAhMTJBcf/aAAgBAgEBPwDL5HzkadfX0RDjmTSUJtks1MqWpVypk7uxt//EACARAQABAwMFAAAAAAAAAAAAAAEAAhEhAxATEiIxYXH/2gAIAQMBAT8A0m1L9l+2++Sg9sF45p1N7M6iUJYwM5GYW4ZmZT4Njb//2Q==",name:"柚子",text:"什么冬梅？"}],O=["1","2","3","4","5","6","7","8","9"],W=()=>O.map((u,A)=>{const Q=A%3;return{avatar:T[Q].avatar,name:T[Q].name,text:u}});var L=H({name:"vue3-danmaku",components:{},props:{danmus:{type:Array,required:!0,default:()=>[]},channels:{type:Number,default:0},autoplay:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},useSlot:{type:Boolean,default:!1},debounce:{type:Number,default:100},speeds:{type:Number,default:200},randomChannel:{type:Boolean,default:!1},fontSize:{type:Number,default:18},top:{type:Number,default:4},right:{type:Number,default:0},isSuspend:{type:Boolean,default:!1},extraStyle:{type:String,default:""}},emits:["list-end","play-end","dm-over","dm-out","update:danmus"],setup(u,{emit:A,slots:Q}){let g=E(document.createElement("div")),s=E(document.createElement("div"));const l=E(0),y=E(0);let c=0;const U=E(0),M=E(0),B=E(0),S=E(!1),w=E(!1),d=E({}),e=function(r,p,t="modelValue",n){return h({get:()=>r[t],set:x=>{p(`update:${t}`,x)}})}(u,A,"danmus"),C=G({channels:h(()=>u.channels||U.value),autoplay:h(()=>u.autoplay),loop:h(()=>u.loop),useSlot:h(()=>u.useSlot),debounce:h(()=>u.debounce),randomChannel:h(()=>u.randomChannel)}),a=G({height:h(()=>M.value),fontSize:h(()=>u.fontSize),speeds:h(()=>u.speeds),top:h(()=>u.top),right:h(()=>u.right)});function Y(){K(),u.isSuspend&&function(){let r=[];s.value.addEventListener("mouseover",p=>{let t=p.target;t.className.includes("dm")||(t=t.closest(".dm")||t),t.className.includes("dm")&&(r.includes(t)||(A("dm-over",{el:t}),t.classList.add("pause"),r.push(t)))}),s.value.addEventListener("mouseout",p=>{let t=p.target;t.className.includes("dm")||(t=t.closest(".dm")||t),t.className.includes("dm")&&(A("dm-out",{el:t}),t.classList.remove("pause"),r.forEach(n=>{n.classList.remove("pause")}),r=[])})}(),C.autoplay&&o()}function K(){if(l.value=g.value.offsetWidth,y.value=g.value.offsetHeight,l.value===0||y.value===0)throw new Error("获取不到容器宽高")}function o(){w.value=!1,c||(c=window.setInterval(()=>function(){if(!w.value&&e.value.length)if(B.value>e.value.length-1){const r=s.value.children.length;C.loop&&(r<B.value&&(A("list-end"),B.value=0),F())}else F()}(),C.debounce))}function F(r){const p=C.loop?B.value%e.value.length:B.value,t=r||e.value[p];let n=document.createElement("div");C.useSlot?n=function(x,k){return q({render:()=>_("div",{},[Q.dm&&Q.dm({danmu:x,index:k})])}).mount(document.createElement("div"))}(t,p).$el:(n.innerHTML=t,n.setAttribute("style",u.extraStyle),n.style.fontSize=`${a.fontSize}px`,n.style.lineHeight=`${a.fontSize}px`),n.classList.add("dm"),s.value.appendChild(n),n.style.opacity="0",$(()=>{a.height||(M.value=n.offsetHeight),C.channels||(U.value=Math.floor(y.value/(a.height+a.top)));let x=function(k){let b=[...Array(C.channels).keys()];C.randomChannel&&(b=b.sort(()=>.5-Math.random()));for(let I of b){const D=d.value[I];if(!D||!D.length)return d.value[I]=[k],k.addEventListener("animationend",()=>d.value[I].splice(0,1)),I%C.channels;for(let V=0;V<D.length;V++){const N=X(D[V])-10;if(N<=.88*(k.offsetWidth-D[V].offsetWidth)||N<=0)break;if(V===D.length-1)return d.value[I].push(k),k.addEventListener("animationend",()=>d.value[I].splice(0,1)),I%C.channels}}return-1}(n);if(x>=0){const k=n.offsetWidth,b=a.height;n.classList.add("move"),n.dataset.index=`${p}`,n.dataset.channel=x.toString(),n.style.opacity="1",n.style.top=x*(b+a.top)+"px",n.style.width=k+a.right+"px",n.style.setProperty("--dm-scroll-width",`-${l.value+k}px`),n.style.left=`${l.value}px`,n.style.animationDuration=l.value/a.speeds+"s",n.addEventListener("animationend",()=>{Number(n.dataset.index)!==e.value.length-1||C.loop||A("play-end",n.dataset.index),s.value&&s.value.removeChild(n)}),B.value++}else s.value.removeChild(n)})}function X(r){const p=r.offsetWidth||parseInt(r.style.width),t=r.getBoundingClientRect().right||s.value.getBoundingClientRect().right+p;return s.value.getBoundingClientRect().right-t}function j(){clearInterval(c),c=0,B.value=0}return P(()=>{Y()}),Z(()=>{j()}),{container:g,dmContainer:s,hidden:S,paused:w,danmuList:e,getPlayState:function(){return!w.value},resize:function(){K();const r=s.value.getElementsByClassName("dm");for(let p=0;p<r.length;p++){const t=r[p];t.style.setProperty("--dm-scroll-width",`-${l.value+t.offsetWidth}px`),t.style.left=`${l.value}px`,t.style.animationDuration=l.value/a.speeds+"s"}},play:o,pause:function(){w.value=!0},stop:function(){d.value={},s.value.innerHTML="",w.value=!0,S.value=!1,j()},show:function(){S.value=!1},hide:function(){S.value=!0},reset:function(){M.value=0,Y()},add:function(r){if(B.value===e.value.length)return e.value.push(r),e.value.length-1;{const p=B.value%e.value.length;return e.value.splice(p,0,r),p+1}},push:function(r){return e.value.push(r),e.value.length-1},insert:F}}});const ie={ref:"container",class:"vue-danmaku"};(function(u,A){A===void 0&&(A={});var Q=A.insertAt;if(typeof document!="undefined"){var g=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",Q==="top"&&g.firstChild?g.insertBefore(s,g.firstChild):g.appendChild(s),s.styleSheet?s.styleSheet.cssText=u:s.appendChild(document.createTextNode(u))}})(`.vue-danmaku {
  position: relative;
  overflow: hidden;
}
.vue-danmaku .danmus {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.vue-danmaku .danmus.show {
  opacity: 1;
}
.vue-danmaku .danmus.paused .dm.move {
  animation-play-state: paused;
}
.vue-danmaku .danmus .dm {
  position: absolute;
  font-size: 20px;
  color: #ddd;
  white-space: pre;
  transform: translateX(0);
  transform-style: preserve-3d;
}
.vue-danmaku .danmus .dm.move {
  will-change: transform;
  animation-name: moveLeft;
  animation-timing-function: linear;
  animation-play-state: running;
}
.vue-danmaku .danmus .dm.pause {
  animation-play-state: paused;
  z-index: 100;
}
@keyframes moveLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--dm-scroll-width));
  }
}
@-webkit-keyframes moveLeft {
  from {
    -webkit-transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(var(--dm-scroll-width));
  }
}`),L.render=function(u,A,Q,g,s,l){return J(),ee("div",ie,[f("div",{ref:"dmContainer",class:ne(["danmus",{show:!u.hidden},{paused:u.paused}])},null,2),te(u.$slots,"default")],512)},L.__file="src/lib/Danmaku.vue";const de={class:"card-header"},re={class:"font-medium"},me={class:"flex gap-5"},fe={class:"danmu-item"},pe=["src"],ve={class:"main"},ge={class:"ml-5"},Ce={class:"ml-5"},Be={class:"ml-5"},Ee={class:"flex"},Qe=H({name:"Danmaku",__name:"index",setup(u){const A=E(),Q=E(W()),g=E("");let s=0;const l=G({channels:5,useSlot:!0,loop:!0,speeds:200,fontSize:20,top:10,right:0,debounce:100,randomChannel:!0});P(()=>{window.onresize=()=>S()}),Ae(()=>{window.onresize=null});function y(d){switch(d){case"play":A.value.play();break;case"pause":A.value.pause();break;case"stop":A.value.stop();break;case"show":A.value.show();break;case"hide":A.value.hide();break;case"reset":A.value.reset();break}}function c(d){l.useSlot=d,Q.value=d?W():O,setTimeout(()=>{A.value.stop(),A.value.play()})}function U(d){l.speeds<=10&&d===-10||(l.speeds+=d,A.value.reset())}function M(d){l.fontSize+=d,A.value.reset()}function B(d){!l.channels&&d===-1||(l.channels+=d)}function S(){s&&clearTimeout(s),s=window.setTimeout(()=>{A.value.resize()},500)}function w(){if(!g.value)return;const d=l.useSlot?{avatar:"https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",name:"你",text:g.value}:g.value;A.value.add(d),g.value=""}return(d,e)=>{const C=z("el-link"),a=z("el-button"),Y=z("el-input"),K=z("el-card");return J(),ae(K,{shadow:"never"},{header:m(()=>[f("div",de,[f("span",re,[e[17]||(e[17]=i(" 弹幕组件，采用开源的 ")),v(C,{href:"https://github.com/hellodigua/vue-danmaku/tree/vue3",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:m(()=>e[16]||(e[16]=[i(" vue3-danmaku ")])),_:1})])]),v(C,{class:"mt-2",href:"https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku",target:"_blank"},{default:m(()=>e[18]||(e[18]=[i(" 代码位置 src/views/able/danmaku ")])),_:1})]),default:m(()=>[f("div",me,[v(le(L),se({ref_key:"danmaku",ref:A,danmus:Q.value,"onUpdate:danmus":e[0]||(e[0]=o=>Q.value=o),class:"demo",isSuspend:""},l),{dm:m(({danmu:o,index:F})=>[f("div",fe,[f("img",{class:"img",src:o.avatar},null,8,pe),f("span",null,R(F)+R(o.name)+"：",1),f("span",null,R(o.text),1)])]),_:1},16,["danmus"]),f("div",ve,[f("p",null,[e[22]||(e[22]=i(" 播放： ")),v(a,{onClick:e[1]||(e[1]=o=>y("play"))},{default:m(()=>e[19]||(e[19]=[i("播放")])),_:1}),v(a,{onClick:e[2]||(e[2]=o=>y("pause"))},{default:m(()=>e[20]||(e[20]=[i("暂停")])),_:1}),v(a,{onClick:e[3]||(e[3]=o=>y("stop"))},{default:m(()=>e[21]||(e[21]=[i("停止")])),_:1})]),f("p",null,[e[25]||(e[25]=i(" 模式： ")),v(a,{onClick:e[4]||(e[4]=o=>c(!0))},{default:m(()=>e[23]||(e[23]=[i("弹幕 slot")])),_:1}),v(a,{onClick:e[5]||(e[5]=o=>c(!1))},{default:m(()=>e[24]||(e[24]=[i("普通文本")])),_:1})]),f("p",null,[e[28]||(e[28]=i(" 显示： ")),v(a,{onClick:e[6]||(e[6]=o=>y("show"))},{default:m(()=>e[26]||(e[26]=[i("显示")])),_:1}),v(a,{onClick:e[7]||(e[7]=o=>y("hide"))},{default:m(()=>e[27]||(e[27]=[i("隐藏")])),_:1})]),f("p",null,[e[31]||(e[31]=i(" 速度： ")),v(a,{onClick:e[8]||(e[8]=o=>U(-10))},{default:m(()=>e[29]||(e[29]=[i("减速")])),_:1}),v(a,{onClick:e[9]||(e[9]=o=>U(10))},{default:m(()=>e[30]||(e[30]=[i("增速")])),_:1}),f("span",ge,"当前速度："+R(l.speeds)+"像素/s",1)]),f("p",null,[e[34]||(e[34]=i(" 字号： ")),v(a,{disabled:l.useSlot,onClick:e[10]||(e[10]=o=>M(-1))},{default:m(()=>e[32]||(e[32]=[i(" 缩小 ")])),_:1},8,["disabled"]),v(a,{disabled:l.useSlot,onClick:e[11]||(e[11]=o=>M(1))},{default:m(()=>e[33]||(e[33]=[i(" 放大 ")])),_:1},8,["disabled"]),f("span",Ce,"当前字号："+R(l.fontSize)+"px",1)]),f("p",null,[e[38]||(e[38]=i(" 轨道： ")),v(a,{onClick:e[12]||(e[12]=o=>B(-1))},{default:m(()=>e[35]||(e[35]=[i("-1")])),_:1}),v(a,{onClick:e[13]||(e[13]=o=>B(1))},{default:m(()=>e[36]||(e[36]=[i("+1")])),_:1}),v(a,{onClick:e[14]||(e[14]=o=>B(-l.channels))},{default:m(()=>e[37]||(e[37]=[i(" 填满 ")])),_:1}),f("span",Be,"当前轨道："+R(l.channels),1)]),f("p",Ee,[v(Y,{modelValue:g.value,"onUpdate:modelValue":e[15]||(e[15]=o=>g.value=o),type:"text",placeholder:"输入评论后，回车发送弹幕",onKeyup:oe(w,["enter"])},null,8,["modelValue"])])])])]),_:1})}}}),ke=ue(Qe,[["__scopeId","data-v-d4dc730e"]]);export{ke as default};