time-axis-plus 0.0.1

package/index.es.js

@@ -0,0 +1,896 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".timeline-group[data-v-b90b2c6f]{font-size:0}.timeline-group .timeline-canvas[data-v-b90b2c6f]{background-color:#2b2f33}.timeline-group canvas[data-v-b90b2c6f]{display:block;touch-action:none}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { openBlock as x, createElementBlock as T, normalizeStyle as b } from "vue";
+const y = {
+  borderColor: "rgb(151, 158, 167)",
+  // 上下边框线
+  graduationColor: "rgba(151, 158, 167, 1)",
+  // 刻度线
+  tickTextColor: "#ffffff",
+  // 刻度文字
+  hoverLineColor: "rgb(194, 202, 215)",
+  // 悬浮十字线
+  hoverTextColor: "rgb(0, 255, 0)",
+  // 悬浮时间文字
+  overviewBg: "rgb(43, 47, 51)",
+  // 概览条背景
+  overviewTickColor: "rgba(151, 158, 167, 0.35)",
+  // 概览条小时参考刻度
+  overviewWindowColor: "rgba(64, 196, 255, 0.15)",
+  // 概览条可视窗口填充
+  overviewWindowBorder: "rgb(64, 196, 255)",
+  // 概览条可视窗口描边
+  overviewPlayColor: "rgb(255, 92, 92)"
+  // 概览条播放位置线
+};
+class C {
+  constructor(t) {
+    if (!t)
+      throw new Error("timeAxis: options is required");
+    let e = typeof t.container == "string" ? document.getElementById(t.container) : t.container;
+    if (!e)
+      throw new Error("timeAxis: options.container is required（DOM 元素或 id 字符串）");
+    let i = {
+      visibleHours: 24,
+      minVisibleHours: 0.02,
+      // 可见时长下限（小时），即放大极限（可放大到秒级刻度）
+      maxVisibleHours: 24,
+      // 可见时长上限（小时），即缩小极限
+      graduationMinStep: 10,
+      // 可选刻度步长（秒），均能整除 86400；
+      // 步长按"相邻文字刻度间格数为 5 的倍数"挑选：
+      // 秒级 1/2/6/12 → 每分钟 60/30/10/5 格；分钟级 60~720 → 每小时 60/30/15/10/5 格
+      secondsPerStep: [1, 2, 6, 12, 60, 120, 240, 360, 720, 3600, 7200, 14400, 21600, 43200, 86400],
+      segmentStyle: {
+        background: "rgba(24,208,217,0.5)"
+      },
+      pointerOptions: {
+        beginY: 0,
+        endY: 30,
+        color: "rgb(64, 196, 255)",
+        width: 2
+      },
+      // 可视边界（毫秒时间戳），null 表示不限制
+      minTime: null,
+      maxTime: null,
+      // 轴起始时间（ms 时间戳），默认当天 0 点
+      startTime: this.dayStartOf(Date.now()),
+      // 画布背景色
+      backgroundColor: "#000",
+      // 点击空白区域时是否吸附到最近录像片段起点
+      snapToNearest: !1,
+      // 是否显示悬浮十字线与时间提示（移动端无悬浮场景，由组件按设备决定默认值）
+      hoverTip: !0,
+      // 播放指针居中：开启后播放推进（updateTime）时自动滚动视口，让指针固定在画布中央
+      centerPointer: !1,
+      // 居中让位恢复延迟（ms）：手势暂停居中后，停止操作超过该时长自动恢复居中跟随
+      centerResumeDelay: 3e3,
+      // 双进度条：底部全天概览条（显示片段分布、可视窗口与播放位置，点击/拖动可跳转）
+      overview: !1,
+      overviewHeight: 20,
+      // 概览条高度（px）
+      overviewGap: 4,
+      // 概览条与时间轴的间距（px）
+      overviewStart: null,
+      // 概览范围起始时间（ms），null 自动推导
+      overviewEnd: null,
+      // 概览范围结束时间（ms），null 自动推导
+      // 有效时间区域 [{begin, end, style?}]，内部会规范化去重叠
+      segments: []
+    };
+    this.options = Object.assign({}, i, t), this.options.container = e, this.options.visibleHours = Math.min(this.options.maxVisibleHours, Math.max(this.options.minVisibleHours, this.options.visibleHours)), this.configMinVisibleHours = this.options.minVisibleHours, this.options.segments = this.normalizeSegments(this.options.segments), this.options.segments.length && (this.currentTimestamp = this.options.segments[0].begin), this.options.segmentStyle && this.options.segmentStyle.background || (this.options.segmentStyle = {
+      background: "rgba(24,208,217,0.5)"
+    }), this.options.axisStyle = Object.assign({}, y, this.options.axisStyle || {}), this.options.startTime = this.clampStartTime(this.options.startTime), this.options.overviewStart == null && (this.options.overviewStart = this.options.minTime != null ? this.options.minTime : this.dayStartOf(this.options.startTime)), this.options.overviewEnd == null && (this.options.overviewEnd = this.options.maxTime != null ? this.options.maxTime : this.options.overviewStart + 24 * 60 * 60 * 1e3), this.isClick = !1, this.button = 0, this.isPressDown = !1, this.isDragPointer = !1, this.currentChecked = "", this.pinchStartDistance = 0, this.hoverState = null, this.centerPaused = !1, this.lastInteractTime = 0, this.initCanvas(), this.drawStatic();
+  }
+  initCanvas() {
+    this.options.container.style.position = "relative", this.canvas = document.createElement("canvas"), this.canvas.style.position = "absolute", this.canvas.style.left = "0", this.canvas.style.top = "0", this.overlayCanvas = document.createElement("canvas"), this.overlayCanvas.style.position = "absolute", this.overlayCanvas.style.left = "0", this.overlayCanvas.style.top = "0", this.options.container.appendChild(this.canvas), this.options.container.appendChild(this.overlayCanvas), this.canvasCtx = this.canvas.getContext("2d"), this.overlayCtx = this.overlayCanvas.getContext("2d"), this.options.overview && this.mountOverview(), this.initCanvasSize(), this.canvas.style.backgroundColor = this.options.backgroundColor, this.initEvents();
+  }
+  // 设置画布尺寸（按设备像素比放大缓冲，修复高分屏/移动端文字与线条发虚）
+  initCanvasSize() {
+    let t = window.devicePixelRatio || 1, e = this.options.container.clientWidth, i = this.options.container.clientHeight, s = this.options.overview ? Math.max(0, i - this.options.overviewHeight - this.options.overviewGap) : i, o = (a, u, v) => {
+      a.width = Math.round(e * t), a.height = Math.round(v * t), a.style.width = e + "px", a.style.height = v + "px", u.setTransform(t, 0, 0, t, 0, 0);
+    };
+    o(this.canvas, this.canvasCtx, s), o(this.overlayCanvas, this.overlayCtx, s), this.overviewCanvas && (o(this.overviewCanvas, this.overviewCtx, this.options.overviewHeight), this.overviewCanvas.style.top = s + this.options.overviewGap + "px"), this.canvasWidth = e, this.canvasHeight = s, this.options.minVisibleHours = Math.min(
+      this.configMinVisibleHours,
+      this.canvasWidth / (this.options.graduationMinStep + 2) / 3600
+    );
+  }
+  resize() {
+    this.initCanvasSize(), this.drawStatic();
+  }
+  // 重绘静态层（视野/数据变化时调用）
+  drawStatic() {
+    this.pxPerMs = this.canvasWidth / (this.options.visibleHours * 60 * 60 * 1e3), this.clearCanvas(), this.initBorders(), this.initSegments(this.options.segments || []), this.initGraduationsLines(this.options.startTime), this.drawOverlay();
+  }
+  // 重绘动态层（播放跟随/悬浮等高频场景只走这里）
+  drawOverlay() {
+    if (this.clearOverlay(), this.options.hoverTip && this.hoverState) {
+      let { x: t, time: e } = this.hoverState;
+      this.drawLine(this.overlayCtx, {
+        beginX: t,
+        beginY: 0,
+        endX: t,
+        endY: this.canvasHeight,
+        color: this.options.axisStyle.hoverLineColor,
+        width: 1,
+        center: !0
+        // 线中心对准悬浮文字所在的时间坐标
+      }), this.overlayCtx.fillStyle = this.options.axisStyle.hoverTextColor, this.overlayCtx.textAlign = "center", this.overlayCtx.font = "normal normal 12px Arial,sans-serif", this.overlayCtx.fillText(this.formatDate("yyyy-MM-dd hh:mm:ss", e), t, 18);
+    }
+    this.isClick && this.currentTimestamp != null && this.drawPointer(), this.drawOverview();
+  }
+  // 初始化边框
+  initBorders() {
+    let t = this.options.axisStyle.borderColor;
+    this.drawLine(this.canvasCtx, {
+      beginX: 0,
+      beginY: 0,
+      endX: this.canvasWidth,
+      endY: 0,
+      color: t,
+      width: 1
+    }), this.drawLine(this.canvasCtx, {
+      beginX: 0,
+      beginY: this.canvasHeight,
+      endX: this.canvasWidth,
+      endY: this.canvasHeight,
+      color: t,
+      width: 1
+    });
+  }
+  // 画线（默认奇数宽度 +0.5 半像素对齐，保证边框等整数坐标线清晰不发虚；
+  // 刻度/指针/悬浮线等按时间定位的竖线传 center: true，线中心严格落在给定坐标上，
+  // 确保 1px 细刻度、2px 文字刻度与文字标签三者对齐）
+  drawLine(t, { beginX: e, beginY: i, endX: s, endY: o, color: a, width: u, center: v }) {
+    let h = !v && u % 2 === 1 ? 0.5 : 0;
+    t.beginPath(), t.moveTo(e + h, i + h), t.lineTo(s + h, o + h), t.strokeStyle = a, t.lineWidth = u, t.stroke();
+  }
+  // 有效时间区域
+  initSegments(t) {
+    t.forEach((e, i) => {
+      this.drawSegment(e, i);
+    }), this.canvasCtx.font = "normal normal 12px Arial,sans-serif", this.canvasCtx.fillStyle = this.options.axisStyle.tickTextColor;
+  }
+  // 填充时间段
+  drawSegment(t, e) {
+    let i = this.options.segmentStyle.background;
+    t.style && t.style.background && (i = t.style.background);
+    let s = this.pxPerMs * (t.begin - this.options.startTime), o = (t.end - t.begin) * this.pxPerMs;
+    this.canvasCtx.fillStyle = i, this.canvasCtx.font = "normal normal 12px Arial,sans-serif", this.canvasCtx.fillRect(s, 0, o, this.canvasHeight), this.canvasCtx.fillStyle = this.options.axisStyle.tickTextColor;
+  }
+  // 初始化刻度线（步长自适应，最小可到 1 秒）
+  initGraduationsLines(t) {
+    let e = this.canvasWidth, i = e / (this.options.visibleHours * 60 * 60), s = this.options.graduationMinStep / i, o = this.options.secondsPerStep.find((l) => l > s), a = o * i, u = e / a, v = this.ms_to_next_step(t, o), h = v * this.pxPerMs, r = o < 60 && i * 60 >= 50;
+    for (let l = 0; l <= u; l++) {
+      let m = t + v + l * o * 1e3, d = h + l * a, c = new Date(Math.round(m)), f = 10, g = 1;
+      if (c.getHours() === 0 && c.getMinutes() === 0 && c.getSeconds() === 0) {
+        f = 24, g = 2;
+        let p = this.formatDate("MM-dd", m);
+        this.canvasCtx.textAlign = "center", this.canvasCtx.fillStyle = this.options.axisStyle.tickTextColor, this.canvasCtx.font = "normal normal 12px Arial,sans-serif", this.canvasCtx.fillText(p, d, 34);
+      } else if (c.getMinutes() === 0 && c.getSeconds() === 0) {
+        f = 19, g = 2;
+        let p = this.formatDate(o < 60 ? "hh:mm:ss" : "hh:mm", m);
+        this.canvasCtx.fillStyle = this.options.axisStyle.tickTextColor, this.canvasCtx.textAlign = "center", this.canvasCtx.font = "normal normal 12px Arial,sans-serif", this.canvasCtx.fillText(p, d, 29);
+      } else if (r && c.getSeconds() === 0) {
+        f = 14, g = 2;
+        let p = this.formatDate("hh:mm:ss", m);
+        this.canvasCtx.fillStyle = this.options.axisStyle.tickTextColor, this.canvasCtx.textAlign = "center", this.canvasCtx.font = "normal normal 12px Arial,sans-serif", this.canvasCtx.fillText(p, d, 24);
+      }
+      this.drawLine(this.canvasCtx, {
+        beginX: d,
+        beginY: 0,
+        endX: d,
+        endY: f,
+        color: this.options.axisStyle.graduationColor,
+        width: g,
+        center: !0
+        // 1px 细刻度与 2px 文字刻度中心统一落在 leftPx
+      });
+    }
+  }
+  // 绘制播放指针（动态层；三角箭头为最后绘制的 path，供 isPointInPath 命中判定）
+  drawPointer() {
+    let t = this.pxPerMs * (this.currentTimestamp - this.options.startTime), e = this.overlayCtx;
+    e.beginPath(), e.moveTo(t, 0), e.lineTo(t, this.options.pointerOptions.endY), e.strokeStyle = this.options.pointerOptions.color, e.lineWidth = this.options.pointerOptions.width, e.stroke(), e.beginPath();
+    let i = 12 / Math.sin(Math.PI / 3.5);
+    e.moveTo(t, this.options.pointerOptions.endY - 1), e.lineTo(t - i / 2, 40), e.lineTo(t + i / 2, 40), e.closePath(), e.fillStyle = this.options.pointerOptions.color, e.fill();
+  }
+  // 时间戳所在日期的 0 点
+  dayStartOf(t) {
+    let e = new Date(t);
+    return e.setHours(0, 0, 0, 0), e.getTime();
+  }
+  // 绘制全天概览条（片段分布、当前可视窗口、播放指针位置）
+  drawOverview() {
+    if (!this.overviewCanvas)
+      return;
+    let t = this.overviewCtx, e = this.canvasWidth, i = this.options.overviewHeight;
+    t.clearRect(0, 0, e, i);
+    let s = this.options.overviewEnd - this.options.overviewStart;
+    if (s <= 0)
+      return;
+    let o = e / s;
+    t.fillStyle = this.options.axisStyle.overviewBg, t.fillRect(0, 0, e, i), t.strokeStyle = this.options.axisStyle.overviewTickColor, t.lineWidth = 1;
+    let a = 60 * 60 * 1e3;
+    for (let r = this.dayStartOf(this.options.overviewStart); r <= this.options.overviewEnd; r += a) {
+      if (r < this.options.overviewStart)
+        continue;
+      let l = (r - this.options.overviewStart) * o;
+      t.beginPath(), t.moveTo(l, 0), t.lineTo(l, 4), t.stroke();
+    }
+    let u = i / 2 - 3;
+    (this.options.segments || []).forEach((r) => {
+      let l = Math.max(r.begin, this.options.overviewStart), m = Math.min(r.end, this.options.overviewEnd);
+      m <= l || (t.fillStyle = r.style && r.style.background || this.options.segmentStyle.background, t.fillRect((l - this.options.overviewStart) * o, u, Math.max((m - l) * o, 1), 6));
+    });
+    let v = (this.options.startTime - this.options.overviewStart) * o, h = this.options.visibleHours * 60 * 60 * 1e3 * o;
+    if (t.fillStyle = this.options.axisStyle.overviewWindowColor, t.fillRect(v, 0, h, i), t.strokeStyle = this.options.axisStyle.overviewWindowBorder, t.strokeRect(v + 0.5, 0.5, Math.max(h - 1, 0), i - 1), this.isClick && this.currentTimestamp != null) {
+      let r = (this.currentTimestamp - this.options.overviewStart) * o;
+      r >= 0 && r <= e && this.drawLine(t, {
+        beginX: r,
+        beginY: 0,
+        endX: r,
+        endY: i,
+        color: this.options.axisStyle.overviewPlayColor,
+        width: 1,
+        center: !0
+        // 与上方时间轴指针同一时间坐标，中心对齐
+      });
+    }
+  }
+  // 距下一个刻度边界的偏移毫秒数（按本地零点刻度对齐，step 单位为秒且能整除 86400）
+  ms_to_next_step(t, e) {
+    let i = new Date(t), o = (i.getHours() * 3600 + i.getMinutes() * 60 + i.getSeconds()) % e;
+    return (o ? e - o : 0) * 1e3 - i.getMilliseconds();
+  }
+  // 轴起始时间钳制到 [minTime, maxTime] 边界内
+  clampStartTime(t) {
+    if (this.options.minTime == null && this.options.maxTime == null)
+      return t;
+    let e = this.options.visibleHours * 60 * 60 * 1e3;
+    return this.options.maxTime != null && t + e > this.options.maxTime && (t = this.options.maxTime - e), this.options.minTime != null && t < this.options.minTime && (t = this.options.minTime), t;
+  }
+  // 时间点钳制到边界内
+  clampTime(t) {
+    return this.options.minTime != null && t < this.options.minTime && (t = this.options.minTime), this.options.maxTime != null && t > this.options.maxTime && (t = this.options.maxTime), t;
+  }
+  // 注册事件（保存引用以便 destroy 时移除）；事件绑定在顶层动态层画布上
+  initEvents() {
+    this.overlayCanvas && (this.contextmenuHandler = (t) => {
+      t.preventDefault();
+    }, this.mousemoveHandler = this.canvasMousemoveFunc.bind(this), this.wheelHandler = this.mousewheelFunc.bind(this), this.mousedownHandler = this.mousedownFunc.bind(this), this.mouseupHandler = this.mouseupFunc.bind(this), this.mouseoutHandler = this.mouseoutFunc.bind(this), this.touchstartHandler = this.touchStartFunc.bind(this), this.touchmoveHandler = this.touchMoveFunc.bind(this), this.touchendHandler = this.touchEndFunc.bind(this), this.overlayCanvas.addEventListener("contextmenu", this.contextmenuHandler), this.overlayCanvas.addEventListener("mousemove", this.mousemoveHandler), this.overlayCanvas.addEventListener("wheel", this.wheelHandler, { passive: !1 }), this.overlayCanvas.addEventListener("mousedown", this.mousedownHandler), this.overlayCanvas.addEventListener("mouseup", this.mouseupHandler), this.overlayCanvas.addEventListener("mouseout", this.mouseoutHandler), this.overlayCanvas.addEventListener("touchstart", this.touchstartHandler, { passive: !1 }), this.overlayCanvas.addEventListener("touchmove", this.touchmoveHandler, { passive: !1 }), this.overlayCanvas.addEventListener("touchend", this.touchendHandler));
+  }
+  // ===== 概览层（overview）生命周期：供初始化与 updateOptions 动态开关复用 =====
+  // 挂载概览层：创建 canvas、上下文并绑定交互事件
+  mountOverview() {
+    this.overviewCanvas || (this.overviewCanvas = document.createElement("canvas"), this.overviewCanvas.style.position = "absolute", this.overviewCanvas.style.left = "0", this.options.container.appendChild(this.overviewCanvas), this.overviewCtx = this.overviewCanvas.getContext("2d"), this.bindOverviewEvents());
+  }
+  // 绑定概览层交互事件：点击/拖动跳转（鼠标与单指触摸）
+  bindOverviewEvents() {
+    this.overviewCanvas && (this.overviewMousedownHandler = this.overviewMousedownFunc.bind(this), this.overviewMousemoveHandler = () => {
+      this.overviewCanvas.style.cursor = "pointer";
+    }, this.overviewTouchstartHandler = this.overviewTouchFunc.bind(this), this.overviewTouchmoveHandler = this.overviewTouchFunc.bind(this), this.overviewCanvas.addEventListener("mousedown", this.overviewMousedownHandler), this.overviewCanvas.addEventListener("mousemove", this.overviewMousemoveHandler), this.overviewCanvas.addEventListener("touchstart", this.overviewTouchstartHandler, { passive: !1 }), this.overviewCanvas.addEventListener("touchmove", this.overviewTouchmoveHandler, { passive: !1 }));
+  }
+  // 卸载概览层：移除交互事件与 canvas，置空引用
+  unmountOverview() {
+    this.overviewCanvas && (this.overviewCanvas.removeEventListener("mousedown", this.overviewMousedownHandler), this.overviewCanvas.removeEventListener("mousemove", this.overviewMousemoveHandler), this.overviewCanvas.removeEventListener("touchstart", this.overviewTouchstartHandler), this.overviewCanvas.removeEventListener("touchmove", this.overviewTouchmoveHandler), this.overviewCanvas.remove(), this.overviewCanvas = null, this.overviewCtx = null);
+  }
+  // 销毁实例，移除全部事件监听与 canvas
+  destroy() {
+    this.overlayCanvas && (this.overlayCanvas.removeEventListener("contextmenu", this.contextmenuHandler), this.overlayCanvas.removeEventListener("mousemove", this.mousemoveHandler), this.overlayCanvas.removeEventListener("wheel", this.wheelHandler), this.overlayCanvas.removeEventListener("mousedown", this.mousedownHandler), this.overlayCanvas.removeEventListener("mouseup", this.mouseupHandler), this.overlayCanvas.removeEventListener("mouseout", this.mouseoutHandler), this.overlayCanvas.removeEventListener("touchstart", this.touchstartHandler), this.overlayCanvas.removeEventListener("touchmove", this.touchmoveHandler), this.overlayCanvas.removeEventListener("touchend", this.touchendHandler), this.overlayCanvas.remove(), this.overlayCanvas = null), this.unmountOverview(), this.canvas && (this.canvas.remove(), this.canvas = null), document.onmousemove = null, document.onmouseup = null;
+  }
+  canDragPointer(t) {
+    let e = t.offsetX, i = t.offsetY, s = window.devicePixelRatio || 1;
+    return this.overlayCtx.isPointInPath(e * s, i * s);
+  }
+  setPointer(t) {
+    this.canDragPointer(t) ? (this.options.container.style.cursor = "pointer", this.isDragPointer = !0, this.isMoveTriangle = !0) : (!this.isPressDown || this.button) && (this.isPressDown && this.isMoveTriangle || (this.isDragPointer = !1, this.isMoveTriangle = !1, this.options.container.style.cursor = ""));
+  }
+  // 鼠标点击(按下)
+  mousedownFunc(t) {
+    t.button === 0 ? (this.isPressDown = !0, this.button = t.button, this.canDragPointer(t) ? this.currentChecked = "pointer" : this.currentChecked = "axis", document.onmousemove = (e) => {
+      this.mousemoveFunc(e);
+    }, document.onmouseup = (e) => {
+      this.mouseupFunc(e), document.onmousemove = null, document.onmouseup = null;
+    }, this.isDown = !0, this.g_mousedownCursor = this.getCursorPositionX(t)) : t.button;
+  }
+  // 画布悬浮（未按下时）：只重绘动态层，显示十字线与时间提示
+  canvasMousemoveFunc(t) {
+    if (this.isPressDown)
+      return;
+    let e = this.getCursorPositionX(t);
+    this.setPointer(t), this.hoverState = {
+      x: e,
+      time: this.options.startTime + e / this.pxPerMs
+    }, this.drawOverlay();
+  }
+  // 鼠标拖动（轴或指针）
+  mousemoveFunc(t) {
+    let e = this.getCursorPositionX(t);
+    if (this.setPointer(t), this.isMove = !0, this.markUserInteract(), this.currentChecked === "axis") {
+      let i = e - this.g_mousedownCursor;
+      this.options.startTime = this.clampStartTime(this.options.startTime - Math.round(i / this.pxPerMs)), this.g_mousedownCursor = e, this.hoverState = {
+        x: e,
+        time: this.options.startTime + e / this.pxPerMs
+      }, this.drawStatic();
+    } else this.currentChecked === "pointer" && (this.currentTimestamp = this.clampTime(this.options.startTime + e / this.pxPerMs), this.g_mousedownCursor = e, this.hoverState = { x: e, time: this.currentTimestamp }, this.drawOverlay());
+  }
+  // 鼠标抬起
+  mouseupFunc(t) {
+    if (this.isPressDown && this.button === 0)
+      if (this.isPressDown = !1, this.isMove)
+        this.isMove = !1, this.currentChecked === "pointer" && (this.returnTime = this.currentTimestamp, this.returnCheckTime("drag", this.returnTime), this.drawOverlay()), this.currentChecked = "";
+      else {
+        this.isClick = !0;
+        let e = this.getCursorPositionX(t), i = this.clampTime(this.options.startTime + e / this.pxPerMs);
+        this.currentTimestamp = this.returnTime = i, this.returnCheckTime("click", this.returnTime), this.drawOverlay();
+      }
+  }
+  // 滚轮事件（滚轮上滑放大、下滑缩小）
+  mousewheelFunc(t) {
+    t.preventDefault(), this.markUserInteract();
+    let e = t.deltaY < 0 ? 1 : -1, i = this.getCursorPositionX(t), s = this.options.startTime + i / this.pxPerMs;
+    e < 0 ? this.options.visibleHours = Math.min(this.options.maxVisibleHours, this.options.visibleHours * 1.25) : e > 0 && (this.options.visibleHours = Math.max(this.options.minVisibleHours, this.options.visibleHours / 1.25));
+    let o = this.canvasWidth / (this.options.visibleHours * 60 * 60 * 1e3);
+    this.options.startTime = this.clampStartTime(s - i / o), this.drawStatic();
+  }
+  mouseoutFunc(t) {
+    this.hoverState = null, this.drawOverlay();
+  }
+  // ===== 移动端触摸手势（单指点击/拖动，双指捏合缩放） =====
+  touchStartFunc(t) {
+    if (t.preventDefault(), t.touches.length === 1)
+      this.mousedownFunc(this.normalizeTouchEvent(t.touches[0]));
+    else if (t.touches.length === 2) {
+      this.isPressDown = !1, this.isMove = !1, this.currentChecked = "", document.onmousemove = null, document.onmouseup = null, this.pinchStartDistance = this.getTouchDistance(t.touches), this.pinchStartVisibleHours = this.options.visibleHours;
+      let e = this.getTouchCenterX(t.touches) - this.overlayCanvas.getBoundingClientRect().left;
+      this.pinchCenterPosX = e, this.pinchCenterTime = this.options.startTime + e / this.pxPerMs;
+    }
+  }
+  touchMoveFunc(t) {
+    if (t.preventDefault(), t.touches.length === 1 && this.isPressDown)
+      this.mousemoveFunc(this.normalizeTouchEvent(t.touches[0]));
+    else if (t.touches.length === 2 && this.pinchStartDistance) {
+      this.markUserInteract();
+      let e = this.getTouchDistance(t.touches) / this.pinchStartDistance;
+      this.options.visibleHours = Math.min(this.options.maxVisibleHours, Math.max(this.options.minVisibleHours, this.pinchStartVisibleHours / (e * e)));
+      let i = this.canvasWidth / (this.options.visibleHours * 60 * 60 * 1e3);
+      this.options.startTime = this.clampStartTime(this.pinchCenterTime - this.pinchCenterPosX / i), this.drawStatic();
+    }
+  }
+  touchEndFunc(t) {
+    if (this.pinchStartDistance && t.touches.length < 2) {
+      this.pinchStartDistance = 0, this.isPressDown = !1, this.isMove = !1, this.currentChecked = "", document.onmousemove = null, document.onmouseup = null;
+      return;
+    }
+    this.isPressDown && t.changedTouches.length && (this.mouseupFunc(this.normalizeTouchEvent(t.changedTouches[0])), document.onmousemove = null, document.onmouseup = null);
+  }
+  // 把触摸点归一化为合成鼠标事件对象（补齐鼠标处理函数依赖的字段）
+  normalizeTouchEvent(t) {
+    let e = this.overlayCanvas.getBoundingClientRect();
+    return {
+      button: 0,
+      pageX: t.pageX,
+      pageY: t.pageY,
+      clientX: t.clientX,
+      clientY: t.clientY,
+      offsetX: t.clientX - e.left,
+      offsetY: t.clientY - e.top
+    };
+  }
+  // 两指间距（像素）
+  getTouchDistance(t) {
+    let e = t[0].clientX - t[1].clientX, i = t[0].clientY - t[1].clientY;
+    return Math.sqrt(e * e + i * i);
+  }
+  // 两指中心 X（clientX 坐标系）
+  getTouchCenterX(t) {
+    return (t[0].clientX + t[1].clientX) / 2;
+  }
+  // ===== 概览条交互（点击/拖动跳转，可视窗口居中于目标时间） =====
+  // 概览条上坐标换算为时间，并把上方时间轴的可视窗口居中到该时间
+  overviewSeek(t) {
+    let e = this.overviewCanvas.getBoundingClientRect();
+    if (e.width <= 0)
+      return;
+    this.markUserInteract();
+    let i = Math.min(e.width, Math.max(0, t - e.left)), s = this.options.overviewStart + i / e.width * (this.options.overviewEnd - this.options.overviewStart);
+    this.options.startTime = this.clampStartTime(s - this.options.visibleHours * 60 * 60 * 1e3 / 2), this.drawStatic();
+  }
+  // 概览条鼠标按下：立即跳转并进入拖动跟随
+  overviewMousedownFunc(t) {
+    t.button === 0 && (this.overviewSeek(t.clientX), document.onmousemove = (e) => {
+      this.overviewSeek(e.clientX);
+    }, document.onmouseup = () => {
+      document.onmousemove = null, document.onmouseup = null;
+    });
+  }
+  // 概览条触摸（单指点击/拖动跳转）
+  overviewTouchFunc(t) {
+    t.preventDefault(), t.touches.length && this.overviewSeek(t.touches[0].clientX);
+  }
+  // 鼠标指针X位置
+  getCursorPositionX(t) {
+    let e = 0;
+    return t || (t = window.event), t.pageX || t.pageY ? e = t.pageX : (t.clientX || t.clientY) && (e = t.clientX + document.body.scrollLeft + document.documentElement.scrollLeft), e -= this.overlayCanvas.getBoundingClientRect().left, e;
+  }
+  // 清除静态层
+  clearCanvas() {
+    this.canvasCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+  }
+  // 清除动态层
+  clearOverlay() {
+    this.overlayCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+  }
+  /**
+   * 返回点击或者拖动的时间点
+   * @param handle 触发方式{click,drag}；回调中吸附续播会覆盖为 snap
+   * @param currentTime 选中时间戳{1637164800000}
+   */
+  returnCheckTime(t, e) {
+    var o, a, u, v;
+    let i = Math.floor(e);
+    if (this.options.segments.findIndex((h) => i >= h.begin && i <= h.end) >= 0)
+      (a = (o = this.options).changeCallback) == null || a.call(o, {
+        mode: t,
+        // 触发方式
+        timestamp: i,
+        // 时间戳
+        valid: !0,
+        // 是否有效
+        nextBegin: this.getNextSegment(i)
+        // 选中时间往后最近的一段录像（完整信息），无则 null
+      });
+    else {
+      let h = i, r = !1, l = t;
+      if (this.options.snapToNearest && this.options.segments && this.options.segments.length) {
+        let m = this.getNextSegment(i);
+        m && (h = Math.floor(m.begin), r = !0, l = "snap", this.currentTimestamp = this.clampTime(h));
+      }
+      (v = (u = this.options).changeCallback) == null || v.call(u, {
+        mode: l,
+        // 触发方式{click,drag,snap}
+        timestamp: h,
+        valid: r,
+        // 按原始选中时间往后查最近一段；snap 时即被吸附到的那段，续播直接从它开始
+        nextBegin: this.getNextSegment(i)
+      });
+    }
+  }
+  formatDate(t, e) {
+    let i = e ? new Date(e) : /* @__PURE__ */ new Date();
+    t = t || "yyyy-MM-dd";
+    const s = {
+      "M+": i.getMonth() + 1,
+      // 月份
+      "d+": i.getDate(),
+      // 日
+      "h+": i.getHours(),
+      // 小时
+      "m+": i.getMinutes(),
+      // 分
+      "s+": i.getSeconds(),
+      // 秒
+      "q+": Math.floor((i.getMonth() + 3) / 3),
+      // 季度
+      S: i.getMilliseconds()
+      // 毫秒
+    };
+    /(y+)/.test(t) && (t = t.replace(RegExp.$1, (i.getFullYear() + "").substr(4 - RegExp.$1.length)));
+    for (const o in s)
+      new RegExp("(" + o + ")").test(t) && (t = t.replace(RegExp.$1, RegExp.$1.length == 1 ? s[o] : ("00" + s[o]).substr(("" + s[o]).length)));
+    return t;
+  }
+  updateDatas(t) {
+    this.options.visibleHours = Math.min(this.options.maxVisibleHours, Math.max(this.options.minVisibleHours, t.visibleHours)), this.options.startTime = t.startTime, t.minTime !== void 0 && (this.options.minTime = t.minTime), t.maxTime !== void 0 && (this.options.maxTime = t.maxTime), t.overviewStart != null && (this.options.overviewStart = t.overviewStart), t.overviewEnd != null && (this.options.overviewEnd = t.overviewEnd), this.options.startTime = this.clampStartTime(this.options.startTime), this.options.segments = this.normalizeSegments(t.segments), !this.options.segments.some((i) => this.currentTimestamp >= i.begin && this.currentTimestamp <= i.end) && this.options.segments.length && (this.currentTimestamp = this.options.segments[0].begin), this.drawStatic();
+  }
+  // 通用配置更新：传入 json 配置对象，逐项合并到 options 并按需重建/重绘
+  // 支持运行时动态开关 overview（重建/销毁概览层），以及样式/边界/片段/视口等更新
+  // 与 updateDatas 的区别：updateDatas 面向数据刷新，updateOptions 面向任意配置项（含影响 canvas 结构的 overview）
+  updateOptions(t) {
+    if (!t || typeof t != "object") return;
+    const e = this.options.overview, i = ["axisStyle", "segments", "visibleHours", "startTime"];
+    Object.keys(t).forEach((s) => {
+      t[s] === void 0 || i.includes(s) || (this.options[s] = t[s]);
+    }), t.axisStyle && (this.options.axisStyle = Object.assign({}, this.options.axisStyle, t.axisStyle)), t.segments !== void 0 && (this.options.segments = this.normalizeSegments(t.segments)), t.visibleHours !== void 0 && (this.options.visibleHours = Math.min(this.options.maxVisibleHours, Math.max(this.options.minVisibleHours, t.visibleHours))), t.startTime !== void 0 && (this.options.startTime = t.startTime), (t.startTime !== void 0 || t.minTime !== void 0 || t.maxTime !== void 0) && (this.options.startTime = this.clampStartTime(this.options.startTime)), t.overview !== void 0 && t.overview !== e && (this.options.overview ? this.mountOverview() : this.unmountOverview()), ["overview", "overviewHeight", "overviewGap"].some((s) => t[s] !== void 0) && this.initCanvasSize(), t.backgroundColor !== void 0 && this.canvas && (this.canvas.style.backgroundColor = t.backgroundColor), t.segments !== void 0 && !this.options.segments.some((o) => this.currentTimestamp >= o.begin && this.currentTimestamp <= o.end) && this.options.segments.length && (this.currentTimestamp = this.options.segments[0].begin), this.drawStatic();
+  }
+  // 更新播放指针时间（默认走快速通道：只重绘动态层，不触发静态层重绘；
+  // 开启 centerPointer 后，播放推进时滚动视口让指针固定在画布中央，此时需重绘静态层）
+  updateTime(t) {
+    var s, o;
+    let e = this.clampTime(t);
+    this.currentTimestamp = e, this.returnTime = e, this.isClick = !0, this.options.centerPointer && !this.isCenterPaused() ? (this.options.startTime = this.clampStartTime(e - this.options.visibleHours * 60 * 60 * 1e3 / 2), this.drawStatic()) : this.drawOverlay();
+    let i = (this.options.segments || []).some((a) => e >= a.begin && e <= a.end);
+    (o = (s = this.options).playCallback) == null || o.call(s, {
+      timestamp: Math.floor(e),
+      // 时间戳
+      valid: i
+      // 是否处于有效录像区
+    });
+  }
+  // 标记用户手势交互：暂停播放指针居中并记录时刻，供 centerResumeDelay 延时恢复
+  markUserInteract() {
+    this.centerPaused = !0, this.lastInteractTime = Date.now();
+  }
+  // 居中让位是否生效：手势暂停期间返回 true；停止操作超过 centerResumeDelay 后自动恢复居中
+  isCenterPaused() {
+    return this.centerPaused ? this.isPressDown || this.pinchStartDistance ? !0 : Date.now() - this.lastInteractTime >= this.options.centerResumeDelay ? (this.centerPaused = !1, !1) : !0 : !1;
+  }
+  // ===== 对外视口控制 API =====
+  // 获取当前视口（轴起始时间与可见时长）
+  getViewport() {
+    return { startTime: this.options.startTime, visibleHours: this.options.visibleHours };
+  }
+  // 设置视口（两参数均可省略；自动钳制到边界与缩放限制内）
+  setViewport(t, e) {
+    e != null && (this.options.visibleHours = Math.min(this.options.maxVisibleHours, Math.max(this.options.minVisibleHours, e))), t != null && (this.options.startTime = this.clampStartTime(t)), this.drawStatic();
+  }
+  // 把指定时间滚动到画布中央（不改变选中/播放状态）
+  scrollTo(t) {
+    this.options.startTime = this.clampStartTime(t - this.options.visibleHours * 60 * 60 * 1e3 / 2), this.drawStatic();
+  }
+  // 立即结束手势让位并恢复居中：清除暂停态，把当前播放时间滚动到画布中央
+  resumeCenter() {
+    this.centerPaused = !1, this.lastInteractTime = 0, this.scrollTo(this.currentTimestamp);
+  }
+  // 以画布中心为锚点按倍率缩放（factor > 1 放大，< 1 缩小）
+  zoomBy(t) {
+    if (!(t > 0))
+      return;
+    let e = this.options.startTime + this.options.visibleHours * 60 * 60 * 1e3 / 2;
+    this.options.visibleHours = Math.min(this.options.maxVisibleHours, Math.max(this.options.minVisibleHours, this.options.visibleHours / t)), this.options.startTime = this.clampStartTime(e - this.options.visibleHours * 60 * 60 * 1e3 / 2), this.drawStatic();
+  }
+  // 放大一档
+  zoomIn() {
+    this.zoomBy(1.25);
+  }
+  // 缩小一档
+  zoomOut() {
+    this.zoomBy(0.8);
+  }
+  // 从指定时间往后（begin >= time）的全部录像片段，按 begin 升序，元素为片段完整信息（含 style）；
+  // segments 设计上当前时间之后可能存在多段，业务侧可直接用作跨空白续播的播放列表
+  getNextSegments(t) {
+    return (this.options.segments || []).filter((e) => e.begin >= t).sort((e, i) => e.begin - i.begin);
+  }
+  // 从指定时间往后（时间更大方向）找最近的录像片段，找不到返回 null；
+  // 即 getNextSegments 的首条，不依赖 segments 原始排序
+  getNextSegment(t) {
+    return this.getNextSegments(t)[0] || null;
+  }
+  // ===== 片段规范化：消除重叠 =====
+  // 规则（与业务约定）：
+  // 1. 完全重叠（后段被前段完全覆盖）→ 舍弃后段，以前面那段的样式为准；完全相同保留靠前一段
+  // 2. 部分重叠 → 以重叠开始位置（后段 begin）分割：前段截断尾部，重叠区归后段、各自样式为准
+  // 3. 首尾邻接（前段 end == 后段 begin）→ 不合并，保留业务原始分段边界
+  // 返回浅拷贝新数组，不修改业务传入的原始数据
+  normalizeSegments(t) {
+    if (!Array.isArray(t))
+      return [];
+    let e = t.filter((s) => s && s.end > s.begin).sort((s, o) => s.begin - o.begin || o.end - s.end), i = [];
+    return e.forEach((s) => {
+      let o = i[i.length - 1];
+      if (!o || s.begin >= o.end) {
+        i.push(Object.assign({}, s));
+        return;
+      }
+      s.end <= o.end || (o.end = s.begin, o.end > o.begin ? i.push(Object.assign({}, s)) : i[i.length - 1] = Object.assign({}, s));
+    }), i;
+  }
+}
+const S = (n, t) => {
+  const e = n.__vccOpts || n;
+  for (const [i, s] of t)
+    e[i] = s;
+  return e;
+}, H = {
+  name: "TimeAxisPlus",
+  props: {
+    width: {
+      type: [Number, String],
+      default: "100%"
+    },
+    // 高度，数字按 px 处理，默认 40px
+    height: {
+      type: [Number, String],
+      default: 40
+    },
+    // 轴起始时间（左缘时间戳，ms），默认当天 0 点
+    startTime: {
+      type: Number,
+      // 默认当天 0 点
+      default: () => {
+        const n = /* @__PURE__ */ new Date();
+        return n.setHours(0, 0, 0, 0), n.getTime();
+      }
+    },
+    // 有效时间区域 [{begin, end, style?}]；无需预先去重叠，组件内部自动规范化：
+    // 完全重叠舍后段（前段样式为准）、部分重叠按重叠起始位置分割（各自样式为准）、邻接不合并；
+    // 回调里的片段（如 nextBegin）为规范化后的结果
+    segments: {
+      type: Array,
+      default: () => []
+    },
+    // 可见时长（小时）
+    visibleHours: {
+      type: Number,
+      default: 24
+    },
+    // PC 端缩小极限：可见时长上限（小时）
+    maxVisibleHours: {
+      type: Number,
+      default: 24
+    },
+    // 移动端缩小极限：可见时长上限（小时），默认更小以避免刻度文字拥挤
+    mobileMaxVisibleHours: {
+      type: Number,
+      default: 12
+    },
+    // 可视边界：起始时间戳（ms），默认不限制（监控回放可传当天 0 点）
+    minTime: {
+      type: Number,
+      default: null
+    },
+    // 可视边界：结束时间戳（ms），默认不限制（监控回放可传当天 24 点）
+    maxTime: {
+      type: Number,
+      default: null
+    },
+    // 点击空白区域时是否吸附到最近录像片段起点
+    snapToNearest: {
+      type: Boolean,
+      default: !1
+    },
+    // 悬浮十字线与时间提示开关，不传（null）时按设备自动决定：PC 启用、移动端隐藏
+    hoverTip: {
+      type: Boolean,
+      default: null
+    },
+    // 播放指针居中：开启后播放推进（updateTime）时自动滚动视口，让指针固定在画布中央
+    centerPointer: {
+      type: Boolean,
+      default: !1
+    },
+    // 居中让位恢复延迟（ms）：手势暂停居中后，停止操作超过该时长自动恢复居中跟随
+    centerResumeDelay: {
+      type: Number,
+      default: 3e3
+    },
+    // 双进度条：底部是否显示全天概览条（显示播放位置与可视窗口，点击/拖动跳转）
+    overview: {
+      type: Boolean,
+      default: !1
+    },
+    // 概览条高度（px）
+    overviewHeight: {
+      type: Number,
+      default: 20
+    },
+    // 概览范围起始时间（ms），默认取可视边界或起始日期全天
+    overviewStart: {
+      type: Number,
+      default: null
+    },
+    // 概览范围结束时间（ms）
+    overviewEnd: {
+      type: Number,
+      default: null
+    },
+    movePlay: {
+      type: Boolean,
+      default: !1
+    },
+    clickPlay: {
+      type: Boolean,
+      default: !0
+    },
+    // 画布背景色
+    backgroundColor: {
+      type: String,
+      default: "#000"
+    },
+    // 轴样式配置，支持只传部分字段（逐项覆盖默认值）：
+    // borderColor / graduationColor / tickTextColor / hoverLineColor / hoverTextColor /
+    // overviewBg / overviewTickColor / overviewWindowColor / overviewWindowBorder / overviewPlayColor
+    axisStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      axis: null,
+      ro: null,
+      isMobile: !1
+    };
+  },
+  computed: {
+    // 按设备类型选择缩小极限，PC 与移动端分开控制
+    effectiveMaxVisibleHours() {
+      return this.isMobile ? this.mobileMaxVisibleHours : this.maxVisibleHours;
+    },
+    // 悬浮提示生效值：显式传值优先，未传则移动端隐藏、PC 显示
+    effectiveHoverTip() {
+      return this.hoverTip == null ? !this.isMobile : this.hoverTip;
+    }
+  },
+  watch: {
+    segments: {
+      deep: !0,
+      handler() {
+        this.updateAxis();
+      }
+    },
+    startTime() {
+      this.updateAxis();
+    },
+    visibleHours() {
+      this.updateAxis();
+    },
+    effectiveMaxVisibleHours(n) {
+      this.axis && (this.axis.options.maxVisibleHours = n);
+    },
+    effectiveHoverTip(n) {
+      this.axis && (this.axis.options.hoverTip = n);
+    },
+    minTime() {
+      this.updateAxis();
+    },
+    maxTime() {
+      this.updateAxis();
+    },
+    snapToNearest(n) {
+      this.axis && (this.axis.options.snapToNearest = n);
+    },
+    centerPointer(n) {
+      this.axis && (this.axis.options.centerPointer = n);
+    },
+    centerResumeDelay(n) {
+      this.axis && (this.axis.options.centerResumeDelay = n);
+    },
+    axisStyle: {
+      deep: !0,
+      handler(n) {
+        this.axis && (this.axis.options.axisStyle = Object.assign({}, this.axis.options.axisStyle, n), this.axis.drawStatic());
+      }
+    },
+    overview(n) {
+      console.log(9999887), this.axis && this.axis.updateOptions({ overview: n });
+    },
+    overviewStart() {
+      this.updateAxis();
+    },
+    overviewEnd() {
+      this.updateAxis();
+    }
+  },
+  created() {
+    this.isMobile = window.matchMedia("(pointer: coarse)").matches || /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initTimeAxis();
+    }), window.addEventListener("resize", this.resizeHandler), this.watchSize();
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resizeHandler), this.ro && (this.ro.disconnect(), this.ro = null), this.axis && (this.axis.destroy(), this.axis = null);
+  },
+  methods: {
+    // 尺寸格式化：数字按 px，字符串原样使用（如 '100%'）
+    formatSize(n) {
+      return typeof n == "number" ? `${n}px` : n;
+    },
+    watchSize() {
+      typeof ResizeObserver > "u" || (this.ro = new ResizeObserver(() => {
+        this.$nextTick(() => {
+          this.axis && this.axis.resize();
+        });
+      }), this.ro.observe(this.$refs.TimelineGroup));
+    },
+    initTimeAxis() {
+      this.axis = new C({
+        container: this.$refs.TimelineGroup,
+        backgroundColor: this.backgroundColor,
+        width: this.width,
+        height: this.height,
+        startTime: this.startTime,
+        visibleHours: this.visibleHours,
+        maxVisibleHours: this.effectiveMaxVisibleHours,
+        minTime: this.minTime,
+        maxTime: this.maxTime,
+        snapToNearest: this.snapToNearest,
+        hoverTip: this.effectiveHoverTip,
+        centerPointer: this.centerPointer,
+        centerResumeDelay: this.centerResumeDelay,
+        axisStyle: this.axisStyle,
+        overview: this.overview,
+        overviewHeight: this.overviewHeight,
+        overviewStart: this.overviewStart,
+        overviewEnd: this.overviewEnd,
+        // 未自带 style 的片段的默认样式
+        segmentStyle: {
+          background: "rgba(24,208,217,0.5)"
+        },
+        segments: this.segments,
+        changeCallback: (n) => {
+          this.$emit("changeTime", n);
+        },
+        playCallback: (n) => {
+          this.$emit("playTime", n);
+        }
+      }), console.log(this.axis);
+    },
+    // props 变化后重新渲染
+    updateAxis() {
+      this.axis && this.axis.updateDatas({
+        visibleHours: this.visibleHours,
+        startTime: this.startTime,
+        segments: this.segments,
+        minTime: this.minTime,
+        maxTime: this.maxTime,
+        overviewStart: this.overviewStart,
+        overviewEnd: this.overviewEnd
+      });
+    },
+    // 更新时间
+    updateTime(n) {
+      this.axis.updateTime(n);
+    },
+    // ===== 对外视口控制 API（转发到画布实例） =====
+    // 获取当前视口 {startTime, visibleHours}
+    getViewport() {
+      return this.axis ? this.axis.getViewport() : null;
+    },
+    // 设置视口（两参数均可省略）
+    setViewport(n, t) {
+      this.axis && this.axis.setViewport(n, t);
+    },
+    // 把指定时间滚动到画布中央
+    scrollTo(n) {
+      this.axis && this.axis.scrollTo(n);
+    },
+    // 立即结束手势让位并恢复居中（清除暂停态并把当前播放时间滚动到画布中央）
+    resumeCenter() {
+      this.axis && this.axis.resumeCenter();
+    },
+    // 放大一档
+    zoomIn() {
+      this.axis && this.axis.zoomIn();
+    },
+    // 缩小一档
+    zoomOut() {
+      this.axis && this.axis.zoomOut();
+    },
+    // 从指定时间往后找最近录像片段，找不到返回 null
+    getNextSegment(n) {
+      return this.axis ? this.axis.getNextSegment(n) : null;
+    },
+    // 从指定时间往后的全部录像片段（begin 升序，完整信息），可作续播播放列表
+    getNextSegments(n) {
+      return this.axis ? this.axis.getNextSegments(n) : [];
+    },
+    // 运行时更新配置（传入 json，转发到画布实例）：支持动态开关 overview、改样式/边界/片段等
+    updateOptions(n) {
+      this.axis && this.axis.updateOptions(n);
+    },
+    // 窗口变化
+    resizeHandler() {
+      this.axis && this.axis.resize();
+    }
+  }
+};
+function M(n, t, e, i, s, o) {
+  return x(), T("div", {
+    class: "timeline-group",
+    ref: "TimelineGroup",
+    style: b({ width: o.formatSize(e.width), height: o.formatSize(e.height) })
+  }, null, 4);
+}
+const w = /* @__PURE__ */ S(H, [["render", M], ["__scopeId", "data-v-b90b2c6f"]]);
+w.install = (n) => {
+  n.component(w.name, w);
+};
+export {
+  w as TimeAxisPlus,
+  w as default,
+  C as timeAxis
+};