video-split-screen 1.0.23 → 1.0.24

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './types';
 export * from './layoutConfig';
 export { default as VideoGridLayout } from './components/VideoGridLayout.vue';
 export { default as VideoLayoutIcon } from './components/VideoLayoutIcon.vue';
+export { default as VideoSplitScreenExample } from './components/VideoSplitScreenExample.vue';
 import type { App } from 'vue';
 declare const _default: {
     install(app: App): void;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=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 N(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 L(){return Object.keys(k)}const Y={class:"layout-icon"},j={key:0,viewBox:"0 0 48 48",fill:"none"},H={key:1,viewBox:"0 0 48 48",fill:"none"},W={key:2,viewBox:"0 0 48 48",fill:"none"},q={key:3,viewBox:"0 0 48 48",fill:"none"},J={key:4,viewBox:"0 0 48 48",fill:"none"},K={key:5,viewBox:"0 0 48 48",fill:"none"},Q={key:6,viewBox:"0 0 48 48",fill:"none"},X={key:7,viewBox:"0 0 48 48",fill:"none"},Z={key:8,viewBox:"0 0 54 48",fill:"none"},tt={key:9,viewBox:"0 0 48 48",fill:"none"},et={key:10,viewBox:"0 0 48 48",fill:"none"},ot=t.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,o)=>(t.openBlock(),t.createElementBlock("div",Y,[n.type==="1"?(t.openBlock(),t.createElementBlock("svg",j,[...o[0]||(o[0]=[t.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(t.openBlock(),t.createElementBlock("svg",H,[...o[1]||(o[1]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(t.openBlock(),t.createElementBlock("svg",W,[...o[2]||(o[2]=[t.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),t.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(t.openBlock(),t.createElementBlock("svg",q,[...o[3]||(o[3]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(t.openBlock(),t.createElementBlock("svg",J,[...o[4]||(o[4]=[t.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"?(t.openBlock(),t.createElementBlock("svg",K,[...o[5]||(o[5]=[t.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"?(t.openBlock(),t.createElementBlock("svg",Q,[...o[6]||(o[6]=[t.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"?(t.openBlock(),t.createElementBlock("svg",X,[...o[7]||(o[7]=[t.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"?(t.openBlock(),t.createElementBlock("svg",Z,[...o[8]||(o[8]=[t.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"?(t.openBlock(),t.createElementBlock("svg",tt,[...o[9]||(o[9]=[t.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"?(t.openBlock(),t.createElementBlock("svg",et,[...o[10]||(o[10]=[t.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)])])):t.createCommentVNode("",!0)]))}}),D=(n,p)=>{const o=n.__vccOpts||n;for(const[v,s]of p)o[v]=s;return o},E=D(ot,[["__scopeId","data-v-31e0404d"]]),rt={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},at={class:"layout-buttons"},lt=["onClick","title","aria-label","aria-pressed"],ct={class:"layout-label"},nt={class:"video-grid-container",role:"region","aria-label":"视频网格"},it=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],dt={class:"video-placeholder"},st={class:"placeholder-number"},ht=.5,wt="grabbing",ut="0.8",pt=t.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=t.ref(o.layout);t.watch(()=>o.layout,e=>{s.value=e});const I=t.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:L()),w=t.shallowRef([]);function f(e){const r=Array.isArray(e)?e:o.videos||[],l=b.value,a={};w.value.forEach((i,u)=>{i&&i.id!==void 0&&(a[i.id]=i.__labelNumber??u+1)});const c=Array.from({length:l}).map((i,u)=>{const d=r[u];if(d){const U=a[d.id]??d.__labelNumber??u+1;return{...d,__labelNumber:U}}});w.value=c}t.watch(()=>o.videos,e=>{if(!Array.isArray(e)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(e)},{flush:"post"});let x=!1;t.watch(w,e=>{!x&&Array.isArray(e)&&v("videosChange",e)});const V=t.computed(()=>{const e=k[s.value];return e||(console.warn(`[VideoGridLayout] Invalid layout type: ${s.value}, fallback to '4'`),k[4])}),m=t.computed(()=>N(s.value)),b=t.computed(()=>{var e;return((e=V.value)==null?void 0:e.count)||4}),C=t.computed(()=>w.value.slice(0,b.value).map(e=>e).filter(Boolean));f(o.videos),t.watch(b,()=>{f(o.videos)}),t.computed(()=>{const e=m.value.map((r,l)=>({p:r,idx:l}));return e.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)),e.map(r=>r.idx)});const h=t.ref(-1),y=t.ref(-1),S=t.shallowRef(null),$=t.computed(()=>{const e=V.value;return{display:"grid",gridTemplateColumns:(e==null?void 0:e.colTemplate)||`repeat(${(e==null?void 0:e.cols)||2}, 1fr)`,gridTemplateRows:(e==null?void 0:e.rowTemplate)||`repeat(${(e==null?void 0:e.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),A=t.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function G(e){const r=m.value[e];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function T(e){const r=m.value[e];return(r==null?void 0:r.isMain)||!1}function O(e){s.value=e,v("layoutChange",s.value)}function g(){if(S.value&&document.body.contains(S.value)){try{document.body.removeChild(S.value)}catch(e){console.warn("[VideoGridLayout] Failed to cleanup drag image:",e)}S.value=null}}function M(e,r){if(r<0||r>=w.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(h.value=r,!e.dataTransfer)return;e.dataTransfer.effectAllowed="move";const a=e.target.closest(".video-item");if(a)try{g();const c=a.cloneNode(!0);c.style.width=`${a.offsetWidth}px`,c.style.height=`${a.offsetHeight}px`,c.style.opacity=ut,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),S.value=c,e.dataTransfer.setDragImage(c,a.offsetWidth/2,a.offsetHeight/2),setTimeout(()=>{g()},100),a.style.opacity=String(ht),a.style.cursor=wt}catch(c){console.error("[VideoGridLayout] Drag start error:",c),g()}}function R(e,r){e.preventDefault(),e.stopPropagation();const l=h.value;if(l===-1||l===r){h.value=-1;return}if(l>=w.value.length){console.warn("[VideoGridLayout] No video at from index:",l),h.value=-1;return}try{const a=e.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=[...w.value];if(r>=c.length){const i=c[l];c.splice(l,1),c.push(i)}else{const i=c[l];c[l]=c[r],c[r]=i}x=!0,w.value=c,setTimeout(()=>{x=!1,v("videosChange",w.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{h.value=-1}}function P(e,r){e.preventDefault(),h.value!==-1&&h.value!==r&&(y.value=r)}function F(e,r){e.preventDefault();const l=e.target,a=e.relatedTarget;l.contains(a)||y.value===r&&(y.value=-1)}function z(e){const l=e.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),g(),h.value=-1,y.value=-1}return t.onBeforeUnmount(()=>{g()}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:t.normalizeStyle(A.value)},[n.showToolbar?(t.openBlock(),t.createElementBlock("div",rt,[r[1]||(r[1]=t.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),t.createElementVNode("div",at,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(I.value,l=>{var a,c,i;return t.openBlock(),t.createElementBlock("button",{key:l,class:t.normalizeClass(["layout-btn",{active:s.value===l}]),onClick:u=>O(l),title:((a=t.unref(k)[l])==null?void 0:a.label)||"","aria-label":`切换到${((c=t.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":s.value===l,type:"button"},[t.createVNode(E,{type:l},null,8,["type"]),t.createElementVNode("span",ct,t.toDisplayString(((i=t.unref(k)[l])==null?void 0:i.label)||""),1)],10,lt)}),128))])])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[t.createElementVNode("div",{class:"video-grid",style:t.normalizeStyle($.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(m.value,(l,a)=>{var c,i,u;return t.openBlock(),t.createElementBlock("div",{key:((c=C.value[a])==null?void 0:c.id)??a,class:t.normalizeClass(["video-item",{"main-video":T(a),dragging:h.value===a,"drag-over":y.value===a&&h.value!==a}]),style:t.normalizeStyle(G(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((i=C.value[a])==null?void 0:i.title)||((u=C.value[a])==null?void 0:u.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>M(d,a),onDragover:r[0]||(r[0]=t.withModifiers(()=>{},["prevent"])),onDragenter:d=>P(d,a),onDragleave:d=>F(d,a),onDrop:d=>R(d,a),onDragend:z},[t.renderSlot(e.$slots,"video",{video:C.value[a],index:a},()=>[t.createElementVNode("div",dt,[t.createElementVNode("div",st,t.toDisplayString(a+1),1)])],!0)],46,it)}),128))],4)])],4))}}),_=D(pt,[["__scopeId","data-v-222ef64d"]]),kt={VideoGridLayout:_,VideoLayoutIcon:E},vt={install(n){Object.entries(kt).forEach(([p,o])=>{n.component(p,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=_;exports.VideoLayoutIcon=E;exports.default=vt;exports.getAllLayoutTypes=L;exports.getLayoutPositions=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),V={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}},$={};function T(d){if($[d])return $[d];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}]}[d]||[];return o.length>0&&($[d]=o),o}function A(){return Object.keys(V)}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"},le=e.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(d){return(u,o)=>(e.openBlock(),e.createElementBlock("div",H,[d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)])])):d.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)]))}}),D=(d,u)=>{const o=d.__vccOpts||d;for(const[p,h]of u)o[p]=h;return o},L=D(le,[["__scopeId","data-v-31e0404d"]]),ae={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},ne={class:"layout-buttons"},ce=["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"],ue={class:"video-placeholder"},he={class:"placeholder-number"},we=.5,pe="grabbing",ve="0.8",ke=e.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(d,{emit:u}){const o=d,p=u,h=e.ref(o.layout);e.watch(()=>o.layout,t=>{h.value=t});const y=e.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:A()),v=e.shallowRef([]);function E(t){const l=Array.isArray(t)?t:o.videos||[],n=b.value,r={};v.value.forEach((w,x)=>{w&&w.id!==void 0&&(r[w.id]=w.__labelNumber??x+1)});const c=Array.from({length:n}).map((w,x)=>{const m=l[x];if(m){const Y=r[m.id]??m.__labelNumber??x+1;return{...m,__labelNumber:Y}}});v.value=c}e.watch(()=>o.videos,t=>{if(!Array.isArray(t)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}E(t)},{flush:"post"});let S=!1;e.watch(v,t=>{!S&&Array.isArray(t)&&p("videosChange",t)});const g=e.computed(()=>{const t=V[h.value];return t||(console.warn(`[VideoGridLayout] Invalid layout type: ${h.value}, fallback to '4'`),V[4])}),N=e.computed(()=>T(h.value)),b=e.computed(()=>{var t;return((t=g.value)==null?void 0:t.count)||4}),f=e.computed(()=>v.value.slice(0,b.value).map(t=>t).filter(Boolean));e.computed(()=>{const t={};return f.value.forEach((l,n)=>{const r=v.value.findIndex(c=>c&&c.id===l.id);r!==-1&&(t[n]=r)}),t}),E(o.videos),e.watch(b,()=>{E(o.videos)}),e.computed(()=>{const t=N.value.map((l,n)=>({p:l,idx:n}));return t.sort((l,n)=>l.p.row===n.p.row?(l.p.col||0)-(n.p.col||0):(l.p.row||0)-(n.p.row||0)),t.map(l=>l.idx)});const k=e.ref(-1),C=e.ref(-1),i=e.shallowRef(null),a=e.computed(()=>{const t=g.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%"}}),s=e.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function B(t){const l=f.value[t];return l?v.value.findIndex(r=>r&&r.id===l.id)+1:t+1}function M(t){const l=N.value[t];return!l||typeof l.col!="number"||typeof l.row!="number"?{}:{gridColumn:`${l.col} / span ${l.colSpan}`,gridRow:`${l.row} / span ${l.rowSpan}`}}function O(t){const l=N.value[t];return(l==null?void 0:l.isMain)||!1}function F(t){h.value=t,p("layoutChange",h.value)}function _(){if(i.value&&document.body.contains(i.value)){try{document.body.removeChild(i.value)}catch(t){console.warn("[VideoGridLayout] Failed to cleanup drag image:",t)}i.value=null}}function R(t,l){if(l<0||l>=v.value.length){console.warn("[VideoGridLayout] Invalid drag index:",l);return}if(k.value=l,!t.dataTransfer)return;t.dataTransfer.effectAllowed="move";const r=t.target.closest(".video-item");if(r)try{_();const c=r.cloneNode(!0);c.style.width=`${r.offsetWidth}px`,c.style.height=`${r.offsetHeight}px`,c.style.opacity=ve,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),i.value=c,t.dataTransfer.setDragImage(c,r.offsetWidth/2,r.offsetHeight/2),setTimeout(()=>{_()},100),r.style.opacity=String(we),r.style.cursor=pe}catch(c){console.error("[VideoGridLayout] Drag start error:",c),_()}}function U(t,l){t.preventDefault(),t.stopPropagation();const n=k.value;if(n===-1||n===l){k.value=-1;return}if(n>=v.value.length){console.warn("[VideoGridLayout] No video at from index:",n),k.value=-1;return}try{const r=t.currentTarget;r&&(r.style.backgroundColor="rgba(66, 184, 131, 0.3)",r.style.borderColor="#42b883",setTimeout(()=>{r.style.backgroundColor="",r.style.borderColor=""},200));const c=[...v.value];if(l>=c.length){const w=c[n];c.splice(n,1),c.push(w)}else{const w=c[n];c[n]=c[l],c[l]=w}S=!0,v.value=c,setTimeout(()=>{S=!1,p("videosChange",v.value.filter(Boolean))},0)}catch(r){console.error("[VideoGridLayout] Drop error:",r)}finally{k.value=-1}}function P(t,l){t.preventDefault(),k.value!==-1&&k.value!==l&&(C.value=l)}function z(t,l){t.preventDefault();const n=t.target,r=t.relatedTarget;n.contains(r)||C.value===l&&(C.value=-1)}function j(t){const n=t.target.closest(".video-item");n&&(n.style.opacity="1",n.style.cursor="move"),_(),k.value=-1,C.value=-1}return e.onBeforeUnmount(()=>{_()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:e.normalizeStyle(s.value)},[d.showToolbar?(e.openBlock(),e.createElementBlock("div",ae,[l[1]||(l[1]=e.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),e.createElementVNode("div",ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,n=>{var r,c,w;return e.openBlock(),e.createElementBlock("button",{key:n,class:e.normalizeClass(["layout-btn",{active:h.value===n}]),onClick:x=>F(n),title:((r=e.unref(V)[n])==null?void 0:r.label)||"","aria-label":`切换到${((c=e.unref(V)[n])==null?void 0:c.label)||""}布局`,"aria-pressed":h.value===n,type:"button"},[e.createVNode(L,{type:n},null,8,["type"]),e.createElementVNode("span",ie,e.toDisplayString(((w=e.unref(V)[n])==null?void 0:w.label)||""),1)],10,ce)}),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(N.value,(n,r)=>{var c,w,x;return e.openBlock(),e.createElementBlock("div",{key:((c=f.value[r])==null?void 0:c.id)??r,class:e.normalizeClass(["video-item",{"main-video":O(r),dragging:k.value===r,"drag-over":C.value===r&&k.value!==r}]),style:e.normalizeStyle(M(r)),draggable:!0,"aria-label":`视频 ${r+1}: ${((w=f.value[r])==null?void 0:w.title)||((x=f.value[r])==null?void 0:x.id)||""}`,role:"article",tabindex:"0",onDragstart:m=>R(m,r),onDragover:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),onDragenter:m=>P(m,r),onDragleave:m=>z(m,r),onDrop:m=>U(m,r),onDragend:j},[e.renderSlot(t.$slots,"video",{video:f.value[r],index:r},()=>[e.createElementVNode("div",ue,[e.createElementVNode("div",he,e.toDisplayString(B(r)),1)])],!0)],46,se)}),128))],4)])],4))}}),I=D(ke,[["__scopeId","data-v-df2d4d67"]]),me={class:"video-split-screen-example"},ge={class:"example-controls"},ye={class:"control-group"},Se={class:"layout-buttons"},fe=["onClick"],xe={class:"control-group"},Ce={class:"video-buttons"},Ve=["disabled"],Ee=["disabled"],Ne={class:"control-group"},be={class:"placeholder-controls"},Be={class:"example-content"},_e={class:"video-grid-container"},$e={class:"custom-video-item"},De={class:"video-content"},Le={class:"video-info"},Ie={class:"video-title"},Te={class:"video-id"},Ae={class:"example-info"},Ge={class:"info-panel"},Me={class:"info-item"},Oe={class:"info-item"},Fe={class:"info-item"},Re={key:0},Ue={key:1},Pe={key:2},ze={class:"info-panel"},je={class:"info-panel"},Ye={class:"log-list"},He=e.defineComponent({__name:"VideoSplitScreenExample",setup(d){const u=e.ref([{id:1,title:"摄像头 1",url:"rtmp://example1.com/live"},{id:2,title:"摄像头 2",url:"rtmp://example2.com/live"},{id:3,title:"摄像头 3",url:"rtmp://example3.com/live"},{id:4,title:"摄像头 4",url:"rtmp://example4.com/live"}]),o=e.ref("4"),p=e.ref(!1),h=e.ref(!1),y=e.ref(""),v=e.computed(()=>{if(h.value)return i=>`位置 ${i+1}`;if(p.value)return y.value||"自定义占位符"}),E=e.ref([]),S=e.ref([]);function g(i){const s=new Date().toLocaleTimeString();S.value.unshift({time:s,message:i}),S.value.length>10&&(S.value=S.value.slice(0,10))}function N(i){o.value=i,g(`切换到 ${i} 分屏布局`)}function b(){const i=Math.max(...u.value.map(a=>a.id))+1;u.value.push({id:i,title:`摄像头 ${i}`,url:`rtmp://example${i}.com/live`}),g(`添加视频: 摄像头 ${i}`)}function f(){if(u.value.length>1){const i=u.value.pop();g(`移除视频: ${i==null?void 0:i.title}`)}}function k(){u.value=[{id:1,title:"摄像头 1",url:"rtmp://example1.com/live"},{id:2,title:"摄像头 2",url:"rtmp://example2.com/live"},{id:3,title:"摄像头 3",url:"rtmp://example3.com/live"},{id:4,title:"摄像头 4",url:"rtmp://example4.com/live"}],o.value="4",p.value=!1,h.value=!1,y.value="",E.value=[],g("重置所有设置")}function C(i){console.log("Videos changed:",i),u.value=i,g(`视频重新排序: ${i.map(a=>a.title).join(" → ")}`)}return e.watch([p,h],()=>{p.value&&h.value&&(h.value=!1),g("更新占位符配置")}),e.watch(y,()=>{g(`设置占位符文本: "${y.value}"`)}),g("示例组件初始化完成"),(i,a)=>(e.openBlock(),e.createElementBlock("div",me,[a[16]||(a[16]=e.createElementVNode("div",{class:"example-header"},[e.createElementVNode("h1",null,"Video Split Screen 示例"),e.createElementVNode("p",null,"演示所有功能：布局切换、拖拽排序、占位符配置")],-1)),e.createElementVNode("div",ge,[e.createElementVNode("div",ye,[a[3]||(a[3]=e.createElementVNode("h3",null,"布局切换",-1)),e.createElementVNode("div",Se,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["1","2","3","4","6","7","8","9","10","13","16"],s=>e.createElementVNode("button",{key:s,class:e.normalizeClass(["layout-btn",{active:o.value===s}]),onClick:B=>N(s)},e.toDisplayString(s)+"分屏 ",11,fe)),64))])]),e.createElementVNode("div",xe,[a[4]||(a[4]=e.createElementVNode("h3",null,"视频管理",-1)),e.createElementVNode("div",Ce,[e.createElementVNode("button",{onClick:b,disabled:u.value.length>=16},"添加视频",8,Ve),e.createElementVNode("button",{onClick:f,disabled:u.value.length<=1},"移除视频",8,Ee),e.createElementVNode("button",{onClick:k},"重置")])]),e.createElementVNode("div",Ne,[a[7]||(a[7]=e.createElementVNode("h3",null,"占位符配置",-1)),e.createElementVNode("div",be,[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=s=>p.value=s),type:"checkbox"},null,512),[[e.vModelCheckbox,p.value]]),a[5]||(a[5]=e.createTextVNode(" 使用自定义文本 ",-1))]),p.value?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:0,"onUpdate:modelValue":a[1]||(a[1]=s=>y.value=s),type:"text",placeholder:"输入占位符文本"},null,512)),[[e.vModelText,y.value]]):e.createCommentVNode("",!0),e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":a[2]||(a[2]=s=>h.value=s),type:"checkbox"},null,512),[[e.vModelCheckbox,h.value]]),a[6]||(a[6]=e.createTextVNode(" 使用函数生成 ",-1))])])])]),e.createElementVNode("div",Be,[e.createElementVNode("div",_e,[e.createVNode(I,{videos:u.value,layout:o.value,"placeholder-text":v.value,placeholders:E.value,onVideosChange:C,width:"100%",height:"500px"},{video:e.withCtx(({video:s,index:B})=>[e.createElementVNode("div",$e,[e.createElementVNode("div",De,[a[8]||(a[8]=e.createElementVNode("div",{class:"video-icon"},"📹",-1)),e.createElementVNode("div",Le,[e.createElementVNode("div",Ie,e.toDisplayString(s.title),1),e.createElementVNode("div",Te,"ID: "+e.toDisplayString(s.id),1)])]),a[9]||(a[9]=e.createElementVNode("div",{class:"drag-handle"},"⋮⋮",-1))])]),_:1},8,["videos","layout","placeholder-text","placeholders"])]),e.createElementVNode("div",Ae,[e.createElementVNode("div",Ge,[a[13]||(a[13]=e.createElementVNode("h3",null,"当前状态",-1)),e.createElementVNode("div",Me,[a[10]||(a[10]=e.createElementVNode("strong",null,"布局:",-1)),e.createTextVNode(" "+e.toDisplayString(o.value)+"分屏 ",1)]),e.createElementVNode("div",Oe,[a[11]||(a[11]=e.createElementVNode("strong",null,"视频数量:",-1)),e.createTextVNode(" "+e.toDisplayString(u.value.length),1)]),e.createElementVNode("div",Fe,[a[12]||(a[12]=e.createElementVNode("strong",null,"占位符:",-1)),p.value?(e.openBlock(),e.createElementBlock("span",Re,e.toDisplayString(y.value||"无文本"),1)):h.value?(e.openBlock(),e.createElementBlock("span",Ue,"函数生成")):(e.openBlock(),e.createElementBlock("span",Pe,"默认数字"))])]),e.createElementVNode("div",ze,[a[14]||(a[14]=e.createElementVNode("h3",null,"视频数组 (videos)",-1)),e.createElementVNode("pre",null,e.toDisplayString(JSON.stringify(u.value,null,2)),1)]),e.createElementVNode("div",je,[a[15]||(a[15]=e.createElementVNode("h3",null,"操作日志",-1)),e.createElementVNode("div",Ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(s,B)=>(e.openBlock(),e.createElementBlock("div",{key:B,class:"log-item"},e.toDisplayString(s.time)+": "+e.toDisplayString(s.message),1))),128))])])])])]))}}),G=D(He,[["__scopeId","data-v-4a52fa65"]]),We={VideoGridLayout:I,VideoLayoutIcon:L,VideoSplitScreenExample:G},qe={install(d){Object.entries(We).forEach(([u,o])=>{d.component(u,o)})}};exports.LAYOUT_CONFIGS=V;exports.VideoGridLayout=I;exports.VideoLayoutIcon=L;exports.VideoSplitScreenExample=G;exports.default=qe;exports.getAllLayoutTypes=A;exports.getLayoutPositions=T;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as P, createElementBlock as c, openBlock as i, createCommentVNode as F, createElementVNode as d, createStaticVNode as g, ref as B, watch as L, computed as y, shallowRef as T, onBeforeUnmount as et, normalizeStyle as V, Fragment as E, renderList as O, unref as A, normalizeClass as M, createVNode as rt, toDisplayString as R, withModifiers as at, renderSlot as lt } from "vue";
-const S = {
+import { defineComponent as z, createElementBlock as c, openBlock as d, createCommentVNode as H, createElementVNode as e, createStaticVNode as I, ref as C, watch as A, computed as f, shallowRef as J, onBeforeUnmount as st, normalizeStyle as U, Fragment as O, renderList as R, unref as F, normalizeClass as Y, createVNode as K, toDisplayString as m, withModifiers as ct, renderSlot as dt, withDirectives as P, createTextVNode as M, vModelCheckbox as q, vModelText as ut, withCtx as ht } from "vue";
+const B = {
   1: {
     type: "1",
     label: "1分屏",
@@ -77,10 +77,10 @@ const S = {
     cols: 4,
     rows: 4
   }
-}, G = {};
-function nt(n) {
-  if (G[n])
-    return G[n];
+}, j = {};
+function wt(u) {
+  if (j[u])
+    return j[u];
   const o = {
     1: [
       { col: 1, colSpan: 1, row: 1, rowSpan: 1 }
@@ -183,65 +183,65 @@ function nt(n) {
       { col: 3, colSpan: 1, row: 4, rowSpan: 1 },
       { col: 4, colSpan: 1, row: 4, rowSpan: 1 }
     ]
-  }[n] || [];
-  return o.length > 0 && (G[n] = o), o;
+  }[u] || [];
+  return o.length > 0 && (j[u] = o), o;
 }
-function ct() {
-  return Object.keys(S);
+function pt() {
+  return Object.keys(B);
 }
-const it = { class: "layout-icon" }, dt = {
+const vt = { class: "layout-icon" }, gt = {
   key: 0,
   viewBox: "0 0 48 48",
   fill: "none"
-}, st = {
+}, yt = {
   key: 1,
   viewBox: "0 0 48 48",
   fill: "none"
-}, ht = {
+}, kt = {
   key: 2,
   viewBox: "0 0 48 48",
   fill: "none"
-}, wt = {
+}, St = {
   key: 3,
   viewBox: "0 0 48 48",
   fill: "none"
-}, ut = {
+}, xt = {
   key: 4,
   viewBox: "0 0 48 48",
   fill: "none"
-}, pt = {
+}, mt = {
   key: 5,
   viewBox: "0 0 48 48",
   fill: "none"
-}, vt = {
+}, ft = {
   key: 6,
   viewBox: "0 0 48 48",
   fill: "none"
-}, yt = {
+}, Ct = {
   key: 7,
   viewBox: "0 0 48 48",
   fill: "none"
-}, kt = {
+}, bt = {
   key: 8,
   viewBox: "0 0 54 48",
   fill: "none"
-}, gt = {
+}, _t = {
   key: 9,
   viewBox: "0 0 48 48",
   fill: "none"
-}, St = {
+}, $t = {
   key: 10,
   viewBox: "0 0 48 48",
   fill: "none"
-}, Ct = /* @__PURE__ */ P({
+}, Dt = /* @__PURE__ */ z({
   __name: "VideoLayoutIcon",
   props: {
     type: {}
   },
-  setup(n) {
-    return (k, o) => (i(), c("div", it, [
-      n.type === "1" ? (i(), c("svg", dt, [...o[0] || (o[0] = [
-        d("rect", {
+  setup(u) {
+    return (w, o) => (d(), c("div", vt, [
+      u.type === "1" ? (d(), c("svg", gt, [...o[0] || (o[0] = [
+        e("rect", {
           x: "4",
           y: "4",
           width: "40",
@@ -249,8 +249,8 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "2"
         }, null, -1)
-      ])])) : n.type === "2" ? (i(), c("svg", st, [...o[1] || (o[1] = [
-        d("rect", {
+      ])])) : u.type === "2" ? (d(), c("svg", yt, [...o[1] || (o[1] = [
+        e("rect", {
           x: "4",
           y: "4",
           width: "19",
@@ -258,7 +258,7 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        d("rect", {
+        e("rect", {
           x: "25",
           y: "4",
           width: "19",
@@ -266,8 +266,8 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1)
-      ])])) : n.type === "3" ? (i(), c("svg", ht, [...o[2] || (o[2] = [
-        d("rect", {
+      ])])) : u.type === "3" ? (d(), c("svg", kt, [...o[2] || (o[2] = [
+        e("rect", {
           x: "4",
           y: "4",
           width: "20",
@@ -275,7 +275,7 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "2"
         }, null, -1),
-        d("rect", {
+        e("rect", {
           x: "26",
           y: "4",
           width: "18",
@@ -283,7 +283,7 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        d("rect", {
+        e("rect", {
           x: "26",
           y: "25",
           width: "18",
@@ -291,8 +291,8 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1)
-      ])])) : n.type === "4" ? (i(), c("svg", wt, [...o[3] || (o[3] = [
-        d("rect", {
+      ])])) : u.type === "4" ? (d(), c("svg", St, [...o[3] || (o[3] = [
+        e("rect", {
           x: "4",
           y: "4",
           width: "19",
@@ -300,7 +300,7 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        d("rect", {
+        e("rect", {
           x: "25",
           y: "4",
           width: "19",
@@ -308,7 +308,7 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        d("rect", {
+        e("rect", {
           x: "4",
           y: "25",
           width: "19",
@@ -316,7 +316,7 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        d("rect", {
+        e("rect", {
           x: "25",
           y: "25",
           width: "19",
@@ -324,38 +324,38 @@ const it = { class: "layout-icon" }, dt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1)
-      ])])) : n.type === "6" ? (i(), c("svg", ut, [...o[4] || (o[4] = [
-        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)
-      ])])) : n.type === "7" ? (i(), c("svg", pt, [...o[5] || (o[5] = [
-        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)
-      ])])) : n.type === "8" ? (i(), c("svg", vt, [...o[6] || (o[6] = [
-        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)
-      ])])) : n.type === "9" ? (i(), c("svg", yt, [...o[7] || (o[7] = [
-        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)
-      ])])) : n.type === "10" ? (i(), c("svg", kt, [...o[8] || (o[8] = [
-        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)
-      ])])) : n.type === "13" ? (i(), c("svg", gt, [...o[9] || (o[9] = [
-        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)
-      ])])) : n.type === "16" ? (i(), c("svg", St, [...o[10] || (o[10] = [
-        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)
-      ])])) : F("", !0)
+      ])])) : u.type === "6" ? (d(), c("svg", xt, [...o[4] || (o[4] = [
+        I('<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)
+      ])])) : u.type === "7" ? (d(), c("svg", mt, [...o[5] || (o[5] = [
+        I('<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)
+      ])])) : u.type === "8" ? (d(), c("svg", ft, [...o[6] || (o[6] = [
+        I('<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)
+      ])])) : u.type === "9" ? (d(), c("svg", Ct, [...o[7] || (o[7] = [
+        I('<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)
+      ])])) : u.type === "10" ? (d(), c("svg", bt, [...o[8] || (o[8] = [
+        I('<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)
+      ])])) : u.type === "13" ? (d(), c("svg", _t, [...o[9] || (o[9] = [
+        I('<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)
+      ])])) : u.type === "16" ? (d(), c("svg", $t, [...o[10] || (o[10] = [
+        I('<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)
+      ])])) : H("", !0)
     ]));
   }
-}), U = (n, k) => {
-  const o = n.__vccOpts || n;
-  for (const [C, w] of k)
-    o[C] = w;
+}), W = (u, w) => {
+  const o = u.__vccOpts || u;
+  for (const [g, p] of w)
+    o[g] = p;
   return o;
-}, Y = /* @__PURE__ */ U(Ct, [["__scopeId", "data-v-31e0404d"]]), ft = {
+}, Q = /* @__PURE__ */ W(Dt, [["__scopeId", "data-v-31e0404d"]]), Lt = {
   key: 0,
   class: "layout-toolbar",
   role: "toolbar",
   "aria-label": "布局切换工具栏"
-}, xt = { class: "layout-buttons" }, mt = ["onClick", "title", "aria-label", "aria-pressed"], bt = { class: "layout-label" }, Dt = {
+}, It = { class: "layout-buttons" }, Vt = ["onClick", "title", "aria-label", "aria-pressed"], Tt = { class: "layout-label" }, Bt = {
   class: "video-grid-container",
   role: "region",
   "aria-label": "视频网格"
-}, Lt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], _t = { class: "video-placeholder" }, $t = { class: "placeholder-number" }, It = 0.5, Bt = "grabbing", Vt = "0.8", At = /* @__PURE__ */ P({
+}, At = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], Gt = { class: "video-placeholder" }, Nt = { class: "placeholder-number" }, Et = 0.5, Mt = "grabbing", Ot = "0.8", Rt = /* @__PURE__ */ z({
   __name: "VideoGridLayout",
   props: {
     videos: {},
@@ -368,52 +368,58 @@ const it = { class: "layout-icon" }, dt = {
     placeholders: {}
   },
   emits: ["layoutChange", "videosChange"],
-  setup(n, { emit: k }) {
-    const o = n, C = k, w = B(o.layout);
-    L(() => o.layout, (t) => {
-      w.value = t;
+  setup(u, { emit: w }) {
+    const o = u, g = w, p = C(o.layout);
+    A(() => o.layout, (t) => {
+      p.value = t;
     });
-    const j = y(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : ct()), p = T([]);
-    function _(t) {
-      const e = Array.isArray(t) ? t : o.videos || [], a = I.value, r = {};
-      p.value.forEach((s, v) => {
-        s && s.id !== void 0 && (r[s.id] = s.__labelNumber ?? v + 1);
+    const b = f(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : pt()), y = J([]);
+    function V(t) {
+      const l = Array.isArray(t) ? t : o.videos || [], n = G.value, r = {};
+      y.value.forEach((v, D) => {
+        v && v.id !== void 0 && (r[v.id] = v.__labelNumber ?? D + 1);
       });
-      const l = Array.from({ length: a }).map((s, v) => {
-        const h = e[v];
-        if (h) {
-          const ot = r[h.id] ?? h.__labelNumber ?? v + 1;
-          return { ...h, __labelNumber: ot };
+      const i = Array.from({ length: n }).map((v, D) => {
+        const S = l[D];
+        if (S) {
+          const it = r[S.id] ?? S.__labelNumber ?? D + 1;
+          return { ...S, __labelNumber: it };
         }
       });
-      p.value = l;
+      y.value = i;
     }
-    L(() => o.videos, (t) => {
+    A(() => o.videos, (t) => {
       if (!Array.isArray(t)) {
         console.warn("[VideoGridLayout] Invalid videos prop, expected array");
         return;
       }
-      _(t);
+      V(t);
     }, { flush: "post" });
-    let $ = !1;
-    L(p, (t) => {
-      !$ && Array.isArray(t) && C("videosChange", t);
+    let _ = !1;
+    A(y, (t) => {
+      !_ && Array.isArray(t) && g("videosChange", t);
     });
-    const N = y(() => {
-      const t = S[w.value];
-      return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${w.value}, fallback to '4'`), S[4]);
-    }), b = y(() => nt(w.value)), I = y(() => {
+    const x = f(() => {
+      const t = B[p.value];
+      return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${p.value}, fallback to '4'`), B[4]);
+    }), T = f(() => wt(p.value)), G = f(() => {
       var t;
-      return ((t = N.value) == null ? void 0 : t.count) || 4;
-    }), D = y(() => p.value.slice(0, I.value).map((t) => t).filter(Boolean));
-    _(o.videos), L(I, () => {
-      _(o.videos);
-    }), y(() => {
-      const t = b.value.map((e, a) => ({ p: e, idx: a }));
-      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);
+      return ((t = x.value) == null ? void 0 : t.count) || 4;
+    }), $ = f(() => y.value.slice(0, G.value).map((t) => t).filter(Boolean));
+    f(() => {
+      const t = {};
+      return $.value.forEach((l, n) => {
+        const r = y.value.findIndex((i) => i && i.id === l.id);
+        r !== -1 && (t[n] = r);
+      }), t;
+    }), V(o.videos), A(G, () => {
+      V(o.videos);
+    }), f(() => {
+      const t = T.value.map((l, n) => ({ p: l, idx: n }));
+      return t.sort((l, n) => l.p.row === n.p.row ? (l.p.col || 0) - (n.p.col || 0) : (l.p.row || 0) - (n.p.row || 0)), t.map((l) => l.idx);
     });
-    const u = B(-1), f = B(-1), x = T(null), z = y(() => {
-      const t = N.value;
+    const k = C(-1), L = C(-1), s = J(null), a = f(() => {
+      const t = x.value;
       return {
         display: "grid",
         gridTemplateColumns: (t == null ? void 0 : t.colTemplate) || `repeat(${(t == null ? void 0 : t.cols) || 2}, 1fr)`,
@@ -422,62 +428,66 @@ const it = { class: "layout-icon" }, dt = {
         width: o.width || "100%",
         height: o.height || "100%"
       };
-    }), H = y(() => ({
+    }), h = f(() => ({
       width: o.width || "100%",
       height: o.height || "100%"
     }));
-    function W(t) {
-      const e = b.value[t];
-      return !e || typeof e.col != "number" || typeof e.row != "number" ? {} : {
-        gridColumn: `${e.col} / span ${e.colSpan}`,
-        gridRow: `${e.row} / span ${e.rowSpan}`
+    function N(t) {
+      const l = $.value[t];
+      return l ? y.value.findIndex((r) => r && r.id === l.id) + 1 : t + 1;
+    }
+    function Z(t) {
+      const l = T.value[t];
+      return !l || typeof l.col != "number" || typeof l.row != "number" ? {} : {
+        gridColumn: `${l.col} / span ${l.colSpan}`,
+        gridRow: `${l.row} / span ${l.rowSpan}`
       };
     }
-    function q(t) {
-      const e = b.value[t];
-      return (e == null ? void 0 : e.isMain) || !1;
+    function tt(t) {
+      const l = T.value[t];
+      return (l == null ? void 0 : l.isMain) || !1;
     }
-    function J(t) {
-      w.value = t, C("layoutChange", w.value);
+    function et(t) {
+      p.value = t, g("layoutChange", p.value);
     }
-    function m() {
-      if (x.value && document.body.contains(x.value)) {
+    function E() {
+      if (s.value && document.body.contains(s.value)) {
         try {
-          document.body.removeChild(x.value);
+          document.body.removeChild(s.value);
         } catch (t) {
           console.warn("[VideoGridLayout] Failed to cleanup drag image:", t);
         }
-        x.value = null;
+        s.value = null;
       }
     }
-    function K(t, e) {
-      if (e < 0 || e >= p.value.length) {
-        console.warn("[VideoGridLayout] Invalid drag index:", e);
+    function ot(t, l) {
+      if (l < 0 || l >= y.value.length) {
+        console.warn("[VideoGridLayout] Invalid drag index:", l);
         return;
       }
-      if (u.value = e, !t.dataTransfer) return;
+      if (k.value = l, !t.dataTransfer) return;
       t.dataTransfer.effectAllowed = "move";
       const r = t.target.closest(".video-item");
       if (r)
         try {
-          m();
-          const l = r.cloneNode(!0);
-          l.style.width = `${r.offsetWidth}px`, l.style.height = `${r.offsetHeight}px`, l.style.opacity = Vt, l.style.position = "absolute", l.style.top = "-9999px", l.style.pointerEvents = "none", document.body.appendChild(l), x.value = l, t.dataTransfer.setDragImage(l, r.offsetWidth / 2, r.offsetHeight / 2), setTimeout(() => {
-            m();
-          }, 100), r.style.opacity = String(It), r.style.cursor = Bt;
-        } catch (l) {
-          console.error("[VideoGridLayout] Drag start error:", l), m();
+          E();
+          const i = r.cloneNode(!0);
+          i.style.width = `${r.offsetWidth}px`, i.style.height = `${r.offsetHeight}px`, i.style.opacity = Ot, i.style.position = "absolute", i.style.top = "-9999px", i.style.pointerEvents = "none", document.body.appendChild(i), s.value = i, t.dataTransfer.setDragImage(i, r.offsetWidth / 2, r.offsetHeight / 2), setTimeout(() => {
+            E();
+          }, 100), r.style.opacity = String(Et), r.style.cursor = Mt;
+        } catch (i) {
+          console.error("[VideoGridLayout] Drag start error:", i), E();
         }
     }
-    function Q(t, e) {
+    function rt(t, l) {
       t.preventDefault(), t.stopPropagation();
-      const a = u.value;
-      if (a === -1 || a === e) {
-        u.value = -1;
+      const n = k.value;
+      if (n === -1 || n === l) {
+        k.value = -1;
         return;
       }
-      if (a >= p.value.length) {
-        console.warn("[VideoGridLayout] No video at from index:", a), u.value = -1;
+      if (n >= y.value.length) {
+        console.warn("[VideoGridLayout] No video at from index:", n), k.value = -1;
         return;
       }
       try {
@@ -485,119 +495,292 @@ const it = { class: "layout-icon" }, dt = {
         r && (r.style.backgroundColor = "rgba(66, 184, 131, 0.3)", r.style.borderColor = "#42b883", setTimeout(() => {
           r.style.backgroundColor = "", r.style.borderColor = "";
         }, 200));
-        const l = [...p.value];
-        if (e >= l.length) {
-          const s = l[a];
-          l.splice(a, 1), l.push(s);
+        const i = [...y.value];
+        if (l >= i.length) {
+          const v = i[n];
+          i.splice(n, 1), i.push(v);
         } else {
-          const s = l[a];
-          l[a] = l[e], l[e] = s;
+          const v = i[n];
+          i[n] = i[l], i[l] = v;
         }
-        $ = !0, p.value = l, setTimeout(() => {
-          $ = !1, C("videosChange", p.value.filter(Boolean));
+        _ = !0, y.value = i, setTimeout(() => {
+          _ = !1, g("videosChange", y.value.filter(Boolean));
         }, 0);
       } catch (r) {
         console.error("[VideoGridLayout] Drop error:", r);
       } finally {
-        u.value = -1;
+        k.value = -1;
       }
     }
-    function X(t, e) {
-      t.preventDefault(), u.value !== -1 && u.value !== e && (f.value = e);
+    function lt(t, l) {
+      t.preventDefault(), k.value !== -1 && k.value !== l && (L.value = l);
     }
-    function Z(t, e) {
+    function at(t, l) {
       t.preventDefault();
-      const a = t.target, r = t.relatedTarget;
-      a.contains(r) || f.value === e && (f.value = -1);
+      const n = t.target, r = t.relatedTarget;
+      n.contains(r) || L.value === l && (L.value = -1);
     }
-    function tt(t) {
-      const a = t.target.closest(".video-item");
-      a && (a.style.opacity = "1", a.style.cursor = "move"), m(), u.value = -1, f.value = -1;
+    function nt(t) {
+      const n = t.target.closest(".video-item");
+      n && (n.style.opacity = "1", n.style.cursor = "move"), E(), k.value = -1, L.value = -1;
     }
-    return et(() => {
-      m();
-    }), (t, e) => (i(), c("div", {
+    return st(() => {
+      E();
+    }), (t, l) => (d(), c("div", {
       class: "video-grid-layout",
       role: "application",
       "aria-label": "视频分屏布局",
-      style: V(H.value)
+      style: U(h.value)
     }, [
-      n.showToolbar ? (i(), c("div", ft, [
-        e[1] || (e[1] = d("div", { class: "toolbar-title" }, "分屏布局", -1)),
-        d("div", xt, [
-          (i(!0), c(E, null, O(j.value, (a) => {
-            var r, l, s;
-            return i(), c("button", {
-              key: a,
-              class: M(["layout-btn", { active: w.value === a }]),
-              onClick: (v) => J(a),
-              title: ((r = A(S)[a]) == null ? void 0 : r.label) || "",
-              "aria-label": `切换到${((l = A(S)[a]) == null ? void 0 : l.label) || ""}布局`,
-              "aria-pressed": w.value === a,
+      u.showToolbar ? (d(), c("div", Lt, [
+        l[1] || (l[1] = e("div", { class: "toolbar-title" }, "分屏布局", -1)),
+        e("div", It, [
+          (d(!0), c(O, null, R(b.value, (n) => {
+            var r, i, v;
+            return d(), c("button", {
+              key: n,
+              class: Y(["layout-btn", { active: p.value === n }]),
+              onClick: (D) => et(n),
+              title: ((r = F(B)[n]) == null ? void 0 : r.label) || "",
+              "aria-label": `切换到${((i = F(B)[n]) == null ? void 0 : i.label) || ""}布局`,
+              "aria-pressed": p.value === n,
               type: "button"
             }, [
-              rt(Y, { type: a }, null, 8, ["type"]),
-              d("span", bt, R(((s = A(S)[a]) == null ? void 0 : s.label) || ""), 1)
-            ], 10, mt);
+              K(Q, { type: n }, null, 8, ["type"]),
+              e("span", Tt, m(((v = F(B)[n]) == null ? void 0 : v.label) || ""), 1)
+            ], 10, Vt);
           }), 128))
         ])
-      ])) : F("", !0),
-      d("div", Dt, [
-        d("div", {
+      ])) : H("", !0),
+      e("div", Bt, [
+        e("div", {
           class: "video-grid",
-          style: V(z.value)
+          style: U(a.value)
         }, [
-          (i(!0), c(E, null, O(b.value, (a, r) => {
-            var l, s, v;
-            return i(), c("div", {
-              key: ((l = D.value[r]) == null ? void 0 : l.id) ?? r,
-              class: M(["video-item", {
-                "main-video": q(r),
-                dragging: u.value === r,
-                "drag-over": f.value === r && u.value !== r
+          (d(!0), c(O, null, R(T.value, (n, r) => {
+            var i, v, D;
+            return d(), c("div", {
+              key: ((i = $.value[r]) == null ? void 0 : i.id) ?? r,
+              class: Y(["video-item", {
+                "main-video": tt(r),
+                dragging: k.value === r,
+                "drag-over": L.value === r && k.value !== r
               }]),
-              style: V(W(r)),
+              style: U(Z(r)),
               draggable: !0,
-              "aria-label": `视频 ${r + 1}: ${((s = D.value[r]) == null ? void 0 : s.title) || ((v = D.value[r]) == null ? void 0 : v.id) || ""}`,
+              "aria-label": `视频 ${r + 1}: ${((v = $.value[r]) == null ? void 0 : v.title) || ((D = $.value[r]) == null ? void 0 : D.id) || ""}`,
               role: "article",
               tabindex: "0",
-              onDragstart: (h) => K(h, r),
-              onDragover: e[0] || (e[0] = at(() => {
+              onDragstart: (S) => ot(S, r),
+              onDragover: l[0] || (l[0] = ct(() => {
               }, ["prevent"])),
-              onDragenter: (h) => X(h, r),
-              onDragleave: (h) => Z(h, r),
-              onDrop: (h) => Q(h, r),
-              onDragend: tt
+              onDragenter: (S) => lt(S, r),
+              onDragleave: (S) => at(S, r),
+              onDrop: (S) => rt(S, r),
+              onDragend: nt
             }, [
-              lt(t.$slots, "video", {
-                video: D.value[r],
+              dt(t.$slots, "video", {
+                video: $.value[r],
                 index: r
               }, () => [
-                d("div", _t, [
-                  d("div", $t, R(r + 1), 1)
+                e("div", Gt, [
+                  e("div", Nt, m(N(r)), 1)
                 ])
               ], !0)
-            ], 46, Lt);
+            ], 46, At);
           }), 128))
         ], 4)
       ])
     ], 4));
   }
-}), Gt = /* @__PURE__ */ U(At, [["__scopeId", "data-v-222ef64d"]]), Nt = {
-  VideoGridLayout: Gt,
-  VideoLayoutIcon: Y
-}, Et = {
-  install(n) {
-    Object.entries(Nt).forEach(([k, o]) => {
-      n.component(k, o);
+}), X = /* @__PURE__ */ W(Rt, [["__scopeId", "data-v-df2d4d67"]]), Ut = { class: "video-split-screen-example" }, Ft = { class: "example-controls" }, Pt = { class: "control-group" }, jt = { class: "layout-buttons" }, Yt = ["onClick"], zt = { class: "control-group" }, Ht = { class: "video-buttons" }, Wt = ["disabled"], Jt = ["disabled"], qt = { class: "control-group" }, Kt = { class: "placeholder-controls" }, Qt = { class: "example-content" }, Xt = { class: "video-grid-container" }, Zt = { class: "custom-video-item" }, te = { class: "video-content" }, ee = { class: "video-info" }, oe = { class: "video-title" }, re = { class: "video-id" }, le = { class: "example-info" }, ae = { class: "info-panel" }, ne = { class: "info-item" }, ie = { class: "info-item" }, se = { class: "info-item" }, ce = { key: 0 }, de = { key: 1 }, ue = { key: 2 }, he = { class: "info-panel" }, we = { class: "info-panel" }, pe = { class: "log-list" }, ve = /* @__PURE__ */ z({
+  __name: "VideoSplitScreenExample",
+  setup(u) {
+    const w = C([
+      { id: 1, title: "摄像头 1", url: "rtmp://example1.com/live" },
+      { id: 2, title: "摄像头 2", url: "rtmp://example2.com/live" },
+      { id: 3, title: "摄像头 3", url: "rtmp://example3.com/live" },
+      { id: 4, title: "摄像头 4", url: "rtmp://example4.com/live" }
+    ]), o = C("4"), g = C(!1), p = C(!1), b = C(""), y = f(() => {
+      if (p.value)
+        return (s) => `位置 ${s + 1}`;
+      if (g.value)
+        return b.value || "自定义占位符";
+    }), V = C([]), _ = C([]);
+    function x(s) {
+      const h = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+      _.value.unshift({ time: h, message: s }), _.value.length > 10 && (_.value = _.value.slice(0, 10));
+    }
+    function T(s) {
+      o.value = s, x(`切换到 ${s} 分屏布局`);
+    }
+    function G() {
+      const s = Math.max(...w.value.map((a) => a.id)) + 1;
+      w.value.push({
+        id: s,
+        title: `摄像头 ${s}`,
+        url: `rtmp://example${s}.com/live`
+      }), x(`添加视频: 摄像头 ${s}`);
+    }
+    function $() {
+      if (w.value.length > 1) {
+        const s = w.value.pop();
+        x(`移除视频: ${s == null ? void 0 : s.title}`);
+      }
+    }
+    function k() {
+      w.value = [
+        { id: 1, title: "摄像头 1", url: "rtmp://example1.com/live" },
+        { id: 2, title: "摄像头 2", url: "rtmp://example2.com/live" },
+        { id: 3, title: "摄像头 3", url: "rtmp://example3.com/live" },
+        { id: 4, title: "摄像头 4", url: "rtmp://example4.com/live" }
+      ], o.value = "4", g.value = !1, p.value = !1, b.value = "", V.value = [], x("重置所有设置");
+    }
+    function L(s) {
+      console.log("Videos changed:", s), w.value = s, x(`视频重新排序: ${s.map((a) => a.title).join(" → ")}`);
+    }
+    return A([g, p], () => {
+      g.value && p.value && (p.value = !1), x("更新占位符配置");
+    }), A(b, () => {
+      x(`设置占位符文本: "${b.value}"`);
+    }), x("示例组件初始化完成"), (s, a) => (d(), c("div", Ut, [
+      a[16] || (a[16] = e("div", { class: "example-header" }, [
+        e("h1", null, "Video Split Screen 示例"),
+        e("p", null, "演示所有功能：布局切换、拖拽排序、占位符配置")
+      ], -1)),
+      e("div", Ft, [
+        e("div", Pt, [
+          a[3] || (a[3] = e("h3", null, "布局切换", -1)),
+          e("div", jt, [
+            (d(), c(O, null, R(["1", "2", "3", "4", "6", "7", "8", "9", "10", "13", "16"], (h) => e("button", {
+              key: h,
+              class: Y(["layout-btn", { active: o.value === h }]),
+              onClick: (N) => T(h)
+            }, m(h) + "分屏 ", 11, Yt)), 64))
+          ])
+        ]),
+        e("div", zt, [
+          a[4] || (a[4] = e("h3", null, "视频管理", -1)),
+          e("div", Ht, [
+            e("button", {
+              onClick: G,
+              disabled: w.value.length >= 16
+            }, "添加视频", 8, Wt),
+            e("button", {
+              onClick: $,
+              disabled: w.value.length <= 1
+            }, "移除视频", 8, Jt),
+            e("button", { onClick: k }, "重置")
+          ])
+        ]),
+        e("div", qt, [
+          a[7] || (a[7] = e("h3", null, "占位符配置", -1)),
+          e("div", Kt, [
+            e("label", null, [
+              P(e("input", {
+                "onUpdate:modelValue": a[0] || (a[0] = (h) => g.value = h),
+                type: "checkbox"
+              }, null, 512), [
+                [q, g.value]
+              ]),
+              a[5] || (a[5] = M(" 使用自定义文本 ", -1))
+            ]),
+            g.value ? P((d(), c("input", {
+              key: 0,
+              "onUpdate:modelValue": a[1] || (a[1] = (h) => b.value = h),
+              type: "text",
+              placeholder: "输入占位符文本"
+            }, null, 512)), [
+              [ut, b.value]
+            ]) : H("", !0),
+            e("label", null, [
+              P(e("input", {
+                "onUpdate:modelValue": a[2] || (a[2] = (h) => p.value = h),
+                type: "checkbox"
+              }, null, 512), [
+                [q, p.value]
+              ]),
+              a[6] || (a[6] = M(" 使用函数生成 ", -1))
+            ])
+          ])
+        ])
+      ]),
+      e("div", Qt, [
+        e("div", Xt, [
+          K(X, {
+            videos: w.value,
+            layout: o.value,
+            "placeholder-text": y.value,
+            placeholders: V.value,
+            onVideosChange: L,
+            width: "100%",
+            height: "500px"
+          }, {
+            video: ht(({ video: h, index: N }) => [
+              e("div", Zt, [
+                e("div", te, [
+                  a[8] || (a[8] = e("div", { class: "video-icon" }, "📹", -1)),
+                  e("div", ee, [
+                    e("div", oe, m(h.title), 1),
+                    e("div", re, "ID: " + m(h.id), 1)
+                  ])
+                ]),
+                a[9] || (a[9] = e("div", { class: "drag-handle" }, "⋮⋮", -1))
+              ])
+            ]),
+            _: 1
+          }, 8, ["videos", "layout", "placeholder-text", "placeholders"])
+        ]),
+        e("div", le, [
+          e("div", ae, [
+            a[13] || (a[13] = e("h3", null, "当前状态", -1)),
+            e("div", ne, [
+              a[10] || (a[10] = e("strong", null, "布局:", -1)),
+              M(" " + m(o.value) + "分屏 ", 1)
+            ]),
+            e("div", ie, [
+              a[11] || (a[11] = e("strong", null, "视频数量:", -1)),
+              M(" " + m(w.value.length), 1)
+            ]),
+            e("div", se, [
+              a[12] || (a[12] = e("strong", null, "占位符:", -1)),
+              g.value ? (d(), c("span", ce, m(b.value || "无文本"), 1)) : p.value ? (d(), c("span", de, "函数生成")) : (d(), c("span", ue, "默认数字"))
+            ])
+          ]),
+          e("div", he, [
+            a[14] || (a[14] = e("h3", null, "视频数组 (videos)", -1)),
+            e("pre", null, m(JSON.stringify(w.value, null, 2)), 1)
+          ]),
+          e("div", we, [
+            a[15] || (a[15] = e("h3", null, "操作日志", -1)),
+            e("div", pe, [
+              (d(!0), c(O, null, R(_.value, (h, N) => (d(), c("div", {
+                key: N,
+                class: "log-item"
+              }, m(h.time) + ": " + m(h.message), 1))), 128))
+            ])
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ge = /* @__PURE__ */ W(ve, [["__scopeId", "data-v-4a52fa65"]]), ye = {
+  VideoGridLayout: X,
+  VideoLayoutIcon: Q,
+  VideoSplitScreenExample: ge
+}, Se = {
+  install(u) {
+    Object.entries(ye).forEach(([w, o]) => {
+      u.component(w, o);
     });
   }
 };
 export {
-  S as LAYOUT_CONFIGS,
-  Gt as VideoGridLayout,
-  Y as VideoLayoutIcon,
-  Et as default,
-  ct as getAllLayoutTypes,
-  nt as getLayoutPositions
+  B as LAYOUT_CONFIGS,
+  X as VideoGridLayout,
+  Q as VideoLayoutIcon,
+  ge as VideoSplitScreenExample,
+  Se as default,
+  pt as getAllLayoutTypes,
+  wt as getLayoutPositions
 };

package/dist/style.css

@@ -1 +1 @@
-.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-222ef64d]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-222ef64d]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-222ef64d]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-222ef64d]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-222ef64d]{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-222ef64d]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-222ef64d]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-222ef64d]{font-size:12px}.video-grid-container[data-v-222ef64d]{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-222ef64d]{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-222ef64d]{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[data-v-222ef64d]{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item[data-v-222ef64d]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-222ef64d]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-222ef64d]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-222ef64d]{border-width:1px}.video-item[data-v-222ef64d]>*{width:100%;height:100%}.video-placeholder[data-v-222ef64d]{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-222ef64d]{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-222ef64d]{flex-direction:column;align-items:flex-start}.layout-label[data-v-222ef64d]{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-df2d4d67]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-df2d4d67]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-df2d4d67]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-df2d4d67]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-df2d4d67]{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-df2d4d67]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-df2d4d67]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-df2d4d67]{font-size:12px}.video-grid-container[data-v-df2d4d67]{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-df2d4d67]{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-df2d4d67]{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[data-v-df2d4d67]{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item[data-v-df2d4d67]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-df2d4d67]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-df2d4d67]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-df2d4d67]{border-width:1px}.video-item[data-v-df2d4d67]>*{width:100%;height:100%}.video-placeholder[data-v-df2d4d67]{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-df2d4d67]{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-df2d4d67]{flex-direction:column;align-items:flex-start}.layout-label[data-v-df2d4d67]{display:none}}.video-split-screen-example[data-v-4a52fa65]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;max-width:1400px;margin:0 auto;padding:20px;background:#f8f9fa;min-height:100vh}.example-header[data-v-4a52fa65]{text-align:center;margin-bottom:30px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.example-header h1[data-v-4a52fa65]{color:#333;margin:0 0 10px;font-size:2rem}.example-header p[data-v-4a52fa65]{color:#666;margin:0;font-size:1.1rem}.example-controls[data-v-4a52fa65]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.control-group[data-v-4a52fa65]{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.control-group h3[data-v-4a52fa65]{margin:0 0 15px;color:#333;font-size:1.1rem}.layout-buttons[data-v-4a52fa65]{display:flex;flex-wrap:wrap;gap:8px}.layout-btn[data-v-4a52fa65]{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.9rem}.layout-btn[data-v-4a52fa65]:hover{border-color:#007bff;color:#007bff}.layout-btn.active[data-v-4a52fa65]{background:#007bff;color:#fff;border-color:#007bff}.video-buttons[data-v-4a52fa65]{display:flex;gap:10px}.video-buttons button[data-v-4a52fa65]{padding:8px 16px;border:none;border-radius:4px;background:#28a745;color:#fff;cursor:pointer;transition:background .2s}.video-buttons button[data-v-4a52fa65]:hover:not(:disabled){background:#218838}.video-buttons button[data-v-4a52fa65]:disabled{background:#6c757d;cursor:not-allowed}.placeholder-controls[data-v-4a52fa65]{display:flex;flex-direction:column;gap:10px}.placeholder-controls label[data-v-4a52fa65]{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}.placeholder-controls input[type=text][data-v-4a52fa65]{padding:6px 12px;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.example-content[data-v-4a52fa65]{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}.video-grid-container[data-v-4a52fa65]{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.custom-video-item[data-v-4a52fa65]{width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;overflow:hidden;color:#fff;position:relative}.video-content[data-v-4a52fa65]{flex:1;display:flex;align-items:center;padding:15px;gap:12px}.video-icon[data-v-4a52fa65]{font-size:2rem;opacity:.9}.video-info[data-v-4a52fa65]{flex:1}.video-title[data-v-4a52fa65]{font-size:1.1rem;font-weight:600;margin-bottom:4px}.video-id[data-v-4a52fa65]{font-size:.8rem;opacity:.8}.drag-handle[data-v-4a52fa65]{position:absolute;top:8px;right:8px;font-size:1.2rem;opacity:.7;cursor:grab;transition:opacity .2s}.custom-video-item:hover .drag-handle[data-v-4a52fa65]{opacity:1}.example-info[data-v-4a52fa65]{display:flex;flex-direction:column;gap:20px}.info-panel[data-v-4a52fa65]{background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.info-panel h3[data-v-4a52fa65]{margin:0 0 15px;color:#333;font-size:1rem}.info-item[data-v-4a52fa65]{margin-bottom:8px;font-size:.9rem}.info-item[data-v-4a52fa65]:last-child{margin-bottom:0}.info-panel pre[data-v-4a52fa65]{background:#f8f9fa;padding:10px;border-radius:4px;font-size:.8rem;overflow-x:auto;margin:0;max-height:200px;overflow-y:auto}.log-list[data-v-4a52fa65]{max-height:200px;overflow-y:auto}.log-item[data-v-4a52fa65]{padding:4px 0;border-bottom:1px solid #eee;font-size:.8rem;color:#666}.log-item[data-v-4a52fa65]:last-child{border-bottom:none}@media (max-width: 768px){.example-content[data-v-4a52fa65],.example-controls[data-v-4a52fa65]{grid-template-columns:1fr}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "video-split-screen",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Vue 3 视频分屏组件（VideoSplitScreen）",
   "keywords": [
     "vue",