next-element-vue 0.5.9 → 0.6.0

package/dist/index.umd.js

@@ -2,37 +2,22 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.5.9 v
- * 发布日期：2025-04-28
+ * 当前版本：0.6.0 v
+ * 发布日期：2025-09-15
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
 !function(global, factory) {
-    "object" == typeof exports && "undefined" != typeof module ? factory(exports, require("vue"), require("element-plus"), require("@vueuse/core"), require("@tensorflow/tfjs"), require("video.js"), require("video.js/dist/video-js.css"), require("video.js/dist/lang/zh-CN.json"), require("video.js/dist/lang/en.json"), require("video.js/dist/lang/zh-TW.json")) : "function" == typeof define && define.amd ? define([ "exports", "vue", "element-plus", "@vueuse/core", "@tensorflow/tfjs", "video.js", "video.js/dist/video-js.css", "video.js/dist/lang/zh-CN.json", "video.js/dist/lang/en.json", "video.js/dist/lang/zh-TW.json" ], factory) : factory((global = "undefined" != typeof globalThis ? globalThis : global || self).NEXT_ELEMENT = {}, global.Vue, global.ElementPlus, global.VueuseCore, global.tf, global.videojs, null, global.zhCN, global.En, global.zhTW);
-}(this, (function(exports, vue, elementPlus, core, tf, videojs, videoJs_css, zhCN, En, zhTW) {
+    "object" == typeof exports && "undefined" != typeof module ? factory(exports, require("vue"), require("element-plus"), require("@vueuse/core"), require("video.js"), require("video.js/dist/video-js.css"), require("video.js/dist/lang/zh-CN.json"), require("video.js/dist/lang/en.json"), require("video.js/dist/lang/zh-TW.json")) : "function" == typeof define && define.amd ? define([ "exports", "vue", "element-plus", "@vueuse/core", "video.js", "video.js/dist/video-js.css", "video.js/dist/lang/zh-CN.json", "video.js/dist/lang/en.json", "video.js/dist/lang/zh-TW.json" ], factory) : factory((global = "undefined" != typeof globalThis ? globalThis : global || self).NEXT_ELEMENT = {}, global.Vue, global.ElementPlus, global.VueuseCore, global.videojs, null, global.zhCN, global.En, global.zhTW);
+}(this, function(exports, vue, elementPlus, core, videojs, videoJs_css, zhCN, En, zhTW) {
     "use strict";
-    function _interopNamespaceDefault(e) {
-        var n = Object.create(null);
-        return e && Object.keys(e).forEach((function(k) {
-            if ("default" !== k) {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: !0,
-                    get: function() {
-                        return e[k];
-                    }
-                });
-            }
-        })), n.default = e, Object.freeze(n);
-    }
-    var tf__namespace = _interopNamespaceDefault(tf);
     const _bem = (namespace, block, blockSuffix, element, modifier) => {
         let cls = `${namespace}-${block}`;
         return blockSuffix && (cls += `-${blockSuffix}`), element && (cls += `__${element}`), 
         modifier && (cls += `--${modifier}`), cls;
     }, namespaceContextKey = Symbol("namespaceContextKey"), useGetDerivedNamespace = namespaceOverrides => {
         const derivedNamespace = namespaceOverrides || (vue.getCurrentInstance() ? vue.inject(namespaceContextKey, vue.ref("next")) : vue.ref("next"));
-        return vue.computed((() => vue.unref(derivedNamespace) || "next"));
+        return vue.computed(() => vue.unref(derivedNamespace) || "next");
     }, useNamespace = (block, namespaceOverrides) => {
         const namespace = useGetDerivedNamespace(namespaceOverrides);
         return {
@@ -227,7 +212,7 @@
         return null != value && isLength(value.length) && !isFunction(value);
     }
     function createAssigner(assigner) {
-        return baseRest((function(object, sources) {
+        return baseRest(function(object, sources) {
             var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0;
             for (customizer = assigner.length > 3 && "function" == typeof customizer ? (length--, 
             customizer) : void 0, guard && function(value, index, object) {
@@ -240,7 +225,7 @@
                 source && assigner(object, source, index, customizer);
             }
             return object;
-        }));
+        });
     }
     var objectProto$a = Object.prototype;
     function isPrototype(value) {
@@ -408,16 +393,16 @@
     }
     memoize.Cache = MapCache;
     var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, reEscapeChar = /\\(\\)?/g, stringToPath = function(func) {
-        var result = memoize(func, (function(key) {
+        var result = memoize(func, function(key) {
             return 500 === cache.size && cache.clear(), key;
-        })), cache = result.cache;
+        }), cache = result.cache;
         return result;
-    }((function(string) {
+    }(function(string) {
         var result = [];
-        return 46 === string.charCodeAt(0) && result.push(""), string.replace(rePropName, (function(match, number, quote, subString) {
+        return 46 === string.charCodeAt(0) && result.push(""), string.replace(rePropName, function(match, number, quote, subString) {
             result.push(quote ? subString.replace(reEscapeChar, "$1") : number || match);
-        })), result;
-    }));
+        }), result;
+    });
     function castPath(value, object) {
         return isArray(value) ? value : function(value, object) {
             if (isArray(value)) return !1;
@@ -472,9 +457,9 @@
                 predicate(value, index, array) && (result[resIndex++] = value);
             }
             return result;
-        }(nativeGetSymbols(object), (function(symbol) {
+        }(nativeGetSymbols(object), function(symbol) {
             return propertyIsEnumerable.call(object, symbol);
-        })));
+        }));
     } : function() {
         return [];
     };
@@ -542,10 +527,10 @@
                 break;
             }
             if (seen) {
-                if (!arraySome(other, (function(othValue, othIndex) {
+                if (!arraySome(other, function(othValue, othIndex) {
                     if (key = othIndex, !seen.has(key) && (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) return seen.push(othIndex);
                     var key;
-                }))) {
+                })) {
                     result = !1;
                     break;
                 }
@@ -558,15 +543,15 @@
     }
     function mapToArray(map) {
         var index = -1, result = Array(map.size);
-        return map.forEach((function(value, key) {
+        return map.forEach(function(value, key) {
             result[++index] = [ key, value ];
-        })), result;
+        }), result;
     }
     function setToArray(set) {
         var index = -1, result = Array(set.size);
-        return set.forEach((function(value) {
+        return set.forEach(function(value) {
             result[++index] = value;
-        })), result;
+        }), result;
     }
     var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0, symbolValueOf = symbolProto ? symbolProto.valueOf : void 0;
     var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
@@ -702,19 +687,22 @@
         }
     }
     function baseMerge(object, source, srcIndex, customizer, stack) {
-        object !== source && baseFor(source, (function(srcValue, key) {
+        object !== source && baseFor(source, function(srcValue, key) {
             if (stack || (stack = new Stack), isObject(srcValue)) baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack); else {
                 var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0;
                 void 0 === newValue && (newValue = srcValue), assignMergeValue(object, key, newValue);
             }
-        }), keysIn);
+        }, keysIn);
     }
-    var mergeWith = createAssigner((function(object, source, srcIndex, customizer) {
+    var mergeWith = createAssigner(function(object, source, srcIndex, customizer) {
         baseMerge(object, source, srcIndex, customizer);
-    }));
-    var merge = createAssigner((function(object, source, srcIndex) {
+    });
+    function isEqual(value, other) {
+        return baseIsEqual(value, other);
+    }
+    var merge = createAssigner(function(object, source, srcIndex) {
         baseMerge(object, source, srcIndex);
-    })), zhcnLocale = {
+    }), zhcnLocale = {
         name: "zh-cn",
         next: {
             loading: "加载中...",
@@ -794,9 +782,18 @@
             },
             labelme: {
                 saveLabel: "保存",
+                confirmDeleteLabel: "确定要删除该标注吗？",
+                emptyLabelText: "暂无标签数据",
                 createPolygon: "创建多边形",
                 editPolygon: "编辑多边形",
-                deletePolyton: "删除多边形"
+                deletePolyton: "删除多边形",
+                createRectangle: "创建矩形",
+                createCircle: "创建圆形",
+                selectClasses: "选择标签",
+                emptyClassesText: "暂无标注",
+                deleteClasses: "删除标注",
+                labelGroupId: "分组ID",
+                labelDescription: "标注描述"
             }
         }
     }, enLocale = {
@@ -879,9 +876,18 @@
             },
             labelme: {
                 saveLabel: "saving...",
+                confirmDeleteLabel: "Are you sure you want to delete this annotation?",
+                emptyLabelText: "No label data",
                 createPolygon: "create polygon",
                 editPolygon: "edit polygon",
-                deletePolyton: "delete polygon"
+                deletePolygon: "delete polygon",
+                createRectangle: "create rectangle",
+                createCircle: "create circle",
+                selectClasses: "select classes",
+                emptyClassesText: "No label classes",
+                deleteClasses: "delete classes",
+                labelGroupId: "Group ID",
+                labelDescription: "label description"
             }
         }
     }, zhtwLocale = {
@@ -955,15 +961,27 @@
             },
             labelimg: {
                 saveTxt: "保存中...",
-                emptyLabelText: "暂无标签数据",
-                confirmDeleteLabel: "确定要删除该标注吗？",
-                saveLabel: "保存当前标注",
-                instructions: "使用说明",
-                labelNoUpdate: "暂无标签数据更新",
-                zoomRestore: "还原"
+                emptyLabelText: "暂暫無標註數據",
+                confirmDeleteLabel: "確定要刪除該標註嗎？",
+                saveLabel: "保存當前標註",
+                instructions: "使用說明",
+                labelNoUpdate: "暫無標籤數據更新",
+                zoomRestore: "還原"
             },
             labelme: {
-                saveLabel: "保存"
+                saveLabel: "保存",
+                confirmDeleteLabel: "確定要刪除該標註嗎？",
+                emptyLabelText: "暫無標註數據",
+                createPolygon: "創城多邊形",
+                editPolygon: "編輯多邊形",
+                deletePolygon: "刪除多邊形",
+                createRectangle: "創建矩形",
+                createCircle: "創建圓形",
+                selectClasses: "選擇標籤",
+                emptyClassesText: "咱無標註",
+                deleteClasses: "刪除標註",
+                labelGroupId: "分組ID",
+                labelDescription: "標註描述"
             }
         }
     };
@@ -977,8 +995,8 @@
         [zhtwLocale.name]: {
             ...zhtwLocale
         }
-    }, translate = (path, option, locale) => get(locale, path, path)?.replace(/\{(\w+)\}/g, ((_, key) => `${option?.[key] ?? `{${key}}`}`)), buildTranslator = locale => (path, option) => translate(path, option, vue.unref(locale)), buildLocaleContext = locale => {
-        const lang = vue.computed((() => vue.unref(locale).name)), localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang.value] || localeLang["zh-cn"];
+    }, translate = (path, option, locale) => get(locale, path, path)?.replace(/\{(\w+)\}/g, (_, key) => `${option?.[key] ?? `{${key}}`}`), buildTranslator = locale => (path, option) => translate(path, option, vue.unref(locale)), buildLocaleContext = locale => {
+        const lang = vue.computed(() => vue.unref(locale).name), localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang.value] || localeLang["zh-cn"];
         return localeRef.value.next = nextLang.next, {
             lang: lang,
             locale: localeRef,
@@ -986,12 +1004,12 @@
         };
     }, localeContextKey = elementPlus.localeContextKey, useLocale = localeOverrides => {
         const locale = localeOverrides || vue.inject(localeContextKey, vue.ref());
-        return buildLocaleContext(vue.computed((() => locale?.value || zhcnLocale)));
+        return buildLocaleContext(vue.computed(() => locale?.value || zhcnLocale));
     }, reg_hex = /^#([0-9A-F]{3}|[0-9A-F]{6}|[0-9A-F]{8})$/i, reg_rgba = /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0|1|0?\.\d+)\s*\)$/i;
     function useChangeColor() {
         const rgbaToHex = rgba => {
-            const rgbaValues = rgba.replace(/^rgba?\(|\s+|\)$/g, "").split(",").map((value => parseFloat(value))), [r, g, b] = rgbaValues;
-            return `#${[ r, g, b ].map((value => Math.round(value).toString(16).padStart(2, "0"))).join("")}`.toUpperCase();
+            const rgbaValues = rgba.replace(/^rgba?\(|\s+|\)$/g, "").split(",").map(value => parseFloat(value)), [r, g, b] = rgbaValues;
+            return `#${[ r, g, b ].map(value => Math.round(value).toString(16).padStart(2, "0")).join("")}`.toUpperCase();
         };
         return {
             hexToRgb: str => {
@@ -1020,8 +1038,8 @@
             },
             rgbaToHex: rgbaToHex,
             rgbaToHexAlpha: rgba => {
-                const rgbaValues = rgba.replace(/^rgba?\(|\s+|\)$/g, "").split(",").map((value => parseFloat(value))), [r, g, b, a] = rgbaValues, alpha = Math.round(255 * a).toString(16).padStart(2, "0");
-                return `#${[ r, g, b ].map((value => Math.round(value).toString(16).padStart(2, "0"))).join("")}${alpha}`.toUpperCase();
+                const rgbaValues = rgba.replace(/^rgba?\(|\s+|\)$/g, "").split(",").map(value => parseFloat(value)), [r, g, b, a] = rgbaValues, alpha = Math.round(255 * a).toString(16).padStart(2, "0");
+                return `#${[ r, g, b ].map(value => Math.round(value).toString(16).padStart(2, "0")).join("")}${alpha}`.toUpperCase();
             },
             getDarkColor: (color, level) => {
                 let _color = color;
@@ -1061,9 +1079,9 @@
     }, detectVideoFrame = async (video, model, ctx, tf, classNames, classInput = [], detect_ctx, success) => {
         const {videoWidth: videoWidth, videoHeight: videoHeight} = video;
         if (!videoWidth || !videoHeight) return;
-        let [modelWeight, modelHeight] = model.inputs[0].shape.slice(1, 3), input = tf.tidy((() => tf.image.resizeBilinear(tf.browser.fromPixels(video), [ modelWeight, modelHeight ]).div(255).expandDims(0)));
+        let [modelWeight, modelHeight] = model.inputs[0].shape.slice(1, 3), input = tf.tidy(() => tf.image.resizeBilinear(tf.browser.fromPixels(video), [ modelWeight, modelHeight ]).div(255).expandDims(0));
         ctx.clearRect(0, 0, videoWidth, videoHeight), detect_ctx.clearRect(0, 0, videoWidth, videoHeight), 
-        await model.executeAsync(input).then((async res => {
+        await model.executeAsync(input).then(async res => {
             let [boxes, scores, classes, valid_detections] = res;
             for (let i = 0; i < valid_detections.dataSync()[0]; ++i) {
                 let [x0, y0, x1, y1] = boxes.dataSync().slice(4 * i, 4 * (i + 1));
@@ -1081,7 +1099,7 @@
                 if (classInput?.length) for (let k = 0; k < classInput.length; k++) {
                     const item = classInput[k];
                     if (item.cls == cls && Number(score) > item.score) {
-                        const target = classNames.find((o => o.value == cls));
+                        const target = classNames.find(o => o.value == cls);
                         if (target) {
                             const name = target.label;
                             drawOutcome(name, score, await drawVideoFrame(video, detect_ctx)), drawOutcome(name, score, ctx), 
@@ -1089,14 +1107,14 @@
                         }
                     }
                 } else if (score > .5) {
-                    const target = classNames.find((o => o.value == cls));
+                    const target = classNames.find(o => o.value == cls);
                     if (target) {
                         drawOutcome(target.label || "", score, ctx);
                     }
                 }
             }
             input.dispose(), tf.dispose(res);
-        }));
+        });
     }, drawVideoFrame = (videoElement, ctx) => {
         const width = videoElement.videoWidth, height = videoElement.videoHeight, mediaRatio = width / height, canvasRatio = width / height, sw = width, sh = height;
         let dx, dy, dw, dh;
@@ -1186,14 +1204,14 @@
             }
         },
         setup(props, {slots: slots}) {
-            const isTip = vue.ref(!1), setWidth = vue.computed((() => {
+            const isTip = vue.ref(!1), setWidth = vue.computed(() => {
                 const width = props.width;
                 let style = {
                     textAlign: props.textAlign
                 };
                 return width && ("string" == typeof width ? style.width = width : "number" == typeof width && (style.width = width + "px")), 
                 style;
-            })), ellipsisRef = vue.ref(), onMouseenter = () => {
+            }), ellipsisRef = vue.ref(), onMouseenter = () => {
                 try {
                     const dom = ellipsisRef.value;
                     dom && dom.scrollWidth && dom.scrollWidth > dom.offsetWidth ? isTip.value = !0 : isTip.value = !1;
@@ -1349,6 +1367,19 @@
             fill: "currentColor",
             d: "m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336zm384 254.272v-64h448v64h-448z"
         }) ]))
+    }), edit_default = vue.defineComponent({
+        name: "Edit",
+        __name: "edit",
+        setup: __props => (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 1024 1024"
+        }, [ vue.createElementVNode("path", {
+            fill: "currentColor",
+            d: "M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
+        }), vue.createElementVNode("path", {
+            fill: "currentColor",
+            d: "m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
+        }) ]))
     }), full_screen_default = vue.defineComponent({
         name: "FullScreen",
         __name: "full-screen",
@@ -1693,14 +1724,14 @@
                                 if (!element.contentDocument) {
                                     var state = getState(element);
                                     return state.checkForObjectDocumentTimeoutId && window.clearTimeout(state.checkForObjectDocumentTimeoutId), 
-                                    void (state.checkForObjectDocumentTimeoutId = setTimeout((function() {
+                                    void (state.checkForObjectDocumentTimeoutId = setTimeout(function() {
                                         state.checkForObjectDocumentTimeoutId = 0, getDocument(element, callback);
-                                    }), 100));
+                                    }, 100));
                                 }
                                 callback(element.contentDocument);
-                            }(this, (function(objectDocument) {
+                            }(this, function(objectDocument) {
                                 callback(element);
-                            }));
+                            });
                         }, browserDetector$1.isIE() || (object.data = "about:blank"), getState(element) && (element.appendChild(object), 
                         getState(element).object = object, browserDetector$1.isIE() && (object.data = "about:blank"));
                     }
@@ -1903,7 +1934,7 @@
                     function updateDetectorElements(done) {
                         var width = element.offsetWidth, height = element.offsetHeight, sizeChanged = width !== getState(element).lastWidth || height !== getState(element).lastHeight;
                         debug("Storing current size", width, height), storeCurrentSize(element, width, height), 
-                        batchProcessor.add(0, (function() {
+                        batchProcessor.add(0, function() {
                             if (sizeChanged) if (getState(element)) if (areElementsInjected()) {
                                 if (options.debug) {
                                     var w = element.offsetWidth, h = element.offsetHeight;
@@ -1911,11 +1942,11 @@
                                 }
                                 updateChildSizes(element, width, height);
                             } else debug("Aborting because element container has not been initialized"); else debug("Aborting because element has been uninstalled");
-                        })), batchProcessor.add(1, (function() {
+                        }), batchProcessor.add(1, function() {
                             getState(element) ? areElementsInjected() ? positionScrollbars(element, width, height) : debug("Aborting because element container has not been initialized") : debug("Aborting because element has been uninstalled");
-                        })), sizeChanged && done && batchProcessor.add(2, (function() {
+                        }), sizeChanged && done && batchProcessor.add(2, function() {
                             getState(element) ? areElementsInjected() ? done() : debug("Aborting because element container has not been initialized") : debug("Aborting because element has been uninstalled");
-                        }));
+                        });
                     }
                     function areElementsInjected() {
                         return !!getState(element).container;
@@ -1925,9 +1956,9 @@
                         var state = getState(element);
                         return void 0 === getState(element).lastNotifiedWidth && state.lastWidth === state.startSize.width && state.lastHeight === state.startSize.height ? debug("Not notifying: Size is the same as the start size, and there has been no notification yet.") : state.lastWidth === state.lastNotifiedWidth && state.lastHeight === state.lastNotifiedHeight ? debug("Not notifying: Size already notified") : (debug("Current size not notified, notifying..."), 
                         state.lastNotifiedWidth = state.lastWidth, state.lastNotifiedHeight = state.lastHeight, 
-                        void forEach$1(getState(element).listeners, (function(listener) {
+                        void forEach$1(getState(element).listeners, function(listener) {
                             listener(element);
-                        })));
+                        }));
                     }
                     function handleScroll() {
                         debug("Scroll detected."), isUnrendered(element) ? debug("Scroll event fired while unrendered. Ignoring...") : updateDetectorElements(notifyListenersIfNeeded);
@@ -1994,9 +2025,9 @@
     function toArray(collection) {
         if (Array.isArray(collection)) return collection;
         var array = [];
-        return forEach(collection, (function(obj) {
+        return forEach(collection, function(obj) {
             array.push(obj);
-        })), array;
+        }), array;
     }
     function isElement(obj) {
         return obj && 1 === obj.nodeType;
@@ -2041,9 +2072,9 @@
             listenTo: function(options, elements, listener) {
                 function onResizeCallback(element) {
                     var listeners = eventListenerHandler.get(element);
-                    forEach(listeners, (function(listener) {
+                    forEach(listeners, function(listener) {
                         listener(element);
-                    }));
+                    });
                 }
                 function addListener(callOnAdd, element, listener) {
                     eventListenerHandler.add(element, listener), callOnAdd && listener(element);
@@ -2054,20 +2085,20 @@
                     if (!isCollection(elements)) return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");
                     elements = toArray(elements);
                 }
-                var elementsReady = 0, callOnAdd = getOption(options, "callOnAdd", globalOptions.callOnAdd), onReadyCallback = getOption(options, "onReady", (function() {})), debug = getOption(options, "debug", globalOptions.debug);
-                forEach(elements, (function(element) {
+                var elementsReady = 0, callOnAdd = getOption(options, "callOnAdd", globalOptions.callOnAdd), onReadyCallback = getOption(options, "onReady", function() {}), debug = getOption(options, "debug", globalOptions.debug);
+                forEach(elements, function(element) {
                     stateHandler.getState(element) || (stateHandler.initState(element), idHandler.set(element));
                     var id = idHandler.get(element);
                     if (debug && reporter.log("Attaching listener to element", id, element), !elementUtils.isDetectable(element)) return debug && reporter.log(id, "Not detectable."), 
                     elementUtils.isBusy(element) ? (debug && reporter.log(id, "System busy making it detectable"), 
                     addListener(callOnAdd, element, listener), onReadyCallbacks[id] = onReadyCallbacks[id] || [], 
-                    void onReadyCallbacks[id].push((function() {
+                    void onReadyCallbacks[id].push(function() {
                         ++elementsReady === elements.length && onReadyCallback();
-                    }))) : (debug && reporter.log(id, "Making detectable..."), elementUtils.markBusy(element, !0), 
+                    })) : (debug && reporter.log(id, "Making detectable..."), elementUtils.markBusy(element, !0), 
                     detectionStrategy.makeDetectable({
                         debug: debug,
                         important: importantCssRules
-                    }, element, (function(element) {
+                    }, element, function(element) {
                         if (debug && reporter.log(id, "onElementDetectable"), stateHandler.getState(element)) {
                             elementUtils.markAsDetectable(element), elementUtils.markBusy(element, !1), detectionStrategy.addListener(element, onResizeCallback), 
                             addListener(callOnAdd, element, listener);
@@ -2076,15 +2107,15 @@
                                 var width = element.offsetWidth, height = element.offsetHeight;
                                 state.startSize.width === width && state.startSize.height === height || onResizeCallback(element);
                             }
-                            onReadyCallbacks[id] && forEach(onReadyCallbacks[id], (function(callback) {
+                            onReadyCallbacks[id] && forEach(onReadyCallbacks[id], function(callback) {
                                 callback();
-                            }));
+                            });
                         } else debug && reporter.log(id, "Element uninstalled before being detectable.");
                         delete onReadyCallbacks[id], ++elementsReady === elements.length && onReadyCallback();
-                    })));
+                    }));
                     debug && reporter.log(id, "Already detecable, adding listener."), addListener(callOnAdd, element, listener), 
                     elementsReady++;
-                })), elementsReady === elements.length && onReadyCallback();
+                }), elementsReady === elements.length && onReadyCallback();
             },
             removeListener: eventListenerHandler.removeListener,
             removeAllListeners: eventListenerHandler.removeAllListeners,
@@ -2094,10 +2125,10 @@
                     if (!isCollection(elements)) return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");
                     elements = toArray(elements);
                 }
-                forEach(elements, (function(element) {
+                forEach(elements, function(element) {
                     eventListenerHandler.removeAllListeners(element), detectionStrategy.uninstall(element), 
                     stateHandler.cleanState(element);
-                }));
+                });
             },
             initDocument: function(targetDocument) {
                 detectionStrategy.initDocument && detectionStrategy.initDocument(targetDocument);
@@ -2112,13 +2143,13 @@
     const elementResize = (el, cb) => {
         const erd = elementResizeDetectorMaker();
         let timer = null;
-        erd.listenTo(el, (() => {
-            null !== timer && clearTimeout(timer), timer = setTimeout((() => {
+        erd.listenTo(el, () => {
+            null !== timer && clearTimeout(timer), timer = setTimeout(() => {
                 cb && cb(el), clearTimeout(timer);
-            }), 200);
-        })), vue.onUnmounted((() => {
-            erd.removeListener(el, (() => {}));
-        }));
+            }, 200);
+        }), vue.onUnmounted(() => {
+            erd.removeListener(el, () => {});
+        });
     }, deepClone = source => {
         if (null == source) return source;
         let target;
@@ -2149,7 +2180,26 @@
     }), {
         target: target,
         source: source
-    });
+    }), timeUniqueId = () => {
+        const dateStr = ((date, format = "yyyy-MM-dd") => {
+            if ("Invalid Date" != date) {
+                const o = {
+                    "M+": date.getMonth() + 1,
+                    "d+": date.getDate(),
+                    "h+": date.getHours(),
+                    "m+": date.getMinutes(),
+                    "s+": date.getSeconds(),
+                    "q+": Math.floor((date.getMonth() + 3) / 3),
+                    S: date.getMilliseconds()
+                };
+                /(y+)/.test(format) && (format = format.replace(RegExp.$1, (date.getFullYear() + "").substring(4 - RegExp.$1.length)));
+                for (const k in o) new RegExp("(" + k + ")").test(format) && (format = format.replace(RegExp.$1, 1 == RegExp.$1.length ? o[k] : ("00" + o[k]).substring(("" + o[k]).length)));
+                return format;
+            }
+            return "";
+        })(new Date, "yyyyMMddhhmmsss"), num = dateStr + Math.random().toString(10).substring(2, 8);
+        return String(num);
+    };
     var LayoutSetting = vue.defineComponent({
         setup() {
             const config = vue.inject("options", {});
@@ -2283,7 +2333,7 @@
                     default: () => [ vue.createTextVNode("布局方式") ]
                 }), vue.createVNode("ul", {
                     class: _ns.b("config-bar-layout")
-                }, [ layouts.map((item => vue.createVNode("li", {
+                }, [ layouts.map(item => vue.createVNode("li", {
                     class: [ _ns.be("config-bar-layout", item.type), _ns.is("active", settingConfig.layout === item.type) ],
                     onClick: event => ((event, layout) => {
                         event.stopPropagation(), settingConfig.layout = layout.type, _changeUpdateOptions();
@@ -2294,7 +2344,7 @@
                     class: "layout-box"
                 }, [ vue.createVNode("p", {
                     class: "layout-text"
-                }, [ item.text ]) ]) ]), vue.createVNode("aside", null, null) ]))) ]), vue.createVNode("div", {
+                }, [ item.text ]) ]) ]), vue.createVNode("aside", null, null) ])) ]), vue.createVNode("div", {
                     class: _ns.b("config-bar-item"),
                     style: {
                         "margin-top": "20px"
@@ -2314,7 +2364,7 @@
     });
     var HeaderTools = vue.defineComponent({
         setup() {
-            const locale = vue.inject(localeContextKey, vue.ref()), config = vue.inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = core.useFullscreen(), language = vue.ref(vue.computed((() => config.language)).value), settingDrawer = vue.ref(!1);
+            const locale = vue.inject(localeContextKey, vue.ref()), config = vue.inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = core.useFullscreen(), language = vue.ref(vue.computed(() => config.language).value), settingDrawer = vue.ref(!1);
             return {
                 locale: locale,
                 config: config,
@@ -2322,13 +2372,17 @@
                 toggle: toggle,
                 isFullscreen: isFullscreen,
                 language: language,
-                settingDrawer: settingDrawer
+                settingDrawer: settingDrawer,
+                openSettingDrawer: () => {
+                    settingDrawer.value = !0;
+                },
+                closeSettingDrawer: () => {
+                    settingDrawer.value = !1;
+                }
             };
         },
         render() {
-            const _ns = vue.inject("__ns__", {}), _config = this.config, _emit = vue.inject("__emit__", {}), slots = this.$slots, _t = this.t, isFullscreen = this.isFullscreen, profile_url = _config.profile, _userDropdown = _config.userDropdown, _languageDropdown = _config.languageDropdown, _closeSettingDrawer = () => {
-                this.settingDrawer = !1;
-            };
+            const _ns = vue.inject("__ns__", {}), _config = this.config, _emit = vue.inject("__emit__", {}), slots = this.$slots, _t = this.t, isFullscreen = this.isFullscreen, profile_url = _config.profile, _userDropdown = _config.userDropdown, _languageDropdown = _config.languageDropdown;
             return vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
                 class: _ns.b("header-tools")
             }, [ slots[slots_config_headerToolsPrefix]?.(), vue.createVNode("li", null, [ vue.createVNode(elementPlus.ElDropdown, {
@@ -2363,12 +2417,12 @@
                 }) ]),
                 dropdown: () => {
                     let _slot;
-                    return vue.createVNode(elementPlus.ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
+                    return vue.createVNode(elementPlus.ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map(item => vue.createVNode(elementPlus.ElDropdownItem, {
                         command: item.value,
                         disabled: this.language === item.value
                     }, {
                         default: () => [ item.label ]
-                    })))) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
+                    }))) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
                         default: () => [ _slot ]
                     });
                     var s;
@@ -2424,7 +2478,7 @@
                     default: () => [ vue.createVNode(arrow_down_default, null, null) ]
                 }) ]),
                 dropdown: () => vue.createVNode(elementPlus.ElDropdownMenu, null, {
-                    default: () => [ _userDropdown?.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
+                    default: () => [ _userDropdown?.map(item => vue.createVNode(elementPlus.ElDropdownItem, {
                         command: item.value,
                         divided: !!item.divided
                     }, {
@@ -2434,16 +2488,14 @@
                         }, null) : null, item.iconfont ? vue.createVNode("i", {
                             class: item.iconfont
                         }, null) : null, _t(item.label) ]
-                    }))) ]
+                    })) ]
                 })
             }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
                 style: {
                     display: "inline-block",
                     lineHeight: 1
                 },
-                onClick: () => {
-                    this.settingDrawer = !0;
-                }
+                onClick: this.openSettingDrawer
             }, [ vue.createVNode(elementPlus.ElIcon, {
                 size: 16
             }, {
@@ -2459,7 +2511,7 @@
                     size: "380px",
                     class: _ns.be("drawer", "setting"),
                     "destroy-on-close": !0,
-                    beforeClose: _closeSettingDrawer
+                    beforeClose: this.closeSettingDrawer
                 }, {
                     default: () => [ vue.createVNode(LayoutSetting, null, null) ]
                 }) ]
@@ -2472,12 +2524,12 @@
             ns: vue.inject("ns", {})
         }),
         render() {
-            const slots = this.$slots, _ns = this.ns, _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
+            const slots = this.$slots, _ns = this.ns, _config = vue.inject("options", {}), headerStyle = vue.computed(() => {
                 const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$4(color, .5)})`
                 } : "";
-            })), __slots_header_tools = {};
+            }), __slots_header_tools = {};
             return slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
             slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]()), 
             vue.createVNode("header", {
@@ -2531,8 +2583,8 @@
             }
         },
         setup(props) {
-            const _ns = vue.inject("ns", {}), menuTree = vue.computed((() => props.menuData)).value;
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElSubMenu, {
+            const _ns = vue.inject("ns", {}), menuTree = vue.computed(() => props.menuData).value;
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ menuTree.map(item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElSubMenu, {
                 "popper-class": _ns.b("popper"),
                 index: item.path || item.id,
                 teleported: !0
@@ -2549,7 +2601,7 @@
                 default: () => [ vue.createVNode(MenuItemTitle, {
                     meta: item.meta
                 }, null) ]
-            }))) ]) ]);
+            })) ]) ]);
         }
     }), ns$n = useNamespace("menu");
     const NextMenu = withInstall(vue.defineComponent({
@@ -2580,9 +2632,9 @@
         setup(props) {
             vue.provide("ns", ns$n);
             const router = vue.getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, activePath = vue.ref(currentPath);
-            vue.watch((() => router.currentRoute?.value), (to => {
+            vue.watch(() => router.currentRoute?.value, to => {
                 activePath.value = to.fullPath;
-            }));
+            });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(elementPlus.ElMenu, {
                 class: [ ns$n.b(), props.className ],
                 style: props.style,
@@ -2592,7 +2644,7 @@
                 mode: props.mode,
                 ellipsis: !0
             }, {
-                default: () => [ vue.createVNode(vue.Fragment, null, [ props.menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElSubMenu, {
+                default: () => [ vue.createVNode(vue.Fragment, null, [ props.menuTree.map(item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElSubMenu, {
                     "popper-class": ns$n.b("popper"),
                     index: item.path || item.id,
                     teleported: !0
@@ -2610,7 +2662,7 @@
                     default: () => [ vue.createVNode(MenuItemTitle, {
                         meta: item.meta
                     }, null) ]
-                }))) ]) ]
+                })) ]) ]
             }) ]);
         }
     }));
@@ -2666,12 +2718,12 @@
     const {getLightColor: getLightColor$3} = useChangeColor();
     var Header$3 = vue.defineComponent({
         setup(props, {slots: slots}) {
-            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
+            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed(() => {
                 const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$3(color, .5)})`
                 } : "";
-            })), __slots_header_tools = {};
+            }), __slots_header_tools = {};
             slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
             slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             return () => {
@@ -2721,12 +2773,12 @@
     const {getLightColor: getLightColor$2} = useChangeColor();
     var Header$2 = vue.defineComponent({
         setup(props, {slots: slots}) {
-            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
+            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed(() => {
                 const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$2(color, .5)})`
                 } : "";
-            })), __slots_header_tools = {};
+            }), __slots_header_tools = {};
             slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
             slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             return () => {
@@ -2792,12 +2844,12 @@
     const {getLightColor: getLightColor$1} = useChangeColor();
     var Header$1 = vue.defineComponent({
         setup(props, {slots: slots}) {
-            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
+            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed(() => {
                 const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$1(color, .5)})`
                 } : "";
-            })), __slots_header_tools = {};
+            }), __slots_header_tools = {};
             slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
             slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             return () => {
@@ -2892,11 +2944,11 @@
             vue.provide("ns", ns$i);
             const updateSubmentTree = vue.inject("updateSubmentTree"), router = vue.getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, parentNode = findGrandfatherNode(currentPath, props.menuTree), activeMenuId = vue.ref(parentNode?.id);
             parentNode?.id && 1 === parentNode.meta?.level && updateSubmentTree(parentNode.children), 
-            vue.watch((() => router.currentRoute?.value), (to => {
+            vue.watch(() => router.currentRoute?.value, to => {
                 const parentNode = findGrandfatherNode(to.fullPath, props.menuTree);
                 if (activeMenuId.value = parentNode?.id, !parentNode) return updateSubmentTree([]);
                 parentNode?.id && 1 === parentNode.meta?.level && updateSubmentTree(parentNode.children);
-            }));
+            });
             const findTreeFirst = tree => {
                 let result = tree[0];
                 for (let i = 0; i < tree.length; i++) {
@@ -2912,19 +2964,20 @@
                 mode: "horizontal",
                 ellipsis: !0
             }, {
-                default: () => [ vue.createVNode(vue.Fragment, null, [ props.menuTree.map((item => valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElMenuItem, {
+                default: () => [ vue.createVNode(vue.Fragment, null, [ props.menuTree.map(item => valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElMenuItem, {
                     index: item.id,
                     onClick: val => ((val, item) => {
                         if (updateSubmentTree(item.children), item.children?.length) {
                             const firstNode = findTreeFirst(item.children);
-                            router.push(firstNode.path);
-                        } else router.push(item.path);
+                            return void router.push(firstNode.path);
+                        }
+                        router.push(item.path);
                     })(0, item)
                 }, {
                     default: () => [ vue.createVNode(MenuItemTitle, {
                         meta: item.meta
                     }, null) ]
-                }))) ]) ]
+                })) ]) ]
             });
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
@@ -2932,12 +2985,12 @@
     const {getLightColor: getLightColor} = useChangeColor();
     var Header = vue.defineComponent({
         setup(props, {slots: slots}) {
-            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
+            const _ns = vue.inject("ns", {}), _config = vue.inject("options", {}), headerStyle = vue.computed(() => {
                 const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor(color, .5)})`
                 } : "";
-            })), __slots_header_tools = {};
+            }), __slots_header_tools = {};
             slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
             slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             return () => {
@@ -2973,11 +3026,11 @@
         setup() {
             vue.provide("ns", ns$h);
             const submenuTree = vue.ref([]);
-            return vue.provide("submenuTree", submenuTree), vue.provide("updateSubmentTree", (val => {
-                submenuTree.value = [], vue.nextTick((() => {
+            return vue.provide("submenuTree", submenuTree), vue.provide("updateSubmentTree", val => {
+                submenuTree.value = [], vue.nextTick(() => {
                     submenuTree.value = val;
-                }));
-            })), {
+                });
+            }), {
                 ns: ns$h,
                 submenuTree: submenuTree
             };
@@ -3042,9 +3095,9 @@
                 _config.value = mergeWith(_config.value, cfg, customizerCoverArray), updateThemeColorCssVar(_config.value?.setting), 
                 emit("changeOptions", _config.value);
             };
-            return vue.provide("updateOptions", updateOptions), vue.watch((() => props.options), (cfg => {
+            return vue.provide("updateOptions", updateOptions), vue.watch(() => props.options, cfg => {
                 updateOptions(cfg);
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             }), {
@@ -3054,9 +3107,9 @@
         },
         render() {
             const props = this.$props, slots = this.$slots, layout = this.options.setting?.layout || "transverse", activeLayout = vue.ref(layouts[layout]);
-            vue.watchEffect((() => {
+            vue.watchEffect(() => {
                 activeLayout.value = layouts[layout], activeLayout.value || (activeLayout.value = layouts.transverse);
-            }));
+            });
             const _activeSlots = {};
             for (const key in slots) Object.prototype.hasOwnProperty.call(slots, key) && (_activeSlots[key] = () => slots[key]?.());
             return vue.createVNode("div", {
@@ -3081,7 +3134,7 @@
         },
         emits: [ "change", "select", "close" ],
         setup(props, {emit: emit}) {
-            const {t: t} = useLocale(), router = vue.getCurrentInstance().appContext.config.globalProperties.$router, _activeTab = vue.computed((() => router.currentRoute.value.path)), _tabs = vue.computed((() => props.tabs)), defaultIndex = _tabs.value?.findIndex((v => v.path === _activeTab.value));
+            const {t: t} = useLocale(), router = vue.getCurrentInstance().appContext.config.globalProperties.$router, _activeTab = vue.computed(() => router.currentRoute.value.path), _tabs = vue.computed(() => props.tabs), defaultIndex = _tabs.value?.findIndex(v => v.path === _activeTab.value);
             if (defaultIndex < 0) {
                 const tab = _tabs.value[0];
                 tab && tab.path && router.replace({
@@ -3089,7 +3142,7 @@
                 });
             }
             const activeIndex = vue.ref(defaultIndex), tabsView = vue.ref(_tabs.value), onChange = command => {
-                const active = _activeTab.value, len = tabsView.value.length, i = tabsView.value.findIndex((v => v.path === active));
+                const active = _activeTab.value, len = tabsView.value.length, i = tabsView.value.findIndex(v => v.path === active);
                 switch (command) {
                   case "other":
                     i > -1 && (activeIndex.value = 1, tabsView.value = [ tabsView.value[0], tabsView.value[i] ]);
@@ -3125,7 +3178,7 @@
                     params: tab.params || {}
                 }), router.push(to), emit("select", tab, index);
             };
-            vue.watch((() => router.currentRoute?.value), (to => {
+            vue.watch(() => router.currentRoute?.value, to => {
                 const {tagTitle: tagTitle} = to.query, activeRoute = {
                     name: to.name,
                     title: tagTitle || to.meta?.title,
@@ -3133,16 +3186,16 @@
                     meta: to.meta,
                     params: to.params,
                     query: to.query
-                }, i = tabsView.value.findIndex((v => v.path === to.path));
+                }, i = tabsView.value.findIndex(v => v.path === to.path);
                 i > -1 ? (activeIndex.value = i, tabsView.value[i] = activeRoute) : (activeIndex.value = tabsView.value.length, 
                 tabsView.value.push(activeRoute)), emit("change", activeIndex.value, tabsView.value, "add");
-            }));
+            });
             const renderContent = () => vue.createVNode("nav", {
                 class: ns$f.b()
             }, [ vue.createVNode(elementPlus.ElScrollbar, null, {
                 default: () => [ vue.createVNode("ul", {
                     class: ns$f.b("list")
-                }, [ tabsView.value.map(((tab, index) => tab ? vue.createVNode("li", {
+                }, [ tabsView.value.map((tab, index) => tab ? vue.createVNode("li", {
                     class: [ "tab-item", ns$f.is("active", activeIndex.value === index) ],
                     onClick: event => onClickTabItem(event, tab, index)
                 }, [ vue.createVNode("i", {
@@ -3163,14 +3216,14 @@
                             }), router.push(to), emit("close", prevTag, tabsView.value);
                         }
                         tabsView.value.splice(index, 1);
-                        const i = tabsView.value.findIndex((v => v.path === active)) || 0;
+                        const i = tabsView.value.findIndex(v => v.path === active) || 0;
                         activeIndex.value = i > -1 ? i : 0, emit("change", activeIndex.value, tabsView.value, "close");
                     })(event, tab, index)
                 }, [ vue.createVNode(elementPlus.ElIcon, {
                     class: "tab-close"
                 }, {
                     default: () => [ vue.createVNode(close_default, null, null) ]
-                }) ]) ]) : null)) ]) ]
+                }) ]) ]) : null) ]) ]
             }), vue.createVNode(elementPlus.ElDropdown, {
                 "show-timeout": 80,
                 "hide-timeout": 80,
@@ -3240,7 +3293,7 @@
             }
         },
         setup(props, {slots: slots}) {
-            const styles = vue.computed((() => {
+            const styles = vue.computed(() => {
                 let style = {};
                 const padding = props.padding;
                 return "boolean" == typeof padding ? style = padding ? {
@@ -3250,7 +3303,7 @@
                 } : "number" == typeof padding && (style = {
                     padding: padding + "px"
                 }), style;
-            }));
+            });
             return () => (() => {
                 if (props.scrollbar) {
                     const scrollStyle = {
@@ -3278,9 +3331,6 @@
             })();
         }
     }));
-    function isEqual(value, other) {
-        return baseIsEqual(value, other);
-    }
     var defaultPropsConfig = {
         className: {
             type: String,
@@ -3466,9 +3516,9 @@
         },
         setup(props, {slots: slots}) {
             const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), ns = vue.inject("ns", {}), columns = vue.ref(props.columns);
-            vue.watch((() => props.columns), (() => {
+            vue.watch(() => props.columns, () => {
                 columns.value = props.columns;
-            }), {
+            }, {
                 deep: !0
             });
             const formParams = vue.reactive(props.formParams), _defaultDisabledDate = time => time.getTime() > Date.now(), _defaultShortcuts = [ {
@@ -3575,10 +3625,10 @@
                         "collapse-tags": !0,
                         "collapse-tags-tooltip": !0
                     }, {
-                        default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElOption, {
+                        default: () => [ col.dicData && col.dicData.map(item => vue.createVNode(elementPlus.ElOption, {
                             value: item.value,
                             label: item.label
-                        }, null))) ]
+                        }, null)) ]
                     });
                 }
                 if ("date" === col.type) {
@@ -3668,7 +3718,7 @@
                     onChange: (...arg) => col.onChange?.(...arg, col, formParams)
                 }, null) : void 0;
             };
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ columns.value.map((col => !col.hide && vue.createVNode(elementPlus.ElCol, {
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ columns.value.map(col => !col.hide && vue.createVNode(elementPlus.ElCol, {
                 span: props.searchSpan,
                 class: ns.b("header-search-item")
             }, {
@@ -3680,10 +3730,10 @@
                     }, null) : null,
                     default: () => renderColItemContent(col)
                 }) ]
-            }))) ]) ]);
+            })) ]) ]);
         }
     });
-    function _isSlot$5(s) {
+    function _isSlot$6(s) {
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
     var HeaderSearch = vue.defineComponent({
@@ -3697,13 +3747,13 @@
         emits: [ "confirmSearch", "clearSearch", "zoomResize" ],
         setup(props, {emit: emit, slots: slots}) {
             const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, ns = vue.inject("ns", {}), {t: t} = useLocale(), searchFormSlots = vue.inject("searchFormSlots"), searchFrom_slots = {};
-            searchFormSlots.value.forEach((slotName => {
+            searchFormSlots.value.forEach(slotName => {
                 searchFrom_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const searchParams = vue.reactive({}), columns = vue.ref(props.columns), _initSearchFormParams = () => {
-                columns.value.forEach((col => {
+                columns.value.forEach(col => {
                     searchParams[col.prop] = "", isValueExist(col.defaultValue) && (searchParams[col.prop] = col.defaultValue);
-                }));
+                });
             };
             _initSearchFormParams();
             const onConfirmSearch = () => {
@@ -3711,9 +3761,9 @@
             }, onClearSearch = () => {
                 _initSearchFormParams(), onConfirmSearch(), emit("clearSearch");
             }, searchSpan = vue.ref(options.searchSpan), columnsLength = columns.value.length, sliceIndex = vue.ref(columnsLength), showColumns = vue.ref(columns.value), moreColumns = vue.ref([]), isColumnMinWidth = vue.ref(!1), {proxy: proxy} = vue.getCurrentInstance();
-            vue.onMounted((() => {
+            vue.onMounted(() => {
                 const tableSearchFormEl = proxy.$refs.tableSearchForm?.$el;
-                tableSearchFormEl && elementResize(tableSearchFormEl, (el => {
+                tableSearchFormEl && elementResize(tableSearchFormEl, el => {
                     (el => {
                         const formWidth = el.clientWidth, minWidth = options.searchColumnMinWidth;
                         let span = Math.floor(formWidth / minWidth);
@@ -3727,8 +3777,8 @@
                         const columnWidth = Math.floor(formWidth / span);
                         isColumnMinWidth.value = columnWidth < minWidth;
                     })(el), emit("zoomResize");
-                }));
-            }));
+                });
+            });
             const isExpand = vue.ref(!1), onSwitchExpand = () => {
                 isExpand.value = !isExpand.value;
             };
@@ -3747,13 +3797,13 @@
                         searchSpan: searchSpan.value,
                         columns: showColumns.value,
                         formParams: searchParams
-                    }, _isSlot$5(searchFrom_slots) ? searchFrom_slots : {
+                    }, _isSlot$6(searchFrom_slots) ? searchFrom_slots : {
                         default: () => [ searchFrom_slots ]
                     }), isExpand.value ? vue.createVNode(SearchColumn, {
                         searchSpan: searchSpan.value,
                         columns: moreColumns.value,
                         formParams: searchParams
-                    }, _isSlot$5(searchFrom_slots) ? searchFrom_slots : {
+                    }, _isSlot$6(searchFrom_slots) ? searchFrom_slots : {
                         default: () => [ searchFrom_slots ]
                     }) : null, vue.createVNode(elementPlus.ElCol, {
                         span: searchSpan.value,
@@ -3876,14 +3926,17 @@
         setup: () => ({}),
         emits: [ "clickAdd", "clickRefresh", "deleteRows" ],
         render() {
-            const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), ns = vue.inject("ns", {}), multipleSelection = vue.inject("multipleSelection"), multipleSelectionLength = vue.computed((() => multipleSelection.value.length)), drawerSettingRef = vue.ref();
+            const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), ns = vue.inject("ns", {}), multipleSelection = vue.inject("multipleSelection"), multipleSelectionLength = vue.computed(() => multipleSelection.value.length), onClickRefresh = () => {
+                this.$emit("clickRefresh");
+            }, drawerSettingRef = vue.ref(), slotProps = {
+                size: options.size,
+                refresh: onClickRefresh
+            };
             return vue.createVNode("div", {
                 class: ns.b("header-menu")
             }, [ vue.createVNode("div", {
                 class: ns.b("header-menu-left")
-            }, [ this.$slots["menu-left-prefix"]?.({
-                size: options.size
-            }), options.addBtn && vue.createVNode(elementPlus.ElButton, {
+            }, [ this.$slots["menu-left-prefix"]?.(slotProps), options.addBtn && vue.createVNode(elementPlus.ElButton, {
                 type: "primary",
                 size: options.size,
                 onClick: () => {
@@ -3899,39 +3952,33 @@
                 size: options.size,
                 disabled: !multipleSelectionLength.value,
                 onClick: () => {
-                    const selection = vue.unref(vue.toRaw(multipleSelection.value.map((row => vue.toRaw(row)))));
+                    const selection = vue.unref(vue.toRaw(multipleSelection.value.map(row => vue.toRaw(row))));
                     elementPlus.ElMessageBox.confirm(t("next.table.message.batchDeleteTip"), t("next.table.message.tip"), {
                         type: "warning",
                         showClose: !1,
                         center: !1,
                         confirmButtonText: t("next.table.message.confirmButtonText"),
                         cancelButtonText: t("next.table.message.cancelButtonText")
-                    }).then((() => {
+                    }).then(() => {
                         this.$emit("deleteRows", selection);
-                    })).catch((() => {
+                    }).catch(() => {
                         elementPlus.ElMessage({
                             type: "info",
                             message: t("next.table.message.cancelBatchDelete")
                         });
-                    }));
+                    });
                 }
             }, {
                 icon: () => vue.createVNode(elementPlus.ElIcon, null, {
                     default: () => [ vue.createVNode(delete_default, null, null) ]
                 }),
                 default: () => t("next.table.batchDelete")
-            }), this.$slots["menu-left-suffix"]?.({
-                size: options.size
-            }) ]), vue.createVNode("div", {
+            }), this.$slots["menu-left-suffix"]?.(slotProps) ]), vue.createVNode("div", {
                 class: ns.b("header-menu-right")
-            }, [ this.$slots["menu-right-prefix"]?.({
-                size: options.size
-            }), options.refreshBtn && vue.createVNode(elementPlus.ElButton, {
+            }, [ this.$slots["menu-right-prefix"]?.(slotProps), options.refreshBtn && vue.createVNode(elementPlus.ElButton, {
                 circle: !0,
                 size: options.size,
-                onClick: () => {
-                    this.$emit("clickRefresh");
-                }
+                onClick: onClickRefresh
             }, {
                 icon: () => vue.createVNode(elementPlus.ElIcon, null, {
                     default: () => [ vue.createVNode(refresh_default, null, null) ]
@@ -3946,9 +3993,7 @@
                 icon: () => vue.createVNode(elementPlus.ElIcon, null, {
                     default: () => [ vue.createVNode(tools_default, null, null) ]
                 })
-            }), this.$slots["menu-right-suffix"]?.({
-                size: options.size
-            }) ]), vue.createVNode(DrawerSetting, {
+            }), this.$slots["menu-right-suffix"]?.(slotProps) ]), vue.createVNode(DrawerSetting, {
                 ref: drawerSettingRef
             }, null) ]);
         }
@@ -3963,28 +4008,28 @@
         },
         setup(props, {slots: slots}) {
             const columnSlots = vue.inject("columnSlots"), column_slots = {};
-            columnSlots.value.forEach((slotName => {
+            columnSlots.value.forEach(slotName => {
                 column_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, columnOption = props.columnOption, _dicKey = valueExist(columnOption.dicKey, "value"), _dicLabel = valueExist(columnOption.dicLabel, columnOption.treeSelectProps?.label, "label"), _separator = valueExist(columnOption.treeSelectProps?.separator, ","), _formatterColumnValue = (value, dicData) => {
                 if (Array.isArray(value)) {
                     const temp = [];
-                    return value.forEach((val => {
+                    return value.forEach(val => {
                         temp.push(_formatterColumnValue(val, dicData));
-                    })), temp.join(_separator);
+                    }), temp.join(_separator);
                 }
-                const item = dicData.find((o => o[_dicKey] == value));
+                const item = dicData.find(o => o[_dicKey] == value);
                 return item ? item[_dicLabel] : value;
             }, renderCustomItem = (row, $index) => {
                 const prop = columnOption.prop, _prop = prop?.replace(/\./g, "-");
-                if (columnOption.children?.length > 0) return vue.createVNode(vue.Fragment, null, [ columnOption.children.map((column => {
+                if (columnOption.children?.length > 0) return vue.createVNode(vue.Fragment, null, [ columnOption.children.map(column => {
                     return vue.createVNode(TableColumnDynamic, {
                         columnOption: column
                     }, "function" == typeof (s = column_slots) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? column_slots : {
                         default: () => [ column_slots ]
                     });
                     var s;
-                })) ]);
+                }) ]);
                 if (slots[columnSlotName(_prop)]) {
                     const btnCfg = {
                         text: options.operationsBtnText,
@@ -4001,7 +4046,7 @@
                 if (columnOption.dicData?.length > 0) {
                     const loopDicData = list => {
                         const temp = [];
-                        return list.forEach((node => {
+                        return list.forEach(node => {
                             const item = {
                                 ...node
                             };
@@ -4010,7 +4055,7 @@
                                 temp.push(...child), delete item.children;
                             }
                             temp.push(item);
-                        })), temp;
+                        }), temp;
                     }, mergeDicData = loopDicData(columnOption.dicData);
                     return vue.createVNode("span", null, [ _formatterColumnValue(row[prop], mergeDicData) ]);
                 }
@@ -4042,10 +4087,10 @@
         name: "TableColumnOperations",
         emits: [ "editRow", "viewRow", "deleteRow" ],
         setup(props, {emit: emit, slots: slots}) {
-            const _options = vue.inject("options"), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), operationsShowText = vue.computed((() => {
+            const _options = vue.inject("options"), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), operationsShowText = vue.computed(() => {
                 const {operationsBtnPlain: operationsBtnPlain, operationsBtnText: operationsBtnText} = options;
                 return operationsBtnText || operationsBtnPlain;
-            })), renderContent = () => {
+            }), renderContent = () => {
                 const btnText = options.operationsBtnText, btnPlain = options.operationsBtnPlain, btnSize = options.operationsBtnSize, btnCfg = {
                     text: btnText,
                     plain: btnPlain,
@@ -4125,14 +4170,14 @@
                                     center: !1,
                                     confirmButtonText: t("next.table.message.confirmButtonText"),
                                     cancelButtonText: t("next.table.message.cancelButtonText")
-                                }).then((() => {
+                                }).then(() => {
                                     emit("deleteRow", scoped);
-                                })).catch((() => {
+                                }).catch(() => {
                                     elementPlus.ElMessage({
                                         type: "info",
                                         message: t("next.table.message.cancelDelete")
                                     });
-                                }));
+                                });
                             })(scoped)
                         }, {
                             icon: () => vue.createVNode(elementPlus.ElIcon, null, {
@@ -4249,9 +4294,9 @@
         emits: [ "close" ],
         setup(props, {emit: emit, slots: slots}) {
             const visible = vue.ref(props.modelValue);
-            vue.watch((() => props.modelValue), (value => {
+            vue.watch(() => props.modelValue, value => {
                 visible.value = value;
-            }));
+            });
             const onClose = () => {
                 visible.value = !1, emit("close");
             }, isFullscreen = vue.ref(props.fullscreen);
@@ -4357,13 +4402,13 @@
             }, onChangeEnd = num => {
                 endNumber.value = num, emit("change", [ startNumber.value, endNumber.value ]);
             }, controls = vue.ref(!0), numberRangeRef = vue.ref();
-            vue.onMounted((() => {
+            vue.onMounted(() => {
                 const element = numberRangeRef.value;
-                elementResize(element, (el => {
+                elementResize(element, el => {
                     const width = el.clientWidth;
                     controls.value = width > 200;
-                }));
-            }));
+                });
+            });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: numberRangeRef,
                 class: ns$b.e("number-range")
@@ -4389,7 +4434,7 @@
         }
     });
     const NextDialog = withInstall(NextDialog$1);
-    function _isSlot$3(s) {
+    function _isSlot$4(s) {
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
     const ns$a = useNamespace("form"), InputTableSelect = vue.defineComponent({
@@ -4444,16 +4489,16 @@
                 },
                 data: []
             }), onConfirmSearch = searchParams => {
-                tableReactive.loading = !0, _options.loadData?.(searchParams, tableReactive.page, (res => {
+                tableReactive.loading = !0, _options.loadData?.(searchParams, tableReactive.page, res => {
                     tableReactive.data = res.data || [], tableReactive.page.total = res.total || 0, 
                     tableReactive.loading = !1;
-                }));
+                });
             }, multipleSelection = vue.ref([]), sinleSelection = vue.ref("");
-            _column.tableSelectDefaultValue?.(props.formParams, _column, (rows => {
+            _column.tableSelectDefaultValue?.(props.formParams, _column, rows => {
                 rows?.length && (_column.tableSelectRows = rows, multipleSelection.value = rows, 
                 sinleSelection.value = rows[0][propsValue]);
-            }));
-            const _disabledSelect = vue.computed((() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length)), onResetTableSelect = () => {
+            });
+            const _disabledSelect = vue.computed(() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length), onResetTableSelect = () => {
                 multipleSelection.value = [], sinleSelection.value = "";
             }, onConfirmSelect = () => {
                 const rows = vue.toRaw(multipleSelection.value), _rows = arrayObjNoRepeat(rows, propsValue);
@@ -4466,7 +4511,7 @@
                     value: value,
                     onChange: event => ((event, row) => {
                         if (event) multipleSelection.value.push(row); else {
-                            const index = multipleSelection.value.findIndex((o => o[propsValue] === row[propsValue]));
+                            const index = multipleSelection.value.findIndex(o => o[propsValue] === row[propsValue]);
                             -1 !== index && multipleSelection.value.splice(index, 1);
                         }
                     })(event, vue.toRaw(row))
@@ -4477,30 +4522,30 @@
                     }
                 }, null);
             }, tags = vue.ref([]), tagsMore = vue.ref([]), _updateTags = () => {
-                const rows = arrayObjNoRepeat(multipleSelection.value, propsValue).map((row => ({
+                const rows = arrayObjNoRepeat(multipleSelection.value, propsValue).map(row => ({
                     value: row[propsValue],
                     label: row[propsLabel]
-                })));
+                }));
                 rows.length > 1 ? (tags.value = rows.splice(0, 1), tagsMore.value = rows) : (tags.value = rows, 
                 tagsMore.value = []);
             };
-            vue.watch((() => _column.tableSelectRows), (() => {
+            vue.watch(() => _column.tableSelectRows, () => {
                 _updateTags();
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             });
             const _multipleSelection = vue.ref([]);
-            vue.watch((() => [ props.formParams[_column.prop], multipleSelection.value ]), (() => {
-                _multipleSelection.value = multipleSelection.value.map((o => o[propsValue])), _updateTags();
-            }), {
+            vue.watch(() => [ props.formParams[_column.prop], multipleSelection.value ], () => {
+                _multipleSelection.value = multipleSelection.value.map(o => o[propsValue]), _updateTags();
+            }, {
                 deep: !0,
                 immediate: !0
             });
             const _sinleSelection = vue.ref(null);
-            vue.watch((() => [ props.formParams[_column.prop], sinleSelection.value ]), (() => {
+            vue.watch(() => [ props.formParams[_column.prop], sinleSelection.value ], () => {
                 _sinleSelection.value = sinleSelection.value, _updateTags();
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             });
@@ -4516,12 +4561,12 @@
                     class: "el-input__wrapper"
                 }, [ tags?.value.length ? vue.createVNode("span", {
                     class: ns$a.em("input-table", "value")
-                }, [ tags.value.map(((tag, index) => vue.createVNode(elementPlus.ElTag, {
-                    closable: !_closable,
+                }, [ tags.value.map((tag, index) => vue.createVNode(elementPlus.ElTag, {
+                    closable: _closable,
                     onClose: () => _onCloseTag(0, index)
                 }, {
                     default: () => [ tag.label ]
-                }))), tagsMore?.value?.length ? vue.createVNode(elementPlus.ElTooltip, {
+                })), tagsMore?.value?.length ? vue.createVNode(elementPlus.ElTooltip, {
                     "popper-class": ns$a.e("tooltip-tags"),
                     placement: "bottom",
                     effect: "light"
@@ -4529,12 +4574,12 @@
                     default: () => vue.createVNode(elementPlus.ElTag, null, {
                         default: () => [ vue.createTextVNode("+ "), tagsMore.value.length ]
                     }),
-                    content: () => tagsMore.value.map(((tag, index) => vue.createVNode(elementPlus.ElTag, {
-                        closable: !_closable,
+                    content: () => tagsMore.value.map((tag, index) => vue.createVNode(elementPlus.ElTag, {
+                        closable: _closable,
                         onClose: () => _onCloseTag(0, index + 1)
                     }, {
                         default: () => [ tag.label ]
-                    })))
+                    }))
                 }) : null ]) : vue.createVNode("span", {
                     class: ns$a.em("input-table", "placeholder")
                 }, [ _placeholder ]) ]), vue.createVNode(elementPlus.ElButton, {
@@ -4603,13 +4648,13 @@
                         class: ns$a.em("input-table", "footer")
                     }, [ vue.createVNode(elementPlus.ElButton, {
                         onClick: onResetTableSelect
-                    }, _isSlot$3(_slot = t("next.form.reset")) ? _slot : {
+                    }, _isSlot$4(_slot = t("next.form.reset")) ? _slot : {
                         default: () => [ _slot ]
                     }), vue.createVNode(elementPlus.ElButton, {
                         type: "primary",
                         disabled: _disabledSelect.value,
                         onClick: onConfirmSelect
-                    }, _isSlot$3(_slot2 = t("next.form.confirm")) ? _slot2 : {
+                    }, _isSlot$4(_slot2 = t("next.form.confirm")) ? _slot2 : {
                         default: () => [ _slot2 ]
                     }) ]) ]
                 }) ]);
@@ -4671,7 +4716,7 @@
                 const value = this.defaultPreviewSrcList;
                 let urls = [];
                 return "string" == typeof value ? urls = [ value ] : "[object Array]" === Object.prototype.toString.call(value) && (urls = value), 
-                urls = urls.filter((url => !!url)), urls.length ? vue.createVNode(elementPlus.ElImage, {
+                urls = urls.filter(url => !!url), urls.length ? vue.createVNode(elementPlus.ElImage, {
                     class: ns$9.e("preview-image"),
                     src: urls[0],
                     previewSrcList: urls,
@@ -4694,7 +4739,7 @@
                 limit: props.limit,
                 "auto-upload": !1,
                 "on-preview": uploadFile => {
-                    const body = document.getElementsByTagName("body")[0], initial = uploadfilesPreview.value.findIndex((file => file.url === uploadFile.url)) || 0;
+                    const body = document.getElementsByTagName("body")[0], initial = uploadfilesPreview.value.findIndex(file => file.url === uploadFile.url) || 0;
                     previewImagesContainer && (vue.render(null, previewImagesContainer), body.removeChild(previewImagesContainer)), 
                     previewImagesContainer = document.createElement("div"), body.appendChild(previewImagesContainer);
                     const previewComponent = vue.createVNode({
@@ -4702,7 +4747,7 @@
                             to: "body"
                         }, [ vue.h(elementPlus.ElImageViewer, {
                             initialIndex: initial,
-                            "url-list": uploadfilesPreview.value.map((file => file.url)),
+                            "url-list": uploadfilesPreview.value.map(file => file.url),
                             onClose: () => {
                                 vue.render(null, previewImagesContainer);
                             }
@@ -4756,9 +4801,9 @@
         emits: [ "change", "node-click", "node-contextmenu", "check", "check-change", "node-expand", "node-collapse", "current-change" ],
         setup(props, {emit: emit, expose: expose}) {
             const {t: t} = useLocale(), _modelValue = vue.ref(props.modelValue);
-            vue.watch((() => props.modelValue), (val => {
+            vue.watch(() => props.modelValue, val => {
                 _modelValue.value = val;
-            }));
+            });
             const _column = props.column, valueKey = valueExist(_column.treeSelectProps?.value, _column.nodeKey, "id"), _formParams = props.formParams, _defaultProps = {
                 label: "label",
                 children: "children"
@@ -4842,14 +4887,14 @@
         emits: [ "change", "clear", "expand-change", "visible-change", "remove-tag", "blur", "focus" ],
         setup(props, {emit: emit, expose: expose}) {
             const {t: t} = useLocale(), _modelValue = vue.ref(props.modelValue);
-            vue.watch((() => props.modelValue), (val => {
+            vue.watch(() => props.modelValue, val => {
                 _modelValue.value = val;
-            }));
+            });
             const _column = props.column, placeholder = _column.placeholder || t("next.form.select") + _column.label, _defaultProps = {
                 label: "label",
                 children: "children"
             }, onChange = val => {
-                const nodes = treeSelectRef.value.getCheckedNodes().map((item => item.data));
+                const nodes = treeSelectRef.value.getCheckedNodes().map(item => item.data);
                 props.formParams[_column.prop] = val, _modelValue.value = val, emit("change", val, nodes);
             }, treeSelectRef = vue.ref(), getInstance = () => treeSelectRef.value;
             _column.loadInstance && _column.loadInstance(getInstance()), expose({
@@ -4874,7 +4919,7 @@
             }, null) ]);
         }
     });
-    function _isSlot$2(s) {
+    function _isSlot$3(s) {
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
     const ns$8 = useNamespace("form");
@@ -4896,8 +4941,8 @@
         },
         emits: [ "submit", "close", "reset" ],
         setup(props, {slots: slots, emit: emit, expose: expose}) {
-            const _config = deepClone(defaultConfig$3), options = vue.reactive(merge(_config, props.options)), _isEditing = vue.computed((() => "boolean" != typeof options.isEditing || options.isEditing)), {t: t} = useLocale(), colSpan = vue.ref(options.colSpan), formDatum = vue.reactive(props.formDatum) || {}, formParams = vue.reactive(merge({}, formDatum)), _formColumns = vue.ref([]), formRules = vue.reactive({});
-            vue.watch((() => [ props.columns, props.formDatum ]), (() => {
+            const _config = deepClone(defaultConfig$3), options = vue.reactive(merge(_config, props.options)), _isEditing = vue.computed(() => "boolean" != typeof options.isEditing || options.isEditing), {t: t} = useLocale(), colSpan = vue.ref(options.colSpan), formDatum = vue.reactive(props.formDatum) || {}, formParams = vue.reactive(merge({}, formDatum)), _formColumns = vue.ref([]), formRules = vue.reactive({});
+            vue.watch(() => [ props.columns, props.formDatum ], () => {
                 (() => {
                     const columns = props.columns;
                     _formColumns.value = columns;
@@ -4910,41 +4955,41 @@
                             message: label + t("next.form.requiredInput"),
                             trigger: [ "blur", "change" ]
                         }), col.rules?.length && rules.push(...col.rules), formRules[col.prop] = rules, 
-                        !col.dicData?.length && col.loadDicData && col.loadDicData(col, (data => {
+                        !col.dicData?.length && col.loadDicData && col.loadDicData(col, data => {
                             data?.length && (col.dicData = data);
-                        }), formParams), "boolean" == typeof col.disabled && col.disabled || (col.disabled = !_isEditing.value);
+                        }, formParams), "boolean" == typeof col.disabled && col.disabled || (col.disabled = !_isEditing.value);
                     }
                 })();
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             });
             const formColumns = arrayObjNoRepeat(_formColumns.value, "prop"), spanResizeLoading = vue.ref(!1);
-            vue.onMounted((() => {
+            vue.onMounted(() => {
                 const formEl = ruleFormRef.value?.$el;
                 let timer = null;
-                elementResize(formEl, (el => {
-                    null !== timer ? clearTimeout(timer) : spanResizeLoading.value = !0, timer = setTimeout((() => {
+                elementResize(formEl, el => {
+                    null !== timer ? clearTimeout(timer) : spanResizeLoading.value = !0, timer = setTimeout(() => {
                         colSpan.value = ((el, minWidth = 350) => {
                             const el_width = el.clientWidth;
                             let span = Math.floor(el_width / minWidth);
                             return span > 4 && (span = 4), Math.ceil(24 / span);
                         })(el, options.columnMinWidth), spanResizeLoading.value = !1, clearTimeout(timer);
-                    }), 200);
-                }));
-            }));
+                    }, 200);
+                });
+            });
             const ruleFormRef = vue.ref(), submitLoading = vue.ref(!1), onSubmitAddEdit = async () => {
                 const formInstance = ruleFormRef.value;
-                formInstance && await formInstance.validate(((valid, fields) => {
+                formInstance && await formInstance.validate((valid, fields) => {
                     if (valid) {
                         const params = vue.toRaw(formParams);
-                        submitLoading.value = !0, emit("submit", params, (() => {
+                        submitLoading.value = !0, emit("submit", params, () => {
                             submitLoading.value = !1, emit("close");
-                        }), (() => {
+                        }, () => {
                             submitLoading.value = !1;
-                        }));
+                        });
                     } else console.error("error submit!", fields);
-                }));
+                });
             }, onResetForm = () => {
                 const formInstance = ruleFormRef.value;
                 formInstance && (formInstance.resetFields(), submitLoading.value = !1, emit("reset", formParams));
@@ -5094,12 +5139,12 @@
                         "collapse-tags-tooltip": !0,
                         onChange: event => col.onChange?.(event, col, formParams, formColumns)
                     }, {
-                        default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElOption, {
+                        default: () => [ col.dicData && col.dicData.map(item => vue.createVNode(elementPlus.ElOption, {
                             key: item.value,
                             value: item.value,
                             label: item.label,
                             disabled: valueExist(item.disabled, !1)
-                        }, null))) ]
+                        }, null)) ]
                     });
                 }
                 if ("time" === col.type) {
@@ -5128,13 +5173,13 @@
                     readonly: valueExist(col.readonly, !1),
                     onChange: event => col.onChange?.(event, col, formParams, formColumns)
                 }, {
-                    default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElRadio, {
+                    default: () => [ col.dicData && col.dicData.map(item => vue.createVNode(elementPlus.ElRadio, {
                         key: item.value,
                         value: item.value,
                         disabled: valueExist(item.disabled, !1)
                     }, {
                         default: () => [ item.label ]
-                    }))) ]
+                    })) ]
                 });
                 if ("checkbox" === col.type) return isValueExist(formParams[col.prop]) || (formParams[col.prop] = []), 
                 vue.createVNode(elementPlus.ElCheckboxGroup, {
@@ -5144,13 +5189,13 @@
                     readonly: valueExist(col.readonly, !1),
                     onChange: event => col.onChange?.(event, col, formParams, formColumns)
                 }, {
-                    default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElCheckbox, {
+                    default: () => [ col.dicData && col.dicData.map(item => vue.createVNode(elementPlus.ElCheckbox, {
                         key: item.value,
                         label: item.value,
                         disabled: valueExist(item.disabled, !1)
                     }, {
                         default: () => [ item.label ]
-                    }))) ]
+                    })) ]
                 });
                 if ("date" === col.type) {
                     const placeholder = col.placeholder || t("next.form.select") + col.label;
@@ -5249,10 +5294,10 @@
                         onSelect: rows => ((rows, col) => {
                             rows && (col.tableSelectRows = rows);
                             const {value: value} = col.tableSelectProps || {};
-                            formParams[col.prop] = rows.map((row => row[value || "value"])), col.onTableSelect?.(formParams, rows, col), 
+                            formParams[col.prop] = rows.map(row => row[value || "value"]), col.onTableSelect?.(formParams, rows, col), 
                             ruleFormRef.value?.validateField(col.prop);
                         })(rows, col)
-                    }, _isSlot$2(_slots) ? _slots : {
+                    }, _isSlot$3(_slots) ? _slots : {
                         default: () => [ _slots ]
                     });
                 }
@@ -5291,19 +5336,20 @@
                 let _slot2;
                 return vue.createVNode(NextSpinLoading, {
                     loading: spanResizeLoading.value
-                }, _isSlot$2(_slot2 = (() => {
+                }, _isSlot$3(_slot2 = (() => {
                     let _slot;
                     return vue.createVNode(elementPlus.ElForm, {
                         ref: ruleFormRef,
                         class: ns$8.b(),
                         inline: !1,
                         model: formParams,
-                        size: options.size
+                        size: options.size,
+                        "label-position": valueExist(options.labelPosition, "left")
                     }, {
                         default: () => [ vue.createVNode(elementPlus.ElRow, {
                             gutter: 20
-                        }, _isSlot$2(_slot = formColumns.map((column => !column.hide && vue.createVNode(elementPlus.ElCol, {
-                            span: valueExist(column.span, colSpan.value)
+                        }, _isSlot$3(_slot = formColumns.map(column => !column.hide && vue.createVNode(elementPlus.ElCol, {
+                            span: valueExist(options.colSpanFixed, column.span, colSpan.value)
                         }, {
                             default: () => [ vue.createVNode(elementPlus.ElFormItem, {
                                 prop: column.prop,
@@ -5330,7 +5376,7 @@
                                 }) : null ]) : null,
                                 default: () => renderFormItem(column)
                             }) ]
-                        })))) ? _slot : {
+                        }))) ? _slot : {
                             default: () => [ _slot ]
                         }), _isEditing.value && options.showFooter ? vue.createVNode("div", {
                             class: ns$8.e("footer")
@@ -5372,13 +5418,13 @@
         emits: [ "close", "submit" ],
         setup(props, {slots: slots, emit: emit, expose: expose}) {
             const addEditFormSlots = vue.inject("addEditFormSlots"), form_slots = {};
-            addEditFormSlots.value.forEach((slotName => {
+            addEditFormSlots.value.forEach(slotName => {
                 form_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const _options = vue.inject("options", {}), options = deepClone(vue.isRef(_options) ? vue.unref(_options) : _options);
             options.columnMinWidth = options.formColumnMinWidth, options.isEditing = props.isEditing;
-            const formRef = vue.ref(), formDatum = deepClone(vue.isRef(props.formDatum) ? vue.unref(props.formDatum) : props.formDatum), _columns = deepClone(props.columns).map((col => (col.hide = valueExist(col.formHide, col.hide, !1), 
-            col))), onSubmit = (...arg) => {
+            const formRef = vue.ref(), formDatum = deepClone(vue.isRef(props.formDatum) ? vue.unref(props.formDatum) : props.formDatum), _columns = deepClone(props.columns).map(col => (col.hide = valueExist(col.formHide, col.hide, !1), 
+            col)), onSubmit = (...arg) => {
                 emit("submit", ...arg);
             };
             expose({
@@ -5403,7 +5449,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
-    function _isSlot(s) {
+    function _isSlot$1(s) {
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
     const ns$7 = useNamespace("crud-table");
@@ -5412,25 +5458,25 @@
         props: defaultPropsConfig,
         emits: [ "confirm-search", "clear-search", "change-pagination", "selection-change", "row-click", "row-contextmenu", "row-dblclick", "cell-click", "cell-dblclick", "cell-contextmenu", "cell-mouse-enter", "cell-mouse-leave", "expand-change", "click-add-edit", "close-add-edit", "view-add-edit", "delete-rows", "delete-row", "submit-form" ],
         setup(props, {emit: emit, slots: slots, expose: expose}) {
-            const _config = deepClone(defaultConfig$4), _options = vue.computed((() => {
+            const _config = deepClone(defaultConfig$4), _options = vue.computed(() => {
                 const cfg = vue.unref(props.options);
                 return merge(_config, cfg);
-            })), options = vue.unref(_options);
-            vue.provide("options", vue.computed((() => _options.value))), vue.provide("ns", ns$7);
+            }), options = vue.unref(_options);
+            vue.provide("options", vue.computed(() => _options.value)), vue.provide("ns", ns$7);
             const {t: t} = useLocale(), _columns = vue.ref(options.columns), _searchColumns = vue.ref([]), _formColumns = vue.ref([]), _updateColumnsAll = ops => {
                 ((options, cb) => {
                     const _columns = vue.reactive(options.columns), _loadDicData = col => {
-                        !col.dicData?.length && col.loadDicData && col.loadDicData(col, (data => {
+                        !col.dicData?.length && col.loadDicData && col.loadDicData(col, data => {
                             data?.length && (col.dicData = data);
-                        }));
+                        });
                     }, loopTableColumns = list => {
                         let cols = [];
-                        return list.forEach((col => {
+                        return list.forEach(col => {
                             _loadDicData(col), cols.push(col), col.children?.length && (cols.push(...loopTableColumns(col.children)), 
                             col.children && delete col.children);
-                        })), cols;
-                    }, evenTableColumns = loopTableColumns(_columns), formColumns = options.formColumns.map((col => (_loadDicData(col), 
-                    col))), _formColumns = evenTableColumns.concat(formColumns).map((col => {
+                        }), cols;
+                    }, evenTableColumns = loopTableColumns(_columns), formColumns = options.formColumns.map(col => (_loadDicData(col), 
+                    col)), _formColumns = evenTableColumns.concat(formColumns).map(col => {
                         const item = {
                             prop: col.prop,
                             label: valueExist(col.formLabel, col.label, ""),
@@ -5480,7 +5526,7 @@
                         };
                         return !col.dicData?.length && col.loadDicData && shareObjectProperty(item, col, "dicData"), 
                         item;
-                    })).filter((o => o.sort && o.prop)).sort(((a, b) => a.sort - b.sort)), _formatSearchColumn = (col, index) => {
+                    }).filter(o => o.sort && o.prop).sort((a, b) => a.sort - b.sort), _formatSearchColumn = (col, index) => {
                         const item = {
                             prop: col.prop,
                             type: valueExist(col.searchType, col.type),
@@ -5517,21 +5563,21 @@
                         };
                         return !col.dicData?.length && col.loadDicData && shareObjectProperty(item, col, "dicData"), 
                         item;
-                    }, initSearchColumns = options.searchColumns.map(((col, index) => (_loadDicData(col), 
-                    _formatSearchColumn(col, index)))), initSearchColumnsLength = initSearchColumns.length, mergeSearchColumns = initSearchColumns.concat((list => {
+                    }, initSearchColumns = options.searchColumns.map((col, index) => (_loadDicData(col), 
+                    _formatSearchColumn(col, index))), initSearchColumnsLength = initSearchColumns.length, mergeSearchColumns = initSearchColumns.concat((list => {
                         let cols = [];
-                        return list.forEach(((col, index) => {
+                        return list.forEach((col, index) => {
                             col.searchType && cols.push(_formatSearchColumn(col, index + initSearchColumnsLength));
-                        })), cols;
-                    })(evenTableColumns)), _searchColumns = arrayObjNoRepeat(mergeSearchColumns.sort(((a, b) => a.sort - b.sort)), "prop");
+                        }), cols;
+                    })(evenTableColumns)), _searchColumns = arrayObjNoRepeat(mergeSearchColumns.sort((a, b) => a.sort - b.sort), "prop");
                     cb && cb({
                         formColumns: _formColumns,
                         searchColumns: _searchColumns,
                         columns: _columns
                     });
-                })(ops, (({formColumns: formColumns, searchColumns: searchColumns, columns: columns}) => {
+                })(ops, ({formColumns: formColumns, searchColumns: searchColumns, columns: columns}) => {
                     _searchColumns.value = searchColumns, _formColumns.value = formColumns, _columns.value = columns;
-                }));
+                });
             }, tableData = vue.ref(props.data), _searchFormParams = vue.ref((() => {
                 const list = _searchColumns.value;
                 let params = {};
@@ -5549,33 +5595,33 @@
             }, onClickRefresh = () => {
                 onConfirmSearch(_searchFormParams.value);
             };
-            vue.watch((() => props.data), (list => {
+            vue.watch(() => props.data, list => {
                 tableData.value = list;
-            }), {
+            }, {
                 immediate: !0
-            }), vue.watch((() => _options), (ops => {
+            }), vue.watch(() => _options, ops => {
                 _updateColumnsAll(ops.value);
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             });
             const tableContentHeight = vue.ref(options.defaultContentHeight), crudTableRef = vue.ref(), headerRef = vue.ref(), tableRef = vue.ref(), footerRef = vue.ref(), addEditFormRef = vue.ref(null), updateTableContentHeight = () => {
-                vue.nextTick((() => {
+                vue.nextTick(() => {
                     const contentHeight = (crudTableRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
                     tableContentHeight.value = contentHeight;
-                }));
+                });
             }, fullscreenChangeListener = event => {
                 "F11" !== event.key && "fullscreenchange" !== event.type || updateTableContentHeight();
             };
-            vue.onMounted((() => {
-                elementResize(crudTableRef.value, (() => {
+            vue.onMounted(() => {
+                elementResize(crudTableRef.value, () => {
                     updateTableContentHeight();
-                })), options.initLoadData && onConfirmSearch(_searchFormParams.value), options.fullscreenchangeContentHeight && (document.addEventListener("fullscreenchange", fullscreenChangeListener), 
+                }), options.initLoadData && onConfirmSearch(_searchFormParams.value), options.fullscreenchangeContentHeight && (document.addEventListener("fullscreenchange", fullscreenChangeListener), 
                 document.addEventListener("keydown", fullscreenChangeListener));
-            })), vue.onUnmounted((() => {
+            }), vue.onUnmounted(() => {
                 options.fullscreenchangeContentHeight && (document.removeEventListener("fullscreenchange", fullscreenChangeListener), 
                 document.removeEventListener("keydown", fullscreenChangeListener));
-            }));
+            });
             const onChangePagination = page => {
                 props.page.pageIndex = page.pageIndex, props.page.pageSize = page.pageSize, emit("change-pagination", page), 
                 onConfirmSearch(_searchFormParams.value);
@@ -5591,30 +5637,30 @@
             }), onClickHeaderAdd = (row = {}) => {
                 const {dialogTitle: dialogTitle} = options;
                 addEditDialog.isEditing = !0, addEditDialog.title = dialogTitle + " " + t("next.table.add"), 
-                addEditDialog.rowInfo = row, emit("click-add-edit", row, options), vue.nextTick((() => {
+                addEditDialog.rowInfo = row, emit("click-add-edit", row, options), vue.nextTick(() => {
                     addEditDialog.visible = !0;
-                }));
+                });
             }, onClickDeleteRows = rows => {
-                emit("delete-rows", rows, (() => {
+                emit("delete-rows", rows, () => {
                     onClickRefresh();
-                }));
+                });
             }, onClickDeleteRow = scoped => {
-                emit("delete-row", scoped, (() => {
+                emit("delete-row", scoped, () => {
                     onClickRefresh();
-                }));
+                });
             }, onClickRowEdit = scoped => {
                 const {dialogTitle: dialogTitle} = options;
                 addEditDialog.isEditing = !0, addEditDialog.title = dialogTitle + " " + t("next.table.edit"), 
                 addEditDialog.rowInfo = scoped.row, emit("click-add-edit", scoped.row, options), 
-                vue.nextTick((() => {
+                vue.nextTick(() => {
                     addEditDialog.visible = !0;
-                }));
+                });
             }, onClickRowView = scoped => {
                 const {dialogTitle: dialogTitle} = options;
                 addEditDialog.isEditing = !1, addEditDialog.title = dialogTitle + " " + t("next.table.view"), 
-                addEditDialog.rowInfo = scoped.row, emit("view-add-edit", scoped.row), vue.nextTick((() => {
+                addEditDialog.rowInfo = scoped.row, emit("view-add-edit", scoped.row), vue.nextTick(() => {
                     addEditDialog.visible = !0;
-                }));
+                });
             }, onCloseAddEditDialog = () => {
                 addEditDialog.visible = !1, addEditDialog.title = "", addEditDialog.rowInfo = {}, 
                 emit("close-add-edit");
@@ -5627,31 +5673,31 @@
             const _customRowIndex = index => {
                 const {pageIndex: pageIndex, pageSize: pageSize} = props.page;
                 return (pageIndex - 1) * pageSize + (index + 1);
-            }, _sortNumberMinWidth = vue.computed((() => {
+            }, _sortNumberMinWidth = vue.computed(() => {
                 const {total: total} = props.page, tempElement = document.createElement("span");
                 tempElement.innerText = total, tempElement.style.visibility = "hidden", document.body.appendChild(tempElement);
                 const width = tempElement.getBoundingClientRect().width, minWidth = Math.ceil(width) + 25;
                 return document.body.removeChild(tempElement), minWidth > 50 ? minWidth : 50;
-            })), searchFrom_slots = {};
-            searchFormSlots.value.forEach((slotName => {
+            }), searchFrom_slots = {};
+            searchFormSlots.value.forEach(slotName => {
                 searchFrom_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const column_slots = {};
-            columnSlots.value.forEach((slotName => {
+            columnSlots.value.forEach(slotName => {
                 column_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const addEditForm_slots = {};
-            addEditFormSlots.value.forEach((slotName => {
+            addEditFormSlots.value.forEach(slotName => {
                 addEditForm_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const headerMenu_solts = {};
-            header_menu_slots_key.forEach((slotName => {
+            header_menu_slots_key.forEach(slotName => {
                 headerMenu_solts[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             const operation_column_slots = {};
-            operation_column_slots_key.forEach((slotName => {
+            operation_column_slots_key.forEach(slotName => {
                 operation_column_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-            }));
+            });
             expose({
                 onClickRowAdd: onClickHeaderAdd,
                 columns: _columns.value,
@@ -5676,13 +5722,13 @@
                 onZoomResize: updateTableContentHeight,
                 onConfirmSearch: onConfirmSearch,
                 onClearSearch: onClearSearch
-            }, _isSlot(searchFrom_slots) ? searchFrom_slots : {
+            }, _isSlot$1(searchFrom_slots) ? searchFrom_slots : {
                 default: () => [ searchFrom_slots ]
             }), options.showHeaderMenu && vue.createVNode(HeaderMenu, {
                 onClickAdd: onClickHeaderAdd,
                 onDeleteRows: onClickDeleteRows,
                 onClickRefresh: onClickRefresh
-            }, _isSlot(headerMenu_solts) ? headerMenu_solts : {
+            }, _isSlot$1(headerMenu_solts) ? headerMenu_solts : {
                 default: () => [ headerMenu_solts ]
             }), slots["table-head-tip"]?.() ]) : null, vue.createVNode(NextSpinLoading$1, {
                 loading: props.loading
@@ -5733,16 +5779,16 @@
                         fixed: "left",
                         headerAlign: options.headerAlign,
                         align: options.cellAlign
-                    }, null) : null, slots.default?.(), _columns.value.map((col => vue.createVNode(TableColumnDynamic, {
+                    }, null) : null, slots.default?.(), _columns.value.map(col => vue.createVNode(TableColumnDynamic, {
                         columnOption: col,
                         key: col.prop
-                    }, _isSlot(column_slots) ? column_slots : {
+                    }, _isSlot$1(column_slots) ? column_slots : {
                         default: () => [ column_slots ]
-                    }))), options.operations ? vue.createVNode(TableColumnOperations, {
+                    })), options.operations ? vue.createVNode(TableColumnOperations, {
                         onEditRow: onClickRowEdit,
                         onViewRow: onClickRowView,
                         onDeleteRow: onClickDeleteRow
-                    }, _isSlot(operation_column_slots) ? operation_column_slots : {
+                    }, _isSlot$1(operation_column_slots) ? operation_column_slots : {
                         default: () => [ operation_column_slots ]
                     }) : null ],
                     empty: () => vue.createVNode(elementPlus.ElEmpty, {
@@ -5772,7 +5818,7 @@
                     isEditing: addEditDialog.isEditing,
                     onClose: onCloseAddEditDialog,
                     onSubmit: onSubmitAddEditDialog
-                }, _isSlot(addEditForm_slots) ? addEditForm_slots : {
+                }, _isSlot$1(addEditForm_slots) ? addEditForm_slots : {
                     default: () => [ addEditForm_slots ]
                 })
             }) ]) ]) ]);
@@ -5814,11 +5860,11 @@
         name: "NextCrudTableVirtualized",
         props: propsConfig,
         setup(props, {emit: emit}) {
-            const _config = deepClone(defaultConfig$2), _options = vue.computed((() => {
+            const _config = deepClone(defaultConfig$2), _options = vue.computed(() => {
                 const cfg = vue.unref(props.options);
                 return merge(_config, cfg);
-            })), options = vue.unref(_options);
-            vue.provide("options", vue.computed((() => _options.value)));
+            }), options = vue.unref(_options);
+            vue.provide("options", vue.computed(() => _options.value));
             const {t: t} = useLocale(), addEditDialog = vue.reactive({
                 visible: !1,
                 title: t("next.table.add"),
@@ -5879,7 +5925,7 @@
                 "list-type": props.listType,
                 "auto-upload": !1,
                 "on-preview": uploadFile => {
-                    const initial = uploadfilesPreview.value.findIndex((file => file.url === uploadFile.url)) || 0;
+                    const initial = uploadfilesPreview.value.findIndex(file => file.url === uploadFile.url) || 0;
                     previewImagesContainer && (vue.render(null, previewImagesContainer), body.removeChild(previewImagesContainer)), 
                     previewImagesContainer = document.createElement("div"), body.appendChild(previewImagesContainer);
                     const previewComponent = vue.createVNode({
@@ -5887,7 +5933,7 @@
                             to: "body"
                         }, [ vue.h(elementPlus.ElImageViewer, {
                             initialIndex: initial,
-                            "url-list": uploadfilesPreview.value.map((file => file.url)),
+                            "url-list": uploadfilesPreview.value.map(file => file.url),
                             onClose: () => {
                                 vue.render(null, previewImagesContainer);
                             }
@@ -5941,13 +5987,17 @@
                 type: Boolean,
                 default: !0
             },
+            tf: {
+                type: Object,
+                default: null
+            },
             tensorflow: {
                 type: Object
             }
         },
         emits: [ "loaded", "play", "error", "detector" ],
         setup(props, {emit: emit, expose: expose}) {
-            const {lang: lang} = useLocale(), localeLang = {
+            const _tf = props.tf || window.tf, {lang: lang} = useLocale(), localeLang = {
                 "zh-cn": zhCN,
                 en: En,
                 "zh-tw": zhTW
@@ -5980,34 +6030,35 @@
                         default: () => vue.h(camera_default)
                     }) ])
                 });
-                player.value.on("loadedmetadata", (() => {
+                player.value.on("loadedmetadata", () => {
                     vue.render(screenshotBtn, container);
-                }));
+                });
             }, _loadModelDetectFrame = (container, video) => {
                 if (!props.tensorflow) return;
+                if (!_tf) throw new Error("请先引入 @tensorflow/tfjs 模块！");
                 const {modelUrl: modelUrl, classNames: classNames} = props.tensorflow;
                 if (!modelUrl) throw new Error("模型文件地址不能未空！");
                 if (!classNames || !classNames.length) throw new Error("模型类别不能未空！");
-                container.innerHTML = "", tf__namespace.loadGraphModel(modelUrl).then((model => {
+                container.innerHTML = "", _tf?.loadGraphModel(modelUrl).then(model => {
                     const canvas = document.createElement("canvas");
                     canvas.className = ns$4.b("recongition"), container.appendChild(canvas);
                     const ctx = canvas.getContext("2d"), detect_ctx = document.createElement("canvas").getContext("2d");
                     video.ontimeupdate = () => {
                         const {videoWidth: videoWidth, videoHeight: videoHeight, offsetTop: offsetTop, offsetLeft: offsetLeft} = video;
                         canvas.width = videoWidth, canvas.height = videoHeight, canvas.style.top = offsetTop + "px", 
-                        canvas.style.left = offsetLeft + "px", detectVideoFrame(video, model, ctx, tf__namespace, classNames, [], detect_ctx);
+                        canvas.style.left = offsetLeft + "px", detectVideoFrame(video, model, ctx, _tf, classNames, [], detect_ctx);
                     }, modelRef.value = model, detectFrameCanvas.value = canvas;
-                }));
+                });
             };
-            vue.onUnmounted((() => {
-                modelRef.value && (tf__namespace.dispose(), modelRef.value.dispose(), modelRef.value = null), 
+            vue.onUnmounted(() => {
+                modelRef.value && (_tf?.dispose(), modelRef.value.dispose(), modelRef.value = null), 
                 player.value && (player.value.mse && (player.value.mse.endOfStream(), player.value.mse.unload(), 
                 player.value.mse = null), player.value.pause(), player.value.dispose(), player.value = null), 
                 playerFlv.value && (playerFlv.value.pause(), playerFlv.value.unload(), playerFlv.value.detachMediaElement(), 
                 playerFlv.value.destroy(), playerFlv.value = null), playerMpgets.value && (playerMpgets.value.pause(), 
                 playerMpgets.value.unload(), playerMpgets.value.detachMediaElement(), playerMpgets.value.destroy(), 
                 playerMpgets.value = null), videoBoxRef.value && vue.render(null, videoBoxRef.value);
-            }));
+            });
             const switchVideo = url => {
                 if (!url) return (() => {
                     const container = videoBoxRef.value, video = document.createElement("video");
@@ -6022,9 +6073,9 @@
                         sources: []
                     });
                     const canvasContainer = document.createElement("div");
-                    container.children[0].appendChild(canvasContainer), player.value.on("play", (() => {
+                    container.children[0].appendChild(canvasContainer), player.value.on("play", () => {
                         emit("play", video, container), _loadModelDetectFrame(canvasContainer, video);
-                    })), _createScreenshotBtn(container), emit("loaded", {
+                    }), _createScreenshotBtn(container), emit("loaded", {
                         player: player.value,
                         video: video
                     });
@@ -6053,9 +6104,9 @@
                     };
                     player.value = videojs(video, options);
                     const canvasContainer = document.createElement("div");
-                    container.children[0].appendChild(canvasContainer), player.value.on("play", (() => {
+                    container.children[0].appendChild(canvasContainer), player.value.on("play", () => {
                         emit("play", video, container), _loadModelDetectFrame(canvasContainer, video);
-                    })), _createScreenshotBtn(container), emit("loaded", {
+                    }), _createScreenshotBtn(container), emit("loaded", {
                         player: player.value,
                         video: video
                     });
@@ -6076,9 +6127,9 @@
                     };
                     player.value = videojs(video, options);
                     const canvasContainer = document.createElement("div");
-                    container.children[0].appendChild(canvasContainer), player.value.on("play", (() => {
+                    container.children[0].appendChild(canvasContainer), player.value.on("play", () => {
                         emit("play", video, container), _loadModelDetectFrame(canvasContainer, video);
-                    })), _createScreenshotBtn(container), emit("loaded", {
+                    }), _createScreenshotBtn(container), emit("loaded", {
                         player: player.value,
                         video: video
                     });
@@ -6102,13 +6153,13 @@
                             type: "flv",
                             isLive: !0,
                             url: url
-                        }), playerMpgets.value.attachMediaElement(video), playerMpgets.value.load(), playerMpgets.value.on("error", (() => {
+                        }), playerMpgets.value.attachMediaElement(video), playerMpgets.value.load(), playerMpgets.value.on("error", () => {
                             emit("error", video);
-                        })), _createScreenshotBtn(container);
+                        }), _createScreenshotBtn(container);
                         const canvasContainer = document.createElement("div");
-                        container.children[0].appendChild(canvasContainer), playerMpgets.value.on("metadata_arrived", (() => {
+                        container.children[0].appendChild(canvasContainer), playerMpgets.value.on("metadata_arrived", () => {
                             emit("play", video, container), _loadModelDetectFrame(canvasContainer, video);
-                        })), emit("loaded", {
+                        }), emit("loaded", {
                             player: player.value,
                             video: video
                         });
@@ -6136,19 +6187,19 @@
                         url: url
                     }), playerFlv.value.attachMediaElement(video), playerFlv.value.load());
                     const canvasContainer = document.createElement("div");
-                    container.children[0].appendChild(canvasContainer), player.value.on("play", (() => {
+                    container.children[0].appendChild(canvasContainer), player.value.on("play", () => {
                         emit("play", video, container), _loadModelDetectFrame(canvasContainer, video);
-                    })), _createScreenshotBtn(container), emit("loaded", {
+                    }), _createScreenshotBtn(container), emit("loaded", {
                         player: player.value,
                         video: video
                     });
                 })(url);
             };
-            vue.onMounted((() => {
-                vue.nextTick((() => {
+            vue.onMounted(() => {
+                vue.nextTick(() => {
                     switchVideo(videoSrc);
-                }));
-            }));
+                });
+            });
             expose({
                 getElement: () => {
                     const container = videoBoxRef.value, palyerContainer = container.children[0];
@@ -6336,7 +6387,7 @@
             canvasHeight: canvasHeight
         };
     };
-    var ContextMenuLabel = vue.defineComponent({
+    var ContextMenuLabel$1 = vue.defineComponent({
         props: {
             labelRect: {
                 type: Object,
@@ -6358,10 +6409,10 @@
             }, onDelete = () => {
                 emit("delete", props.activateRect);
             }, activateIndex = vue.ref();
-            vue.watch((() => props.activateRect), (() => {
+            vue.watch(() => props.activateRect, () => {
                 const {type: type} = props.activateRect;
                 activateIndex.value = isValueExist(type) ? type : null;
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             });
@@ -6369,18 +6420,18 @@
                 width: 0,
                 height: 0
             });
-            vue.onMounted((() => {
+            vue.onMounted(() => {
                 const {clientWidth: clientWidth, clientHeight: clientHeight} = labelMenuRef.value;
                 labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
-            }));
-            const labelMenuRef = vue.ref(), labelStyleFixed = vue.computed((() => {
+            });
+            const labelMenuRef = vue.ref(), labelStyleFixed = vue.computed(() => {
                 const {left: left, top: top} = props.labelRect, height_diff = top + labelRectWidthHeight.value.height - window.innerHeight;
                 let y = top;
                 return height_diff > 0 && (y -= height_diff), {
                     top: y + "px",
                     left: left + "px"
                 };
-            })), renderContent = () => vue.createVNode("div", {
+            }), renderContent = () => vue.createVNode("div", {
                 ref: labelMenuRef,
                 class: [ ns.b("contextmenu-label") ],
                 style: labelStyleFixed.value
@@ -6395,7 +6446,7 @@
                 default: () => [ vue.createVNode(close_default, null, null) ]
             }) ]), vue.createVNode("ul", {
                 class: "label-main"
-            }, [ props.classes.map(((name, index) => vue.createVNode("li", {
+            }, [ props.classes.map((name, index) => vue.createVNode("li", {
                 key: index,
                 onClick: () => (index => {
                     activateIndex.value = index, emit("select", index);
@@ -6408,7 +6459,7 @@
                     "background-color": colors$1[index % colors$1.length]
                 },
                 class: "label-line"
-            }, null), vue.createVNode("span", null, [ name ]) ]))) ]), isValueExist(activateIndex.value) ? vue.createVNode("div", {
+            }, null), vue.createVNode("span", null, [ name ]) ])) ]), isValueExist(activateIndex.value) ? vue.createVNode("div", {
                 style: "margin: 10px auto 0"
             }, [ vue.createVNode(elementPlus.ElButton, {
                 icon: delete_default,
@@ -6458,12 +6509,12 @@
             });
         }
         notifyObservers(scale, offset) {
-            this.observers.forEach((listener => {
+            this.observers.forEach(listener => {
                 listener({
                     scale: scale,
                     ...offset
                 });
-            }));
+            });
         }
         changeZoom(callback) {
             this.observers.push(callback);
@@ -6619,12 +6670,12 @@
                     rect.value.rectWidth = newWidth;
                 }
             };
-            return vue.onMounted((() => {
+            return vue.onMounted(() => {
                 parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
                 document.addEventListener("mouseup", onMouseup);
-            })), vue.onUnmounted((() => {
+            }), vue.onUnmounted(() => {
                 document.removeEventListener("mousemove", onMousemove), document.removeEventListener("mouseup", onMouseup);
-            })), {
+            }), {
                 onMousedown: e => {
                     e.preventDefault(), isDraggle.value = !0, draggleOffset.value.diff_x = e.offsetX, 
                     draggleOffset.value.diff_y = e.offsetY;
@@ -6721,11 +6772,11 @@
                 const _labels = deepClone(labels.value);
                 let yolo_label = [];
                 return {
-                    rects: _labels.map((rect => {
+                    rects: _labels.map(rect => {
                         delete rect.typeName;
                         const label_rect = convertToLabel(rect);
                         return yolo_label.push(label_rect.join(" ")), vue.toRaw(rect);
-                    })),
+                    }),
                     label_txt: yolo_label.join("\n")
                 };
             }, setContainerWidthHeight = (canvasWidth, canvasHeight) => {
@@ -6761,11 +6812,11 @@
                                 originHeight: image.height
                             };
                         })(image);
-                        labels.value = ((rowInfo, originWidth, originHeight) => rowInfo.labels ? rowInfo.labels.map((rect => {
+                        labels.value = ((rowInfo, originWidth, originHeight) => rowInfo.labels ? rowInfo.labels.map(rect => {
                             const typeName = props.classes[rect.type];
                             return typeName && (rect.typeName = typeName), rect.originWidth || (rect.originWidth = originWidth), 
                             rect.originHeight || (rect.originHeight = originHeight), rect;
-                        })) : [])(rowInfo, originWidth, originHeight), image.style.width = canvasWidth + "px", 
+                        }) : [])(rowInfo, originWidth, originHeight), image.style.width = canvasWidth + "px", 
                         image.style.height = canvasHeight + "px", setContainerWidthHeight(canvasWidth, canvasHeight), 
                         labels.value = ((labels, canvasHeight) => {
                             let scale_rects = [];
@@ -6891,7 +6942,7 @@
                             canvas: canvasRectRef.value,
                             originWidth: originWidth,
                             originHeight: originHeight
-                        }, ((rect, {endX: endX, endY: endY}) => {
+                        }, (rect, {endX: endX, endY: endY}) => {
                             activate_add_label.value = rect;
                             const newRect = ((rect, scaleOffset) => {
                                 const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect, {scale: scale, x: x, y: y} = scaleOffset;
@@ -6907,51 +6958,51 @@
                                 };
                             })(rect, scaleTranslateManager.scaleTranslate.value);
                             drawBaseCanvas.value.addDrawRect(newRect), updateContextmenuLabelFixed(endX, endY, newRect);
-                        }), (() => {
+                        }, () => {
                             onCloseDraggableRectFixed();
-                        }));
+                        });
                         drawBaseCanvas.value.clearCanvasRect = clearCanvas, drawBaseCanvas.value.removeEventAll = removeEventAll, 
-                        canvasDragZoom.value = new CanvasSceneDragZoom(canvasBaseRef.value), canvasDragZoom.value.changeZoom((scaleOffset => {
+                        canvasDragZoom.value = new CanvasSceneDragZoom(canvasBaseRef.value), canvasDragZoom.value.changeZoom(scaleOffset => {
                             scaleTranslateManager.onChangeScaleTranslate(scaleOffset), drawBaseCanvas.value.updateLabels();
-                        }));
+                        });
                     }, image.onerror = () => {
                         loadingImage.value = !1;
                     };
                 }
-                canvasBaseRef.value.addEventListener("contextmenu", (e => {
+                canvasBaseRef.value.addEventListener("contextmenu", e => {
                     e.preventDefault();
                     const offsetX = e.offsetX, offsetY = e.offsetY, {scale: scale, x: x, y: y} = scaleTranslateManager.scaleTranslate.value, new_x = Math.floor((offsetX - x) / scale), new_y = Math.floor((offsetY - y) / scale), {hit_rect: hit_rect} = drawBaseCanvas.value.hitCanvasLabel(new_x, new_y);
-                    onCloseContentmenuLabel(), onCloseDraggableRectFixed(), hit_rect && vue.nextTick((() => {
+                    onCloseContentmenuLabel(), onCloseDraggableRectFixed(), hit_rect && vue.nextTick(() => {
                         updateContextmenuLabelFixed(offsetX, offsetY, hit_rect);
-                    }));
-                })), canvasBaseRef.value.addEventListener("click", (e => {
+                    });
+                }), canvasBaseRef.value.addEventListener("click", e => {
                     if (e.ctrlKey) return;
                     const offsetX = e.offsetX, offsetY = e.offsetY, {scale: scale, x: x, y: y} = scaleTranslateManager.scaleTranslate.value, new_x = Math.floor((offsetX - x) / scale), new_y = Math.floor((offsetY - y) / scale), {hit_rect: hit_rect, hit_index: hit_index, color: color} = drawBaseCanvas.value.hitCanvasLabel(new_x, new_y);
-                    onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && vue.nextTick((() => {
+                    onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && vue.nextTick(() => {
                         updateDraggableRectFixed(offsetX, offsetY, hit_rect, hit_index, color);
-                    }));
-                }));
+                    });
+                });
             };
-            vue.onMounted((() => {
-                vue.watch((() => props.rowInfo), (info => {
+            vue.onMounted(() => {
+                vue.watch(() => props.rowInfo, info => {
                     const rowInfo = vue.toRaw(info);
                     renderImageLabel(rowInfo);
-                }), {
+                }, {
                     deep: !0,
                     immediate: !0
-                }), vue.watch((() => props.classes), (() => {
+                }), vue.watch(() => props.classes, () => {
                     const rowInfo = vue.toRaw(props.rowInfo);
                     renderImageLabel(rowInfo);
-                })), vue.watch((() => props.contextClientHeight), (height => {
+                }), vue.watch(() => props.contextClientHeight, height => {
                     if (valueExist(height)) {
                         canvasMainRef.value.style.height = height + "px";
                         const rowInfo = vue.toRaw(props.rowInfo);
                         renderImageLabel(rowInfo);
                     }
-                }));
-            })), vue.onUnmounted((() => {
+                });
+            }), vue.onUnmounted(() => {
                 drawBaseCanvas.value.removeEventAll?.(), canvasDragZoom.value.destroy();
-            }));
+            });
             const contextmenuLabelFixed = vue.ref({
                 show: !1,
                 top: 0,
@@ -6967,7 +7018,7 @@
                 contextmenuLabelFixed.value.show = !1, contextmenuLabelFixed.value.top = 0, contextmenuLabelFixed.value.left = 0, 
                 contextmenuLabelFixed.value.activateRect = null, activate_add_label.value = null, 
                 drawBaseCanvas.value.updateLabels(), drawBaseCanvas.value.clearCanvasRect();
-            }, contextmenuLabelRect = vue.computed((() => {
+            }, contextmenuLabelRect = vue.computed(() => {
                 const {top: top, left: left, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = contextmenuLabelFixed.value;
                 return {
                     top: top,
@@ -6975,7 +7026,7 @@
                     canvasWidth: canvasWidth,
                     canvasHeight: canvasHeight
                 };
-            })), draggableRectFixed = vue.ref({
+            }), draggableRectFixed = vue.ref({
                 show: !1,
                 top: 0,
                 left: 0,
@@ -6995,27 +7046,27 @@
                 draggableRectFixed.value.activateIndex = null, draggableRectFixed.value.color = null;
             }, onDraggleRectResize = rect => {
                 draggableRectFixed.value.activateRect = rect;
-                const i = labels.value.findIndex((o => isEqual(o, rect)));
+                const i = labels.value.findIndex(o => isEqual(o, rect));
                 i > -1 && labels.value.splice(i, 1, rect), drawBaseCanvas.value.updateLabels();
                 const {rects: rects, label_txt: label_txt} = formatLabelsType();
                 _emit("change", rects, label_txt), emit("change", rects, label_txt);
             }, onContextmenuDraggable = (e, rect) => {
                 e.preventDefault();
                 const rect_x = e.offsetX, rect_y = e.offsetY, x = rect_x + rect.startX, y = rect_y + rect.startY;
-                onCloseContentmenuLabel(), vue.nextTick((() => {
+                onCloseContentmenuLabel(), vue.nextTick(() => {
                     updateContextmenuLabelFixed(x, y, rect);
-                }));
+                });
             }, activate_add_label = vue.ref(), onSelectLabel = type => {
                 activate_add_label.value.type = type;
                 const typeName = props.classes[type];
                 typeName && (activate_add_label.value.typeName = typeName);
-                const i = labels.value.findIndex((o => isEqual(o, activate_add_label.value)));
+                const i = labels.value.findIndex(o => isEqual(o, activate_add_label.value));
                 i > -1 ? labels.value.splice(i, 1, activate_add_label.value) : labels.value.push(activate_add_label.value), 
                 onCloseContentmenuLabel();
                 const {rects: rects, label_txt: label_txt} = formatLabelsType();
                 _emit("change", rects, label_txt), emit("change", rects, label_txt);
             }, onDeleteLabel = rect => {
-                const i = labels.value.findIndex((o => isEqual(o, rect)));
+                const i = labels.value.findIndex(o => isEqual(o, rect));
                 labels.value.splice(i, 1), onCloseContentmenuLabel(), onCloseDraggableRectFixed(), 
                 drawBaseCanvas.value.updateLabels();
                 const {rects: rects, label_txt: label_txt} = formatLabelsType();
@@ -7025,18 +7076,18 @@
                 onCloseDraggableRectFixed: onCloseDraggableRectFixed,
                 onCloseContentmenuLabel: onCloseContentmenuLabel,
                 onSelectedLabel: (rect, index) => {
-                    onCloseDraggableRectFixed(), vue.nextTick((() => {
+                    onCloseDraggableRectFixed(), vue.nextTick(() => {
                         const {startX: x, startY: y, type: type} = rect, color = colors$1[type];
                         updateDraggableRectFixed(x, y, labels.value[index], index, color);
-                    }));
+                    });
                 },
                 onDeleteLabel: onDeleteLabel,
                 rerenderImage: () => {
                     setContainerWidthHeight(0, 0), onCloseContentmenuLabel(), onCloseDraggableRectFixed(), 
-                    vue.nextTick((() => {
+                    vue.nextTick(() => {
                         const rowInfo = vue.toRaw(props.rowInfo);
                         renderImageLabel(rowInfo);
-                    }));
+                    });
                 },
                 resetScaleOffset: () => {
                     canvasDragZoom.value.reset();
@@ -7056,7 +7107,7 @@
                 }, null), vue.createVNode("canvas", {
                     ref: canvasRectRef,
                     class: [ ns.be("canvas", "rect") ]
-                }, null), contextmenuLabelFixed.value.show ? vue.createVNode(ContextMenuLabel, {
+                }, null), contextmenuLabelFixed.value.show ? vue.createVNode(ContextMenuLabel$1, {
                     labelRect: contextmenuLabelRect.value,
                     classes: props.classes,
                     activateRect: contextmenuLabelFixed.value.activateRect,
@@ -7072,7 +7123,7 @@
                 }, null) : null ]) ]
             }) ]);
         }
-    }), RightLabel = vue.defineComponent({
+    }), RightLabel$1 = vue.defineComponent({
         props: {
             contentHeight: {
                 type: Number
@@ -7088,16 +7139,16 @@
         },
         emits: [ "delete", "select" ],
         setup(props, {emit: emit}) {
-            const {t: t} = useLocale(), ns = vue.inject("ns", {}), labels = vue.ref([]), formatLabelsTypeName = labels => labels.length ? labels.map((rect => {
+            const {t: t} = useLocale(), ns = vue.inject("ns", {}), labels = vue.ref([]), formatLabelsTypeName = labels => labels.length ? labels.map(rect => {
                 const typeName = props.classes[rect.type];
                 return typeName && (rect.typeName = typeName), rect;
-            })) : [];
-            vue.watch((() => props.classes), (() => {
+            }) : [];
+            vue.watch(() => props.classes, () => {
                 labels.value = formatLabelsTypeName(labels.value);
-            })), vue.watch((() => props.labels), (rects => {
+            }), vue.watch(() => props.labels, rects => {
                 const _rects = vue.toRaw(rects);
                 labels.value = formatLabelsTypeName(_rects);
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
             });
@@ -7106,7 +7157,7 @@
                 style: {
                     height: props.contentHeight + "px"
                 }
-            }, [ labels.value.length ? vue.createVNode("ul", null, [ labels.value.map(((rect, index) => vue.createVNode("li", {
+            }, [ labels.value.length ? vue.createVNode("ul", null, [ labels.value.map((rect, index) => vue.createVNode("li", {
                 key: index,
                 onClick: () => ((rect, index) => {
                     emit("select", rect, index);
@@ -7132,8 +7183,8 @@
                 }, {
                     default: () => [ vue.createVNode(delete_default, null, null) ]
                 })
-            }) ]))) ]) : vue.createVNode(elementPlus.ElEmpty, {
-                "image-size": 120,
+            }) ])) ]) : vue.createVNode(elementPlus.ElEmpty, {
+                "image-size": 100,
                 description: t("next.labelimg.emptyLabelText")
             }, null) ]);
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
@@ -7168,47 +7219,47 @@
         },
         emits: [ "change", "save", "prev-click", "next-click" ],
         setup(props, {emit: emit, slots: slots, expose: expose}) {
-            const {t: t} = useLocale(), _config = deepClone(defaultConfig$1), _options = vue.computed((() => {
+            const {t: t} = useLocale(), _config = deepClone(defaultConfig$1), _options = vue.computed(() => {
                 const cfg = vue.unref(props.options);
                 return merge(_config, cfg);
-            })), options = vue.unref(_options);
+            }), options = vue.unref(_options);
             vue.provide("ns", ns$2), vue.provide("_emit", emit);
             const activateNodeIndex = vue.ref(0), classes = vue.ref(props.classes), labelImages = vue.ref(deepClone(props.data));
-            vue.watch((() => props.data), (data => {
+            vue.watch(() => props.data, data => {
                 labelImages.value = deepClone(data);
-            }), {
+            }, {
                 deep: !0
-            }), vue.watch((() => props.data.length), (() => {
+            }), vue.watch(() => props.data.length, () => {
                 activateNodeIndex.value = 0;
-            })), vue.watch((() => props.classes), (val => {
+            }), vue.watch(() => props.classes, val => {
                 classes.value = val;
-            }), {
+            }, {
                 deep: !0
             });
-            const currentNode = vue.computed((() => {
+            const currentNode = vue.computed(() => {
                 if (!labelImages.value) return {};
                 const node = labelImages.value[activateNodeIndex.value] || {};
                 return deepClone(node);
-            })), activateNodeLabels = vue.ref(currentNode.value.labels || []);
-            vue.watch((() => currentNode.value), (() => {
+            }), activateNodeLabels = vue.ref(currentNode.value.labels || []);
+            vue.watch(() => currentNode.value, () => {
                 activateNodeLabels.value = currentNode.value.labels || [];
-            }));
+            });
             const onChangeNodeRect = rects => {
                 currentNode.value.labels = rects, activateNodeLabels.value = rects;
             }, loading = vue.ref(!1), formatNodeLabels = () => {
                 const node = currentNode.value;
                 let yolo_label = [];
-                return node.labels.forEach((rect => {
+                return node.labels.forEach(rect => {
                     delete rect.typeName;
                     const label_rect = convertToLabel(rect);
                     yolo_label.push(label_rect.join(" "));
-                })), {
+                }), {
                     node: node,
                     label_txt: yolo_label.join("\n")
                 };
             }, isChangeNodeLabels = () => {
                 const node = labelImages.value[activateNodeIndex.value];
-                return isEqual(vue.toRaw(node.labels).map((rect => convertToLabel(rect))), currentNode.value.labels.map((rect => convertToLabel(rect))));
+                return isEqual(vue.toRaw(node.labels).map(rect => convertToLabel(rect)), currentNode.value.labels.map(rect => convertToLabel(rect)));
             }, switchKeydownAD = e => {
                 const imageLength = labelImages.value.length;
                 "KeyD" === e.code ? (activateNodeIndex.value++, activateNodeIndex.value >= imageLength && (activateNodeIndex.value = 0)) : "KeyA" === e.code && (activateNodeIndex.value--, 
@@ -7223,12 +7274,12 @@
                 emit("save", {
                     node: node,
                     label_txt: label_txt
-                }, (imageItem => {
+                }, imageItem => {
                     labelImages.value[activateNodeIndex.value] = imageItem || node, switchKeydownAD(e), 
                     loading.value = !1;
-                }), (() => {
+                }, () => {
                     loading.value = !1;
-                }));
+                });
             }, onChangeActivateNode = index => {
                 if (loading.value) return;
                 loading.value = !0;
@@ -7237,16 +7288,16 @@
                 loading.value = !1, !1) : (emit("save", {
                     node: node,
                     label_txt: label_txt
-                }, (imageItem => {
+                }, imageItem => {
                     labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index, 
                     loading.value = !1, scaleTranslate.value = {
                         scale: 1,
                         x: 0,
                         y: 0
                     };
-                }), (() => {
+                }, () => {
                     loading.value = !1;
-                })), !0);
+                }), !0);
             }, onPaginationPrev = () => {
                 const imageLength = labelImages.value.length;
                 let i = activateNodeIndex.value - 1;
@@ -7256,26 +7307,26 @@
                 let i = activateNodeIndex.value + 1;
                 i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
             }, canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), mainContentHeight = vue.ref(options.minContentHeight), updateMainContentHeight = () => {
-                vue.nextTick((() => {
+                vue.nextTick(() => {
                     const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
                     mainContentHeight.value = contentHeight;
-                }));
+                });
             };
-            vue.onMounted((() => {
-                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+            vue.onMounted(() => {
+                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, () => {
                     updateMainContentHeight();
-                })), window.addEventListener("resize", updateMainContentHeight);
-            })), vue.onUnmounted((() => {
+                }), window.addEventListener("resize", updateMainContentHeight);
+            }), vue.onUnmounted(() => {
                 document.removeEventListener("keydown", onKeydownPrevNext), window.removeEventListener("resize", updateMainContentHeight);
-            }));
+            });
             const onSelectLabelNode = (rect, index) => {
                 canvasContextRef.value.onSelectedLabel(rect, index);
             }, onDeleteLabelNode = rect => {
                 canvasContextRef.value.onDeleteLabel(rect);
             }, isFullscreen = vue.ref(!1), onSwitchFillscreen = val => {
-                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
+                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick(() => {
                     canvasContextRef.value.rerenderImage();
-                }));
+                });
             }, scaleTranslate = vue.ref({
                 scale: 1,
                 x: 0,
@@ -7337,7 +7388,7 @@
                             rowInfo: currentNode.value,
                             onChange: onChangeNodeRect
                         }, null) ]) ]
-                    }), vue.createVNode(RightLabel, {
+                    }), vue.createVNode(RightLabel$1, {
                         contentHeight: mainContentHeight.value,
                         classes: classes.value,
                         labels: activateNodeLabels.value,
@@ -7359,7 +7410,7 @@
                     }, [ vue.createVNode(elementPlus.ElScrollbar, null, {
                         default: () => [ vue.createVNode("ul", {
                             class: [ ns$2.bem("footer", "center", "list") ]
-                        }, [ labelImages.value.map(((item, index) => vue.createVNode("li", {
+                        }, [ labelImages.value.map((item, index) => vue.createVNode("li", {
                             key: index,
                             onClick: () => onChangeActivateNode(index),
                             class: {
@@ -7372,7 +7423,7 @@
                             "max-scale": 2,
                             "min-scale": .2,
                             fit: "cover"
-                        }, null) ]))) ]) ]
+                        }, null) ])) ]) ]
                     }) ]), vue.createVNode("div", {
                         class: [ ns$2.be("footer", "right") ]
                     }, [ vue.createVNode(elementPlus.ElIcon, {
@@ -7438,13 +7489,13 @@
                     };
                 }
             };
-            vue.onMounted((() => {
-                vue.watch((() => props.src), (() => {
+            vue.onMounted(() => {
+                vue.watch(() => props.src, () => {
                     renderImageAndLabel();
-                }), {
+                }, {
                     immediate: !0
                 });
-            }));
+            });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 class: [ ns$1.b(), props.className ],
                 style: {
@@ -7455,74 +7506,275 @@
             }, null) ]) ]);
         }
     });
-    const NextLabelimg = withInstall(Element$1), NextLabelimgPreview = withInstall(preview), isPointInCircle = (mouseX, mouseY, circleX, circleY, radius) => Math.sqrt(Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2)) < radius, vertexesUnique = vertexes => Array.from(new Set(vertexes.map((item => JSON.stringify(item))))).map((item => JSON.parse(item))), vertexesToScale = (vertexes, scaleX, scaleY, isMultiply = !0) => vertexes?.length ? vertexes.map((item => ((vertex, scaleX, scaleY, isMultiply = !0) => {
-        const [x, y] = vertex;
-        return isMultiply ? [ x * scaleX, y * scaleY ] : [ x / scaleX, y / scaleY ];
-    })(item, scaleX, scaleY, isMultiply))) : [], {hexToRgba: hexToRgba} = useChangeColor(), colors = [ "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ];
-    class CreatePolygonVertexes {
-        canvas;
-        ctx;
-        vertexes;
-        isDrawing;
-        mouseOffset;
-        vertexesObservers=[];
-        destroyedObservers;
-        constructor(canvas, ctx) {
-            this.canvas = canvas, this.ctx = ctx, this.isDrawing = !1, this.vertexes = [], this.mouseOffset = {
-                x: 0,
-                y: 0
-            }, canvas.addEventListener("click", this.canvasMouseClick.bind(this)), canvas.addEventListener("mousemove", this.canvasMousemove.bind(this)), 
-            canvas.addEventListener("dblclick", this.canvasMouseDblclick.bind(this)), this.vertexes = new Proxy(this.vertexes, {
-                set: (target, property, value) => (target[property] = value, this.notifyVertexChangeListeners(), 
-                !0)
-            }), this.mouseOffset = new Proxy(this.mouseOffset, {
-                set: (target, property, value) => (target[property] = value, this.notifyVertexChangeListeners(), 
-                !0)
-            });
-        }
-        notifyVertexChangeListeners() {
-            this.vertexesObservers.forEach((listener => {
-                listener(this.vertexes, this.mouseOffset);
-            }));
-        }
-        vertexesChangeEventListener(listener) {
-            this.vertexesObservers.push(listener);
-        }
-        notifyDestryedListerers() {
-            this.destroyedObservers(this.vertexes);
-        }
-        onDestroyed(callback) {
-            this.destroyedObservers = callback;
-        }
-        canvasMouseClick(e) {
-            e.stopPropagation(), this.isDrawing = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY;
-            const [x, y] = [ e.offsetX, e.offsetY ];
-            let is_add = !0;
-            for (let i = 0; i < this.vertexes.length; i++) {
-                const p = this.vertexes[i];
-                if (Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2) < 8) {
-                    is_add = !1;
-                    break;
-                }
+    const NextLabelimg = withInstall(Element$1), NextLabelimgPreview = withInstall(preview);
+    var ShapeType, ToolsHandleType;
+    !function(ShapeType) {
+        ShapeType.Polygon = "polygon", ShapeType.Rectangle = "rectangle", ShapeType.Circle = "circle";
+    }(ShapeType || (ShapeType = {})), function(ToolsHandleType) {
+        ToolsHandleType.CREATE_POLYGON = "createPolygon", ToolsHandleType.EDIT_SHAPE = "editShape", 
+        ToolsHandleType.CREATE_RECTANGLE = "createRectangle", ToolsHandleType.CREATE_CIRCLE = "createCircle";
+    }(ToolsHandleType || (ToolsHandleType = {}));
+    const colors = [ "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ];
+    var defaultConfig = {
+        minContentHeight: 500
+    };
+    var ContextMenuLabel = vue.defineComponent({
+        props: {
+            fixed: {
+                type: Object,
+                default: () => ({})
+            },
+            classes: {
+                type: Array,
+                default: () => []
+            },
+            activateShape: {
+                type: Object,
+                default: null
             }
-            is_add && this.vertexes.push([ x, y ]), this.vertexes = vertexesUnique(this.vertexes);
-        }
-        canvasMousemove(e) {
-            e.stopPropagation(), this.isDrawing && (this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY, 
-            this.canvas.style.cursor = "crosshair");
-        }
-        canvasMouseDblclick(e) {
-            e.stopPropagation(), this.isDrawing && (this.canvas.style.cursor = "unset", this.mouseOffset.x = e.offsetX, 
-            this.mouseOffset.y = e.offsetY, this.vertexes.push([ e.offsetX, e.offsetY ]), this.vertexes = vertexesUnique(this.vertexes)), 
-            this.notifyDestryedListerers(), this.destroy();
-        }
+        },
+        emits: [ "close", "select", "delete" ],
+        setup(props, {emit: emit}) {
+            const {t: t} = useLocale(), ns = vue.inject("ns", {}), groupId = vue.ref(props.activateShape.group_id || ""), description = vue.ref(props.activateShape.description || ""), onClose = () => {
+                emit("close");
+            }, onDelete = () => {
+                emit("delete", props.activateShape);
+            }, activateIndex = vue.ref();
+            vue.watch(() => props.activateShape, () => {
+                const {label: label} = props.activateShape;
+                activateIndex.value = isValueExist(label) ? label : null;
+            }, {
+                deep: !0,
+                immediate: !0
+            });
+            const labelRectWidthHeight = vue.ref({
+                width: 0,
+                height: 0
+            });
+            vue.onMounted(() => {
+                const {clientWidth: clientWidth, clientHeight: clientHeight} = labelMenuRef.value;
+                labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
+            });
+            const labelMenuRef = vue.ref(), labelStyleFixed = vue.computed(() => {
+                const {left: left, top: top} = props.fixed, height_diff = top + labelRectWidthHeight.value.height - window.innerHeight;
+                let y = top;
+                return height_diff > 0 && (y -= height_diff), {
+                    top: y + "px",
+                    left: left + "px"
+                };
+            }), renderContent = () => {
+                let _slot;
+                return vue.createVNode(vue.Teleport, {
+                    to: "body"
+                }, {
+                    default: () => {
+                        return [ vue.createVNode("div", {
+                            ref: labelMenuRef,
+                            class: [ ns.b("contextmenu-label") ],
+                            style: labelStyleFixed.value
+                        }, [ vue.createVNode("div", {
+                            class: "label-head"
+                        }, [ vue.createVNode("span", {
+                            style: "padding-right: 30px"
+                        }, [ t("next.labelme.selectClasses") ]), vue.createVNode(elementPlus.ElIcon, {
+                            size: 16,
+                            onClick: onClose
+                        }, {
+                            default: () => [ vue.createVNode(close_default, null, null) ]
+                        }) ]), props.classes.length ? vue.createVNode(vue.Fragment, null, [ vue.createVNode(elementPlus.ElInput, {
+                            modelValue: groupId.value,
+                            "onUpdate:modelValue": $event => groupId.value = $event,
+                            placeholder: t("next.labelme.labelGroupId"),
+                            size: "small",
+                            maxLength: 30
+                        }, null), vue.createVNode("ul", {
+                            class: "label-main"
+                        }, [ props.classes.map((name, index) => vue.createVNode("li", {
+                            key: index,
+                            onClick: () => (label => {
+                                activateIndex.value = label;
+                                const shape = {
+                                    ...props.activateShape,
+                                    label: label,
+                                    description: description.value,
+                                    group_id: groupId.value
+                                };
+                                emit("select", label, shape);
+                            })(name),
+                            class: {
+                                "activate-label": activateIndex.value === name
+                            }
+                        }, [ vue.createVNode("span", {
+                            style: {
+                                "background-color": colors[index % colors.length]
+                            },
+                            class: "label-line"
+                        }, null), vue.createVNode("span", null, [ name ]) ])) ]), vue.createVNode(elementPlus.ElInput, {
+                            modelValue: description.value,
+                            "onUpdate:modelValue": $event => description.value = $event,
+                            placeholder: t("next.labelme.labelDescription"),
+                            size: "small",
+                            type: "textarea",
+                            rows: 2,
+                            resize: "none",
+                            maxLength: 100
+                        }, null) ]) : vue.createVNode(elementPlus.ElEmpty, {
+                            "image-size": 50,
+                            description: t("next.labelme.emptyClassesText"),
+                            style: {
+                                padding: 0
+                            }
+                        }, null), isValueExist(activateIndex.value) ? vue.createVNode("div", {
+                            style: "margin: 10px auto 0"
+                        }, [ vue.createVNode(elementPlus.ElButton, {
+                            icon: delete_default,
+                            plain: !0,
+                            size: "small",
+                            type: "danger",
+                            onClick: onDelete
+                        }, (s = _slot = t("next.labelme.deleteClasses"), "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
+                            default: () => [ _slot ]
+                        })) ]) : null ]) ];
+                        var s;
+                    }
+                });
+            };
+            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
+        }
+    });
+    const printsToPath = vertexes => {
+        const path = new Path2D;
+        if (vertexes.length) {
+            path.moveTo(vertexes[0][0], vertexes[0][1]);
+            for (let i = 1; i < vertexes.length; i++) {
+                const [x, y] = vertexes[i];
+                path.lineTo(x, y);
+            }
+        }
+        return path;
+    }, isPointInPath = (px, py, vertexes, ctx) => {
+        const path = printsToPath(vertexes);
+        return path.closePath(), ctx.isPointInPath(path, px, py);
+    }, isPointInCircle = (mouseX, mouseY, circleX, circleY, radius) => Math.sqrt(Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2)) < radius, vertexesUnique = vertexes => Array.from(new Set(vertexes.map(item => JSON.stringify(item)))).map(item => JSON.parse(item)), getTranslateAndScale = ctx => {
+        const transformMatrix = ctx.getTransform(), {a: scaleX, b: skewY, e: translateX, f: translateY} = transformMatrix;
+        return {
+            scale: Math.hypot(scaleX, skewY),
+            translateX: translateX,
+            translateY: translateY
+        };
+    }, vertexesToImageScale = (vertexes, scaleX, scaleY, isMultiply = !0) => vertexes?.length ? vertexes.map(item => ((vertex, scaleX, scaleY, isMultiply = !0) => {
+        const [x, y] = vertex;
+        return isMultiply ? [ x * scaleX, y * scaleY ] : [ x / scaleX, y / scaleY ];
+    })(item, scaleX, scaleY, isMultiply)) : [], vertexeTransform = (vertex, scaleOffset) => {
+        const {scale: scale, x: offsetX, y: offsetY} = scaleOffset, [x, y] = vertex;
+        return [ (x - offsetX) / scale, (y - offsetY) / scale ];
+    }, {hexToRgba: hexToRgba$2} = useChangeColor();
+    class CreatePolygon {
+        canvas;
+        ctx;
+        vertexes;
+        isDrawing;
+        mouseOffset;
+        vertexesObservers=[];
+        destroyedObservers=[];
+        constructor(canvas, ctx) {
+            this.canvas = canvas, this.ctx = ctx, this.isDrawing = !1, this.vertexes = [], this.mouseOffset = {
+                x: 0,
+                y: 0
+            }, this.vertexes = new Proxy(this.vertexes, {
+                set: (target, property, value) => (target[property] = value, this.notifyVertexChangeListeners(), 
+                !0)
+            }), this.mouseOffset = new Proxy(this.mouseOffset, {
+                set: (target, property, value) => (target[property] = value, this.notifyVertexChangeListeners(), 
+                !0)
+            }), this.canvasMouseClick = this.canvasMouseClick.bind(this), this.canvasMouseDblclick = this.canvasMouseDblclick.bind(this), 
+            this.canvasMousemove = this.canvasMousemove.bind(this);
+        }
+        notifyVertexChangeListeners() {
+            this.vertexesObservers.forEach(listener => {
+                listener(this.vertexes, this.mouseOffset);
+            });
+        }
+        vertexesChangeEventListener(listener) {
+            this.vertexesObservers.push(listener);
+        }
+        notifyAddCompletedListener() {
+            this.destroyedObservers.forEach(listener => {
+                listener(this.vertexes, this.mouseOffset);
+            });
+        }
+        addCompleted(callback) {
+            this.destroyedObservers.push(callback);
+        }
+        transformMousePoint(e) {
+            const {scale: scale, translateX: translateX, translateY: translateY} = getTranslateAndScale(this.ctx);
+            return vertexeTransform([ e.offsetX, e.offsetY ], {
+                scale: scale,
+                x: translateX,
+                y: translateY
+            });
+        }
+        triggerCreatePolygon() {
+            this.isDrawing = !0, this.canvas.addEventListener("click", this.canvasMouseClick), 
+            this.canvas.addEventListener("mousemove", this.canvasMousemove), this.canvas.addEventListener("dblclick", this.canvasMouseDblclick);
+        }
+        canvasMouseClick(e) {
+            if (e.stopPropagation(), e.preventDefault(), e.ctrlKey) return;
+            this.isDrawing = !0;
+            const [x, y] = this.transformMousePoint(e);
+            this.mouseOffset.x = x, this.mouseOffset.y = y;
+            let is_add = !0;
+            for (let i = 0; i < this.vertexes.length; i++) {
+                const p = this.vertexes[i];
+                if (Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2) < 8) {
+                    is_add = !1;
+                    break;
+                }
+            }
+            is_add && this.vertexes.push([ x, y ]), this.vertexes = vertexesUnique(this.vertexes);
+        }
+        canvasMousemove(e) {
+            if (e.stopPropagation(), e.preventDefault(), !e.ctrlKey && this.isDrawing) {
+                const [x, y] = this.transformMousePoint(e);
+                this.mouseOffset.x = x, this.mouseOffset.y = y, this.canvas.style.cursor = "crosshair";
+            }
+        }
+        canvasMouseDblclick(e) {
+            if (e.stopPropagation(), e.preventDefault(), !e.ctrlKey) {
+                if (this.isDrawing) {
+                    this.canvas.style.cursor = "unset";
+                    const [x, y] = this.transformMousePoint(e);
+                    this.mouseOffset.x = x, this.mouseOffset.y = y, this.vertexes.push([ x, y ]), this.vertexes = vertexesUnique(this.vertexes);
+                }
+                this.notifyAddCompletedListener(), this.isDrawing = !1;
+            }
+        }
+        drawPolygon(vertexes) {
+            const ctx = this.ctx;
+            if (!vertexes.length) return;
+            const {scale: scale} = getTranslateAndScale(this.ctx);
+            ctx.save();
+            const {x: x, y: y} = this.mouseOffset, path = printsToPath([ ...vertexes, [ x, y ] ]);
+            path.closePath();
+            ctx.beginPath(), ctx.lineWidth = 2 / scale, ctx.setLineDash([ 5, 5 ]), ctx.strokeStyle = "#5470c6", 
+            ctx.fillStyle = hexToRgba$2("#5470c6", .2), ctx.stroke(path), ctx.fill(path), ctx.fillStyle = "#5470c6";
+            for (let i = 0; i < vertexes.length; i++) {
+                const [x, y] = vertexes[i];
+                ctx.beginPath(), ctx.arc(x, y, 5 / scale, 0, 2 * Math.PI), ctx.fill();
+            }
+            ctx.restore();
+        }
+        reset() {
+            this.isDrawing = !0, this.vertexes.length = 0, this.mouseOffset.x = 0, this.mouseOffset.y = 0;
+        }
         destroy() {
-            this.isDrawing = !1, this.vertexes = [], this.vertexesObservers = [], this.destroyedObservers = () => {
-                this.canvas.removeEventListener("click", this.canvasMouseClick);
-            }, this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("dblclick", this.canvasMouseDblclick);
+            this.isDrawing = !1, this.vertexes.length = 0, this.mouseOffset.x = 0, this.mouseOffset.y = 0, 
+            this.canvas.style.cursor = "unset", this.canvas.removeEventListener("click", this.canvasMouseClick), 
+            this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("dblclick", this.canvasMouseDblclick);
         }
     }
-    class EditPolygonPath {
+    const {hexToRgba: hexToRgba$1} = useChangeColor();
+    class EditPolygon {
         canvas;
         ctx;
         vertexes;
@@ -7539,7 +7791,9 @@
         constructor(canvas, ctx) {
             this.canvas = canvas, this.ctx = ctx, this.vertexes = [], this.isEditing = !1, this.canClickEvent = !0, 
             this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1, 
-            this.vertexRadius = 8, this.edgeCentreRadius = 5, this.pointRecover = [];
+            this.vertexRadius = 8, this.edgeCentreRadius = 5, this.pointRecover = [], this.canvasMousedown = this.canvasMousedown.bind(this), 
+            this.canvasMouseup = this.canvasMouseup.bind(this), this.canvasMousemove = this.canvasMousemove.bind(this), 
+            this.canvasMouseClick = this.canvasMouseClick.bind(this);
         }
         notifyEditPolygonObserver() {
             this.editPolygonObserver?.(this.vertexes);
@@ -7548,45 +7802,55 @@
             this.editPolygonObserver = callback;
         }
         getTransformPoint(x, y) {
-            const transformMatrix = this.ctx.getTransform(), scaleX = parseFloat(transformMatrix.a.toFixed(1)), scaleY = parseFloat(transformMatrix.d.toFixed(1)), translateX = Math.ceil(transformMatrix.e), translateY = Math.ceil(transformMatrix.f);
-            return [ Math.floor((x - translateX) / scaleX), Math.floor((y - translateY) / scaleY) ];
+            const {scale: scale, translateX: translateX, translateY: translateY} = getTranslateAndScale(this.ctx);
+            return vertexeTransform([ x, y ], {
+                scale: scale,
+                x: translateX,
+                y: translateY
+            });
         }
         drawPolygonPath(vertexes, mouseX, mouseY) {
             const ctx = this.ctx;
             if (!vertexes.length) return;
-            ctx.beginPath(), ctx.lineWidth = 3, ctx.strokeStyle = "#5470c6", ctx.fillStyle = hexToRgba("#5470c6", .2), 
-            ctx.moveTo(vertexes[0][0], vertexes[0][1]);
+            const {scale: scale} = getTranslateAndScale(this.ctx);
+            ctx.save(), ctx.beginPath(), ctx.lineWidth = 2 / scale, ctx.strokeStyle = "#5470c6", 
+            ctx.fillStyle = hexToRgba$1("#5470c6", .2), ctx.moveTo(vertexes[0][0], vertexes[0][1]);
             for (let i = 1; i < vertexes.length; i++) {
                 const [x, y] = vertexes[i];
                 ctx.lineTo(x, y);
             }
             isNaN(mouseX) || isNaN(mouseY) || ctx.lineTo(mouseX, mouseY), ctx.closePath(), ctx.stroke(), 
-            ctx.fill();
+            ctx.fill(), ctx.restore();
         }
         drawPolygonEdgeCentre(vertexes) {
-            const ctx = this.ctx;
+            const ctx = this.ctx, {scale: scale} = getTranslateAndScale(this.ctx), _vertexRadius = this.vertexRadius / scale, _edgeCentreRadius = this.edgeCentreRadius / scale, _vertexCentreRadius = Math.max(1, _vertexRadius - _edgeCentreRadius);
+            ctx.save();
             for (let i = 0; i < vertexes.length; i++) {
                 const [x, y] = vertexes[i];
-                ctx.beginPath(), ctx.fillStyle = "#5470c6", ctx.arc(x, y, this.vertexRadius, 0, 2 * Math.PI), 
-                ctx.closePath(), ctx.fill(), ctx.beginPath(), ctx.fillStyle = "#FFFFFF", ctx.arc(x, y, this.vertexRadius - 3, 0, 2 * Math.PI), 
+                ctx.beginPath(), ctx.fillStyle = "#5470c6", ctx.arc(x, y, _vertexRadius, 0, 2 * Math.PI), 
+                ctx.closePath(), ctx.fill(), ctx.beginPath(), ctx.fillStyle = "#FFFFFF", ctx.arc(x, y, _vertexCentreRadius, 0, 2 * Math.PI), 
                 ctx.closePath(), ctx.fill();
             }
             for (let i = 0; i < vertexes.length; i++) {
                 const start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], x = start[0] + (end[0] - start[0]) / 2, y = start[1] + (end[1] - start[1]) / 2;
-                ctx.beginPath(), ctx.fillStyle = "#5470c6", ctx.arc(x, y, this.edgeCentreRadius, 0, 2 * Math.PI), 
+                ctx.beginPath(), ctx.fillStyle = "#5470c6", ctx.arc(x, y, _edgeCentreRadius, 0, 2 * Math.PI), 
                 ctx.closePath(), ctx.fill();
             }
+            ctx.restore();
+        }
+        render() {
+            this.drawPolygonPath(this.vertexes), this.drawPolygonEdgeCentre(this.vertexes);
         }
         drawPolygon(vertexes, mouseOffset) {
             this.vertexes = vertexes, mouseOffset ? this.drawPolygonPath(vertexes, mouseOffset.x, mouseOffset.y) : (this.drawPolygonPath(vertexes), 
             this.drawPolygonEdgeCentre(vertexes));
         }
         pointInVertexes(x, y) {
-            const [_x, _y] = this.getTransformPoint(x, y), vertexes = this.vertexes;
+            const [_x, _y] = this.getTransformPoint(x, y), {scale: scale} = getTranslateAndScale(this.ctx), _vertexRadius = this.vertexRadius / scale, vertexes = this.vertexes;
             let aimIndex = null;
             for (let i = 0; i < vertexes.length; i++) {
                 const [vertex_x, vertex_y] = vertexes[i];
-                if (isPointInCircle(_x, _y, vertex_x, vertex_y, this.vertexRadius)) {
+                if (isPointInCircle(_x, _y, vertex_x, vertex_y, _vertexRadius)) {
                     this.canvas.style.cursor = "pointer", aimIndex = i;
                     break;
                 }
@@ -7595,11 +7859,11 @@
             return aimIndex;
         }
         pointInEdgeCentre(x, y) {
-            const [_x, _y] = this.getTransformPoint(x, y), vertexes = this.vertexes;
+            const [_x, _y] = this.getTransformPoint(x, y), {scale: scale} = getTranslateAndScale(this.ctx), _edgeCentreRadius = this.edgeCentreRadius / scale, vertexes = this.vertexes;
             let aimIndex = null;
             for (let i = 0; i < vertexes.length; i++) {
                 const start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], vertex_x = start[0] + (end[0] - start[0]) / 2, vertex_y = start[1] + (end[1] - start[1]) / 2;
-                if (isPointInCircle(_x, _y, vertex_x, vertex_y, this.edgeCentreRadius)) {
+                if (isPointInCircle(_x, _y, vertex_x, vertex_y, _edgeCentreRadius)) {
                     this.canvas.style.cursor = "pointer", aimIndex = i;
                     break;
                 }
@@ -7608,9 +7872,9 @@
             return aimIndex;
         }
         pointInVertexesOrEdgeCentre(x, y) {
-            const [_x, _y] = this.getTransformPoint(x, y), vertexes = this.vertexes;
+            const [_x, _y] = this.getTransformPoint(x, y), {scale: scale} = getTranslateAndScale(this.ctx), _vertexRadius = this.vertexRadius / scale, _edgeCentreRadius = this.edgeCentreRadius / scale, vertexes = this.vertexes;
             for (let i = 0; i < vertexes.length; i++) {
-                const [vertex_x, vertex_y] = vertexes[i], isInVertex = isPointInCircle(_x, _y, vertex_x, vertex_y, this.vertexRadius), start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], edge_center_x = start[0] + (end[0] - start[0]) / 2, edge_center_y = start[1] + (end[1] - start[1]) / 2, isInEdgeCenter = isPointInCircle(_x, _y, edge_center_x, edge_center_y, this.edgeCentreRadius);
+                const [vertex_x, vertex_y] = vertexes[i], isInVertex = isPointInCircle(_x, _y, vertex_x, vertex_y, _vertexRadius), start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], edge_center_x = start[0] + (end[0] - start[0]) / 2, edge_center_y = start[1] + (end[1] - start[1]) / 2, isInEdgeCenter = isPointInCircle(_x, _y, edge_center_x, edge_center_y, _edgeCentreRadius);
                 if (isInVertex || isInEdgeCenter) {
                     this.canvas.style.cursor = "pointer";
                     break;
@@ -7619,17 +7883,18 @@
             }
         }
         notifyObservers() {
-            this.observers.forEach((listener => {
+            this.observers.forEach(listener => {
                 listener(this.vertexes);
-            }));
+            });
         }
         updatePolygon(callback) {
-            this.isEditing = !0, this.canvas.addEventListener("mousedown", this.canvasMousedown.bind(this)), 
-            this.canvas.addEventListener("mouseup", this.canvasMouseup.bind(this)), this.canvas.addEventListener("click", this.canvasMouseClick.bind(this)), 
-            this.canvas.addEventListener("mousemove", this.canvasMousemove.bind(this)), this.observers.push(callback);
+            this.isEditing = !0, this.canvas.addEventListener("mousedown", this.canvasMousedown), 
+            this.canvas.addEventListener("mouseup", this.canvasMouseup), this.canvas.addEventListener("mousemove", this.canvasMousemove), 
+            this.canvas.addEventListener("click", this.canvasMouseClick), this.observers.push(callback);
         }
         canvasMousedown(e) {
-            e.stopPropagation(), e.preventDefault(), this.canClickEvent = !0;
+            if (e.stopPropagation(), e.preventDefault(), e.ctrlKey) return;
+            this.canClickEvent = !0;
             const {offsetX: x, offsetY: y} = e;
             this.pointRecover = [ x, y ];
             const vertex_i = this.pointInVertexes(x, y);
@@ -7637,13 +7902,13 @@
             this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]));
             const i = this.pointInEdgeCentre(x, y);
             isValueExist(i) && (this.isMoveEditing = !0, this.pointCentreIndex = i + 1, this.vertexes.splice(this.pointCentreIndex, 0, [ x, y ])), 
-            setTimeout((() => {
+            setTimeout(() => {
                 this.canClickEvent = !1;
-            }), 200);
+            }, 200);
         }
         canvasMouseup(e) {
-            e.stopPropagation(), e.preventDefault();
-            let {offsetX: x, offsetY: y} = e;
+            if (e.stopPropagation(), e.preventDefault(), e.ctrlKey) return;
+            let {offsetX: offsetX, offsetY: offsetY} = e, [x, y] = this.getTransformPoint(offsetX, offsetY);
             this.vertexes = vertexesUnique(this.vertexes);
             for (let i = 0; i < this.vertexes.length; i++) {
                 const p = this.vertexes[i], radius = Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2);
@@ -7658,7 +7923,7 @@
             this.drawPolygon(this.vertexes), this.notifyObservers(), this.notifyEditPolygonObserver();
         }
         canvasMouseClick(e) {
-            e.stopPropagation();
+            if (e.stopPropagation(), e.preventDefault(), e.ctrlKey) return;
             const {offsetX: x, offsetY: y} = e;
             if (this.canClickEvent) {
                 const i = this.pointInVertexes(x, y);
@@ -7670,124 +7935,205 @@
             }
         }
         canvasMousemove(e) {
-            e.stopPropagation();
-            const {offsetX: x, offsetY: y} = e;
-            this.pointInVertexesOrEdgeCentre(x, y), this.isMoveEditing && (this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]), 
+            if (e.stopPropagation(), e.preventDefault(), e.ctrlKey) return;
+            const {offsetX: offsetX, offsetY: offsetY} = e;
+            this.pointInVertexesOrEdgeCentre(offsetX, offsetY);
+            const [x, y] = this.getTransformPoint(offsetX, offsetY);
+            this.isMoveEditing && (this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]), 
             this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]), 
             this.notifyObservers());
         }
         destroy() {
             this.vertexes = [], this.observers = [], this.isEditing = !1, this.canvas.removeEventListener("mousedown", this.canvasMousedown), 
-            this.canvas.removeEventListener("mouseup", this.canvasMouseup), this.canvas.removeEventListener("click", this.canvasMouseClick), 
-            this.canvas.removeEventListener("mousemove", this.canvasMousemove);
+            this.canvas.removeEventListener("mouseup", this.canvasMouseup), this.canvas.removeEventListener("mousemove", this.canvasMousemove), 
+            this.canvas.removeEventListener("click", this.canvasMouseClick);
         }
     }
+    const {hexToRgba: hexToRgba} = useChangeColor();
     class CreateDrawCanvas {
         canvas;
         ctx;
         image;
         canvasWidth;
         canvasHeight;
-        scaleOffset;
+        imageScaleX;
+        imageScaleY;
         labels;
-        scaleX;
-        scaleY;
+        createPolygon;
         editDrawPolygon;
-        createPolygonVertexes;
-        editVertexes;
-        editPolygonObservers=[];
-        drawnPolygonObserver;
+        addVertexes=[];
+        createCompleteSubscribers=new Set;
+        editingShape;
+        editVertexes=[];
+        editingSubscribers=new Set;
         constructor(options) {
-            const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, labels: labels, scaleX: scaleX, scaleY: scaleY, scaleOffset: scaleOffset} = options;
+            const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, imageScaleX: imageScaleX, imageScaleY: imageScaleY, labels: labels} = options;
             this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth, 
-            this.canvasHeight = canvasHeight, this.scaleOffset = scaleOffset, this.labels = labels || {}, 
-            this.scaleX = scaleX || 1, this.scaleY = scaleY || 1, this.editVertexes = [], this.render(), 
-            this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), this.editDrawPolygon = new EditPolygonPath(canvas, ctx), 
-            this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
-                this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes, 
-                this.notifyObservers();
-            })), this.createPolygonVertexes.onDestroyed((vertexes => {
-                this.editVertexes = vertexes, this.render(), this.editDrawPolygon.drawPolygon(vertexes), 
-                this.editDrawPolygon.updatePolygon((vertexes => {
-                    this.render(), this.editDrawPolygon.drawPolygon(vertexes), this.editVertexes = vertexes, 
-                    this.notifyObservers();
-                })), this.editDrawPolygon.onEditPolygon((vertexes => {
-                    this.editVertexes = vertexes, this.notifyDrawnPolygonObservers();
-                })), this.notifyDrawnPolygonObservers();
-            }));
+            this.canvasHeight = canvasHeight, this.imageScaleX = imageScaleX, this.imageScaleY = imageScaleY, 
+            this.labels = labels || {}, this.createPolygon = new CreatePolygon(canvas, ctx), 
+            this.editDrawPolygon = new EditPolygon(canvas, ctx), this.createPolygon.vertexesChangeEventListener(vertexes => {
+                this.render(), this.createPolygon.drawPolygon(vertexes), this.addVertexes = vertexes;
+            }), this.createPolygon.addCompleted((vertexes, mouseOffset) => {
+                this.addVertexes = vertexes;
+                const {scale: scale, translateX: translateX, translateY: translateY} = getTranslateAndScale(this.ctx), [x, y] = ((vertex, scaleOffset) => {
+                    const {scale: scale, x: offsetX, y: offsetY} = scaleOffset, [x, y] = vertex;
+                    return [ x * scale + offsetX, y * scale + offsetY ];
+                })([ mouseOffset.x, mouseOffset.y ], {
+                    scale: scale,
+                    x: translateX,
+                    y: translateY
+                });
+                this.notifyCreateComplete({
+                    x: x,
+                    y: y
+                });
+            }), this.render(), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseMove = this.onMouseMove.bind(this), 
+            this.onMouseUp = this.onMouseUp.bind(this), this.onMouseClick = this.onMouseClick.bind(this), 
+            this.onMouseDoubleClick = this.onMouseDoubleClick.bind(this);
         }
-        notifyObservers() {
-            this.editPolygonObservers.forEach((listener => {
-                listener(this.editVertexes);
-            }));
+        subscribeCreateComplete(callback) {
+            this.createCompleteSubscribers.add(callback);
         }
-        notifyDrawnPolygonObservers() {
-            this.drawnPolygonObserver?.(this.editVertexes);
+        unsubscribeCreateComplete(callback) {
+            this.createCompleteSubscribers.delete(callback);
         }
-        updatePolygon(callback) {
-            this.editPolygonObservers.push(callback);
+        notifyCreateComplete(mouseOffset) {
+            this.createCompleteSubscribers.forEach(listener => {
+                listener(this.addVertexes, mouseOffset);
+            });
+        }
+        createPolygonEventListener() {
+            this.createPolygon.triggerCreatePolygon();
+        }
+        subscribeEditing(callback) {
+            this.editingSubscribers.add(callback);
+        }
+        unsubscribeEditing(callback) {
+            this.editingSubscribers.delete(callback);
+        }
+        notifyEditing() {
+            this.editingSubscribers.forEach(listener => {
+                listener(this.editVertexes, this.editingShape);
+            });
+        }
+        resetAllInstance() {
+            this.createPolygon.destroy(), this.editDrawPolygon.destroy(), this.onEditorEnd();
         }
-        onDrawnPolygon(callback) {
-            this.drawnPolygonObserver = callback;
+        closeCreateOrEditor() {
+            this.createPolygon.reset();
         }
-        drawPolygons(shapes) {
-            const ctx = this.ctx, {scale: scale} = this.scaleOffset.value, scaleX = this.scaleX, scaleY = this.scaleY;
+        drawShapes(shapes) {
+            const ctx = this.ctx, {scale: scale} = getTranslateAndScale(ctx);
             for (let i = 0; i < shapes.length; i++) {
-                const item = shapes[i], path = vertexesToScale(item.points, scaleX, scaleY);
-                if (!path.length) return;
-                const color = colors[i % colors.length];
-                ctx.beginPath(), ctx.lineWidth = 2 / scale, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2);
-                const startX = path[0][0], startY = path[0][1];
-                ctx.moveTo(startX, startY);
-                for (let i = 1; i < path.length; i++) {
-                    const [x, y] = path[i];
-                    ctx.lineTo(x, y);
-                }
-                ctx.closePath(), ctx.stroke(), ctx.fill();
+                const shape = shapes[i];
+                if (shape.id === this.editingShape?.id) continue;
+                const points = vertexesToImageScale(shape.points, this.imageScaleX, this.imageScaleY);
+                if (!points.length) continue;
+                const path = printsToPath(points), color = colors[i % colors.length];
+                path.closePath(), ctx.beginPath(), ctx.lineWidth = 2 / scale, ctx.strokeStyle = color, 
+                ctx.fillStyle = hexToRgba(color, .2), ctx.stroke(path), ctx.fill(path);
             }
         }
-        drawCanvas=() => {
-            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), this.ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight), 
-            this.ctx.save();
-            const shapes = this.labels.shapes;
-            shapes?.length && this.drawPolygons(shapes), this.ctx.restore();
-        };
+        updateTransform(scaleOffseet) {
+            const ctx = this.ctx, {scale: scale, x: x, y: y} = scaleOffseet;
+            ctx.translate(x, y), ctx.scale(scale, scale);
+        }
+        updateLabelInfo(labelInfo) {
+            this.labels = labelInfo, this.render();
+        }
+        addShape(shape) {
+            this.labels.shapes.push(shape), this.render(), this.createPolygon.reset();
+        }
+        deleteShape(shape) {
+            const index = this.labels.shapes.findIndex(item => item.id === shape.id);
+            -1 !== index && this.labels.shapes.splice(index, 1);
+        }
         render=() => {
-            this.canvas.width = this.canvasWidth, this.scaleOffset.value && (this.ctx.translate(this.scaleOffset.value.x, this.scaleOffset.value.y), 
-            this.ctx.scale(this.scaleOffset.value.scale, this.scaleOffset.value.scale)), this.drawCanvas();
+            const ctx = this.ctx;
+            ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight), 
+            ctx.save();
+            const shapes = this.labels.shapes;
+            shapes?.length && this.drawShapes(shapes), this.editDrawPolygon.render(), ctx.restore();
         };
+        mouseHitShape(event) {
+            const {offsetX: x, offsetY: y} = event, shapes = this.labels.shapes;
+            let hit = !1, hitShape = null;
+            for (let i = 0; i < shapes.length; i++) {
+                const shape = shapes[i], points = vertexesToImageScale(shape.points, this.imageScaleX, this.imageScaleY);
+                if (points.length && shape.shape_type === ShapeType.Polygon) {
+                    if (isPointInPath(x, y, points, this.ctx)) {
+                        hit = !0, hitShape = shape;
+                        break;
+                    }
+                }
+            }
+            return this.canvas.style.cursor = hit ? "pointer" : "default", hitShape;
+        }
+        triggerShapeEdit(shape) {
+            this.render(), this.editDrawPolygon.destroy(), this.editingShape = shape, this.render();
+            const points = vertexesToImageScale(shape.points, this.imageScaleX, this.imageScaleY);
+            this.editDrawPolygon.drawPolygon(points), this.editDrawPolygon.updatePolygon(vertexes => {
+                this.editVertexes = vertexes, this.render();
+            }), this.editDrawPolygon.onEditPolygon(vertexes => {
+                this.editVertexes = vertexes, this.notifyEditing();
+            });
+        }
+        onMouseDoubleClick(e) {
+            e.stopPropagation(), e.preventDefault();
+            this.mouseHitShape(e) || (this.editingShape = null, this.editVertexes = [], this.editDrawPolygon.destroy(), 
+            this.render());
+        }
+        onMouseClick(e) {
+            if (e.stopPropagation(), e.preventDefault(), e.ctrlKey) return;
+            const hitShape = this.mouseHitShape(e);
+            this.editVertexes.length && !hitShape || (hitShape ? this.triggerShapeEdit(hitShape) : (this.editingShape = null, 
+            this.editVertexes = [], this.editDrawPolygon.destroy(), this.render()));
+        }
+        onMouseDown(e) {
+            e.stopPropagation(), e.preventDefault(), this.mouseHitShape(e), e.ctrlKey;
+        }
+        onMouseMove(e) {
+            e.stopPropagation(), e.preventDefault(), e.ctrlKey || this.editingShape || this.mouseHitShape(e);
+        }
+        onMouseUp(e) {
+            e.stopPropagation(), e.preventDefault(), e.ctrlKey || this.mouseHitShape(e);
+        }
+        onEditorStart() {
+            this.canvas.addEventListener("mousedown", this.onMouseDown), this.canvas.addEventListener("mousemove", this.onMouseMove), 
+            this.canvas.addEventListener("mouseup", this.onMouseUp), this.canvas.addEventListener("click", this.onMouseClick), 
+            this.canvas.addEventListener("dblclick", this.onMouseDoubleClick);
+        }
+        onEditorEnd() {
+            this.editVertexes = [], this.editingShape = null, this.editDrawPolygon.destroy(), 
+            this.canvas.removeEventListener("mousedown", this.onMouseDown), this.canvas.removeEventListener("mousemove", this.onMouseMove), 
+            this.canvas.removeEventListener("mouseup", this.onMouseUp), this.canvas.removeEventListener("click", this.onMouseClick), 
+            this.canvas.removeEventListener("dblclick", this.onMouseDoubleClick);
+        }
         destroy() {
-            this.labels = {}, this.editDrawPolygon.destroy(), this.createPolygonVertexes.destroy();
+            this.labels = {}, this.editDrawPolygon.destroy(), this.createPolygon.destroy(), 
+            this.onEditorEnd();
         }
     }
     var CanvasContext = vue.defineComponent({
         props: {
-            classes: {
-                type: Array,
-                default: () => []
-            },
             contextClientHeight: {
                 type: Number,
                 default: null
             },
-            rowInfo: {
+            labelInfo: {
                 type: Object,
                 default: () => ({})
             }
         },
-        emits: [ "editPolygon", "changePolygon" ],
+        emits: [ "editPolygon", "changePolygon", "updateLabelInfo" ],
         setup(props, {emit: emit, expose: expose}) {
-            const ns = vue.inject("ns", {}), scaleTranslateManager = vue.inject("scaleTranslateManager", {}), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = vue.ref(), canvasDragZoom = vue.ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
-                canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px", 
-                canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight, 
-                canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
-            }, loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
+            const ns = vue.inject("ns", {}), classes = vue.inject("classes", vue.ref([])), toolsActive = vue.inject("toolsActive", {}), scaleTranslateManager = vue.inject("scaleTranslateManager", {}), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = vue.ref(), canvasDragZoom = vue.ref(), _labelInfo = vue.ref(props.labelInfo), loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
                 const ctx = canvasBaseRef.value?.getContext("2d");
                 if (rowInfo?.imageSrc) {
                     const image = new Image;
                     image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
                         loadingImage.value = !1;
-                        const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, scaleX: scaleX, scaleY: scaleY, originWidth: originWidth, originHeight: originHeight} = (image => {
+                        const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleX: scaleX, scaleY: scaleY, originWidth: originWidth, originHeight: originHeight} = (image => {
                             const clientWidth = mainBasaeRef.value?.elementInstance.clientWidth, clientHeight = mainBasaeRef.value?.elementInstance.clientHeight;
                             let {width: width, height: height} = image, scaleFactor = 1;
                             const aspect_ratio = width / height;
@@ -7813,61 +8159,88 @@
                             };
                         })(image);
                         image.style.width = canvasWidth + "px", image.style.height = canvasHeight + "px", 
-                        setContainerWidthHeight(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
+                        ((canvasWidth, canvasHeight) => {
+                            canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px", 
+                            canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight, 
+                            canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
+                        })(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
                             canvas: canvasBaseRef.value,
                             ctx: ctx,
                             image: image,
                             canvasWidth: canvasWidth,
                             canvasHeight: canvasHeight,
-                            scaleFactor: scaleFactor,
                             labels: rowInfo.labels,
-                            scaleX: scaleX,
-                            scaleY: scaleY,
-                            scaleOffset: scaleTranslateManager.scaleTranslate
-                        }), drawCanvas.value.updatePolygon((vertexes => {
-                            emit("changePolygon", {
-                                vertexes: vertexes,
-                                canvasWidth: canvasWidth,
-                                canvasHeight: canvasHeight
-                            });
-                        })), drawCanvas.value.onDrawnPolygon((vertexes => {
-                            const new_vertexes = vertexesToScale(vertexes, scaleX, scaleY, !1);
-                            emit("editPolygon", {
-                                vertexes: new_vertexes,
-                                originWidth: originWidth,
-                                originHeight: originHeight
-                            });
-                        })), canvasDragZoom.value = new CanvasSceneDragZoom(canvasBaseRef.value), canvasDragZoom.value.changeZoom((scaleOffset => {
-                            scaleTranslateManager.onChangeScaleTranslate(scaleOffset), drawCanvas.value.render();
-                        }));
+                            imageScaleX: scaleX,
+                            imageScaleY: scaleY
+                        }), canvasDragZoom.value = new CanvasSceneDragZoom(canvasBaseRef.value), canvasDragZoom.value.changeZoom(scaleOffset => {
+                            scaleTranslateManager.onChangeScaleTranslate(scaleOffset), drawCanvas.value.updateTransform(scaleOffset), 
+                            drawCanvas.value.render();
+                        }), drawCanvas.value.subscribeCreateComplete((vertexes, mouseOffset) => {
+                            const new_vertexes = vertexesToImageScale(vertexes, scaleX, scaleY, !1), shape = {
+                                id: timeUniqueId(),
+                                shape_type: ShapeType.Polygon,
+                                points: new_vertexes
+                            };
+                            updateContextmenuLabelFixed(mouseOffset.x, mouseOffset.y, shape);
+                        }), drawCanvas.value.subscribeEditing((vertexes, shape) => {
+                            const new_vertexes = vertexesToImageScale(vertexes, scaleX, scaleY, !1), index = _labelInfo.value.labels.shapes?.findIndex(item => item.id === shape.id);
+                            -1 !== index && (_labelInfo.value.labels.shapes[index] = {
+                                ...shape,
+                                points: new_vertexes
+                            }), _labelInfo.value.labels.imageWidth = originWidth, _labelInfo.value.labels.imageHeight = originHeight, 
+                            emit("editPolygon", _labelInfo.value);
+                        }), vue.watch(() => toolsActive.value, () => {
+                            drawCanvas.value.resetAllInstance(), toolsActive.value === ToolsHandleType.CREATE_POLYGON ? drawCanvas.value.createPolygonEventListener() : toolsActive.value === ToolsHandleType.EDIT_SHAPE && drawCanvas.value.onEditorStart();
+                        }, {
+                            immediate: !0
+                        });
                     }, image.onerror = () => {
                         loadingImage.value = !1;
                     };
                 }
             };
-            vue.onMounted((() => {
-                vue.watch((() => props.rowInfo), (info => {
-                    const rowInfo = vue.toRaw(info);
-                    renderImageLabel(rowInfo);
-                }), {
-                    deep: !0,
-                    immediate: !0
-                }), vue.watch((() => props.contextClientHeight), (height => {
-                    if (valueExist(height)) {
-                        canvasMainRef.value.style.height = height + "px";
-                        const rowInfo = vue.toRaw(props.rowInfo);
-                        renderImageLabel(rowInfo);
-                    }
-                }));
-            })), vue.onUnmounted((() => {
+            vue.onMounted(() => {
+                renderImageLabel(_labelInfo.value), vue.watch(() => props.contextClientHeight, height => {
+                    valueExist(height) && (canvasMainRef.value.style.height = height + "px", renderImageLabel(_labelInfo.value));
+                });
+            }), vue.onUnmounted(() => {
                 drawCanvas.value.destroy(), canvasDragZoom.value.destroy();
-            }));
+            });
+            const contextmenuLabelFixed = vue.ref({
+                show: !1,
+                top: 0,
+                left: 0,
+                activateShape: null
+            }), onCloseContentmenuLabel = () => {
+                contextmenuLabelFixed.value.show = !1, contextmenuLabelFixed.value.top = 0, contextmenuLabelFixed.value.left = 0, 
+                contextmenuLabelFixed.value.activateShape = null, drawCanvas.value.closeCreateOrEditor();
+            }, updateContextmenuLabelFixed = (x, y, shape) => {
+                const contextRect = canvasBaseRef.value.getBoundingClientRect();
+                contextmenuLabelFixed.value.show = !0, contextmenuLabelFixed.value.left = x + contextRect.x, 
+                contextmenuLabelFixed.value.top = y + contextRect.y, contextmenuLabelFixed.value.canvasWidth = canvasBaseRef.value.width, 
+                contextmenuLabelFixed.value.canvasHeight = canvasBaseRef.value.height, contextmenuLabelFixed.value.activateShape = shape;
+            }, contextmenuLabelRect = vue.computed(() => {
+                const {top: top, left: left, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = contextmenuLabelFixed.value;
+                return {
+                    top: top,
+                    left: left,
+                    canvasWidth: canvasWidth,
+                    canvasHeight: canvasHeight
+                };
+            }), onSelectLabel = (label, shape) => {
+                const index = _labelInfo.value.labels.shapes?.findIndex(item => item.id === shape.id);
+                -1 === index ? _labelInfo.value.labels.shapes.push(vue.toRaw(shape)) : _labelInfo.value.labels.shapes[index] = vue.toRaw(shape), 
+                emit("updateLabelInfo", _labelInfo.value), onCloseContentmenuLabel(), drawCanvas.value.updateLabelInfo(_labelInfo.value.labels);
+            }, onDeleteLabel = shape => {
+                const index = _labelInfo.value.labels.shapes?.findIndex(item => item.id === shape.id);
+                -1 !== index && _labelInfo.value.labels.shapes.splice(index, 1), emit("updateLabelInfo", _labelInfo.value), 
+                onCloseContentmenuLabel(), drawCanvas.value.updateLabelInfo(_labelInfo.value.labels);
+            };
             return expose({
                 rerenderImage: () => {
-                    setContainerWidthHeight(0, 0), vue.nextTick((() => {
-                        const rowInfo = vue.toRaw(props.rowInfo);
-                        renderImageLabel(rowInfo);
-                    }));
+                    onCloseContentmenuLabel(), vue.nextTick(() => {
+                        renderImageLabel(_labelInfo.value);
+                    });
                 },
                 resetScaleOffset: () => {
                     canvasDragZoom.value.reset();
@@ -7886,7 +8259,14 @@
                 }, [ vue.createVNode("canvas", {
                     ref: canvasBaseRef,
                     class: [ ns.be("canvas", "context") ]
-                }, null) ]) ]
+                }, null), contextmenuLabelFixed.value.show ? vue.createVNode(ContextMenuLabel, {
+                    fixed: contextmenuLabelRect.value,
+                    classes: classes.value,
+                    activateShape: contextmenuLabelFixed.value.activateShape,
+                    onClose: onCloseContentmenuLabel,
+                    onSelect: onSelectLabel,
+                    onDelete: onDeleteLabel
+                }, null) : null ]) ]
             }) ]);
         }
     }), HeaderTool = vue.defineComponent({
@@ -7931,64 +8311,10 @@
                 "p-id": "4274"
             }, null) ]), vue.createVNode("p", {
                 class: "label-text"
-            }, [ t("next.labelme.saveLabel") ]) ]), vue.createVNode("li", {
-                class: "tool-item"
-            }, [ vue.createVNode("svg", {
-                t: "1721826305513",
-                class: "icon",
-                viewBox: "0 0 1025 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "6215",
-                width: "18",
-                height: "18"
-            }, [ vue.createVNode("path", {
-                d: "M358.5 1021.5c-52.93 0-96-43.07-96-96 0-13.12 2.6-25.84 7.74-37.81l0.12-0.27-141.99-184.66-0.34 0.11a95.806 95.806 0 0 1-29.53 4.64c-52.93 0-96-43.07-96-96s43.07-96 96-96c7.56 0 15.09 0.89 22.41 2.64l0.36 0.09 213.67-370.08-0.16-0.25c-9.34-15.12-14.28-32.54-14.28-50.39 0-52.93 43.07-96 96-96 40.36 0 76.66 25.5 90.34 63.46l0.09 0.26 300.27 61.72 0.19-0.26c18.01-25.16 47.21-40.18 78.11-40.18 52.93 0 96 43.07 96 96 0 36.49-20.26 69.36-52.88 85.79l-0.31 0.16 41.76 393.5 0.25 0.12a96.184 96.184 0 0 1 39.11 34.79c9.85 15.41 15.06 33.27 15.06 51.65 0 52.93-43.07 96-96 96-31.18 0-60.53-15.24-78.52-40.76l-0.22-0.31-396.7 138.78-0.05 0.29c-8.2 45.76-47.94 78.97-94.5 78.97z m0-192c34.03 0 64.82 17.44 82.36 46.66l0.21 0.35L832.93 739.4l0.03-0.32c3.81-39.11 31.82-72.49 69.7-83.05l0.41-0.11-40.34-380.14-0.34-0.08c-39.73-9.82-68.86-43.81-72.49-84.56l-0.03-0.37-283.9-58.36-0.15 0.39c-7 17.7-19.01 32.81-34.72 43.69-16.08 11.13-34.96 17.02-54.59 17.02-9.75 0-19.37-1.46-28.59-4.33l-0.38-0.12L176.19 555.1l0.19 0.26c11.86 16.42 18.12 35.83 18.12 56.14 0 17.74-4.88 35.06-14.11 50.11l-0.18 0.29 136.28 177.25 0.37-0.18c13.04-6.28 27.05-9.47 41.64-9.47z",
-                "p-id": "6216"
-            }, null), vue.createVNode("path", {
-                d: "M416.5 2c40.15 0 76.26 25.37 89.87 63.13l0.19 0.53 0.55 0.11 299.68 61.6 0.64 0.13 0.38-0.53c8.66-12.1 20.19-22.15 33.34-29.06C854.71 90.77 870.06 87 885.5 87c52.66 0 95.5 42.84 95.5 95.5 0 18.03-5.05 35.58-14.6 50.77a95.81 95.81 0 0 1-38 34.57l-0.62 0.31 0.07 0.69 41.7 392.88 0.06 0.55 0.5 0.24c15.91 7.71 29.36 19.68 38.91 34.61 9.8 15.33 14.98 33.09 14.98 51.38 0 52.66-42.84 95.5-95.5 95.5-31.02 0-60.22-15.16-78.11-40.55l-0.43-0.62-0.71 0.25-396.09 138.59-0.55 0.19-0.1 0.57c-3.9 21.77-15.4 41.67-32.39 56.03-17.2 14.54-39.08 22.54-61.62 22.54-52.66 0-95.5-42.84-95.5-95.5 0-13.05 2.59-25.71 7.7-37.61l0.23-0.54-0.36-0.46-141.59-184.16-0.43-0.56-0.67 0.22A95.43 95.43 0 0 1 98.5 707C45.84 707 3 664.16 3 611.5S45.84 516 98.5 516c7.52 0 15.01 0.88 22.29 2.62l0.73 0.17 0.37-0.65 213.33-369.5 0.3-0.52-0.31-0.51c-9.29-15.04-14.2-32.37-14.2-50.12C321 44.84 363.84 2 416.5 2m0 191c-9.7 0-19.27-1.45-28.44-4.31l-0.76-0.24-0.4 0.69-210.98 365.43-0.32 0.56 0.38 0.52C187.77 571.99 194 591.3 194 611.5c0 17.64-4.85 34.88-14.03 49.85l-0.36 0.59 0.42 0.55 135.82 176.65 0.5 0.64 0.73-0.35c12.97-6.26 26.91-9.43 41.42-9.43 16.79 0 33.3 4.42 47.75 12.78a96.095 96.095 0 0 1 34.18 33.63l0.42 0.7 0.77-0.27 391.17-136.87 0.6-0.21 0.06-0.64c1.88-19.33 9.53-37.41 22.11-52.28 12.44-14.71 28.77-25.2 47.22-30.35l0.82-0.23-0.09-0.84-40.26-379.37-0.07-0.7-0.68-0.17c-39.52-9.77-68.5-43.58-72.11-84.12l-0.07-0.74-0.73-0.15-283.12-58.2-0.82-0.17-0.31 0.78c-6.96 17.61-18.91 32.64-34.54 43.46-15.99 11.11-34.77 16.96-54.3 16.96m0-192C363.2 1 320 44.2 320 97.5c0 18.58 5.26 35.93 14.35 50.65l-213.33 369.5A96.669 96.669 0 0 0 98.5 515C45.2 515 2 558.2 2 611.5S45.2 708 98.5 708a96.5 96.5 0 0 0 29.69-4.66l141.59 184.15c-5 11.66-7.78 24.51-7.78 38.01 0 53.3 43.2 96.5 96.5 96.5 47.46 0 86.91-34.25 94.99-79.39l396.08-138.59C867.04 828.81 895.88 845 928.5 845c53.3 0 96.5-43.2 96.5-96.5 0-38.22-22.23-71.26-54.46-86.88l-41.7-392.88C960.37 252.86 982 220.21 982 182.5c0-53.3-43.2-96.5-96.5-96.5-32.37 0-61.01 15.94-78.51 40.39l-299.68-61.6C493.91 27.59 458.31 1 416.5 1z m0 193c40.77 0 75.63-25.28 89.77-61.03l283.12 58.2c3.69 41.4 33.52 75.27 72.87 85l40.26 379.37c-37.74 10.53-66.15 43.41-70.06 83.49L441.29 875.9c-16.87-28.1-47.63-46.9-82.79-46.9-15 0-29.2 3.42-41.86 9.53L180.82 661.88c8.99-14.66 14.18-31.91 14.18-50.38 0-21.07-6.76-40.56-18.22-56.43l210.98-365.42c9.08 2.83 18.73 4.35 28.74 4.35z",
-                "p-id": "6217"
-            }, null) ]), vue.createVNode("p", {
-                class: "label-text"
-            }, [ t("next.labelme.createPolygon") ]) ]), vue.createVNode("li", {
-                class: "tool-item"
-            }, [ vue.createVNode("svg", {
-                t: "1721826424613",
-                class: "icon",
-                viewBox: "0 0 1024 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "7356",
-                width: "18",
-                height: "18"
-            }, [ vue.createVNode("path", {
-                d: "M102.4 870.4v51.2h102.4v51.2H51.2v-102.4h51.2z m870.4-51.2v153.6h-102.4v-51.2h51.2v-102.4h51.2zM409.6 921.6v51.2H358.4v-51.2h51.2z m102.4 0v51.2H460.8v-51.2h51.2z m102.4 0v51.2h-51.2v-51.2h51.2z m102.4 0v51.2h-51.2v-51.2h51.2z m102.4 0v51.2h-51.2v-51.2h51.2zM307.2 921.6v51.2H256v-51.2h51.2z m204.8-742.4a51.2 51.2 0 0 1 51.0464 55.0912l118.8352 68.608a102.4 102.4 0 1 1 96.1536 157.3888v155.136a51.2 51.2 0 1 1-51.6096 80.0256L556.3392 793.6a51.2 51.2 0 1 1-88.7296 0.0512l-169.984-98.2016A51.1488 51.1488 0 0 1 204.8 665.6a51.2 51.2 0 0 1 41.1136-50.176V408.576a51.2 51.2 0 1 1 51.712-79.9744l163.3792-94.3616L460.8 230.4a51.2 51.2 0 0 1 45.2096-50.8416zM102.4 768v51.2H51.2v-51.2h51.2z m870.4-51.2v51.2h-51.2v-51.2h51.2zM297.0624 412.8768l0.1024 222.208 1.024 1.536L486.4 745.2672v-188.928a51.2 51.2 0 0 1-25.2416-38.4L460.8 512v-0.8704L297.0624 412.8768z m399.0528 18.432L563.2 511.1808 563.2 512a51.2 51.2 0 0 1-25.5488 44.3392l-0.0512 188.8768 188.2624-108.6976 0.9216-1.28V452.096a102.6048 102.6048 0 0 1-30.6688-20.7872zM102.4 665.6v51.2H51.2v-51.2h51.2z m870.4-51.2v51.2h-51.2v-51.2h51.2zM102.4 563.2v51.2H51.2v-51.2h51.2z m870.4-51.2v51.2h-51.2v-51.2h51.2zM102.4 460.8v51.2H51.2V460.8h51.2z m387.584-184.1664L326.6048 370.8928l160.6144 96.256a50.8416 50.8416 0 0 1 18.7904-5.9904L512 460.8c9.0112 0 17.5104 2.3552 24.832 6.4l132.9664-79.7184a102.4 102.4 0 0 1-4.0448-34.7648l-131.7888-76.032a50.9952 50.9952 0 0 1-43.9808 0zM972.8 409.6v51.2h-51.2V409.6h51.2zM102.4 358.4v51.2H51.2V358.4h51.2z m870.4-51.2v51.2h-51.2V307.2h51.2zM102.4 256v51.2H51.2V256h51.2z m870.4-51.2v51.2h-51.2V204.8h51.2zM153.6 51.2v51.2H102.4v102.4H51.2V51.2h102.4z m819.2 0v102.4h-51.2V102.4h-102.4V51.2h153.6z m-409.6 0v51.2h-51.2V51.2h51.2z m102.4 0v51.2h-51.2V51.2h51.2z m102.4 0v51.2h-51.2V51.2h51.2zM256 51.2v51.2H204.8V51.2h51.2z m102.4 0v51.2H307.2V51.2h51.2z m102.4 0v51.2H409.6V51.2h51.2z",
-                "p-id": "7357"
-            }, null) ]), vue.createVNode("p", {
-                class: "label-text"
-            }, [ t("next.labelme.editPolygon") ]) ]), vue.createVNode("li", {
-                class: "tool-item"
-            }, [ vue.createVNode("svg", {
-                t: "1721826579655",
-                class: "icon",
-                viewBox: "0 0 1024 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "10996",
-                width: "18",
-                height: "18"
-            }, [ vue.createVNode("path", {
-                d: "M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z",
-                "p-id": "10997"
-            }, null), vue.createVNode("path", {
-                d: "M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z m191.534 0V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z",
-                "p-id": "10998"
-            }, null) ]), vue.createVNode("p", {
-                class: "label-text"
-            }, [ t("next.labelme.deletePolyton") ]) ]) ]), vue.createVNode("ul", {
+            }, [ t("next.labelme.saveLabel") ]) ]) ]), vue.createVNode("ul", {
                 class: [ _ns.be("header", "tool") ]
             }, [ vue.createVNode("li", {
-                class: "hover",
+                class: "tool-item",
                 onClick: () => scaleTranslateManager.onResetScaleTranslate()
             }, [ vue.createVNode("svg", {
                 t: "1725840994827",
@@ -8004,7 +8330,9 @@
                 "p-id": "6052"
             }, null) ]), vue.createVNode("span", {
                 style: "padding-left: 3px"
-            }, [ t("next.labelimg.zoomRestore") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("缩放比例") ]), vue.createVNode("span", null, [ parseInt((100 * scaleTranslate.value.scale).toString()), vue.createTextVNode("%") ]), vue.createVNode("span", {
+            }, [ t("next.labelimg.zoomRestore") ]) ]), vue.createVNode("li", {
+                style: "color: #999; user-select: none; cursor: default;"
+            }, [ vue.createVNode("span", null, [ vue.createTextVNode("缩放比例") ]), vue.createVNode("span", null, [ parseInt((100 * scaleTranslate.value.scale).toString()), vue.createTextVNode("%") ]), vue.createVNode("span", {
                 style: "padding: 0 10px;"
             }, [ vue.createTextVNode("偏移量") ]), vue.createVNode("span", {
                 style: "min-width: 120px; text-align: left;"
@@ -8029,7 +8357,7 @@
                 }) ]),
                 default: () => vue.createVNode("ul", {
                     style: "font-size: 12px;white-space: nowrap;"
-                }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+                }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("Ctrl+鼠标：") ]), vue.createVNode("span", null, [ vue.createTextVNode("按住Ctrl键+鼠标滚动可以缩放图片，按住Ctrl+左键拖动可以移动图片") ]) ]) ])
             }) ]), props.isFullscreen ? vue.createVNode("li", {
                 class: "tool-item",
                 onClick: () => switchFillscreen(!1)
@@ -8072,9 +8400,195 @@
                 }, null) ]) ]
             }) ]) ]) ]) ]);
         }
-    }), defaultConfig = {
-        minContentHeight: 500
-    };
+    }), LeftTools = vue.defineComponent({
+        props: {},
+        emits: [ "change" ],
+        setup(props, {emit: emit}) {
+            const {t: t} = useLocale(), _ns = vue.inject("ns", {}), toolsActive = vue.inject("toolsActive", {}), changeToolsActive = vue.inject("changeToolsActive"), onClickToolsActive = type => {
+                changeToolsActive(type), emit("change", type);
+            };
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
+                class: [ _ns.be("main", "left-tools") ]
+            }, [ vue.createVNode("li", {
+                class: [ "tool-item", {
+                    "active-tool": toolsActive.value === ToolsHandleType.CREATE_POLYGON
+                } ],
+                onClick: () => onClickToolsActive(ToolsHandleType.CREATE_POLYGON)
+            }, [ vue.createVNode("svg", {
+                t: "1757513720352",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "4548",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M938.456035 455.122739a85.314185 85.314185 0 0 1-85.371061-85.314185c0-12.342119 2.900682-23.944848 7.678277-34.523807l-5.630736-3.241939 28.89307-48.970342 17.972855 10.351454c11.14772-5.346356 23.262334-8.872675 36.457595-8.872675a85.314185 85.314185 0 1 1 0 170.571494z m-56.648618 172.050273l33.898169-166.760793 56.307362 11.204596-33.898169 166.760794-56.307362-11.204597z m39.415153 94.528117l-5.403232 26.333645v0.170629l-0.056876 0.227504-0.056876 0.227505v0.170628l-0.056876 0.056876-0.056876 0.341257-13.138385 64.725028c21.27167 15.527182 36.002586 39.415153 36.002586 67.796339a85.314185 85.314185 0 0 1-85.371061 85.257309c-26.618026 0-49.425351-12.91088-65.066285-32.078133l-17.574722 1.933788-0.73939 0.056876-0.113752 0.056876-0.682513 0.056876h-0.170629l-0.113752 0.056876-108.007758 11.716482-6.31325-56.307362 113.809123-12.398995a84.631672 84.631672 0 0 1 79.114688-82.527255l17.688474-87.077345 56.307362 11.204596z m-289.328839-518.141483l28.89307-49.027219 148.844815 85.712318-28.893071 48.970342-148.844814-85.655441z m-74.39397-42.827721l-19.394758-11.147721c-14.844668 12.683376-33.556913 21.157918-54.657954 21.157918a84.745424 84.745424 0 0 1-30.940612-6.199497l-51.984776 47.605315-39.073897-41.576446 48.458457-44.363376A82.697883 82.697883 0 0 1 398.132864 85.427937a85.314185 85.314185 0 1 1 170.62837 0c0 5.118851-2.04754 9.612065-2.957559 14.446536l20.589157 11.830233-28.893071 49.027219zM172.050273 343.986794l126.264994-115.629159 39.073897 41.576446-126.264994 115.629159-39.073897-41.576446z m-23.489839 173.358424l-16.323447 7.166392a82.982264 82.982264 0 0 1-27.300539 12.000862l-8.8158 3.867576-0.853141-1.933788c-3.412567 0.398133-6.427002 1.990664-9.953322 1.990664a85.314185 85.314185 0 1 1 85.314185-85.314185c0 22.750449-9.213932 43.168978-23.717343 58.468655l1.649407 3.753824z m105.107076 233.13523l-52.439786 23.03483-53.804812-119.269231v-0.170628a8.531419 8.531419 0 0 1-0.682514-1.47878l-0.056876-0.056876-0.455009-1.137522H146.171637l-0.113752-0.284381-0.056876-0.113752-0.625638-1.478779-0.341256-0.682514-0.056877-0.113752-0.113752-0.284381-0.398133-0.796265v-0.113753l-0.227504-0.455009-0.056876-0.113752-0.056876-0.170628-0.056877-0.056876-0.056876-0.113753-0.056876-0.113752-0.056876-0.28438-0.398133-0.796266-12.342119-27.357415 52.439786-23.03483 70.071384 155.442445z m-17.404094 100.727614l52.439786-23.03483 12.342119 27.471168c4.038205-0.568761 7.564524-2.388797 11.773357-2.388797A85.314185 85.314185 0 1 1 227.447617 938.626664c0-22.067936 8.929551-41.690198 22.636697-56.819247l-13.820898-30.599355z m332.440941 50.562874l6.31325 56.364238-171.197131 18.655369-6.31325-56.364239 171.197131-18.655368z",
+                "p-id": "4549"
+            }, null) ]), vue.createVNode("p", {
+                class: "label-text"
+            }, [ t("next.labelme.createPolygon") ]) ]), vue.createVNode("li", {
+                class: [ "tool-item", {
+                    "active-tool": toolsActive.value === ToolsHandleType.EDIT_SHAPE
+                } ],
+                onClick: () => onClickToolsActive(ToolsHandleType.EDIT_SHAPE)
+            }, [ vue.createVNode("svg", {
+                t: "1757513760776",
+                class: "icon",
+                viewBox: "0 0 1025 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "4712",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M358.5 1021.5c-52.93 0-96-43.07-96-96 0-13.12 2.6-25.84 7.74-37.81l0.12-0.27-141.99-184.66-0.34 0.11a95.806 95.806 0 0 1-29.53 4.64c-52.93 0-96-43.07-96-96s43.07-96 96-96c7.56 0 15.09 0.89 22.41 2.64l0.36 0.09 213.67-370.08-0.16-0.25c-9.34-15.12-14.28-32.54-14.28-50.39 0-52.93 43.07-96 96-96 40.36 0 76.66 25.5 90.34 63.46l0.09 0.26 300.27 61.72 0.19-0.26c18.01-25.16 47.21-40.18 78.11-40.18 52.93 0 96 43.07 96 96 0 36.49-20.26 69.36-52.88 85.79l-0.31 0.16 41.76 393.5 0.25 0.12a96.184 96.184 0 0 1 39.11 34.79c9.85 15.41 15.06 33.27 15.06 51.65 0 52.93-43.07 96-96 96-31.18 0-60.53-15.24-78.52-40.76l-0.22-0.31-396.7 138.78-0.05 0.29c-8.2 45.76-47.94 78.97-94.5 78.97z m0-192c34.03 0 64.82 17.44 82.36 46.66l0.21 0.35L832.93 739.4l0.03-0.32c3.81-39.11 31.82-72.49 69.7-83.05l0.41-0.11-40.34-380.14-0.34-0.08c-39.73-9.82-68.86-43.81-72.49-84.56l-0.03-0.37-283.9-58.36-0.15 0.39c-7 17.7-19.01 32.81-34.72 43.69-16.08 11.13-34.96 17.02-54.59 17.02-9.75 0-19.37-1.46-28.59-4.33l-0.38-0.12L176.19 555.1l0.19 0.26c11.86 16.42 18.12 35.83 18.12 56.14 0 17.74-4.88 35.06-14.11 50.11l-0.18 0.29 136.28 177.25 0.37-0.18c13.04-6.28 27.05-9.47 41.64-9.47z",
+                "p-id": "4713"
+            }, null), vue.createVNode("path", {
+                d: "M416.5 2c40.15 0 76.26 25.37 89.87 63.13l0.19 0.53 0.55 0.11 299.68 61.6 0.64 0.13 0.38-0.53c8.66-12.1 20.19-22.15 33.34-29.06C854.71 90.77 870.06 87 885.5 87c52.66 0 95.5 42.84 95.5 95.5 0 18.03-5.05 35.58-14.6 50.77a95.81 95.81 0 0 1-38 34.57l-0.62 0.31 0.07 0.69 41.7 392.88 0.06 0.55 0.5 0.24c15.91 7.71 29.36 19.68 38.91 34.61 9.8 15.33 14.98 33.09 14.98 51.38 0 52.66-42.84 95.5-95.5 95.5-31.02 0-60.22-15.16-78.11-40.55l-0.43-0.62-0.71 0.25-396.09 138.59-0.55 0.19-0.1 0.57c-3.9 21.77-15.4 41.67-32.39 56.03-17.2 14.54-39.08 22.54-61.62 22.54-52.66 0-95.5-42.84-95.5-95.5 0-13.05 2.59-25.71 7.7-37.61l0.23-0.54-0.36-0.46-141.59-184.16-0.43-0.56-0.67 0.22A95.43 95.43 0 0 1 98.5 707C45.84 707 3 664.16 3 611.5S45.84 516 98.5 516c7.52 0 15.01 0.88 22.29 2.62l0.73 0.17 0.37-0.65 213.33-369.5 0.3-0.52-0.31-0.51c-9.29-15.04-14.2-32.37-14.2-50.12C321 44.84 363.84 2 416.5 2m0 191c-9.7 0-19.27-1.45-28.44-4.31l-0.76-0.24-0.4 0.69-210.98 365.43-0.32 0.56 0.38 0.52C187.77 571.99 194 591.3 194 611.5c0 17.64-4.85 34.88-14.03 49.85l-0.36 0.59 0.42 0.55 135.82 176.65 0.5 0.64 0.73-0.35c12.97-6.26 26.91-9.43 41.42-9.43 16.79 0 33.3 4.42 47.75 12.78a96.095 96.095 0 0 1 34.18 33.63l0.42 0.7 0.77-0.27 391.17-136.87 0.6-0.21 0.06-0.64c1.88-19.33 9.53-37.41 22.11-52.28 12.44-14.71 28.77-25.2 47.22-30.35l0.82-0.23-0.09-0.84-40.26-379.37-0.07-0.7-0.68-0.17c-39.52-9.77-68.5-43.58-72.11-84.12l-0.07-0.74-0.73-0.15-283.12-58.2-0.82-0.17-0.31 0.78c-6.96 17.61-18.91 32.64-34.54 43.46-15.99 11.11-34.77 16.96-54.3 16.96m0-192C363.2 1 320 44.2 320 97.5c0 18.58 5.26 35.93 14.35 50.65l-213.33 369.5A96.669 96.669 0 0 0 98.5 515C45.2 515 2 558.2 2 611.5S45.2 708 98.5 708a96.5 96.5 0 0 0 29.69-4.66l141.59 184.15c-5 11.66-7.78 24.51-7.78 38.01 0 53.3 43.2 96.5 96.5 96.5 47.46 0 86.91-34.25 94.99-79.39l396.08-138.59C867.04 828.81 895.88 845 928.5 845c53.3 0 96.5-43.2 96.5-96.5 0-38.22-22.23-71.26-54.46-86.88l-41.7-392.88C960.37 252.86 982 220.21 982 182.5c0-53.3-43.2-96.5-96.5-96.5-32.37 0-61.01 15.94-78.51 40.39l-299.68-61.6C493.91 27.59 458.31 1 416.5 1z m0 193c40.77 0 75.63-25.28 89.77-61.03l283.12 58.2c3.69 41.4 33.52 75.27 72.87 85l40.26 379.37c-37.74 10.53-66.15 43.41-70.06 83.49L441.29 875.9c-16.87-28.1-47.63-46.9-82.79-46.9-15 0-29.2 3.42-41.86 9.53L180.82 661.88c8.99-14.66 14.18-31.91 14.18-50.38 0-21.07-6.76-40.56-18.22-56.43l210.98-365.42c9.08 2.83 18.73 4.35 28.74 4.35z",
+                "p-id": "4714"
+            }, null) ]), vue.createVNode("p", {
+                class: "label-text"
+            }, [ t("next.labelme.editPolygon") ]) ]), vue.createVNode("li", {
+                class: [ "tool-item", {
+                    "active-tool": toolsActive.value === ToolsHandleType.CREATE_RECTANGLE
+                } ],
+                onClick: () => onClickToolsActive(ToolsHandleType.CREATE_RECTANGLE)
+            }, [ vue.createVNode("svg", {
+                t: "1757513985670",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "7834",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M273.9 168.3H739v37.1H273.9zM273.9 819.6H739v37.1H273.9zM165.812 740.898v-465.1h37.1v465.1zM821.11 740.896v-465.1h37.1v465.1z",
+                "p-id": "7835"
+            }, null), vue.createVNode("path", {
+                d: "M184.7 66.2c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.5c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.7-37 82.7-82.7 82.7zM184.7 717.5c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.6c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.6-37 82.7-82.7 82.7zM840 717.5c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.6c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.6-37 82.7-82.7 82.7zM840 66.2c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.5c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.7-37 82.7-82.7 82.7z",
+                "p-id": "7836"
+            }, null) ]), vue.createVNode("p", {
+                class: "label-text"
+            }, [ t("next.labelme.createRectangle") ]) ]), vue.createVNode("li", {
+                class: [ "tool-item", {
+                    "active-tool": toolsActive.value === ToolsHandleType.CREATE_CIRCLE
+                } ],
+                onClick: () => onClickToolsActive(ToolsHandleType.CREATE_CIRCLE)
+            }, [ vue.createVNode("svg", {
+                t: "1757514108844",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "8822",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M512 39.613153A472.386847 472.386847 0 1 1 39.613153 512 472.386847 472.386847 0 0 1 512 39.613153m0-39.613153a512 512 0 1 0 512 512A512 512 0 0 0 512 0z",
+                "p-id": "8823"
+            }, null) ]), vue.createVNode("p", {
+                class: "label-text"
+            }, [ t("next.labelme.createCircle") ]) ]) ]) ]);
+        }
+    }), RightLabel = vue.defineComponent({
+        props: {
+            shapes: {
+                type: Array,
+                default: () => []
+            }
+        },
+        emits: [ "delete", "update" ],
+        setup(props, {emit: emit}) {
+            const {t: t} = useLocale(), _ns = vue.inject("ns", {}), classes = vue.inject("classes", vue.ref([])), _classes = vue.unref(classes), formatlabelColor = lebel => {
+                const index = _classes.findIndex(item => item === lebel);
+                return -1 === index ? "#5470c6" : colors[index];
+            }, shapes = vue.toRef(props, "shapes"), formColumns = [ {
+                prop: "group_id",
+                label: t("next.labelme.labelGroupId"),
+                type: "input"
+            }, {
+                prop: "description",
+                label: t("next.labelme.labelDescription"),
+                type: "textarea"
+            } ], shapeEditDialog = vue.reactive({
+                visible: !1,
+                title: "",
+                shapeInfo: {}
+            }), onCloseShapeEditDialog = () => {
+                shapeEditDialog.visible = !1, shapeEditDialog.title = "", shapeEditDialog.shapeInfo = {};
+            }, onSubmitShapeChange = (shape, done) => {
+                emit("update", deepClone(shape)), done(), onCloseShapeEditDialog();
+            }, renderContent = () => vue.createVNode("div", {
+                class: [ _ns.be("main", "right-label") ]
+            }, [ shapes.value.length ? vue.createVNode("ul", null, [ shapes.value.map((shape, index) => vue.createVNode("li", {
+                class: [ _ns.be("right-label", "label-item") ],
+                key: index
+            }, [ vue.createVNode("div", {
+                class: [ _ns.be("right-label", "label-content") ]
+            }, [ vue.createVNode("span", {
+                class: "label-line",
+                style: {
+                    backgroundColor: formatlabelColor(shape.label)
+                }
+            }, null), vue.createVNode("span", null, [ shape.label, shape.group_id ? ` ( ${shape.group_id} )` : null ]) ]), vue.createVNode("div", {
+                class: [ _ns.be("right-label", "label-btns") ]
+            }, [ vue.createVNode(elementPlus.ElIcon, {
+                size: 16,
+                style: {
+                    marginRight: "6px"
+                },
+                onClick: event => {
+                    event.preventDefault(), event.stopPropagation(), (shape => {
+                        shapeEditDialog.visible = !0, shapeEditDialog.title = shape.label, shapeEditDialog.shapeInfo = shape;
+                    })(shape);
+                }
+            }, {
+                default: () => [ vue.createVNode(edit_default, null, null) ]
+            }), vue.createVNode(elementPlus.ElPopconfirm, {
+                title: t("next.labelme.confirmDeleteLabel"),
+                width: 200,
+                onConfirm: () => (shape => {
+                    emit("delete", shape);
+                })(shape)
+            }, {
+                reference: () => vue.createVNode(elementPlus.ElIcon, {
+                    size: 16,
+                    color: "#ff0000",
+                    onClick: event => {
+                        event.preventDefault(), event.stopPropagation();
+                    }
+                }, {
+                    default: () => [ vue.createVNode(delete_default, null, null) ]
+                })
+            }) ]) ])) ]) : vue.createVNode(elementPlus.ElEmpty, {
+                "image-size": 100,
+                description: t("next.labelme.emptyLabelText")
+            }, null), vue.createVNode(NextDialog, {
+                modelValue: shapeEditDialog.visible,
+                "onUpdate:modelValue": $event => shapeEditDialog.visible = $event,
+                title: shapeEditDialog.title,
+                width: 350,
+                fullscreen: !1,
+                fullscreenBtn: !1,
+                closeOnClickModal: !0,
+                onClose: onCloseShapeEditDialog
+            }, {
+                default: () => [ vue.createVNode(NextForm, {
+                    options: {
+                        labelPosition: "top",
+                        colSpanFixed: 24
+                    },
+                    columns: formColumns,
+                    formDatum: shapeEditDialog.shapeInfo,
+                    onSubmit: onSubmitShapeChange
+                }, null) ]
+            }) ]);
+            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
+        }
+    });
     const ns = useNamespace("labelme");
     var Element = vue.defineComponent({
         name: "NextLabelme",
@@ -8102,40 +8616,50 @@
         },
         emits: [ "change", "save", "edit-polygon", "change-polygon", "prev-click", "next-click" ],
         setup(props, {emit: emit, slots: slots}) {
-            const _config = deepClone(defaultConfig), _options = vue.computed((() => {
+            const _config = deepClone(defaultConfig), _options = vue.computed(() => {
                 const cfg = vue.unref(props.options);
                 return merge(_config, cfg);
-            })), options = vue.unref(_options);
+            }), options = vue.unref(_options);
             vue.provide("ns", ns);
-            const {t: t} = useLocale(), activateNodeIndex = vue.ref(0), classes = vue.ref(props.classes), labelImages = vue.ref(deepClone(props.data));
-            vue.watch((() => props.data), (data => {
+            const {t: t} = useLocale(), activateNodeIndex = vue.ref(0), classes = vue.ref(props.classes);
+            vue.provide("classes", classes);
+            const toolsActive = vue.ref("");
+            vue.provide("toolsActive", toolsActive), vue.provide("changeToolsActive", val => {
+                toolsActive.value = val;
+            });
+            const labelImages = vue.ref(deepClone(props.data));
+            vue.watch(() => props.data, data => {
                 labelImages.value = deepClone(data);
-            }), {
+            }, {
                 deep: !0
-            }), vue.watch((() => props.data.length), (() => {
+            }), vue.watch(() => props.data.length, () => {
                 activateNodeIndex.value = 0;
-            })), vue.watch((() => props.classes), (val => {
-                classes.value = val;
-            }), {
-                deep: !0
             });
-            const currentNode = vue.computed((() => {
+            const currentNode = vue.computed(() => {
                 if (!labelImages.value) return {};
                 const node = labelImages.value[activateNodeIndex.value] || {};
                 return deepClone(node);
-            })), loading = vue.ref(!1), mainContentHeight = vue.ref(options.minContentHeight), canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), updateMainContentHeight = () => {
-                vue.nextTick((() => {
+            }), onUpdateLabelInfo = val => {
+                labelImages.value[activateNodeIndex.value] = val;
+            }, onDeleteLabelShape = shape => {
+                const node = currentNode.value, index = node.labels?.shapes?.findIndex(item => item.id === shape.id);
+                -1 !== index && node.labels.shapes.splice(index, 1), labelImages.value[activateNodeIndex.value] = node;
+            }, onUpdateLabelShape = shape => {
+                const node = currentNode.value, index = node.labels?.shapes?.findIndex(item => item.id === shape.id);
+                -1 !== index && (node.labels.shapes[index] = shape), labelImages.value[activateNodeIndex.value] = node;
+            }, loading = vue.ref(!1), mainContentHeight = vue.ref(options.minContentHeight), canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), updateMainContentHeight = () => {
+                vue.nextTick(() => {
                     const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
                     mainContentHeight.value = contentHeight;
-                }));
+                });
             };
-            vue.onMounted((() => {
-                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+            vue.onMounted(() => {
+                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, () => {
                     updateMainContentHeight();
-                })), window.addEventListener("resize", updateMainContentHeight);
-            })), vue.onUnmounted((() => {
+                }), window.addEventListener("resize", updateMainContentHeight);
+            }), vue.onUnmounted(() => {
                 document.removeEventListener("keydown", onKeydownPrevNext), window.removeEventListener("resize", updateMainContentHeight);
-            }));
+            });
             const onKeydownPrevNext = () => {}, onPaginationPrev = () => {
                 const imageLength = labelImages.value.length;
                 let i = activateNodeIndex.value - 1;
@@ -8150,20 +8674,20 @@
                 const node = currentNode.value;
                 return emit("save", {
                     node: node
-                }, (imageItem => {
+                }, imageItem => {
                     labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index, 
                     loading.value = !1;
-                }), (() => {
+                }, () => {
                     loading.value = !1;
-                })), !0;
+                }), !0;
             }, isFullscreen = vue.ref(!1), onSwitchFillscreen = val => {
-                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
+                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick(() => {
                     canvasContextRef.value.rerenderImage();
-                }));
+                });
             }, onChangePolygon = node => {
                 currentNode.value.labels = node, emit("change-polygon", node);
-            }, onEditPlygon = node => {
-                currentNode.value.labels = node, emit("edit-polygon", node);
+            }, onEditPolygon = node => {
+                emit("edit-polygon", node);
             }, onToolHeaderSave = () => {
                 onChangeActivateNode(activateNodeIndex.value) || elementPlus.ElMessage({
                     type: "info",
@@ -8207,17 +8731,22 @@
                     }, null) ]), vue.createVNode("div", {
                         ref: mainRef,
                         class: [ ns.b("main") ]
-                    }, [ vue.createVNode("div", {
+                    }, [ vue.createVNode(LeftTools, null, null), vue.createVNode("div", {
                         class: [ ns.be("main", "content") ],
                         style: {
                             height: mainContentHeight.value + "px"
                         }
                     }, [ vue.createVNode(CanvasContext, {
                         ref: canvasContextRef,
-                        rowInfo: currentNode.value,
-                        onEditPolygon: onEditPlygon,
-                        onChangePolygon: onChangePolygon
-                    }, null) ]) ]), vue.createVNode("footer", {
+                        labelInfo: currentNode.value,
+                        onEditPolygon: onEditPolygon,
+                        onChangePolygon: onChangePolygon,
+                        onUpdateLabelInfo: onUpdateLabelInfo
+                    }, null) ]), vue.createVNode(RightLabel, {
+                        shapes: currentNode.value.labels?.shapes,
+                        onUpdate: onUpdateLabelShape,
+                        onDelete: onDeleteLabelShape
+                    }, null) ]), vue.createVNode("footer", {
                         ref: footerRef,
                         class: [ ns.b("footer") ]
                     }, [ vue.createVNode("div", {
@@ -8233,7 +8762,7 @@
                     }, [ vue.createVNode(elementPlus.ElScrollbar, null, {
                         default: () => [ vue.createVNode("ul", {
                             class: [ ns.bem("footer", "center", "list") ]
-                        }, [ labelImages.value.map(((item, index) => vue.createVNode("li", {
+                        }, [ labelImages.value.map((item, index) => vue.createVNode("li", {
                             key: index,
                             onClick: () => onChangeActivateNode(index),
                             class: {
@@ -8246,7 +8775,7 @@
                             "max-scale": 2,
                             "min-scale": .2,
                             fit: "cover"
-                        }, null) ]))) ]) ]
+                        }, null) ])) ]) ]
                     }) ]), vue.createVNode("div", {
                         class: [ ns.be("footer", "right") ]
                     }, [ vue.createVNode(elementPlus.ElIcon, {
@@ -8292,7 +8821,7 @@
                 var value;
                 zoomDomBindData[1] = zoomDomBindData[1] ? zoomDomBindData[1] : ".el-dialog__body", 
                 zoomDomBindData[2] = void 0 !== zoomDomBindData[2] && zoomDomBindData[2], zoomDomBindData[3] = void 0 === zoomDomBindData[3] || zoomDomBindData[3], 
-                vue.nextTick((() => {
+                vue.nextTick(() => {
                     const zoomDom = document.querySelector(zoomDomBindData[1]), zoomDomBox = document.querySelector(zoomDomBindData[0]), zoomHandleEl = document.createElement("div");
                     zoomHandleEl.className = "dialog-zoom", zoomHandleEl.onmouseenter = () => {
                         zoomHandleEl.onmousedown = e => {
@@ -8313,22 +8842,22 @@
                             };
                         };
                     }, zoomDomBox.appendChild(zoomHandleEl);
-                }));
+                });
             }
         });
     }, configProviderContextKey = Symbol("configProviderContextKey"), install = function(app, options) {
-        if (Object.keys(components).forEach((key => {
+        if (Object.keys(components).forEach(key => {
             const component = components[key];
             app.component(component.name, component);
-        })), (app => {
+        }), (app => {
             zoomDialog(app);
         })(app), options) {
             const inSetup = !!vue.getCurrentInstance();
-            (app?.provide ?? (inSetup ? vue.provide : void 0))(configProviderContextKey, vue.computed((() => options)));
+            (app?.provide ?? (inSetup ? vue.provide : void 0))(configProviderContextKey, vue.computed(() => options));
         }
     };
     var index = {
-        version: "0.5.9",
+        version: "0.6.0",
         install: install
     };
     exports.NextCarousel = NextCarousel, exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, 
@@ -8344,8 +8873,8 @@
     exports.namespaceContextKey = namespaceContextKey, exports.nextUseCssTheme = nextUseCssTheme, 
     exports.nextUseCssVar = nextUseCssVar, exports.translate = translate, exports.updateThemeColor = color => {
         color && nextUseCssTheme("--el-color-primary", color);
-    }, exports.updateThemeColorCssVar = updateThemeColorCssVar, exports.useDetectVideo = () => ({
-        detectVideoFrameImage: ({container: container, video: video, modelUrl: modelUrl, classNames: classNames, classInput: classInput = []}, success, error) => modelUrl ? classNames ? void tf__namespace.loadGraphModel(modelUrl).then((model => {
+    }, exports.updateThemeColorCssVar = updateThemeColorCssVar, exports.useDetectVideo = tf => ({
+        detectVideoFrameImage: ({container: container, video: video, modelUrl: modelUrl, classNames: classNames, classInput: classInput = []}, success, error) => modelUrl ? classNames ? void tf.loadGraphModel(modelUrl).then(model => {
             const canvas = document.createElement("canvas"), ctx = canvas.getContext("2d");
             canvas.style.position = "absolute", canvas.style.zIndex = "99", canvas.style.pointerEvents = "none", 
             container && container.appendChild(canvas);
@@ -8356,7 +8885,7 @@
                 canvas.style.left = offsetLeft + "px", canvas.style.width = clientWidth + "px", 
                 canvas.style.height = clientHeight + "px", detectCanvas.width = videoWidth, detectCanvas.height = videoHeight, 
                 detectCanvas.style.width = clientWidth + "px", detectCanvas.style.height = clientHeight + "px", 
-                detectVideoFrame(video, model, ctx, tf__namespace, classNames, classInput, detect_ctx, ((name, score) => {
+                detectVideoFrame(video, model, ctx, tf, classNames, classInput, detect_ctx, (name, score) => {
                     const type = "image/png";
                     let imageDataURL = canvas.toDataURL(type, .92).replace(type, "image/octet-stream");
                     imageDataURL = imageDataURL.replace(/^data:image\/[^;]+/, "data:application/octet-stream");
@@ -8370,14 +8899,14 @@
                         canvas: canvas,
                         imageDataURL: imageDataURL
                     });
-                }));
+                });
             };
-        })) : (error && error("模型类别不能未空"), !1) : (error && error("模型文件地址不能为空"), !1)
+        }) : (error && error("模型类别不能未空"), !1) : (error && error("模型文件地址不能为空"), !1)
     }), exports.useGetDerivedNamespace = useGetDerivedNamespace, exports.useLanguage = (locale, lang) => {
         const localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
         localeRef.value.name = lang, localeRef.value.next = nextLang.next;
-    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.5.9", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.6.0", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });
-}));
+});