Layui原生不支持标签页拖拽分离，需基于layuimini的miniTab.js结合DOM拖拽监听和window.open()实现；通过postMessage同步状态，分离窗口复用同地址内容并阶梯式定位。
layui本身不支持标签页拖拽分离，必须组合layuimini + 自定义事件
layui原生的layui.tab组件只提供静态标签切换，没有拖拽、分离、平铺逻辑。真正能接近微信电脑版体验的，是基于layuimini框架的miniTab.js，再叠加 DOM 拖拽监听和窗口管理逻辑。微信那种“拖出标签生成独立窗口、拖回合并”的行为，本质是浏览器多窗口通信 + iframe 内容复用，layui单页内无法原生实现。
关键点在于：不是“改造layui标签”，而是“用miniTab管理主窗口标签”，再用window.open()创建子窗口承载相同href，通过postMessage同步状态。layuimini负责主系统，分离窗口自己控制生命周期。
-
miniTab.create()仍用于主界面标签创建，确保tabId全局唯一（建议用UUID或路径哈希） - 分离窗口必须加载同一套前端资源（如
separate.html?tabId=xxx），并初始化独立layui实例 - 主窗口与分离窗口需约定
postMessage协议，例如{type: 'close', tabId: 'xxx'}通知对方关闭对应标签 - 分离窗口关闭时，应主动向主窗口发送消息，避免主界面残留无效
tabId
如何让miniTab标签支持鼠标拖拽触发分离
layuimini默认标签不可拖拽。要实现“按住标签拖出→松手新建窗口”，需在.layui-tab-title li上监听mousedown，记录起始位置，并在mouseup时判断是否移出容器边界。这不是CSS draggable属性能解决的，必须手动计算位移。
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 给每个
li加data-tab-id，与miniTab.create()传入的tabId一致 -
mousedown时保存pageX/pageY和tabId，绑定mousemove做位移检测（避免误触） -
mouseup时若位移 > 10px 且鼠标已离开.layui-tab-title区域，则调用window.open('separate.html?tabId='+tabId) - 注意阻止
selectstart和默认文本选中，否则拖拽会高亮文字
分离窗口如何复用原标签页内容且保持状态同步
直接用iframe加载同地址不行——跨窗口iframe无法共享 localStorage 或 Vue 实例。正确做法是分离窗口也走单页逻辑，但跳过菜单渲染，直取tabId参数加载对应模块。
- 分离窗口页面（如
separate.html）不引入左侧菜单，只初始化layui和miniTab，然后miniTab.render({ menuList: [], homeInfo: {} }) - 解析 URL 参数
tabId，调用miniTab.create({ tabId, href, title, isIframe: true })还原标签 - 所有业务数据存于后端或用
localStorage+storage事件同步（注意同源限制） - 表单编辑等临时状态，需通过
postMessage双向广播，例如{type: 'form-dirty', tabId: 'xxx', value: {...}}
平铺多个分离窗口时如何避免遮挡和定位错乱
浏览器对window.open()的位置控制很弱，left/top参数在多屏或缩放下极易失效。微信电脑版实际用的是 Electron 的BrowserWindow API，网页端只能模拟：用window.screenX/Y推算可用区域，再按固定偏移递增。
- 首次分离窗口：设
left=100, top=100（避开任务栏） - 后续分离：取前一个窗口
window.screenX + 20和window.screenY + 20，形成阶梯式排列 - 监听
resize和move事件，将位置存入localStorage，下次打开时读取 - 禁用
resizable: false，否则用户无法手动调整——网页端没权限强制锁定窗口大小
最易被忽略的是跨窗口焦点管理：分离窗口激活时，主窗口应自动blur，避免键盘事件冲突；关闭任一分离窗口后，主窗口需重新focus并检查miniTab当前激活项是否还存在。
