next-element-vue 0.3.1 → 0.3.3

package/dist/index.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.1 v
- * 发布日期：2024-06-22
+ * 当前版本：0.3.3 v
+ * 发布日期：2024-07-23
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -566,9 +566,9 @@ function getAllKeys(object) {
     }(object, keys, getSymbols$1);
 }
 
-var DataView = getNative(root, "DataView"), Promise$1 = getNative(root, "Promise"), Set = getNative(root, "Set"), dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap), getTag = baseGetTag;
+var DataView = getNative(root, "DataView"), Promise$1 = getNative(root, "Promise"), Set$1 = getNative(root, "Set"), dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap), getTag = baseGetTag;
 
-(DataView && "[object DataView]" != getTag(new DataView(new ArrayBuffer(1))) || Map$1 && "[object Map]" != getTag(new Map$1) || Promise$1 && "[object Promise]" != getTag(Promise$1.resolve()) || Set && "[object Set]" != getTag(new Set) || WeakMap && "[object WeakMap]" != getTag(new WeakMap)) && (getTag = function(value) {
+(DataView && "[object DataView]" != getTag(new DataView(new ArrayBuffer(1))) || Map$1 && "[object Map]" != getTag(new Map$1) || Promise$1 && "[object Promise]" != getTag(Promise$1.resolve()) || Set$1 && "[object Set]" != getTag(new Set$1) || WeakMap && "[object WeakMap]" != getTag(new WeakMap)) && (getTag = function(value) {
     var result = baseGetTag(value), Ctor = "[object Object]" == result ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
     if (ctorString) switch (ctorString) {
       case dataViewCtorString:
@@ -1090,6 +1090,13 @@ function useChangeColor() {
             for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
             return hexs;
         },
+        hexToRgba: (str, alpha = 1) => {
+            let hexs = "";
+            if (!/^\#?[0-9A-Fa-f]{6}$/.test(str)) return ElMessage.warning("输入错误的hex"), "";
+            hexs = (str = str.replace("#", "")).match(/../g);
+            for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
+            return `rgba(${hexs.join(",")},${alpha})`;
+        },
         rgbToHex: (r, g, b) => {
             let reg = /^\d{1,3}$/;
             if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning("输入错误的rgb颜色值"), 
@@ -1217,7 +1224,7 @@ const {getLightColor: getLightColor$4} = useChangeColor(), nextUseCssVar = (cssv
     return main;
 }, slots_config_headerMenu = "header-menu", slots_config_headerToolsPrefix = "header-tools-prefix", slots_config_headerToolsSuffix = "header-tools-suffix";
 
-var defaultConfig$4 = {
+var defaultConfig$5 = {
     logo: "",
     title: "Next Element Vue",
     userName: "Admin",
@@ -1265,7 +1272,7 @@ var defaultConfig$4 = {
     }
 };
 
-const ns$k = useNamespace("text-ellipsis");
+const ns$l = useNamespace("text-ellipsis");
 
 const NextTextEllipsis = withInstall(defineComponent({
     name: "NextTextEllipsis",
@@ -1312,7 +1319,7 @@ const NextTextEllipsis = withInstall(defineComponent({
             }
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$k.b(), props.class ],
+            class: [ ns$l.b(), props.class ],
             style: setWidth.value,
             onMouseenter: onMouseenter
         }, [ isTip.value ? createVNode(ElTooltip, {
@@ -1322,11 +1329,11 @@ const NextTextEllipsis = withInstall(defineComponent({
             disabled: props.disabled
         }, {
             default: () => [ createVNode("span", {
-                class: ns$k.e("text"),
+                class: ns$l.e("text"),
                 ref: ellipsisRef
             }, [ slots.default ? slots.default() : props.content ]) ]
         }) : createVNode("span", {
-            class: ns$k.e("text"),
+            class: ns$l.e("text"),
             ref: ellipsisRef
         }, [ slots.default ? slots.default() : props.content ]) ]) ]);
     }
@@ -2710,7 +2717,7 @@ const NextMenuItem = defineComponent({
             }, null) ]
         }))) ]) ]);
     }
-}), ns$j = useNamespace("menu");
+}), ns$k = useNamespace("menu");
 
 const NextMenu = withInstall(defineComponent({
     name: "NextMenu",
@@ -2738,13 +2745,13 @@ const NextMenu = withInstall(defineComponent({
         }
     },
     setup(props) {
-        provide("ns", ns$j);
+        provide("ns", ns$k);
         const router = getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, activePath = ref(currentPath);
         watch((() => router.currentRoute?.value), (to => {
             activePath.value = to.fullPath;
         }));
         return () => createVNode(Fragment, null, [ createVNode(ElMenu, {
-            class: [ ns$j.b(), props.className ],
+            class: [ ns$k.b(), props.className ],
             style: props.style,
             defaultActive: activePath.value,
             router: props.router,
@@ -2752,7 +2759,7 @@ const NextMenu = withInstall(defineComponent({
             ellipsis: !0
         }, {
             default: () => [ createVNode(Fragment, null, [ props.menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
-                "popper-class": ns$j.b("popper"),
+                "popper-class": ns$k.b("popper"),
                 index: item.path || item.id,
                 teleported: !0
             }, {
@@ -2763,7 +2770,7 @@ const NextMenu = withInstall(defineComponent({
                     menuData: item.children
                 }, null)
             }) : valueExist(item.meta?.isHide, !1) ? null : createVNode(ElMenuItem, {
-                "popper-class": ns$j.b("popper"),
+                "popper-class": ns$k.b("popper"),
                 index: item.path
             }, {
                 default: () => [ createVNode(MenuItemTitle, {
@@ -2791,20 +2798,20 @@ var Sidebar$2 = defineComponent({
     }
 });
 
-const ns$i = useNamespace("layout-defaults");
+const ns$j = useNamespace("layout-defaults");
 
 var defaults = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$i), {}),
+    setup: () => (provide("ns", ns$j), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
         slots.menu;
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(ElContainer, {
-            class: ns$i.b()
+            class: ns$j.b()
         }, {
             default: () => [ createVNode(Sidebar$2, null, null), createVNode("div", {
-                class: [ ns$i.b("content") ]
+                class: [ ns$j.b("content") ]
             }, [ createVNode(Header$3, null, null), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
                 tabs: _config.tabs,
                 activeTab: _config.activeTab,
@@ -2812,7 +2819,7 @@ var defaults = defineComponent({
                 onSelect: (...arg) => _emit("tabsSelect", ...arg),
                 onClose: (...arg) => _emit("tabsClose", ...arg)
             }, null) : null, createVNode("main", {
-                class: [ ns$i.bf("main"), ns$i.is("layout-tabs", isTabs.value) ]
+                class: [ ns$j.bf("main"), ns$j.is("layout-tabs", isTabs.value) ]
             }, [ slots.default?.() ]) ]) ]
         });
     }
@@ -2845,11 +2852,11 @@ var Header$2 = defineComponent({
     }
 });
 
-const ns$h = useNamespace("layout-transverse");
+const ns$i = useNamespace("layout-transverse");
 
 var transverse = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$h), {}),
+    setup: () => (provide("ns", ns$i), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2866,7 +2873,7 @@ var transverse = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, createVNode("main", {
-            class: [ ns$h.b("main"), ns$h.is("layout-tabs", isTabs.value) ]
+            class: [ ns$i.b("main"), ns$i.is("layout-tabs", isTabs.value) ]
         }, [ slots.default?.() ]) ]);
         var s;
     }
@@ -2908,11 +2915,11 @@ var Header$1 = defineComponent({
     }
 });
 
-const ns$g = useNamespace("layout-columns");
+const ns$h = useNamespace("layout-columns");
 
 var columns = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$g), {}),
+    setup: () => (provide("ns", ns$h), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2920,11 +2927,11 @@ var columns = defineComponent({
         slots[slots_config_headerToolsSuffix] && (__slots_header[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(ElContainer, {
-            class: ns$g.b()
+            class: ns$h.b()
         }, {
             default: () => {
                 return [ createVNode(Sidebar$1, null, null), createVNode("div", {
-                    class: [ ns$g.b("content") ]
+                    class: [ ns$h.b("content") ]
                 }, [ createVNode(Header$1, null, (s = __slots_header, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header : {
                     default: () => [ __slots_header ]
                 })), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
@@ -2934,7 +2941,7 @@ var columns = defineComponent({
                     onSelect: (...arg) => _emit("tabsSelect", ...arg),
                     onClose: (...arg) => _emit("tabsClose", ...arg)
                 }, null) : null, createVNode("main", {
-                    class: [ ns$g.bf("main"), ns$g.is("layout-tabs", isTabs.value) ]
+                    class: [ ns$h.bf("main"), ns$h.is("layout-tabs", isTabs.value) ]
                 }, [ slots.default?.() ]) ]) ];
                 var s;
             }
@@ -2980,21 +2987,21 @@ var Header = defineComponent({
     }
 });
 
-const ns$f = useNamespace("layout-classic");
+const ns$g = useNamespace("layout-classic");
 
 var classic = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$f), {
-        ns: ns$f
+    setup: () => (provide("ns", ns$g), {
+        ns: ns$g
     }),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
         slots.menu;
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(Fragment, null, [ createVNode(Header, null, null), createVNode("div", {
-            class: [ ns$f.b("content"), ns$f.is("layout-tabs", isTabs.value) ]
+            class: [ ns$g.b("content"), ns$g.is("layout-tabs", isTabs.value) ]
         }, [ createVNode(Sidebar, null, null), createVNode("div", {
-            class: ns$f.b("container")
+            class: ns$g.b("container")
         }, [ _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
             tabs: _config.tabs,
             activeTab: _config.activeTab,
@@ -3002,12 +3009,12 @@ var classic = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, createVNode("main", {
-            class: [ ns$f.b("main") ]
+            class: [ ns$g.b("main") ]
         }, [ slots.default?.() ]) ]) ]) ]);
     }
 });
 
-const ns$e = useNamespace("layout"), layouts = {
+const ns$f = useNamespace("layout"), layouts = {
     defaults: markRaw(defaults),
     transverse: markRaw(transverse),
     columns: markRaw(columns),
@@ -3034,8 +3041,8 @@ const NextLayout = withInstall(defineComponent({
     },
     emits: [ "changeLanguage", "changeUserDropdown", "changeOptions", "tabsChange", "tabsSelect", "tabsClose" ],
     setup(props, {slots: slots, emit: emit}) {
-        const _config = ref(mergeWith(defaultConfig$4, props.options, customizerCoverArray));
-        provide("options", _config.value), provide("__ns__", ns$e), provide("__emit__", emit), 
+        const _config = ref(mergeWith(defaultConfig$5, props.options, customizerCoverArray));
+        provide("options", _config.value), provide("__ns__", ns$f), provide("__emit__", emit), 
         provide("__slots__", slots);
         const updateOptions = cfg => {
             _config.value = mergeWith(_config.value, cfg, customizerCoverArray), updateThemeColorCssVar(_config.value?.setting), 
@@ -3059,15 +3066,15 @@ const NextLayout = withInstall(defineComponent({
         const _activeSlots = {};
         for (const key in slots) Object.prototype.hasOwnProperty.call(slots, key) && (_activeSlots[key] = () => slots[key]?.());
         return createVNode("div", {
-            class: [ ns$e.b(), props.className ],
+            class: [ ns$f.b(), props.className ],
             style: props.style
         }, [ h(activeLayout.value, {}, {
             ..._activeSlots
         }) ]);
     }
-})), ns$d = useNamespace("tabs");
+})), ns$e = useNamespace("tabs");
 
-var Element$8 = defineComponent({
+var Element$9 = defineComponent({
     name: "NextTabs",
     props: {
         activeTab: {
@@ -3136,12 +3143,12 @@ var Element$8 = defineComponent({
             tabsView.value.push(activeRoute)), emit("change", activeIndex.value, tabsView.value, "add");
         }));
         const renderContent = () => createVNode("nav", {
-            class: ns$d.b()
+            class: ns$e.b()
         }, [ createVNode(ElScrollbar, null, {
             default: () => [ createVNode("ul", {
-                class: ns$d.b("list")
+                class: ns$e.b("list")
             }, [ tabsView.value.map(((tab, index) => tab ? createVNode("li", {
-                class: [ "tab-item", ns$d.is("active", activeIndex.value === index) ],
+                class: [ "tab-item", ns$e.is("active", activeIndex.value === index) ],
                 onClick: event => onClickTabItem(event, tab, index)
             }, [ createVNode("i", {
                 class: [ "tab-icon", tab.meta?.icon ]
@@ -3172,11 +3179,11 @@ var Element$8 = defineComponent({
             onCommand: onChange
         }, {
             default: () => createVNode("span", {
-                class: ns$d.b("tab-more")
+                class: ns$e.b("tab-more")
             }, [ createVNode("i", {
-                class: [ ns$d.be("tab-more", "box"), ns$d.be("tab-more", "top") ]
+                class: [ ns$e.be("tab-more", "box"), ns$e.be("tab-more", "top") ]
             }, null), createVNode("i", {
-                class: [ ns$d.be("tab-more", "box"), ns$d.be("tab-more", "bottom") ]
+                class: [ ns$e.be("tab-more", "box"), ns$e.be("tab-more", "bottom") ]
             }, null) ]),
             dropdown: () => createVNode(ElDropdownMenu, null, {
                 default: () => [ createVNode(ElDropdownItem, {
@@ -3210,7 +3217,7 @@ var Element$8 = defineComponent({
     }
 });
 
-const NextTabs = withInstall(Element$8), ns$c = useNamespace("container");
+const NextTabs = withInstall(Element$9), ns$d = useNamespace("container");
 
 const NextContainer = withInstall(defineComponent({
     name: "NextContainer",
@@ -3249,18 +3256,18 @@ const NextContainer = withInstall(defineComponent({
             }), style;
         }));
         return () => props.scrollbar ? createVNode(ElScrollbar, {
-            class: [ ns$c.b(), props.className ],
+            class: [ ns$d.b(), props.className ],
             style: props.style
         }, {
             default: () => [ slots.default?.() ]
         }) : createVNode("div", {
-            class: [ ns$c.b(), props.className ],
+            class: [ ns$d.b(), props.className ],
             style: {
                 ...styles.value,
                 ...props.style
             }
         }, [ props.card ? createVNode("div", {
-            class: ns$c.b("card")
+            class: ns$d.b("card")
         }, [ slots.default?.() ]) : slots.default?.() ]);
     }
 }));
@@ -3338,7 +3345,7 @@ var defaultPropsConfig = {
 
 const header_menu_slots_key = [ "menu-left-prefix", "menu-left-suffix", "menu-right-prefix", "menu-right-suffix" ], operation_column_slots_key = [ "operation-column-prefix", "operation-column-suffix" ];
 
-var defaultConfig$3 = {
+var defaultConfig$4 = {
     initLoadData: !0,
     defaultContentHeight: 300,
     fullscreenchangeContentHeight: !1,
@@ -3370,6 +3377,8 @@ var defaultConfig$3 = {
     settingBtn: !0,
     operations: !0,
     operationsWidth: 260,
+    operationsHeaderAlign: "center",
+    operationsColumnAlign: "center",
     operationsBtnPlain: !1,
     operationsBtnText: !0,
     operationsBtnSize: "small",
@@ -3385,7 +3394,7 @@ var defaultConfig$3 = {
     formColumnMinWidth: 350
 };
 
-const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$b = useNamespace("spin-loading");
+const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$c = useNamespace("spin-loading");
 
 var NextSpinLoading$1 = defineComponent({
     name: "NextSpinLoading",
@@ -3420,22 +3429,22 @@ var NextSpinLoading$1 = defineComponent({
         const _t = this.t, slots = this.$slots, props = this.$props, loadingText = props.tip || _t("next.loading");
         return createVNode("div", {
             ref: "elementInstance",
-            class: [ ns$b.b(), props.className ],
+            class: [ ns$c.b(), props.className ],
             style: props.style
         }, [ slots.default?.(), props.loading ? createVNode("div", {
-            class: ns$b.b("mask")
+            class: ns$c.b("mask")
         }, [ createVNode("span", {
-            class: ns$b.b("mask-dot")
+            class: ns$c.b("mask-dot")
         }, [ createVNode("i", {
-            class: ns$b.be("mask", "dot-item")
+            class: ns$c.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$b.be("mask", "dot-item")
+            class: ns$c.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$b.be("mask", "dot-item")
+            class: ns$c.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$b.be("mask", "dot-item")
+            class: ns$c.be("mask", "dot-item")
         }, null) ]), createVNode("span", {
-            class: ns$b.be("mask", "text")
+            class: ns$c.be("mask", "text")
         }, [ loadingText ]) ]) : null ]);
     }
 }), SearchColumn = defineComponent({
@@ -3968,7 +3977,9 @@ const TableColumnDynamic = defineComponent({
                 }, mergeDicData = loopDicData(columnOption.dicData);
                 return createVNode("span", null, [ _formatterColumnValue(row[columnOption.prop], mergeDicData) ]);
             }
-            return null;
+            return columnOption.cellUnit ? createVNode(Fragment, null, [ createVNode("span", null, [ row[columnOption.prop] ]), createVNode("em", {
+                class: "cell-unit"
+            }, [ columnOption.cellUnit ]) ]) : null;
         };
         return () => createVNode(Fragment, null, [ !columnOption.hide && createVNode(ElTableColumn, {
             prop: columnOption.prop,
@@ -4000,8 +4011,8 @@ var TableColumnOperations = defineComponent({
                 fixed: "right",
                 label: t("next.table.operation"),
                 width: options.operationsWidth,
-                headerAlign: options.headerAlign,
-                align: options.cellAlign
+                headerAlign: valueExist(options.operationsHeaderAlign, options.headerAlign),
+                align: valueExist(options.operationsColumnAlign, options.cellAlign)
             }, {
                 default: scoped => createVNode(Fragment, null, [ slots["operation-column-prefix"]?.(scoped, {
                     text: btnText,
@@ -4125,7 +4136,7 @@ var TableColumnOperations = defineComponent({
     }
 });
 
-const ns$a = useNamespace("dialog");
+const ns$b = useNamespace("dialog");
 
 var NextDialog$1 = defineComponent({
     name: "NextDialog",
@@ -4154,6 +4165,10 @@ var NextDialog$1 = defineComponent({
             type: Boolean,
             default: !0
         },
+        showClose: {
+            type: Boolean,
+            default: !0
+        },
         appendToBody: {
             type: Boolean,
             default: !1
@@ -4191,7 +4206,7 @@ var NextDialog$1 = defineComponent({
         return () => createVNode(Fragment, null, [ createVNode(ElDialog, {
             modelValue: visible.value,
             "onUpdate:modelValue": $event => visible.value = $event,
-            class: ns$a.b(),
+            class: ns$b.b(),
             title: props.title,
             appendToBody: props.appendToBody,
             "destroy-on-close": !0,
@@ -4208,18 +4223,18 @@ var NextDialog$1 = defineComponent({
         }, {
             default: () => [ slots.default?.() ],
             header: ({close: close, titleId: titleId, titleClass: titleClass}) => createVNode("div", {
-                class: ns$a.b("header")
+                class: ns$b.b("header")
             }, [ createVNode("h4", {
                 id: titleId,
                 class: titleClass
             }, [ props.title ]), createVNode("div", {
-                class: ns$a.e("header-right")
+                class: ns$b.e("header-right")
             }, [ props.fullscreenBtn && createVNode("span", {
                 class: "icon-fullscreen",
                 onClick: () => isFullscreen.value = !isFullscreen.value
             }, [ createVNode(ElIcon, null, {
                 default: () => [ createVNode(full_screen_default, null, null) ]
-            }) ]), createVNode("span", {
+            }) ]), props.showClose && createVNode("span", {
                 class: "icon-close",
                 onClick: close
             }, [ createVNode(ElIcon, {
@@ -4247,7 +4262,7 @@ const tableSelectConfig = {
     operations: !1
 };
 
-var defaultConfig$2 = {
+var defaultConfig$3 = {
     size: "default",
     colSpan: 8,
     labelWidth: "6em",
@@ -4262,7 +4277,7 @@ var defaultConfig$2 = {
     resetText: null
 };
 
-const ns$9 = useNamespace("form");
+const ns$a = useNamespace("form");
 
 var NumberRangePicker = defineComponent({
     name: "NumberRangePicker",
@@ -4302,7 +4317,7 @@ var NumberRangePicker = defineComponent({
         }));
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: numberRangeRef,
-            class: ns$9.e("number-range")
+            class: ns$a.e("number-range")
         }, [ createVNode(ElInputNumber, {
             modelValue: startNumber.value,
             "onUpdate:modelValue": $event => startNumber.value = $event,
@@ -4312,7 +4327,7 @@ var NumberRangePicker = defineComponent({
             disabled: disabled,
             onChange: onChangeStart
         }, null), createVNode("span", {
-            class: ns$9.em("number-range", "division")
+            class: ns$a.em("number-range", "division")
         }, [ t("next.date.rangeSeparator") ]), createVNode(ElInputNumber, {
             modelValue: endNumber.value,
             "onUpdate:modelValue": $event => endNumber.value = $event,
@@ -4331,7 +4346,7 @@ function _isSlot$3(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
+const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
     name: "InputTableSelect",
     props: {
         modelValue: {
@@ -4359,7 +4374,7 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
     },
     emits: [ "select" ],
     setup(props, {emit: emit}) {
-        const {t: t} = useLocale(), _disabled = props.disabled, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$3), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = reactive({
+        const {t: t} = useLocale(), _disabled = props.disabled, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$4), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = reactive({
             visible: !1,
             title: _column.label + t("next.form.tableSelect"),
             dialogWidth: _options.dialogWidth
@@ -4430,18 +4445,18 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
         }, renderContent = () => {
             let _slot, _slot2;
             return createVNode(Fragment, null, [ createVNode("div", {
-                class: [ "el-input", ns$8.e("input-table"), ns$8.is("disabled", _disabled) ]
+                class: [ "el-input", ns$9.e("input-table"), ns$9.is("disabled", _disabled) ]
             }, [ createVNode("div", {
                 class: "el-input__wrapper"
             }, [ tags?.value.length ? createVNode("span", {
-                class: ns$8.em("input-table", "value")
+                class: ns$9.em("input-table", "value")
             }, [ tags.value.map(((tag, index) => createVNode(ElTag, {
                 closable: !_disabled,
                 onClose: () => _onCloseTag(0, index)
             }, {
                 default: () => [ tag.label ]
             }))), tagsMore?.value?.length ? createVNode(ElTooltip, {
-                "popper-class": ns$8.e("tooltip-tags"),
+                "popper-class": ns$9.e("tooltip-tags"),
                 placement: "bottom",
                 effect: "light"
             }, {
@@ -4455,10 +4470,10 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
                     default: () => [ tag.label ]
                 })))
             }) : null ]) : createVNode("span", {
-                class: ns$8.em("input-table", "placeholder")
+                class: ns$9.em("input-table", "placeholder")
             }, [ _placeholder ]) ]), createVNode(ElButton, {
                 type: "primary",
-                class: ns$8.em("input-table", "append"),
+                class: ns$9.em("input-table", "append"),
                 disabled: _disabled,
                 icon: search_default,
                 onClick: onClickTableDialog
@@ -4472,7 +4487,7 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
                 onClose: onCloseTableDialog
             }, {
                 default: () => [ createVNode("div", {
-                    class: ns$8.em("input-table", "content")
+                    class: ns$9.em("input-table", "content")
                 }, [ createVNode(ElRadioGroup, {
                     modelValue: sinleSelection.value
                 }, {
@@ -4495,7 +4510,7 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
                         }) ]
                     }) ]
                 }) ]), createVNode("div", {
-                    class: ns$8.em("input-table", "footer")
+                    class: ns$9.em("input-table", "footer")
                 }, [ createVNode(ElButton, {
                     onClick: onResetTableSelect
                 }, _isSlot$3(_slot = t("next.form.reset")) ? _slot : {
@@ -4511,7 +4526,7 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
         };
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
-}), ns$7 = useNamespace("form");
+}), ns$8 = useNamespace("form");
 
 var UploadImage = defineComponent({
     name: "UploadImage",
@@ -4568,7 +4583,7 @@ var UploadImage = defineComponent({
             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, {
-                class: ns$7.e("preview-image"),
+                class: ns$8.e("preview-image"),
                 src: urls[0],
                 previewSrcList: urls,
                 "preview-teleported": !0,
@@ -4583,7 +4598,7 @@ var UploadImage = defineComponent({
                 })
             }) : null;
         })(), _disabled ? null : createVNode(ElUpload, {
-            class: [ ns$7.b("upload-image"), props.className ],
+            class: [ ns$8.b("upload-image"), props.className ],
             style: props.style,
             "list-type": props.listType,
             multiple: props.multiple,
@@ -4721,9 +4736,9 @@ function _isSlot$2(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$6 = useNamespace("form");
+const ns$7 = useNamespace("form");
 
-var Element$6 = defineComponent({
+var Element$7 = defineComponent({
     name: "NextForm",
     props: {
         options: {
@@ -4741,7 +4756,7 @@ var Element$6 = defineComponent({
     },
     emits: [ "submit", "close", "reset" ],
     setup(props, {slots: slots, emit: emit, expose: expose}) {
-        const _config = deepClone(defaultConfig$2), options = reactive(merge$1(_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$1({}, formDatum)), _formColumns = ref([]), formRules = reactive({});
+        const _config = deepClone(defaultConfig$3), options = reactive(merge$1(_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$1({}, formDatum)), _formColumns = ref([]), formRules = reactive({});
         watch((() => [ props.columns, props.formDatum ]), (() => {
             (() => {
                 const columns = props.columns;
@@ -5092,7 +5107,7 @@ var Element$6 = defineComponent({
                 let _slot;
                 return createVNode(ElForm, {
                     ref: ruleFormRef,
-                    class: ns$6.b(),
+                    class: ns$7.b(),
                     inline: !1,
                     model: formParams,
                     size: options.size
@@ -5112,7 +5127,7 @@ var Element$6 = defineComponent({
                         }, {
                             label: () => column.label ? createVNode(Fragment, null, [ createVNode(NextTextEllipsis, {
                                 content: t(column.label),
-                                class: ns$6.e("item-label")
+                                class: ns$7.e("item-label")
                             }, null), column.tip ? createVNode(ElTooltip, {
                                 effect: "dark",
                                 content: column.tip,
@@ -5132,7 +5147,7 @@ var Element$6 = defineComponent({
                     })))) ? _slot : {
                         default: () => [ _slot ]
                     }), _isEditing.value && options.showFooter ? createVNode("div", {
-                        class: ns$6.e("footer")
+                        class: ns$7.e("footer")
                     }, [ createVNode(ElButton, {
                         type: "primary",
                         loading: submitLoading.value,
@@ -5152,7 +5167,7 @@ var Element$6 = defineComponent({
     }
 });
 
-const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$6);
+const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$7);
 
 var AddEditForm = defineComponent({
     name: "AddEditForm",
@@ -5209,18 +5224,18 @@ function _isSlot(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$5 = useNamespace("crud-table");
+const ns$6 = useNamespace("crud-table");
 
-var Element$5 = defineComponent({
+var Element$6 = defineComponent({
     name: "NextCrudTable",
     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$3), _options = computed((() => {
+        const _config = deepClone(defaultConfig$4), _options = computed((() => {
             const cfg = unref(props.options);
             return merge$1(_config, cfg);
         })), options = unref(_options);
-        provide("options", computed((() => _options.value))), provide("ns", ns$5);
+        provide("options", computed((() => _options.value))), provide("ns", ns$6);
         const {t: t} = useLocale(), _columns = ref(options.columns), _searchColumns = ref([]), _formColumns = ref([]), _updateColumnsAll = ops => {
             ((options, cb) => {
                 const _columns = reactive(options.columns), _loadDicData = col => {
@@ -5458,15 +5473,16 @@ var Element$5 = defineComponent({
             getFormExpose: () => addEditFormRef.value?.getFormExpose(),
             updateColumns: ops => {
                 _updateColumnsAll(ops);
-            }
+            },
+            getSearchFormParams: () => _searchFormParams.value
         });
         return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("div", {
             ref: crudTableRef,
-            class: [ ns$5.b(), props.className ],
+            class: [ ns$6.b(), props.className ],
             style: props.style
         }, [ options.showSearchForm || options.showHeaderMenu ? createVNode("header", {
             ref: headerRef,
-            class: ns$5.b("header")
+            class: ns$6.b("header")
         }, [ options.showSearchForm && createVNode(HeaderSearch, {
             columns: _searchColumns.value,
             onZoomResize: updateTableContentHeight,
@@ -5485,7 +5501,7 @@ var Element$5 = defineComponent({
         }, {
             default: () => [ createVNode("div", {
                 ref: tableRef,
-                class: ns$5.b("content")
+                class: ns$6.b("content")
             }, [ createVNode(ElTable, {
                 data: tableData.value,
                 height: tableContentHeight.value,
@@ -5548,7 +5564,7 @@ var Element$5 = defineComponent({
             }) ]) ]
         }), options.isPagination ? createVNode("div", {
             ref: footerRef,
-            class: ns$5.b("footer")
+            class: ns$6.b("footer")
         }, [ createVNode(FooterPagination, {
             page: props.page,
             onChange: onChangePagination
@@ -5575,7 +5591,7 @@ var Element$5 = defineComponent({
     }
 });
 
-const NextCrudTable = withInstall(Element$5);
+const NextCrudTable = withInstall(Element$6);
 
 var propsConfig = {
     className: {
@@ -5606,15 +5622,15 @@ var propsConfig = {
             total: 0
         })
     }
-}, defaultConfig$1 = {};
+}, defaultConfig$2 = {};
 
-const ns$4 = useNamespace("crud-table-virtualized");
+const ns$5 = useNamespace("crud-table-virtualized");
 
 const NextCrudTableVirtualized = withInstall(defineComponent({
     name: "NextCrudTableVirtualized",
     props: propsConfig,
     setup(props, {emit: emit}) {
-        const _config = deepClone(defaultConfig$1), _options = computed((() => {
+        const _config = deepClone(defaultConfig$2), _options = computed((() => {
             const cfg = unref(props.options);
             return merge$1(_config, cfg);
         })), options = unref(_options);
@@ -5629,7 +5645,7 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
             emit("close-add-edit");
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$4.b(), props.className ]
+            class: [ ns$5.b(), props.className ]
         }, [ createVNode(NextSpinLoading, null, null), createVNode(NextDialog, {
             modelValue: addEditDialog.visible,
             "onUpdate:modelValue": $event => addEditDialog.visible = $event,
@@ -5640,7 +5656,7 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
             onClose: onCloseAddEditDialog
         }, null) ]) ]);
     }
-})), NextSpinLoading = withInstall(NextSpinLoading$1), ns$3 = useNamespace("upload");
+})), NextSpinLoading = withInstall(NextSpinLoading$1), ns$4 = useNamespace("upload");
 
 const NextUpload = withInstall(defineComponent({
     name: "NextUpload",
@@ -5675,7 +5691,7 @@ const NextUpload = withInstall(defineComponent({
         const slots = this.$slots, props = this.$props, emit = this.$emit, _t = this.t, uploadfilesPreview = ref([]), body = document.getElementsByTagName("body")[0];
         let previewImagesContainer = null;
         return createVNode(ElUpload, {
-            class: [ ns$3.b(), props.className ],
+            class: [ ns$4.b(), props.className ],
             style: props.style,
             "list-type": props.listType,
             "auto-upload": !1,
@@ -5713,9 +5729,9 @@ const NextUpload = withInstall(defineComponent({
             })
         });
     }
-})), ns$2 = useNamespace("video-player");
+})), ns$3 = useNamespace("video-player");
 
-var Element$2 = defineComponent({
+var Element$3 = defineComponent({
     name: "NextVideoPlayer",
     props: {
         className: {
@@ -5788,7 +5804,7 @@ var Element$2 = defineComponent({
             if (!classNames || !classNames.length) throw new Error("模型类别不能未空！");
             container.innerHTML = "", tf.loadGraphModel(modelUrl).then((model => {
                 const canvas = document.createElement("canvas");
-                canvas.className = ns$2.b("recongition"), container.appendChild(canvas);
+                canvas.className = ns$3.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;
@@ -5959,13 +5975,13 @@ var Element$2 = defineComponent({
         });
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: videoBoxRef,
-            class: [ ns$2.b(), props.className ],
+            class: [ ns$3.b(), props.className ],
             style: props.style
         }, null) ]);
     }
 });
 
-const NextVideoPlayer = withInstall(Element$2);
+const NextVideoPlayer = withInstall(Element$3);
 
 const NextDragResize = withInstall(defineComponent({
     name: "NextDragResize",
@@ -5978,6 +5994,14 @@ var ToolHeader = defineComponent({
         isFullscreen: {
             type: Boolean,
             default: !1
+        },
+        imageIndex: {
+            type: Number,
+            default: 0
+        },
+        imageLength: {
+            type: Number,
+            default: 0
         }
     },
     emits: [ "fullscreen", "save" ],
@@ -5988,6 +6012,7 @@ var ToolHeader = defineComponent({
         return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
             class: [ _ns.be("header", "tool") ]
         }, [ createVNode("li", {
+            class: "hover",
             onClick: () => emit("save")
         }, [ createVNode("svg", {
             t: "1719034799379",
@@ -6008,8 +6033,11 @@ var ToolHeader = defineComponent({
             style: "padding-left: 3px"
         }, [ t("next.labelimg.saveLabel") ]) ]) ]), createVNode("ul", {
             class: [ _ns.be("header", "tool") ]
-        }, [ createVNode("li", {
-            style: "margin-right: 30px;"
+        }, [ props.imageLength ? createVNode("li", null, [ createVNode("span", null, [ createTextVNode("第 "), props.imageIndex + 1, createTextVNode(" 张") ]), createVNode("em", {
+            style: "padding: 0 5px;"
+        }, [ createTextVNode("/") ]), createVNode("span", null, [ createTextVNode("共 "), props.imageLength, createTextVNode(" 张") ]) ]) : null, createVNode("li", {
+            style: "margin-right: 30px;",
+            class: "hover"
         }, [ createVNode(ElPopover, {
             trigger: "hover",
             placement: "bottom",
@@ -6028,6 +6056,7 @@ var ToolHeader = defineComponent({
                 style: "font-size: 12px;white-space: nowrap;"
             }, [ createVNode("li", null, [ createVNode("span", null, [ createTextVNode("W：") ]), createVNode("span", null, [ createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), 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键进入下一张图片进行标注") ]) ]) ])
         }) ]), props.isFullscreen ? createVNode("li", {
+            class: "hover",
             onClick: () => switchFillscreen(!1)
         }, [ createVNode(ElTooltip, {
             placement: "top",
@@ -6047,6 +6076,7 @@ var ToolHeader = defineComponent({
                 "p-id": "5389"
             }, null) ]) ]
         }) ]) : createVNode("li", {
+            class: "hover",
             onClick: () => switchFillscreen(!0)
         }, [ createVNode(ElTooltip, {
             placement: "top",
@@ -6069,7 +6099,7 @@ var ToolHeader = defineComponent({
     }
 });
 
-const colors = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], convertToLabel = rect => {
+const colors$1 = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], convertToLabel = rect => {
     const label_type = rect.type, x_center = rect.startX + rect.rectWidth / 2, y_center = rect.startY + rect.rectHeight / 2;
     return [ label_type, parseFloat((x_center / rect.canvasWidth).toFixed(6)), parseFloat((y_center / rect.canvasHeight).toFixed(6)), parseFloat((rect.rectWidth / rect.canvasWidth).toFixed(6)), parseFloat((rect.rectHeight / rect.canvasHeight).toFixed(6)) ];
 }, canvertToCanvas = (labelData, canvasWidth, canvasHeight) => {
@@ -6154,7 +6184,7 @@ var ContextMenuLabel = defineComponent({
             }
         }, [ createVNode("span", {
             style: {
-                "background-color": colors[index % colors.length]
+                "background-color": colors$1[index % colors$1.length]
             },
             class: "label-line"
         }, null), createVNode("span", null, [ name ]) ]))) ]), isValueExist(activateIndex.value) ? createVNode("div", {
@@ -6278,7 +6308,7 @@ var DraggableRect = defineComponent({
             parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
             document.addEventListener("mouseup", onMouseup);
         })), onUnmounted((() => {
-            document.removeEventListener("mousemove", onMousemove, !1), document.removeEventListener("mouseup", onMouseup, !1);
+            document.removeEventListener("mousemove", onMousemove), document.removeEventListener("mouseup", onMouseup);
         })), {
             onMousedown: e => {
                 e.preventDefault(), isDraggle.value = !0, draggleOffset.value.diff_x = e.offsetX, 
@@ -6286,7 +6316,7 @@ var DraggableRect = defineComponent({
             },
             onMouseup: onMouseup,
             onContextmenu: e => {
-                e.preventDefault(), emit("contextmenu", e, rect.value);
+                e.preventDefault(), e.preventDefault(), emit("contextmenu", e, rect.value);
             },
             rect: rect,
             onMousedownDot: (e, corner) => {
@@ -6342,7 +6372,7 @@ var DraggableRect = defineComponent({
             onMousedown: event => this.onMousedownDot(event, "bottomRight")
         }, null) ]) ]);
     }
-}), CanvasContext = defineComponent({
+}), CanvasContext$1 = defineComponent({
     name: "NextCanvasContext",
     props: {
         classes: {
@@ -6408,7 +6438,7 @@ var DraggableRect = defineComponent({
                         const {ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = options, updateLabels = () => {
                             ctx.clearRect(0, 0, canvasWidth, canvasHeight), ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
                             for (let i = 0; i < labels.length; i++) {
-                                const rect = labels[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors[type % colors.length];
+                                const rect = labels[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors$1[type % colors$1.length];
                                 if (ctx.font = "bold 14px serif", ctx.textBaseline = "top", ctx.save(), ctx.strokeStyle = color, 
                                 ctx.strokeRect(startX, startY, rectWidth, rectHeight), isValueExist(rect.typeName) || isValueExist(rect.type)) {
                                     const text = rect.typeName || rect.type;
@@ -6428,7 +6458,7 @@ var DraggableRect = defineComponent({
                                 for (let i = 0; i < labels.length; i++) {
                                     const rect = labels[i], {type: type, startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
                                     x >= startX && x <= startX + rectWidth && y >= startY && y <= startY + rectHeight && (hit_rect = rect, 
-                                    hit_index = i, color = colors[type]);
+                                    hit_index = i, color = colors$1[type]);
                                 }
                                 return {
                                     hit_rect: hit_rect,
@@ -6448,26 +6478,13 @@ var DraggableRect = defineComponent({
                     });
                     drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
                     drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
-                    const {clearCanvas: clearCanvas} = ((canvas, callback, keyW) => {
+                    const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = ((canvas, callback, keyW) => {
                         const canvasWidth = canvas.width, canvasHeight = canvas.height, ctx = canvas?.getContext("2d"), clearCanvas = () => {
                             ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                         };
                         clearCanvas();
                         let startX, startY, endX, endY, isDrawing = !1, isRectDraw = !1, isWKeyPressed = !1;
-                        document.addEventListener("keydown", (event => {
-                            "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
-                            canvas.style.zIndex = "11", keyW && keyW());
-                        })), document.addEventListener("keyup", (event => {
-                            isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset", 
-                            canvas.style.zIndex = "0");
-                        })), canvas.addEventListener("mousedown", (e => {
-                            isWKeyPressed && (isDrawing = !0, startX = e.offsetX, startY = e.offsetY);
-                        })), canvas.addEventListener("mousemove", (e => {
-                            isDrawing && isWKeyPressed && (isRectDraw = !0, endX = e.offsetX, endY = e.offsetY, 
-                            drawRect());
-                        })), canvas.addEventListener("mouseup", (() => {
-                            if (!isRectDraw) return;
-                            isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", canvas.style.zIndex = "0";
+                        const drawRectDone = () => {
                             const rectWidth = Math.abs(endX - startX), rectHeight = Math.abs(endY - startY);
                             startX > endX && (startX = endX), startY > endY && (startY = endY), callback && callback({
                                 startX: startX,
@@ -6479,8 +6496,30 @@ var DraggableRect = defineComponent({
                             }, {
                                 endX: endX,
                                 endY: endY
-                            }), isRectDraw = !1;
-                        }));
+                            });
+                        }, documentKeydown = event => {
+                            "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
+                            canvas.style.zIndex = "11", keyW && keyW());
+                        }, documentKeyup = event => {
+                            isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                            canvas.style.zIndex = "0");
+                        }, documentMouseup = () => {
+                            isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                            canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
+                        };
+                        document.addEventListener("keydown", documentKeydown), document.addEventListener("keyup", documentKeyup), 
+                        document.addEventListener("mouseup", documentMouseup);
+                        const canvasMousedown = e => {
+                            isWKeyPressed && (isDrawing = !0, startX = e.offsetX, startY = e.offsetY);
+                        }, canvasMousemove = e => {
+                            isDrawing && isWKeyPressed && (isRectDraw = !0, endX = e.offsetX, endY = e.offsetY, 
+                            drawRect());
+                        }, canvasMouseup = e => {
+                            e.stopPropagation(), isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                            canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
+                        };
+                        canvas.addEventListener("mousedown", canvasMousedown), canvas.addEventListener("mousemove", canvasMousemove), 
+                        canvas.addEventListener("mouseup", canvasMouseup);
                         const drawRect = (color = "#f30635") => {
                             clearCanvas(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, endX - startX, endY - startY);
                         };
@@ -6488,14 +6527,19 @@ var DraggableRect = defineComponent({
                             canvas: canvas,
                             ctx: ctx,
                             clearCanvas: clearCanvas,
-                            drawRect: drawRect
+                            drawRect: drawRect,
+                            removeEventAll: () => {
+                                document.removeEventListener("mousedown", documentKeydown), document.removeEventListener("keyup", documentKeyup), 
+                                document.removeEventListener("mouseup", documentMouseup), canvas.removeEventListener("mousedown", canvasMousedown), 
+                                canvas.removeEventListener("mousemove", canvasMousemove), canvas.removeEventListener("mouseup", canvasMouseup);
+                            }
                         };
                     })(canvasRectRef.value, ((rect, {endX: endX, endY: endY}) => {
                         activate_add_label.value = rect, drawBaseCanvas.value.addDrawRect(rect), updateContextmenuLabelFixed(endX, endY, rect);
                     }), (() => {
                         onCloseDraggableRectFixed();
                     }));
-                    drawBaseCanvas.value.clearCanvasRect = clearCanvas;
+                    drawBaseCanvas.value.clearCanvasRect = clearCanvas, drawBaseCanvas.value.removeEventAll = removeEventAll;
                 }, image.onerror = () => {
                     loadingImage.value = !1;
                 };
@@ -6527,6 +6571,8 @@ var DraggableRect = defineComponent({
                     renderImageLabel(rowInfo);
                 }
             }));
+        })), onUnmounted((() => {
+            drawBaseCanvas.value.removeEventAll();
         }));
         const contextmenuLabelFixed = ref({
             show: !1,
@@ -6602,8 +6648,8 @@ var DraggableRect = defineComponent({
             onCloseContentmenuLabel: onCloseContentmenuLabel,
             onSelectedLabel: (rect, index) => {
                 onCloseDraggableRectFixed(), nextTick((() => {
-                    const {startX: x, startY: y, type: type} = rect;
-                    updateDraggableRectFixed(x, y, rect, index, colors[type]);
+                    const {startX: x, startY: y, type: type} = rect, color = colors$1[type];
+                    updateDraggableRectFixed(x, y, labels.value[index], index, color);
                 }));
             },
             onDeleteLabel: onDeleteLabel,
@@ -6683,12 +6729,12 @@ var DraggableRect = defineComponent({
             })(rect, index)
         }, [ createVNode("div", null, [ createVNode("span", {
             style: {
-                "background-color": colors[rect.type]
+                "background-color": colors$1[rect.type]
             },
             class: "label-line"
         }, null), createVNode("span", null, [ rect.typeName ]) ]), createVNode(ElPopconfirm, {
             title: t("next.labelimg.confirmDeleteLabel"),
-            width: 180,
+            width: 200,
             onConfirm: () => (rect => {
                 emit("delete", rect);
             })(rect)
@@ -6708,13 +6754,13 @@ var DraggableRect = defineComponent({
         }, null) ]);
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
-}), defaultConfig = {
+}), defaultConfig$1 = {
     minContentHeight: 500
 };
 
-const ns$1 = useNamespace("labelimg");
+const ns$2 = useNamespace("labelimg");
 
-var Element = defineComponent({
+var Element$1 = defineComponent({
     name: "NextLabelimg",
     props: {
         className: {
@@ -6725,10 +6771,6 @@ var Element = defineComponent({
             type: Object,
             default: () => ({})
         },
-        rowKey: {
-            type: String,
-            default: "id"
-        },
         options: {
             type: Object,
             default: () => ({})
@@ -6744,11 +6786,11 @@ var Element = defineComponent({
     },
     emits: [ "change", "save", "prev-click", "next-click" ],
     setup(props, {emit: emit, slots: slots, expose: expose}) {
-        const {t: t} = useLocale(), _config = deepClone(defaultConfig), _options = computed((() => {
+        const {t: t} = useLocale(), _config = deepClone(defaultConfig$1), _options = computed((() => {
             const cfg = unref(props.options);
             return merge$1(_config, cfg);
         })), options = unref(_options);
-        provide("ns", ns$1), provide("_emit", emit);
+        provide("ns", ns$2), provide("_emit", emit);
         const activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
         watch((() => props.data), (data => {
             labelImages.value = deepClone(data);
@@ -6782,7 +6824,10 @@ var Element = defineComponent({
                 node: node,
                 label_txt: yolo_label.join("\n")
             };
-        }, isChangeNodeLabels = () => isEqual(labelImages.value[activateNodeIndex.value].labels, currentNode.value.labels), switchKeydownAD = e => {
+        }, isChangeNodeLabels = () => {
+            const node = labelImages.value[activateNodeIndex.value];
+            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--, 
             activateNodeIndex.value < 0 && (activateNodeIndex.value = imageLength - 1));
@@ -6852,21 +6897,23 @@ var Element = defineComponent({
         });
         const renderContent = () => createVNode("div", {
             ref: layoutLabelRef,
-            class: [ ns$1.b(), props.className, isFullscreen.value ? ns$1.b("fullscreen") : "" ],
+            class: [ ns$2.b(), props.className, isFullscreen.value ? ns$2.b("fullscreen") : "" ],
             style: {
                 ...props.style
             }
         }, [ createVNode(NextSpinLoading$1, {
             loading: loading.value,
             tip: t("next.labelimg.saveTxt"),
-            class: [ ns$1.b("loading") ]
+            class: [ ns$2.b("loading") ]
         }, {
             default: () => [ createVNode(ElScrollbar, null, {
                 default: () => [ createVNode("header", {
                     ref: headerRef,
-                    class: [ ns$1.b("header") ]
+                    class: [ ns$2.b("header") ]
                 }, [ slots.header ? slots.header() : createVNode(ToolHeader, {
                     isFullscreen: isFullscreen.value,
+                    imageIndex: activateNodeIndex.value,
+                    imageLength: labelImages.value.length,
                     onFullscreen: onSwitchFillscreen,
                     onSave: () => {
                         onChangeActivateNode(activateNodeIndex.value) || ElMessage({
@@ -6876,16 +6923,16 @@ var Element = defineComponent({
                     }
                 }, null) ]), createVNode("div", {
                     ref: mainRef,
-                    class: [ ns$1.b("main") ]
+                    class: [ ns$2.b("main") ]
                 }, [ createVNode(ElScrollbar, {
-                    class: [ ns$1.be("main", "content") ]
+                    class: [ ns$2.be("main", "content") ]
                 }, {
                     default: () => [ createVNode("div", {
-                        class: [ ns$1.be("main", "content") ],
+                        class: [ ns$2.be("main", "content") ],
                         style: {
                             height: mainContentHeight.value + "px"
                         }
-                    }, [ createVNode(CanvasContext, {
+                    }, [ createVNode(CanvasContext$1, {
                         ref: canvasContextRef,
                         contextClientHeight: mainContentHeight.value,
                         classes: classes.value,
@@ -6900,9 +6947,9 @@ var Element = defineComponent({
                     onSelect: onSelectLabelNode
                 }, null) ]), createVNode("footer", {
                     ref: footerRef,
-                    class: [ ns$1.b("footer") ]
+                    class: [ ns$2.b("footer") ]
                 }, [ createVNode("div", {
-                    class: [ ns$1.be("footer", "left") ]
+                    class: [ ns$2.be("footer", "left") ]
                 }, [ createVNode(ElIcon, {
                     size: 24,
                     color: "#797979",
@@ -6910,10 +6957,10 @@ var Element = defineComponent({
                 }, {
                     default: () => [ createVNode(arrow_left_default, null, null) ]
                 }) ]), createVNode("div", {
-                    class: [ ns$1.be("footer", "center") ]
+                    class: [ ns$2.be("footer", "center") ]
                 }, [ createVNode(ElScrollbar, null, {
                     default: () => [ createVNode("ul", {
-                        class: [ ns$1.bem("footer", "center", "list") ]
+                        class: [ ns$2.bem("footer", "center", "list") ]
                     }, [ labelImages.value.map(((item, index) => createVNode("li", {
                         key: index,
                         onClick: () => onChangeActivateNode(index),
@@ -6929,7 +6976,7 @@ var Element = defineComponent({
                         fit: "cover"
                     }, null) ]))) ]) ]
                 }) ]), createVNode("div", {
-                    class: [ ns$1.be("footer", "right") ]
+                    class: [ ns$2.be("footer", "right") ]
                 }, [ createVNode(ElIcon, {
                     size: 24,
                     color: "#797979",
@@ -6943,7 +6990,7 @@ var Element = defineComponent({
     }
 });
 
-const ns = useNamespace("labelimg-preview");
+const ns$1 = useNamespace("labelimg-preview");
 
 var preview = defineComponent({
     name: "NextLabelimgPreview",
@@ -6980,7 +7027,7 @@ var preview = defineComponent({
                         canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
                     })(canvasWidth, canvasHeight), ctx.clearRect(0, 0, canvasWidth, canvasHeight), ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
                     for (let i = 0; i < labels.value.length; i++) {
-                        const rect = labels.value[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors[type % colors.length];
+                        const rect = labels.value[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors$1[type % colors$1.length];
                         if (ctx.font = "bold 14px serif", ctx.textBaseline = "top", ctx.save(), ctx.strokeStyle = color, 
                         ctx.strokeRect(startX, startY, rectWidth, rectHeight), !isValueExist(rect.typeName)) {
                             const typeName = classes.value[rect.type];
@@ -7003,7 +7050,7 @@ var preview = defineComponent({
             });
         }));
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns.b(), props.className ],
+            class: [ ns$1.b(), props.className ],
             style: {
                 ...props.style
             }
@@ -7013,7 +7060,421 @@ var preview = defineComponent({
     }
 });
 
-const NextLabelimg = withInstall(Element), NextLabelimgPreview = withInstall(preview);
+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))), {hexToRgba: hexToRgba} = useChangeColor(), colors = [ "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ];
+
+class CreatePolygonVertexes {
+    canvas;
+    ctx;
+    vertexes;
+    isDrawing;
+    mouseOffset;
+    vertexesObservers=[];
+    destroyedObservers;
+    constructor(canvas, ctx) {
+        this.canvas = canvas, this.ctx = ctx, this.isDrawing = !1, this.vertexes = [], this.mouseOffset = {
+            x: 0,
+            y: 0
+        }, canvas.addEventListener("click", this.canvasMouseClick.bind(this)), canvas.addEventListener("mousemove", this.canvasMousemove.bind(this)), 
+        canvas.addEventListener("dblclick", this.canvasMouseDblclick.bind(this)), this.vertexes = new Proxy(this.vertexes, {
+            set: (target, property, value) => (target[property] = value, this.notifyVertexChangeListeners(), 
+            !0)
+        }), this.mouseOffset = new Proxy(this.mouseOffset, {
+            set: (target, property, value) => (target[property] = value, this.notifyVertexChangeListeners(), 
+            !0)
+        });
+    }
+    notifyVertexChangeListeners() {
+        this.vertexesObservers.forEach((listener => {
+            listener(this.vertexes, this.mouseOffset);
+        }));
+    }
+    vertexesChangeEventListener(listener) {
+        this.vertexesObservers.push(listener);
+    }
+    notifyDestryedListerers() {
+        this.destroyedObservers(this.vertexes);
+    }
+    onDestroyed(callback) {
+        this.destroyedObservers = callback;
+    }
+    canvasMouseClick(e) {
+        e.stopPropagation(), this.isDrawing = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY, 
+        this.vertexes.push([ e.offsetX, e.offsetY ]), 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.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.destroyed();
+    }
+    destroyed() {
+        this.isDrawing = !1, this.vertexes = [], this.vertexesObservers = [], this.canvas.removeEventListener("click", this.canvasMouseClick), 
+        this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("dblclick", this.canvasMouseDblclick);
+    }
+}
+
+class EditPolygonPath {
+    canvas;
+    ctx;
+    vertexes;
+    isEditing;
+    isMoveEditing;
+    canClickEvent;
+    pointVertexIndex;
+    pointCentreIndex;
+    vertexRadius;
+    edgeCentreRadius;
+    observers=[];
+    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;
+    }
+    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]);
+        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();
+    }
+    drawPolygonEdgeCentre(vertexes) {
+        const ctx = this.ctx;
+        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.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.closePath(), ctx.fill();
+        }
+    }
+    drawPolygon(vertexes, mouseOffset) {
+        this.vertexes = vertexes, mouseOffset ? this.drawPolygonPath(vertexes, mouseOffset.x, mouseOffset.y) : (this.drawPolygonPath(vertexes), 
+        this.drawPolygonEdgeCentre(vertexes));
+    }
+    pointInVertexes(x, y) {
+        const 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)) {
+                this.canvas.style.cursor = "pointer", aimIndex = i;
+                break;
+            }
+            this.canvas.style.cursor = "unset";
+        }
+        return aimIndex;
+    }
+    pointInEdgeCentre(x, y) {
+        const 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)) {
+                this.canvas.style.cursor = "pointer", aimIndex = i;
+                break;
+            }
+            this.canvas.style.cursor = "unset";
+        }
+        return aimIndex;
+    }
+    pointInVertexesOrEdgeCentre(x, y) {
+        const 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);
+            if (isInVertex || isInEdgeCenter) {
+                this.canvas.style.cursor = "pointer";
+                break;
+            }
+            this.canvas.style.cursor = "unset";
+        }
+    }
+    notifyObservers() {
+        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);
+    }
+    canvasMousedown(e) {
+        e.stopPropagation(), e.preventDefault(), this.canClickEvent = !0;
+        const {offsetX: x, offsetY: y} = e;
+        if (this.isEditing) {
+            const vertex_i = this.pointInVertexes(x, y);
+            isValueExist(vertex_i) && (this.isMoveEditing = !0, this.pointVertexIndex = vertex_i, 
+            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((() => {
+            this.canClickEvent = !1;
+        }), 200);
+    }
+    canvasMouseup(e) {
+        e.stopPropagation(), e.preventDefault();
+        const {offsetX: x, offsetY: y} = e;
+        this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]), 
+        this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]), 
+        this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1, 
+        this.notifyObservers();
+    }
+    canvasMouseClick(e) {
+        e.stopPropagation();
+        const {offsetX: x, offsetY: y} = e;
+        if (this.isEditing && this.canClickEvent) {
+            e.stopImmediatePropagation();
+            const i = this.pointInVertexes(x, y);
+            if (isValueExist(i)) {
+                if (this.vertexes.length <= 3) return;
+                this.vertexes.splice(i, 1), this.drawPolygon(this.vertexes), this.notifyObservers();
+            }
+        }
+    }
+    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 ]), 
+        this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]), 
+        this.notifyObservers());
+    }
+    destroyed() {
+        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);
+    }
+}
+
+class CreateDrawCanvas {
+    canvas;
+    ctx;
+    image;
+    canvasWidth;
+    canvasHeight;
+    paths;
+    editDrawPolygon;
+    createPolygonVertexes;
+    editVertexes;
+    editPolygonObservers=[];
+    constructor(options) {
+        const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths} = options;
+        this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth, 
+        this.canvasHeight = canvasHeight, this.paths = paths || [], this.editVertexes = [], 
+        this.render(), this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), 
+        this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
+            this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes, 
+            this.notifyObservers();
+        })), this.createPolygonVertexes.onDestroyed((vertexes => {
+            this.render(), this.editDrawPolygon.drawPolygon(vertexes), this.editDrawPolygon.updatePolygon((vertexes => {
+                this.render(), this.editDrawPolygon.drawPolygon(vertexes), this.editVertexes = vertexes, 
+                this.notifyObservers();
+            }));
+        }));
+    }
+    notifyObservers() {
+        this.editPolygonObservers.forEach((listener => {
+            listener(this.editVertexes);
+        }));
+    }
+    updatePolygon(callback) {
+        this.editPolygonObservers.push(callback);
+    }
+    drawPolygons(paths) {
+        const ctx = this.ctx;
+        for (let i = 0; i < paths.length; i++) {
+            const path = paths[i].path;
+            if (!path.length) return;
+            const color = colors[i % colors.length];
+            ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2), 
+            ctx.moveTo(path[0][0], path[0][1]);
+            for (let i = 1; i < path.length; i++) {
+                const [x, y] = path[i];
+                ctx.lineTo(x, y);
+            }
+            ctx.closePath(), ctx.stroke(), ctx.fill();
+        }
+    }
+    initCanvas=() => {
+        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), this.ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight), 
+        this.drawPolygons(this.paths);
+    };
+    render=() => {
+        this.initCanvas();
+    };
+    destroyed() {
+        this.paths = [], this.editDrawPolygon.destroyed(), this.createPolygonVertexes.destroyed();
+    }
+}
+
+var CanvasContext = defineComponent({
+    props: {
+        classes: {
+            type: Array,
+            default: () => []
+        },
+        contextClientHeight: {
+            type: Number,
+            default: null
+        },
+        rowInfo: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    emits: [ "editPolygon" ],
+    setup(props, {emit: emit}) {
+        const ns = inject("ns", {}), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), loadingImage = ref(!1), renderImageLabel = rowInfo => {
+            const clientHeight = canvasMainRef.value?.clientHeight, ctx = canvasBaseRef.value?.getContext("2d");
+            if (rowInfo?.imageSrc) {
+                const image = new Image;
+                image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
+                    loadingImage.value = !1;
+                    let {width: width, height: height} = image;
+                    if (height > clientHeight) {
+                        const scale = height / clientHeight;
+                        height = clientHeight, image.style.height = height + "px", width /= scale;
+                    }
+                    const canvasHeight = height, scaleFactor = parseFloat((canvasHeight / height).toFixed(3)), canvasWidth = Math.ceil(width * scaleFactor);
+                    ((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,
+                        paths: rowInfo.labels
+                    }), drawCanvas.value.updatePolygon((vertexes => {
+                        emit("editPolygon", {
+                            vertexes: vertexes,
+                            canvasWidth: canvasWidth,
+                            canvasHeight: canvasHeight
+                        });
+                    }));
+                }, 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);
+                }
+            }));
+        }));
+        return () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
+            loading: loadingImage.value,
+            class: [ ns.b("loading") ]
+        }, {
+            default: () => [ createVNode("div", {
+                ref: canvasMainRef,
+                class: [ ns.b("canvas") ]
+            }, [ createVNode("canvas", {
+                ref: canvasBaseRef,
+                class: [ ns.be("canvas", "context") ]
+            }, null) ]) ]
+        }) ]);
+    }
+}), defaultConfig = {
+    minContentHeight: 500
+};
+
+const ns = useNamespace("labelme");
+
+const NextLabelme = withInstall(defineComponent({
+    name: "NextLabelme",
+    props: {
+        className: {
+            type: String,
+            default: ""
+        },
+        style: {
+            type: Object,
+            default: () => ({})
+        },
+        options: {
+            type: Object,
+            default: () => ({})
+        },
+        classes: {
+            type: Array,
+            default: () => []
+        },
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: [ "change", "edit-polygon" ],
+    setup(props, {emit: emit}) {
+        const _config = deepClone(defaultConfig), _options = computed((() => {
+            const cfg = unref(props.options);
+            return merge$1(_config, cfg);
+        })), options = unref(_options);
+        provide("ns", ns), useLocale();
+        const activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
+        watch((() => props.data), (data => {
+            labelImages.value = deepClone(data);
+        }), {
+            deep: !0
+        }), watch((() => props.data.length), (() => {
+            activateNodeIndex.value = 0;
+        })), watch((() => props.classes), (val => {
+            classes.value = val;
+        }), {
+            deep: !0
+        });
+        const currentNode = computed((() => {
+            if (!labelImages.value) return {};
+            const node = labelImages.value[activateNodeIndex.value] || {};
+            return deepClone(node);
+        })), mainContentHeight = ref(options.minContentHeight), mainRef = ref(), isFullscreen = ref(!1), onEditPlygonChange = plygon => {
+            emit("edit-polygon", plygon);
+        };
+        return () => createVNode(Fragment, null, [ createVNode("div", {
+            class: [ ns.b(), props.className, isFullscreen.value ? ns.b("fullscreen") : "" ],
+            style: {
+                ...props.style
+            }
+        }, [ createVNode("div", {
+            ref: mainRef,
+            class: [ ns.b("main") ]
+        }, [ createVNode("div", {
+            class: [ ns.be("main", "content") ],
+            style: {
+                height: mainContentHeight.value + "px"
+            }
+        }, [ createVNode(CanvasContext, {
+            rowInfo: currentNode.value,
+            onEditPolygon: onEditPlygonChange
+        }, null) ]) ]) ]) ]);
+    }
+}));
 
 var components = Object.freeze({
     __proto__: null,
@@ -7025,6 +7486,7 @@ var components = Object.freeze({
     NextForm: NextForm,
     NextLabelimg: NextLabelimg,
     NextLabelimgPreview: NextLabelimgPreview,
+    NextLabelme: NextLabelme,
     NextLayout: NextLayout,
     NextMenu: NextMenu,
     NextSpinLoading: NextSpinLoading,
@@ -7067,7 +7529,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.3.1", install = function(app) {
+}, version = "0.3.3", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -7077,8 +7539,8 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.3.1",
+    version: "0.3.3",
     install: install
 };
 
-export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextLabelimg, NextLabelimgPreview, NextLayout, NextMenu, NextSpinLoading, NextTabs, NextTextEllipsis, NextTreeSelect, NextUpload, NextVideoPlayer, buildLocaleContext, buildTranslator, index as default, defaultNamespace, install, localeContextKey, localeLang, namespaceContextKey, nextUseCssTheme, nextUseCssVar, translate, updateThemeColor, updateThemeColorCssVar, useDetectVideo, useGetDerivedNamespace, useLanguage, useLocale, useNamespace, version };
+export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextLabelimg, NextLabelimgPreview, NextLabelme, NextLayout, NextMenu, NextSpinLoading, NextTabs, NextTextEllipsis, NextTreeSelect, NextUpload, NextVideoPlayer, buildLocaleContext, buildTranslator, index as default, defaultNamespace, install, localeContextKey, localeLang, namespaceContextKey, nextUseCssTheme, nextUseCssVar, translate, updateThemeColor, updateThemeColorCssVar, useDetectVideo, useGetDerivedNamespace, useLanguage, useLocale, useNamespace, version };