next-element-vue 0.5.9 → 0.6.0

package/dist/index.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：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
  */
 
@@ -13,8 +13,6 @@ import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollb
 
 import { useDateFormat, useNow, useFullscreen } from "@vueuse/core";
 
-import * as tf from "@tensorflow/tfjs";
-
 import videojs from "video.js";
 
 import "video.js/dist/video-js.css";
@@ -31,7 +29,7 @@ const defaultNamespace = "next", _bem = (namespace, block, blockSuffix, element,
     modifier && (cls += `--${modifier}`), cls;
 }, namespaceContextKey = Symbol("namespaceContextKey"), useGetDerivedNamespace = namespaceOverrides => {
     const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref("next")) : ref("next"));
-    return computed((() => unref(derivedNamespace) || "next"));
+    return computed(() => unref(derivedNamespace) || "next");
 }, useNamespace = (block, namespaceOverrides) => {
     const namespace = useGetDerivedNamespace(namespaceOverrides);
     return {
@@ -256,7 +254,7 @@ function isArrayLike(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) {
@@ -269,7 +267,7 @@ function createAssigner(assigner) {
             source && assigner(object, source, index, customizer);
         }
         return object;
-    }));
+    });
 }
 
 var objectProto$a = Object.prototype;
@@ -468,16 +466,16 @@ function memoize(func, resolver) {
 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) {
@@ -541,9 +539,9 @@ var propertyIsEnumerable = Object.prototype.propertyIsEnumerable, nativeGetSymbo
             predicate(value, index, array) && (result[resIndex++] = value);
         }
         return result;
-    }(nativeGetSymbols(object), (function(symbol) {
+    }(nativeGetSymbols(object), function(symbol) {
         return propertyIsEnumerable.call(object, symbol);
-    })));
+    }));
 } : function() {
     return [];
 };
@@ -620,10 +618,10 @@ function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
             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;
             }
@@ -637,16 +635,16 @@ function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
 
 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;
@@ -793,21 +791,25 @@ function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, sta
 }
 
 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: "加载中...",
@@ -887,9 +889,18 @@ var merge = createAssigner((function(object, source, srcIndex) {
         },
         labelme: {
             saveLabel: "保存",
+            confirmDeleteLabel: "确定要删除该标注吗？",
+            emptyLabelText: "暂无标签数据",
             createPolygon: "创建多边形",
             editPolygon: "编辑多边形",
-            deletePolyton: "删除多边形"
+            deletePolyton: "删除多边形",
+            createRectangle: "创建矩形",
+            createCircle: "创建圆形",
+            selectClasses: "选择标签",
+            emptyClassesText: "暂无标注",
+            deleteClasses: "删除标注",
+            labelGroupId: "分组ID",
+            labelDescription: "标注描述"
         }
     }
 }, enLocale = {
@@ -972,9 +983,18 @@ var merge = createAssigner((function(object, source, srcIndex) {
         },
         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 = {
@@ -1048,15 +1068,27 @@ var merge = createAssigner((function(object, source, srcIndex) {
         },
         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: "標註描述"
         }
     }
 };
@@ -1071,8 +1103,8 @@ const localeLang = {
     [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, unref(locale)), buildLocaleContext = locale => {
-    const lang = computed((() => unref(locale).name)), localeRef = isRef(locale) ? locale : 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, unref(locale)), buildLocaleContext = locale => {
+    const lang = computed(() => unref(locale).name), localeRef = isRef(locale) ? locale : ref(locale), nextLang = localeLang[lang.value] || localeLang["zh-cn"];
     return localeRef.value.next = nextLang.next, {
         lang: lang,
         locale: localeRef,
@@ -1080,7 +1112,7 @@ const localeLang = {
     };
 }, localeContextKey = localeContextKey$1, useLocale = localeOverrides => {
     const locale = localeOverrides || inject(localeContextKey, ref());
-    return buildLocaleContext(computed((() => locale?.value || zhcnLocale)));
+    return buildLocaleContext(computed(() => locale?.value || zhcnLocale));
 }, useLanguage = (locale, lang) => {
     const localeRef = isRef(locale) ? locale : ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
     localeRef.value.name = lang, localeRef.value.next = nextLang.next;
@@ -1088,8 +1120,8 @@ const localeLang = {
 
 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 => {
@@ -1116,8 +1148,8 @@ function useChangeColor() {
         },
         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;
@@ -1160,9 +1192,9 @@ const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssv
 }, 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));
@@ -1180,7 +1212,7 @@ const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssv
             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), 
@@ -1188,14 +1220,14 @@ const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssv
                     }
                 }
             } 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;
@@ -1204,8 +1236,8 @@ const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssv
     dh = height, dx = 0, dy = 0) : mediaRatio < canvasRatio && (dw = height * mediaRatio, 
     dh = height, dx = Math.round((width - dw) / 2), dy = 0), ctx.drawImage(videoElement, 0, 0, sw, sh, dx, dy, dw, dh), 
     ctx;
-}, useDetectVideo = () => ({
-    detectVideoFrameImage: ({container: container, video: video, modelUrl: modelUrl, classNames: classNames, classInput: classInput = []}, success, error) => modelUrl ? classNames ? void tf.loadGraphModel(modelUrl).then((model => {
+}, 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);
@@ -1216,7 +1248,7 @@ const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssv
             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, 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");
@@ -1230,9 +1262,9 @@ const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssv
                     canvas: canvas,
                     imageDataURL: imageDataURL
                 });
-            }));
+            });
         };
-    })) : (error && error("模型类别不能未空"), !1) : (error && error("模型文件地址不能为空"), !1)
+    }) : (error && error("模型类别不能未空"), !1) : (error && error("模型文件地址不能为空"), !1)
 }), withInstall = (main, extra) => (main.install = app => {
     for (const comp of [ main, ...Object.values({}) ]) app.component(comp.name, comp);
 }, main), slots_config_headerMenu = "header-menu", slots_config_headerToolsPrefix = "header-tools-prefix", slots_config_headerToolsSuffix = "header-tools-suffix";
@@ -1317,14 +1349,14 @@ const NextTextEllipsis = withInstall(defineComponent({
         }
     },
     setup(props, {slots: slots}) {
-        const isTip = ref(!1), setWidth = computed((() => {
+        const isTip = ref(!1), setWidth = 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 = ref(), onMouseenter = () => {
+        }), ellipsisRef = ref(), onMouseenter = () => {
             try {
                 const dom = ellipsisRef.value;
                 dom && dom.scrollWidth && dom.scrollWidth > dom.offsetWidth ? isTip.value = !0 : isTip.value = !1;
@@ -1481,6 +1513,19 @@ var LogoView = defineComponent({
         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 = defineComponent({
+    name: "Edit",
+    __name: "edit",
+    setup: __props => (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+    }, [ 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"
+    }), 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 = defineComponent({
     name: "FullScreen",
     __name: "full-screen",
@@ -1836,14 +1881,14 @@ var stateHandler$1 = {
                             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"));
                 }
@@ -2046,7 +2091,7 @@ var stateHandler$1 = {
                 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;
@@ -2054,11 +2099,11 @@ var stateHandler$1 = {
                             }
                             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;
@@ -2068,9 +2113,9 @@ var stateHandler$1 = {
                     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);
@@ -2139,9 +2184,9 @@ function isCollection(obj) {
 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) {
@@ -2188,9 +2233,9 @@ var elementResizeDetector = function(options) {
         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);
@@ -2201,20 +2246,20 @@ var elementResizeDetector = function(options) {
                 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);
@@ -2223,15 +2268,15 @@ var elementResizeDetector = function(options) {
                             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,
@@ -2241,10 +2286,10 @@ var elementResizeDetector = function(options) {
                 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);
@@ -2262,13 +2307,13 @@ var elementResizeDetectorMaker = getDefaultExportFromCjs(elementResizeDetector);
 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);
-    })), onUnmounted((() => {
-        erd.removeListener(el, (() => {}));
-    }));
+        }, 200);
+    }), onUnmounted(() => {
+        erd.removeListener(el, () => {});
+    });
 }, deepClone = source => {
     if (null == source) return source;
     let target;
@@ -2299,7 +2344,26 @@ const elementResize = (el, cb) => {
 }), {
     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 = defineComponent({
     setup() {
@@ -2434,7 +2498,7 @@ var LayoutSetting = defineComponent({
                 default: () => [ createTextVNode("布局方式") ]
             }), createVNode("ul", {
                 class: _ns.b("config-bar-layout")
-            }, [ layouts.map((item => createVNode("li", {
+            }, [ layouts.map(item => 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();
@@ -2445,7 +2509,7 @@ var LayoutSetting = defineComponent({
                 class: "layout-box"
             }, [ createVNode("p", {
                 class: "layout-text"
-            }, [ item.text ]) ]) ]), createVNode("aside", null, null) ]))) ]), createVNode("div", {
+            }, [ item.text ]) ]) ]), createVNode("aside", null, null) ])) ]), createVNode("div", {
                 class: _ns.b("config-bar-item"),
                 style: {
                     "margin-top": "20px"
@@ -2466,7 +2530,7 @@ var LayoutSetting = defineComponent({
 
 var HeaderTools = defineComponent({
     setup() {
-        const locale = inject(localeContextKey, ref()), config = inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = useFullscreen(), language = ref(computed((() => config.language)).value), settingDrawer = ref(!1);
+        const locale = inject(localeContextKey, ref()), config = inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = useFullscreen(), language = ref(computed(() => config.language).value), settingDrawer = ref(!1);
         return {
             locale: locale,
             config: config,
@@ -2474,13 +2538,17 @@ var HeaderTools = defineComponent({
             toggle: toggle,
             isFullscreen: isFullscreen,
             language: language,
-            settingDrawer: settingDrawer
+            settingDrawer: settingDrawer,
+            openSettingDrawer: () => {
+                settingDrawer.value = !0;
+            },
+            closeSettingDrawer: () => {
+                settingDrawer.value = !1;
+            }
         };
     },
     render() {
-        const _ns = inject("__ns__", {}), _config = this.config, _emit = 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 = inject("__ns__", {}), _config = this.config, _emit = inject("__emit__", {}), slots = this.$slots, _t = this.t, isFullscreen = this.isFullscreen, profile_url = _config.profile, _userDropdown = _config.userDropdown, _languageDropdown = _config.languageDropdown;
         return createVNode(Fragment, null, [ createVNode("ul", {
             class: _ns.b("header-tools")
         }, [ slots[slots_config_headerToolsPrefix]?.(), createVNode("li", null, [ createVNode(ElDropdown, {
@@ -2515,12 +2583,12 @@ var HeaderTools = defineComponent({
             }) ]),
             dropdown: () => {
                 let _slot;
-                return createVNode(ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map((item => createVNode(ElDropdownItem, {
+                return createVNode(ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map(item => createVNode(ElDropdownItem, {
                     command: item.value,
                     disabled: this.language === item.value
                 }, {
                     default: () => [ item.label ]
-                })))) || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? _slot : {
+                }))) || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? _slot : {
                     default: () => [ _slot ]
                 });
                 var s;
@@ -2576,7 +2644,7 @@ var HeaderTools = defineComponent({
                 default: () => [ createVNode(arrow_down_default, null, null) ]
             }) ]),
             dropdown: () => createVNode(ElDropdownMenu, null, {
-                default: () => [ _userDropdown?.map((item => createVNode(ElDropdownItem, {
+                default: () => [ _userDropdown?.map(item => createVNode(ElDropdownItem, {
                     command: item.value,
                     divided: !!item.divided
                 }, {
@@ -2586,16 +2654,14 @@ var HeaderTools = defineComponent({
                     }, null) : null, item.iconfont ? createVNode("i", {
                         class: item.iconfont
                     }, null) : null, _t(item.label) ]
-                }))) ]
+                })) ]
             })
         }) ]), createVNode("li", null, [ createVNode("span", {
             style: {
                 display: "inline-block",
                 lineHeight: 1
             },
-            onClick: () => {
-                this.settingDrawer = !0;
-            }
+            onClick: this.openSettingDrawer
         }, [ createVNode(ElIcon, {
             size: 16
         }, {
@@ -2611,7 +2677,7 @@ var HeaderTools = defineComponent({
                 size: "380px",
                 class: _ns.be("drawer", "setting"),
                 "destroy-on-close": !0,
-                beforeClose: _closeSettingDrawer
+                beforeClose: this.closeSettingDrawer
             }, {
                 default: () => [ createVNode(LayoutSetting, null, null) ]
             }) ]
@@ -2626,12 +2692,12 @@ var Header$4 = defineComponent({
         ns: inject("ns", {})
     }),
     render() {
-        const slots = this.$slots, _ns = this.ns, _config = inject("options", {}), headerStyle = computed((() => {
+        const slots = this.$slots, _ns = this.ns, _config = inject("options", {}), headerStyle = 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]()), 
         createVNode("header", {
@@ -2686,8 +2752,8 @@ const NextMenuItem = defineComponent({
         }
     },
     setup(props) {
-        const _ns = inject("ns", {}), menuTree = computed((() => props.menuData)).value;
-        return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
+        const _ns = inject("ns", {}), menuTree = computed(() => props.menuData).value;
+        return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ menuTree.map(item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
             "popper-class": _ns.b("popper"),
             index: item.path || item.id,
             teleported: !0
@@ -2704,7 +2770,7 @@ const NextMenuItem = defineComponent({
             default: () => [ createVNode(MenuItemTitle, {
                 meta: item.meta
             }, null) ]
-        }))) ]) ]);
+        })) ]) ]);
     }
 }), ns$n = useNamespace("menu");
 
@@ -2736,9 +2802,9 @@ const NextMenu = withInstall(defineComponent({
     setup(props) {
         provide("ns", ns$n);
         const router = getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, activePath = ref(currentPath);
-        watch((() => router.currentRoute?.value), (to => {
+        watch(() => router.currentRoute?.value, to => {
             activePath.value = to.fullPath;
-        }));
+        });
         return () => createVNode(Fragment, null, [ createVNode(ElMenu, {
             class: [ ns$n.b(), props.className ],
             style: props.style,
@@ -2748,7 +2814,7 @@ const NextMenu = withInstall(defineComponent({
             mode: props.mode,
             ellipsis: !0
         }, {
-            default: () => [ createVNode(Fragment, null, [ props.menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
+            default: () => [ createVNode(Fragment, null, [ props.menuTree.map(item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
                 "popper-class": ns$n.b("popper"),
                 index: item.path || item.id,
                 teleported: !0
@@ -2766,7 +2832,7 @@ const NextMenu = withInstall(defineComponent({
                 default: () => [ createVNode(MenuItemTitle, {
                     meta: item.meta
                 }, null) ]
-            }))) ]) ]
+            })) ]) ]
         }) ]);
     }
 }));
@@ -2827,12 +2893,12 @@ const {getLightColor: getLightColor$3} = useChangeColor();
 
 var Header$3 = defineComponent({
     setup(props, {slots: slots}) {
-        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
+        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = 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 () => {
@@ -2886,12 +2952,12 @@ const {getLightColor: getLightColor$2} = useChangeColor();
 
 var Header$2 = defineComponent({
     setup(props, {slots: slots}) {
-        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
+        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = 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 () => {
@@ -2961,12 +3027,12 @@ const {getLightColor: getLightColor$1} = useChangeColor();
 
 var Header$1 = defineComponent({
     setup(props, {slots: slots}) {
-        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
+        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = 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 () => {
@@ -3065,11 +3131,11 @@ var MenuTop = defineComponent({
         provide("ns", ns$i);
         const updateSubmentTree = inject("updateSubmentTree"), router = getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, parentNode = findGrandfatherNode(currentPath, props.menuTree), activeMenuId = ref(parentNode?.id);
         parentNode?.id && 1 === parentNode.meta?.level && updateSubmentTree(parentNode.children), 
-        watch((() => router.currentRoute?.value), (to => {
+        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++) {
@@ -3085,19 +3151,20 @@ var MenuTop = defineComponent({
             mode: "horizontal",
             ellipsis: !0
         }, {
-            default: () => [ createVNode(Fragment, null, [ props.menuTree.map((item => valueExist(item.meta?.isHide, !1) ? null : createVNode(ElMenuItem, {
+            default: () => [ createVNode(Fragment, null, [ props.menuTree.map(item => valueExist(item.meta?.isHide, !1) ? null : createVNode(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: () => [ createVNode(MenuItemTitle, {
                     meta: item.meta
                 }, null) ]
-            }))) ]) ]
+            })) ]) ]
         });
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
@@ -3107,12 +3174,12 @@ const {getLightColor: getLightColor} = useChangeColor();
 
 var Header = defineComponent({
     setup(props, {slots: slots}) {
-        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
+        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = 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 () => {
@@ -3150,11 +3217,11 @@ var composite = defineComponent({
     setup() {
         provide("ns", ns$h);
         const submenuTree = ref([]);
-        return provide("submenuTree", submenuTree), provide("updateSubmentTree", (val => {
-            submenuTree.value = [], nextTick((() => {
+        return provide("submenuTree", submenuTree), provide("updateSubmentTree", val => {
+            submenuTree.value = [], nextTick(() => {
                 submenuTree.value = val;
-            }));
-        })), {
+            });
+        }), {
             ns: ns$h,
             submenuTree: submenuTree
         };
@@ -3221,9 +3288,9 @@ const NextLayout = withInstall(defineComponent({
             _config.value = mergeWith(_config.value, cfg, customizerCoverArray), updateThemeColorCssVar(_config.value?.setting), 
             emit("changeOptions", _config.value);
         };
-        return provide("updateOptions", updateOptions), watch((() => props.options), (cfg => {
+        return provide("updateOptions", updateOptions), watch(() => props.options, cfg => {
             updateOptions(cfg);
-        }), {
+        }, {
             deep: !0,
             immediate: !0
         }), {
@@ -3233,9 +3300,9 @@ const NextLayout = withInstall(defineComponent({
     },
     render() {
         const props = this.$props, slots = this.$slots, layout = this.options.setting?.layout || "transverse", activeLayout = ref(layouts[layout]);
-        watchEffect((() => {
+        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 createVNode("div", {
@@ -3261,7 +3328,7 @@ var Element$a = defineComponent({
     },
     emits: [ "change", "select", "close" ],
     setup(props, {emit: emit}) {
-        const {t: t} = useLocale(), router = getCurrentInstance().appContext.config.globalProperties.$router, _activeTab = computed((() => router.currentRoute.value.path)), _tabs = computed((() => props.tabs)), defaultIndex = _tabs.value?.findIndex((v => v.path === _activeTab.value));
+        const {t: t} = useLocale(), router = getCurrentInstance().appContext.config.globalProperties.$router, _activeTab = computed(() => router.currentRoute.value.path), _tabs = 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({
@@ -3269,7 +3336,7 @@ var Element$a = defineComponent({
             });
         }
         const activeIndex = ref(defaultIndex), tabsView = 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] ]);
@@ -3305,7 +3372,7 @@ var Element$a = defineComponent({
                 params: tab.params || {}
             }), router.push(to), emit("select", tab, index);
         };
-        watch((() => router.currentRoute?.value), (to => {
+        watch(() => router.currentRoute?.value, to => {
             const {tagTitle: tagTitle} = to.query, activeRoute = {
                 name: to.name,
                 title: tagTitle || to.meta?.title,
@@ -3313,16 +3380,16 @@ var Element$a = defineComponent({
                 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 = () => createVNode("nav", {
             class: ns$f.b()
         }, [ createVNode(ElScrollbar, null, {
             default: () => [ createVNode("ul", {
                 class: ns$f.b("list")
-            }, [ tabsView.value.map(((tab, index) => tab ? createVNode("li", {
+            }, [ tabsView.value.map((tab, index) => tab ? createVNode("li", {
                 class: [ "tab-item", ns$f.is("active", activeIndex.value === index) ],
                 onClick: event => onClickTabItem(event, tab, index)
             }, [ createVNode("i", {
@@ -3343,14 +3410,14 @@ var Element$a = defineComponent({
                         }), 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)
             }, [ createVNode(ElIcon, {
                 class: "tab-close"
             }, {
                 default: () => [ createVNode(close_default, null, null) ]
-            }) ]) ]) : null)) ]) ]
+            }) ]) ]) : null) ]) ]
         }), createVNode(ElDropdown, {
             "show-timeout": 80,
             "hide-timeout": 80,
@@ -3422,7 +3489,7 @@ const NextContainer = withInstall(defineComponent({
         }
     },
     setup(props, {slots: slots}) {
-        const styles = computed((() => {
+        const styles = computed(() => {
             let style = {};
             const padding = props.padding;
             return "boolean" == typeof padding ? style = padding ? {
@@ -3432,7 +3499,7 @@ const NextContainer = withInstall(defineComponent({
             } : "number" == typeof padding && (style = {
                 padding: padding + "px"
             }), style;
-        }));
+        });
         return () => (() => {
             if (props.scrollbar) {
                 const scrollStyle = {
@@ -3461,10 +3528,6 @@ const NextContainer = withInstall(defineComponent({
     }
 }));
 
-function isEqual(value, other) {
-    return baseIsEqual(value, other);
-}
-
 var defaultPropsConfig = {
     className: {
         type: String,
@@ -3654,9 +3717,9 @@ var NextSpinLoading$1 = defineComponent({
     },
     setup(props, {slots: slots}) {
         const _options = inject("options", {}), options = isRef(_options) ? unref(_options) : _options, {t: t} = useLocale(), ns = inject("ns", {}), columns = ref(props.columns);
-        watch((() => props.columns), (() => {
+        watch(() => props.columns, () => {
             columns.value = props.columns;
-        }), {
+        }, {
             deep: !0
         });
         const formParams = reactive(props.formParams), _defaultDisabledDate = time => time.getTime() > Date.now(), _defaultShortcuts = [ {
@@ -3763,10 +3826,10 @@ var NextSpinLoading$1 = defineComponent({
                     "collapse-tags": !0,
                     "collapse-tags-tooltip": !0
                 }, {
-                    default: () => [ col.dicData && col.dicData.map((item => createVNode(ElOption, {
+                    default: () => [ col.dicData && col.dicData.map(item => createVNode(ElOption, {
                         value: item.value,
                         label: item.label
-                    }, null))) ]
+                    }, null)) ]
                 });
             }
             if ("date" === col.type) {
@@ -3856,7 +3919,7 @@ var NextSpinLoading$1 = defineComponent({
                 onChange: (...arg) => col.onChange?.(...arg, col, formParams)
             }, null) : void 0;
         };
-        return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ columns.value.map((col => !col.hide && createVNode(ElCol, {
+        return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ columns.value.map(col => !col.hide && createVNode(ElCol, {
             span: props.searchSpan,
             class: ns.b("header-search-item")
         }, {
@@ -3868,11 +3931,11 @@ var NextSpinLoading$1 = defineComponent({
                 }, null) : null,
                 default: () => renderColItemContent(col)
             }) ]
-        }))) ]) ]);
+        })) ]) ]);
     }
 });
 
-function _isSlot$5(s) {
+function _isSlot$6(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
@@ -3887,13 +3950,13 @@ var HeaderSearch = defineComponent({
     emits: [ "confirmSearch", "clearSearch", "zoomResize" ],
     setup(props, {emit: emit, slots: slots}) {
         const _options = inject("options", {}), options = isRef(_options) ? unref(_options) : _options, ns = inject("ns", {}), {t: t} = useLocale(), searchFormSlots = inject("searchFormSlots"), searchFrom_slots = {};
-        searchFormSlots.value.forEach((slotName => {
+        searchFormSlots.value.forEach(slotName => {
             searchFrom_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-        }));
+        });
         const searchParams = reactive({}), columns = 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 = () => {
@@ -3901,9 +3964,9 @@ var HeaderSearch = defineComponent({
         }, onClearSearch = () => {
             _initSearchFormParams(), onConfirmSearch(), emit("clearSearch");
         }, searchSpan = ref(options.searchSpan), columnsLength = columns.value.length, sliceIndex = ref(columnsLength), showColumns = ref(columns.value), moreColumns = ref([]), isColumnMinWidth = ref(!1), {proxy: proxy} = getCurrentInstance();
-        onMounted((() => {
+        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);
@@ -3917,8 +3980,8 @@ var HeaderSearch = defineComponent({
                     const columnWidth = Math.floor(formWidth / span);
                     isColumnMinWidth.value = columnWidth < minWidth;
                 })(el), emit("zoomResize");
-            }));
-        }));
+            });
+        });
         const isExpand = ref(!1), onSwitchExpand = () => {
             isExpand.value = !isExpand.value;
         };
@@ -3937,13 +4000,13 @@ var HeaderSearch = defineComponent({
                     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 ? 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, createVNode(ElCol, {
                     span: searchSpan.value,
@@ -4066,14 +4129,17 @@ var HeaderSearch = defineComponent({
     setup: () => ({}),
     emits: [ "clickAdd", "clickRefresh", "deleteRows" ],
     render() {
-        const _options = inject("options", {}), options = isRef(_options) ? unref(_options) : _options, {t: t} = useLocale(), ns = inject("ns", {}), multipleSelection = inject("multipleSelection"), multipleSelectionLength = computed((() => multipleSelection.value.length)), drawerSettingRef = ref();
+        const _options = inject("options", {}), options = isRef(_options) ? unref(_options) : _options, {t: t} = useLocale(), ns = inject("ns", {}), multipleSelection = inject("multipleSelection"), multipleSelectionLength = computed(() => multipleSelection.value.length), onClickRefresh = () => {
+            this.$emit("clickRefresh");
+        }, drawerSettingRef = ref(), slotProps = {
+            size: options.size,
+            refresh: onClickRefresh
+        };
         return createVNode("div", {
             class: ns.b("header-menu")
         }, [ createVNode("div", {
             class: ns.b("header-menu-left")
-        }, [ this.$slots["menu-left-prefix"]?.({
-            size: options.size
-        }), options.addBtn && createVNode(ElButton, {
+        }, [ this.$slots["menu-left-prefix"]?.(slotProps), options.addBtn && createVNode(ElButton, {
             type: "primary",
             size: options.size,
             onClick: () => {
@@ -4089,39 +4155,33 @@ var HeaderSearch = defineComponent({
             size: options.size,
             disabled: !multipleSelectionLength.value,
             onClick: () => {
-                const selection = unref(toRaw(multipleSelection.value.map((row => toRaw(row)))));
+                const selection = unref(toRaw(multipleSelection.value.map(row => toRaw(row))));
                 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(() => {
                     ElMessage({
                         type: "info",
                         message: t("next.table.message.cancelBatchDelete")
                     });
-                }));
+                });
             }
         }, {
             icon: () => createVNode(ElIcon, null, {
                 default: () => [ createVNode(delete_default, null, null) ]
             }),
             default: () => t("next.table.batchDelete")
-        }), this.$slots["menu-left-suffix"]?.({
-            size: options.size
-        }) ]), createVNode("div", {
+        }), this.$slots["menu-left-suffix"]?.(slotProps) ]), createVNode("div", {
             class: ns.b("header-menu-right")
-        }, [ this.$slots["menu-right-prefix"]?.({
-            size: options.size
-        }), options.refreshBtn && createVNode(ElButton, {
+        }, [ this.$slots["menu-right-prefix"]?.(slotProps), options.refreshBtn && createVNode(ElButton, {
             circle: !0,
             size: options.size,
-            onClick: () => {
-                this.$emit("clickRefresh");
-            }
+            onClick: onClickRefresh
         }, {
             icon: () => createVNode(ElIcon, null, {
                 default: () => [ createVNode(refresh_default, null, null) ]
@@ -4136,9 +4196,7 @@ var HeaderSearch = defineComponent({
             icon: () => createVNode(ElIcon, null, {
                 default: () => [ createVNode(tools_default, null, null) ]
             })
-        }), this.$slots["menu-right-suffix"]?.({
-            size: options.size
-        }) ]), createVNode(DrawerSetting, {
+        }), this.$slots["menu-right-suffix"]?.(slotProps) ]), createVNode(DrawerSetting, {
             ref: drawerSettingRef
         }, null) ]);
     }
@@ -4154,28 +4212,28 @@ const TableColumnDynamic = defineComponent({
     },
     setup(props, {slots: slots}) {
         const columnSlots = inject("columnSlots"), column_slots = {};
-        columnSlots.value.forEach((slotName => {
+        columnSlots.value.forEach(slotName => {
             column_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-        }));
+        });
         const _options = inject("options", {}), options = isRef(_options) ? 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 createVNode(Fragment, null, [ columnOption.children.map((column => {
+            if (columnOption.children?.length > 0) return createVNode(Fragment, null, [ columnOption.children.map(column => {
                 return createVNode(TableColumnDynamic, {
                     columnOption: column
                 }, "function" == typeof (s = column_slots) || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? column_slots : {
                     default: () => [ column_slots ]
                 });
                 var s;
-            })) ]);
+            }) ]);
             if (slots[columnSlotName(_prop)]) {
                 const btnCfg = {
                     text: options.operationsBtnText,
@@ -4192,7 +4250,7 @@ const TableColumnDynamic = defineComponent({
             if (columnOption.dicData?.length > 0) {
                 const loopDicData = list => {
                     const temp = [];
-                    return list.forEach((node => {
+                    return list.forEach(node => {
                         const item = {
                             ...node
                         };
@@ -4201,7 +4259,7 @@ const TableColumnDynamic = defineComponent({
                             temp.push(...child), delete item.children;
                         }
                         temp.push(item);
-                    })), temp;
+                    }), temp;
                 }, mergeDicData = loopDicData(columnOption.dicData);
                 return createVNode("span", null, [ _formatterColumnValue(row[prop], mergeDicData) ]);
             }
@@ -4234,10 +4292,10 @@ var TableColumnOperations = defineComponent({
     name: "TableColumnOperations",
     emits: [ "editRow", "viewRow", "deleteRow" ],
     setup(props, {emit: emit, slots: slots}) {
-        const _options = inject("options"), options = isRef(_options) ? unref(_options) : _options, {t: t} = useLocale(), operationsShowText = computed((() => {
+        const _options = inject("options"), options = isRef(_options) ? unref(_options) : _options, {t: t} = useLocale(), operationsShowText = 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,
@@ -4317,14 +4375,14 @@ var TableColumnOperations = defineComponent({
                                 center: !1,
                                 confirmButtonText: t("next.table.message.confirmButtonText"),
                                 cancelButtonText: t("next.table.message.cancelButtonText")
-                            }).then((() => {
+                            }).then(() => {
                                 emit("deleteRow", scoped);
-                            })).catch((() => {
+                            }).catch(() => {
                                 ElMessage({
                                     type: "info",
                                     message: t("next.table.message.cancelDelete")
                                 });
-                            }));
+                            });
                         })(scoped)
                     }, {
                         icon: () => createVNode(ElIcon, null, {
@@ -4443,9 +4501,9 @@ var NextDialog$1 = defineComponent({
     emits: [ "close" ],
     setup(props, {emit: emit, slots: slots}) {
         const visible = ref(props.modelValue);
-        watch((() => props.modelValue), (value => {
+        watch(() => props.modelValue, value => {
             visible.value = value;
-        }));
+        });
         const onClose = () => {
             visible.value = !1, emit("close");
         }, isFullscreen = ref(props.fullscreen);
@@ -4555,13 +4613,13 @@ var NumberRangePicker = defineComponent({
         }, onChangeEnd = num => {
             endNumber.value = num, emit("change", [ startNumber.value, endNumber.value ]);
         }, controls = ref(!0), numberRangeRef = ref();
-        onMounted((() => {
+        onMounted(() => {
             const element = numberRangeRef.value;
-            elementResize(element, (el => {
+            elementResize(element, el => {
                 const width = el.clientWidth;
                 controls.value = width > 200;
-            }));
-        }));
+            });
+        });
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: numberRangeRef,
             class: ns$b.e("number-range")
@@ -4589,7 +4647,7 @@ var NumberRangePicker = defineComponent({
 
 const NextDialog = withInstall(NextDialog$1);
 
-function _isSlot$3(s) {
+function _isSlot$4(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
@@ -4645,16 +4703,16 @@ const ns$a = useNamespace("form"), InputTableSelect = defineComponent({
             },
             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 = ref([]), sinleSelection = 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 = computed((() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length)), onResetTableSelect = () => {
+        });
+        const _disabledSelect = computed(() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length), onResetTableSelect = () => {
             multipleSelection.value = [], sinleSelection.value = "";
         }, onConfirmSelect = () => {
             const rows = toRaw(multipleSelection.value), _rows = arrayObjNoRepeat(rows, propsValue);
@@ -4667,7 +4725,7 @@ const ns$a = useNamespace("form"), InputTableSelect = defineComponent({
                 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, toRaw(row))
@@ -4678,30 +4736,30 @@ const ns$a = useNamespace("form"), InputTableSelect = defineComponent({
                 }
             }, null);
         }, tags = ref([]), tagsMore = 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 = []);
         };
-        watch((() => _column.tableSelectRows), (() => {
+        watch(() => _column.tableSelectRows, () => {
             _updateTags();
-        }), {
+        }, {
             deep: !0,
             immediate: !0
         });
         const _multipleSelection = ref([]);
-        watch((() => [ props.formParams[_column.prop], multipleSelection.value ]), (() => {
-            _multipleSelection.value = multipleSelection.value.map((o => o[propsValue])), _updateTags();
-        }), {
+        watch(() => [ props.formParams[_column.prop], multipleSelection.value ], () => {
+            _multipleSelection.value = multipleSelection.value.map(o => o[propsValue]), _updateTags();
+        }, {
             deep: !0,
             immediate: !0
         });
         const _sinleSelection = ref(null);
-        watch((() => [ props.formParams[_column.prop], sinleSelection.value ]), (() => {
+        watch(() => [ props.formParams[_column.prop], sinleSelection.value ], () => {
             _sinleSelection.value = sinleSelection.value, _updateTags();
-        }), {
+        }, {
             deep: !0,
             immediate: !0
         });
@@ -4717,12 +4775,12 @@ const ns$a = useNamespace("form"), InputTableSelect = defineComponent({
                 class: "el-input__wrapper"
             }, [ tags?.value.length ? createVNode("span", {
                 class: ns$a.em("input-table", "value")
-            }, [ tags.value.map(((tag, index) => createVNode(ElTag, {
-                closable: !_closable,
+            }, [ tags.value.map((tag, index) => createVNode(ElTag, {
+                closable: _closable,
                 onClose: () => _onCloseTag(0, index)
             }, {
                 default: () => [ tag.label ]
-            }))), tagsMore?.value?.length ? createVNode(ElTooltip, {
+            })), tagsMore?.value?.length ? createVNode(ElTooltip, {
                 "popper-class": ns$a.e("tooltip-tags"),
                 placement: "bottom",
                 effect: "light"
@@ -4730,12 +4788,12 @@ const ns$a = useNamespace("form"), InputTableSelect = defineComponent({
                 default: () => createVNode(ElTag, null, {
                     default: () => [ createTextVNode("+ "), tagsMore.value.length ]
                 }),
-                content: () => tagsMore.value.map(((tag, index) => createVNode(ElTag, {
-                    closable: !_closable,
+                content: () => tagsMore.value.map((tag, index) => createVNode(ElTag, {
+                    closable: _closable,
                     onClose: () => _onCloseTag(0, index + 1)
                 }, {
                     default: () => [ tag.label ]
-                })))
+                }))
             }) : null ]) : createVNode("span", {
                 class: ns$a.em("input-table", "placeholder")
             }, [ _placeholder ]) ]), createVNode(ElButton, {
@@ -4804,13 +4862,13 @@ const ns$a = useNamespace("form"), InputTableSelect = defineComponent({
                     class: ns$a.em("input-table", "footer")
                 }, [ createVNode(ElButton, {
                     onClick: onResetTableSelect
-                }, _isSlot$3(_slot = t("next.form.reset")) ? _slot : {
+                }, _isSlot$4(_slot = t("next.form.reset")) ? _slot : {
                     default: () => [ _slot ]
                 }), createVNode(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 ]
                 }) ]) ]
             }) ]);
@@ -4873,7 +4931,7 @@ var UploadImage = defineComponent({
             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 ? createVNode(ElImage, {
+            urls = urls.filter(url => !!url), urls.length ? createVNode(ElImage, {
                 class: ns$9.e("preview-image"),
                 src: urls[0],
                 previewSrcList: urls,
@@ -4896,7 +4954,7 @@ var UploadImage = defineComponent({
             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 && (render(null, previewImagesContainer), body.removeChild(previewImagesContainer)), 
                 previewImagesContainer = document.createElement("div"), body.appendChild(previewImagesContainer);
                 const previewComponent = createVNode({
@@ -4904,7 +4962,7 @@ var UploadImage = defineComponent({
                         to: "body"
                     }, [ h(ElImageViewer, {
                         initialIndex: initial,
-                        "url-list": uploadfilesPreview.value.map((file => file.url)),
+                        "url-list": uploadfilesPreview.value.map(file => file.url),
                         onClose: () => {
                             render(null, previewImagesContainer);
                         }
@@ -4958,9 +5016,9 @@ var UploadImage = defineComponent({
     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 = ref(props.modelValue);
-        watch((() => props.modelValue), (val => {
+        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"
@@ -5044,14 +5102,14 @@ var UploadImage = defineComponent({
     emits: [ "change", "clear", "expand-change", "visible-change", "remove-tag", "blur", "focus" ],
     setup(props, {emit: emit, expose: expose}) {
         const {t: t} = useLocale(), _modelValue = ref(props.modelValue);
-        watch((() => props.modelValue), (val => {
+        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 = ref(), getInstance = () => treeSelectRef.value;
         _column.loadInstance && _column.loadInstance(getInstance()), expose({
@@ -5077,7 +5135,7 @@ var UploadImage = defineComponent({
     }
 });
 
-function _isSlot$2(s) {
+function _isSlot$3(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
@@ -5101,8 +5159,8 @@ var Element$8 = defineComponent({
     },
     emits: [ "submit", "close", "reset" ],
     setup(props, {slots: slots, emit: emit, expose: expose}) {
-        const _config = deepClone(defaultConfig$3), options = reactive(merge(_config, props.options)), _isEditing = computed((() => "boolean" != typeof options.isEditing || options.isEditing)), {t: t} = useLocale(), colSpan = ref(options.colSpan), formDatum = reactive(props.formDatum) || {}, formParams = reactive(merge({}, formDatum)), _formColumns = ref([]), formRules = reactive({});
-        watch((() => [ props.columns, props.formDatum ]), (() => {
+        const _config = deepClone(defaultConfig$3), options = reactive(merge(_config, props.options)), _isEditing = computed(() => "boolean" != typeof options.isEditing || options.isEditing), {t: t} = useLocale(), colSpan = ref(options.colSpan), formDatum = reactive(props.formDatum) || {}, formParams = reactive(merge({}, formDatum)), _formColumns = ref([]), formRules = reactive({});
+        watch(() => [ props.columns, props.formDatum ], () => {
             (() => {
                 const columns = props.columns;
                 _formColumns.value = columns;
@@ -5115,41 +5173,41 @@ var Element$8 = defineComponent({
                         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 = ref(!1);
-        onMounted((() => {
+        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 = ref(), submitLoading = ref(!1), onSubmitAddEdit = async () => {
             const formInstance = ruleFormRef.value;
-            formInstance && await formInstance.validate(((valid, fields) => {
+            formInstance && await formInstance.validate((valid, fields) => {
                 if (valid) {
                     const params = 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));
@@ -5299,12 +5357,12 @@ var Element$8 = defineComponent({
                     "collapse-tags-tooltip": !0,
                     onChange: event => col.onChange?.(event, col, formParams, formColumns)
                 }, {
-                    default: () => [ col.dicData && col.dicData.map((item => createVNode(ElOption, {
+                    default: () => [ col.dicData && col.dicData.map(item => createVNode(ElOption, {
                         key: item.value,
                         value: item.value,
                         label: item.label,
                         disabled: valueExist(item.disabled, !1)
-                    }, null))) ]
+                    }, null)) ]
                 });
             }
             if ("time" === col.type) {
@@ -5333,13 +5391,13 @@ var Element$8 = defineComponent({
                 readonly: valueExist(col.readonly, !1),
                 onChange: event => col.onChange?.(event, col, formParams, formColumns)
             }, {
-                default: () => [ col.dicData && col.dicData.map((item => createVNode(ElRadio, {
+                default: () => [ col.dicData && col.dicData.map(item => createVNode(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] = []), 
             createVNode(ElCheckboxGroup, {
@@ -5349,13 +5407,13 @@ var Element$8 = defineComponent({
                 readonly: valueExist(col.readonly, !1),
                 onChange: event => col.onChange?.(event, col, formParams, formColumns)
             }, {
-                default: () => [ col.dicData && col.dicData.map((item => createVNode(ElCheckbox, {
+                default: () => [ col.dicData && col.dicData.map(item => createVNode(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;
@@ -5454,10 +5512,10 @@ var Element$8 = defineComponent({
                     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 ]
                 });
             }
@@ -5496,19 +5554,20 @@ var Element$8 = defineComponent({
             let _slot2;
             return createVNode(NextSpinLoading, {
                 loading: spanResizeLoading.value
-            }, _isSlot$2(_slot2 = (() => {
+            }, _isSlot$3(_slot2 = (() => {
                 let _slot;
                 return createVNode(ElForm, {
                     ref: ruleFormRef,
                     class: ns$8.b(),
                     inline: !1,
                     model: formParams,
-                    size: options.size
+                    size: options.size,
+                    "label-position": valueExist(options.labelPosition, "left")
                 }, {
                     default: () => [ createVNode(ElRow, {
                         gutter: 20
-                    }, _isSlot$2(_slot = formColumns.map((column => !column.hide && createVNode(ElCol, {
-                        span: valueExist(column.span, colSpan.value)
+                    }, _isSlot$3(_slot = formColumns.map(column => !column.hide && createVNode(ElCol, {
+                        span: valueExist(options.colSpanFixed, column.span, colSpan.value)
                     }, {
                         default: () => [ createVNode(ElFormItem, {
                             prop: column.prop,
@@ -5535,7 +5594,7 @@ var Element$8 = defineComponent({
                             }) : null ]) : null,
                             default: () => renderFormItem(column)
                         }) ]
-                    })))) ? _slot : {
+                    }))) ? _slot : {
                         default: () => [ _slot ]
                     }), _isEditing.value && options.showFooter ? createVNode("div", {
                         class: ns$8.e("footer")
@@ -5579,13 +5638,13 @@ var AddEditForm = defineComponent({
     emits: [ "close", "submit" ],
     setup(props, {slots: slots, emit: emit, expose: expose}) {
         const addEditFormSlots = inject("addEditFormSlots"), form_slots = {};
-        addEditFormSlots.value.forEach((slotName => {
+        addEditFormSlots.value.forEach(slotName => {
             form_slots[slotName] = (...arg) => slots[slotName] && slots[slotName](...arg);
-        }));
+        });
         const _options = inject("options", {}), options = deepClone(isRef(_options) ? unref(_options) : _options);
         options.columnMinWidth = options.formColumnMinWidth, options.isEditing = props.isEditing;
-        const formRef = ref(), formDatum = deepClone(isRef(props.formDatum) ? unref(props.formDatum) : props.formDatum), _columns = deepClone(props.columns).map((col => (col.hide = valueExist(col.formHide, col.hide, !1), 
-        col))), onSubmit = (...arg) => {
+        const formRef = ref(), formDatum = deepClone(isRef(props.formDatum) ? 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({
@@ -5611,7 +5670,7 @@ var AddEditForm = defineComponent({
     }
 });
 
-function _isSlot(s) {
+function _isSlot$1(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
@@ -5622,25 +5681,25 @@ var Element$7 = defineComponent({
     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 = computed((() => {
+        const _config = deepClone(defaultConfig$4), _options = computed(() => {
             const cfg = unref(props.options);
             return merge(_config, cfg);
-        })), options = unref(_options);
-        provide("options", computed((() => _options.value))), provide("ns", ns$7);
+        }), options = unref(_options);
+        provide("options", computed(() => _options.value)), provide("ns", ns$7);
         const {t: t} = useLocale(), _columns = ref(options.columns), _searchColumns = ref([]), _formColumns = ref([]), _updateColumnsAll = ops => {
             ((options, cb) => {
                 const _columns = 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, ""),
@@ -5690,7 +5749,7 @@ var Element$7 = defineComponent({
                     };
                     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),
@@ -5727,21 +5786,21 @@ var Element$7 = defineComponent({
                     };
                     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 = ref(props.data), _searchFormParams = ref((() => {
             const list = _searchColumns.value;
             let params = {};
@@ -5759,33 +5818,33 @@ var Element$7 = defineComponent({
         }, onClickRefresh = () => {
             onConfirmSearch(_searchFormParams.value);
         };
-        watch((() => props.data), (list => {
+        watch(() => props.data, list => {
             tableData.value = list;
-        }), {
+        }, {
             immediate: !0
-        }), watch((() => _options), (ops => {
+        }), watch(() => _options, ops => {
             _updateColumnsAll(ops.value);
-        }), {
+        }, {
             deep: !0,
             immediate: !0
         });
         const tableContentHeight = ref(options.defaultContentHeight), crudTableRef = ref(), headerRef = ref(), tableRef = ref(), footerRef = ref(), addEditFormRef = ref(null), updateTableContentHeight = () => {
-            nextTick((() => {
+            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();
         };
-        onMounted((() => {
-            elementResize(crudTableRef.value, (() => {
+        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));
-        })), onUnmounted((() => {
+        }), 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);
@@ -5801,30 +5860,30 @@ var Element$7 = defineComponent({
         }), 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), nextTick((() => {
+            addEditDialog.rowInfo = row, emit("click-add-edit", row, options), 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), 
-            nextTick((() => {
+            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), nextTick((() => {
+            addEditDialog.rowInfo = scoped.row, emit("view-add-edit", scoped.row), nextTick(() => {
                 addEditDialog.visible = !0;
-            }));
+            });
         }, onCloseAddEditDialog = () => {
             addEditDialog.visible = !1, addEditDialog.title = "", addEditDialog.rowInfo = {}, 
             emit("close-add-edit");
@@ -5837,31 +5896,31 @@ var Element$7 = defineComponent({
         const _customRowIndex = index => {
             const {pageIndex: pageIndex, pageSize: pageSize} = props.page;
             return (pageIndex - 1) * pageSize + (index + 1);
-        }, _sortNumberMinWidth = computed((() => {
+        }, _sortNumberMinWidth = 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,
@@ -5886,13 +5945,13 @@ var Element$7 = defineComponent({
             onZoomResize: updateTableContentHeight,
             onConfirmSearch: onConfirmSearch,
             onClearSearch: onClearSearch
-        }, _isSlot(searchFrom_slots) ? searchFrom_slots : {
+        }, _isSlot$1(searchFrom_slots) ? searchFrom_slots : {
             default: () => [ searchFrom_slots ]
         }), options.showHeaderMenu && 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, createVNode(NextSpinLoading$1, {
             loading: props.loading
@@ -5943,16 +6002,16 @@ var Element$7 = defineComponent({
                     fixed: "left",
                     headerAlign: options.headerAlign,
                     align: options.cellAlign
-                }, null) : null, slots.default?.(), _columns.value.map((col => createVNode(TableColumnDynamic, {
+                }, null) : null, slots.default?.(), _columns.value.map(col => createVNode(TableColumnDynamic, {
                     columnOption: col,
                     key: col.prop
-                }, _isSlot(column_slots) ? column_slots : {
+                }, _isSlot$1(column_slots) ? column_slots : {
                     default: () => [ column_slots ]
-                }))), options.operations ? createVNode(TableColumnOperations, {
+                })), options.operations ? 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: () => createVNode(ElEmpty, {
@@ -5982,7 +6041,7 @@ var Element$7 = defineComponent({
                 isEditing: addEditDialog.isEditing,
                 onClose: onCloseAddEditDialog,
                 onSubmit: onSubmitAddEditDialog
-            }, _isSlot(addEditForm_slots) ? addEditForm_slots : {
+            }, _isSlot$1(addEditForm_slots) ? addEditForm_slots : {
                 default: () => [ addEditForm_slots ]
             })
         }) ]) ]) ]);
@@ -6028,11 +6087,11 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
     name: "NextCrudTableVirtualized",
     props: propsConfig,
     setup(props, {emit: emit}) {
-        const _config = deepClone(defaultConfig$2), _options = computed((() => {
+        const _config = deepClone(defaultConfig$2), _options = computed(() => {
             const cfg = unref(props.options);
             return merge(_config, cfg);
-        })), options = unref(_options);
-        provide("options", computed((() => _options.value)));
+        }), options = unref(_options);
+        provide("options", computed(() => _options.value));
         const {t: t} = useLocale(), addEditDialog = reactive({
             visible: !1,
             title: t("next.table.add"),
@@ -6094,7 +6153,7 @@ const NextUpload = withInstall(defineComponent({
             "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 && (render(null, previewImagesContainer), body.removeChild(previewImagesContainer)), 
                 previewImagesContainer = document.createElement("div"), body.appendChild(previewImagesContainer);
                 const previewComponent = createVNode({
@@ -6102,7 +6161,7 @@ const NextUpload = withInstall(defineComponent({
                         to: "body"
                     }, [ h(ElImageViewer, {
                         initialIndex: initial,
-                        "url-list": uploadfilesPreview.value.map((file => file.url)),
+                        "url-list": uploadfilesPreview.value.map(file => file.url),
                         onClose: () => {
                             render(null, previewImagesContainer);
                         }
@@ -6157,13 +6216,17 @@ var Element$4 = defineComponent({
             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
@@ -6196,34 +6259,35 @@ var Element$4 = defineComponent({
                     default: () => h(camera_default)
                 }) ])
             });
-            player.value.on("loadedmetadata", (() => {
+            player.value.on("loadedmetadata", () => {
                 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.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, classNames, [], detect_ctx);
+                    canvas.style.left = offsetLeft + "px", detectVideoFrame(video, model, ctx, _tf, classNames, [], detect_ctx);
                 }, modelRef.value = model, detectFrameCanvas.value = canvas;
-            }));
+            });
         };
-        onUnmounted((() => {
-            modelRef.value && (tf.dispose(), modelRef.value.dispose(), modelRef.value = null), 
+        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 && render(null, videoBoxRef.value);
-        }));
+        });
         const switchVideo = url => {
             if (!url) return (() => {
                 const container = videoBoxRef.value, video = document.createElement("video");
@@ -6238,9 +6302,9 @@ var Element$4 = defineComponent({
                     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
                 });
@@ -6269,9 +6333,9 @@ var Element$4 = defineComponent({
                 };
                 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
                 });
@@ -6292,9 +6356,9 @@ var Element$4 = defineComponent({
                 };
                 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
                 });
@@ -6318,13 +6382,13 @@ var Element$4 = defineComponent({
                         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
                     });
@@ -6352,19 +6416,19 @@ var Element$4 = defineComponent({
                     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);
         };
-        onMounted((() => {
-            nextTick((() => {
+        onMounted(() => {
+            nextTick(() => {
                 switchVideo(videoSrc);
-            }));
-        }));
+            });
+        });
         expose({
             getElement: () => {
                 const container = videoBoxRef.value, palyerContainer = container.children[0];
@@ -6558,7 +6622,7 @@ const colors$1 = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba2
     };
 };
 
-var ContextMenuLabel = defineComponent({
+var ContextMenuLabel$1 = defineComponent({
     props: {
         labelRect: {
             type: Object,
@@ -6580,10 +6644,10 @@ var ContextMenuLabel = defineComponent({
         }, onDelete = () => {
             emit("delete", props.activateRect);
         }, activateIndex = ref();
-        watch((() => props.activateRect), (() => {
+        watch(() => props.activateRect, () => {
             const {type: type} = props.activateRect;
             activateIndex.value = isValueExist(type) ? type : null;
-        }), {
+        }, {
             deep: !0,
             immediate: !0
         });
@@ -6591,18 +6655,18 @@ var ContextMenuLabel = defineComponent({
             width: 0,
             height: 0
         });
-        onMounted((() => {
+        onMounted(() => {
             const {clientWidth: clientWidth, clientHeight: clientHeight} = labelMenuRef.value;
             labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
-        }));
-        const labelMenuRef = ref(), labelStyleFixed = computed((() => {
+        });
+        const labelMenuRef = ref(), labelStyleFixed = 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 = () => createVNode("div", {
+        }), renderContent = () => createVNode("div", {
             ref: labelMenuRef,
             class: [ ns.b("contextmenu-label") ],
             style: labelStyleFixed.value
@@ -6617,7 +6681,7 @@ var ContextMenuLabel = defineComponent({
             default: () => [ createVNode(close_default, null, null) ]
         }) ]), createVNode("ul", {
             class: "label-main"
-        }, [ props.classes.map(((name, index) => createVNode("li", {
+        }, [ props.classes.map((name, index) => createVNode("li", {
             key: index,
             onClick: () => (index => {
                 activateIndex.value = index, emit("select", index);
@@ -6630,7 +6694,7 @@ var ContextMenuLabel = defineComponent({
                 "background-color": colors$1[index % colors$1.length]
             },
             class: "label-line"
-        }, null), createVNode("span", null, [ name ]) ]))) ]), isValueExist(activateIndex.value) ? createVNode("div", {
+        }, null), createVNode("span", null, [ name ]) ])) ]), isValueExist(activateIndex.value) ? createVNode("div", {
             style: "margin: 10px auto 0"
         }, [ createVNode(ElButton, {
             icon: delete_default,
@@ -6681,12 +6745,12 @@ class CanvasSceneDragZoom {
         });
     }
     notifyObservers(scale, offset) {
-        this.observers.forEach((listener => {
+        this.observers.forEach(listener => {
             listener({
                 scale: scale,
                 ...offset
             });
-        }));
+        });
     }
     changeZoom(callback) {
         this.observers.push(callback);
@@ -6844,12 +6908,12 @@ var DraggableRect = defineComponent({
                 rect.value.rectWidth = newWidth;
             }
         };
-        return onMounted((() => {
+        return onMounted(() => {
             parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
             document.addEventListener("mouseup", onMouseup);
-        })), onUnmounted((() => {
+        }), 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;
@@ -6946,11 +7010,11 @@ var DraggableRect = defineComponent({
             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(" ")), toRaw(rect);
-                })),
+                }),
                 label_txt: yolo_label.join("\n")
             };
         }, setContainerWidthHeight = (canvasWidth, canvasHeight) => {
@@ -6986,11 +7050,11 @@ var DraggableRect = defineComponent({
                             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 = [];
@@ -7116,7 +7180,7 @@ var DraggableRect = defineComponent({
                         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;
@@ -7132,51 +7196,51 @@ var DraggableRect = defineComponent({
                             };
                         })(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 && nextTick((() => {
+                onCloseContentmenuLabel(), onCloseDraggableRectFixed(), hit_rect && 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 && nextTick((() => {
+                onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && nextTick(() => {
                     updateDraggableRectFixed(offsetX, offsetY, hit_rect, hit_index, color);
-                }));
-            }));
+                });
+            });
         };
-        onMounted((() => {
-            watch((() => props.rowInfo), (info => {
+        onMounted(() => {
+            watch(() => props.rowInfo, info => {
                 const rowInfo = toRaw(info);
                 renderImageLabel(rowInfo);
-            }), {
+            }, {
                 deep: !0,
                 immediate: !0
-            }), watch((() => props.classes), (() => {
+            }), watch(() => props.classes, () => {
                 const rowInfo = toRaw(props.rowInfo);
                 renderImageLabel(rowInfo);
-            })), watch((() => props.contextClientHeight), (height => {
+            }), watch(() => props.contextClientHeight, height => {
                 if (valueExist(height)) {
                     canvasMainRef.value.style.height = height + "px";
                     const rowInfo = toRaw(props.rowInfo);
                     renderImageLabel(rowInfo);
                 }
-            }));
-        })), onUnmounted((() => {
+            });
+        }), onUnmounted(() => {
             drawBaseCanvas.value.removeEventAll?.(), canvasDragZoom.value.destroy();
-        }));
+        });
         const contextmenuLabelFixed = ref({
             show: !1,
             top: 0,
@@ -7192,7 +7256,7 @@ var DraggableRect = defineComponent({
             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 = computed((() => {
+        }, contextmenuLabelRect = computed(() => {
             const {top: top, left: left, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = contextmenuLabelFixed.value;
             return {
                 top: top,
@@ -7200,7 +7264,7 @@ var DraggableRect = defineComponent({
                 canvasWidth: canvasWidth,
                 canvasHeight: canvasHeight
             };
-        })), draggableRectFixed = ref({
+        }), draggableRectFixed = ref({
             show: !1,
             top: 0,
             left: 0,
@@ -7220,27 +7284,27 @@ var DraggableRect = defineComponent({
             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(), nextTick((() => {
+            onCloseContentmenuLabel(), nextTick(() => {
                 updateContextmenuLabelFixed(x, y, rect);
-            }));
+            });
         }, activate_add_label = 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();
@@ -7250,18 +7314,18 @@ var DraggableRect = defineComponent({
             onCloseDraggableRectFixed: onCloseDraggableRectFixed,
             onCloseContentmenuLabel: onCloseContentmenuLabel,
             onSelectedLabel: (rect, index) => {
-                onCloseDraggableRectFixed(), nextTick((() => {
+                onCloseDraggableRectFixed(), 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(), 
-                nextTick((() => {
+                nextTick(() => {
                     const rowInfo = toRaw(props.rowInfo);
                     renderImageLabel(rowInfo);
-                }));
+                });
             },
             resetScaleOffset: () => {
                 canvasDragZoom.value.reset();
@@ -7281,7 +7345,7 @@ var DraggableRect = defineComponent({
             }, null), createVNode("canvas", {
                 ref: canvasRectRef,
                 class: [ ns.be("canvas", "rect") ]
-            }, null), contextmenuLabelFixed.value.show ? createVNode(ContextMenuLabel, {
+            }, null), contextmenuLabelFixed.value.show ? createVNode(ContextMenuLabel$1, {
                 labelRect: contextmenuLabelRect.value,
                 classes: props.classes,
                 activateRect: contextmenuLabelFixed.value.activateRect,
@@ -7297,7 +7361,7 @@ var DraggableRect = defineComponent({
             }, null) : null ]) ]
         }) ]);
     }
-}), RightLabel = defineComponent({
+}), RightLabel$1 = defineComponent({
     props: {
         contentHeight: {
             type: Number
@@ -7313,16 +7377,16 @@ var DraggableRect = defineComponent({
     },
     emits: [ "delete", "select" ],
     setup(props, {emit: emit}) {
-        const {t: t} = useLocale(), ns = inject("ns", {}), labels = ref([]), formatLabelsTypeName = labels => labels.length ? labels.map((rect => {
+        const {t: t} = useLocale(), ns = inject("ns", {}), labels = ref([]), formatLabelsTypeName = labels => labels.length ? labels.map(rect => {
             const typeName = props.classes[rect.type];
             return typeName && (rect.typeName = typeName), rect;
-        })) : [];
-        watch((() => props.classes), (() => {
+        }) : [];
+        watch(() => props.classes, () => {
             labels.value = formatLabelsTypeName(labels.value);
-        })), watch((() => props.labels), (rects => {
+        }), watch(() => props.labels, rects => {
             const _rects = toRaw(rects);
             labels.value = formatLabelsTypeName(_rects);
-        }), {
+        }, {
             deep: !0,
             immediate: !0
         });
@@ -7331,7 +7395,7 @@ var DraggableRect = defineComponent({
             style: {
                 height: props.contentHeight + "px"
             }
-        }, [ labels.value.length ? createVNode("ul", null, [ labels.value.map(((rect, index) => createVNode("li", {
+        }, [ labels.value.length ? createVNode("ul", null, [ labels.value.map((rect, index) => createVNode("li", {
             key: index,
             onClick: () => ((rect, index) => {
                 emit("select", rect, index);
@@ -7357,8 +7421,8 @@ var DraggableRect = defineComponent({
             }, {
                 default: () => [ createVNode(delete_default, null, null) ]
             })
-        }) ]))) ]) : createVNode(ElEmpty, {
-            "image-size": 120,
+        }) ])) ]) : createVNode(ElEmpty, {
+            "image-size": 100,
             description: t("next.labelimg.emptyLabelText")
         }, null) ]);
         return () => createVNode(Fragment, null, [ renderContent() ]);
@@ -7395,47 +7459,47 @@ var Element$1 = defineComponent({
     },
     emits: [ "change", "save", "prev-click", "next-click" ],
     setup(props, {emit: emit, slots: slots, expose: expose}) {
-        const {t: t} = useLocale(), _config = deepClone(defaultConfig$1), _options = computed((() => {
+        const {t: t} = useLocale(), _config = deepClone(defaultConfig$1), _options = computed(() => {
             const cfg = unref(props.options);
             return merge(_config, cfg);
-        })), options = unref(_options);
+        }), options = unref(_options);
         provide("ns", ns$2), provide("_emit", emit);
         const activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
-        watch((() => props.data), (data => {
+        watch(() => props.data, data => {
             labelImages.value = deepClone(data);
-        }), {
+        }, {
             deep: !0
-        }), watch((() => props.data.length), (() => {
+        }), watch(() => props.data.length, () => {
             activateNodeIndex.value = 0;
-        })), watch((() => props.classes), (val => {
+        }), watch(() => props.classes, val => {
             classes.value = val;
-        }), {
+        }, {
             deep: !0
         });
-        const currentNode = computed((() => {
+        const currentNode = computed(() => {
             if (!labelImages.value) return {};
             const node = labelImages.value[activateNodeIndex.value] || {};
             return deepClone(node);
-        })), activateNodeLabels = ref(currentNode.value.labels || []);
-        watch((() => currentNode.value), (() => {
+        }), activateNodeLabels = ref(currentNode.value.labels || []);
+        watch(() => currentNode.value, () => {
             activateNodeLabels.value = currentNode.value.labels || [];
-        }));
+        });
         const onChangeNodeRect = rects => {
             currentNode.value.labels = rects, activateNodeLabels.value = rects;
         }, loading = 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(toRaw(node.labels).map((rect => convertToLabel(rect))), currentNode.value.labels.map((rect => convertToLabel(rect))));
+            return isEqual(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--, 
@@ -7450,12 +7514,12 @@ var Element$1 = defineComponent({
             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;
@@ -7464,16 +7528,16 @@ var Element$1 = defineComponent({
             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;
@@ -7483,26 +7547,26 @@ var Element$1 = defineComponent({
             let i = activateNodeIndex.value + 1;
             i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
         }, canvasContextRef = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), mainContentHeight = ref(options.minContentHeight), updateMainContentHeight = () => {
-            nextTick((() => {
+            nextTick(() => {
                 const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
                 mainContentHeight.value = contentHeight;
-            }));
+            });
         };
-        onMounted((() => {
-            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+        onMounted(() => {
+            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, () => {
                 updateMainContentHeight();
-            })), window.addEventListener("resize", updateMainContentHeight);
-        })), onUnmounted((() => {
+            }), window.addEventListener("resize", updateMainContentHeight);
+        }), 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 = ref(!1), onSwitchFillscreen = val => {
-            isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
+            isFullscreen.value = val, updateMainContentHeight(), nextTick(() => {
                 canvasContextRef.value.rerenderImage();
-            }));
+            });
         }, scaleTranslate = ref({
             scale: 1,
             x: 0,
@@ -7564,7 +7628,7 @@ var Element$1 = defineComponent({
                         rowInfo: currentNode.value,
                         onChange: onChangeNodeRect
                     }, null) ]) ]
-                }), createVNode(RightLabel, {
+                }), createVNode(RightLabel$1, {
                     contentHeight: mainContentHeight.value,
                     classes: classes.value,
                     labels: activateNodeLabels.value,
@@ -7586,7 +7650,7 @@ var Element$1 = defineComponent({
                 }, [ createVNode(ElScrollbar, null, {
                     default: () => [ createVNode("ul", {
                         class: [ ns$2.bem("footer", "center", "list") ]
-                    }, [ labelImages.value.map(((item, index) => createVNode("li", {
+                    }, [ labelImages.value.map((item, index) => createVNode("li", {
                         key: index,
                         onClick: () => onChangeActivateNode(index),
                         class: {
@@ -7599,7 +7663,7 @@ var Element$1 = defineComponent({
                         "max-scale": 2,
                         "min-scale": .2,
                         fit: "cover"
-                    }, null) ]))) ]) ]
+                    }, null) ])) ]) ]
                 }) ]), createVNode("div", {
                     class: [ ns$2.be("footer", "right") ]
                 }, [ createVNode(ElIcon, {
@@ -7667,13 +7731,13 @@ var preview = defineComponent({
                 };
             }
         };
-        onMounted((() => {
-            watch((() => props.src), (() => {
+        onMounted(() => {
+            watch(() => props.src, () => {
                 renderImageAndLabel();
-            }), {
+            }, {
                 immediate: !0
             });
-        }));
+        });
         return () => createVNode(Fragment, null, [ createVNode("div", {
             class: [ ns$1.b(), props.className ],
             style: {
@@ -7685,84 +7749,292 @@ var preview = defineComponent({
     }
 });
 
-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" ];
+const NextLabelimg = withInstall(Element$1), NextLabelimgPreview = withInstall(preview);
 
-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;
-            }
-        }
-        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();
-    }
-    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);
-    }
-}
+var ShapeType, ToolsHandleType;
 
-class EditPolygonPath {
-    canvas;
-    ctx;
-    vertexes;
-    isEditing;
-    isMoveEditing;
-    canClickEvent;
-    pointVertexIndex;
-    pointCentreIndex;
+!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 = defineComponent({
+    props: {
+        fixed: {
+            type: Object,
+            default: () => ({})
+        },
+        classes: {
+            type: Array,
+            default: () => []
+        },
+        activateShape: {
+            type: Object,
+            default: null
+        }
+    },
+    emits: [ "close", "select", "delete" ],
+    setup(props, {emit: emit}) {
+        const {t: t} = useLocale(), ns = inject("ns", {}), groupId = ref(props.activateShape.group_id || ""), description = ref(props.activateShape.description || ""), onClose = () => {
+            emit("close");
+        }, onDelete = () => {
+            emit("delete", props.activateShape);
+        }, activateIndex = ref();
+        watch(() => props.activateShape, () => {
+            const {label: label} = props.activateShape;
+            activateIndex.value = isValueExist(label) ? label : null;
+        }, {
+            deep: !0,
+            immediate: !0
+        });
+        const labelRectWidthHeight = ref({
+            width: 0,
+            height: 0
+        });
+        onMounted(() => {
+            const {clientWidth: clientWidth, clientHeight: clientHeight} = labelMenuRef.value;
+            labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
+        });
+        const labelMenuRef = ref(), labelStyleFixed = 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 createVNode(Teleport, {
+                to: "body"
+            }, {
+                default: () => {
+                    return [ createVNode("div", {
+                        ref: labelMenuRef,
+                        class: [ ns.b("contextmenu-label") ],
+                        style: labelStyleFixed.value
+                    }, [ createVNode("div", {
+                        class: "label-head"
+                    }, [ createVNode("span", {
+                        style: "padding-right: 30px"
+                    }, [ t("next.labelme.selectClasses") ]), createVNode(ElIcon, {
+                        size: 16,
+                        onClick: onClose
+                    }, {
+                        default: () => [ createVNode(close_default, null, null) ]
+                    }) ]), props.classes.length ? createVNode(Fragment, null, [ createVNode(ElInput, {
+                        modelValue: groupId.value,
+                        "onUpdate:modelValue": $event => groupId.value = $event,
+                        placeholder: t("next.labelme.labelGroupId"),
+                        size: "small",
+                        maxLength: 30
+                    }, null), createVNode("ul", {
+                        class: "label-main"
+                    }, [ props.classes.map((name, index) => 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
+                        }
+                    }, [ createVNode("span", {
+                        style: {
+                            "background-color": colors[index % colors.length]
+                        },
+                        class: "label-line"
+                    }, null), createVNode("span", null, [ name ]) ])) ]), createVNode(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) ]) : createVNode(ElEmpty, {
+                        "image-size": 50,
+                        description: t("next.labelme.emptyClassesText"),
+                        style: {
+                            padding: 0
+                        }
+                    }, null), isValueExist(activateIndex.value) ? createVNode("div", {
+                        style: "margin: 10px auto 0"
+                    }, [ createVNode(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) && !isVNode(s) ? _slot : {
+                        default: () => [ _slot ]
+                    })) ]) : null ]) ];
+                    var s;
+                }
+            });
+        };
+        return () => createVNode(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.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);
+    }
+}
+
+const {hexToRgba: hexToRgba$1} = useChangeColor();
+
+class EditPolygon {
+    canvas;
+    ctx;
+    vertexes;
+    isEditing;
+    isMoveEditing;
+    canClickEvent;
+    pointVertexIndex;
+    pointCentreIndex;
     vertexRadius;
     edgeCentreRadius;
     pointRecover;
@@ -7771,7 +8043,9 @@ class EditPolygonPath {
     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);
@@ -7780,45 +8054,55 @@ class EditPolygonPath {
         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;
             }
@@ -7827,11 +8111,11 @@ class EditPolygonPath {
         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;
             }
@@ -7840,9 +8124,9 @@ class EditPolygonPath {
         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;
@@ -7851,17 +8135,18 @@ class EditPolygonPath {
         }
     }
     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);
@@ -7869,13 +8154,13 @@ class EditPolygonPath {
         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);
@@ -7890,7 +8175,7 @@ class EditPolygonPath {
         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);
@@ -7902,126 +8187,208 @@ class EditPolygonPath {
         }
     }
     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 = 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 = inject("ns", {}), scaleTranslateManager = inject("scaleTranslateManager", {}), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), canvasDragZoom = 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 = ref(!1), renderImageLabel = rowInfo => {
+        const ns = inject("ns", {}), classes = inject("classes", ref([])), toolsActive = inject("toolsActive", {}), scaleTranslateManager = inject("scaleTranslateManager", {}), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), canvasDragZoom = ref(), _labelInfo = ref(props.labelInfo), loadingImage = 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;
@@ -8047,61 +8414,88 @@ var CanvasContext = defineComponent({
                         };
                     })(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);
+                    }), 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;
                 };
             }
         };
-        onMounted((() => {
-            watch((() => props.rowInfo), (info => {
-                const rowInfo = toRaw(info);
-                renderImageLabel(rowInfo);
-            }), {
-                deep: !0,
-                immediate: !0
-            }), watch((() => props.contextClientHeight), (height => {
-                if (valueExist(height)) {
-                    canvasMainRef.value.style.height = height + "px";
-                    const rowInfo = toRaw(props.rowInfo);
-                    renderImageLabel(rowInfo);
-                }
-            }));
-        })), onUnmounted((() => {
+        onMounted(() => {
+            renderImageLabel(_labelInfo.value), watch(() => props.contextClientHeight, height => {
+                valueExist(height) && (canvasMainRef.value.style.height = height + "px", renderImageLabel(_labelInfo.value));
+            });
+        }), onUnmounted(() => {
             drawCanvas.value.destroy(), canvasDragZoom.value.destroy();
-        }));
+        });
+        const contextmenuLabelFixed = 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 = 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(toRaw(shape)) : _labelInfo.value.labels.shapes[index] = 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), nextTick((() => {
-                    const rowInfo = toRaw(props.rowInfo);
-                    renderImageLabel(rowInfo);
-                }));
+                onCloseContentmenuLabel(), nextTick(() => {
+                    renderImageLabel(_labelInfo.value);
+                });
             },
             resetScaleOffset: () => {
                 canvasDragZoom.value.reset();
@@ -8120,7 +8514,14 @@ var CanvasContext = defineComponent({
             }, [ createVNode("canvas", {
                 ref: canvasBaseRef,
                 class: [ ns.be("canvas", "context") ]
-            }, null) ]) ]
+            }, null), contextmenuLabelFixed.value.show ? createVNode(ContextMenuLabel, {
+                fixed: contextmenuLabelRect.value,
+                classes: classes.value,
+                activateShape: contextmenuLabelFixed.value.activateShape,
+                onClose: onCloseContentmenuLabel,
+                onSelect: onSelectLabel,
+                onDelete: onDeleteLabel
+            }, null) : null ]) ]
         }) ]);
     }
 }), HeaderTool = defineComponent({
@@ -8165,64 +8566,10 @@ var CanvasContext = defineComponent({
             "p-id": "4274"
         }, null) ]), createVNode("p", {
             class: "label-text"
-        }, [ t("next.labelme.saveLabel") ]) ]), createVNode("li", {
-            class: "tool-item"
-        }, [ 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"
-        }, [ 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), 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) ]), createVNode("p", {
-            class: "label-text"
-        }, [ t("next.labelme.createPolygon") ]) ]), createVNode("li", {
-            class: "tool-item"
-        }, [ 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"
-        }, [ 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) ]), createVNode("p", {
-            class: "label-text"
-        }, [ t("next.labelme.editPolygon") ]) ]), createVNode("li", {
-            class: "tool-item"
-        }, [ 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"
-        }, [ 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), 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) ]), createVNode("p", {
-            class: "label-text"
-        }, [ t("next.labelme.deletePolyton") ]) ]) ]), createVNode("ul", {
+        }, [ t("next.labelme.saveLabel") ]) ]) ]), createVNode("ul", {
             class: [ _ns.be("header", "tool") ]
         }, [ createVNode("li", {
-            class: "hover",
+            class: "tool-item",
             onClick: () => scaleTranslateManager.onResetScaleTranslate()
         }, [ createVNode("svg", {
             t: "1725840994827",
@@ -8238,7 +8585,9 @@ var CanvasContext = defineComponent({
             "p-id": "6052"
         }, null) ]), createVNode("span", {
             style: "padding-left: 3px"
-        }, [ t("next.labelimg.zoomRestore") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("缩放比例") ]), createVNode("span", null, [ parseInt((100 * scaleTranslate.value.scale).toString()), createTextVNode("%") ]), createVNode("span", {
+        }, [ t("next.labelimg.zoomRestore") ]) ]), createVNode("li", {
+            style: "color: #999; user-select: none; cursor: default;"
+        }, [ createVNode("span", null, [ createTextVNode("缩放比例") ]), createVNode("span", null, [ parseInt((100 * scaleTranslate.value.scale).toString()), createTextVNode("%") ]), createVNode("span", {
             style: "padding: 0 10px;"
         }, [ createTextVNode("偏移量") ]), createVNode("span", {
             style: "min-width: 120px; text-align: left;"
@@ -8263,7 +8612,7 @@ var CanvasContext = defineComponent({
             }) ]),
             default: () => createVNode("ul", {
                 style: "font-size: 12px;white-space: nowrap;"
-            }, [ createVNode("li", null, [ createVNode("span", null, [ createTextVNode("A：") ]), createVNode("span", null, [ createTextVNode("A键进入上一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("D：") ]), createVNode("span", null, [ createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+            }, [ createVNode("li", null, [ createVNode("span", null, [ createTextVNode("A：") ]), createVNode("span", null, [ createTextVNode("A键进入上一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("D：") ]), createVNode("span", null, [ createTextVNode("D键进入下一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("Ctrl+鼠标：") ]), createVNode("span", null, [ createTextVNode("按住Ctrl键+鼠标滚动可以缩放图片，按住Ctrl+左键拖动可以移动图片") ]) ]) ])
         }) ]), props.isFullscreen ? createVNode("li", {
             class: "tool-item",
             onClick: () => switchFillscreen(!1)
@@ -8306,9 +8655,195 @@ var CanvasContext = defineComponent({
             }, null) ]) ]
         }) ]) ]) ]) ]);
     }
-}), defaultConfig = {
-    minContentHeight: 500
-};
+}), LeftTools = defineComponent({
+    props: {},
+    emits: [ "change" ],
+    setup(props, {emit: emit}) {
+        const {t: t} = useLocale(), _ns = inject("ns", {}), toolsActive = inject("toolsActive", {}), changeToolsActive = inject("changeToolsActive"), onClickToolsActive = type => {
+            changeToolsActive(type), emit("change", type);
+        };
+        return () => createVNode(Fragment, null, [ createVNode("ul", {
+            class: [ _ns.be("main", "left-tools") ]
+        }, [ createVNode("li", {
+            class: [ "tool-item", {
+                "active-tool": toolsActive.value === ToolsHandleType.CREATE_POLYGON
+            } ],
+            onClick: () => onClickToolsActive(ToolsHandleType.CREATE_POLYGON)
+        }, [ 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"
+        }, [ 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) ]), createVNode("p", {
+            class: "label-text"
+        }, [ t("next.labelme.createPolygon") ]) ]), createVNode("li", {
+            class: [ "tool-item", {
+                "active-tool": toolsActive.value === ToolsHandleType.EDIT_SHAPE
+            } ],
+            onClick: () => onClickToolsActive(ToolsHandleType.EDIT_SHAPE)
+        }, [ 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"
+        }, [ 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), 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) ]), createVNode("p", {
+            class: "label-text"
+        }, [ t("next.labelme.editPolygon") ]) ]), createVNode("li", {
+            class: [ "tool-item", {
+                "active-tool": toolsActive.value === ToolsHandleType.CREATE_RECTANGLE
+            } ],
+            onClick: () => onClickToolsActive(ToolsHandleType.CREATE_RECTANGLE)
+        }, [ 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"
+        }, [ 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), 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) ]), createVNode("p", {
+            class: "label-text"
+        }, [ t("next.labelme.createRectangle") ]) ]), createVNode("li", {
+            class: [ "tool-item", {
+                "active-tool": toolsActive.value === ToolsHandleType.CREATE_CIRCLE
+            } ],
+            onClick: () => onClickToolsActive(ToolsHandleType.CREATE_CIRCLE)
+        }, [ 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"
+        }, [ 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) ]), createVNode("p", {
+            class: "label-text"
+        }, [ t("next.labelme.createCircle") ]) ]) ]) ]);
+    }
+}), RightLabel = defineComponent({
+    props: {
+        shapes: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: [ "delete", "update" ],
+    setup(props, {emit: emit}) {
+        const {t: t} = useLocale(), _ns = inject("ns", {}), classes = inject("classes", ref([])), _classes = unref(classes), formatlabelColor = lebel => {
+            const index = _classes.findIndex(item => item === lebel);
+            return -1 === index ? "#5470c6" : colors[index];
+        }, shapes = toRef(props, "shapes"), formColumns = [ {
+            prop: "group_id",
+            label: t("next.labelme.labelGroupId"),
+            type: "input"
+        }, {
+            prop: "description",
+            label: t("next.labelme.labelDescription"),
+            type: "textarea"
+        } ], shapeEditDialog = reactive({
+            visible: !1,
+            title: "",
+            shapeInfo: {}
+        }), onCloseShapeEditDialog = () => {
+            shapeEditDialog.visible = !1, shapeEditDialog.title = "", shapeEditDialog.shapeInfo = {};
+        }, onSubmitShapeChange = (shape, done) => {
+            emit("update", deepClone(shape)), done(), onCloseShapeEditDialog();
+        }, renderContent = () => createVNode("div", {
+            class: [ _ns.be("main", "right-label") ]
+        }, [ shapes.value.length ? createVNode("ul", null, [ shapes.value.map((shape, index) => createVNode("li", {
+            class: [ _ns.be("right-label", "label-item") ],
+            key: index
+        }, [ createVNode("div", {
+            class: [ _ns.be("right-label", "label-content") ]
+        }, [ createVNode("span", {
+            class: "label-line",
+            style: {
+                backgroundColor: formatlabelColor(shape.label)
+            }
+        }, null), createVNode("span", null, [ shape.label, shape.group_id ? ` ( ${shape.group_id} )` : null ]) ]), createVNode("div", {
+            class: [ _ns.be("right-label", "label-btns") ]
+        }, [ createVNode(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: () => [ createVNode(edit_default, null, null) ]
+        }), createVNode(ElPopconfirm, {
+            title: t("next.labelme.confirmDeleteLabel"),
+            width: 200,
+            onConfirm: () => (shape => {
+                emit("delete", shape);
+            })(shape)
+        }, {
+            reference: () => createVNode(ElIcon, {
+                size: 16,
+                color: "#ff0000",
+                onClick: event => {
+                    event.preventDefault(), event.stopPropagation();
+                }
+            }, {
+                default: () => [ createVNode(delete_default, null, null) ]
+            })
+        }) ]) ])) ]) : createVNode(ElEmpty, {
+            "image-size": 100,
+            description: t("next.labelme.emptyLabelText")
+        }, null), 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: () => [ createVNode(NextForm, {
+                options: {
+                    labelPosition: "top",
+                    colSpanFixed: 24
+                },
+                columns: formColumns,
+                formDatum: shapeEditDialog.shapeInfo,
+                onSubmit: onSubmitShapeChange
+            }, null) ]
+        }) ]);
+        return () => createVNode(Fragment, null, [ renderContent() ]);
+    }
+});
 
 const ns = useNamespace("labelme");
 
@@ -8338,40 +8873,50 @@ var Element = defineComponent({
     },
     emits: [ "change", "save", "edit-polygon", "change-polygon", "prev-click", "next-click" ],
     setup(props, {emit: emit, slots: slots}) {
-        const _config = deepClone(defaultConfig), _options = computed((() => {
+        const _config = deepClone(defaultConfig), _options = computed(() => {
             const cfg = unref(props.options);
             return merge(_config, cfg);
-        })), options = unref(_options);
+        }), options = unref(_options);
         provide("ns", ns);
-        const {t: t} = useLocale(), activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
-        watch((() => props.data), (data => {
+        const {t: t} = useLocale(), activateNodeIndex = ref(0), classes = ref(props.classes);
+        provide("classes", classes);
+        const toolsActive = ref("");
+        provide("toolsActive", toolsActive), provide("changeToolsActive", val => {
+            toolsActive.value = val;
+        });
+        const labelImages = ref(deepClone(props.data));
+        watch(() => props.data, data => {
             labelImages.value = deepClone(data);
-        }), {
+        }, {
             deep: !0
-        }), watch((() => props.data.length), (() => {
+        }), watch(() => props.data.length, () => {
             activateNodeIndex.value = 0;
-        })), watch((() => props.classes), (val => {
-            classes.value = val;
-        }), {
-            deep: !0
         });
-        const currentNode = computed((() => {
+        const currentNode = computed(() => {
             if (!labelImages.value) return {};
             const node = labelImages.value[activateNodeIndex.value] || {};
             return deepClone(node);
-        })), loading = ref(!1), mainContentHeight = ref(options.minContentHeight), canvasContextRef = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), updateMainContentHeight = () => {
-            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 = ref(!1), mainContentHeight = ref(options.minContentHeight), canvasContextRef = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), updateMainContentHeight = () => {
+            nextTick(() => {
                 const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
                 mainContentHeight.value = contentHeight;
-            }));
+            });
         };
-        onMounted((() => {
-            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+        onMounted(() => {
+            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, () => {
                 updateMainContentHeight();
-            })), window.addEventListener("resize", updateMainContentHeight);
-        })), onUnmounted((() => {
+            }), window.addEventListener("resize", updateMainContentHeight);
+        }), onUnmounted(() => {
             document.removeEventListener("keydown", onKeydownPrevNext), window.removeEventListener("resize", updateMainContentHeight);
-        }));
+        });
         const onKeydownPrevNext = () => {}, onPaginationPrev = () => {
             const imageLength = labelImages.value.length;
             let i = activateNodeIndex.value - 1;
@@ -8386,20 +8931,20 @@ var Element = defineComponent({
             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 = ref(!1), onSwitchFillscreen = val => {
-            isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
+            isFullscreen.value = val, updateMainContentHeight(), 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) || ElMessage({
                 type: "info",
@@ -8443,17 +8988,22 @@ var Element = defineComponent({
                 }, null) ]), createVNode("div", {
                     ref: mainRef,
                     class: [ ns.b("main") ]
-                }, [ createVNode("div", {
+                }, [ createVNode(LeftTools, null, null), createVNode("div", {
                     class: [ ns.be("main", "content") ],
                     style: {
                         height: mainContentHeight.value + "px"
                     }
                 }, [ createVNode(CanvasContext, {
                     ref: canvasContextRef,
-                    rowInfo: currentNode.value,
-                    onEditPolygon: onEditPlygon,
-                    onChangePolygon: onChangePolygon
-                }, null) ]) ]), createVNode("footer", {
+                    labelInfo: currentNode.value,
+                    onEditPolygon: onEditPolygon,
+                    onChangePolygon: onChangePolygon,
+                    onUpdateLabelInfo: onUpdateLabelInfo
+                }, null) ]), createVNode(RightLabel, {
+                    shapes: currentNode.value.labels?.shapes,
+                    onUpdate: onUpdateLabelShape,
+                    onDelete: onDeleteLabelShape
+                }, null) ]), createVNode("footer", {
                     ref: footerRef,
                     class: [ ns.b("footer") ]
                 }, [ createVNode("div", {
@@ -8469,7 +9019,7 @@ var Element = defineComponent({
                 }, [ createVNode(ElScrollbar, null, {
                     default: () => [ createVNode("ul", {
                         class: [ ns.bem("footer", "center", "list") ]
-                    }, [ labelImages.value.map(((item, index) => createVNode("li", {
+                    }, [ labelImages.value.map((item, index) => createVNode("li", {
                         key: index,
                         onClick: () => onChangeActivateNode(index),
                         class: {
@@ -8482,7 +9032,7 @@ var Element = defineComponent({
                         "max-scale": 2,
                         "min-scale": .2,
                         fit: "cover"
-                    }, null) ]))) ]) ]
+                    }, null) ])) ]) ]
                 }) ]), createVNode("div", {
                     class: [ ns.be("footer", "right") ]
                 }, [ createVNode(ElIcon, {
@@ -8531,7 +9081,7 @@ const zoomDialog = app => {
             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], 
-            nextTick((() => {
+            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 => {
@@ -8552,23 +9102,23 @@ const zoomDialog = app => {
                         };
                     };
                 }, zoomDomBox.appendChild(zoomHandleEl);
-            }));
+            });
         }
     });
-}, configProviderContextKey = Symbol("configProviderContextKey"), version = "0.5.9", install = function(app, options) {
-    if (Object.keys(components).forEach((key => {
+}, configProviderContextKey = Symbol("configProviderContextKey"), version = "0.6.0", install = function(app, options) {
+    if (Object.keys(components).forEach(key => {
         const component = components[key];
         app.component(component.name, component);
-    })), (app => {
+    }), (app => {
         zoomDialog(app);
     })(app), options) {
         const inSetup = !!getCurrentInstance();
-        (app?.provide ?? (inSetup ? provide : void 0))(configProviderContextKey, computed((() => options)));
+        (app?.provide ?? (inSetup ? provide : void 0))(configProviderContextKey, computed(() => options));
     }
 };
 
 var index = {
-    version: "0.5.9",
+    version: "0.6.0",
     install: install
 };