@ezuikit/player-theme 0.0.1-beta.1 → 1.0.0-beta.1

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/player-theme v0.0.1-beta.1
-* Copyright (c) 2025-10-17 Ezviz-OpenBiz
+* @ezuikit/player-theme v1.0.0-beta.1
+* Copyright (c) 2025-10-27 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 (function (global, factory) {
@@ -980,7 +980,7 @@
 	    return Poster;
 	}(Control);
 
-	var Icons = {
+	var Icons$1 = {
 	    /** 播放 */ play: '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true" data-icon="play">\n      <rect x="6.5" y="5.5" rx="1.25" width="2.5" height="13"/>\n      <rect x="15" y="5.5" rx="1.25" width="2.5" height="13"/>\n    </svg>',
 	    /** 暂停 */ pause: '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"  focusable="false" aria-hidden="true" data-icon="pause"> <path d="M17.5 13.66L9.1 19.26C7.78 20.14 6 19.19 6 17.59L6 6.4C6 4.8 7.78 3.85 9.1 4.73L17.5 10.33C18.69 11.12 18.69 12.87 17.5 13.66Z" /></svg>',
 	    /** 音量 */ volume: function(prefix) {
@@ -1046,131 +1046,131 @@
 	var IconComponents = {
 	    /** 播放 */ play: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.play, 'play', attr);
+	        return createIcon(Icons$1.play, 'play', attr);
 	    },
 	    /** 暂停 */ pause: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.pause, 'pause', attr);
+	        return createIcon(Icons$1.pause, 'pause', attr);
 	    },
 	    volume: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.volume(PREFIX_CLASS), 'volume', attr);
+	        return createIcon(Icons$1.volume(PREFIX_CLASS), 'volume', attr);
 	    },
 	    mobileFullscreen: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.mobileFullscreen, 'mobile-fullscreen', attr);
+	        return createIcon(Icons$1.mobileFullscreen, 'mobile-fullscreen', attr);
 	    },
 	    exitFullscreen: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.exitFullscreen, 'exit-fullscreen', attr);
+	        return createIcon(Icons$1.exitFullscreen, 'exit-fullscreen', attr);
 	    },
 	    fullscreen: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.fullscreen, 'fullscreen', attr);
+	        return createIcon(Icons$1.fullscreen, 'fullscreen', attr);
 	    },
 	    exitGlobalFullscreen: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.exitGlobalFullscreen, 'exit-global-fullscreen', attr);
+	        return createIcon(Icons$1.exitGlobalFullscreen, 'exit-global-fullscreen', attr);
 	    },
 	    globalFullscreen: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.globalFullscreen, 'global-fullscreen', attr);
+	        return createIcon(Icons$1.globalFullscreen, 'global-fullscreen', attr);
 	    },
 	    capturePicture: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.capturePicture, 'capture-picture', attr);
+	        return createIcon(Icons$1.capturePicture, 'capture-picture', attr);
 	    },
 	    ptz: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.ptz, 'ptz', attr);
+	        return createIcon(Icons$1.ptz, 'ptz', attr);
 	    },
 	    record: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.record, 'record', attr);
+	        return createIcon(Icons$1.record, 'record', attr);
 	    },
 	    recordCircle: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.recordCircle, 'record-circle', attr);
+	        return createIcon(Icons$1.recordCircle, 'record-circle', attr);
 	    },
 	    talk: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.talk, 'talk', attr);
+	        return createIcon(Icons$1.talk, 'talk', attr);
 	    },
 	    talkGrowth: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.talkGrowth(PREFIX_CLASS), 'talk-growth', attr);
+	        return createIcon(Icons$1.talkGrowth(PREFIX_CLASS), 'talk-growth', attr);
 	    },
 	    zoom: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.zoom, 'zoom', attr);
+	        return createIcon(Icons$1.zoom, 'zoom', attr);
 	    },
 	    more: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.more, 'more', attr);
+	        return createIcon(Icons$1.more, 'more', attr);
 	    },
 	    moreDot: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.moreDot, 'more-dot', attr);
+	        return createIcon(Icons$1.moreDot, 'more-dot', attr);
 	    },
 	    minusCircle: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.minusCircle, 'minus-circle', attr);
+	        return createIcon(Icons$1.minusCircle, 'minus-circle', attr);
 	    },
 	    plusCircle: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.plusCircle, 'plus-circle', attr);
+	        return createIcon(Icons$1.plusCircle, 'plus-circle', attr);
 	    },
 	    sdk: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.sdk, 'sdk', attr);
+	        return createIcon(Icons$1.sdk, 'sdk', attr);
 	    },
 	    cloudRec: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.cloudRec, 'cloud-rec', attr);
+	        return createIcon(Icons$1.cloudRec, 'cloud-rec', attr);
 	    },
 	    cloudRecord: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.cloudRecord, 'cloud-record', attr);
+	        return createIcon(Icons$1.cloudRecord, 'cloud-record', attr);
 	    },
 	    error: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.error, 'error', attr);
+	        return createIcon(Icons$1.error, 'error', attr);
 	    },
 	    info: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.info, 'info', attr);
+	        return createIcon(Icons$1.info, 'info', attr);
 	    },
 	    close: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.close, 'close', attr);
+	        return createIcon(Icons$1.close, 'close', attr);
 	    },
 	    closeCircleOutLined: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.closeCircleOutLined, 'close-circle', attr);
+	        return createIcon(Icons$1.closeCircleOutLined, 'close-circle', attr);
 	    },
 	    warnCircleOutLined: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.warnCircleOutLined, 'warn-circle', attr);
+	        return createIcon(Icons$1.warnCircleOutLined, 'warn-circle', attr);
 	    },
 	    infoCircleOutLined: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.infoCircleOutLined, 'info-circle', attr);
+	        return createIcon(Icons$1.infoCircleOutLined, 'info-circle', attr);
 	    },
 	    date: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.date, 'date', attr);
+	        return createIcon(Icons$1.date, 'date', attr);
 	    },
 	    filter: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.filter, 'filter', attr);
+	        return createIcon(Icons$1.filter, 'filter', attr);
 	    },
 	    add: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.add, 'add', attr);
+	        return createIcon(Icons$1.add, 'add', attr);
 	    },
 	    reduce: function(attr) {
 	        if (attr === void 0) attr = {};
-	        return createIcon(Icons.reduce, 'reduce', attr);
+	        return createIcon(Icons$1.reduce, 'reduce', attr);
 	    }
 	};
 
@@ -1463,16 +1463,18 @@
 	}(Control);
 
 	/*
-	* @skax/picker v0.1.1
-	* Copyright (c) 2025-08-31 ShineShao <xiaoshaoqq@gmail.com>
+	* @skax/picker v1.0.2
+	* Copyright (c) 2025-10-26 ShineShao <xiaoshaoqq@gmail.com>
 	* Released under the MIT License.
 	*/
-	let Provider$1 = class Provider {
+	/**
+	 * PickerProvider
+	 */ class PickerProvider {
 	    static getInstance() {
-	        if (!Provider.instance) {
-	            Provider.instance = new Provider();
+	        if (!PickerProvider.instance) {
+	            PickerProvider.instance = new PickerProvider();
 	        }
-	        return Provider.instance;
+	        return PickerProvider.instance;
 	    }
 	    add(picker) {
 	        this.pickers.push(picker);
@@ -1487,7 +1489,8 @@
 	    }
 	    closeOther(e) {
 	        for (const p of this.pickers){
-	            if (p && !(e.target === p.$container || p.$container.contains(e.target) || e.target === p.$wrapperContent || p.$wrapperContent.contains(e.target))) {
+	            var _p_$container_contains, _p_$container, _p_$wrapperContent_contains, _p_$wrapperContent;
+	            if (p && !(e.target === p.$container || ((_p_$container = p.$container) == null ? void 0 : (_p_$container_contains = _p_$container.contains) == null ? void 0 : _p_$container_contains.call(_p_$container, e.target)) || e.target === p.$wrapperContent || ((_p_$wrapperContent = p.$wrapperContent) == null ? void 0 : (_p_$wrapperContent_contains = _p_$wrapperContent.contains) == null ? void 0 : _p_$wrapperContent_contains.call(_p_$wrapperContent, e.target)))) {
 	                p.open = false;
 	            }
 	        }
@@ -1496,14 +1499,14 @@
 	        this.pickers = [];
 	    // Private constructor to prevent instantiation
 	    }
-	};
-	const provider = Provider$1.getInstance();
+	}
+	const pickerProvider = PickerProvider.getInstance();
 
 	/**
-	 * picker 弹窗位置
+	 * picker 位置
 	 * @public
 	 */ // eslint-disable-next-line @typescript-eslint/naming-convention
-	const Picker_Placement = [
+	const PICKER_PLACEMENT = [
 	    "top",
 	    "tl",
 	    "tr",
@@ -1514,7 +1517,9 @@
 	/**
 	 * 默认样式前缀
 	 */ const PICKER_PREFIX_CLS = "epicker";
-	const DEFAULT_PICKER_OPTIONS = {
+	/**
+	 * Picker 默认值
+	 */ const DEFAULT_PICKER_OPTIONS = {
 	    getPopupContainer: ()=>document.body,
 	    wrapClassName: "",
 	    open: false,
@@ -1538,17 +1543,18 @@
 	 *
 	 * @example
 	 * ```ts
+	 * import "@skax/picker/dist/style/css";
 	 * import Picker from '@skax/picker';
-	 * const picker = new Picker({
-	 *   container: document.getElementById('picker-container'),
+	 * const picker = new Picker(document.getElementById('picker-container'),
+	 * {
 	 *   placement: 'bottom',
-	 *   content: '<div>选择内容</div>',
+	 *   content: '<div>选择内容</div>', // or () => '<div>选择内容</div>'
 	 *   trigger: 'click',
 	 *   isMobile: false,
 	 * });
 	 * picker.open = true; // 打开弹窗
 	 * picker.setPlacement('top'); // 设置弹窗位置
-	 * picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容
+	 * picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容（会覆盖之前的内容）
 	 * picker.destroy(); // 销毁弹窗
 	 * ```
 	 */ class Picker {
@@ -1652,9 +1658,11 @@
 	    }
 	    set disabled(disabled) {
 	        if (disabled) {
-	            this.$container.classList.add(`${PICKER_PREFIX_CLS}-disabled`);
+	            var _this_$container_classList_add, _this_$container_classList, _this_$container;
+	            (_this_$container = this.$container) == null ? void 0 : (_this_$container_classList = _this_$container.classList) == null ? void 0 : (_this_$container_classList_add = _this_$container_classList.add) == null ? void 0 : _this_$container_classList_add.call(_this_$container_classList, `${PICKER_PREFIX_CLS}-disabled`);
 	        } else {
-	            this.$container.classList.remove(`${PICKER_PREFIX_CLS}-disabled`);
+	            var _this_$container_classList_remove, _this_$container_classList1, _this_$container1;
+	            (_this_$container1 = this.$container) == null ? void 0 : (_this_$container_classList1 = _this_$container1.classList) == null ? void 0 : (_this_$container_classList_remove = _this_$container_classList1.remove) == null ? void 0 : _this_$container_classList_remove.call(_this_$container_classList1, `${PICKER_PREFIX_CLS}-disabled`);
 	        }
 	        this._disabled = disabled;
 	    }
@@ -1674,7 +1682,7 @@
 	        if (this._disabled) {
 	            return;
 	        }
-	        if (Picker_Placement.includes(placement)) {
+	        if (PICKER_PLACEMENT.includes(placement)) {
 	            this._options.placement = placement;
 	        } else {
 	            console.warn(`${placement} is not a valid placement`);
@@ -1690,10 +1698,10 @@
 	   */ destroy() {
 	        this._animationTimerClear();
 	        this._removeHtml();
-	        provider.remove(this);
+	        pickerProvider.remove(this);
 	    }
 	    /**
-	   * 设置内容
+	   * 设置内容（会覆盖之前内容）
 	   * @param html - html 字符串内容
 	   * @example
 	   * ```ts
@@ -1725,17 +1733,19 @@
 	    /**
 	   * 移除html
 	   */ _removeHtml() {
-	        var _this_$popupContainer;
+	        var _this_$container_removeEventListener, _this_$container, _this_$popupContainer;
 	        // eslint-disable-next-line @typescript-eslint/unbound-method
 	        this.$wrapperContent.removeEventListener("click", this._onContentClick);
-	        this.$container.removeEventListener("click", this._onContentClick);
+	        (_this_$container = this.$container) == null ? void 0 : (_this_$container_removeEventListener = _this_$container.removeEventListener) == null ? void 0 : _this_$container_removeEventListener.call(_this_$container, "click", this._onContentClick);
 	        if (this._options.trigger === "click") {
-	            this.$container.removeEventListener("click", this._onShow);
+	            var _this_$container_removeEventListener1, _this_$container1;
+	            (_this_$container1 = this.$container) == null ? void 0 : (_this_$container_removeEventListener1 = _this_$container1.removeEventListener) == null ? void 0 : _this_$container_removeEventListener1.call(_this_$container1, "click", this._onShow);
 	        }
 	        if (this._options.trigger === "hover") {
-	            this.$container.removeEventListener("mouseenter", this._onShow);
-	            this.$container.removeEventListener("mouseover", this._onShow);
-	            this.$container.removeEventListener("mouseleave", this._onHide);
+	            var _this_$container_removeEventListener2, _this_$container2, _this_$container_removeEventListener3, _this_$container3, _this_$container_removeEventListener4, _this_$container4;
+	            (_this_$container2 = this.$container) == null ? void 0 : (_this_$container_removeEventListener2 = _this_$container2.removeEventListener) == null ? void 0 : _this_$container_removeEventListener2.call(_this_$container2, "mouseenter", this._onShow);
+	            (_this_$container3 = this.$container) == null ? void 0 : (_this_$container_removeEventListener3 = _this_$container3.removeEventListener) == null ? void 0 : _this_$container_removeEventListener3.call(_this_$container3, "mouseover", this._onShow);
+	            (_this_$container4 = this.$container) == null ? void 0 : (_this_$container_removeEventListener4 = _this_$container4.removeEventListener) == null ? void 0 : _this_$container_removeEventListener4.call(_this_$container4, "mouseleave", this._onHide);
 	            // prettier-ignore
 	            this.$wrapperContent.removeEventListener("mouseenter", this._onWrapperShow);
 	            this.$wrapperContent.removeEventListener("mouseleave", this._onHide);
@@ -1755,16 +1765,18 @@
 	            this._$mask.removeEventListener("click", this._onHide);
 	            (_this_$wrapperContent = this.$wrapperContent) == null ? void 0 : _this_$wrapperContent.removeChild(this._$mask);
 	        }
+	        if (this._options.isMobile) document.body.classList.remove(`${PICKER_PREFIX_CLS}-body-noscroll`);
 	        (_this_$popupContainer = this.$popupContainer) == null ? void 0 : _this_$popupContainer.removeChild(this.$wrapperContent);
 	        this.$wrapperContent.innerHTML = "";
 	    }
 	    /**
 	   * 现实位置
 	   */ _setPlacement() {
-	        if (!this._open || this._options.isMobile) {
+	        var _this_$container_getBoundingClientRect, _this_$container;
+	        if (!this._open || this._options.isMobile || !this.$container) {
 	            return;
 	        }
-	        const $containerRect = this.$container.getBoundingClientRect();
+	        const $containerRect = (_this_$container = this.$container) == null ? void 0 : (_this_$container_getBoundingClientRect = _this_$container.getBoundingClientRect) == null ? void 0 : _this_$container_getBoundingClientRect.call(_this_$container);
 	        const $wrapperContentRect = this.$wrapperContent.getBoundingClientRect();
 	        const $popupContainerRect = this.$popupContainer.getBoundingClientRect();
 	        // 容器的坐标 - 挂载的容器的坐标差
@@ -1837,8 +1849,10 @@
 	        this.$body = document.createElement("div");
 	        this.$body.classList.add(`${PICKER_PREFIX_CLS}-body`);
 	        this.$wrapperContent.appendChild(this.$body);
-	        if (this._options.content) {
+	        if (typeof this._options.content === "string") {
 	            this.innerHTML(this._options.content);
+	        } else if (typeof this._options.content === "function") {
+	            this.innerHTML(this._options.content == null ? void 0 : this._options.content.call(this._options));
 	        }
 	        if (typeof this._options.wrapClassName === "string") {
 	            try {
@@ -1850,17 +1864,20 @@
 	    /**
 	   * 绑定事件
 	   */ _eventListener() {
+	        var _this_$container_addEventListener, _this_$container;
 	        // eslint-disable-next-line @typescript-eslint/unbound-method
 	        this.$wrapperContent.addEventListener("click", this._onContentClick);
-	        this.$container.addEventListener("click", this._onContentClick);
+	        (_this_$container = this.$container) == null ? void 0 : (_this_$container_addEventListener = _this_$container.addEventListener) == null ? void 0 : _this_$container_addEventListener.call(_this_$container, "click", this._onContentClick);
 	        //
 	        if (this._options.trigger === "click") {
-	            this.$container.addEventListener("click", this._onShow);
+	            var _this_$container_addEventListener1, _this_$container1;
+	            (_this_$container1 = this.$container) == null ? void 0 : (_this_$container_addEventListener1 = _this_$container1.addEventListener) == null ? void 0 : _this_$container_addEventListener1.call(_this_$container1, "click", this._onShow);
 	        }
 	        if (this._options.trigger === "hover") {
-	            this.$container.addEventListener("mouseenter", this._onShow);
-	            this.$container.addEventListener("mouseover", this._onShow);
-	            this.$container.addEventListener("mouseleave", this._onHide);
+	            var _this_$container_addEventListener2, _this_$container2, _this_$container_addEventListener3, _this_$container3, _this_$container_addEventListener4, _this_$container4;
+	            (_this_$container2 = this.$container) == null ? void 0 : (_this_$container_addEventListener2 = _this_$container2.addEventListener) == null ? void 0 : _this_$container_addEventListener2.call(_this_$container2, "mouseenter", this._onShow);
+	            (_this_$container3 = this.$container) == null ? void 0 : (_this_$container_addEventListener3 = _this_$container3.addEventListener) == null ? void 0 : _this_$container_addEventListener3.call(_this_$container3, "mouseover", this._onShow);
+	            (_this_$container4 = this.$container) == null ? void 0 : (_this_$container_addEventListener4 = _this_$container4.addEventListener) == null ? void 0 : _this_$container_addEventListener4.call(_this_$container4, "mouseleave", this._onHide);
 	            this.$wrapperContent.addEventListener("mouseenter", this._onWrapperShow);
 	            this.$wrapperContent.addEventListener("mouseleave", this._onHide);
 	        }
@@ -1883,7 +1900,7 @@
 	   * @param e - 内容点击事件
 	   */ _onContentClick(e) {
 	        e.stopPropagation();
-	        provider.closeOther(e);
+	        pickerProvider.closeOther(e);
 	    }
 	    /**
 	   * 显示事件
@@ -1912,12 +1929,13 @@
 	   * document 点击事件
 	   * @param event - 鼠标点击事件
 	   */ _onDocumentClick(event) {
-	        if (!(this.$wrapperContent.contains(event.target) || this.$wrapperContent === event.target || this.$container.contains(event.target) || this.$container === event.target)) {
+	        var _this_$container;
+	        if (!(this.$wrapperContent.contains(event.target) || this.$wrapperContent === event.target || ((_this_$container = this.$container) == null ? void 0 : _this_$container.contains(event.target)) || this.$container === event.target)) {
 	            if (this._disabled) return;
 	            this._onHide();
 	        }
 	    }
-	    constructor(options){
+	    constructor(container, options){
 	        var _this_$popupContainer;
 	        /** 是否打开 */ this._open = false;
 	        this._OpenChange = false;
@@ -1930,15 +1948,9 @@
 	        if (this._options.isMobile) {
 	            this._options.trigger = "click";
 	        }
-	        provider.add(this);
-	        if (typeof this._options.container === "function") {
-	            this.$container = this._options.container();
-	        } else {
-	            this.$container = this._options.container;
-	        }
-	        if (!this.$container) {
-	            throw new Error("container is required!");
-	        }
+	        pickerProvider.add(this);
+	        if (typeof container === "function") this.$container = container();
+	        else this.$container = container;
 	        this.$wrapperContent = document.createElement("div");
 	        this._initContentStyle();
 	        (_this_$popupContainer = this.$popupContainer) == null ? void 0 : _this_$popupContainer.appendChild(this.$wrapperContent);
@@ -1957,7 +1969,7 @@
 	   * ```ts
 	   * Picker.VERSION; // 输出版本号
 	   * ```
-	   */ Picker.VERSION = "0.1.1";
+	   */ Picker.VERSION = "1.0.2";
 
 	/*
 	* delegate.js v3.2.0
@@ -2838,8 +2850,7 @@
 	        // 轻应用私有暂时不支持调节音量
 	        if (!(Utils.isMobile || _this._options.PLAY_TYPE === 'ezopen')) {
 	            var _this__options_props4, _this__options_props5;
-	            _this.picker = new Picker({
-	                container: _this.$container,
+	            _this.picker = new Picker(_this.$container, {
 	                getPopupContainer: function() {
 	                    return _this.$container;
 	                },
@@ -3939,7 +3950,7 @@
 	*/
 	const LoggerStyle={info:"",log:"background: #4096ff; color: #FFF;",warn:"background: yellow; color: #FFF;",error:"background: red; color: #FFF;"};class LoggerCls{setOptions(options){var _this__options_level;this._options=Object.assign({},this._options,options),this._levelNum=this._matchLevel(null!=(_this__options_level=this._options.level)?_this__options_level:"INFO"),this.info=this._loggerFactory("info",this._levelNum>=3),this.log=this._loggerFactory("log",this._levelNum>=2),this.warn=this._loggerFactory("warn",this._levelNum>=1),this.error=this._loggerFactory("error",this._levelNum>=0);}_matchLevel(level){let logLevel=3;switch(level){case "INFO":logLevel=3;break;case "LOG":logLevel=2;break;case "WARN":logLevel=1;break;case "ERROR":logLevel=0;}return logLevel}_loggerFactory(type,bool){const fn=console[type];if(bool&&fn){const args0=this._options.name?`%c[${this._options.name}]%c %c[${type.toUpperCase()}]`:`%c[${type.toUpperCase()}]`,color=[this._options.name?"background: green;color: #fff":null,this._options.name?"":null,LoggerStyle[type]].filter((color=>null!=color));return fn.bind(console,args0,...color)}return LoggerCls.noop}getOptions(){return this._options}getVersion(){return "1.1.0"}constructor(){let options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this._options={level:"INFO",showTime:false},this._levelNum=3,this.info=this._loggerFactory("info",this._levelNum>=3),this.log=this._loggerFactory("log",this._levelNum>=2),this.warn=this._loggerFactory("warn",this._levelNum>=1),this.error=this._loggerFactory("error",this._levelNum>=0),this.setOptions(options);}}function fillTen(num){return (num=+num)<10&&(num=`0${num}`),num+""}LoggerCls.noop=()=>{},LoggerCls.VERSION="1.1.0";const list=["info","log","warn","error"];function Logger(options){const logger=new LoggerCls(options);return new Proxy(logger,{get(target,prop){if(list.includes(prop)){var _target__options;if(null==(_target__options=target._options)?void 0:_target__options.showTime){const time=function(){const now=new Date(Date.now()),year=now.getFullYear(),month=now.getMonth()+1,day=now.getDate(),hour=now.getHours(),min=now.getMinutes(),sec=now.getSeconds(),ms=now.getMilliseconds();return `${year}/${fillTen(month)}/${fillTen(day)} ${fillTen(hour)}:${fillTen(min)}:${fillTen(sec)}:${ms}`}();return target[prop].bind(console,`[${time}]`)}return target[prop].bind(console)}return Reflect.get(target,prop)}})}
 
-	var zh = {
+	var zh$1 = {
 	    391001: '取流地址或端口非法',
 	    395000: '服务内部异常，请稍后重试',
 	    395400: '预览取流参数异常',
@@ -4209,7 +4220,7 @@
 	};
 
 	// 不要出现多层的的数据, 数据铺平
-	var en = {
+	var en$1 = {
 	    391001: 'Illegal streaming address or port',
 	    395000: 'Internal service exception, please try again later',
 	    395400: 'Preview streaming parameter exception',
@@ -5128,8 +5139,7 @@
 	        }) : IconComponents.moreDot({
 	            title: (_this_locale1 = this.locale) == null ? void 0 : _this_locale1.BTN_MORE
 	        });
-	        this.picker = new Picker({
-	            container: this.$container,
+	        this.picker = new Picker(this.$container, {
 	            getPopupContainer: function() {
 	                return _this.$container;
 	            },
@@ -9132,8 +9142,7 @@
 	        }
 	        var _this__options_fieldNames_value;
 	        var valueKey = (_this__options_fieldNames_value = (_this__options_fieldNames = _this._options.fieldNames) == null ? void 0 : _this__options_fieldNames.value) != null ? _this__options_fieldNames_value : 'value';
-	        _this._picker = new Picker({
-	            container: _this.$container,
+	        _this._picker = new Picker(_this.$container, {
 	            // 由于某些原因， 移动端强制渲染在 body 上
 	            getPopupContainer: function() {
 	                return Utils.isMobile ? options.rootContainer : _this.$container;
@@ -9416,16 +9425,14 @@
 	            controlType: 'button',
 	            classNameSuffix: 'definition',
 	            renderLabel: function(label, item, list) {
-	                var _list_;
 	                if ((item == null ? void 0 : item.level) === 'auto') {
 	                    var _options_locales_options_language;
-	                    var realItem = list.find(function(it) {
+	                    var realIitem = list.find(function(it) {
 	                        return it.level === _assert_this_initialized$1(_this)._level;
 	                    });
-	                    return "<span>" + (options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO) + "(" + ((realItem == null ? void 0 : realItem.name) || '') + ")</span>";
+	                    return "<span>" + (options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO) + "(" + ((realIitem == null ? void 0 : realIitem.name) || '') + ")</span>";
 	                }
-	                // 如果 label 不存在，则不显示label，直接显示list的第一个label， 一般自定义清晰度列表可能会出现
-	                return "<span>" + (label || ((_list_ = list[0]) == null ? void 0 : _list_.name) || '') + "</span>";
+	                return "<span>" + label + "</span>";
 	            },
 	            onChange: function(value, item) {
 	                var _options_onChange;
@@ -9452,10 +9459,10 @@
 	            _this._level = realLevel + '';
 	            if (l === 'auto') {
 	                var _options_locales_options_language;
-	                var realItem = _this.list.find(function(it) {
+	                var realIitem = _this.list.find(function(it) {
 	                    return it.level === _this._level;
 	                });
-	                _this.$container.querySelector("." + PREFIX_CLASS + "-select-btn").innerHTML = "\n          <span>" + (options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO) + "(" + ((realItem == null ? void 0 : realItem.name) || '') + ")</span>\n        ";
+	                _this.$container.querySelector("." + PREFIX_CLASS + "-select-btn").innerHTML = "\n          <span>" + (options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO) + "(" + ((realIitem == null ? void 0 : realIitem.name) || '') + ")</span>\n        ";
 	            } else {
 	                if (_this.value !== _this._level + '') _this.value = _this._level + '';
 	            }
@@ -10079,606 +10086,268 @@
 	}(Control);
 
 	/*
-	* @ezuikit/control-time-line v0.0.1
-	* Copyright (c) 2025-09-21 Ezviz-OpenBiz
+	* @ezuikit/control-time-line v1.0.0-beta.2
+	* Copyright (c) 2025-10-27 Ezviz-OpenBiz
 	* Released under the MIT License.
 	*/
-
-	const BASE_TIME_LINE_DEFAULT_OPTIONS = {
-	    language: 'zh',
-	    records: [],
-	    onChange: ()=>{},
-	    onDragStart: ()=>{},
-	    onDragging: ()=>{},
-	    onDragEnd: ()=>{}
-	};
-	class BaseTimeLine {
-	    get current() {
-	        return this._current;
-	    }
-	    /**
+	var zh={title:"包含{{len}}段录像",foldTitle:"{{len}}个录像"};var en={title:"Includes {{len}} {{unit}}",foldTitle:"{{len}} {{unit}}"};const BASE_TIME_LINE_DEFAULT_OPTIONS={current:new Date,language:"zh",timeSections:[],readOnly:false,className:"",timeWidth:0,width:"100%",
+	// --------------------只支持初始化时，不支持动态变更 (不做对象冻结)--------------------
+	timePointColor:"#1890ff",timeTextColor:"#FFF",timeScaleColor:"#FFF",timeSectionColor:"rgba(24, 144, 255, 0.5)",timeAxisBgColor:"#000",
+	onChange:()=>{},onDragStart:()=>{},onDragging:()=>{},onDragEnd:()=>{},onDestroy:()=>{}};
+	/**
+	 * 时间轴基类
+	 * @internal
+	 */class BaseTimeLine{
+	/**
+	   * 当前时间
+	   */
+	get current(){return this._current}
+	/**
+	   * 当前时间
+	   */set current(current){this._current=current;}set readOnly(readOnly){if(this._readOnly!==readOnly){this._readOnly=readOnly;this.$container.style.cursor=readOnly?"not-allowed":"pointer";}}
+	/**
+	   * 只读状态
+	   */get readOnly(){return this._readOnly}
+	/**
+	   *
+	   */get timeSections(){return this._timeSections}
+	/**
+	   * 设置只读或取消只读, 推荐使用 timeLine.readOnly = false
+	   * @param readOnly - 只读或取消只读
+	   * @returns
+	   */setReadOnly(readOnly){this.readOnly=readOnly;}
+	/**
 	   * 更新当前时间
 	   * @param time 能转成时间的值， 如 时间对象 Date, 时间戳，时间戳字符串
-	   */ update(current) {}
-	    updateRecords(records) {
-	        if (records) {
-	            this.records = records;
-	        }
-	    }
-	    resize(width, height) {}
-	    /**
+	   */update(current){this._current=current;}
+	/**
+	   * 更新时间片段
+	   * @param timeSections 片段数据
+	   */updateTimeSections(timeSections){if(timeSections&&Array.isArray(timeSections))this._timeSections=timeSections;}
+	/**
+	   * 获取 TimeLine 的宽度
+	   * @returns
+	   */get width(){return this._width}
+	/**
+	   * 获取 TimeLine 的高度
+	   */get height(){return this._height}
+	/**
+	   * 重置尺寸
+	   */resize(width,height){this._resize(width,height);}_resize(width,height){let cssText="";if(/\d/.test(width+""))cssText+=`width: ${width}px;`;else if(width)cssText+=`width: ${width};`;if(/\d/.test(height+""))cssText+=`height: ${height}px;`;else if(height)cssText+=`height: ${height};`;if(this.$container)this.$container.style.cssText+=cssText;this._width=Math.floor(this.$container.clientWidth);this._height=Math.floor(this.$container.clientHeight);}get timeWidth(){return this._timeWidth}
+	/**
 	   * 改变时间轴刻度
-	   */ changeScale(timelag) {}
-	    setReadOnly(readOnly) {}
-	    destroy() {
-	        this._current = undefined;
-	    }
-	    constructor(container, options){
-	        this.records = [];
-	        this.$container = container;
-	        this.options = deepmerge(BASE_TIME_LINE_DEFAULT_OPTIONS, options, {
-	            clone: false
-	        });
-	    }
-	}
-
-	function toDate(time) {
-	    let date = null;
-	    if (typeof time === 'string' && time.includes(':')) {
-	        date = new Date(time);
-	    } else if ((typeof time === 'string' || typeof time === 'number') && /\d/.test(time + '') && (time + '').length === 10) {
-	        date = new Date(+time * 1000);
-	    } else if ((typeof time === 'string' || typeof time === 'number') && /\d/.test(time + '') && (time + '').length === 13) {
-	        date = new Date(+time);
-	    } else if (time instanceof Date) {
-	        date = time;
-	    }
-	    return date;
-	}
+	   * 移动端间距： 0：1分钟，1：10分钟，2：半小时，3：1小时，4：2小时, 5：4小时
+	   * PC间距：
+	   * @param timeWidth 时间轴刻度
+	   */setTimeWidth(timeWidth){if([0,1,2,3,4,5].includes(timeWidth))this._timeWidth=timeWidth;}
 	/**
-	 *
-	 * @param time
-	 * @returns
-	 */ function formatDateToHHmmss(time) {
-	    const date = toDate(time);
-	    if (date) {
-	        const h = date.getHours(); // 返回日期中的小时数（0到23）
-	        const m = date.getMinutes(); // 返回日期中的分钟数（0到59）
-	        const s = date.getSeconds(); // 返回日期中的秒数（0到59）
-	        return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
-	    }
-	    return '00:00:00';
-	}
-	function subTime(time) {
-	    if (+time < 10) {
-	        return '0' + time;
-	    } else {
-	        return time;
-	    }
-	}
-	function tranTime(time, fmt = 'YYYY-MM-DD HH:mm:ss') {
-	    const newDate = toDate(time);
-	    if (newDate) {
-	        if (fmt === 'YYYY-MM-DD') {
-	            return newDate.getFullYear() + '-' + subTime(newDate.getMonth() + 1) + '-' + subTime(newDate.getDate());
-	        } else if (fmt === 'HH:mm:ss') {
-	            return subTime(newDate.getHours()) + ':' + subTime(newDate.getMinutes()) + ':' + subTime(newDate.getSeconds());
-	        }
-	        // prettier-ignore
-	        return newDate.getFullYear() + "-" + subTime(newDate.getMonth() + 1) + "-" + subTime(newDate.getDate()) + " " + subTime(newDate.getHours()) + ":" + subTime(newDate.getMinutes()) + ":" + subTime(newDate.getSeconds());
-	    }
-	    return '';
-	}
+	   * 销毁
+	   */destroy(){
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	this._current=null;this.options.onDestroy==null?void 0:this.options.onDestroy.call(this.options);this._timeSections=[];this._readOnly=false;this._destroyed=true;}constructor(container,options){this._current=new Date;
+	/** 只读 */this._readOnly=false;this._width=0;this._height=0;this._destroyed=false;this._timeWidth=0;
+	/** 片段列表 */this._timeSections=[];this.$container=container;this.options=deepmerge(BASE_TIME_LINE_DEFAULT_OPTIONS,options,{clone:false});if(this.options.timeSections&&Array.isArray(this.options.timeSections))this._timeSections=this.options.timeSections;if(this.options.readOnly)this.readOnly=this.options.readOnly;if(this.options.className)this.$container.classList.add(this.options.className);if(this.options.current&&this.options.current instanceof Date)this._current=this.options.current||new Date;
+	// prettier-ignore
+	this.i18n=new I18n(deepmerge({zh:zh,en:en},this.options.locales||{},{clone:false}),{defaultLocale:this.options.language||"zh"});this._timeWidth=this.options.timeWidth||0;this._resize(this.options.width||"100%",this.options.height);}}
+	/**
+	 * 时间轴工具类
+	 */class TimeLineUtil{
+	/**
+	   * 时间转成日期
+	   * @param time 时间 （秒， 毫秒， 日期字符串， Date）
+	   * @returns 日期
+	   */
+	static toDate(time){let date=null;if(typeof time==="string"&&time.includes(":"))date=new Date(time);else if((typeof time==="string"||typeof time==="number")&&/\d/.test(time+"")&&(time+"").length===10)date=new Date(+time*1e3);else if((typeof time==="string"||typeof time==="number")&&/\d/.test(time+"")&&(time+"").length===13)date=new Date(+time);else if(time instanceof Date)date=time;return date}
+	/**
+	   * 时间转成 HH:mm:ss
+	   * @param time 时间
+	   * @returns
+	   */static formatDateToHHmmss(time){const date=TimeLineUtil.toDate(time);if(date){const h=date.getHours();// 返回日期中的小时数（0到23）
+	const m=date.getMinutes();// 返回日期中的分钟数（0到59）
+	const s=date.getSeconds();// 返回日期中的秒数（0到59）
+	return (h>9?h:"0"+h)+":"+(m>9?m:"0"+m)+":"+(s>9?s:"0"+s)}return "00:00:00"}
+	/**
+	   * 十位补充 0
+	   * @param m 数字
+	   * @returns 十位补充 0后的结果字符串
+	   */static subTime(m){return +m>9?m+"":"0"+m}
+	/**
+	   * 格式化时间， 支持 'YYYY-MM-DD'，'YYYY-MM-DD HH:mm:ss'， 'HH:mm:ss'
+	   * @param time 时间
+	   * @param fmt 时间格式
+	   * @returns
+	   */static tranTime(time,fmt="YYYY-MM-DD HH:mm:ss"){const newDate=TimeLineUtil.toDate(time);if(newDate){if(fmt==="YYYY-MM-DD")return newDate.getFullYear()+"-"+TimeLineUtil.subTime(newDate.getMonth()+1)+"-"+TimeLineUtil.subTime(newDate.getDate());else if(fmt==="HH:mm:ss")return TimeLineUtil.subTime(newDate.getHours())+":"+TimeLineUtil.subTime(newDate.getMinutes())+":"+TimeLineUtil.subTime(newDate.getSeconds());else if(fmt==="HH")return TimeLineUtil.subTime(newDate.getHours());else if(fmt==="mm:ss")return TimeLineUtil.subTime(newDate.getMinutes())+":"+TimeLineUtil.subTime(newDate.getSeconds());else if(fmt==="HH:mm")return TimeLineUtil.subTime(newDate.getHours())+":"+TimeLineUtil.subTime(newDate.getMinutes());else if(fmt==="YYYYMMDDTHHmmssZ")return newDate.getFullYear()+""+TimeLineUtil.subTime(newDate.getMonth()+1)+TimeLineUtil.subTime(newDate.getDate())+"T"+TimeLineUtil.subTime(newDate.getHours())+TimeLineUtil.subTime(newDate.getMinutes())+TimeLineUtil.subTime(newDate.getSeconds())+"Z";
+	// prettier-ignore
+	return newDate.getFullYear()+"-"+TimeLineUtil.subTime(newDate.getMonth()+1)+"-"+TimeLineUtil.subTime(newDate.getDate())+" "+TimeLineUtil.subTime(newDate.getHours())+":"+TimeLineUtil.subTime(newDate.getMinutes())+":"+TimeLineUtil.subTime(newDate.getSeconds())}return ""}
+	/**
+	   * 时间转成秒
+	   * @param time
+	   * @returns
+	   */static timeToSecond(time){const e=time.split(":");const h=Number(e[0]);const m=Number(e[1]);const s=Number(e[2]);return h*60*60+m*60+(s||0)}
+	/**
+	   * 分钟转成 HH:mm
+	   * @param minute
+	   * @returns
+	   */static minuteToTime(minute){const hour=Math.floor(minute/60);const m=minute%60;return (hour>9?hour:"0"+hour)+":"+(m>9?m:"0"+m)}
+	/**
+	   * 时间转成分钟
+	   * @param time
+	   * @returns
+	   */static timeToMinute(time){const e=time.split(":");const h=Number(e[0]);const m=Number(e[1]);
+	// const s = Number(e[2]);
+	return h*60+m}
+	/**
+	   * @description 判读两个区间是否重叠
+	   * @param {number} a_start 一个区间的开始
+	   * @param {number} a_end 一个区间的结束
+	   * @param {number} b_start 另一个区间的开始
+	   * @param {number} b_end 另一个区间的结束
+	   * @returns {boolean}
+	   */static isOverlap(a_start,a_end,b_start,b_end){return Math.max(a_start,b_start)<=Math.min(a_end,b_end)}static tranTimeToString(start,end){var _TimeLineUtil_toDate,_TimeLineUtil_toDate1;const secondNum=Math.floor(((_TimeLineUtil_toDate=TimeLineUtil.toDate(end))==null?void 0:_TimeLineUtil_toDate.getTime())-((_TimeLineUtil_toDate1=TimeLineUtil.toDate(start))==null?void 0:_TimeLineUtil_toDate1.getTime()))/1e3;const second=secondNum%60;const minute=Math.floor(secondNum/60);return `${minute>0?TimeLineUtil.subTime(minute)+"'":""}${TimeLineUtil.subTime(second)}''`}}const Icons={tip:`<svg viewBox="0 0 57 24" fill="currentColor" width="1em" height="1em" focusable="false" aria-hidden="true" data-icon="tip">\n        <path class="ez-time-line-icon-tip" fill-rule="evenodd" d="m4,0l44,0c2.2091,0 4,1.7909 4,4l0,3.8218l4.9399,3.3572c0.5839,0.3968 0.5839,1.2574 0,1.6542l-4.9399,3.3572l0,3.8096c0,2.2091 -1.7909,4 -4,4l-44,0c-2.2091,0 -4,-1.7909 -4,-4l0,-16c0,-2.2091 1.7909,-4 4,-4z"/>\n  </svg>`,plus:`\n  <svg viewBox="0 0 16 16" fill="currentColor" width="1em" height="1em" focusable="false" aria-hidden="true" data-icon="plus">\n    <path d="M0 0L10.6667 0" stroke="rgb(44,44,44)" stroke-linecap="round" stroke-width="1.5" transform="matrix(0,1,-1,0,8,2.66663)"/>\n    <path d="M2.66669 8L13.3334 8" stroke="rgb(44,44,44)" stroke-linecap="round" stroke-width="1.5"/>\n  </svg>\n  `,minus:`\n    <svg viewBox="0 0 16 16" fill="currentColor" width="1em" height="1em" focusable="false" aria-hidden="true" data-icon="minus">\n      <path d="M2.66669 8L13.3334 8" stroke="rgb(44,44,44)" stroke-linecap="round" stroke-width="1.5"/>\n    </svg>\n  `,close:`\n    <svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="close">\n\t    <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n\t\t  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n    </svg>\n  `,pause:`<svg viewBox="0 0 20 20" fill="currentColor" width="1em" height="1em" focusable="false" aria-hidden="true" data-icon="pause">\n\t\t  <path d="M9.43914 2.47881L13.4688 8.4912C14.3594 9.81998 13.4071 11.6047 11.8074 11.6047L3.74811 11.6047C2.14849 11.6047 1.19616 9.81998 2.08675 8.4912L6.11641 2.47881C6.90863 1.2968 8.64693 1.2968 9.43914 2.47881Z" fill-rule="evenodd" transform="matrix(0,1,-1,0,16.5781,2.22229)" />\n    </svg>\n  `};
+	/**
+	 * 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 说明]
+	 * 需要满足 (24 * 60 * 60) % ([0] * [2]) = 0， 这样 0 点刻度才能正确显示
+	 */
+	/**
+	 * 时间刻度宽度, 需要满足  (24 * 60 * 60) % ([0] * [2]) = 0
+	 */const TIME_WIDTH=[[1,10,10,"单位 1秒"],[60,20,5,"单位 1分钟"],[600,20,6,"单位 10分钟"],[3600,30,6,"单位 1小时"],[14400,40,2,"单位 4小时"],[43200,80,2,"单位 12小时"]];
+	/**
+	 * 时间刻度宽度, 需要满足  (24 * 60 * 60) % ([0] * [2]) = 0
+	 * //  * 0： 1分钟，
+	//  * 1： 10分钟
+	//  * 2： 半小时
+	//  * 3： 1小时
+	//  * 4： 2小时
+	//  * 5： 4小时
+	 */const MOBILE_TIME_WIDTH=[[1,10,10,"单位 1分钟"],[10,20,5,"单位 10分钟"],[30,20,6,"单位 30分钟"],[60,30,6,"单位 1小时"],[120,40,2,"单位 2小时"],[240,80,2,"单位 4小时"]];
+	/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable eqeqeq */ /* eslint-disable no-unneeded-ternary */ /* eslint-disable @typescript-eslint/no-this-alias */ /* eslint-disable @typescript-eslint/prefer-includes */function _extends$1$1(){_extends$1$1=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key))target[key]=source[key];}return target};return _extends$1$1.apply(this,arguments)}
+	/**
+	 * 时间轴样式类前缀
+	 */const MOBILE_TIMELINE_PREFIX="ez-time-line";const MOBILE_TIME_LINE_DEFAULT_OPTIONS=Object.assign({},BASE_TIME_LINE_DEFAULT_OPTIONS,{height:400,width:"100%",timeWidth:0,readOnly:false,timePointColor:"#648FFC",timeTextColor:"#666666",timeScaleColor:"transparent",timeSectionColor:"#369FFF",timeAxisBgColor:"#BDCDFF",
+	/** 当前时间背景颜色 */currentTimeBgColor:"#648FFC",
+	/** 当前时间颜色 */currentTimeColor:"#FFFFFF",showTimeWidthBtn:true});class MobileTimeLine extends BaseTimeLine{
 	/**
-	 * @description 判读两个区间是否重叠
-	 * @param {number} a_start 一个区间的开始
-	 * @param {number} a_end 一个区间的结束
-	 * @param {number} b_start 另一个区间的开始
-	 * @param {number} b_end 另一个区间的结束
-	 * @returns {boolean}
-	 */ function isOverlap(a_start, a_end, b_start, b_end) {
-	    return Math.max(a_start, b_start) <= Math.min(a_end, b_end);
-	}
-
-	/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable eqeqeq */ /* eslint-disable no-unneeded-ternary */ /* eslint-disable @typescript-eslint/no-this-alias */ /* eslint-disable @typescript-eslint/prefer-includes */ function _extends$5() {
-	    _extends$5 = Object.assign || function(target) {
-	        for(var i = 1; i < arguments.length; i++){
-	            var source = arguments[i];
-	            for(var key in source){
-	                if (Object.prototype.hasOwnProperty.call(source, key)) {
-	                    target[key] = source[key];
-	                }
-	            }
-	        }
-	        return target;
-	    };
-	    return _extends$5.apply(this, arguments);
-	}
-	const PREFIX = 'ez-time-line';
-	/**
-	 * 0： 1分钟，
-	 * 1： 10分钟
-	 * 2： 半小时
-	 * 3： 1小时
-	 * 4： 2小时
-	 */ const scaleEnum = {
-	    0: 1,
-	    1: 10,
-	    2: 30,
-	    3: 60,
-	    4: 120
-	};
-	const MOBILE_TIME_LINE_DEFAULT_OPTIONS = Object.assign({}, BASE_TIME_LINE_DEFAULT_OPTIONS, {
-	    // height: 400,
-	    scale: 0,
-	    readOnly: false
-	});
-	let TimeLine$1 = class TimeLine extends BaseTimeLine {
-	    /**
 	   * 更新状态
 	   * @param obj
-	   */ setState(obj) {
-	        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	        Object.keys(obj).forEach((key)=>{
-	            this.state[key] = obj[key];
-	            if (key === 'scrollTop' && this._$itemList) {
-	                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	                this._$itemContainer.scrollTo(0, obj[key]);
-	            }
-	            if (key === 'current' && this._$currentTime) {
-	                this._$currentTime.querySelector(`.${PREFIX}-current-value`).innerHTML = obj[key];
-	            }
-	        });
-	    }
-	    /**
+	   */
+	setState(obj){
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	Object.keys(obj).forEach(key=>{this.state[key]=obj[key];if(key==="scrollTop"&&this._$itemList)
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	this._$itemContainer.scrollTo(0,obj[key]);if(key==="current"&&this._$currentTime&&obj[key]){var _this_timeSections_;this._$currentTime.querySelector(`.${MOBILE_TIMELINE_PREFIX}-current-value`).innerHTML=obj[key];console.log("current",obj[key]);this.current=new Date(TimeLineUtil.tranTime((_this_timeSections_=this.timeSections[0])==null?void 0:_this_timeSections_.endTime,"YYYY-MM-DD")+" "+obj[key]);}});}
+	/**
 	   * 设置只读或取消只读
 	   * @param readOnly - 只读或取消只读
 	   * @returns
-	   */ setReadOnly(readOnly) {
-	        this._readOnly = readOnly;
-	        if (this._$itemList) this._$itemContainer.style.overflowY = readOnly ? 'hidden' : 'scroll';
-	    }
-	    /**
+	   */setReadOnly(readOnly){super.setReadOnly(readOnly);if(this._$itemList)this._$itemContainer.style.overflowY=readOnly?"hidden":"scroll";}
+	/**
 	   * 改变时间轴刻度
 	   * 0： 1分钟，
 	   * 1： 10分钟
 	   * 2： 半小时
 	   * 3： 1小时
 	   * 4： 2小时
-	   * @param value 120: 2小时， 60：1小时， 30：半小时，10：10分钟，1：1分钟
-	   */ changeScale(scale) {
-	        if (scaleEnum[scale]) {
-	            this._scale = scale;
-	            this._matchTimeDot();
-	        }
-	    }
-	    get scale() {
-	        return this._scale;
-	    }
-	    /**
+	   * @param timeWidth  // 120: 2小时， 60：1小时， 30：半小时，10：10分钟，1：1分钟
+	   */setTimeWidth(timeWidth){if(MOBILE_TIME_WIDTH[timeWidth]){super.setTimeWidth(timeWidth);this._matchTimeDot();}else console.warn(`scale ${timeWidth} not exist!`);}
+	/**
 	   * 获取真实时间刻度（时间单位 分钟）
-	   */ get _scaleWidth() {
-	        return scaleEnum[this._scale] || scaleEnum[0];
-	    }
-	    updateRecords(records, defaultIndex) {
-	        const list = records.map((record)=>{
-	            return _extends$5({}, record, {
-	                startTime: formatDateToHHmmss(record.startTime),
-	                endTime: formatDateToHHmmss(record.endTime)
-	            });
-	        });
-	        if (list.length > 0) {
-	            if (typeof defaultIndex === 'undefined') {
-	                defaultIndex = list.length - 1;
-	            }
-	            // 若current不为0，则不重置current，避免拖动后时间轴回弹
-	            const { current } = this.state;
-	            this.setState({
-	                availTimeLine: list,
-	                start: list[defaultIndex].startTime,
-	                end: list[defaultIndex].endTime,
-	                current: current === 0 ? list[defaultIndex].startTime : current
-	            });
-	            this._matchRecTimeDot();
-	            this._primaryOffsetH();
-	        } else {
-	            this.setState({
-	                availTimeLine: []
-	            });
-	            this._matchRecTimeDot();
-	        }
-	    }
-	    _matchTimeDot() {
-	        const { end } = this.state;
-	        const scaleWidth = this._scaleWidth;
-	        const timeArr = [];
-	        // 时间转分钟
-	        let minute = this._timeToMinute(end);
-	        minute = Math.floor(minute / scaleWidth) * scaleWidth;
-	        for(let i = minute; i >= 0;){
-	            let marginTop = 0;
-	            let marginBottom = 0;
-	            // 视频片段
-	            if (i == minute) marginTop = 70;
-	            if (i == 0) {
-	                const height = this.$container.clientHeight;
-	                marginBottom = height - 70;
-	            }
-	            const time = this._minuteToTime(i);
-	            timeArr.push({
-	                id: i,
-	                current: time,
-	                label: 'a' + i,
-	                marginTop,
-	                marginBottom,
-	                recArr: []
-	            });
-	            i = i - scaleWidth;
-	        }
-	        this.setState({
-	            timeArr
-	        });
-	        this._renderDateLine();
-	    }
-	    _matchRecTimeDot() {
-	        const { start, end, availTimeLine, timeArr } = this.state;
-	        const scaleWidth = this._scaleWidth;
-	        const len = availTimeLine.length;
-	        if (len === 0) {
-	            for(let j = 0; j < timeArr.length; j++){
-	                timeArr[j].recArr = [];
-	            }
-	        } else {
-	            for(let k = 0; k < timeArr.length; k++){
-	                timeArr[k].recArr = [];
-	            }
-	            for(let i = 0; i < len; i++){
-	                const temp = availTimeLine[i];
-	                const st = this._timeToSecond(temp.startTime);
-	                const et = this._timeToSecond(temp.endTime);
-	                // console.log('st: ', st, 'et:', et);
-	                let stAvailPercent = 0;
-	                let etAvailPercent = 0;
-	                const stMinute = Math.floor(st / (scaleWidth * 60)) * scaleWidth;
-	                stAvailPercent = (st - stMinute * 60) / scaleWidth;
-	                const etMinute = Math.floor(et / (scaleWidth * 60)) * scaleWidth;
-	                etAvailPercent = (et - etMinute * 60) / scaleWidth;
-	                for(let j = 0; j < timeArr.length; j++){
-	                    if (timeArr[j].id == stMinute && timeArr[j].id == etMinute) {
-	                        const height = etAvailPercent - stAvailPercent;
-	                        const top = 60 - etAvailPercent;
-	                        timeArr[j].recArr.push({
-	                            height,
-	                            top
-	                        });
-	                    } else {
-	                        if (timeArr[j].id == stMinute) {
-	                            timeArr[j].recArr.push({
-	                                height: 60 - stAvailPercent,
-	                                top: 0
-	                            });
-	                        } else if (timeArr[j].id == etMinute) {
-	                            timeArr[j].recArr.push({
-	                                height: etAvailPercent,
-	                                top: 60 - etAvailPercent
-	                            });
-	                        } else if (timeArr[j].id > stMinute && timeArr[j].id < etMinute) {
-	                            timeArr[j].recArr.push({
-	                                height: 60,
-	                                top: 0
-	                            });
-	                        }
-	                    }
-	                }
-	            }
-	        }
-	        this.setState({
-	            timeArr
-	        });
-	        this._renderDateLine();
-	    }
-	    _renderDateLine() {
-	        const { timeArr } = this.state;
-	        const container = this._$itemList;
-	        container.innerHTML = '';
-	        timeArr.forEach((item, index)=>{
-	            const timeItemDOM = document.createElement('div');
-	            timeItemDOM.setAttribute('class', PREFIX + '-time-scale-area');
-	            timeItemDOM.style.cssText = `margin-top: ${item.marginTop}px; margin-bottom: ${item.marginBottom}px; border-right-color: ${item.borderColor};`;
-	            const scaleDOM = document.createElement('div');
-	            scaleDOM.setAttribute('class', PREFIX + '-scale');
-	            let timeItemHtml = `
-      <div class="${PREFIX}-time-scale"></div>
-      <div class="${PREFIX}-time-scale"></div>
-      <div class="${PREFIX}-time-scale"></div>
-      <div class="${PREFIX}-time-scale"></div>
-      <div class="${PREFIX}-time-scale"></div>
-      <div class="${PREFIX}-time-scale" style="width:10px"></div>
-    `;
-	            item.recArr.forEach((i, j)=>{
-	                timeItemHtml += `<div class="${PREFIX}-time-unavail" style="height: ${i.height}px;background-color:#A8B9ED; top: ${i.top}px"></div>`;
-	            });
-	            timeItemHtml += `<div id=${item.label} class="${PREFIX}-time-label"> ${item.current}</div>`;
-	            timeItemDOM.innerHTML = timeItemHtml;
-	            container.appendChild(timeItemDOM);
-	        });
-	    }
-	    _primaryOffsetH() {
-	        const { start, timeArr, current } = this.state;
-	        const scaleWidth = this._scaleWidth;
-	        const currentItem = timeArr[0].current;
-	        const currentTime = this._timeToSecond(currentItem);
-	        // current不为0时，从当前时间开始计算偏移量，避免拖动时间轴后回弹
-	        const startSecond = this._timeToSecond(current === 0 ? start : current);
-	        const offsetS = currentTime - startSecond;
-	        const offsetH = Math.ceil(offsetS / scaleWidth) + 60; // offsetS / (scaleWidth * 60) * 60
-	        this.setState({
-	            scrollTop: offsetH
-	        });
-	    }
-	    _currentOffsetH() {
-	        const { current, timeArr } = this.state;
-	        const scale = this._scaleWidth;
-	        const startItem = timeArr[0].current;
-	        const startSecond = this._timeToSecond(startItem);
-	        const currentSecond = this._timeToSecond(current);
-	        const offsetS = startSecond - currentSecond;
-	        const offsetH = Math.ceil(offsetS / scale) + 60; // offsetS / (scale * 60) * 60
-	        this.setState({
-	            scrollTop: offsetH
-	        });
-	    }
-	    _rectTopToTime(reactTop) {
-	        const scaleWidth = this._scaleWidth;
-	        // let rectTop = rect.top; // 获取当前元素距离父元素顶部的高度
-	        // let reactTop = 0 - rectTop; // 实际偏移高度
-	        const index = Math.floor(reactTop / 60); // 以分钟为刻度时，每个元素初始高度为60px, 向下取整并除以时刻倍数得出偏移item;
-	        const offsetH = reactTop - index * 60; // 偏移高度
-	        let current;
-	        let offsetSecond;
-	        if (offsetH == 0) {
-	            var _this_state_timeArr_;
-	            current = (_this_state_timeArr_ = this.state.timeArr[index - 1]) == null ? void 0 : _this_state_timeArr_.current;
-	            offsetSecond = 0;
-	        } else {
-	            // 当scaleWidth==120, scaleWidth==60, scaleWidth==30, scaleWidth==10, scaleWidth==1
-	            const time = this.state.timeArr[index].current;
-	            const minute = this._timeToMinute(time);
-	            // 相对于下一元素偏移
-	            const offsetY = 60 - offsetH;
-	            const offsetS = offsetY * scaleWidth; // offsetY / 60 * scaleWidth * 60
-	            const offsetM = Math.floor(offsetS / 60) + minute;
-	            const second = Math.floor(offsetS / 60) * 60;
-	            offsetSecond = Math.ceil(offsetS - second); // 保留两位小数
-	            current = this._minuteToTime(offsetM);
-	        }
-	        if (current === undefined || +current.split(':')[0] >= 24 && (+current.split(':')[1] > 0 || offsetSecond > 0)) {
-	            // 超出 24h 后不允许
-	            this.update(new Date(`${new Date().getFullYear()}-${subTime(new Date().getMonth() + 1)}-${subTime(new Date().getDate())} 23:59:59`));
-	            return;
-	        }
-	        this.setState({
-	            current: current + ':' + (offsetSecond > 9 ? offsetSecond : '0' + offsetSecond),
-	            scrollTop: reactTop
-	        });
-	    }
-	    /**
+	   */get _scaleWidth(){return (MOBILE_TIME_WIDTH[this.timeWidth]||MOBILE_TIME_WIDTH[0])[0]}
+	/**
+	   * 更新片段数组
+	   * @param timeSections
+	   * @param defaultIndex
+	   */updateTimeSections(timeSections,defaultIndex){super.updateTimeSections(timeSections);const list=timeSections.map(record=>_extends$1$1({},record,{startTime:TimeLineUtil.formatDateToHHmmss(record.startTime),endTime:TimeLineUtil.formatDateToHHmmss(record.endTime)}));if(list.length>0){if(typeof defaultIndex==="undefined")defaultIndex=list.length-1;// 默认选中最后一个片段位置
+	// 若current不为0，则不重置current，避免拖动后时间轴回弹
+	const{current:current}=this.state;this.setState({availTimeLine:list,start:list[defaultIndex].startTime,end:list[defaultIndex].endTime,current:current===0?list[defaultIndex].startTime:current});this._matchTimeDot();this._primaryOffsetH();}else {this.setState({availTimeLine:[]});this._matchTimeDot();}this._renderPickerContent();}
+	/**
 	   * 更新当前时间
 	   * @param time 能转成时间的值， 如 时间对象 Date, 时间戳，时间戳字符串
-	   */ update(time) {
-	        if (time && !this._isTouchStart) {
-	            this.setState({
-	                current: tranTime(time, 'HH:mm:ss')
-	            });
-	            this._currentOffsetH();
-	        }
-	    }
-	    destroy() {
-	        if (this._scrollTimer) {
-	            clearInterval(this._scrollTimer);
-	            this._scrollTimer = null;
-	        }
-	        this._removeEventListener();
-	        super.destroy();
-	    }
-	    _timeToSecond(time) {
-	        const e = time.split(':');
-	        const h = Number(e[0]);
-	        const m = Number(e[1]);
-	        const s = Number(e[2]);
-	        return h * 60 * 60 + m * 60 + (s ? s : 0);
-	    }
-	    _minuteToTime(minute) {
-	        const hour = Math.floor(minute / 60);
-	        const m = minute % 60;
-	        return (hour > 9 ? hour : '0' + hour) + ':' + (m > 9 ? m : '0' + m);
-	    }
-	    _timeToMinute(time) {
-	        const e = time.split(':');
-	        const h = Number(e[0]);
-	        const m = Number(e[1]);
-	        // const s = Number(e[2]);
-	        return h * 60 + m;
-	    }
-	    _render() {
-	        this._$currentTime = document.createElement('div');
-	        this._$currentTime.classList.add(PREFIX + '-current');
-	        this._$currentTime.innerHTML = `<div class="${PREFIX}-current-value">00:00:00</div>`;
-	        this.$container.appendChild(this._$currentTime);
-	        this._$itemContainer = document.createElement('div');
-	        this._$itemContainer.classList.add(PREFIX + '-item-container');
-	        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	        if (/\d/.test(this.options.height)) {
-	            this._$itemContainer.style.cssText += `height: ${this.options.height}px`;
-	        } else if (typeof this.options.height === 'string') {
-	            this._$itemContainer.style.cssText += `height: ${this.options.height}`;
-	        } else {
-	            const height = this.$container.clientHeight;
-	            this._$itemContainer.style.cssText += `height: ${height}px`;
-	        }
-	        this._$itemList = document.createElement('div');
-	        this._$itemList.classList.add(PREFIX + '-item');
-	        this._$itemContainer.appendChild(this._$itemList);
-	        this.$container.appendChild(this._$itemContainer);
-	        this._addEventListener();
-	    }
-	    _addEventListener() {
-	        // js安卓、IOS、鸿蒙系统监听开始触摸
-	        if (this._$itemContainer) {
-	            // 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
-	            this._$itemContainer.addEventListener('touchstart', this._touchstart, false);
-	            // 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
-	            this._$itemContainer.addEventListener('touchmove', this._touchmove, false);
-	            // 手动滚动停止，选定时刻自动播放
-	            this._$itemContainer.addEventListener('touchend', this._touchend, false);
-	        }
-	        this._matchTimeDot();
-	    }
-	    _removeEventListener() {
-	        if (this._$itemContainer) {
-	            // 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
-	            this._$itemContainer.removeEventListener('touchstart', this._touchstart);
-	            // 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
-	            this._$itemContainer.removeEventListener('touchmove', this._touchmove);
-	            // 手动滚动停止，选定时刻自动播放
-	            this._$itemContainer.removeEventListener('touchend', this._touchend);
-	        }
-	    }
-	    _touchstart() {
-	        if (this._readOnly) return false;
-	        this._isTouchStart = true;
-	        this.options.onDragStart == null ? void 0 : this.options.onDragStart.call(this.options, this.state.current);
-	    }
-	    _touchmove() {
-	        var _this__$itemContainer;
-	        if (this._readOnly) return false;
-	        const reactTop = (_this__$itemContainer = this._$itemContainer) == null ? void 0 : _this__$itemContainer.scrollTop; // 实际偏移高度
-	        this._rectTopToTime(reactTop);
-	        this.options.onDragging == null ? void 0 : this.options.onDragging.call(this.options, this.state.current);
-	    }
-	    _touchend() {
-	        if (this._readOnly) return false;
-	        // 这里有问题， 滚动是利用滚动操作（overflow-y: scroll;）的
-	        new Promise((resolve, _reject)=>{
-	            let preTop = -1;
-	            if (this._scrollTimer) {
-	                clearInterval(this._scrollTimer);
-	                this._scrollTimer = null;
-	            }
-	            this._scrollTimer = setInterval(()=>{
-	                var _this__$itemContainer;
-	                // debugger
-	                const reactTop = (_this__$itemContainer = this._$itemContainer) == null ? void 0 : _this__$itemContainer.scrollTop; // 实际偏移高度
-	                if (reactTop !== preTop) {
-	                    preTop = reactTop;
-	                } else {
-	                    if (this._scrollTimer) {
-	                        clearInterval(this._scrollTimer);
-	                        this._scrollTimer = null;
-	                    }
-	                    this._isTouchStart = false;
-	                    resolve(reactTop);
-	                }
-	            }, 100);
-	        }).then((reactTop)=>{
-	            this._rectTopToTime(reactTop);
-	            this.options.onDragEnd == null ? void 0 : this.options.onDragEnd.call(this.options, this.state.current);
-	            this.options.onChange == null ? void 0 : this.options.onChange.call(this.options, this.state.current);
-	        });
-	    }
-	    constructor(container, options){
-	        super(container, deepmerge(MOBILE_TIME_LINE_DEFAULT_OPTIONS, options, {
-	            clone: false
-	        })), // 禁用拖动轴
-	        this._readOnly = false, this._isTouchStart = false, this.state = {
-	            start: '00:00:00',
-	            end: '24:00:00',
-	            current: 0,
-	            timeArr: [],
-	            availTimeLine: [],
-	            scrollTop: 0,
-	            index: 0,
-	            date: '',
-	            noTimeLineTxt: ''
-	        };
-	        this._scale = this.options.scale || 0;
-	        this.setReadOnly(!!this.options.readOnly);
-	        this._touchstart = this._touchstart.bind(this);
-	        this._touchmove = this._touchmove.bind(this);
-	        this._touchend = this._touchend.bind(this);
-	        this._render();
-	    }
-	};
-
+	   */update(time){if(time&&!this._isTouchStart){this.setState({current:TimeLineUtil.tranTime(time,"HH:mm:ss")});this._currentOffsetH();}}
 	/**
-	 * 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 说明]
-	 * 需要满足 (24 * 60 * 60) % ([0] * [2]) = 0， 这样 0 点刻度才能正确显示
-	 */ /**
-	 * 时间刻度宽度, 需要满足  (24 * 60 * 60) % ([0] * [2]) = 0
-	 */ const TIME_WIDTH = [
-	    [
-	        1,
-	        10,
-	        10,
-	        '单位 1秒'
-	    ],
-	    [
-	        60,
-	        20,
-	        5,
-	        '单位 1分钟'
-	    ],
-	    [
-	        600,
-	        20,
-	        6,
-	        '单位 10分钟'
-	    ],
-	    [
-	        3600,
-	        30,
-	        6,
-	        '单位 1小时'
-	    ],
-	    [
-	        14400,
-	        40,
-	        2,
-	        '单位 4小时'
-	    ],
-	    [
-	        43200,
-	        80,
-	        2,
-	        '单位 12小时'
-	    ]
-	];
-
+	   * 销毁
+	   */destroy(){if(this._scrollTimer){clearInterval(this._scrollTimer);this._scrollTimer=null;}if(this._$currentTime){this.$container.removeChild(this._$currentTime);this._$currentTime=null;}if(this._$itemContainer&&this._$itemList){this._$itemContainer.removeChild(this._$itemList);this._$itemList=null;}if(this._$itemContainer){this.$container.removeChild(this._$itemContainer);this._$itemContainer=null;}if(this._$op){this.$container.removeChild(this._$op);this._$op=null;}if(this._picker){this._picker.destroy();this._picker=null;}this._removeEventListener();super.destroy();}
+	/**
+	   * 渲染时间轴刻度数组
+	   */_matchTimeDot(){const scaleWidth=this._scaleWidth;// 时间单位 分钟
+	const timeArr=[];
+	// 时间转分钟
+	let minute=TimeLineUtil.timeToMinute("24:00:00");minute=Math.floor(minute/scaleWidth)*scaleWidth;for(let i=minute;i>=0;){let marginTop=0;let marginBottom=0;
+	// 视频片段
+	if(i==minute)marginTop=70;if(i==0)marginBottom=this.$container.clientHeight-70;const time=TimeLineUtil.minuteToTime(i);const startSecond=TimeLineUtil.timeToSecond(time+":00");const endSecond=TimeLineUtil.timeToSecond(time+":00")+scaleWidth*60;const coverList=this.timeSections.filter(item=>{const start=TimeLineUtil.timeToSecond(TimeLineUtil.tranTime(item.startTime,"HH:mm:ss"));return start>=startSecond&&start<endSecond});timeArr.push({id:i,current:time,label:"a"+i,marginTop:marginTop,marginBottom:marginBottom,recArr:[],coverArr:coverList});i-=scaleWidth;}this.setState({timeArr:timeArr});this._matchRecTimeDot();}_matchRecTimeDot(){const{availTimeLine:availTimeLine,timeArr:timeArr}=this.state;const scaleWidth=this._scaleWidth;const len=availTimeLine.length;if(len===0)for(let j=0;j<timeArr.length;j++)timeArr[j].recArr=[];else {for(let k=0;k<timeArr.length;k++)timeArr[k].recArr=[];for(let i=0;i<len;i++){const temp=availTimeLine[i];const st=TimeLineUtil.timeToSecond(temp.startTime);// "00:01:00" -> 60  // 秒
+	const et=TimeLineUtil.timeToSecond(temp.endTime);let stAvailPercent=0;let etAvailPercent=0;const stMinute=Math.floor(st/(scaleWidth*60))*scaleWidth;stAvailPercent=(st-stMinute*60)/scaleWidth;const etMinute=Math.floor(et/(scaleWidth*60))*scaleWidth;etAvailPercent=(et-etMinute*60)/scaleWidth;for(let j=0;j<timeArr.length;j++)if(timeArr[j].id==stMinute&&timeArr[j].id==etMinute){const height=etAvailPercent-stAvailPercent;const top=60-etAvailPercent;
+	// prettier-ignore
+	timeArr[j].recArr.push({height:height,top:top});}else if(timeArr[j].id==stMinute)timeArr[j].recArr.push({height:60-stAvailPercent,top:0});else if(timeArr[j].id==etMinute)timeArr[j].recArr.push({height:etAvailPercent,top:60-etAvailPercent});else if(timeArr[j].id>stMinute&&timeArr[j].id<etMinute)timeArr[j].recArr.push({height:60,top:0});}}this.setState({timeArr:timeArr});this._renderDateLine();}_renderDateLine(){const{timeArr:timeArr}=this.state;const container=this._$itemList;container.innerHTML="";timeArr.forEach(item=>{const timeItemDOM=document.createElement("div");timeItemDOM.setAttribute("class",MOBILE_TIMELINE_PREFIX+"-time-scale-area");if(item.marginTop)timeItemDOM.style.cssText+=`margin-top: ${item.marginTop}px;`;if(item.marginBottom)timeItemDOM.style.cssText+=`margin-bottom: ${item.marginBottom}px;`;timeItemDOM.style.cssText+=`border-right-color: ${this.options.timeAxisBgColor||"rgba(189, 205, 255, 1)"};`;const scaleDOM=document.createElement("div");scaleDOM.setAttribute("class",MOBILE_TIMELINE_PREFIX+"-scale");let timeItemHtml=``;if(item.coverArr.length)timeItemHtml+=`\n            <div class="${MOBILE_TIMELINE_PREFIX}-time-cover-fold ${item.coverArr.length>1?`${MOBILE_TIMELINE_PREFIX}-time-cover-fold-multiple`:""} " data-start="${item.current}">\n              ${item.coverArr.length>1?`<div class="${MOBILE_TIMELINE_PREFIX}-cover-fold-placeholder" style="color: #FFF"></div>`:""}\n              <div class="${MOBILE_TIMELINE_PREFIX}-time-cover-fold-img">\n                ${item.coverArr[0].coverPic?`<img src="${item.coverArr[0].coverPic}&x=1000" />`:""}\n                <span class="${MOBILE_TIMELINE_PREFIX}-time-cover-fold-len">\n                ${item.coverArr.length>1?this.i18n.t("foldTitle",{len:item.coverArr.length,unit:"videos"}):`${TimeLineUtil.tranTime(item.coverArr[0].startTime,"HH:mm")}`}\n                </span>\n                ${item.coverArr.length===1?`<span class="${MOBILE_TIMELINE_PREFIX}-time-cover-fold-time">${TimeLineUtil.tranTimeToString(item.coverArr[0].startTime,item.coverArr[0].endTime)}</span>`:""}\n                <span class="${MOBILE_TIMELINE_PREFIX}-time-cover-fold-pause">${Icons.pause}</span>\n              </div>\n            </div>`;
+	// 六个详细刻度
+	// <div class="${MOBILE_TIMELINE_PREFIX}-time-scale"></div>
+	// <div class="${MOBILE_TIMELINE_PREFIX}-time-scale"></div>
+	// <div class="${MOBILE_TIMELINE_PREFIX}-time-scale"></div>
+	// <div class="${MOBILE_TIMELINE_PREFIX}-time-scale"></div>
+	// <div class="${MOBILE_TIMELINE_PREFIX}-time-scale"></div>
+	// <div class="${MOBILE_TIMELINE_PREFIX}-time-scale" style="width:10px"></div>
+	item.recArr.forEach(i=>{timeItemHtml+=`<div class="${MOBILE_TIMELINE_PREFIX}-time-unavail"\n                              style="height: ${i.height}px;background-color:${this.options.timeSectionColor||"#369FFF"}; top: ${i.top}px">\n                        </div>`;});timeItemHtml+=`<div id=${item.label} class="${MOBILE_TIMELINE_PREFIX}-time-label" style="color: ${this.options.timeTextColor||"#666"}">${item.current}</div>`;timeItemDOM.innerHTML=timeItemHtml;container.appendChild(timeItemDOM);});}_primaryOffsetH(){const{start:start,timeArr:timeArr,current:current}=this.state;const scaleWidth=this._scaleWidth;const currentItem=timeArr[0].current;const currentTime=TimeLineUtil.timeToSecond(currentItem);
+	// current不为0时，从当前时间开始计算偏移量，避免拖动时间轴后回弹
+	const startSecond=TimeLineUtil.timeToSecond(current===0?start:current);const offsetS=currentTime-startSecond;const offsetH=Math.ceil(offsetS/scaleWidth)+60;// offsetS / (scaleWidth * 60) * 60
+	this.setState({scrollTop:offsetH});console.log("起始偏移量",offsetH);}_currentOffsetH(){const{current:current,timeArr:timeArr}=this.state;const scale=this._scaleWidth;const startItem=timeArr[0].current;const startSecond=TimeLineUtil.timeToSecond(startItem);const currentSecond=TimeLineUtil.timeToSecond(current);const offsetS=startSecond-currentSecond;const offsetH=Math.ceil(offsetS/scale)+60;// offsetS / (scale * 60) * 60
+	this.setState({scrollTop:offsetH});}_rectTopToTime(reactTop){const scaleWidth=this._scaleWidth;
+	// let rectTop = rect.top; // 获取当前元素距离父元素顶部的高度
+	// let reactTop = 0 - rectTop; // 实际偏移高度
+	const index=Math.floor(reactTop/60);// 以分钟为刻度时，每个元素初始高度为60px, 向下取整并除以时刻倍数得出偏移item;
+	const offsetH=reactTop-index*60;// 偏移高度
+	let current;let offsetSecond;
+	// console.log('index：', index, 'offsetH:', offsetH);
+	if(offsetH==0){var _this_state_timeArr_;current=(_this_state_timeArr_=this.state.timeArr[index-1])==null?void 0:_this_state_timeArr_.current;offsetSecond=0;}else {
+	// 当scaleWidth==120, scaleWidth==60, scaleWidth==30, scaleWidth==10, scaleWidth==1
+	const time=this.state.timeArr[index].current;const minute=TimeLineUtil.timeToMinute(time);
+	// 相对于下一元素偏移
+	const offsetY=60-offsetH;const offsetS=offsetY*scaleWidth;// offsetY / 60 * scaleWidth * 60
+	const offsetM=Math.floor(offsetS/60)+minute;const second=Math.floor(offsetS/60)*60;offsetSecond=Math.ceil(offsetS-second);// 保留两位小数
+	current=TimeLineUtil.minuteToTime(offsetM);}if(current===void 0||+current.split(":")[0]>=24&&(+current.split(":")[1]>0||offsetSecond>0)){
+	// 超出 24h 后不允许
+	this.update(new Date(`${(new Date).getFullYear()}-${TimeLineUtil.subTime((new Date).getMonth()+1)}-${TimeLineUtil.subTime((new Date).getDate())} 23:59:59`));return}this.setState({current:current+":"+(offsetSecond>9?offsetSecond:"0"+offsetSecond),scrollTop:reactTop});}_render(){this._$currentTime=document.createElement("div");this._$currentTime.classList.add(MOBILE_TIMELINE_PREFIX+"-current");this._$currentTime.innerHTML=`<div class="${MOBILE_TIMELINE_PREFIX}-current-content" style="color: ${this.options.currentTimeBgColor||"#648FFC"}">\n      <span class="${MOBILE_TIMELINE_PREFIX}-current-tip">${Icons.tip}</span>\n      <span class="${MOBILE_TIMELINE_PREFIX}-current-tip-line" style="background-color: ${this.options.timePointColor||"#648FFC"};"></span>\n      <div class="${MOBILE_TIMELINE_PREFIX}-current-value" style="color: ${this.options.currentTimeColor||"#FFFFFF"}">00:00:00</div>\n    </div>`;this.$container.appendChild(this._$currentTime);this._$itemContainer=document.createElement("div");this._$itemContainer.classList.add(MOBILE_TIMELINE_PREFIX+"-item-container");
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	if(/\d/.test(this.options.height))this._$itemContainer.style.cssText+=`height: ${this.options.height}px`;else if(typeof this.options.height==="string")this._$itemContainer.style.cssText+=`height: ${this.options.height}`;else {const height=this.$container.clientHeight;this._$itemContainer.style.cssText+=`height: ${height}px`;}this._$itemList=document.createElement("div");this._$itemList.classList.add(MOBILE_TIMELINE_PREFIX+"-item");this._$itemContainer.appendChild(this._$itemList);this.$container.appendChild(this._$itemContainer);if(this.options.showTimeWidthBtn){
+	// 加减
+	this._$op=document.createElement("div");this._$op.classList.add(MOBILE_TIMELINE_PREFIX+"-op");this._$op.innerHTML=`<span class="${MOBILE_TIMELINE_PREFIX}-op-wrapper">\n        <span class="${MOBILE_TIMELINE_PREFIX}-icon-plus">${Icons.plus}</span>\n        <span class="${MOBILE_TIMELINE_PREFIX}-icon-minus">${Icons.minus}</span>\n      </span>`;this.$container.appendChild(this._$op);}this._picker=new Picker(null,{isMobile:true,wrapClassName:`${MOBILE_TIMELINE_PREFIX}-picker`,onOpenChange:isOpen=>{var _this_options_onPickerOpenChange,_this_options;(_this_options=this.options)==null?void 0:(_this_options_onPickerOpenChange=_this_options.onPickerOpenChange)==null?void 0:_this_options_onPickerOpenChange.call(_this_options,isOpen);}});this._renderPickerContent();this._addEventListener();}_addEventListener(){
+	// js安卓、IOS、鸿蒙系统监听开始触摸
+	if(this._$itemContainer){
+	// console.warn('=== TimeLine HAS_POINTER_EVENT ===', HAS_POINTER_EVENT);
+	// 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
+	this._$itemContainer.addEventListener("touchstart",this._touchstart,false);
+	// 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
+	this._$itemContainer.addEventListener("touchmove",this._touchmove,false);
+	// 手动滚动停止，选定时刻自动播放
+	this._$itemContainer.addEventListener("touchend",this._touchend,false);
+	// prettier-ignore
+	// this._$itemContainer.addEventListener('scroll', this._touchmove, false);
+	}if(this.options.showTimeWidthBtn&&this._$op){var// this._$op.addEventListener('click', this._opClick, false);
+	_this__$op_querySelector,_this__$op_querySelector1;(_this__$op_querySelector=this._$op.querySelector(`.${MOBILE_TIMELINE_PREFIX}-icon-plus`))==null?void 0:_this__$op_querySelector.addEventListener("click",this._plusClick,false);(_this__$op_querySelector1=this._$op.querySelector(`.${MOBILE_TIMELINE_PREFIX}-icon-minus`))==null?void 0:_this__$op_querySelector1.addEventListener("click",this._minusClick,false);}this._matchTimeDot();if(this._picker){this._delegatePickerClose=delegate(this._picker.$body,`.${MOBILE_TIMELINE_PREFIX}-picker-close`,"click",this._onPickerClose,false);this._delegateItemContent=delegate(this._picker.$body,`.${MOBILE_TIMELINE_PREFIX}-picker-item-content`,"click",this._onClickItem,false);this._delegateCoverFold=delegate(this.$container,`.${MOBILE_TIMELINE_PREFIX}-time-cover-fold`,"click",this._onClickCoverFold,false);}}_removeEventListener(){if(this._$itemContainer){
+	// 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
+	this._$itemContainer.removeEventListener("touchstart",this._touchstart);
+	// 监听手动滚动时间轴时，停止时间轴滚动，时刻仍然变化
+	this._$itemContainer.removeEventListener("touchmove",this._touchmove);
+	// 手动滚动停止，选定时刻自动播放
+	this._$itemContainer.removeEventListener("touchend",this._touchend);}if(this.options.showTimeWidthBtn&&this._$op){var _this__$op_querySelector,_this__$op_querySelector1;(_this__$op_querySelector=this._$op.querySelector(`.${MOBILE_TIMELINE_PREFIX}-icon-plus`))==null?void 0:_this__$op_querySelector.removeEventListener("click",this._plusClick);(_this__$op_querySelector1=this._$op.querySelector(`.${MOBILE_TIMELINE_PREFIX}-icon-minus`))==null?void 0:_this__$op_querySelector1.removeEventListener("click",this._minusClick);}if(this._picker){var _this__picker_$body_querySelector,_this__picker_$body;(_this__picker_$body=this._picker.$body)==null?void 0:(_this__picker_$body_querySelector=_this__picker_$body.querySelector(`.${MOBILE_TIMELINE_PREFIX}-picker-close`))==null?void 0:_this__picker_$body_querySelector.removeEventListener("click",this._onPickerClose);if(this._delegateItemContent){this._delegateItemContent.forEach(function(delegation){delegation.destroy();});this._delegateItemContent=null;}if(this._delegatePickerClose){this._delegatePickerClose.forEach(function(delegation){delegation.destroy();});this._delegatePickerClose=null;}if(this._delegateCoverFold){this._delegateCoverFold.forEach(function(delegation){delegation.destroy();});this._delegateCoverFold=null;}}}_plusClick(){const timeWidth=this.timeWidth+1;if(timeWidth>0&&timeWidth<MOBILE_TIME_WIDTH.length)this.setTimeWidth(timeWidth);else console.warn("时间轴刻度宽度不能再加了");}_minusClick(){const timeWidth=this.timeWidth-1;if(timeWidth>=0&&timeWidth<MOBILE_TIME_WIDTH.length)this.setTimeWidth(Math.floor(timeWidth));else console.warn("时间轴刻度宽度不能再减了");}_touchstart(){var _this__$itemContainer;if(this.readOnly)return false;this._isTouchStart=true;this._touchstartTop=(_this__$itemContainer=this._$itemContainer)==null?void 0:_this__$itemContainer.scrollTop;this.options.onDragStart==null?void 0:this.options.onDragStart.call(this.options,this.state.current);}_touchmove(){var _this__$itemContainer;if(this.readOnly)return false;const reactTop=(_this__$itemContainer=this._$itemContainer)==null?void 0:_this__$itemContainer.scrollTop;// 实际偏移高度
+	this._rectTopToTime(reactTop);this.options.onDragging==null?void 0:this.options.onDragging.call(this.options,this.state.current);}_touchend(){if(this.readOnly)return false;
+	// 这里有问题， 滚动是利用滚动操作（overflow-y: scroll;）的
+	new Promise(resolve=>{let preTop=-1;if(this._scrollTimer){clearInterval(this._scrollTimer);this._scrollTimer=null;}this._scrollTimer=setInterval(()=>{var _this__$itemContainer;
+	// debugger
+	const reactTop=(_this__$itemContainer=this._$itemContainer)==null?void 0:_this__$itemContainer.scrollTop;// 实际偏移高度
+	if(reactTop!==preTop){console.log("scrolling",reactTop,preTop);preTop=reactTop;}else {console.log("scroll stop",reactTop,preTop);if(this._scrollTimer){clearInterval(this._scrollTimer);this._scrollTimer=null;}this._isTouchStart=false;resolve(reactTop);}},100);}).then(reactTop=>{var _this__$itemContainer;this._rectTopToTime(reactTop);console.log("页面滚动实际高度",reactTop,this.state.current);this.options.onDragEnd==null?void 0:this.options.onDragEnd.call(this.options,this.state.current);if(this._touchstartTop!==((_this__$itemContainer=this._$itemContainer)==null?void 0:_this__$itemContainer.scrollTop)){this.options.onChange==null?void 0:this.options.onChange.call(this.options,this.state.current);this._touchstartTop=0;}});}_timeSectionsToGroupsByHour(){const obj={};this.timeSections.forEach((item,index)=>{
+	// 移动端仅支持一天
+	// if (TimeLineUtil.tranTime(item.startTime, 'YYYY-MM-DD') !== TimeLineUtil.tranTime(item.endTime, 'YYYY-MM-DD')) {
+	//   //
+	// }
+	const hour=TimeLineUtil.tranTime(item.startTime,"HH");if(obj[+hour])obj[+hour].push(_extends$1$1({},item,{_index:index}));else obj[+hour]=[_extends$1$1({},item,{_index:index})];});return obj}
+	/**
+	   * 渲染选择器内容
+	   */_renderPickerContent(){var _this__picker_innerHTML,_this__picker;const hourGroups=this._timeSectionsToGroupsByHour();(_this__picker=this._picker)==null?void 0:(_this__picker_innerHTML=_this__picker.innerHTML)==null?void 0:_this__picker_innerHTML.call(_this__picker,`<div class="${MOBILE_TIMELINE_PREFIX}-picker-container">\n        <div class="${MOBILE_TIMELINE_PREFIX}-picker-header">\n          <span class="${MOBILE_TIMELINE_PREFIX}-picker-close">${Icons.close}</span>\n          ${this.i18n.t("title",{len:this.timeSections.length,unit:this.timeSections.length>1?"videos":"video"})}\n        </div>\n        <div class="${MOBILE_TIMELINE_PREFIX}-picker-content">\n          <div class="${MOBILE_TIMELINE_PREFIX}-picker-list">\n             ${Object.keys(hourGroups).reverse().map(key=>`<div class="${MOBILE_TIMELINE_PREFIX}-picker-item">\n                  <div class="${MOBILE_TIMELINE_PREFIX}-picker-item-title">${key}:00</div>\n                  <div class="${MOBILE_TIMELINE_PREFIX}-picker-item-list">\n                    ${hourGroups[key].map(item=>`<div class="${MOBILE_TIMELINE_PREFIX}-picker-item-content"\n                                      data-start="${TimeLineUtil.tranTime(item.startTime,"YYYYMMDDTHHmmssZ")}"\n                                      data-end="${TimeLineUtil.tranTime(item.endTime,"YYYYMMDDTHHmmssZ")}"\n                                      data-index="${item._index}">\n                                    <span class="${MOBILE_TIMELINE_PREFIX}-picker-item-time">${TimeLineUtil.tranTime(item.startTime,"mm:ss")}</span>\n                                    <span class="${MOBILE_TIMELINE_PREFIX}-picker-item-duration">\n                                      ${TimeLineUtil.tranTimeToString(item.startTime,item.endTime)}\n                                    </span>\n                                  <span class="${MOBILE_TIMELINE_PREFIX}-picker-item-icon-pause">${Icons.pause}</span>\n                                  ${item.coverPic?`<img class="${MOBILE_TIMELINE_PREFIX}-picker-item-cover" src="${item.coverPic}&x=1000"/>`:""}\n                                </div>`).join("")}\n                  </div>\n              </div>`).join("")}\n          </div>\n          </div>\n        </div>\n      </div>`);}_onPickerClose(){if(this._picker)this._picker.open=false;}_onClickItem(e){var _e_target_getAttribute,_e_target;console.log("click item",e);console.log(e.target);console.log(e.delegateTarget);const index=(_e_target=e.target)==null?void 0:(_e_target_getAttribute=_e_target.getAttribute)==null?void 0:_e_target_getAttribute.call(_e_target,"data-index");if(this._picker)this._picker.open=false;this.options.onPickerSelect==null?void 0:this.options.onPickerSelect.call(this.options,this.timeSections[+index]);}_onClickCoverFold(e){e.preventDefault();e.stopPropagation();
+	// const index = (e.target as HTMLDivElement)?.getAttribute?.('data-index') as string;
+	if(this._picker)this._picker.open=true;}constructor(container,options){super(container,deepmerge(MOBILE_TIME_LINE_DEFAULT_OPTIONS,options,{clone:false})),this._isTouchStart=false,this._touchstartTop=0,this.state={start:"00:00:00",end:"24:00:00",current:0,timeArr:[],availTimeLine:[],scrollTop:0,index:0};this._touchstart=this._touchstart.bind(this);this._touchmove=this._touchmove.bind(this);this._touchend=this._touchend.bind(this);this._plusClick=this._plusClick.bind(this);this._minusClick=this._minusClick.bind(this);this._onPickerClose=this._onPickerClose.bind(this);this._onClickItem=this._onClickItem.bind(this);this._onClickCoverFold=this._onClickCoverFold.bind(this);this._render();}}function _extends$5(){_extends$5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key))target[key]=source[key];}return target};return _extends$5.apply(this,arguments)}
 	/**
 	 * 时间轴配置项
-	 */ const TIMELINE_DEFAULT_OPTIONS = {
-	    height: 36,
-	    className: '',
-	    wrapClassName: '',
-	    timeSections: [],
-	    timeWidth: 0,
-	    currentTime: new Date(new Date().setHours(0, 0, 8, 0)),
-	    dpr: window.devicePixelRatio || 2,
-	    wheelSpeed: 0.1,
-	    readOnly: false,
-	    scaleOffsetTop: 4,
-	    showYearMonthDay: true,
-	    // --------------------只支持初始化时，不支持动态变更 (不做对象冻结)--------------------
-	    timePointColor: '#1890ff',
-	    timeTextColor: '#FFF',
-	    timeScaleColor: '#FFF',
-	    timeSectionColor: 'rgba(24, 144, 255, 0.5)',
-	    timeAxisBgColor: '#000',
-	    onChange: ()=>{},
-	    onDragEnd: ()=>{},
-	    onHover: ()=>{},
-	    onDestroy: ()=>{}
-	};
+	 */const TIMELINE_DEFAULT_OPTIONS={height:36,dpr:window.devicePixelRatio||2,
+	// wheelSpeed: 0.1,
+	scaleOffsetTop:4,showYearMonthDay:true};
 	/**
 	 * 时间轴控件类， 支持PC/Mobile 拖动和缩放
 	 * @beta
@@ -10687,253 +10356,97 @@
 	 * import TimeLine from './TimeLine';
 	 * const timeLine = new TimeLine(document.getElementById('container'), {})
 	 * ```
-	 */ let TimeLine$2 = class TimeLine {
-	    /**
+	 */class TimeLine extends BaseTimeLine{
+	/**
 	   * 初始化 (canvas)
-	   */ _init() {
-	        this._$canvas = document.createElement('canvas');
-	        this._ctx = this._$canvas.getContext('2d');
-	        if (this._options.className) {
-	            this._$canvas.className = this._options.className;
-	        }
-	        this._$canvas.style.cssText += 'cursor: pointer;';
-	        this.width = this._options.width || this.$container.offsetWidth;
-	        this.height = this._options.height || this.$container.offsetHeight;
-	        if (this._options.wrapClassName) this.$container.classList.add(this._options.wrapClassName);
-	        this.$container.appendChild(this._$canvas);
-	        this._addEventListener();
-	        this.setReadOnly(this._options.readOnly);
-	        this._update({
-	            currentTime: this._options.currentTime,
-	            timeWidth: this._options.timeWidth,
-	            timeSections: this._options.timeSections
-	        });
-	    }
-	    /**
-	   * 获取当前时间
-	   * @returns
-	   */ get currentTime() {
-	        return this._currentTime;
-	    }
-	    set currentTime(time) {
-	        if (!this._isMouseDown && !this._destroyed) {
-	            this._update({
-	                currentTime: new Date(time)
-	            });
-	        }
-	    }
-	    /**
-	   * 获取 TimeLine 的宽度
-	   * @returns
-	   */ get width() {
-	        return this._width;
-	    }
-	    set width(width) {
-	        if (this._$canvas && width) {
-	            width = Math.floor(width);
-	            this._$canvas.width = width * this._options.dpr;
-	            this._$canvas.style.cssText += `width: ${width}px;`;
-	            this.$container.style.width = width + 'px';
-	            this._width = width;
-	            this._update();
-	        }
-	    }
-	    /**
-	   * 获取 TimeLine 的高度
-	   * @returns
-	   */ get height() {
-	        return this._height;
-	    }
-	    set height(height) {
-	        height = Math.floor(height);
-	        if (this._$canvas && height) {
-	            this._$canvas.height = height * this._options.dpr;
-	            this._$canvas.style.cssText += `height: ${height}px;`;
-	            this.$container.style.height = height + 'px';
-	            this._height = height;
-	            this._update();
-	        }
-	    }
-	    /**
-	   * 设置时间轴刻度宽度
-	   * @param timeWidth - 时间轴刻度宽度 [0, TIME_WIDTH.length - 1]
-	   * @returns
-	   */ setTimeWidth(timeWidth) {
-	        this._update({
-	            timeWidth
-	        });
-	    }
-	    get scale() {
-	        return this._timeWidth;
-	    }
-	    /**
+	   */
+	_init(){this._$canvas=document.createElement("canvas");this._ctx=this._$canvas.getContext("2d");if(!this.readOnly)this._$canvas.style.cssText+="cursor: pointer;";this.$container.appendChild(this._$canvas);this.resize(this.width,this.height);this._update({current:this.current,timeWidth:this.timeWidth,timeSections:this.timeSections});this._addEventListener();}
+	/**
+	   * 重置尺寸
+	   */resize(width,height){super.resize(width,height);if(this._$canvas&&width){this._$canvas.width=this.width*this.options.dpr;this._$canvas.style.cssText+=`width: ${this.width}px;`;}if(this._$canvas&&height){this._$canvas.height=this.height*this.options.dpr;this._$canvas.style.cssText+=`height: ${this.height}px;`;}this._draw();}
+	/**
 	   * 设置时间轴刻度宽度
 	   * @param timeWidth - 时间轴刻度宽度 [0, TIME_WIDTH.length - 1]
 	   * @returns
-	   */ changeScale(scale) {
-	        this.setTimeWidth(scale);
-	    }
-	    /**
+	   */setTimeWidth(timeWidth){this._update({timeWidth:timeWidth});}
+	/**
 	   *  设置片段数组
 	   * @param timeSections - 片段数组
 	   * @returns
-	   */ updateRecords(timeSections) {
-	        this._update({
-	            timeSections
-	        });
-	    }
-	    /**
+	   */updateTimeSections(timeSections){this._update({timeSections:timeSections});}
+	/**
 	   * 更新当前时间
 	   * @param time 能转成时间的值， 如 时间对象 Date, 时间戳，时间戳字符串
-	   */ update(time) {
-	        if (time && !this._isMouseDown) {
-	            this._update({
-	                currentTime: new Date(tranTime(time, 'YYYY-MM-DD HH:mm:ss'))
-	            });
-	        }
-	    }
-	    /**
+	   */update(time){if(time&&!this._isMouseDown)this._update({current:new Date(TimeLineUtil.tranTime(time,"YYYY-MM-DD HH:mm:ss"))});}
+	/**
 	   * 更新
 	   * @param options - 更新参数
 	   * @returns
-	   */ _update(options) {
-	        if ((options == null ? void 0 : options.currentTime) && options.currentTime instanceof Date) {
-	            this._currentTime = options.currentTime;
-	        }
-	        if (options == null ? void 0 : options.timeSections) {
-	            this._timeSections = this._mergeTimeSections(options.timeSections);
-	        }
-	        if (typeof (options == null ? void 0 : options.timeWidth) === 'number' && (options == null ? void 0 : options.timeWidth) < TIME_WIDTH.length) {
-	            this._timeWidth = options == null ? void 0 : options.timeWidth;
-	            this._timeWidthArray = TIME_WIDTH[Math.floor(this._timeWidth)];
-	        }
-	        if (!this._timeWidthArray) {
-	            // 不存在 默认取第一个
-	            this._timeWidth = 0;
-	            this._timeWidthArray = TIME_WIDTH[0];
-	        }
-	        if (typeof (options == null ? void 0 : options.timeWidth) === 'number' && this._timeWidthArray) {
-	            if (this._timeWidthArray[3]) {
-	                var _this__$canvas;
-	                (_this__$canvas = this._$canvas) == null ? void 0 : _this__$canvas.setAttribute('data-title', this._timeWidthArray[3]);
-	            }
-	        }
-	        // 清空画布
-	        if (this._ctx) {
-	            this._ctx.fillStyle = this._options.timeAxisBgColor;
-	            // prettier-ignore
-	            this._ctx.fillRect(0, 0, this._width * this._options.dpr, this._height * this._options.dpr);
-	        }
-	        this._draw();
-	    }
-	    /**
-	   * 设置只读或取消只读
-	   * @param readOnly - 只读或取消只读
-	   * @returns
-	   */ setReadOnly(readOnly) {
-	        this._readOnly = readOnly;
-	        if (this._$canvas) {
-	            if (this._readOnly) {
-	                this._$canvas.style.cursor = 'not-allowed';
-	            } else {
-	                this._$canvas.style.cursor = 'pointer';
-	            }
-	        }
-	    }
-	    /**
+	   */_update(options={}){if((options==null?void 0:options.current)&&options.current instanceof Date)this.current=options.current;if(options==null?void 0:options.timeSections)super.updateTimeSections(this._mergeTimeSections(options.timeSections));if(typeof(options==null?void 0:options.timeWidth)==="number"&&(options==null?void 0:options.timeWidth)<TIME_WIDTH.length){super.setTimeWidth(options.timeWidth);this._timeWidthArray=TIME_WIDTH[Math.floor(this.timeWidth)];}if(typeof(options==null?void 0:options.timeWidth)==="number"&&this._timeWidthArray)if(this._timeWidthArray[3]){var _this__$canvas;(_this__$canvas=this._$canvas)==null?void 0:_this__$canvas.setAttribute("data-title",this._timeWidthArray[3]);}
+	// 清空画布
+	if(this._ctx){this._ctx.fillStyle=this.options.timeAxisBgColor;
+	// prettier-ignore
+	this._ctx.fillRect(0,0,this.width*this.options.dpr,this.height*this.options.dpr);}this._draw();}
+	/**
 	   * 销毁
 	   * @returns
-	   */ destroy() {
-	        this._removeEventListener();
-	        if (this._$canvas) {
-	            this.$container.removeChild(this._$canvas);
-	            this._timeSections = [];
-	            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	            this._$canvas = null;
-	        }
-	        this._destroyed = true;
-	        this._options.onDestroy == null ? void 0 : this._options.onDestroy.call(this._options);
-	    // if (this._$tip) {
-	    //   this.$container.removeChild(this._$tip);
-	    //   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	    //   this._$tip = null!;
-	    // }
-	    }
-	    // -----------------------------------------------------------------------------------------
-	    //  private
-	    // -----------------------------------------------------------------------------------------
-	    /**
+	   */destroy(){this._removeEventListener();if(this._$canvas){this.$container.removeChild(this._$canvas);
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	this._$canvas=null;}super.destroy();
+	// if (this._$tip) {
+	//   this.$container.removeChild(this._$tip);
+	//   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	//   this._$tip = null!;
+	// }
+	}
+	// -----------------------------------------------------------------------------------------
+	//  private
+	// -----------------------------------------------------------------------------------------
+	/**
 	   * 缩放时间轴 动态减少间距 （没处理 dpr）
 	   * @returns 刻度间距
-	   */ get _curScaleSpacing() {
-	        var _this__timeWidthArray, _this__timeWidthArray1;
-	        return Math.floor(((_this__timeWidthArray = this._timeWidthArray) == null ? void 0 : _this__timeWidthArray[1]) - ((_this__timeWidthArray1 = this._timeWidthArray) == null ? void 0 : _this__timeWidthArray1[1]) * +(this._timeWidth % 1 / 2).toFixed(2)); // 刻度间距
-	    }
-	    /**
+	   */
+	get _curScaleSpacing(){var _this__timeWidthArray,_this__timeWidthArray1;return Math.floor(((_this__timeWidthArray=this._timeWidthArray)==null?void 0:_this__timeWidthArray[1])-((_this__timeWidthArray1=this._timeWidthArray)==null?void 0:_this__timeWidthArray1[1])*+(this.timeWidth%1/2).toFixed(2));// 刻度间距
+	}
+	/**
 	   * 绘制
-	   */ _draw() {
-	        this._drawScale();
-	        this._drawSections();
-	    }
-	    /**
+	   */_draw(){this._drawSections();this._drawScale();}
+	/**
 	   * 绘制刻度
-	   */ _drawScale() {
-	        const lineWidth = 1 * this._options.dpr;
-	        /** 中心位置 */ this._centerPositionX = parseInt(this._width * this._options.dpr / 2 + '');
-	        const centerPosition = {
-	            x: this._width * this._options.dpr / 2,
-	            y: this._height * this._options.dpr
-	        };
-	        const curScaleTime = Math.floor(this._currentTime.getTime() / 1000); // currentTime 秒
-	        // 由于时区问题 当前时间戳（秒）处理但前刻度有偏移，所以改成使用当天便宜量， 这样就能保证当天的 0 点刻度能展示
-	        // prettier-ignore
-	        const offsetSecond = (curScaleTime - Math.floor(new Date(tranTime(new Date(curScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000)) % this._timeWidthArray[0];
-	        const padding = this._height * this._options.dpr / 20; // 刻度顶部偏移量 高度的 1/8
-	        const spacing = this._curScaleSpacing * this._options.dpr;
-	        // 因为右偏移 右侧靠近中心点的X坐标 减去偏移量
-	        // prettier-ignore
-	        const rightLastScaleTimeX = Math.floor(this._centerPositionX + (this._timeWidthArray[0] - offsetSecond) / this._timeWidthArray[0] * spacing);
-	        let leftLastScaleTime = curScaleTime - offsetSecond;
-	        let rightLastScaleTime = leftLastScaleTime + this._timeWidthArray[0];
-	        const leftLastScaleTimeX = rightLastScaleTimeX - spacing;
-	        // 左扩展刻度
-	        for(let x = leftLastScaleTimeX; x > 0; x -= spacing){
-	            // prettier-ignore
-	            const leftOffsetSecond = leftLastScaleTime - Math.floor(new Date(tranTime(new Date(leftLastScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000);
-	            // prettier-ignore
-	            const curScale = leftOffsetSecond % (this._timeWidthArray[0] * this._timeWidthArray[2]);
-	            if (curScale === 0) {
-	                // prettier-ignore
-	                this._drawSolidLine(x, padding, x, padding + (this._options.scaleOffsetTop + 4) * this._options.dpr, lineWidth);
-	                // prettier-ignore
-	                this._drawTextString(tranTime(new Date(leftLastScaleTime * 1000)), x, padding + (this._options.scaleOffsetTop + 4 + 4) * this._options.dpr, "center");
-	            } else {
-	                this._drawSolidLine(x, padding, x, padding + this._options.scaleOffsetTop * this._options.dpr, lineWidth);
-	            }
-	            leftLastScaleTime = leftLastScaleTime - this._timeWidthArray[0];
-	        }
-	        // 右扩展刻度
-	        // prettier-ignore
-	        for(let x = rightLastScaleTimeX; x <= this._width * this._options.dpr; x += spacing){
-	            // prettier-ignore
-	            const rightOffsetSecond = rightLastScaleTime - Math.floor(new Date(tranTime(new Date(rightLastScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000);
-	            // prettier-ignore
-	            const curScale = rightOffsetSecond % (this._timeWidthArray[0] * this._timeWidthArray[2]);
-	            if (curScale === 0) {
-	                // prettier-ignore
-	                this._drawSolidLine(x, padding, x, padding + (this._options.scaleOffsetTop + 4) * this._options.dpr, lineWidth);
-	                // prettier-ignore
-	                this._drawTextString(tranTime(new Date(rightLastScaleTime * 1000)), x, padding + (this._options.scaleOffsetTop + 4 + 4) * this._options.dpr, "center");
-	            } else {
-	                this._drawSolidLine(x, padding, x, padding + this._options.scaleOffsetTop * this._options.dpr, lineWidth);
-	            }
-	            rightLastScaleTime = rightLastScaleTime + this._timeWidthArray[0];
-	        }
-	        // 当前中心位置（当前时间 currentTime）
-	        // prettier-ignore
-	        this._drawSolidLine(centerPosition.x, 0, centerPosition.x, centerPosition.y, lineWidth, this._options.timePointColor);
-	    }
-	    /**
+	   */_drawScale(){const lineWidth=1*this.options.dpr;
+	/** 中心位置 */this._centerPositionX=parseInt(this.width*this.options.dpr/2+"");const centerPosition={x:this.width*this.options.dpr/2,y:this.height*this.options.dpr};const curScaleTime=Math.floor(this.current.getTime()/1e3);// current 秒
+	// 由于时区问题 当前时间戳（秒）处理但前刻度有偏移，所以改成使用当天便宜量， 这样就能保证当天的 0 点刻度能展示
+	// prettier-ignore
+	const offsetSecond=(curScaleTime-Math.floor(new Date(TimeLineUtil.tranTime(new Date(curScaleTime*1e3),"YYYY-MM-DD")+" 00:00:00").getTime()/1e3))%this._timeWidthArray[0];const padding=this.height*this.options.dpr/20;// 刻度顶部偏移量 高度的 1/8
+	const spacing=this._curScaleSpacing*this.options.dpr;
+	// 因为右偏移 右侧靠近中心点的X坐标 减去偏移量
+	// prettier-ignore
+	const rightLastScaleTimeX=Math.floor(this._centerPositionX+(this._timeWidthArray[0]-offsetSecond)/this._timeWidthArray[0]*spacing);let leftLastScaleTime=curScaleTime-offsetSecond;let rightLastScaleTime=leftLastScaleTime+this._timeWidthArray[0];const leftLastScaleTimeX=rightLastScaleTimeX-spacing;
+	// 左扩展刻度
+	for(let x=leftLastScaleTimeX;x>0;x-=spacing){
+	// prettier-ignore
+	const leftOffsetSecond=leftLastScaleTime-Math.floor(new Date(TimeLineUtil.tranTime(new Date(leftLastScaleTime*1e3),"YYYY-MM-DD")+" 00:00:00").getTime()/1e3);
+	// prettier-ignore
+	const curScale=leftOffsetSecond%(this._timeWidthArray[0]*this._timeWidthArray[2]);if(curScale===0){
+	// prettier-ignore
+	this._drawSolidLine(x,padding,x,padding+(this.options.scaleOffsetTop+4)*this.options.dpr,lineWidth);
+	// prettier-ignore
+	this._drawTextString(TimeLineUtil.tranTime(new Date(leftLastScaleTime*1e3)),x,padding+(this.options.scaleOffsetTop+4+4)*this.options.dpr,"center");}else this._drawSolidLine(x,padding,x,padding+this.options.scaleOffsetTop*this.options.dpr,lineWidth);leftLastScaleTime-=this._timeWidthArray[0];}
+	// 右扩展刻度
+	// prettier-ignore
+	for(let x=rightLastScaleTimeX;x<=this.width*this.options.dpr;x+=spacing){
+	// prettier-ignore
+	const rightOffsetSecond=rightLastScaleTime-Math.floor(new Date(TimeLineUtil.tranTime(new Date(rightLastScaleTime*1e3),"YYYY-MM-DD")+" 00:00:00").getTime()/1e3);
+	// prettier-ignore
+	const curScale=rightOffsetSecond%(this._timeWidthArray[0]*this._timeWidthArray[2]);if(curScale===0){
+	// prettier-ignore
+	this._drawSolidLine(x,padding,x,padding+(this.options.scaleOffsetTop+4)*this.options.dpr,lineWidth);
+	// prettier-ignore
+	this._drawTextString(TimeLineUtil.tranTime(new Date(rightLastScaleTime*1e3)),x,padding+(this.options.scaleOffsetTop+4+4)*this.options.dpr,"center");}else this._drawSolidLine(x,padding,x,padding+this.options.scaleOffsetTop*this.options.dpr,lineWidth);rightLastScaleTime+=this._timeWidthArray[0];}
+	// 当前中心位置（当前时间 current）
+	// prettier-ignore
+	this._drawSolidLine(centerPosition.x,0,centerPosition.x,centerPosition.y,lineWidth,this.options.timePointColor);}
+	/**
 	   * 绘制线
 	   * @param startX - 线起点 x 坐标
 	   * @param startY - 线起点 y 坐标
@@ -10942,409 +10455,211 @@
 	   * @param lineWidth - 线宽度
 	   * @param color - 线颜色
 	   *
-	   */ // prettier-ignore
-	    _drawSolidLine(startX, startY, endX, endY, lineWidth, color) {
-	        if (this._ctx) {
-	            this._ctx.save();
-	            this._ctx.strokeStyle = color != null ? color : this._options.timeScaleColor;
-	            this._ctx.lineWidth = lineWidth;
-	            this._ctx.beginPath();
-	            this._ctx.moveTo(startX, startY);
-	            this._ctx.lineTo(endX, endY);
-	            this._ctx.stroke();
-	            this._ctx.restore();
-	        }
-	    }
-	    /**
+	   */
+	// prettier-ignore
+	_drawSolidLine(startX,startY,endX,endY,lineWidth,color){if(this._ctx){this._ctx.save();this._ctx.strokeStyle=color!=null?color:this.options.timeScaleColor;this._ctx.lineWidth=lineWidth;this._ctx.beginPath();this._ctx.moveTo(startX,startY);this._ctx.lineTo(endX,endY);this._ctx.stroke();this._ctx.restore();}}
+	/**
 	   * 绘制刻度文字
 	   * @param text - 文本
 	   * @param x - X
 	   * @param y - Y
 	   * @param align - 文本对齐方式
-	   */ _drawTextString(text, x, y, align) {
-	        if (this._ctx) {
-	            const timeTexts = text.split(' ');
-	            this._ctx.font = `${12 * this._options.dpr * 1}px serif`;
-	            this._ctx.fillStyle = this._options.timeTextColor;
-	            this._ctx.textAlign = align || 'left';
-	            if (this._timeWidthArray[0] % 60 === 0) {
-	                // 仅展示 hh:mm
-	                timeTexts[1] = timeTexts[1].replace(/:00$/, '');
-	            }
-	            this._ctx.fillText(timeTexts[1], x, y + 8 * this._options.dpr);
-	            // prettier-ignore
-	            if (this._options.showYearMonthDay && (timeTexts[1] === "00:00:00" || timeTexts[1] === "00:00" || this._timeWidthArray[0] * this._timeWidthArray[2] === 24 * 3600)) {
-	                // 展示年月日
-	                this._ctx.textAlign = align || "left";
-	                this._ctx.fillText(timeTexts[0], x, y + (8 + 10) * this._options.dpr);
-	            }
-	        }
-	    }
-	    /**
+	   */_drawTextString(text,x,y,align){if(this._ctx){const timeTexts=text.split(" ");this._ctx.font=`${12*this.options.dpr*1}px serif`;this._ctx.fillStyle=this.options.timeTextColor;this._ctx.textAlign=align||"left";if(this._timeWidthArray[0]%60===0)
+	// 仅展示 hh:mm
+	timeTexts[1]=timeTexts[1].replace(/:00$/,"");this._ctx.fillText(timeTexts[1],x,y+8*this.options.dpr);
+	// prettier-ignore
+	if(this.options.showYearMonthDay&&(timeTexts[1]==="00:00:00"||timeTexts[1]==="00:00"||this._timeWidthArray[0]*this._timeWidthArray[2]===24*3600)){
+	// 展示年月日
+	this._ctx.textAlign=align||"left";this._ctx.fillText(timeTexts[0],x,y+(8+10)*this.options.dpr);}}}
+	/**
 	   * 画录像区间
-	   */ _drawSections() {
-	        // 绘制蓝色区域
-	        const timeArr = this._timeSections || [];
-	        // 根据时间查找当前位置
-	        for(let i = 0; i < timeArr.length; i++){
-	            const position = this._findPosition(timeArr[i]);
-	            // 判断一下绘制区域是否在画布区域， 不在可以不用绘制
-	            // prettier-ignore
-	            if (this._ctx && isOverlap(0, this._width * this._options.dpr, position.x1, position.x2)) {
-	                this._ctx.fillStyle = this._options.timeSectionColor;
-	                // prettier-ignore
-	                this._ctx.fillRect(position.x1, 0, position.x2 - position.x1, this._height * this._options.dpr);
-	            }
-	        }
-	    }
-	    /**
+	   */_drawSections(){
+	// 绘制蓝色区域
+	const timeArr=this.timeSections||[];
+	// 根据时间查找当前位置
+	for(let i=0;i<timeArr.length;i++){const position=this._findPosition(timeArr[i]);
+	// 判断一下绘制区域是否在画布区域， 不在可以不用绘制
+	// prettier-ignore
+	if(this._ctx&&TimeLineUtil.isOverlap(0,this.width*this.options.dpr,position.x1,position.x2)){this._ctx.fillStyle=this.options.timeSectionColor;
+	// prettier-ignore
+	this._ctx.fillRect(position.x1,0,position.x2-position.x1,this.height*this.options.dpr);}}}
+	/**
 	   * 获取时间片段在时间轴中的x1 ,x2坐标 （已做 dpr 处理）
 	   * @param item - 时间片段
 	   * @returns {void}
-	   */ _findPosition(item) {
-	        // 中间的当前时间 currentTime 为基准， 然后计算时间片段的 x 坐标和 y 坐标
-	        // prettier-ignore
-	        const x1 = (parseInt((item.startTime - this._currentTime.getTime()) / 1000 + '', 10) / this._timeWidthArray[0] // 多少个刻度
-	         * this._curScaleSpacing // 乘刻度宽度
-	         + this._width / 2) * this._options.dpr;
-	        const x2 = x1 + parseInt((item.endTime - item.startTime) / 1000 + '', 10) / this._timeWidthArray[0] * this._curScaleSpacing * this._options.dpr;
-	        return {
-	            x1,
-	            x2
-	        };
-	    }
-	    /**
+	   */_findPosition(item){
+	// 中间的当前时间 current 为基准， 然后计算时间片段的 x 坐标和 y 坐标
+	// prettier-ignore
+	const x1=(parseInt((item.startTime-this.current.getTime())/1e3+"",10)/this._timeWidthArray[0]*this._curScaleSpacing+this.width/2)*this.options.dpr;const x2=x1+parseInt((item.endTime-item.startTime)/1e3+"",10)/this._timeWidthArray[0]*this._curScaleSpacing*this.options.dpr;return {x1:x1,x2:x2}}
+	/**
 	   * 合并相邻两个时间区间
 	   * @param timeSections - 时间区间数组
 	   *
 	   * @returns 合并后的时间区间
-	   */ _mergeTimeSections(timeSections) {
-	        if (timeSections.length === 0) return timeSections;
-	        timeSections = timeSections.map((item)=>{
-	            // 处理秒
-	            if ((item.startTime + '').length === 10) {
-	                item.startTime = item.startTime * 1000;
-	            }
-	            if ((item.endTime + '').length === 10) {
-	                item.endTime = item.endTime * 1000;
-	            }
-	            return {
-	                startTime: item.startTime,
-	                endTime: item.endTime
-	            };
-	        });
-	        const merged = [
-	            timeSections[0]
-	        ];
-	        for(let i = 1; i < timeSections.length; i++){
-	            const prev = merged[merged.length - 1];
-	            const curr = timeSections[i];
-	            // 如果当前区间与上一个区间重叠或相邻（即 prev.end >= curr.start）
-	            if (prev.endTime >= curr.startTime) {
-	                // 合并区间
-	                prev.endTime = Math.max(prev.endTime, curr.endTime);
-	            } else {
-	                merged.push(curr);
-	            }
-	        }
-	        return merged;
-	    }
-	    // -------------------------------------
-	    // mouse event
-	    // -------------------------------------
-	    /**
+	   */_mergeTimeSections(timeSections){if(timeSections.length===0)return timeSections;timeSections=timeSections.map(item=>{
+	// 处理秒
+	if((item.startTime+"").length===10)item.startTime=item.startTime*1e3;if((item.endTime+"").length===10)item.endTime=item.endTime*1e3;return _extends$5({},item,{startTime:item.startTime,endTime:item.endTime})});const merged=[timeSections[0]];for(let i=1;i<timeSections.length;i++){const prev=merged[merged.length-1];const curr=timeSections[i];
+	// 如果当前区间与上一个区间重叠或相邻（即 prev.end >= curr.start）
+	if(prev.endTime>=curr.startTime)
+	// 合并区间
+	prev.endTime=Math.max(prev.endTime,curr.endTime);else merged.push(curr);}return merged}
+	// -------------------------------------
+	// mouse event
+	// -------------------------------------
+	/**
 	   * 添加事件监听
 	   * @returns
-	   */ _addEventListener() {
-	        if (this._$canvas) {
-	            // 事件监听
-	            this._$canvas.addEventListener('mousemove', this._mousemoveFun);
-	            // prettier-ignore
-	            this._$canvas.addEventListener("mouseover", this._mouseoverFun);
-	            // prettier-ignore
-	            this._$canvas.addEventListener("mouseleave", this._mouseleaveFun);
-	            // prettier-ignore
-	            this._$canvas.addEventListener("mousedown", this._mousedownFun);
-	            // prettier-ignore
-	            this._$canvas.addEventListener("mouseup", this._mouseUpFun);
-	            this._$canvas.addEventListener('wheel', this._mousewheelFun);
-	            // prettier-ignore
-	            this.$container.addEventListener("wheel", (e)=>{
-	                e.preventDefault();
-	            }, {
-	                passive: false
-	            });
-	            this._$canvas.addEventListener('keydown', this._ctrlKeyDownFun);
-	            this._$canvas.addEventListener('keyup', this._ctrlKeyUpFun);
-	            // ctrl 键事件
-	            document.addEventListener('keydown', this._ctrlKeyDownFun, false);
-	            document.addEventListener('keyup', this._ctrlKeyUpFun, false);
-	            this._$canvas.addEventListener('touchstart', this._touchstartFun, {
-	                passive: false
-	            });
-	            this._$canvas.addEventListener('touchmove', this._touchmoveFun, {
-	                passive: false
-	            });
-	            this._$canvas.addEventListener('touchend', this._touchendFun, {
-	                passive: false
-	            });
-	        }
-	    }
-	    /**
+	   */
+	_addEventListener(){if(this._$canvas){
+	// 事件监听
+	this._$canvas.addEventListener("mousemove",this._mousemoveFun);
+	// prettier-ignore
+	this._$canvas.addEventListener("mouseover",this._mouseoverFun);
+	// prettier-ignore
+	this._$canvas.addEventListener("mouseleave",this._mouseleaveFun);
+	// prettier-ignore
+	this._$canvas.addEventListener("mousedown",this._mousedownFun);
+	// prettier-ignore
+	this._$canvas.addEventListener("mouseup",this._mouseUpFun);this._$canvas.addEventListener("wheel",this._mousewheelFun);
+	// prettier-ignore
+	this.$container.addEventListener("wheel",e=>{e.preventDefault();},{passive:false});this._$canvas.addEventListener("keydown",this._ctrlKeyDownFun);this._$canvas.addEventListener("keyup",this._ctrlKeyUpFun);
+	// ctrl 键事件
+	document.addEventListener("keydown",this._ctrlKeyDownFun,false);document.addEventListener("keyup",this._ctrlKeyUpFun,false);this._$canvas.addEventListener("touchstart",this._touchstartFun,{passive:false});this._$canvas.addEventListener("touchmove",this._touchmoveFun,{passive:false});this._$canvas.addEventListener("touchend",this._touchendFun,{passive:false});}}
+	/**
 	   * 移除事件监听
 	   * @returns
-	   */ _removeEventListener() {
-	        if (this._$canvas) {
-	            // 事件监听
-	            this._$canvas.removeEventListener('mousemove', this._mousemoveFun);
-	            // prettier-ignore
-	            this._$canvas.removeEventListener("mouseover", this._mouseoverFun);
-	            // prettier-ignore
-	            this._$canvas.removeEventListener("mouseleave", this._mouseleaveFun);
-	            // prettier-ignore
-	            this._$canvas.removeEventListener("mousedown", this._mousedownFun);
-	            // prettier-ignore
-	            this._$canvas.removeEventListener("mouseup", this._mouseUpFun);
-	            this._$canvas.removeEventListener('wheel', this._mousewheelFun);
-	            this._$canvas.removeEventListener('keydown', this._ctrlKeyDownFun);
-	            this._$canvas.removeEventListener('keyup', this._ctrlKeyUpFun);
-	            // ctrl 键事件
-	            document.removeEventListener('keydown', this._ctrlKeyDownFun);
-	            document.removeEventListener('keyup', this._ctrlKeyUpFun);
-	            // touch
-	            this._$canvas.removeEventListener('touchstart', this._touchstartFun);
-	            this._$canvas.removeEventListener('touchmove', this._touchmoveFun);
-	            this._$canvas.removeEventListener('touchend', this._touchendFun);
-	        }
-	    }
-	    /**
+	   */_removeEventListener(){if(this._$canvas){
+	// 事件监听
+	this._$canvas.removeEventListener("mousemove",this._mousemoveFun);
+	// prettier-ignore
+	this._$canvas.removeEventListener("mouseover",this._mouseoverFun);
+	// prettier-ignore
+	this._$canvas.removeEventListener("mouseleave",this._mouseleaveFun);
+	// prettier-ignore
+	this._$canvas.removeEventListener("mousedown",this._mousedownFun);
+	// prettier-ignore
+	this._$canvas.removeEventListener("mouseup",this._mouseUpFun);this._$canvas.removeEventListener("wheel",this._mousewheelFun);this._$canvas.removeEventListener("keydown",this._ctrlKeyDownFun);this._$canvas.removeEventListener("keyup",this._ctrlKeyUpFun);
+	// ctrl 键事件
+	document.removeEventListener("keydown",this._ctrlKeyDownFun);document.removeEventListener("keyup",this._ctrlKeyUpFun);
+	// touch
+	this._$canvas.removeEventListener("touchstart",this._touchstartFun);this._$canvas.removeEventListener("touchmove",this._touchmoveFun);this._$canvas.removeEventListener("touchend",this._touchendFun);}}
+	/**
 	   * 鼠标按下事件监听
 	   * @param e - 鼠标事件
 	   * @returns
-	   */ _mousedownFun(e) {
-	        if (this._readOnly) return;
-	        this._isMouseDown = true;
-	        this._mousePosition = e.pageX;
-	        this._oldTime = this._currentTime;
-	        this._options.onDragStart == null ? void 0 : this._options.onDragStart.call(this._options, this._currentTime);
-	    }
-	    /**
+	   */_mousedownFun(e){if(this.readOnly)return;this._isMouseDown=true;this._mousePosition=e.pageX;this._oldTime=this.current;this.options.onDragStart==null?void 0:this.options.onDragStart.call(this.options,this.current);}
+	/**
 	   * 鼠标移入事件监听
 	   * @returns
-	   */ _mouseoverFun() {
-	        if (this._readOnly) return;
-	        this._isOver = true;
-	    }
-	    /**
+	   */_mouseoverFun(){if(this.readOnly)return;this._isOver=true;}
+	/**
 	   * 鼠标离开事件监听
 	   * @returns
-	   */ _mouseleaveFun(e) {
-	        if (this._readOnly) return;
-	        this._isOver = false;
-	        this._moveEndOrTouchEndFun(e);
-	    }
-	    /**
+	   */_mouseleaveFun(e){if(this.readOnly)return;this._isOver=false;this._moveEndOrTouchEndFun(e);}
+	/**
 	   * 鼠标抬起事件监听
 	   * @returns
-	   */ _mouseUpFun(e) {
-	        this._moveEndOrTouchEndFun(e);
-	    }
-	    /**
+	   */_mouseUpFun(e){this._moveEndOrTouchEndFun(e);}
+	/**
 	   * 鼠标移动事件监听
 	   * @param e - 鼠标事件
 	   * @returns
-	   */ _mousemoveFun(e) {
-	        if (this._readOnly) return;
-	        if (this._isMouseDown && this._isOver) {
-	            // 鼠标按下位置和移动位置的偏移量
-	            this._moveUpdateFun(e.pageX);
-	        } else {
-	            const left = parseInt(this.$container.offsetLeft + '', 10);
-	            this._mousePosition = e.pageX - left;
-	            this._update(); // 更新画面
-	        }
-	        new Date(// prettier-ignore
-	        this._currentTime.getTime() + parseInt((e.pageX - this._width / 2) / this._curScaleSpacing * this._timeWidthArray[0] + "", 10) * 1000);
-	    }
-	    /**
+	   */_mousemoveFun(e){if(this.readOnly)return;if(this._isMouseDown&&this._isOver)
+	// 鼠标按下位置和移动位置的偏移量
+	this._moveUpdateFun(e.pageX);else {const left=parseInt(this.$container.offsetLeft+"",10);this._mousePosition=e.pageX-left;this._update();// 更新画面
+	}
+	// const time = new Date(
+	//   // prettier-ignore
+	//   this.current.getTime() + parseInt(((e.pageX - this.width / 2) / this._curScaleSpacing ) * this._timeWidthArray[0] + "", 10) * 1000,
+	// );
+	}
+	/**
 	   * 鼠标滚轮滚动
 	   * @param e - 鼠标滚轮滚动事件
 	   * @returns
-	   */ _mousewheelFun(e) {
-	        e.preventDefault(); // 阻止默认滚动行为
-	        // eslint-disable-next-line no-useless-return
-	        if (this._readOnly) return;
-	    // if (this._isCtrlKeyDown) {
-	    //   const zoom = e.deltaY > 0 ? -this._options.wheelSpeed : this._options.wheelSpeed;
-	    //   this._timeWidth = +(this._timeWidth + zoom).toFixed(2);
-	    //   if (this._timeWidth <= 0) {
-	    //     this._timeWidth = 0;
-	    //   } else if (this._timeWidth >= TIME_WIDTH.length) {
-	    //     this._timeWidth = TIME_WIDTH.length - 0.01;
-	    //   }
-	    //   this._update({
-	    //     timeWidth: Math.floor(this._timeWidth),
-	    //   });
-	    // }
-	    }
-	    /**
+	   */_mousewheelFun(e){e.preventDefault();// 阻止默认滚动行为
+	// eslint-disable-next-line no-useless-return
+	if(this.readOnly)return;
+	// if (this._isCtrlKeyDown) {
+	//   const zoom = e.deltaY > 0 ? -this.options.wheelSpeed : this.options.wheelSpeed;
+	//   this._timeWidth = +(this._timeWidth + zoom).toFixed(2);
+	//   if (this._timeWidth <= 0) {
+	//     this._timeWidth = 0;
+	//   } else if (this._timeWidth >= TIME_WIDTH.length) {
+	//     this._timeWidth = TIME_WIDTH.length - 0.01;
+	//   }
+	//   this._update({
+	//     timeWidth: Math.floor(this._timeWidth),
+	//   });
+	// }
+	}
+	/**
 	   * ctrl键按下事件
 	   * @param e - 键盘按下事件
-	   */ _ctrlKeyDownFun(e) {
-	        if (e.ctrlKey || e.key === 'Control') {
-	            this._isCtrlKeyDown = true;
-	        }
-	    }
-	    /**
+	   */_ctrlKeyDownFun(e){if(e.ctrlKey||e.key==="Control"){console.log("Ctrl 键被按下");this._isCtrlKeyDown=true;}}
+	/**
 	   * ctrl键抬起事件
 	   * @param e - 键盘按下事件
-	   */ _ctrlKeyUpFun(e) {
-	        if (e.ctrlKey || e.key === 'Control') {
-	            this._isCtrlKeyDown = false;
-	        }
-	    }
-	    // ----------------------------------------------------------------------
-	    // touch
-	    // ----------------------------------------------------------------------
-	    /**
+	   */_ctrlKeyUpFun(e){if(e.ctrlKey||e.key==="Control"){console.log("Ctrl 键UP");this._isCtrlKeyDown=false;}}
+	// ----------------------------------------------------------------------
+	// touch
+	// ----------------------------------------------------------------------
+	/**
 	   * 触摸距离
 	   * @param touches - 两指触摸点
 	   * @returns
-	   */ _getTouchDistance(touches) {
-	        const [touch1, touch2] = touches;
-	        const dx = touch2.clientX - touch1.clientX;
-	        const dy = touch2.clientY - touch1.clientY;
-	        return Math.sqrt(dx * dx + dy * dy);
-	    }
-	    /**
+	   */
+	_getTouchDistance(touches){const[touch1,touch2]=touches;const dx=touch2.clientX-touch1.clientX;const dy=touch2.clientY-touch1.clientY;return Math.sqrt(dx*dx+dy*dy)}
+	/**
 	   * 触摸开始
 	   * @param e - 触摸事件
 	   * @returns
-	   */ _touchstartFun(e) {
-	        if (this._readOnly) return;
-	        this._oldTime = this._currentTime;
-	        this._isOver = true;
-	        if (e.touches.length === 1) {
-	            // 单指
-	            const touch = e.touches[0];
-	            this._isMouseDown = true;
-	            this._mousePosition = touch.clientX;
-	        // this._touchmoveFun(e);
-	        } else if (e.touches.length === 2) {
-	            // 双指
-	            this._lastTouchDist = this._getTouchDistance(e.touches);
-	        }
-	    }
-	    /**
+	   */_touchstartFun(e){if(this.readOnly)return;this._oldTime=this.current;this._isOver=true;if(e.touches.length===1){
+	// 单指
+	const touch=e.touches[0];this._isMouseDown=true;this._mousePosition=touch.clientX;
+	// this._touchmoveFun(e);
+	}else if(e.touches.length===2){
+	// 双指
+	this._lastTouchDist=this._getTouchDistance(e.touches);console.warn("_touchstartFun",this._lastTouchDist);}}
+	/**
 	   * 触摸移动
 	   * @param e - 触摸事件
 	   * @returns
-	   */ _touchmoveFun(e) {
-	        e.preventDefault(); // 防止页面缩放
-	        e.stopPropagation();
-	        if (this._readOnly) return;
-	        if (e.touches.length === 1) {
-	            // 单指
-	            const touch = e.touches[0];
-	            this._moveUpdateFun(touch.clientX);
-	        } else if (e.touches.length === 2) {
-	            // 双指
-	            const newDist = this._getTouchDistance(e.touches);
-	            newDist / this._lastTouchDist;
-	        // scale *= zoom;
-	        // // 限制缩放范围
-	        // scale = Math.max(0.5, Math.min(3, scale));
-	        // img.style.transform = `scale(${scale})`;
-	        // lastDist = newDist;
-	        }
-	    }
-	    /**
+	   */_touchmoveFun(e){e.preventDefault();// 防止页面缩放
+	e.stopPropagation();if(this.readOnly)return;console.warn(e.touches.length);if(e.touches.length===1){
+	// 单指
+	const touch=e.touches[0];this._moveUpdateFun(touch.clientX);}else if(e.touches.length===2){
+	// 双指
+	const newDist=this._getTouchDistance(e.touches);const zoom=newDist/this._lastTouchDist;console.warn("_touchmoveFun",this._lastTouchDist,zoom);
+	// scale *= zoom;
+	// // 限制缩放范围
+	// scale = Math.max(0.5, Math.min(3, scale));
+	// img.style.transform = `scale(${scale})`;
+	// lastDist = newDist;
+	}}
+	/**
 	   * 触摸结束
 	   * @param e - 触摸事件
 	   * @returns
-	   */ _touchendFun(e) {
-	        if (this._readOnly) return;
-	        this._moveEndOrTouchEndFun(e);
-	    }
-	    /**
+	   */_touchendFun(e){if(this.readOnly)return;this._moveEndOrTouchEndFun(e);}
+	/**
 	   * 拖动结束
 	   * @returns
-	   */ _moveEndOrTouchEndFun(e) {
-	        if (this._readOnly) return;
-	        if (this._isMouseDown) {
-	            this._isMouseDown = false;
-	            if (this._moved) {
-	                this._moved = false;
-	                this._update({
-	                    currentTime: this._currentTime
-	                });
-	                this._oldTime = this._currentTime;
-	                this._options.onDragEnd == null ? void 0 : this._options.onDragEnd.call(this._options, this._currentTime, this._isOver);
-	            }
-	            if (this._isOver && Math.abs(this._mousePosition - (e.pageX || e.clientX)) > 5) {
-	                this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, this._currentTime);
-	            }
-	            this._mousePosition = 0;
-	            this._lastTouchDist = 0;
-	        }
-	    }
-	    /**
+	   */_moveEndOrTouchEndFun(e){e.preventDefault();if(this.readOnly)return;if(this._isMouseDown){this._isMouseDown=false;if(this._moved){this._moved=false;this._update({current:this.current});this._oldTime=this.current;this.options.onDragEnd==null?void 0:this.options.onDragEnd.call(this.options,this.current,this._isOver);}if(this._isOver&&Math.abs(this._mousePosition-(e.pageX||0))>5)this.options.onChange==null?void 0:this.options.onChange.call(this.options,this.current);this._mousePosition=0;this._lastTouchDist=0;}}
+	/**
 	   * 移动更新时间
 	   * @param x - 移动的x坐标
 	   * @returns
-	   */ _moveUpdateFun(x) {
-	        // 鼠标按下位置和移动位置的偏移量
-	        const mouseOffset = this._mousePosition - x;
-	        // fix点击引起mousemove的问题
-	        if (mouseOffset === 0) return;
-	        if (this._oldTime) {
-	            // prettier-ignore
-	            const currentTime = this._oldTime.getTime() + parseInt(mouseOffset / this._curScaleSpacing * this._timeWidthArray[0] + "", 10) * 1000;
-	            this._update({
-	                currentTime: new Date(currentTime)
-	            });
-	            this._options.onDragging == null ? void 0 : this._options.onDragging.call(this._options, new Date(currentTime));
-	        }
-	        this._moved = true;
-	    }
-	    constructor(container, options){
-	        this._$canvas = null;
-	        this._ctx = null;
-	        this._width = 0;
-	        this._height = 0;
-	        this._currentTime = new Date(new Date().setHours(0, 0, 0, 0));
-	        this._timeWidth = 0;
-	        /** 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 中文说明]  */ this._timeWidthArray = TIME_WIDTH[0];
-	        this._centerPositionX = 0;
-	        this._timeSections = [];
-	        /** 只读 */ this._readOnly = false;
-	        // mouse
-	        this._isMouseDown = false;
-	        this._mousePosition = 0; // 鼠标在画布中X轴的位置
-	        this._oldTime = null;
-	        this._isOver = false;
-	        this._moved = false;
-	        this._isCtrlKeyDown = false;
-	        this._destroyed = false;
-	        this._lastTouchDist = 0;
-	        this.$container = container;
-	        // prettier-ignore
-	        this._options = Object.assign({}, TIMELINE_DEFAULT_OPTIONS, options);
-	        this._mousemoveFun = this._mousemoveFun.bind(this);
-	        this._mouseoverFun = this._mouseoverFun.bind(this);
-	        this._mouseleaveFun = this._mouseleaveFun.bind(this);
-	        this._mousedownFun = this._mousedownFun.bind(this);
-	        this._mouseUpFun = this._mouseUpFun.bind(this);
-	        this._mousewheelFun = this._mousewheelFun.bind(this);
-	        this._touchstartFun = this._touchstartFun.bind(this);
-	        this._touchmoveFun = this._touchmoveFun.bind(this);
-	        this._touchendFun = this._touchendFun.bind(this);
-	        this._ctrlKeyDownFun = this._ctrlKeyDownFun.bind(this);
-	        this._ctrlKeyUpFun = this._ctrlKeyUpFun.bind(this);
-	        this._init();
-	    }
-	};
-	TimeLine$2.TIME_WIDTH = TIME_WIDTH;
+	   */_moveUpdateFun(x){
+	// 鼠标按下位置和移动位置的偏移量
+	const mouseOffset=this._mousePosition-x;
+	// fix点击引起mousemove的问题
+	if(mouseOffset===0)return;if(this._oldTime){
+	// prettier-ignore
+	const currentTime=this._oldTime.getTime()+parseInt(mouseOffset/this._curScaleSpacing*this._timeWidthArray[0]+"",10)*1e3;this._update({current:new Date(currentTime)});this.options.onDragging==null?void 0:this.options.onDragging.call(this.options,new Date(currentTime));}this._moved=true;}constructor(container,options){super(container,deepmerge(TIMELINE_DEFAULT_OPTIONS,options,{clone:true})),this._$canvas=null,this._ctx=null,/** 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 中文说明]  */this._timeWidthArray=TIME_WIDTH[0],this._centerPositionX=0,// mouse
+	this._isMouseDown=false,this._mousePosition=0,this._oldTime=null,this._isOver=false,this._moved=false,this._isCtrlKeyDown=false,this._lastTouchDist=0;this.$container=container;
+	// prettier-ignore
+	console.log("TimeLine dpr",JSON.stringify(this.options));this._mousemoveFun=this._mousemoveFun.bind(this);this._mouseoverFun=this._mouseoverFun.bind(this);this._mouseleaveFun=this._mouseleaveFun.bind(this);this._mousedownFun=this._mousedownFun.bind(this);this._mouseUpFun=this._mouseUpFun.bind(this);this._mousewheelFun=this._mousewheelFun.bind(this);this._touchstartFun=this._touchstartFun.bind(this);this._touchmoveFun=this._touchmoveFun.bind(this);this._touchendFun=this._touchendFun.bind(this);this._ctrlKeyDownFun=this._ctrlKeyDownFun.bind(this);this._ctrlKeyUpFun=this._ctrlKeyUpFun.bind(this);this._init();}}TimeLine.TIME_WIDTH=TIME_WIDTH;
 
 	function _extends$4() {
 	    _extends$4 = Object.assign || function(target) {
@@ -11382,24 +10697,24 @@
 	}
 	/**
 	 * 回放时间轴控件
-	 */ var TimeLine = /*#__PURE__*/ function(Control) {
-	    _inherits$5(TimeLine, Control);
-	    function TimeLine(options) {
+	 */ var TimeLineControl = /*#__PURE__*/ function(Control) {
+	    _inherits$5(TimeLineControl, Control);
+	    function TimeLineControl(options) {
 	        var _this;
 	        var _this__options_props, _this__options;
 	        _this = Control.call(this, _extends$4({}, options, {
 	            tagName: 'div',
 	            controlType: 'block',
 	            classNameSuffix: 'time-line'
-	        })) || this, _this.records = [];
+	        })) || this, _this._$add = null, _this._$reduce = null, _this.records = [];
 	        _this._options = options;
 	        _this.records = ((_this__options = _this._options) == null ? void 0 : (_this__options_props = _this__options.props) == null ? void 0 : _this__options_props.recordList) || [];
 	        _this._render();
 	        _this.on(EVENTS.setAllDayRecTimes, function(records) {
 	            var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	            _this_timeLineUtil_updateRecords, _this_timeLineUtil;
+	            _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
 	            _this.records = records;
-	            (_this_timeLineUtil = _this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateRecords = _this_timeLineUtil.updateRecords) == null ? void 0 : _this_timeLineUtil_updateRecords.call(_this_timeLineUtil, records);
+	            (_this_timeLineUtil = _this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, records);
 	        });
 	        _this.on(EVENTS.getOSDTime, function(time) {
 	            var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
@@ -11408,60 +10723,72 @@
 	        });
 	        return _this;
 	    }
-	    var _proto = TimeLine.prototype;
+	    var _proto = TimeLineControl.prototype;
 	    _proto._render = function _render() {
 	        var _this = this;
-	        var _this_timeLineUtil_updateRecords, _this_timeLineUtil;
+	        var _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
 	        var _timeLineOptions = {
 	            // locale: this._options.locale,
 	            onChange: function(date) {
 	                _this._options.onChange == null ? void 0 : _this._options.onChange.call(_this._options, date);
 	                _this.emit(EVENTS.control.timeLineChange, date);
+	            },
+	            // 2025-10-27 仅移动端支持
+	            onPickerSelect: function(item) {
+	                var date = null;
+	                try {
+	                    if ((item.startTime + '').length === 10) date = new Date(item.startTime * 1000);
+	                    else if ((item.startTime + '').length === 13) date = new Date(item.startTime);
+	                    else date = new Date(item.startTime);
+	                    _this._options.onChange == null ? void 0 : _this._options.onChange.call(_this._options, date);
+	                    _this.emit(EVENTS.control.timeLineChange, date);
+	                } catch (error) {
+	                }
 	            }
 	        };
 	        if (isMobile$1()) {
-	            this.timeLineUtil = new TimeLine$1(this.$container, _timeLineOptions);
+	            this.timeLineUtil = new MobileTimeLine(this.$container, _timeLineOptions);
 	        } else {
-	            this.timeLineUtil = new TimeLine$2(this.$container, _timeLineOptions);
+	            this.timeLineUtil = new TimeLine(this.$container, _timeLineOptions);
 	            this._renderAddReduce();
 	        }
-	        (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateRecords = _this_timeLineUtil.updateRecords) == null ? void 0 : _this_timeLineUtil_updateRecords.call(_this_timeLineUtil, this.records);
+	        (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, this.records);
 	        this.timeLineUtil.update(new Date());
 	    };
 	    _proto.setWidth = function setWidth(width) {
-	        if (!isMobile$1()) this.timeLineUtil.width = width;
+	        if (!isMobile$1()) this.timeLineUtil.resize(width);
 	    };
 	    _proto._renderAddReduce = function _renderAddReduce() {
 	        var _this = this;
-	        this.$add = document.createElement('span');
-	        this.$add.classList.add("" + PREFIX_CLASS + "-time-line-scale-add");
-	        this.$add.innerHTML = IconComponents.add();
-	        this.$add.addEventListener('click', function() {
+	        this._$add = document.createElement('span');
+	        this._$add.classList.add("" + PREFIX_CLASS + "-time-line-scale-add");
+	        this._$add.innerHTML = IconComponents.add();
+	        this._$add.addEventListener('click', function() {
 	            if (_this.timeLineUtil) {
-	                var currentScale = Math.floor(_this.timeLineUtil.scale);
-	                _this.timeLineUtil.changeScale(currentScale + 1);
+	                var currentScale = Math.floor(_this.timeLineUtil.timeWidth);
+	                _this.timeLineUtil.setTimeWidth(currentScale + 1);
 	            }
 	        });
-	        this.$reduce = document.createElement('span');
-	        this.$reduce.classList.add("" + PREFIX_CLASS + "-time-line-scale-sub");
-	        this.$reduce.innerHTML = IconComponents.reduce();
-	        this.$reduce.addEventListener('click', function() {
+	        this._$reduce = document.createElement('span');
+	        this._$reduce.classList.add("" + PREFIX_CLASS + "-time-line-scale-sub");
+	        this._$reduce.innerHTML = IconComponents.reduce();
+	        this._$reduce.addEventListener('click', function() {
 	            if (_this.timeLineUtil) {
-	                var currentScale = Math.floor(_this.timeLineUtil.scale);
-	                _this.timeLineUtil.changeScale(currentScale - 1);
+	                var currentScale = Math.floor(_this.timeLineUtil.timeWidth);
+	                _this.timeLineUtil.setTimeWidth(currentScale - 1);
 	            }
 	        });
-	        this.$container.appendChild(this.$add);
-	        this.$container.appendChild(this.$reduce);
+	        this.$container.appendChild(this._$add);
+	        this.$container.appendChild(this._$reduce);
 	    };
 	    _proto.destroy = function destroy() {
-	        if (this.$add) {
-	            this.$add.remove();
-	            this.$add = null;
+	        if (this._$add) {
+	            this._$add.remove();
+	            this._$add = null;
 	        }
-	        if (this.$reduce) {
-	            this.$reduce.remove();
-	            this.$reduce = null;
+	        if (this._$reduce) {
+	            this._$reduce.remove();
+	            this._$reduce = null;
 	        }
 	        if (this.timeLineUtil) {
 	            this.timeLineUtil.destroy();
@@ -11475,7 +10802,7 @@
 	   */ _proto._onControlClick = function _onControlClick(e) {
 	        this._options.onClick == null ? void 0 : this._options.onClick.call(this._options, e);
 	    };
-	    return TimeLine;
+	    return TimeLineControl;
 	}(Control);
 
 	function _extends$3() {
@@ -11565,7 +10892,7 @@
 	    rec: Rec,
 	    speed: Speed,
 	    date: DatePicker,
-	    timeLine: TimeLine
+	    timeLine: TimeLineControl
 	};
 
 	/* eslint-disable @typescript-eslint/no-non-null-assertion */ function _inherits$3(subClass, superClass) {
@@ -12921,7 +12248,7 @@
 	    // ==============================================================================================
 	    /** 初始化配置项 */ _proto._initOptions = function _initOptions(options) {
 	        if (options === void 0) options = {};
-	        var _this_options_loggerOptions, _this_options_definitionOptions_list, _this_options_definitionOptions, _this_options_videoLevelList;
+	        var _this_options_loggerOptions;
 	        this.options = deepmerge(THEME_DEFAULT_OPTIONS, options, {
 	            clone: false
 	        });
@@ -12935,7 +12262,7 @@
 	        }
 	        if (!this.$container) throw new Error('container option is required!');
 	        if ([
-	            'VIDEO',
+	            'VIDOE',
 	            'CANVAS'
 	        ].includes(this.$container.tagName)) {
 	            throw new Error('container node cannot be video or canvas!');
@@ -12946,15 +12273,11 @@
 	        }));
 	        this.logger.log(navigator.userAgent || 'unknown');
 	        this.logger.log('[Theme Version] ', Theme.THEME_VERSION);
-	        if ('container' in this.options) {
-	            // JSON 不能序列化dom节点, 不要使用 this.options.container, 请使用 this.container
-	            delete this.options.container;
-	        }
 	        this.logger.log(JSON.stringify(this.options));
 	        var language = this.options.language || 'zh';
 	        var locales = deepmerge({
-	            zh: zh,
-	            en: en
+	            zh: zh$1,
+	            en: en$1
 	        }, this.options.locales || {}, {
 	            clone: false
 	        });
@@ -12962,11 +12285,6 @@
 	        this.i18n = new I18n(locales, {
 	            defaultLocale: language
 	        });
-	        // 默认清晰度列表
-	        if (((_this_options_definitionOptions = this.options.definitionOptions) == null ? void 0 : (_this_options_definitionOptions_list = _this_options_definitionOptions.list) == null ? void 0 : _this_options_definitionOptions_list.length) > 0 || ((_this_options_videoLevelList = this.options.videoLevelList) == null ? void 0 : _this_options_videoLevelList.length) > 0) {
-	            var _this_options_definitionOptions1;
-	            this.videoLevelList = ((_this_options_definitionOptions1 = this.options.definitionOptions) == null ? void 0 : _this_options_definitionOptions1.list) || this.options.videoLevelList;
-	        }
 	    };
 	    /**
 	   * 初始化设置类名和设置宽高
@@ -13858,10 +13176,10 @@
 	/** 所有私有流的模板 @since 0.0.1 */ Theme.TEMPLATES = TEMPLATES;
 	/** 事件名称 @since 0.0.1 */ Theme.EVENTS = EVENTS;
 	/** 语言包 @since 0.0.1 */ Theme.LOCALES = {
-	    zh: zh,
-	    en: en
+	    zh: zh$1,
+	    en: en$1
 	};
-	/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '0.0.1-beta.1';
+	/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.0-beta.1';
 
 	// 不要动这里的代码， 这个出口是为了编译成 umd 规范的文件