不能用标签页直接控制弹幕分屏，因会导致定位错乱、事件冲突和内存泄漏；须拆分为独立模块：标签页切换仅控制video实例生命周期，弹幕绑定当前激活video并随其创建/销毁。
弹幕播放器和标签页切换是两个独立功能，强行套在一起会导致定位错乱、事件冲突、内存泄漏——根本不能直接“用标签页控制弹幕分屏”。必须拆开处理：标签页负责内容区域切换，弹幕只绑定到当前激活的 <video></video> 实例上。
为什么不能用 data-tab 控制多个弹幕层共存
常见错误是给每个标签页配一个 <div id="barrageContainer-home"> 和对应 <code><video id="video-home"></video>，然后靠 hidden 切换。问题在于：
- 所有弹幕容器若都保留在 DOM 中，
requestAnimationFrame仍在运行，即使hidden=true，动画帧和定时器不会自动停，CPU 占用飙升 - 多个
<canvas></canvas>或绝对定位弹幕层叠加时，pointer-events: none容易漏设，导致视频控件点击失效 -
video.play()触发的timeupdate事件只在当前激活的 video 上触发，其他 tab 里的 video 处于暂停或未加载状态，弹幕时间轴完全不同步
正确做法：标签页只切 video + 弹幕实例生命周期绑定
每个标签页对应一个独立的播放器模块，弹幕逻辑随 video 实例创建/销毁：
- 点击标签按钮时，先调用旧 video 的
pause()，再移除其关联的弹幕容器（el.remove()）和动画循环（cancelAnimationFrame(id)） - 新 tab 激活后，动态插入
<video></video>和专属<div class="barrage-container">，再初始化弹幕管理器（含预加载、轨道分配、丢弃策略） <li>弹幕数据按 tab 隔离：不要共享全局 <code>danmuList数组，每个实例维护自己的缓存窗口（如currentDanmuBuffer） - 若用 Canvas 渲染，每个 tab 必须有独立
canvas.getContext('2d')，不能复用同一个 context - 监听
resize事件，每次触发时重新计算弹幕animation-duration：用container.offsetWidth替代100vw - 避免在 CSS 中写死
@keyframes danmaku-fly { to { transform: translateX(-200px); } }，改用 JS 动态设置style.animationDuration = `${duration}s` - 折叠态下禁用弹幕（
isFolded && !danmuEnabled），因小屏空间不足以支撑可读弹幕密度
移动端双屏折叠设备要额外注意
Surface Duo 或华为 Mate X 展开后，window.innerWidth 突变为双倍宽度，但弹幕动画仍按单屏 100vw 计算位移，结果飞出屏幕：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：标签页切换后，旧 video 的 src 若没清空，下次激活可能触发重复加载或 CORS 错误；弹幕层若没彻底销毁，document.querySelectorAll('.danmaku').length 会持续累积，最终卡死。
