video-split-screen 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.mjs +201 -237
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k={1:{type:"1",label:"1分屏",count:1,cols:1,rows:1},2:{type:"2",label:"2分屏",count:2,cols:2,rows:1},3:{type:"3",label:"3分屏",count:3,cols:2,rows:2},4:{type:"4",label:"4分屏",count:4,cols:2,rows:2},6:{type:"6",label:"6分屏",count:6,cols:3,rows:2},7:{type:"7",label:"7分屏",count:7,cols:4,rows:4},8:{type:"8",label:"8分屏",count:8,cols:4,rows:4},9:{type:"9",label:"9分屏",count:9,cols:3,rows:3},10:{type:"10",label:"10分屏",count:10,cols:6,rows:4},13:{type:"13",label:"13分屏",count:13,cols:4,rows:4},16:{type:"16",label:"16分屏",count:16,cols:4,rows:4}},I={};function G(c){if(I[c])return I[c];const o={1:[{col:1,colSpan:1,row:1,rowSpan:1}],2:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1}],3:[{col:1,colSpan:1,row:1,rowSpan:2,isMain:!0},{col:2,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],4:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],6:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1}],7:[{col:1,colSpan:2,row:1,rowSpan:2},{col:3,colSpan:2,row:1,rowSpan:2},{col:1,colSpan:2,row:3,rowSpan:2},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],8:[{col:1,colSpan:3,row:1,rowSpan:3,isMain:!0},{col:4,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],9:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1}],10:[{col:1,colSpan:5,row:1,rowSpan:3,isMain:!0},{col:6,colSpan:1,row:1,rowSpan:1},{col:6,colSpan:1,row:2,rowSpan:1},{col:6,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1},{col:5,colSpan:1,row:4,rowSpan:1},{col:6,colSpan:1,row:4,rowSpan:1}],13:[{col:1,colSpan:2,row:1,rowSpan:2,isMain:!0},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],16:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}]}[c]||[];return o.length>0&&(I[c]=o),o}function O(){return Object.keys(k)}const W={class:"layout-icon"},Z={key:0,viewBox:"0 0 48 48",fill:"none"},ee={key:1,viewBox:"0 0 48 48",fill:"none"},te={key:2,viewBox:"0 0 48 48",fill:"none"},oe={key:3,viewBox:"0 0 48 48",fill:"none"},re={key:4,viewBox:"0 0 48 48",fill:"none"},le={key:5,viewBox:"0 0 48 48",fill:"none"},ae={key:6,viewBox:"0 0 48 48",fill:"none"},ne={key:7,viewBox:"0 0 48 48",fill:"none"},ce={key:8,viewBox:"0 0 54 48",fill:"none"},ie={key:9,viewBox:"0 0 48 48",fill:"none"},de={key:10,viewBox:"0 0 48 48",fill:"none"},se=e.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(c){return(y,o)=>(e.openBlock(),e.createElementBlock("div",W,[c.type==="1"?(e.openBlock(),e.createElementBlock("svg",Z,[...o[0]||(o[0]=[e.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):c.type==="2"?(e.openBlock(),e.createElementBlock("svg",ee,[...o[1]||(o[1]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):c.type==="3"?(e.openBlock(),e.createElementBlock("svg",te,[...o[2]||(o[2]=[e.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),e.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):c.type==="4"?(e.openBlock(),e.createElementBlock("svg",oe,[...o[3]||(o[3]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):c.type==="6"?(e.openBlock(),e.createElementBlock("svg",re,[...o[4]||(o[4]=[e.createStaticVNode('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',6)])])):c.type==="7"?(e.openBlock(),e.createElementBlock("svg",le,[...o[5]||(o[5]=[e.createStaticVNode('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',7)])])):c.type==="8"?(e.openBlock(),e.createElementBlock("svg",ae,[...o[6]||(o[6]=[e.createStaticVNode('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',8)])])):c.type==="9"?(e.openBlock(),e.createElementBlock("svg",ne,[...o[7]||(o[7]=[e.createStaticVNode('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',9)])])):c.type==="10"?(e.openBlock(),e.createElementBlock("svg",ce,[...o[8]||(o[8]=[e.createStaticVNode('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',10)])])):c.type==="13"?(e.openBlock(),e.createElementBlock("svg",ie,[...o[9]||(o[9]=[e.createStaticVNode('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',13)])])):c.type==="16"?(e.openBlock(),e.createElementBlock("svg",de,[...o[10]||(o[10]=[e.createStaticVNode('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',16)])])):e.createCommentVNode("",!0)]))}}),R=(c,y)=>{const o=c.__vccOpts||c;for(const[S,u]of y)o[S]=u;return o},$=R(se,[["__scopeId","data-v-31e0404d"]]),he={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},we={class:"layout-buttons"},ue=["onClick","title","aria-label","aria-pressed"],pe={class:"layout-label"},ve={class:"video-grid-container",role:"region","aria-label":"视频网格"},ye=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],ke={class:"video-placeholder"},ge={class:"placeholder-number"},Se=.5,me="grabbing",fe="0.8",Ce=e.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(c,{emit:y}){const o=c,S=y,u=e.ref(o.layout);e.watch(()=>o.layout,t=>{u.value=t});const P=e.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:O()),v=e.shallowRef([]);function V(t){const r=Array.isArray(t)?t:o.videos||[],a=N.value,l={};v.value.forEach((n,w)=>{n&&n.id!==void 0&&(l[n.id]=n.__labelNumber??w+1)});const d=Array.from({length:a}).map((n,w)=>{const s=r[w];if(s){const i=l[s.id]??s.__labelNumber??w+1;return{...s,__labelNumber:i}}});v.value=d}e.watch(()=>o.videos,t=>{if(!Array.isArray(t)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}V(t)},{flush:"post"});let L=!1;e.watch(v,t=>{!L&&Array.isArray(t)&&S("videosChange",t)});const _=e.computed(()=>{const t=k[u.value];return t||(console.warn(`[VideoGridLayout] Invalid layout type: ${u.value}, fallback to '4'`),k[4])}),m=e.computed(()=>G(u.value)),N=e.computed(()=>{var t;return((t=_.value)==null?void 0:t.count)||4}),b=e.computed(()=>v.value.slice(0,N.value).map(t=>t).filter(Boolean));V(o.videos),e.watch(N,()=>{V(o.videos)});const T=e.computed(()=>{const t=m.value.map((r,a)=>({p:r,idx:a}));return t.sort((r,a)=>r.p.row===a.p.row?(r.p.col||0)-(a.p.col||0):(r.p.row||0)-(a.p.row||0)),t.map(r=>r.idx)}),p=e.ref(-1),f=e.ref(-1),B=e.shallowRef(null),h=e.shallowRef(null);let g={x:0,y:0},C=null,x=null;const Y=e.computed(()=>{const t=_.value;return{display:"grid",gridTemplateColumns:(t==null?void 0:t.colTemplate)||`repeat(${(t==null?void 0:t.cols)||2}, 1fr)`,gridTemplateRows:(t==null?void 0:t.rowTemplate)||`repeat(${(t==null?void 0:t.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),z=e.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function F(t){const r=t,a=T.value[r];if(Array.isArray(o.placeholders)&&o.placeholders[a]!==void 0)return String(o.placeholders[a]);if(typeof o.placeholderText=="function")try{return o.placeholderText(r)}catch{return String(r+1)}return o.placeholderText?String(o.placeholderText):String(r+1)}function U(t){const r=m.value[t];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function j(t){const r=m.value[t];return(r==null?void 0:r.isMain)||!1}function q(t){u.value=t,S("layoutChange",u.value)}function E(){if(B.value&&document.body.contains(B.value)){try{document.body.removeChild(B.value)}catch(t){console.warn("[VideoGridLayout] Failed to cleanup drag image:",t)}B.value=null}if(h.value&&document.body.contains(h.value)){try{document.body.removeChild(h.value)}catch{}h.value=null}C&&(document.removeEventListener("mousemove",C),C=null),x&&(document.removeEventListener("drag",x),x=null)}function H(t,r){if(r<0||r>=v.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(p.value=r,!t.dataTransfer)return;t.dataTransfer.effectAllowed="move";const l=t.target.closest(".video-item");if(l)try{E();const d=l.getBoundingClientRect();if(g={x:(t.clientX||0)-d.left,y:(t.clientY||0)-d.top},t.dataTransfer){t.dataTransfer.effectAllowed="move";const i=new Image;i.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",t.dataTransfer.setDragImage(i,0,0)}const n=l.cloneNode(!0);n.querySelectorAll(".progress-bar, .play-button").forEach(i=>i.remove()),n.querySelectorAll('[style*="transition"], [style*="animation"], .video-icon').forEach(i=>{try{i.style.transition="none",i.style.animation="none"}catch{}}),n.style.position="fixed",n.style.margin="0",n.style.pointerEvents="none",n.style.opacity=fe,n.style.zIndex="9999",document.body.appendChild(n),h.value=n;try{const i=l.getBoundingClientRect();n.style.width=`${i.width}px`,n.style.height=`${i.height}px`}catch{}C=i=>{if(!h.value)return;const A=i.clientX-g.x,D=i.clientY-g.y;h.value.style.left=`${A}px`,h.value.style.top=`${D}px`},document.addEventListener("mousemove",C),x=i=>{if(!h.value)return;const A=(i.clientX||0)-g.x,D=(i.clientY||0)-g.y;h.value.style.left=`${A}px`,h.value.style.top=`${D}px`},document.addEventListener("drag",x),l.style.opacity=String(Se),l.style.cursor=me,l.style.borderColor="#ff6b6b"}catch(d){console.error("[VideoGridLayout] Drag start error:",d),E()}}function X(t,r){t.preventDefault(),t.stopPropagation();const a=p.value;if(a===-1||a===r){p.value=-1;return}if(r<0||r>=m.value.length){console.warn("[VideoGridLayout] Invalid drop index:",r),p.value=-1;return}try{const l=t.currentTarget;l&&(l.style.backgroundColor="rgba(66, 184, 131, 0.3)",l.style.borderColor="#42b883",setTimeout(()=>{l.style.backgroundColor="",l.style.borderColor=""},200));const d=[...v.value],n=d[a],w=d[r];d[a]=w,d[r]=n,L=!0,v.value=d,setTimeout(()=>{L=!1,S("videosChange",v.value.filter(Boolean))},0)}catch(l){console.error("[VideoGridLayout] Drop error:",l)}finally{p.value=-1}}function Q(t,r){t.preventDefault(),p.value!==-1&&p.value!==r&&(f.value=r)}function J(t,r){t.preventDefault();const a=t.target,l=t.relatedTarget;a.contains(l)||f.value===r&&(f.value=-1)}function K(t){const a=t.target.closest(".video-item");a&&(a.style.opacity="1",a.style.cursor="move",a.style.borderColor=""),E(),p.value=-1,f.value=-1,g={x:0,y:0}}return e.onBeforeUnmount(()=>{E()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:e.normalizeStyle(z.value)},[c.showToolbar?(e.openBlock(),e.createElementBlock("div",he,[r[1]||(r[1]=e.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),e.createElementVNode("div",we,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(P.value,a=>{var l,d,n;return e.openBlock(),e.createElementBlock("button",{key:a,class:e.normalizeClass(["layout-btn",{active:u.value===a}]),onClick:w=>q(a),title:((l=e.unref(k)[a])==null?void 0:l.label)||"","aria-label":`切换到${((d=e.unref(k)[a])==null?void 0:d.label)||""}布局`,"aria-pressed":u.value===a,type:"button"},[e.createVNode($,{type:a},null,8,["type"]),e.createElementVNode("span",pe,e.toDisplayString(((n=e.unref(k)[a])==null?void 0:n.label)||""),1)],10,ue)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",ve,[e.createElementVNode("div",{class:"video-grid",style:e.normalizeStyle(Y.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,(a,l)=>{var d,n,w;return e.openBlock(),e.createElementBlock("div",{key:((d=b.value[l])==null?void 0:d.id)??l,class:e.normalizeClass(["video-item",{"main-video":j(l),dragging:p.value===l,"drag-over":f.value===l&&p.value!==l}]),style:e.normalizeStyle(U(l)),draggable:!0,"aria-label":`视频 ${l+1}: ${((n=b.value[l])==null?void 0:n.title)||((w=b.value[l])==null?void 0:w.id)||""}`,role:"article",tabindex:"0",onDragstart:s=>H(s,l),onDragover:r[0]||(r[0]=e.withModifiers(()=>{},["prevent"])),onDragenter:s=>Q(s,l),onDragleave:s=>J(s,l),onDrop:s=>X(s,l),onDragend:K},[e.renderSlot(t.$slots,"video",{video:b.value[l],index:l},()=>[e.createElementVNode("div",ke,[e.createElementVNode("div",ge,e.toDisplayString(F(T.value.indexOf(l))),1)])],!0)],46,ye)}),128))],4)])],4))}}),M=R(Ce,[["__scopeId","data-v-13a48217"]]),xe={VideoGridLayout:M,VideoLayoutIcon:$},be={install(c){Object.entries(xe).forEach(([y,o])=>{c.component(y,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=M;exports.VideoLayoutIcon=$;exports.default=be;exports.getAllLayoutTypes=O;exports.getLayoutPositions=G;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k={1:{type:"1",label:"1分屏",count:1,cols:1,rows:1},2:{type:"2",label:"2分屏",count:2,cols:2,rows:1},3:{type:"3",label:"3分屏",count:3,cols:2,rows:2},4:{type:"4",label:"4分屏",count:4,cols:2,rows:2},6:{type:"6",label:"6分屏",count:6,cols:3,rows:2},7:{type:"7",label:"7分屏",count:7,cols:4,rows:4},8:{type:"8",label:"8分屏",count:8,cols:4,rows:4},9:{type:"9",label:"9分屏",count:9,cols:3,rows:3},10:{type:"10",label:"10分屏",count:10,cols:6,rows:4},13:{type:"13",label:"13分屏",count:13,cols:4,rows:4},16:{type:"16",label:"16分屏",count:16,cols:4,rows:4}},B={};function L(n){if(B[n])return B[n];const o={1:[{col:1,colSpan:1,row:1,rowSpan:1}],2:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1}],3:[{col:1,colSpan:1,row:1,rowSpan:2,isMain:!0},{col:2,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],4:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],6:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1}],7:[{col:1,colSpan:2,row:1,rowSpan:2},{col:3,colSpan:2,row:1,rowSpan:2},{col:1,colSpan:2,row:3,rowSpan:2},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],8:[{col:1,colSpan:3,row:1,rowSpan:3,isMain:!0},{col:4,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],9:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1}],10:[{col:1,colSpan:5,row:1,rowSpan:3,isMain:!0},{col:6,colSpan:1,row:1,rowSpan:1},{col:6,colSpan:1,row:2,rowSpan:1},{col:6,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1},{col:5,colSpan:1,row:4,rowSpan:1},{col:6,colSpan:1,row:4,rowSpan:1}],13:[{col:1,colSpan:2,row:1,rowSpan:2,isMain:!0},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],16:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}]}[n]||[];return o.length>0&&(B[n]=o),o}function D(){return Object.keys(k)}const H={class:"layout-icon"},W={key:0,viewBox:"0 0 48 48",fill:"none"},q={key:1,viewBox:"0 0 48 48",fill:"none"},J={key:2,viewBox:"0 0 48 48",fill:"none"},K={key:3,viewBox:"0 0 48 48",fill:"none"},Q={key:4,viewBox:"0 0 48 48",fill:"none"},X={key:5,viewBox:"0 0 48 48",fill:"none"},Z={key:6,viewBox:"0 0 48 48",fill:"none"},ee={key:7,viewBox:"0 0 48 48",fill:"none"},te={key:8,viewBox:"0 0 54 48",fill:"none"},oe={key:9,viewBox:"0 0 48 48",fill:"none"},re={key:10,viewBox:"0 0 48 48",fill:"none"},ae=e.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,o)=>(e.openBlock(),e.createElementBlock("div",H,[n.type==="1"?(e.openBlock(),e.createElementBlock("svg",W,[...o[0]||(o[0]=[e.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(e.openBlock(),e.createElementBlock("svg",q,[...o[1]||(o[1]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(e.openBlock(),e.createElementBlock("svg",J,[...o[2]||(o[2]=[e.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),e.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(e.openBlock(),e.createElementBlock("svg",K,[...o[3]||(o[3]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(e.openBlock(),e.createElementBlock("svg",Q,[...o[4]||(o[4]=[e.createStaticVNode('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',6)])])):n.type==="7"?(e.openBlock(),e.createElementBlock("svg",X,[...o[5]||(o[5]=[e.createStaticVNode('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',7)])])):n.type==="8"?(e.openBlock(),e.createElementBlock("svg",Z,[...o[6]||(o[6]=[e.createStaticVNode('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',8)])])):n.type==="9"?(e.openBlock(),e.createElementBlock("svg",ee,[...o[7]||(o[7]=[e.createStaticVNode('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',9)])])):n.type==="10"?(e.openBlock(),e.createElementBlock("svg",te,[...o[8]||(o[8]=[e.createStaticVNode('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',10)])])):n.type==="13"?(e.openBlock(),e.createElementBlock("svg",oe,[...o[9]||(o[9]=[e.createStaticVNode('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',13)])])):n.type==="16"?(e.openBlock(),e.createElementBlock("svg",re,[...o[10]||(o[10]=[e.createStaticVNode('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',16)])])):e.createCommentVNode("",!0)]))}}),_=(n,p)=>{const o=n.__vccOpts||n;for(const[v,s]of p)o[v]=s;return o},E=_(ae,[["__scopeId","data-v-31e0404d"]]),le={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},ce={class:"layout-buttons"},ne=["onClick","title","aria-label","aria-pressed"],ie={class:"layout-label"},de={class:"video-grid-container",role:"region","aria-label":"视频网格"},se=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],he={class:"video-placeholder"},we={class:"placeholder-number"},ue=.5,pe="grabbing",ke="0.8",ve=e.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(n,{emit:p}){const o=n,v=p,s=e.ref(o.layout);e.watch(()=>o.layout,t=>{s.value=t});const $=e.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:D()),u=e.shallowRef([]);function f(t){const r=Array.isArray(t)?t:o.videos||[],l=b.value,a={};u.value.forEach((i,w)=>{i&&i.id!==void 0&&(a[i.id]=i.__labelNumber??w+1)});const c=Array.from({length:l}).map((i,w)=>{const d=r[w];if(d){const j=a[d.id]??d.__labelNumber??w+1;return{...d,__labelNumber:j}}});u.value=c}e.watch(()=>o.videos,t=>{if(!Array.isArray(t)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(t)},{flush:"post"});let x=!1;e.watch(u,t=>{!x&&Array.isArray(t)&&v("videosChange",t)});const V=e.computed(()=>{const t=k[s.value];return t||(console.warn(`[VideoGridLayout] Invalid layout type: ${s.value}, fallback to '4'`),k[4])}),y=e.computed(()=>L(s.value)),b=e.computed(()=>{var t;return((t=V.value)==null?void 0:t.count)||4}),C=e.computed(()=>u.value.slice(0,b.value).map(t=>t).filter(Boolean));f(o.videos),e.watch(b,()=>{f(o.videos)});const N=e.computed(()=>{const t=y.value.map((r,l)=>({p:r,idx:l}));return t.sort((r,l)=>r.p.row===l.p.row?(r.p.col||0)-(l.p.col||0):(r.p.row||0)-(l.p.row||0)),t.map(r=>r.idx)}),h=e.ref(-1),S=e.ref(-1),g=e.shallowRef(null),A=e.computed(()=>{const t=V.value;return{display:"grid",gridTemplateColumns:(t==null?void 0:t.colTemplate)||`repeat(${(t==null?void 0:t.cols)||2}, 1fr)`,gridTemplateRows:(t==null?void 0:t.rowTemplate)||`repeat(${(t==null?void 0:t.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),T=e.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function G(t){const r=t,l=N.value[r];if(Array.isArray(o.placeholders)&&o.placeholders[l]!==void 0)return String(o.placeholders[l]);if(typeof o.placeholderText=="function")try{return o.placeholderText(r)}catch{return String(r+1)}return o.placeholderText?String(o.placeholderText):String(r+1)}function O(t){const r=y.value[t];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function M(t){const r=y.value[t];return(r==null?void 0:r.isMain)||!1}function R(t){s.value=t,v("layoutChange",s.value)}function m(){if(g.value&&document.body.contains(g.value)){try{document.body.removeChild(g.value)}catch(t){console.warn("[VideoGridLayout] Failed to cleanup drag image:",t)}g.value=null}}function P(t,r){if(r<0||r>=u.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(h.value=r,!t.dataTransfer)return;t.dataTransfer.effectAllowed="move";const a=t.target.closest(".video-item");if(a)try{m();const c=a.cloneNode(!0);c.style.width=`${a.offsetWidth}px`,c.style.height=`${a.offsetHeight}px`,c.style.opacity=ke,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),g.value=c,t.dataTransfer.setDragImage(c,a.offsetWidth/2,a.offsetHeight/2),setTimeout(()=>{m()},100),a.style.opacity=String(ue),a.style.cursor=pe}catch(c){console.error("[VideoGridLayout] Drag start error:",c),m()}}function F(t,r){t.preventDefault(),t.stopPropagation();const l=h.value;if(l===-1||l===r){h.value=-1;return}if(r<0||r>=y.value.length){console.warn("[VideoGridLayout] Invalid drop index:",r),h.value=-1;return}try{const a=t.currentTarget;a&&(a.style.backgroundColor="rgba(66, 184, 131, 0.3)",a.style.borderColor="#42b883",setTimeout(()=>{a.style.backgroundColor="",a.style.borderColor=""},200));const c=[...u.value],i=c[l],w=c[r];c[l]=w,c[r]=i,x=!0,u.value=c,setTimeout(()=>{x=!1,v("videosChange",u.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{h.value=-1}}function z(t,r){t.preventDefault(),h.value!==-1&&h.value!==r&&(S.value=r)}function U(t,r){t.preventDefault();const l=t.target,a=t.relatedTarget;l.contains(a)||S.value===r&&(S.value=-1)}function Y(t){const l=t.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),m(),h.value=-1,S.value=-1}return e.onBeforeUnmount(()=>{m()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:e.normalizeStyle(T.value)},[n.showToolbar?(e.openBlock(),e.createElementBlock("div",le,[r[1]||(r[1]=e.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),e.createElementVNode("div",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList($.value,l=>{var a,c,i;return e.openBlock(),e.createElementBlock("button",{key:l,class:e.normalizeClass(["layout-btn",{active:s.value===l}]),onClick:w=>R(l),title:((a=e.unref(k)[l])==null?void 0:a.label)||"","aria-label":`切换到${((c=e.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":s.value===l,type:"button"},[e.createVNode(E,{type:l},null,8,["type"]),e.createElementVNode("span",ie,e.toDisplayString(((i=e.unref(k)[l])==null?void 0:i.label)||""),1)],10,ne)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",de,[e.createElementVNode("div",{class:"video-grid",style:e.normalizeStyle(A.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(l,a)=>{var c,i,w;return e.openBlock(),e.createElementBlock("div",{key:((c=C.value[a])==null?void 0:c.id)??a,class:e.normalizeClass(["video-item",{"main-video":M(a),dragging:h.value===a,"drag-over":S.value===a&&h.value!==a}]),style:e.normalizeStyle(O(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((i=C.value[a])==null?void 0:i.title)||((w=C.value[a])==null?void 0:w.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>P(d,a),onDragover:r[0]||(r[0]=e.withModifiers(()=>{},["prevent"])),onDragenter:d=>z(d,a),onDragleave:d=>U(d,a),onDrop:d=>F(d,a),onDragend:Y},[e.renderSlot(t.$slots,"video",{video:C.value[a],index:a},()=>[e.createElementVNode("div",he,[e.createElementVNode("div",we,e.toDisplayString(G(N.value.indexOf(a))),1)])],!0)],46,se)}),128))],4)])],4))}}),I=_(ve,[["__scopeId","data-v-1b7d75db"]]),ye={VideoGridLayout:I,VideoLayoutIcon:E},Se={install(n){Object.entries(ye).forEach(([p,o])=>{n.component(p,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=I;exports.VideoLayoutIcon=E;exports.default=Se;exports.getAllLayoutTypes=D;exports.getLayoutPositions=L;
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { defineComponent as q, createElementBlock as s, openBlock as d, createCommentVNode as Q, createElementVNode as h, createStaticVNode as C, ref as R, watch as E, computed as k, shallowRef as M, onBeforeUnmount as dt, normalizeStyle as N, Fragment as z, renderList as H, unref as P, normalizeClass as X, createVNode as ht, toDisplayString as j, withModifiers as wt, renderSlot as ut } from "vue";
2
- const x = {
1
+ import { defineComponent as F, createElementBlock as c, openBlock as i, createCommentVNode as U, createElementVNode as d, createStaticVNode as g, ref as A, watch as L, computed as y, shallowRef as E, onBeforeUnmount as at, normalizeStyle as B, Fragment as N, renderList as M, unref as V, normalizeClass as R, createVNode as lt, toDisplayString as P, withModifiers as nt, renderSlot as ct } from "vue";
2
+ const S = {
3
3
  1: {
4
4
  type: "1",
5
5
  label: "1分屏",
@@ -77,11 +77,11 @@ const x = {
77
77
  cols: 4,
78
78
  rows: 4
79
79
  }
80
- }, Y = {};
81
- function pt(n) {
82
- if (Y[n])
83
- return Y[n];
84
- const e = {
80
+ }, T = {};
81
+ function it(n) {
82
+ if (T[n])
83
+ return T[n];
84
+ const o = {
85
85
  1: [
86
86
  { col: 1, colSpan: 1, row: 1, rowSpan: 1 }
87
87
  ],
@@ -184,64 +184,64 @@ function pt(n) {
184
184
  { col: 4, colSpan: 1, row: 4, rowSpan: 1 }
185
185
  ]
186
186
  }[n] || [];
187
- return e.length > 0 && (Y[n] = e), e;
187
+ return o.length > 0 && (T[n] = o), o;
188
188
  }
189
- function vt() {
190
- return Object.keys(x);
189
+ function dt() {
190
+ return Object.keys(S);
191
191
  }
192
- const yt = { class: "layout-icon" }, gt = {
192
+ const st = { class: "layout-icon" }, ht = {
193
193
  key: 0,
194
194
  viewBox: "0 0 48 48",
195
195
  fill: "none"
196
- }, kt = {
196
+ }, wt = {
197
197
  key: 1,
198
198
  viewBox: "0 0 48 48",
199
199
  fill: "none"
200
- }, St = {
200
+ }, ut = {
201
201
  key: 2,
202
202
  viewBox: "0 0 48 48",
203
203
  fill: "none"
204
- }, Ct = {
204
+ }, pt = {
205
205
  key: 3,
206
206
  viewBox: "0 0 48 48",
207
207
  fill: "none"
208
- }, ft = {
208
+ }, vt = {
209
209
  key: 4,
210
210
  viewBox: "0 0 48 48",
211
211
  fill: "none"
212
- }, xt = {
212
+ }, yt = {
213
213
  key: 5,
214
214
  viewBox: "0 0 48 48",
215
215
  fill: "none"
216
- }, mt = {
216
+ }, kt = {
217
217
  key: 6,
218
218
  viewBox: "0 0 48 48",
219
219
  fill: "none"
220
- }, bt = {
220
+ }, gt = {
221
221
  key: 7,
222
222
  viewBox: "0 0 48 48",
223
223
  fill: "none"
224
- }, At = {
224
+ }, St = {
225
225
  key: 8,
226
226
  viewBox: "0 0 54 48",
227
227
  fill: "none"
228
- }, Lt = {
228
+ }, Ct = {
229
229
  key: 9,
230
230
  viewBox: "0 0 48 48",
231
231
  fill: "none"
232
- }, Dt = {
232
+ }, ft = {
233
233
  key: 10,
234
234
  viewBox: "0 0 48 48",
235
235
  fill: "none"
236
- }, $t = /* @__PURE__ */ q({
236
+ }, xt = /* @__PURE__ */ F({
237
237
  __name: "VideoLayoutIcon",
238
238
  props: {
239
239
  type: {}
240
240
  },
241
241
  setup(n) {
242
- return (S, e) => (d(), s("div", yt, [
243
- n.type === "1" ? (d(), s("svg", gt, [...e[0] || (e[0] = [
244
- h("rect", {
242
+ return (k, o) => (i(), c("div", st, [
243
+ n.type === "1" ? (i(), c("svg", ht, [...o[0] || (o[0] = [
244
+ d("rect", {
245
245
  x: "4",
246
246
  y: "4",
247
247
  width: "40",
@@ -249,8 +249,8 @@ const yt = { class: "layout-icon" }, gt = {
249
249
  stroke: "currentColor",
250
250
  "stroke-width": "2"
251
251
  }, null, -1)
252
- ])])) : n.type === "2" ? (d(), s("svg", kt, [...e[1] || (e[1] = [
253
- h("rect", {
252
+ ])])) : n.type === "2" ? (i(), c("svg", wt, [...o[1] || (o[1] = [
253
+ d("rect", {
254
254
  x: "4",
255
255
  y: "4",
256
256
  width: "19",
@@ -258,7 +258,7 @@ const yt = { class: "layout-icon" }, gt = {
258
258
  stroke: "currentColor",
259
259
  "stroke-width": "1.5"
260
260
  }, null, -1),
261
- h("rect", {
261
+ d("rect", {
262
262
  x: "25",
263
263
  y: "4",
264
264
  width: "19",
@@ -266,8 +266,8 @@ const yt = { class: "layout-icon" }, gt = {
266
266
  stroke: "currentColor",
267
267
  "stroke-width": "1.5"
268
268
  }, null, -1)
269
- ])])) : n.type === "3" ? (d(), s("svg", St, [...e[2] || (e[2] = [
270
- h("rect", {
269
+ ])])) : n.type === "3" ? (i(), c("svg", ut, [...o[2] || (o[2] = [
270
+ d("rect", {
271
271
  x: "4",
272
272
  y: "4",
273
273
  width: "20",
@@ -275,7 +275,7 @@ const yt = { class: "layout-icon" }, gt = {
275
275
  stroke: "currentColor",
276
276
  "stroke-width": "2"
277
277
  }, null, -1),
278
- h("rect", {
278
+ d("rect", {
279
279
  x: "26",
280
280
  y: "4",
281
281
  width: "18",
@@ -283,7 +283,7 @@ const yt = { class: "layout-icon" }, gt = {
283
283
  stroke: "currentColor",
284
284
  "stroke-width": "1.5"
285
285
  }, null, -1),
286
- h("rect", {
286
+ d("rect", {
287
287
  x: "26",
288
288
  y: "25",
289
289
  width: "18",
@@ -291,8 +291,8 @@ const yt = { class: "layout-icon" }, gt = {
291
291
  stroke: "currentColor",
292
292
  "stroke-width": "1.5"
293
293
  }, null, -1)
294
- ])])) : n.type === "4" ? (d(), s("svg", Ct, [...e[3] || (e[3] = [
295
- h("rect", {
294
+ ])])) : n.type === "4" ? (i(), c("svg", pt, [...o[3] || (o[3] = [
295
+ d("rect", {
296
296
  x: "4",
297
297
  y: "4",
298
298
  width: "19",
@@ -300,7 +300,7 @@ const yt = { class: "layout-icon" }, gt = {
300
300
  stroke: "currentColor",
301
301
  "stroke-width": "1.5"
302
302
  }, null, -1),
303
- h("rect", {
303
+ d("rect", {
304
304
  x: "25",
305
305
  y: "4",
306
306
  width: "19",
@@ -308,7 +308,7 @@ const yt = { class: "layout-icon" }, gt = {
308
308
  stroke: "currentColor",
309
309
  "stroke-width": "1.5"
310
310
  }, null, -1),
311
- h("rect", {
311
+ d("rect", {
312
312
  x: "4",
313
313
  y: "25",
314
314
  width: "19",
@@ -316,7 +316,7 @@ const yt = { class: "layout-icon" }, gt = {
316
316
  stroke: "currentColor",
317
317
  "stroke-width": "1.5"
318
318
  }, null, -1),
319
- h("rect", {
319
+ d("rect", {
320
320
  x: "25",
321
321
  y: "25",
322
322
  width: "19",
@@ -324,38 +324,38 @@ const yt = { class: "layout-icon" }, gt = {
324
324
  stroke: "currentColor",
325
325
  "stroke-width": "1.5"
326
326
  }, null, -1)
327
- ])])) : n.type === "6" ? (d(), s("svg", ft, [...e[4] || (e[4] = [
328
- C('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 6)
329
- ])])) : n.type === "7" ? (d(), s("svg", xt, [...e[5] || (e[5] = [
330
- C('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 7)
331
- ])])) : n.type === "8" ? (d(), s("svg", mt, [...e[6] || (e[6] = [
332
- C('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 8)
333
- ])])) : n.type === "9" ? (d(), s("svg", bt, [...e[7] || (e[7] = [
334
- C('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 9)
335
- ])])) : n.type === "10" ? (d(), s("svg", At, [...e[8] || (e[8] = [
336
- C('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 10)
337
- ])])) : n.type === "13" ? (d(), s("svg", Lt, [...e[9] || (e[9] = [
338
- C('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 13)
339
- ])])) : n.type === "16" ? (d(), s("svg", Dt, [...e[10] || (e[10] = [
340
- C('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 16)
341
- ])])) : Q("", !0)
327
+ ])])) : n.type === "6" ? (i(), c("svg", vt, [...o[4] || (o[4] = [
328
+ g('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 6)
329
+ ])])) : n.type === "7" ? (i(), c("svg", yt, [...o[5] || (o[5] = [
330
+ g('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 7)
331
+ ])])) : n.type === "8" ? (i(), c("svg", kt, [...o[6] || (o[6] = [
332
+ g('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 8)
333
+ ])])) : n.type === "9" ? (i(), c("svg", gt, [...o[7] || (o[7] = [
334
+ g('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 9)
335
+ ])])) : n.type === "10" ? (i(), c("svg", St, [...o[8] || (o[8] = [
336
+ g('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 10)
337
+ ])])) : n.type === "13" ? (i(), c("svg", Ct, [...o[9] || (o[9] = [
338
+ g('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 13)
339
+ ])])) : n.type === "16" ? (i(), c("svg", ft, [...o[10] || (o[10] = [
340
+ g('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 16)
341
+ ])])) : U("", !0)
342
342
  ]));
343
343
  }
344
- }), J = (n, S) => {
345
- const e = n.__vccOpts || n;
346
- for (const [m, v] of S)
347
- e[m] = v;
348
- return e;
349
- }, K = /* @__PURE__ */ J($t, [["__scopeId", "data-v-31e0404d"]]), Bt = {
344
+ }), Y = (n, k) => {
345
+ const o = n.__vccOpts || n;
346
+ for (const [C, w] of k)
347
+ o[C] = w;
348
+ return o;
349
+ }, j = /* @__PURE__ */ Y(xt, [["__scopeId", "data-v-31e0404d"]]), mt = {
350
350
  key: 0,
351
351
  class: "layout-toolbar",
352
352
  role: "toolbar",
353
353
  "aria-label": "布局切换工具栏"
354
- }, It = { class: "layout-buttons" }, _t = ["onClick", "title", "aria-label", "aria-pressed"], Et = { class: "layout-label" }, Vt = {
354
+ }, bt = { class: "layout-buttons" }, Dt = ["onClick", "title", "aria-label", "aria-pressed"], Lt = { class: "layout-label" }, _t = {
355
355
  class: "video-grid-container",
356
356
  role: "region",
357
357
  "aria-label": "视频网格"
358
- }, Tt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], Gt = { class: "video-placeholder" }, Ot = { class: "placeholder-number" }, Rt = 0.5, Mt = "grabbing", Nt = "0.8", Pt = /* @__PURE__ */ q({
358
+ }, $t = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], It = { class: "video-placeholder" }, At = { class: "placeholder-number" }, Bt = 0.5, Vt = "grabbing", Tt = "0.8", Gt = /* @__PURE__ */ F({
359
359
  __name: "VideoGridLayout",
360
360
  props: {
361
361
  videos: {},
@@ -368,164 +368,128 @@ const yt = { class: "layout-icon" }, gt = {
368
368
  placeholders: {}
369
369
  },
370
370
  emits: ["layoutChange", "videosChange"],
371
- setup(n, { emit: S }) {
372
- const e = n, m = S, v = R(e.layout);
373
- E(() => e.layout, (t) => {
374
- v.value = t;
371
+ setup(n, { emit: k }) {
372
+ const o = n, C = k, w = A(o.layout);
373
+ L(() => o.layout, (t) => {
374
+ w.value = t;
375
375
  });
376
- const W = k(() => e.availableLayouts && e.availableLayouts.length > 0 ? e.availableLayouts : vt()), g = M([]);
377
- function V(t) {
378
- const o = Array.isArray(t) ? t : e.videos || [], a = G.value, r = {};
379
- g.value.forEach((l, p) => {
380
- l && l.id !== void 0 && (r[l.id] = l.__labelNumber ?? p + 1);
376
+ const z = y(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : dt()), v = E([]);
377
+ function _(t) {
378
+ const e = Array.isArray(t) ? t : o.videos || [], a = I.value, r = {};
379
+ v.value.forEach((s, p) => {
380
+ s && s.id !== void 0 && (r[s.id] = s.__labelNumber ?? p + 1);
381
381
  });
382
- const i = Array.from({ length: a }).map((l, p) => {
383
- const w = o[p];
384
- if (w) {
385
- const c = r[w.id] ?? w.__labelNumber ?? p + 1;
386
- return { ...w, __labelNumber: c };
382
+ const l = Array.from({ length: a }).map((s, p) => {
383
+ const h = e[p];
384
+ if (h) {
385
+ const rt = r[h.id] ?? h.__labelNumber ?? p + 1;
386
+ return { ...h, __labelNumber: rt };
387
387
  }
388
388
  });
389
- g.value = i;
389
+ v.value = l;
390
390
  }
391
- E(() => e.videos, (t) => {
391
+ L(() => o.videos, (t) => {
392
392
  if (!Array.isArray(t)) {
393
393
  console.warn("[VideoGridLayout] Invalid videos prop, expected array");
394
394
  return;
395
395
  }
396
- V(t);
396
+ _(t);
397
397
  }, { flush: "post" });
398
- let T = !1;
399
- E(g, (t) => {
400
- !T && Array.isArray(t) && m("videosChange", t);
398
+ let $ = !1;
399
+ L(v, (t) => {
400
+ !$ && Array.isArray(t) && C("videosChange", t);
401
401
  });
402
- const F = k(() => {
403
- const t = x[v.value];
404
- return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${v.value}, fallback to '4'`), x[4]);
405
- }), b = k(() => pt(v.value)), G = k(() => {
402
+ const G = y(() => {
403
+ const t = S[w.value];
404
+ return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${w.value}, fallback to '4'`), S[4]);
405
+ }), f = y(() => it(w.value)), I = y(() => {
406
406
  var t;
407
- return ((t = F.value) == null ? void 0 : t.count) || 4;
408
- }), $ = k(() => g.value.slice(0, G.value).map((t) => t).filter(Boolean));
409
- V(e.videos), E(G, () => {
410
- V(e.videos);
407
+ return ((t = G.value) == null ? void 0 : t.count) || 4;
408
+ }), D = y(() => v.value.slice(0, I.value).map((t) => t).filter(Boolean));
409
+ _(o.videos), L(I, () => {
410
+ _(o.videos);
411
411
  });
412
- const U = k(() => {
413
- const t = b.value.map((o, a) => ({ p: o, idx: a }));
414
- return t.sort((o, a) => o.p.row === a.p.row ? (o.p.col || 0) - (a.p.col || 0) : (o.p.row || 0) - (a.p.row || 0)), t.map((o) => o.idx);
415
- }), y = R(-1), A = R(-1), B = M(null), u = M(null);
416
- let f = { x: 0, y: 0 }, L = null, D = null;
417
- const Z = k(() => {
418
- const t = F.value;
412
+ const O = y(() => {
413
+ const t = f.value.map((e, a) => ({ p: e, idx: a }));
414
+ return t.sort((e, a) => e.p.row === a.p.row ? (e.p.col || 0) - (a.p.col || 0) : (e.p.row || 0) - (a.p.row || 0)), t.map((e) => e.idx);
415
+ }), u = A(-1), x = A(-1), m = E(null), H = y(() => {
416
+ const t = G.value;
419
417
  return {
420
418
  display: "grid",
421
419
  gridTemplateColumns: (t == null ? void 0 : t.colTemplate) || `repeat(${(t == null ? void 0 : t.cols) || 2}, 1fr)`,
422
420
  gridTemplateRows: (t == null ? void 0 : t.rowTemplate) || `repeat(${(t == null ? void 0 : t.rows) || 2}, 1fr)`,
423
421
  gap: "4px",
424
- width: e.width || "100%",
425
- height: e.height || "100%"
422
+ width: o.width || "100%",
423
+ height: o.height || "100%"
426
424
  };
427
- }), tt = k(() => ({
428
- width: e.width || "100%",
429
- height: e.height || "100%"
425
+ }), W = y(() => ({
426
+ width: o.width || "100%",
427
+ height: o.height || "100%"
430
428
  }));
431
- function et(t) {
432
- const o = t, a = U.value[o];
433
- if (Array.isArray(e.placeholders) && e.placeholders[a] !== void 0)
434
- return String(e.placeholders[a]);
435
- if (typeof e.placeholderText == "function")
429
+ function q(t) {
430
+ const e = t, a = O.value[e];
431
+ if (Array.isArray(o.placeholders) && o.placeholders[a] !== void 0)
432
+ return String(o.placeholders[a]);
433
+ if (typeof o.placeholderText == "function")
436
434
  try {
437
- return e.placeholderText(o);
435
+ return o.placeholderText(e);
438
436
  } catch {
439
- return String(o + 1);
437
+ return String(e + 1);
440
438
  }
441
- return e.placeholderText ? String(e.placeholderText) : String(o + 1);
439
+ return o.placeholderText ? String(o.placeholderText) : String(e + 1);
442
440
  }
443
- function ot(t) {
444
- const o = b.value[t];
445
- return !o || typeof o.col != "number" || typeof o.row != "number" ? {} : {
446
- gridColumn: `${o.col} / span ${o.colSpan}`,
447
- gridRow: `${o.row} / span ${o.rowSpan}`
441
+ function J(t) {
442
+ const e = f.value[t];
443
+ return !e || typeof e.col != "number" || typeof e.row != "number" ? {} : {
444
+ gridColumn: `${e.col} / span ${e.colSpan}`,
445
+ gridRow: `${e.row} / span ${e.rowSpan}`
448
446
  };
449
447
  }
450
- function rt(t) {
451
- const o = b.value[t];
452
- return (o == null ? void 0 : o.isMain) || !1;
448
+ function K(t) {
449
+ const e = f.value[t];
450
+ return (e == null ? void 0 : e.isMain) || !1;
453
451
  }
454
- function at(t) {
455
- v.value = t, m("layoutChange", v.value);
452
+ function Q(t) {
453
+ w.value = t, C("layoutChange", w.value);
456
454
  }
457
- function I() {
458
- if (B.value && document.body.contains(B.value)) {
455
+ function b() {
456
+ if (m.value && document.body.contains(m.value)) {
459
457
  try {
460
- document.body.removeChild(B.value);
458
+ document.body.removeChild(m.value);
461
459
  } catch (t) {
462
460
  console.warn("[VideoGridLayout] Failed to cleanup drag image:", t);
463
461
  }
464
- B.value = null;
462
+ m.value = null;
465
463
  }
466
- if (u.value && document.body.contains(u.value)) {
467
- try {
468
- document.body.removeChild(u.value);
469
- } catch {
470
- }
471
- u.value = null;
472
- }
473
- L && (document.removeEventListener("mousemove", L), L = null), D && (document.removeEventListener("drag", D), D = null);
474
464
  }
475
- function lt(t, o) {
476
- if (o < 0 || o >= g.value.length) {
477
- console.warn("[VideoGridLayout] Invalid drag index:", o);
465
+ function X(t, e) {
466
+ if (e < 0 || e >= v.value.length) {
467
+ console.warn("[VideoGridLayout] Invalid drag index:", e);
478
468
  return;
479
469
  }
480
- if (y.value = o, !t.dataTransfer) return;
470
+ if (u.value = e, !t.dataTransfer) return;
481
471
  t.dataTransfer.effectAllowed = "move";
482
472
  const r = t.target.closest(".video-item");
483
473
  if (r)
484
474
  try {
485
- I();
486
- const i = r.getBoundingClientRect();
487
- if (f = {
488
- x: (t.clientX || 0) - i.left,
489
- y: (t.clientY || 0) - i.top
490
- }, t.dataTransfer) {
491
- t.dataTransfer.effectAllowed = "move";
492
- const c = new Image();
493
- c.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", t.dataTransfer.setDragImage(c, 0, 0);
494
- }
475
+ b();
495
476
  const l = r.cloneNode(!0);
496
- l.querySelectorAll(".progress-bar, .play-button").forEach((c) => c.remove()), l.querySelectorAll('[style*="transition"], [style*="animation"], .video-icon').forEach((c) => {
497
- try {
498
- c.style.transition = "none", c.style.animation = "none";
499
- } catch {
500
- }
501
- }), l.style.position = "fixed", l.style.margin = "0", l.style.pointerEvents = "none", l.style.opacity = Nt, l.style.zIndex = "9999", document.body.appendChild(l), u.value = l;
502
- try {
503
- const c = r.getBoundingClientRect();
504
- l.style.width = `${c.width}px`, l.style.height = `${c.height}px`;
505
- } catch {
506
- }
507
- L = (c) => {
508
- if (!u.value) return;
509
- const _ = c.clientX - f.x, O = c.clientY - f.y;
510
- u.value.style.left = `${_}px`, u.value.style.top = `${O}px`;
511
- }, document.addEventListener("mousemove", L), D = (c) => {
512
- if (!u.value) return;
513
- const _ = (c.clientX || 0) - f.x, O = (c.clientY || 0) - f.y;
514
- u.value.style.left = `${_}px`, u.value.style.top = `${O}px`;
515
- }, document.addEventListener("drag", D), r.style.opacity = String(Rt), r.style.cursor = Mt, r.style.borderColor = "#ff6b6b";
516
- } catch (i) {
517
- console.error("[VideoGridLayout] Drag start error:", i), I();
477
+ l.style.width = `${r.offsetWidth}px`, l.style.height = `${r.offsetHeight}px`, l.style.opacity = Tt, l.style.position = "absolute", l.style.top = "-9999px", l.style.pointerEvents = "none", document.body.appendChild(l), m.value = l, t.dataTransfer.setDragImage(l, r.offsetWidth / 2, r.offsetHeight / 2), setTimeout(() => {
478
+ b();
479
+ }, 100), r.style.opacity = String(Bt), r.style.cursor = Vt;
480
+ } catch (l) {
481
+ console.error("[VideoGridLayout] Drag start error:", l), b();
518
482
  }
519
483
  }
520
- function nt(t, o) {
484
+ function Z(t, e) {
521
485
  t.preventDefault(), t.stopPropagation();
522
- const a = y.value;
523
- if (a === -1 || a === o) {
524
- y.value = -1;
486
+ const a = u.value;
487
+ if (a === -1 || a === e) {
488
+ u.value = -1;
525
489
  return;
526
490
  }
527
- if (o < 0 || o >= b.value.length) {
528
- console.warn("[VideoGridLayout] Invalid drop index:", o), y.value = -1;
491
+ if (e < 0 || e >= f.value.length) {
492
+ console.warn("[VideoGridLayout] Invalid drop index:", e), u.value = -1;
529
493
  return;
530
494
  }
531
495
  try {
@@ -533,112 +497,112 @@ const yt = { class: "layout-icon" }, gt = {
533
497
  r && (r.style.backgroundColor = "rgba(66, 184, 131, 0.3)", r.style.borderColor = "#42b883", setTimeout(() => {
534
498
  r.style.backgroundColor = "", r.style.borderColor = "";
535
499
  }, 200));
536
- const i = [...g.value], l = i[a], p = i[o];
537
- i[a] = p, i[o] = l, T = !0, g.value = i, setTimeout(() => {
538
- T = !1, m("videosChange", g.value.filter(Boolean));
500
+ const l = [...v.value], s = l[a], p = l[e];
501
+ l[a] = p, l[e] = s, $ = !0, v.value = l, setTimeout(() => {
502
+ $ = !1, C("videosChange", v.value.filter(Boolean));
539
503
  }, 0);
540
504
  } catch (r) {
541
505
  console.error("[VideoGridLayout] Drop error:", r);
542
506
  } finally {
543
- y.value = -1;
507
+ u.value = -1;
544
508
  }
545
509
  }
546
- function ct(t, o) {
547
- t.preventDefault(), y.value !== -1 && y.value !== o && (A.value = o);
510
+ function tt(t, e) {
511
+ t.preventDefault(), u.value !== -1 && u.value !== e && (x.value = e);
548
512
  }
549
- function it(t, o) {
513
+ function ot(t, e) {
550
514
  t.preventDefault();
551
515
  const a = t.target, r = t.relatedTarget;
552
- a.contains(r) || A.value === o && (A.value = -1);
516
+ a.contains(r) || x.value === e && (x.value = -1);
553
517
  }
554
- function st(t) {
518
+ function et(t) {
555
519
  const a = t.target.closest(".video-item");
556
- a && (a.style.opacity = "1", a.style.cursor = "move", a.style.borderColor = ""), I(), y.value = -1, A.value = -1, f = { x: 0, y: 0 };
520
+ a && (a.style.opacity = "1", a.style.cursor = "move"), b(), u.value = -1, x.value = -1;
557
521
  }
558
- return dt(() => {
559
- I();
560
- }), (t, o) => (d(), s("div", {
522
+ return at(() => {
523
+ b();
524
+ }), (t, e) => (i(), c("div", {
561
525
  class: "video-grid-layout",
562
526
  role: "application",
563
527
  "aria-label": "视频分屏布局",
564
- style: N(tt.value)
528
+ style: B(W.value)
565
529
  }, [
566
- n.showToolbar ? (d(), s("div", Bt, [
567
- o[1] || (o[1] = h("div", { class: "toolbar-title" }, "分屏布局", -1)),
568
- h("div", It, [
569
- (d(!0), s(z, null, H(W.value, (a) => {
570
- var r, i, l;
571
- return d(), s("button", {
530
+ n.showToolbar ? (i(), c("div", mt, [
531
+ e[1] || (e[1] = d("div", { class: "toolbar-title" }, "分屏布局", -1)),
532
+ d("div", bt, [
533
+ (i(!0), c(N, null, M(z.value, (a) => {
534
+ var r, l, s;
535
+ return i(), c("button", {
572
536
  key: a,
573
- class: X(["layout-btn", { active: v.value === a }]),
574
- onClick: (p) => at(a),
575
- title: ((r = P(x)[a]) == null ? void 0 : r.label) || "",
576
- "aria-label": `切换到${((i = P(x)[a]) == null ? void 0 : i.label) || ""}布局`,
577
- "aria-pressed": v.value === a,
537
+ class: R(["layout-btn", { active: w.value === a }]),
538
+ onClick: (p) => Q(a),
539
+ title: ((r = V(S)[a]) == null ? void 0 : r.label) || "",
540
+ "aria-label": `切换到${((l = V(S)[a]) == null ? void 0 : l.label) || ""}布局`,
541
+ "aria-pressed": w.value === a,
578
542
  type: "button"
579
543
  }, [
580
- ht(K, { type: a }, null, 8, ["type"]),
581
- h("span", Et, j(((l = P(x)[a]) == null ? void 0 : l.label) || ""), 1)
582
- ], 10, _t);
544
+ lt(j, { type: a }, null, 8, ["type"]),
545
+ d("span", Lt, P(((s = V(S)[a]) == null ? void 0 : s.label) || ""), 1)
546
+ ], 10, Dt);
583
547
  }), 128))
584
548
  ])
585
- ])) : Q("", !0),
586
- h("div", Vt, [
587
- h("div", {
549
+ ])) : U("", !0),
550
+ d("div", _t, [
551
+ d("div", {
588
552
  class: "video-grid",
589
- style: N(Z.value)
553
+ style: B(H.value)
590
554
  }, [
591
- (d(!0), s(z, null, H(b.value, (a, r) => {
592
- var i, l, p;
593
- return d(), s("div", {
594
- key: ((i = $.value[r]) == null ? void 0 : i.id) ?? r,
595
- class: X(["video-item", {
596
- "main-video": rt(r),
597
- dragging: y.value === r,
598
- "drag-over": A.value === r && y.value !== r
555
+ (i(!0), c(N, null, M(f.value, (a, r) => {
556
+ var l, s, p;
557
+ return i(), c("div", {
558
+ key: ((l = D.value[r]) == null ? void 0 : l.id) ?? r,
559
+ class: R(["video-item", {
560
+ "main-video": K(r),
561
+ dragging: u.value === r,
562
+ "drag-over": x.value === r && u.value !== r
599
563
  }]),
600
- style: N(ot(r)),
564
+ style: B(J(r)),
601
565
  draggable: !0,
602
- "aria-label": `视频 ${r + 1}: ${((l = $.value[r]) == null ? void 0 : l.title) || ((p = $.value[r]) == null ? void 0 : p.id) || ""}`,
566
+ "aria-label": `视频 ${r + 1}: ${((s = D.value[r]) == null ? void 0 : s.title) || ((p = D.value[r]) == null ? void 0 : p.id) || ""}`,
603
567
  role: "article",
604
568
  tabindex: "0",
605
- onDragstart: (w) => lt(w, r),
606
- onDragover: o[0] || (o[0] = wt(() => {
569
+ onDragstart: (h) => X(h, r),
570
+ onDragover: e[0] || (e[0] = nt(() => {
607
571
  }, ["prevent"])),
608
- onDragenter: (w) => ct(w, r),
609
- onDragleave: (w) => it(w, r),
610
- onDrop: (w) => nt(w, r),
611
- onDragend: st
572
+ onDragenter: (h) => tt(h, r),
573
+ onDragleave: (h) => ot(h, r),
574
+ onDrop: (h) => Z(h, r),
575
+ onDragend: et
612
576
  }, [
613
- ut(t.$slots, "video", {
614
- video: $.value[r],
577
+ ct(t.$slots, "video", {
578
+ video: D.value[r],
615
579
  index: r
616
580
  }, () => [
617
- h("div", Gt, [
618
- h("div", Ot, j(et(U.value.indexOf(r))), 1)
581
+ d("div", It, [
582
+ d("div", At, P(q(O.value.indexOf(r))), 1)
619
583
  ])
620
584
  ], !0)
621
- ], 46, Tt);
585
+ ], 46, $t);
622
586
  }), 128))
623
587
  ], 4)
624
588
  ])
625
589
  ], 4));
626
590
  }
627
- }), Yt = /* @__PURE__ */ J(Pt, [["__scopeId", "data-v-13a48217"]]), Ft = {
628
- VideoGridLayout: Yt,
629
- VideoLayoutIcon: K
630
- }, zt = {
591
+ }), Ot = /* @__PURE__ */ Y(Gt, [["__scopeId", "data-v-1b7d75db"]]), Et = {
592
+ VideoGridLayout: Ot,
593
+ VideoLayoutIcon: j
594
+ }, Mt = {
631
595
  install(n) {
632
- Object.entries(Ft).forEach(([S, e]) => {
633
- n.component(S, e);
596
+ Object.entries(Et).forEach(([k, o]) => {
597
+ n.component(k, o);
634
598
  });
635
599
  }
636
600
  };
637
601
  export {
638
- x as LAYOUT_CONFIGS,
639
- Yt as VideoGridLayout,
640
- K as VideoLayoutIcon,
641
- zt as default,
642
- vt as getAllLayoutTypes,
643
- pt as getLayoutPositions
602
+ S as LAYOUT_CONFIGS,
603
+ Ot as VideoGridLayout,
604
+ j as VideoLayoutIcon,
605
+ Mt as default,
606
+ dt as getAllLayoutTypes,
607
+ it as getLayoutPositions
644
608
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .video-grid-layout{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title{font-size:14px;font-weight:600;color:#333}.layout-buttons{display:flex;gap:8px;flex-wrap:wrap}.layout-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active{border-color:#42b883;background:#42b883;color:#fff}.layout-label{font-size:12px}.video-grid-container{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;will-change:transform}.video-item.dragging{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video{border-width:1px}.video-item>*{width:100%;height:100%}.video-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar{flex-direction:column;align-items:flex-start}.layout-label{display:none}}.layout-icon[data-v-31e0404d]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.layout-icon svg[data-v-31e0404d]{width:100%;height:100%}.video-grid-layout[data-v-13a48217]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-13a48217]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-13a48217]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-13a48217]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-13a48217]{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn[data-v-13a48217]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-13a48217]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-13a48217]{font-size:12px}.video-grid-container[data-v-13a48217]{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid[data-v-13a48217]{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item[data-v-13a48217]{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element}.video-item.dragging[data-v-13a48217]{opacity:.5;cursor:grabbing}.video-item[data-v-13a48217]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-13a48217]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-13a48217]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-13a48217]{border-width:1px}.video-item[data-v-13a48217]>*{width:100%;height:100%}.video-placeholder[data-v-13a48217]{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number[data-v-13a48217]{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar[data-v-13a48217]{flex-direction:column;align-items:flex-start}.layout-label[data-v-13a48217]{display:none}}
1
+ .video-grid-layout{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title{font-size:14px;font-weight:600;color:#333}.layout-buttons{display:flex;gap:8px;flex-wrap:wrap}.layout-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active{border-color:#42b883;background:#42b883;color:#fff}.layout-label{font-size:12px}.video-grid-container{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;will-change:transform}.video-item.dragging{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video{border-width:1px}.video-item>*{width:100%;height:100%}.video-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar{flex-direction:column;align-items:flex-start}.layout-label{display:none}}.layout-icon[data-v-31e0404d]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.layout-icon svg[data-v-31e0404d]{width:100%;height:100%}.video-grid-layout[data-v-1b7d75db]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-1b7d75db]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-1b7d75db]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-1b7d75db]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-1b7d75db]{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn[data-v-1b7d75db]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-1b7d75db]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-1b7d75db]{font-size:12px}.video-grid-container[data-v-1b7d75db]{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid[data-v-1b7d75db]{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item[data-v-1b7d75db]{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element}.video-item.dragging[data-v-1b7d75db]{opacity:.5;cursor:grabbing}.video-item[data-v-1b7d75db]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-1b7d75db]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-1b7d75db]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-1b7d75db]{border-width:1px}.video-item[data-v-1b7d75db]>*{width:100%;height:100%}.video-placeholder[data-v-1b7d75db]{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number[data-v-1b7d75db]{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar[data-v-1b7d75db]{flex-direction:column;align-items:flex-start}.layout-label[data-v-1b7d75db]{display:none}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "video-split-screen",
3
- "version": "1.0.16",
3
+ "version": "1.0.17",
4
4
  "description": "Vue 3 视频分屏组件（VideoSplitScreen）",
5
5
  "keywords": [
6
6
  "vue",