video-split-screen 1.0.24 → 1.0.25

package/dist/index.d.ts

@@ -2,7 +2,6 @@ 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 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;
+"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 a={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 a.length>0&&(B[n]=a),a}function L(){return Object.keys(k)}const j={class:"layout-icon"},H={key:0,viewBox:"0 0 48 48",fill:"none"},W={key:1,viewBox:"0 0 48 48",fill:"none"},q={key:2,viewBox:"0 0 48 48",fill:"none"},J={key:3,viewBox:"0 0 48 48",fill:"none"},K={key:4,viewBox:"0 0 48 48",fill:"none"},Q={key:5,viewBox:"0 0 48 48",fill:"none"},X={key:6,viewBox:"0 0 48 48",fill:"none"},Z={key:7,viewBox:"0 0 48 48",fill:"none"},tt={key:8,viewBox:"0 0 54 48",fill:"none"},et={key:9,viewBox:"0 0 48 48",fill:"none"},ot={key:10,viewBox:"0 0 48 48",fill:"none"},rt=t.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,a)=>(t.openBlock(),t.createElementBlock("div",j,[n.type==="1"?(t.openBlock(),t.createElementBlock("svg",H,[...a[0]||(a[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",W,[...a[1]||(a[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",q,[...a[2]||(a[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",J,[...a[3]||(a[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",K,[...a[4]||(a[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",Q,[...a[5]||(a[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",X,[...a[6]||(a[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",Z,[...a[7]||(a[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",tt,[...a[8]||(a[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",et,[...a[9]||(a[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",ot,[...a[10]||(a[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 a=n.__vccOpts||n;for(const[y,h]of p)a[y]=h;return a},E=D(rt,[["__scopeId","data-v-31e0404d"]]),at={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},lt={class:"layout-buttons"},ct=["onClick","title","aria-label","aria-pressed"],nt={class:"layout-label"},it={class:"video-grid-container",role:"region","aria-label":"视频网格"},dt=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],st={class:"video-placeholder"},ht={class:"placeholder-number"},wt=.5,ut="grabbing",pt="0.8",kt=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 a=n,y=p,h=t.ref(a.layout);t.watch(()=>a.layout,e=>{h.value=e});const _=t.computed(()=>a.availableLayouts&&a.availableLayouts.length>0?a.availableLayouts:L()),s=t.shallowRef([]);function f(e){const r=Array.isArray(e)?e:a.videos||[],l=b.value,o={};s.value.forEach((i,u)=>{i&&i.id!==void 0&&(o[i.id]=i.__labelNumber??u+1)});const c=Array.from({length:l}).map((i,u)=>{const d=r[u];if(d){const Y=o[d.id]??d.__labelNumber??u+1;return{...d,__labelNumber:Y}}});s.value=c}t.watch(()=>a.videos,e=>{if(!Array.isArray(e)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(e)},{flush:"post"});let x=!1;t.watch(s,e=>{!x&&Array.isArray(e)&&y("videosChange",e)});const V=t.computed(()=>{const e=k[h.value];return e||(console.warn(`[VideoGridLayout] Invalid layout type: ${h.value}, fallback to '4'`),k[4])}),C=t.computed(()=>N(h.value)),b=t.computed(()=>{var e;return((e=V.value)==null?void 0:e.count)||4}),v=t.computed(()=>s.value.slice(0,b.value).map(e=>e).filter(Boolean));t.computed(()=>{const e={};return v.value.forEach((r,l)=>{const o=s.value.findIndex(c=>c&&c.id===r.id);o!==-1&&(e[l]=o)}),e}),f(a.videos),t.watch(b,()=>{f(a.videos)}),t.computed(()=>{const e=C.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 w=t.ref(-1),S=t.ref(-1),g=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:a.width||"100%",height:a.height||"100%"}}),A=t.computed(()=>({width:a.width||"100%",height:a.height||"100%"}));function G(e){const r=v.value[e];return r?s.value.findIndex(o=>o&&o.id===r.id)+1:e+1}function T(e){const r=C.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 O(e){const r=C.value[e];return(r==null?void 0:r.isMain)||!1}function M(e){h.value=e,y("layoutChange",h.value)}function m(){if(g.value&&document.body.contains(g.value)){try{document.body.removeChild(g.value)}catch(e){console.warn("[VideoGridLayout] Failed to cleanup drag image:",e)}g.value=null}}function R(e,r){if(r<0||r>=s.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(w.value=r,!e.dataTransfer)return;e.dataTransfer.effectAllowed="move";const o=e.target.closest(".video-item");if(o)try{m();const c=o.cloneNode(!0);c.style.width=`${o.offsetWidth}px`,c.style.height=`${o.offsetHeight}px`,c.style.opacity=pt,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),g.value=c,e.dataTransfer.setDragImage(c,o.offsetWidth/2,o.offsetHeight/2),setTimeout(()=>{m()},100),o.style.opacity=String(wt),o.style.cursor=ut}catch(c){console.error("[VideoGridLayout] Drag start error:",c),m()}}function P(e,r){e.preventDefault(),e.stopPropagation();const l=w.value;if(l===-1||l===r){w.value=-1;return}if(l>=s.value.length){console.warn("[VideoGridLayout] No video at from index:",l),w.value=-1;return}try{const o=e.currentTarget;o&&(o.style.backgroundColor="rgba(66, 184, 131, 0.3)",o.style.borderColor="#42b883",setTimeout(()=>{o.style.backgroundColor="",o.style.borderColor=""},200));const c=[...s.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,s.value=c,setTimeout(()=>{x=!1,y("videosChange",s.value.filter(Boolean))},0)}catch(o){console.error("[VideoGridLayout] Drop error:",o)}finally{w.value=-1}}function F(e,r){e.preventDefault(),w.value!==-1&&w.value!==r&&(S.value=r)}function z(e,r){e.preventDefault();const l=e.target,o=e.relatedTarget;l.contains(o)||S.value===r&&(S.value=-1)}function U(e){const l=e.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),m(),w.value=-1,S.value=-1}return t.onBeforeUnmount(()=>{m()}),(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",at,[r[1]||(r[1]=t.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),t.createElementVNode("div",lt,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(_.value,l=>{var o,c,i;return t.openBlock(),t.createElementBlock("button",{key:l,class:t.normalizeClass(["layout-btn",{active:h.value===l}]),onClick:u=>M(l),title:((o=t.unref(k)[l])==null?void 0:o.label)||"","aria-label":`切换到${((c=t.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":h.value===l,type:"button"},[t.createVNode(E,{type:l},null,8,["type"]),t.createElementVNode("span",nt,t.toDisplayString(((i=t.unref(k)[l])==null?void 0:i.label)||""),1)],10,ct)}),128))])])):t.createCommentVNode("",!0),t.createElementVNode("div",it,[t.createElementVNode("div",{class:"video-grid",style:t.normalizeStyle($.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(C.value,(l,o)=>{var c,i,u;return t.openBlock(),t.createElementBlock("div",{key:((c=v.value[o])==null?void 0:c.id)??o,class:t.normalizeClass(["video-item",{"main-video":O(o),dragging:w.value===o,"drag-over":S.value===o&&w.value!==o}]),style:t.normalizeStyle(T(o)),draggable:!0,"aria-label":`视频 ${o+1}: ${((i=v.value[o])==null?void 0:i.title)||((u=v.value[o])==null?void 0:u.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>R(d,o),onDragover:r[0]||(r[0]=t.withModifiers(()=>{},["prevent"])),onDragenter:d=>F(d,o),onDragleave:d=>z(d,o),onDrop:d=>P(d,o),onDragend:U},[t.renderSlot(e.$slots,"video",{video:v.value[o],index:o},()=>[t.createElementVNode("div",st,[t.createElementVNode("div",ht,t.toDisplayString(G(o)),1)])],!0)],46,dt)}),128))],4)])],4))}}),I=D(kt,[["__scopeId","data-v-df2d4d67"]]),vt={VideoGridLayout:I,VideoLayoutIcon:E},yt={install(n){Object.entries(vt).forEach(([p,a])=>{n.component(p,a)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=I;exports.VideoLayoutIcon=E;exports.default=yt;exports.getAllLayoutTypes=L;exports.getLayoutPositions=N;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-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 = {
+import { defineComponent as P, createElementBlock as c, openBlock as i, createCommentVNode as F, createElementVNode as d, createStaticVNode as g, ref as B, watch as I, computed as v, shallowRef as E, onBeforeUnmount as rt, normalizeStyle as V, Fragment as T, renderList as O, unref as A, normalizeClass as M, createVNode as at, toDisplayString as R, withModifiers as lt, renderSlot as nt } from "vue";
+const C = {
   1: {
     type: "1",
     label: "1分屏",
@@ -77,11 +77,11 @@ const B = {
     cols: 4,
     rows: 4
   }
-}, j = {};
-function wt(u) {
-  if (j[u])
-    return j[u];
-  const o = {
+}, G = {};
+function ct(n) {
+  if (G[n])
+    return G[n];
+  const r = {
     1: [
       { col: 1, colSpan: 1, row: 1, rowSpan: 1 }
     ],
@@ -183,65 +183,65 @@ function wt(u) {
       { col: 3, colSpan: 1, row: 4, rowSpan: 1 },
       { col: 4, colSpan: 1, row: 4, rowSpan: 1 }
     ]
-  }[u] || [];
-  return o.length > 0 && (j[u] = o), o;
+  }[n] || [];
+  return r.length > 0 && (G[n] = r), r;
 }
-function pt() {
-  return Object.keys(B);
+function it() {
+  return Object.keys(C);
 }
-const vt = { class: "layout-icon" }, gt = {
+const dt = { class: "layout-icon" }, st = {
   key: 0,
   viewBox: "0 0 48 48",
   fill: "none"
-}, yt = {
+}, ht = {
   key: 1,
   viewBox: "0 0 48 48",
   fill: "none"
-}, kt = {
+}, wt = {
   key: 2,
   viewBox: "0 0 48 48",
   fill: "none"
-}, St = {
+}, ut = {
   key: 3,
   viewBox: "0 0 48 48",
   fill: "none"
-}, xt = {
+}, pt = {
   key: 4,
   viewBox: "0 0 48 48",
   fill: "none"
-}, mt = {
+}, vt = {
   key: 5,
   viewBox: "0 0 48 48",
   fill: "none"
-}, ft = {
+}, yt = {
   key: 6,
   viewBox: "0 0 48 48",
   fill: "none"
-}, Ct = {
+}, kt = {
   key: 7,
   viewBox: "0 0 48 48",
   fill: "none"
-}, bt = {
+}, gt = {
   key: 8,
   viewBox: "0 0 54 48",
   fill: "none"
-}, _t = {
+}, St = {
   key: 9,
   viewBox: "0 0 48 48",
   fill: "none"
-}, $t = {
+}, Ct = {
   key: 10,
   viewBox: "0 0 48 48",
   fill: "none"
-}, Dt = /* @__PURE__ */ z({
+}, ft = /* @__PURE__ */ P({
   __name: "VideoLayoutIcon",
   props: {
     type: {}
   },
-  setup(u) {
-    return (w, o) => (d(), c("div", vt, [
-      u.type === "1" ? (d(), c("svg", gt, [...o[0] || (o[0] = [
-        e("rect", {
+  setup(n) {
+    return (k, r) => (i(), c("div", dt, [
+      n.type === "1" ? (i(), c("svg", st, [...r[0] || (r[0] = [
+        d("rect", {
           x: "4",
           y: "4",
           width: "40",
@@ -249,8 +249,8 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "2"
         }, null, -1)
-      ])])) : u.type === "2" ? (d(), c("svg", yt, [...o[1] || (o[1] = [
-        e("rect", {
+      ])])) : n.type === "2" ? (i(), c("svg", ht, [...r[1] || (r[1] = [
+        d("rect", {
           x: "4",
           y: "4",
           width: "19",
@@ -258,7 +258,7 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        e("rect", {
+        d("rect", {
           x: "25",
           y: "4",
           width: "19",
@@ -266,8 +266,8 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1)
-      ])])) : u.type === "3" ? (d(), c("svg", kt, [...o[2] || (o[2] = [
-        e("rect", {
+      ])])) : n.type === "3" ? (i(), c("svg", wt, [...r[2] || (r[2] = [
+        d("rect", {
           x: "4",
           y: "4",
           width: "20",
@@ -275,7 +275,7 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "2"
         }, null, -1),
-        e("rect", {
+        d("rect", {
           x: "26",
           y: "4",
           width: "18",
@@ -283,7 +283,7 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        e("rect", {
+        d("rect", {
           x: "26",
           y: "25",
           width: "18",
@@ -291,8 +291,8 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1)
-      ])])) : u.type === "4" ? (d(), c("svg", St, [...o[3] || (o[3] = [
-        e("rect", {
+      ])])) : n.type === "4" ? (i(), c("svg", ut, [...r[3] || (r[3] = [
+        d("rect", {
           x: "4",
           y: "4",
           width: "19",
@@ -300,7 +300,7 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        e("rect", {
+        d("rect", {
           x: "25",
           y: "4",
           width: "19",
@@ -308,7 +308,7 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        e("rect", {
+        d("rect", {
           x: "4",
           y: "25",
           width: "19",
@@ -316,7 +316,7 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1),
-        e("rect", {
+        d("rect", {
           x: "25",
           y: "25",
           width: "19",
@@ -324,38 +324,38 @@ const vt = { class: "layout-icon" }, gt = {
           stroke: "currentColor",
           "stroke-width": "1.5"
         }, null, -1)
-      ])])) : 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)
+      ])])) : n.type === "6" ? (i(), c("svg", pt, [...r[4] || (r[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", vt, [...r[5] || (r[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", yt, [...r[6] || (r[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", kt, [...r[7] || (r[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", gt, [...r[8] || (r[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", St, [...r[9] || (r[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", Ct, [...r[10] || (r[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)
     ]));
   }
-}), W = (u, w) => {
-  const o = u.__vccOpts || u;
-  for (const [g, p] of w)
-    o[g] = p;
-  return o;
-}, Q = /* @__PURE__ */ W(Dt, [["__scopeId", "data-v-31e0404d"]]), Lt = {
+}), U = (n, k) => {
+  const r = n.__vccOpts || n;
+  for (const [f, u] of k)
+    r[f] = u;
+  return r;
+}, Y = /* @__PURE__ */ U(ft, [["__scopeId", "data-v-31e0404d"]]), xt = {
   key: 0,
   class: "layout-toolbar",
   role: "toolbar",
   "aria-label": "布局切换工具栏"
-}, It = { class: "layout-buttons" }, Vt = ["onClick", "title", "aria-label", "aria-pressed"], Tt = { class: "layout-label" }, Bt = {
+}, mt = { class: "layout-buttons" }, bt = ["onClick", "title", "aria-label", "aria-pressed"], Dt = { class: "layout-label" }, It = {
   class: "video-grid-container",
   role: "region",
   "aria-label": "视频网格"
-}, 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({
+}, Lt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], _t = { class: "video-placeholder" }, $t = { class: "placeholder-number" }, Bt = 0.5, Vt = "grabbing", At = "0.8", Gt = /* @__PURE__ */ P({
   __name: "VideoGridLayout",
   props: {
     videos: {},
@@ -368,419 +368,246 @@ const vt = { class: "layout-icon" }, gt = {
     placeholders: {}
   },
   emits: ["layoutChange", "videosChange"],
-  setup(u, { emit: w }) {
-    const o = u, g = w, p = C(o.layout);
-    A(() => o.layout, (t) => {
-      p.value = t;
+  setup(n, { emit: k }) {
+    const r = n, f = k, u = B(r.layout);
+    I(() => r.layout, (t) => {
+      u.value = t;
     });
-    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 j = v(() => r.availableLayouts && r.availableLayouts.length > 0 ? r.availableLayouts : it()), w = E([]);
+    function L(t) {
+      const e = Array.isArray(t) ? t : r.videos || [], a = $.value, o = {};
+      w.value.forEach((s, y) => {
+        s && s.id !== void 0 && (o[s.id] = s.__labelNumber ?? y + 1);
       });
-      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 };
+      const l = Array.from({ length: a }).map((s, y) => {
+        const h = e[y];
+        if (h) {
+          const et = o[h.id] ?? h.__labelNumber ?? y + 1;
+          return { ...h, __labelNumber: et };
         }
       });
-      y.value = i;
+      w.value = l;
     }
-    A(() => o.videos, (t) => {
+    I(() => r.videos, (t) => {
       if (!Array.isArray(t)) {
         console.warn("[VideoGridLayout] Invalid videos prop, expected array");
         return;
       }
-      V(t);
+      L(t);
     }, { flush: "post" });
     let _ = !1;
-    A(y, (t) => {
-      !_ && Array.isArray(t) && g("videosChange", t);
+    I(w, (t) => {
+      !_ && Array.isArray(t) && f("videosChange", t);
     });
-    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(() => {
+    const N = v(() => {
+      const t = C[u.value];
+      return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${u.value}, fallback to '4'`), C[4]);
+    }), D = v(() => ct(u.value)), $ = v(() => {
       var t;
-      return ((t = x.value) == null ? void 0 : t.count) || 4;
-    }), $ = f(() => y.value.slice(0, G.value).map((t) => t).filter(Boolean));
-    f(() => {
+      return ((t = N.value) == null ? void 0 : t.count) || 4;
+    }), S = v(() => w.value.slice(0, $.value).map((t) => t).filter(Boolean));
+    v(() => {
       const t = {};
-      return $.value.forEach((l, n) => {
-        const r = y.value.findIndex((i) => i && i.id === l.id);
-        r !== -1 && (t[n] = r);
+      return S.value.forEach((e, a) => {
+        const o = w.value.findIndex((l) => l && l.id === e.id);
+        o !== -1 && (t[a] = o);
       }), 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);
+    }), L(r.videos), I($, () => {
+      L(r.videos);
+    }), v(() => {
+      const t = D.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);
     });
-    const k = C(-1), L = C(-1), s = J(null), a = f(() => {
-      const t = x.value;
+    const p = B(-1), x = B(-1), m = E(null), z = v(() => {
+      const t = N.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%"
+        width: r.width || "100%",
+        height: r.height || "100%"
       };
-    }), h = f(() => ({
-      width: o.width || "100%",
-      height: o.height || "100%"
+    }), H = v(() => ({
+      width: r.width || "100%",
+      height: r.height || "100%"
     }));
-    function N(t) {
-      const l = $.value[t];
-      return l ? y.value.findIndex((r) => r && r.id === l.id) + 1 : t + 1;
+    function W(t) {
+      const e = S.value[t];
+      return e ? w.value.findIndex((o) => o && o.id === e.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 = D.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 tt(t) {
-      const l = T.value[t];
-      return (l == null ? void 0 : l.isMain) || !1;
+    function J(t) {
+      const e = D.value[t];
+      return (e == null ? void 0 : e.isMain) || !1;
     }
-    function et(t) {
-      p.value = t, g("layoutChange", p.value);
+    function K(t) {
+      u.value = t, f("layoutChange", u.value);
     }
-    function E() {
-      if (s.value && document.body.contains(s.value)) {
+    function b() {
+      if (m.value && document.body.contains(m.value)) {
         try {
-          document.body.removeChild(s.value);
+          document.body.removeChild(m.value);
         } catch (t) {
           console.warn("[VideoGridLayout] Failed to cleanup drag image:", t);
         }
-        s.value = null;
+        m.value = null;
       }
     }
-    function ot(t, l) {
-      if (l < 0 || l >= y.value.length) {
-        console.warn("[VideoGridLayout] Invalid drag index:", l);
+    function Q(t, e) {
+      if (e < 0 || e >= w.value.length) {
+        console.warn("[VideoGridLayout] Invalid drag index:", e);
         return;
       }
-      if (k.value = l, !t.dataTransfer) return;
+      if (p.value = e, !t.dataTransfer) return;
       t.dataTransfer.effectAllowed = "move";
-      const r = t.target.closest(".video-item");
-      if (r)
+      const o = t.target.closest(".video-item");
+      if (o)
         try {
-          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();
+          b();
+          const l = o.cloneNode(!0);
+          l.style.width = `${o.offsetWidth}px`, l.style.height = `${o.offsetHeight}px`, l.style.opacity = At, l.style.position = "absolute", l.style.top = "-9999px", l.style.pointerEvents = "none", document.body.appendChild(l), m.value = l, t.dataTransfer.setDragImage(l, o.offsetWidth / 2, o.offsetHeight / 2), setTimeout(() => {
+            b();
+          }, 100), o.style.opacity = String(Bt), o.style.cursor = Vt;
+        } catch (l) {
+          console.error("[VideoGridLayout] Drag start error:", l), b();
         }
     }
-    function rt(t, l) {
+    function X(t, e) {
       t.preventDefault(), t.stopPropagation();
-      const n = k.value;
-      if (n === -1 || n === l) {
-        k.value = -1;
+      const a = p.value;
+      if (a === -1 || a === e) {
+        p.value = -1;
         return;
       }
-      if (n >= y.value.length) {
-        console.warn("[VideoGridLayout] No video at from index:", n), k.value = -1;
+      if (a >= w.value.length) {
+        console.warn("[VideoGridLayout] No video at from index:", a), p.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 = "";
+        const o = t.currentTarget;
+        o && (o.style.backgroundColor = "rgba(66, 184, 131, 0.3)", o.style.borderColor = "#42b883", setTimeout(() => {
+          o.style.backgroundColor = "", o.style.borderColor = "";
         }, 200));
-        const i = [...y.value];
-        if (l >= i.length) {
-          const v = i[n];
-          i.splice(n, 1), i.push(v);
+        const l = [...w.value];
+        if (e >= l.length) {
+          const s = l[a];
+          l.splice(a, 1), l.push(s);
         } else {
-          const v = i[n];
-          i[n] = i[l], i[l] = v;
+          const s = l[a];
+          l[a] = l[e], l[e] = s;
         }
-        _ = !0, y.value = i, setTimeout(() => {
-          _ = !1, g("videosChange", y.value.filter(Boolean));
+        _ = !0, w.value = l, setTimeout(() => {
+          _ = !1, f("videosChange", w.value.filter(Boolean));
         }, 0);
-      } catch (r) {
-        console.error("[VideoGridLayout] Drop error:", r);
+      } catch (o) {
+        console.error("[VideoGridLayout] Drop error:", o);
       } finally {
-        k.value = -1;
+        p.value = -1;
       }
     }
-    function lt(t, l) {
-      t.preventDefault(), k.value !== -1 && k.value !== l && (L.value = l);
+    function Z(t, e) {
+      t.preventDefault(), p.value !== -1 && p.value !== e && (x.value = e);
     }
-    function at(t, l) {
+    function tt(t, e) {
       t.preventDefault();
-      const n = t.target, r = t.relatedTarget;
-      n.contains(r) || L.value === l && (L.value = -1);
+      const a = t.target, o = t.relatedTarget;
+      a.contains(o) || x.value === e && (x.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;
+    function ot(t) {
+      const a = t.target.closest(".video-item");
+      a && (a.style.opacity = "1", a.style.cursor = "move"), b(), p.value = -1, x.value = -1;
     }
-    return st(() => {
-      E();
-    }), (t, l) => (d(), c("div", {
+    return rt(() => {
+      b();
+    }), (t, e) => (i(), c("div", {
       class: "video-grid-layout",
       role: "application",
       "aria-label": "视频分屏布局",
-      style: U(h.value)
+      style: V(H.value)
     }, [
-      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,
+      n.showToolbar ? (i(), c("div", xt, [
+        e[1] || (e[1] = d("div", { class: "toolbar-title" }, "分屏布局", -1)),
+        d("div", mt, [
+          (i(!0), c(T, null, O(j.value, (a) => {
+            var o, l, s;
+            return i(), c("button", {
+              key: a,
+              class: M(["layout-btn", { active: u.value === a }]),
+              onClick: (y) => K(a),
+              title: ((o = A(C)[a]) == null ? void 0 : o.label) || "",
+              "aria-label": `切换到${((l = A(C)[a]) == null ? void 0 : l.label) || ""}布局`,
+              "aria-pressed": u.value === a,
               type: "button"
             }, [
-              K(Q, { type: n }, null, 8, ["type"]),
-              e("span", Tt, m(((v = F(B)[n]) == null ? void 0 : v.label) || ""), 1)
-            ], 10, Vt);
+              at(Y, { type: a }, null, 8, ["type"]),
+              d("span", Dt, R(((s = A(C)[a]) == null ? void 0 : s.label) || ""), 1)
+            ], 10, bt);
           }), 128))
         ])
-      ])) : H("", !0),
-      e("div", Bt, [
-        e("div", {
+      ])) : F("", !0),
+      d("div", It, [
+        d("div", {
           class: "video-grid",
-          style: U(a.value)
+          style: V(z.value)
         }, [
-          (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
+          (i(!0), c(T, null, O(D.value, (a, o) => {
+            var l, s, y;
+            return i(), c("div", {
+              key: ((l = S.value[o]) == null ? void 0 : l.id) ?? o,
+              class: M(["video-item", {
+                "main-video": J(o),
+                dragging: p.value === o,
+                "drag-over": x.value === o && p.value !== o
               }]),
-              style: U(Z(r)),
+              style: V(q(o)),
               draggable: !0,
-              "aria-label": `视频 ${r + 1}: ${((v = $.value[r]) == null ? void 0 : v.title) || ((D = $.value[r]) == null ? void 0 : D.id) || ""}`,
+              "aria-label": `视频 ${o + 1}: ${((s = S.value[o]) == null ? void 0 : s.title) || ((y = S.value[o]) == null ? void 0 : y.id) || ""}`,
               role: "article",
               tabindex: "0",
-              onDragstart: (S) => ot(S, r),
-              onDragover: l[0] || (l[0] = ct(() => {
+              onDragstart: (h) => Q(h, o),
+              onDragover: e[0] || (e[0] = lt(() => {
               }, ["prevent"])),
-              onDragenter: (S) => lt(S, r),
-              onDragleave: (S) => at(S, r),
-              onDrop: (S) => rt(S, r),
-              onDragend: nt
+              onDragenter: (h) => Z(h, o),
+              onDragleave: (h) => tt(h, o),
+              onDrop: (h) => X(h, o),
+              onDragend: ot
             }, [
-              dt(t.$slots, "video", {
-                video: $.value[r],
-                index: r
+              nt(t.$slots, "video", {
+                video: S.value[o],
+                index: o
               }, () => [
-                e("div", Gt, [
-                  e("div", Nt, m(N(r)), 1)
+                d("div", _t, [
+                  d("div", $t, R(W(o)), 1)
                 ])
               ], !0)
-            ], 46, At);
+            ], 46, Lt);
           }), 128))
         ], 4)
       ])
     ], 4));
   }
-}), 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);
+}), Nt = /* @__PURE__ */ U(Gt, [["__scopeId", "data-v-df2d4d67"]]), Et = {
+  VideoGridLayout: Nt,
+  VideoLayoutIcon: Y
+}, Ot = {
+  install(n) {
+    Object.entries(Et).forEach(([k, r]) => {
+      n.component(k, r);
     });
   }
 };
 export {
-  B as LAYOUT_CONFIGS,
-  X as VideoGridLayout,
-  Q as VideoLayoutIcon,
-  ge as VideoSplitScreenExample,
-  Se as default,
-  pt as getAllLayoutTypes,
-  wt as getLayoutPositions
+  C as LAYOUT_CONFIGS,
+  Nt as VideoGridLayout,
+  Y as VideoLayoutIcon,
+  Ot as default,
+  it as getAllLayoutTypes,
+  ct 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-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}}
+.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}}

package/package.json

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