next-element-vue 0.2.6 → 0.2.9

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.2.6 v
- * 发布日期：2024-06-06
+ * 当前版本：0.2.9 v
+ * 发布日期：2024-06-14
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -789,6 +789,11 @@
                 tabsRight: "关闭右侧",
                 tabsAll: "关闭全部",
                 systemSetting: "系统配置"
+            },
+            labelimg: {
+                saveTxt: "保存中...",
+                emptyLabelText: "暂无标签数据",
+                confirmDeleteLabel: "确定要删除该标注吗？"
             }
         }
     }, enLocale = {
@@ -858,6 +863,11 @@
                 tabsRight: "close right",
                 tabsAll: "close all",
                 systemSetting: "system setting"
+            },
+            labelimg: {
+                saveTxt: "saving...",
+                emptyLabelText: "No label data",
+                confirmDeleteLabel: "Are you sure you want to delete this annotation?"
             }
         }
     }, zhtwLocale = {
@@ -927,6 +937,11 @@
                 tabsRight: "關閉右側",
                 tabsAll: "關閉全部",
                 systemSetting: "系統配置"
+            },
+            labelimg: {
+                saveTxt: "保存中...",
+                emptyLabelText: "暂无标签数据",
+                confirmDeleteLabel: "确定要删除该标注吗？"
             }
         }
     };
@@ -1055,7 +1070,7 @@
         }, extra) for (const [key, comp] of Object.entries(extra)) main[key] = comp;
         return main;
     }, slots_config_headerMenu = "header-menu", slots_config_headerToolsPrefix = "header-tools-prefix", slots_config_headerToolsSuffix = "header-tools-suffix";
-    var defaultConfig$3 = {
+    var defaultConfig$4 = {
         logo: "",
         title: "Next Element Vue",
         userName: "Admin",
@@ -1099,7 +1114,7 @@
             isDark: !1
         }
     };
-    const ns$i = useNamespace("text-ellipsis");
+    const ns$k = useNamespace("text-ellipsis");
     const NextTextEllipsis = withInstall(vue.defineComponent({
         name: "NextTextEllipsis",
         props: {
@@ -1145,7 +1160,7 @@
                 }
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
-                class: [ ns$i.b(), props.class ],
+                class: [ ns$k.b(), props.class ],
                 style: setWidth.value,
                 onMouseenter: onMouseenter
             }, [ isTip.value ? vue.createVNode(elementPlus.ElTooltip, {
@@ -1155,11 +1170,11 @@
                 disabled: props.disabled
             }, {
                 default: () => [ vue.createVNode("span", {
-                    class: ns$i.e("text"),
+                    class: ns$k.e("text"),
                     ref: ellipsisRef
                 }, [ slots.default ? slots.default() : props.content ]) ]
             }) : vue.createVNode("span", {
-                class: ns$i.e("text"),
+                class: ns$k.e("text"),
                 ref: ellipsisRef
             }, [ slots.default ? slots.default() : props.content ]) ]) ]);
         }
@@ -1194,7 +1209,29 @@
     }, null, -1) ];
     var arrow_down_default = export_helper_default(arrow_down_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
         return vue.openBlock(), vue.createElementBlock("svg", _hoisted_16, _hoisted_36);
-    } ], [ "__file", "arrow-down.vue" ] ]), arrow_up_vue_vue_type_script_lang_default = {
+    } ], [ "__file", "arrow-down.vue" ] ]), arrow_left_vue_vue_type_script_lang_default = {
+        name: "ArrowLeft"
+    }, _hoisted_18 = {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+    }, _hoisted_38 = [ vue.createElementVNode("path", {
+        fill: "currentColor",
+        d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+    }, null, -1) ];
+    var arrow_left_default = export_helper_default(arrow_left_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_18, _hoisted_38);
+    } ], [ "__file", "arrow-left.vue" ] ]), arrow_right_vue_vue_type_script_lang_default = {
+        name: "ArrowRight"
+    }, _hoisted_110 = {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+    }, _hoisted_310 = [ vue.createElementVNode("path", {
+        fill: "currentColor",
+        d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+    }, null, -1) ];
+    var arrow_right_default = export_helper_default(arrow_right_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_110, _hoisted_310);
+    } ], [ "__file", "arrow-right.vue" ] ]), arrow_up_vue_vue_type_script_lang_default = {
         name: "ArrowUp"
     }, _hoisted_112 = {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2460,7 +2497,7 @@
                 }, null) ]
             }))) ]) ]);
         }
-    }), ns$h = useNamespace("menu");
+    }), ns$j = useNamespace("menu");
     const NextMenu = withInstall(vue.defineComponent({
         name: "NextMenu",
         props: {
@@ -2487,13 +2524,13 @@
             }
         },
         setup(props) {
-            vue.provide("ns", ns$h);
+            vue.provide("ns", ns$j);
             const router = vue.getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, activePath = vue.ref(currentPath);
             vue.watch((() => router.currentRoute?.value), (to => {
                 activePath.value = to.fullPath;
             }));
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(elementPlus.ElMenu, {
-                class: [ ns$h.b(), props.className ],
+                class: [ ns$j.b(), props.className ],
                 style: props.style,
                 defaultActive: activePath.value,
                 router: props.router,
@@ -2501,7 +2538,7 @@
                 ellipsis: !0
             }, {
                 default: () => [ vue.createVNode(vue.Fragment, null, [ props.menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElSubMenu, {
-                    "popper-class": ns$h.b("popper"),
+                    "popper-class": ns$j.b("popper"),
                     index: item.path || item.id,
                     teleported: !0
                 }, {
@@ -2512,7 +2549,7 @@
                         menuData: item.children
                     }, null)
                 }) : valueExist(item.meta?.isHide, !1) ? null : vue.createVNode(elementPlus.ElMenuItem, {
-                    "popper-class": ns$h.b("popper"),
+                    "popper-class": ns$j.b("popper"),
                     index: item.path
                 }, {
                     default: () => [ vue.createVNode(MenuItemTitle, {
@@ -2538,19 +2575,19 @@
             }) ]);
         }
     });
-    const ns$g = useNamespace("layout-defaults");
+    const ns$i = useNamespace("layout-defaults");
     var defaults = vue.defineComponent({
         props: {},
-        setup: () => (vue.provide("ns", ns$g), {}),
+        setup: () => (vue.provide("ns", ns$i), {}),
         render() {
             const slots = this.$slots, _config = vue.inject("options", {}), _emit = vue.inject("__emit__", {});
             slots.menu;
             const isTabs = vue.ref(!!slots.tabs);
             return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), vue.createVNode(elementPlus.ElContainer, {
-                class: ns$g.b()
+                class: ns$i.b()
             }, {
                 default: () => [ vue.createVNode(Sidebar$2, null, null), vue.createVNode("div", {
-                    class: [ ns$g.b("content") ]
+                    class: [ ns$i.b("content") ]
                 }, [ vue.createVNode(Header$3, null, null), _config.showTabs ? slots.tabs ? slots.tabs?.() : vue.createVNode(NextTabs, {
                     tabs: _config.tabs,
                     activeTab: _config.activeTab,
@@ -2558,7 +2595,7 @@
                     onSelect: (...arg) => _emit("tabsSelect", ...arg),
                     onClose: (...arg) => _emit("tabsClose", ...arg)
                 }, null) : null, vue.createVNode("main", {
-                    class: [ ns$g.bf("main"), ns$g.is("layout-tabs", isTabs.value) ]
+                    class: [ ns$i.bf("main"), ns$i.is("layout-tabs", isTabs.value) ]
                 }, [ slots.default?.() ]) ]) ]
             });
         }
@@ -2588,10 +2625,10 @@
             }) ]) ]) ]);
         }
     });
-    const ns$f = useNamespace("layout-transverse");
+    const ns$h = useNamespace("layout-transverse");
     var transverse = vue.defineComponent({
         props: {},
-        setup: () => (vue.provide("ns", ns$f), {}),
+        setup: () => (vue.provide("ns", ns$h), {}),
         render() {
             const slots = this.$slots, _config = vue.inject("options", {}), _emit = vue.inject("__emit__", {}), __slots_header = {};
             slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2608,7 +2645,7 @@
                 onSelect: (...arg) => _emit("tabsSelect", ...arg),
                 onClose: (...arg) => _emit("tabsClose", ...arg)
             }, null) : null, vue.createVNode("main", {
-                class: [ ns$f.b("main"), ns$f.is("layout-tabs", isTabs.value) ]
+                class: [ ns$h.b("main"), ns$h.is("layout-tabs", isTabs.value) ]
             }, [ slots.default?.() ]) ]);
             var s;
         }
@@ -2647,10 +2684,10 @@
             }, null) ]);
         }
     });
-    const ns$e = useNamespace("layout-columns");
+    const ns$g = useNamespace("layout-columns");
     var columns = vue.defineComponent({
         props: {},
-        setup: () => (vue.provide("ns", ns$e), {}),
+        setup: () => (vue.provide("ns", ns$g), {}),
         render() {
             const slots = this.$slots, _config = vue.inject("options", {}), _emit = vue.inject("__emit__", {}), __slots_header = {};
             slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2658,11 +2695,11 @@
             slots[slots_config_headerToolsSuffix] && (__slots_header[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             const isTabs = vue.ref(!!slots.tabs);
             return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), vue.createVNode(elementPlus.ElContainer, {
-                class: ns$e.b()
+                class: ns$g.b()
             }, {
                 default: () => {
                     return [ vue.createVNode(Sidebar$1, null, null), vue.createVNode("div", {
-                        class: [ ns$e.b("content") ]
+                        class: [ ns$g.b("content") ]
                     }, [ vue.createVNode(Header$1, null, (s = __slots_header, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header : {
                         default: () => [ __slots_header ]
                     })), _config.showTabs ? slots.tabs ? slots.tabs?.() : vue.createVNode(NextTabs, {
@@ -2672,7 +2709,7 @@
                         onSelect: (...arg) => _emit("tabsSelect", ...arg),
                         onClose: (...arg) => _emit("tabsClose", ...arg)
                     }, null) : null, vue.createVNode("main", {
-                        class: [ ns$e.bf("main"), ns$e.is("layout-tabs", isTabs.value) ]
+                        class: [ ns$g.bf("main"), ns$g.is("layout-tabs", isTabs.value) ]
                     }, [ slots.default?.() ]) ]) ];
                     var s;
                 }
@@ -2715,20 +2752,20 @@
             }) ]);
         }
     });
-    const ns$d = useNamespace("layout-classic");
+    const ns$f = useNamespace("layout-classic");
     var classic = vue.defineComponent({
         props: {},
-        setup: () => (vue.provide("ns", ns$d), {
-            ns: ns$d
+        setup: () => (vue.provide("ns", ns$f), {
+            ns: ns$f
         }),
         render() {
             const slots = this.$slots, _config = vue.inject("options", {}), _emit = vue.inject("__emit__", {});
             slots.menu;
             const isTabs = vue.ref(!!slots.tabs);
             return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), vue.createVNode(vue.Fragment, null, [ vue.createVNode(Header, null, null), vue.createVNode("div", {
-                class: [ ns$d.b("content"), ns$d.is("layout-tabs", isTabs.value) ]
+                class: [ ns$f.b("content"), ns$f.is("layout-tabs", isTabs.value) ]
             }, [ vue.createVNode(Sidebar, null, null), vue.createVNode("div", {
-                class: ns$d.b("container")
+                class: ns$f.b("container")
             }, [ _config.showTabs ? slots.tabs ? slots.tabs?.() : vue.createVNode(NextTabs, {
                 tabs: _config.tabs,
                 activeTab: _config.activeTab,
@@ -2736,11 +2773,11 @@
                 onSelect: (...arg) => _emit("tabsSelect", ...arg),
                 onClose: (...arg) => _emit("tabsClose", ...arg)
             }, null) : null, vue.createVNode("main", {
-                class: [ ns$d.b("main") ]
+                class: [ ns$f.b("main") ]
             }, [ slots.default?.() ]) ]) ]) ]);
         }
     });
-    const ns$c = useNamespace("layout"), layouts = {
+    const ns$e = useNamespace("layout"), layouts = {
         defaults: vue.markRaw(defaults),
         transverse: vue.markRaw(transverse),
         columns: vue.markRaw(columns),
@@ -2766,8 +2803,8 @@
         },
         emits: [ "changeLanguage", "changeUserDropdown", "changeOptions", "tabsChange", "tabsSelect", "tabsClose" ],
         setup(props, {slots: slots, emit: emit}) {
-            const _config = vue.ref(mergeWith(defaultConfig$3, props.options, customizerCoverArray));
-            vue.provide("options", _config.value), vue.provide("__ns__", ns$c), vue.provide("__emit__", emit), 
+            const _config = vue.ref(mergeWith(defaultConfig$4, props.options, customizerCoverArray));
+            vue.provide("options", _config.value), vue.provide("__ns__", ns$e), vue.provide("__emit__", emit), 
             vue.provide("__slots__", slots);
             const updateOptions = cfg => {
                 _config.value = mergeWith(_config.value, cfg, customizerCoverArray), updateThemeColorCssVar(_config.value?.setting), 
@@ -2791,14 +2828,14 @@
             const _activeSlots = {};
             for (const key in slots) Object.prototype.hasOwnProperty.call(slots, key) && (_activeSlots[key] = () => slots[key]?.());
             return vue.createVNode("div", {
-                class: [ ns$c.b(), props.className ],
+                class: [ ns$e.b(), props.className ],
                 style: props.style
             }, [ vue.h(activeLayout.value, {}, {
                 ..._activeSlots
             }) ]);
         }
-    })), ns$b = useNamespace("tabs");
-    var Element$7 = vue.defineComponent({
+    })), ns$d = useNamespace("tabs");
+    var Element$8 = vue.defineComponent({
         name: "NextTabs",
         props: {
             activeTab: {
@@ -2867,12 +2904,12 @@
                 tabsView.value.push(activeRoute)), emit("change", activeIndex.value, tabsView.value, "add");
             }));
             const renderContent = () => vue.createVNode("nav", {
-                class: ns$b.b()
+                class: ns$d.b()
             }, [ vue.createVNode(elementPlus.ElScrollbar, null, {
                 default: () => [ vue.createVNode("ul", {
-                    class: ns$b.b("list")
+                    class: ns$d.b("list")
                 }, [ tabsView.value.map(((tab, index) => tab ? vue.createVNode("li", {
-                    class: [ "tab-item", ns$b.is("active", activeIndex.value === index) ],
+                    class: [ "tab-item", ns$d.is("active", activeIndex.value === index) ],
                     onClick: event => onClickTabItem(event, tab, index)
                 }, [ vue.createVNode("i", {
                     class: [ "tab-icon", tab.meta?.icon ]
@@ -2903,11 +2940,11 @@
                 onCommand: onChange
             }, {
                 default: () => vue.createVNode("span", {
-                    class: ns$b.b("tab-more")
+                    class: ns$d.b("tab-more")
                 }, [ vue.createVNode("i", {
-                    class: [ ns$b.be("tab-more", "box"), ns$b.be("tab-more", "top") ]
+                    class: [ ns$d.be("tab-more", "box"), ns$d.be("tab-more", "top") ]
                 }, null), vue.createVNode("i", {
-                    class: [ ns$b.be("tab-more", "box"), ns$b.be("tab-more", "bottom") ]
+                    class: [ ns$d.be("tab-more", "box"), ns$d.be("tab-more", "bottom") ]
                 }, null) ]),
                 dropdown: () => vue.createVNode(elementPlus.ElDropdownMenu, null, {
                     default: () => [ vue.createVNode(elementPlus.ElDropdownItem, {
@@ -2940,7 +2977,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
-    const NextTabs = withInstall(Element$7), ns$a = useNamespace("container");
+    const NextTabs = withInstall(Element$8), ns$c = useNamespace("container");
     const NextContainer = withInstall(vue.defineComponent({
         name: "NextContainer",
         props: {
@@ -2978,21 +3015,24 @@
                 }), style;
             }));
             return () => props.scrollbar ? vue.createVNode(elementPlus.ElScrollbar, {
-                class: [ ns$a.b(), props.className ],
+                class: [ ns$c.b(), props.className ],
                 style: props.style
             }, {
                 default: () => [ slots.default?.() ]
             }) : vue.createVNode("div", {
-                class: [ ns$a.b(), props.className ],
+                class: [ ns$c.b(), props.className ],
                 style: {
                     ...styles.value,
                     ...props.style
                 }
             }, [ props.card ? vue.createVNode("div", {
-                class: ns$a.b("card")
+                class: ns$c.b("card")
             }, [ slots.default?.() ]) : slots.default?.() ]);
         }
     }));
+    function isEqual(value, other) {
+        return baseIsEqual(value, other);
+    }
     var defaultPropsConfig = {
         className: {
             type: String,
@@ -3060,7 +3100,7 @@
         }
     };
     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$2 = {
+    var defaultConfig$3 = {
         initLoadData: !0,
         defaultContentHeight: 300,
         fullscreenchangeContentHeight: !1,
@@ -3106,8 +3146,8 @@
         formSpan: 12,
         formColumnMinWidth: 350
     };
-    const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$9 = useNamespace("spin-loading");
-    var SpinLoading = vue.defineComponent({
+    const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$b = useNamespace("spin-loading");
+    var NextSpinLoading$1 = vue.defineComponent({
         name: "NextSpinLoading",
         props: {
             className: {
@@ -3127,32 +3167,36 @@
                 default: ""
             }
         },
-        setup() {
-            const {t: t} = useLocale();
-            return {
-                t: t
+        setup(props, {expose: expose}) {
+            const {t: t} = useLocale(), elementInstance = vue.ref();
+            return expose({
+                elementInstance: elementInstance
+            }), {
+                t: t,
+                elementInstance: elementInstance
             };
         },
         render() {
             const _t = this.t, slots = this.$slots, props = this.$props, loadingText = props.tip || _t("next.loading");
             return vue.createVNode("div", {
-                class: [ ns$9.b(), props.className ],
+                ref: "elementInstance",
+                class: [ ns$b.b(), props.className ],
                 style: props.style
-            }, [ props.loading ? vue.createVNode("div", {
-                class: ns$9.b("mask")
+            }, [ slots.default?.(), props.loading ? vue.createVNode("div", {
+                class: ns$b.b("mask")
             }, [ vue.createVNode("span", {
-                class: ns$9.b("mask-dot")
+                class: ns$b.b("mask-dot")
             }, [ vue.createVNode("i", {
-                class: ns$9.be("mask", "dot-item")
+                class: ns$b.be("mask", "dot-item")
             }, null), vue.createVNode("i", {
-                class: ns$9.be("mask", "dot-item")
+                class: ns$b.be("mask", "dot-item")
             }, null), vue.createVNode("i", {
-                class: ns$9.be("mask", "dot-item")
+                class: ns$b.be("mask", "dot-item")
             }, null), vue.createVNode("i", {
-                class: ns$9.be("mask", "dot-item")
+                class: ns$b.be("mask", "dot-item")
             }, null) ]), vue.createVNode("span", {
-                class: ns$9.be("mask", "text")
-            }, [ loadingText ]) ]) : null, slots.default?.() ]);
+                class: ns$b.be("mask", "text")
+            }, [ loadingText ]) ]) : null ]);
         }
     }), SearchColumn = vue.defineComponent({
         name: "SearchColumn",
@@ -3824,7 +3868,7 @@
             }, null) ]);
         }
     });
-    const ns$8 = useNamespace("dialog");
+    const ns$a = useNamespace("dialog");
     var NextDialog$1 = vue.defineComponent({
         name: "NextDialog",
         props: {
@@ -3889,7 +3933,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(elementPlus.ElDialog, {
                 modelValue: visible.value,
                 "onUpdate:modelValue": $event => visible.value = $event,
-                class: ns$8.b(),
+                class: ns$a.b(),
                 title: props.title,
                 appendToBody: props.appendToBody,
                 "destroy-on-close": !0,
@@ -3906,12 +3950,12 @@
             }, {
                 default: () => [ slots.default?.() ],
                 header: ({close: close, titleId: titleId, titleClass: titleClass}) => vue.createVNode("div", {
-                    class: ns$8.b("header")
+                    class: ns$a.b("header")
                 }, [ vue.createVNode("h4", {
                     id: titleId,
                     class: titleClass
                 }, [ props.title ]), vue.createVNode("div", {
-                    class: ns$8.e("header-right")
+                    class: ns$a.e("header-right")
                 }, [ props.fullscreenBtn && vue.createVNode("span", {
                     class: "icon-fullscreen",
                     onClick: () => isFullscreen.value = !isFullscreen.value
@@ -3943,7 +3987,7 @@
         settingBtn: !0,
         operations: !1
     };
-    var defaultConfig$1 = {
+    var defaultConfig$2 = {
         size: "default",
         colSpan: 8,
         labelWidth: "6em",
@@ -3957,7 +4001,7 @@
         submitText: null,
         resetText: null
     };
-    const ns$7 = useNamespace("form");
+    const ns$9 = useNamespace("form");
     var NumberRangePicker = vue.defineComponent({
         name: "NumberRangePicker",
         props: {
@@ -3996,7 +4040,7 @@
             }));
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: numberRangeRef,
-                class: ns$7.e("number-range")
+                class: ns$9.e("number-range")
             }, [ vue.createVNode(elementPlus.ElInputNumber, {
                 modelValue: startNumber.value,
                 "onUpdate:modelValue": $event => startNumber.value = $event,
@@ -4006,7 +4050,7 @@
                 disabled: disabled,
                 onChange: onChangeStart
             }, null), vue.createVNode("span", {
-                class: ns$7.em("number-range", "division")
+                class: ns$9.em("number-range", "division")
             }, [ t("next.date.rangeSeparator") ]), vue.createVNode(elementPlus.ElInputNumber, {
                 modelValue: endNumber.value,
                 "onUpdate:modelValue": $event => endNumber.value = $event,
@@ -4022,7 +4066,7 @@
     function _isSlot$3(s) {
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
-    const ns$6 = useNamespace("form"), InputTableSelect = vue.defineComponent({
+    const ns$8 = useNamespace("form"), InputTableSelect = vue.defineComponent({
         name: "InputTableSelect",
         props: {
             modelValue: {
@@ -4050,7 +4094,7 @@
         },
         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$2), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = vue.reactive({
+            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 = vue.reactive({
                 visible: !1,
                 title: _column.label + t("next.form.tableSelect"),
                 dialogWidth: _options.dialogWidth
@@ -4121,18 +4165,18 @@
             }, renderContent = () => {
                 let _slot, _slot2;
                 return vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
-                    class: [ "el-input", ns$6.e("input-table"), ns$6.is("disabled", _disabled) ]
+                    class: [ "el-input", ns$8.e("input-table"), ns$8.is("disabled", _disabled) ]
                 }, [ vue.createVNode("div", {
                     class: "el-input__wrapper"
                 }, [ tags?.value.length ? vue.createVNode("span", {
-                    class: ns$6.em("input-table", "value")
+                    class: ns$8.em("input-table", "value")
                 }, [ tags.value.map(((tag, index) => vue.createVNode(elementPlus.ElTag, {
                     closable: !_disabled,
                     onClose: () => _onCloseTag(0, index)
                 }, {
                     default: () => [ tag.label ]
                 }))), tagsMore?.value?.length ? vue.createVNode(elementPlus.ElTooltip, {
-                    "popper-class": ns$6.e("tooltip-tags"),
+                    "popper-class": ns$8.e("tooltip-tags"),
                     placement: "bottom",
                     effect: "light"
                 }, {
@@ -4146,10 +4190,10 @@
                         default: () => [ tag.label ]
                     })))
                 }) : null ]) : vue.createVNode("span", {
-                    class: ns$6.em("input-table", "placeholder")
+                    class: ns$8.em("input-table", "placeholder")
                 }, [ _placeholder ]) ]), vue.createVNode(elementPlus.ElButton, {
                     type: "primary",
-                    class: ns$6.em("input-table", "append"),
+                    class: ns$8.em("input-table", "append"),
                     disabled: _disabled,
                     icon: search_default,
                     onClick: onClickTableDialog
@@ -4163,7 +4207,7 @@
                     onClose: onCloseTableDialog
                 }, {
                     default: () => [ vue.createVNode("div", {
-                        class: ns$6.em("input-table", "content")
+                        class: ns$8.em("input-table", "content")
                     }, [ vue.createVNode(elementPlus.ElRadioGroup, {
                         modelValue: sinleSelection.value
                     }, {
@@ -4186,7 +4230,7 @@
                             }) ]
                         }) ]
                     }) ]), vue.createVNode("div", {
-                        class: ns$6.em("input-table", "footer")
+                        class: ns$8.em("input-table", "footer")
                     }, [ vue.createVNode(elementPlus.ElButton, {
                         onClick: onResetTableSelect
                     }, _isSlot$3(_slot = t("next.form.reset")) ? _slot : {
@@ -4202,7 +4246,7 @@
             };
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
-    }), ns$5 = useNamespace("form");
+    }), ns$7 = useNamespace("form");
     var UploadImage = vue.defineComponent({
         name: "UploadImage",
         props: {
@@ -4250,7 +4294,7 @@
                 let urls = [];
                 return "string" == typeof value ? urls = [ value ] : "[object Array]" === Object.prototype.toString.call(value) && (urls = value), 
                 urls = urls.filter((url => !!url)), urls.length ? vue.createVNode(elementPlus.ElImage, {
-                    class: ns$5.e("preview-image"),
+                    class: ns$7.e("preview-image"),
                     src: urls[0],
                     previewSrcList: urls,
                     "preview-teleported": !0,
@@ -4265,7 +4309,7 @@
                     })
                 }) : null;
             })(), _disabled ? null : vue.createVNode(elementPlus.ElUpload, {
-                class: [ ns$5.b("upload-image"), props.className ],
+                class: [ ns$7.b("upload-image"), props.className ],
                 style: props.style,
                 "list-type": props.listType,
                 "auto-upload": !1,
@@ -4390,8 +4434,8 @@
             }, null) ]);
         }
     });
-    const ns$4 = useNamespace("form");
-    var Element$5 = vue.defineComponent({
+    const ns$6 = useNamespace("form");
+    var Element$6 = vue.defineComponent({
         name: "NextForm",
         props: {
             options: {
@@ -4409,7 +4453,7 @@
         },
         emits: [ "submit", "close", "reset" ],
         setup(props, {slots: slots, emit: emit, expose: expose}) {
-            const _config = deepClone(defaultConfig$1), options = vue.reactive(merge$1(_config, props.options)), _isEditing = vue.computed((() => "boolean" != typeof options.isEditing || options.isEditing)), {t: t} = useLocale(), colSpan = vue.ref(options.colSpan), formDatum = vue.reactive(props.formDatum) || {}, formParams = vue.reactive(merge$1({}, formDatum)), _formColumns = vue.ref([]), formRules = vue.reactive({});
+            const _config = deepClone(defaultConfig$2), options = vue.reactive(merge$1(_config, props.options)), _isEditing = vue.computed((() => "boolean" != typeof options.isEditing || options.isEditing)), {t: t} = useLocale(), colSpan = vue.ref(options.colSpan), formDatum = vue.reactive(props.formDatum) || {}, formParams = vue.reactive(merge$1({}, formDatum)), _formColumns = vue.ref([]), formRules = vue.reactive({});
             vue.watch((() => [ props.columns, props.formDatum ]), (() => {
                 (() => {
                     const columns = props.columns;
@@ -4753,7 +4797,7 @@
                 let _slot;
                 return vue.createVNode(elementPlus.ElForm, {
                     ref: ruleFormRef,
-                    class: ns$4.b(),
+                    class: ns$6.b(),
                     inline: !1,
                     model: formParams,
                     size: options.size
@@ -4774,7 +4818,7 @@
                             }, {
                                 label: () => column.label ? vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextTextEllipsis, {
                                     content: t(column.label),
-                                    class: ns$4.e("item-label")
+                                    class: ns$6.e("item-label")
                                 }, null), column.tip ? vue.createVNode(elementPlus.ElTooltip, {
                                     effect: "dark",
                                     content: column.tip,
@@ -4794,7 +4838,7 @@
                         }))), "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
                             default: () => [ _slot ]
                         })), _isEditing.value && options.showFooter ? vue.createVNode("div", {
-                            class: ns$4.e("footer")
+                            class: ns$6.e("footer")
                         }, [ vue.createVNode(elementPlus.ElButton, {
                             type: "primary",
                             loading: submitLoading.value,
@@ -4813,7 +4857,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
-    const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$5);
+    const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$6);
     var AddEditForm = vue.defineComponent({
         name: "AddEditForm",
         props: {
@@ -4867,17 +4911,17 @@
     function _isSlot(s) {
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
-    const ns$3 = useNamespace("crud-table");
-    var Element$4 = vue.defineComponent({
+    const ns$5 = useNamespace("crud-table");
+    var Element$5 = vue.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$2), _options = vue.computed((() => {
+            const _config = deepClone(defaultConfig$3), _options = vue.computed((() => {
                 const cfg = vue.unref(props.options);
                 return merge$1(_config, cfg);
             })), options = vue.unref(_options);
-            vue.provide("options", vue.computed((() => _options.value))), vue.provide("ns", ns$3);
+            vue.provide("options", vue.computed((() => _options.value))), vue.provide("ns", ns$5);
             const {t: t} = useLocale(), _columns = vue.ref(options.columns), _searchColumns = vue.ref([]), _formColumns = vue.ref([]), _updateColumnsAll = ops => {
                 ((options, cb) => {
                     const _columns = vue.reactive(options.columns), _loadDicData = col => {
@@ -4999,7 +5043,7 @@
                 return params;
             })()), onConfirmSearch = searchParams => {
                 const params = deepClone(vue.toRaw(searchParams));
-                baseIsEqual(_searchFormParams.value, params) || (props.page.pageIndex = 1, _searchFormParams.value = params), 
+                isEqual(_searchFormParams.value, params) || (props.page.pageIndex = 1, _searchFormParams.value = params), 
                 emit("confirm-search", params);
             }, onClearSearch = () => {
                 emit("clear-search");
@@ -5118,11 +5162,11 @@
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: crudTableRef,
-                class: [ ns$3.b(), props.className ],
+                class: [ ns$5.b(), props.className ],
                 style: props.style
             }, [ options.showSearchForm || options.showHeaderMenu ? vue.createVNode("header", {
                 ref: headerRef,
-                class: ns$3.b("header")
+                class: ns$5.b("header")
             }, [ options.showSearchForm && vue.createVNode(HeaderSearch, {
                 columns: _searchColumns.value,
                 onZoomResize: updateTableContentHeight,
@@ -5136,12 +5180,12 @@
                 onClickRefresh: onClickRefresh
             }, _isSlot(headerMenu_solts) ? headerMenu_solts : {
                 default: () => [ headerMenu_solts ]
-            }), slots["table-head-tip"]?.() ]) : null, vue.createVNode(SpinLoading, {
+            }), slots["table-head-tip"]?.() ]) : null, vue.createVNode(NextSpinLoading$1, {
                 loading: props.loading
             }, {
                 default: () => [ vue.createVNode("div", {
                     ref: tableRef,
-                    class: ns$3.b("content")
+                    class: ns$5.b("content")
                 }, [ vue.createVNode(elementPlus.ElTable, {
                     data: tableData.value,
                     height: tableContentHeight.value,
@@ -5204,7 +5248,7 @@
                 }) ]) ]
             }), options.isPagination ? vue.createVNode("div", {
                 ref: footerRef,
-                class: ns$3.b("footer")
+                class: ns$5.b("footer")
             }, [ vue.createVNode(FooterPagination, {
                 page: props.page,
                 onChange: onChangePagination
@@ -5230,7 +5274,7 @@
             }) ]) ]) ]);
         }
     });
-    const NextCrudTable = withInstall(Element$4);
+    const NextCrudTable = withInstall(Element$5);
     var propsConfig = {
         className: {
             type: String,
@@ -5260,13 +5304,13 @@
                 total: 0
             })
         }
-    }, defaultConfig = {};
-    const ns$2 = useNamespace("crud-table-virtualized");
+    }, defaultConfig$1 = {};
+    const ns$4 = useNamespace("crud-table-virtualized");
     const NextCrudTableVirtualized = withInstall(vue.defineComponent({
         name: "NextCrudTableVirtualized",
         props: propsConfig,
         setup(props, {emit: emit}) {
-            const _config = deepClone(defaultConfig), _options = vue.computed((() => {
+            const _config = deepClone(defaultConfig$1), _options = vue.computed((() => {
                 const cfg = vue.unref(props.options);
                 return merge$1(_config, cfg);
             })), options = vue.unref(_options);
@@ -5281,7 +5325,7 @@
                 emit("close-add-edit");
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
-                class: [ ns$2.b(), props.className ]
+                class: [ ns$4.b(), props.className ]
             }, [ vue.createVNode(NextSpinLoading, null, null), vue.createVNode(NextDialog, {
                 modelValue: addEditDialog.visible,
                 "onUpdate:modelValue": $event => addEditDialog.visible = $event,
@@ -5292,7 +5336,7 @@
                 onClose: onCloseAddEditDialog
             }, null) ]) ]);
         }
-    })), NextSpinLoading = withInstall(SpinLoading), ns$1 = useNamespace("upload");
+    })), NextSpinLoading = withInstall(NextSpinLoading$1), ns$3 = useNamespace("upload");
     const NextUpload = withInstall(vue.defineComponent({
         name: "NextUpload",
         props: {
@@ -5326,7 +5370,7 @@
             const slots = this.$slots, props = this.$props, emit = this.$emit, _t = this.t, uploadfilesPreview = vue.ref([]), body = document.getElementsByTagName("body")[0];
             let previewImagesContainer = null;
             return vue.createVNode(elementPlus.ElUpload, {
-                class: [ ns$1.b(), props.className ],
+                class: [ ns$3.b(), props.className ],
                 style: props.style,
                 "list-type": props.listType,
                 "auto-upload": !1,
@@ -5364,8 +5408,8 @@
                 })
             });
         }
-    })), ns = useNamespace("video-player");
-    var Element$1 = vue.defineComponent({
+    })), ns$2 = useNamespace("video-player");
+    var Element$2 = vue.defineComponent({
         name: "NextVideoPlayer",
         props: {
             className: {
@@ -5438,7 +5482,7 @@
                 if (!classNames || !classNames.length) throw new Error("模型类别不能未空！");
                 container.innerHTML = "", tf__namespace.loadGraphModel(modelUrl).then((model => {
                     const canvas = document.createElement("canvas");
-                    canvas.className = ns.b("recongition"), container.appendChild(canvas);
+                    canvas.className = ns$2.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;
@@ -5609,17 +5653,916 @@
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: videoBoxRef,
-                class: [ ns.b(), props.className ],
+                class: [ ns$2.b(), props.className ],
                 style: props.style
             }, null) ]);
         }
     });
-    const NextVideoPlayer = withInstall(Element$1);
+    const NextVideoPlayer = withInstall(Element$2);
     const NextDragResize = withInstall(vue.defineComponent({
         name: "NextDragResize",
         props: {},
         setup: () => () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, null) ])
-    }));
+    })), colors = [ "#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) => {
+        const [label_type, x_center, y_center, width, height] = labelData, rectWidth = width * canvasWidth, rectHeight = height * canvasHeight, startX = x_center * canvasWidth - rectWidth / 2, startY = y_center * canvasHeight - rectHeight / 2;
+        return {
+            type: label_type,
+            startX: Math.ceil(startX),
+            startY: Math.ceil(startY),
+            rectWidth: Math.ceil(rectWidth),
+            rectHeight: Math.ceil(rectHeight),
+            canvasWidth: canvasWidth,
+            canvasHeight: canvasHeight
+        };
+    };
+    var ContextMenuLabel = vue.defineComponent({
+        props: {
+            labelRect: {
+                type: Object,
+                default: () => ({})
+            },
+            classes: {
+                type: Array,
+                default: () => []
+            },
+            activateRect: {
+                type: Object,
+                default: null
+            }
+        },
+        emits: [ "close", "select", "delete" ],
+        setup(props, {emit: emit}) {
+            const ns = vue.inject("ns", {}), onClose = () => {
+                emit("close");
+            }, onDelete = () => {
+                emit("delete", props.activateRect);
+            }, activateIndex = vue.ref();
+            vue.watch((() => props.activateRect), (() => {
+                const {type: type} = props.activateRect;
+                activateIndex.value = isValueExist(type) ? type : null;
+            }), {
+                deep: !0,
+                immediate: !0
+            });
+            const labelRectWidthHeight = vue.ref({
+                width: 0,
+                height: 0
+            });
+            vue.onMounted((() => {
+                const {clientWidth: clientWidth, clientHeight: clientHeight} = labelMenuRef.value;
+                labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
+            }));
+            const labelMenuRef = vue.ref(), labelStyleFixed = vue.computed((() => {
+                const {left: left, top: top, canvasHeight: canvasHeight} = props.labelRect, height_diff = top + labelRectWidthHeight.value.height - canvasHeight;
+                let y = top;
+                return height_diff > 0 && (y -= height_diff), {
+                    top: y + "px",
+                    left: left + "px"
+                };
+            })), renderContent = () => vue.createVNode("div", {
+                ref: labelMenuRef,
+                class: [ ns.b("contextmenu-label") ],
+                style: labelStyleFixed.value
+            }, [ vue.createVNode("div", {
+                class: "label-head"
+            }, [ vue.createVNode("span", {
+                style: "padding-right: 30px"
+            }, [ vue.createTextVNode("标签选择") ]), vue.createVNode(elementPlus.ElIcon, {
+                size: 16,
+                onClick: onClose
+            }, {
+                default: () => [ vue.createVNode(close_default, null, null) ]
+            }) ]), vue.createVNode("ul", {
+                class: "label-main"
+            }, [ props.classes.map(((name, index) => vue.createVNode("li", {
+                key: index,
+                onClick: () => (index => {
+                    activateIndex.value = index, emit("select", index);
+                })(index),
+                class: {
+                    "activate-label": activateIndex.value === index
+                }
+            }, [ vue.createVNode("span", {
+                style: {
+                    "background-color": colors[index % colors.length]
+                },
+                class: "label-line"
+            }, null), vue.createVNode("span", null, [ name ]) ]))) ]), isValueExist(activateIndex.value) ? vue.createVNode("div", {
+                style: "margin: 10px auto 0"
+            }, [ vue.createVNode(elementPlus.ElButton, {
+                icon: delete_default,
+                plain: !0,
+                size: "small",
+                type: "danger",
+                onClick: onDelete
+            }, {
+                default: () => [ vue.createTextVNode("删除标注框") ]
+            }) ]) : null ]);
+            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
+        }
+    });
+    const {hexToRgb: hexToRgb} = useChangeColor();
+    var DraggableRect = vue.defineComponent({
+        props: {
+            parentEl: {
+                type: Object,
+                default: null
+            },
+            rect: {
+                type: Object,
+                default: () => ({})
+            },
+            color: {
+                type: String,
+                default: null
+            }
+        },
+        emits: [ "draggle-resize", "contextmenu" ],
+        setup(props, {emit: emit}) {
+            const isDraggle = vue.ref(!1), isResizeCorner = vue.ref({
+                topLeft: !1,
+                topCenter: !1,
+                topRight: !1,
+                leftCenter: !1,
+                rightCenter: !1,
+                bottomLeft: !1,
+                bottomCenter: !1,
+                bottomRight: !1
+            }), draggleOffset = vue.ref({
+                diff_x: null,
+                diff_y: null
+            });
+            let parentRect = {};
+            const rect = vue.toRef(props.rect), onMouseup = e => {
+                e.preventDefault(), e.stopPropagation(), isDraggle.value = !1, isResizeCorner.value.topLeft = !1, 
+                isResizeCorner.value.topCenter = !1, isResizeCorner.value.topRight = !1, isResizeCorner.value.leftCenter = !1, 
+                isResizeCorner.value.rightCenter = !1, isResizeCorner.value.bottomLeft = !1, isResizeCorner.value.bottomCenter = !1, 
+                isResizeCorner.value.bottomRight = !1, emit("draggle-resize", rect.value);
+            }, onMousemove = e => {
+                if (isDraggle.value) {
+                    const newLeft = e.clientX - parentRect.left - draggleOffset.value.diff_x, newTop = e.clientY - parentRect.top - draggleOffset.value.diff_y;
+                    rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
+                    rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
+                }
+                if (isResizeCorner.value.bottomCenter) {
+                    let newHeight = e.clientY - parentRect.top - rect.value.startY;
+                    newHeight < 30 && (newHeight = 30), newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
+                    rect.value.rectHeight = newHeight;
+                }
+                if (isResizeCorner.value.topCenter) {
+                    let newTop = e.clientY - parentRect.top, newHeight = rect.value.startY - newTop + rect.value.rectHeight;
+                    if (newTop < 0) return;
+                    if (newHeight < 30) return;
+                    rect.value.rectHeight = newHeight, rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
+                }
+                if (isResizeCorner.value.leftCenter) {
+                    let newLeft = e.clientX - parentRect.left, newWidth = rect.value.startX - newLeft + rect.value.rectWidth;
+                    if (newLeft < 0) return;
+                    if (newWidth < 30) return;
+                    rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
+                    rect.value.rectWidth = newWidth;
+                }
+                if (isResizeCorner.value.rightCenter) {
+                    let newWidth = e.clientX - parentRect.left - rect.value.startX;
+                    newWidth < 30 && (newWidth = 30), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
+                    rect.value.rectWidth = newWidth;
+                }
+                if (isResizeCorner.value.bottomRight) {
+                    let newWidth = e.clientX - parentRect.left - rect.value.startX, newHeight = e.clientY - parentRect.top - rect.value.startY;
+                    newWidth < 30 && (newWidth = 30), newHeight < 30 && (newHeight = 30), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
+                    newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
+                    rect.value.rectWidth = newWidth, rect.value.rectHeight = newHeight;
+                }
+                if (isResizeCorner.value.bottomLeft) {
+                    let newLeft = e.clientX - parentRect.left, newWidth = rect.value.startX - newLeft + rect.value.rectWidth, newHeight = e.clientY - parentRect.top - rect.value.startY;
+                    if (newLeft < 0) return;
+                    if (newWidth < 30) return;
+                    newHeight < 30 && (newHeight = 30), newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
+                    rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
+                    rect.value.rectWidth = newWidth, rect.value.rectHeight = newHeight;
+                }
+                if (isResizeCorner.value.topLeft) {
+                    let newTop = e.clientY - parentRect.top, newHeight = rect.value.startY - newTop + rect.value.rectHeight;
+                    if (newTop < 0) return;
+                    if (newHeight < 30) return;
+                    rect.value.rectHeight = newHeight, rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
+                    let newLeft = e.clientX - parentRect.left, newWidth = rect.value.startX - newLeft + rect.value.rectWidth;
+                    if (newLeft < 0) return;
+                    if (newWidth < 30) return;
+                    rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
+                    rect.value.rectWidth = newWidth;
+                }
+                if (isResizeCorner.value.topRight) {
+                    let newTop = e.clientY - parentRect.top, newHeight = rect.value.startY - newTop + rect.value.rectHeight;
+                    if (newTop < 0) return;
+                    if (newHeight < 30) return;
+                    rect.value.rectHeight = newHeight, rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
+                    let newWidth = e.clientX - parentRect.left - rect.value.startX;
+                    newWidth < 30 && (newWidth = 30), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
+                    rect.value.rectWidth = newWidth;
+                }
+            };
+            return vue.onMounted((() => {
+                parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
+                document.addEventListener("mouseup", onMouseup);
+            })), vue.onUnmounted((() => {
+                document.removeEventListener("mousemove", onMousemove, !1), document.removeEventListener("mouseup", onMouseup, !1);
+            })), {
+                onMousedown: e => {
+                    e.preventDefault(), isDraggle.value = !0, draggleOffset.value.diff_x = e.offsetX, 
+                    draggleOffset.value.diff_y = e.offsetY;
+                },
+                onMouseup: onMouseup,
+                onContextmenu: e => {
+                    e.preventDefault(), emit("contextmenu", e, rect.value);
+                },
+                rect: rect,
+                onMousedownDot: (e, corner) => {
+                    e.preventDefault(), e.stopPropagation(), isResizeCorner.value[corner] = !0;
+                }
+            };
+        },
+        render() {
+            const _ns = vue.inject("ns", {}), props = this.$props;
+            return vue.createVNode("div", {
+                class: [ _ns.b("draggable-rect") ],
+                style: (() => {
+                    const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = this.rect, style = {
+                        top: startY + "px",
+                        left: startX + "px",
+                        width: rectWidth + "px",
+                        height: rectHeight + "px"
+                    }, color = props.color;
+                    if (color) {
+                        const rgb_color = hexToRgb(color);
+                        rgb_color && (style.backgroundColor = `rgba(${rgb_color[0]},${rgb_color[1]},${rgb_color[2]}, 0.5)`);
+                    }
+                    return style;
+                })(),
+                onMousedown: this.onMousedown,
+                onMouseup: this.onMouseup,
+                onContextmenu: this.onContextmenu
+            }, [ vue.createVNode("ul", {
+                class: [ _ns.be("draggable-rect", "resize") ]
+            }, [ vue.createVNode("li", {
+                class: "top-left",
+                onMousedown: event => this.onMousedownDot(event, "topLeft")
+            }, null), vue.createVNode("li", {
+                class: "top-center",
+                onMousedown: event => this.onMousedownDot(event, "topCenter")
+            }, null), vue.createVNode("li", {
+                class: "top-right",
+                onMousedown: event => this.onMousedownDot(event, "topRight")
+            }, null), vue.createVNode("li", {
+                class: "left-center",
+                onMousedown: event => this.onMousedownDot(event, "leftCenter")
+            }, null), vue.createVNode("li", {
+                class: "right-center",
+                onMousedown: event => this.onMousedownDot(event, "rightCenter")
+            }, null), vue.createVNode("li", {
+                class: "bottom-left",
+                onMousedown: event => this.onMousedownDot(event, "bottomLeft")
+            }, null), vue.createVNode("li", {
+                class: "bottom-center",
+                onMousedown: event => this.onMousedownDot(event, "bottomCenter")
+            }, null), vue.createVNode("li", {
+                class: "bottom-right",
+                onMousedown: event => this.onMousedownDot(event, "bottomRight")
+            }, null) ]) ]);
+        }
+    }), CanvasContext = vue.defineComponent({
+        name: "NextCanvasContext",
+        props: {
+            classes: {
+                type: Array,
+                default: () => []
+            },
+            contextClientHeight: {
+                type: Number,
+                default: null
+            },
+            rowInfo: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [ "change" ],
+        setup(props, {emit: emit, expose: expose}) {
+            const ns = vue.inject("ns", {}), _emit = vue.inject("_emit", null), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), canvasRectRef = vue.ref(), labels = vue.ref([]), drawBaseCanvas = vue.ref({}), formatLabelsType = () => {
+                const _labels = deepClone(labels.value);
+                let yolo_label = [];
+                return {
+                    rects: _labels.map((rect => {
+                        delete rect.typeName;
+                        const label_rect = convertToLabel(rect);
+                        return yolo_label.push(label_rect.join(" ")), vue.toRaw(rect);
+                    })),
+                    label_txt: yolo_label.join("\n")
+                };
+            }, loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
+                labels.value = (rowInfo => rowInfo.labels ? rowInfo.labels.map((rect => {
+                    const typeName = props.classes[rect.type];
+                    return typeName && (rect.typeName = typeName), rect;
+                })) : [])(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;
+                        const {width: width, height: height} = image, canvasHeight = clientHeight, 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", 
+                            canvasRectRef.value.width = canvasWidth, canvasRectRef.value.height = canvasHeight, 
+                            canvasRectRef.value.style.width = canvasWidth + "px", canvasRectRef.value.style.height = canvasHeight + "px";
+                        })(canvasWidth, canvasHeight), labels.value = ((labels, canvasHeight) => {
+                            let scale_rects = [];
+                            for (let i = 0; i < labels.length; i++) {
+                                const rect = labels[i], scale = parseFloat((canvasHeight / rect.canvasHeight).toFixed(3));
+                                scale && (rect.startX = Math.ceil(rect.startX * scale), rect.startY = Math.ceil(rect.startY * scale), 
+                                rect.rectWidth = Math.ceil(rect.rectWidth * scale), rect.rectHeight = Math.ceil(rect.rectHeight * scale), 
+                                rect.canvasWidth = Math.ceil(rect.canvasWidth * scale), rect.canvasHeight = canvasHeight), 
+                                scale_rects.push(rect);
+                            }
+                            return scale_rects;
+                        })(labels.value, canvasHeight);
+                        const {updateLabels: updateLabels, addDrawRect: addDrawRect, hitCanvasLabel: hitCanvasLabel} = (options => {
+                            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];
+                                    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;
+                                        ctx.fillStyle = color, ctx.fillText(text, startX + 6, startY + 6);
+                                    }
+                                    ctx.restore();
+                                }
+                            };
+                            return updateLabels(), {
+                                updateLabels: updateLabels,
+                                addDrawRect: (rect, color = "#f30635") => {
+                                    const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
+                                    ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight);
+                                },
+                                hitCanvasLabel: (x, y) => {
+                                    let hit_rect = null, hit_index = null, color = null;
+                                    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]);
+                                    }
+                                    return {
+                                        hit_rect: hit_rect,
+                                        hit_index: hit_index,
+                                        color: color
+                                    };
+                                }
+                            };
+                        })({
+                            canvas: canvasBaseRef.value,
+                            ctx: ctx,
+                            image: image,
+                            canvasWidth: canvasWidth,
+                            canvasHeight: canvasHeight,
+                            labels: labels.value,
+                            scaleFactor: scaleFactor
+                        });
+                        drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
+                        drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
+                        const {clearCanvas: clearCanvas} = ((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 rectWidth = Math.abs(endX - startX), rectHeight = Math.abs(endY - startY);
+                                startX > endX && (startX = endX), startY > endY && (startY = endY), callback && callback({
+                                    startX: startX,
+                                    startY: startY,
+                                    rectWidth: rectWidth,
+                                    rectHeight: rectHeight,
+                                    canvasWidth: canvasWidth,
+                                    canvasHeight: canvasHeight
+                                }, {
+                                    endX: endX,
+                                    endY: endY
+                                }), isRectDraw = !1;
+                            }));
+                            const drawRect = (color = "#f30635") => {
+                                clearCanvas(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, endX - startX, endY - startY);
+                            };
+                            return {
+                                canvas: canvas,
+                                ctx: ctx,
+                                clearCanvas: clearCanvas,
+                                drawRect: drawRect
+                            };
+                        })(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;
+                    }, image.onerror = () => {
+                        loadingImage.value = !1;
+                    };
+                }
+                canvasBaseRef.value.addEventListener("contextmenu", (e => {
+                    e.preventDefault();
+                    const x = e.offsetX, y = e.offsetY, {hit_rect: hit_rect} = drawBaseCanvas.value.hitCanvasLabel(x, y);
+                    onCloseContentmenuLabel(), onCloseDraggableRectFixed(), hit_rect && vue.nextTick((() => {
+                        updateContextmenuLabelFixed(x, y, hit_rect);
+                    }));
+                })), canvasBaseRef.value.addEventListener("click", (e => {
+                    const x = e.offsetX, y = e.offsetY, {hit_rect: hit_rect, hit_index: hit_index, color: color} = drawBaseCanvas.value.hitCanvasLabel(x, y);
+                    onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && vue.nextTick((() => {
+                        updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
+                    }));
+                }));
+            };
+            vue.onMounted((() => {
+                vue.watch((() => props.rowInfo), (info => {
+                    const rowInfo = vue.toRaw(info);
+                    renderImageLabel(rowInfo);
+                }), {
+                    deep: !0,
+                    immediate: !0
+                }), vue.watch((() => props.contextClientHeight), (height => {
+                    if (valueExist(height)) {
+                        canvasMainRef.value.style.height = height + "px";
+                        const rowInfo = vue.toRaw(props.rowInfo);
+                        renderImageLabel(rowInfo);
+                    }
+                }));
+            }));
+            const contextmenuLabelFixed = vue.ref({
+                show: !1,
+                top: 0,
+                left: 0,
+                activateRect: null
+            }), updateContextmenuLabelFixed = (x, y, rect) => {
+                contextmenuLabelFixed.value.show = !0, contextmenuLabelFixed.value.left = x, contextmenuLabelFixed.value.top = y, 
+                contextmenuLabelFixed.value.canvasWidth = canvasBaseRef.value.width, contextmenuLabelFixed.value.canvasHeight = canvasBaseRef.value.height, 
+                contextmenuLabelFixed.value.activateRect = rect, activate_add_label.value = rect;
+            }, onCloseContentmenuLabel = () => {
+                contextmenuLabelFixed.value.show = !1, contextmenuLabelFixed.value.top = 0, contextmenuLabelFixed.value.left = 0, 
+                contextmenuLabelFixed.value.activateRect = null, activate_add_label.value = null, 
+                drawBaseCanvas.value.updateLabels(), drawBaseCanvas.value.clearCanvasRect();
+            }, contextmenuLabelRect = vue.computed((() => {
+                const {top: top, left: left, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = contextmenuLabelFixed.value;
+                return {
+                    top: top,
+                    left: left,
+                    canvasWidth: canvasWidth,
+                    canvasHeight: canvasHeight
+                };
+            })), draggableRectFixed = vue.ref({
+                show: !1,
+                top: 0,
+                left: 0,
+                width: 0,
+                height: 0,
+                activateRect: null,
+                activateIndex: null,
+                color: null
+            }), updateDraggableRectFixed = (x, y, rect, index, color) => {
+                draggableRectFixed.value.show = !0, draggableRectFixed.value.top = y, draggableRectFixed.value.left = x, 
+                draggableRectFixed.value.width = rect.rectWidth, draggableRectFixed.value.height = rect.rectHeight, 
+                draggableRectFixed.value.activateRect = rect, draggableRectFixed.value.activateIndex = index, 
+                draggableRectFixed.value.color = color;
+            }, onCloseDraggableRectFixed = () => {
+                draggableRectFixed.value.show = !1, draggableRectFixed.value.top = 0, draggableRectFixed.value.left = 0, 
+                draggableRectFixed.value.width = 0, draggableRectFixed.value.height = 0, draggableRectFixed.value.activateRect = null, 
+                draggableRectFixed.value.activateIndex = null, draggableRectFixed.value.color = null;
+            }, onDraggleRectResize = rect => {
+                draggableRectFixed.value.activateRect = rect, drawBaseCanvas.value.updateLabels();
+                const i = labels.value.findIndex((o => isEqual(o, rect)));
+                i > -1 && labels.value.splice(i, 1, rect);
+                const {rects: rects, label_txt: label_txt} = formatLabelsType();
+                _emit("change", rects, label_txt), emit("change", rects, label_txt);
+            }, onContextmenuDraggable = (e, rect) => {
+                e.preventDefault();
+                const rect_x = e.offsetX, rect_y = e.offsetY, x = rect_x + rect.startX, y = rect_y + rect.startY;
+                onCloseContentmenuLabel(), vue.nextTick((() => {
+                    updateContextmenuLabelFixed(x, y, rect);
+                }));
+            }, activate_add_label = vue.ref(), onSelectLabel = type => {
+                activate_add_label.value.type = type;
+                const typeName = props.classes[type];
+                typeName && (activate_add_label.value.typeName = typeName);
+                const i = labels.value.findIndex((o => isEqual(o, activate_add_label.value)));
+                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)));
+                labels.value.splice(i, 1), onCloseContentmenuLabel(), onCloseDraggableRectFixed(), 
+                drawBaseCanvas.value.updateLabels();
+                const {rects: rects, label_txt: label_txt} = formatLabelsType();
+                _emit("change", rects, label_txt), emit("change", rects, label_txt);
+            };
+            expose({
+                onCloseDraggableRectFixed: onCloseDraggableRectFixed,
+                onCloseContentmenuLabel: onCloseContentmenuLabel,
+                onSelectedLabel: (rect, index) => {
+                    onCloseDraggableRectFixed(), vue.nextTick((() => {
+                        const {startX: x, startY: y, type: type} = rect;
+                        updateDraggableRectFixed(x, y, rect, index, colors[type]);
+                    }));
+                },
+                onDeleteLabel: onDeleteLabel
+            });
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
+                loading: loadingImage.value,
+                class: [ ns.b("loading") ]
+            }, {
+                default: () => [ vue.createVNode("div", {
+                    ref: canvasMainRef,
+                    class: [ ns.b("canvas") ]
+                }, [ vue.createVNode("canvas", {
+                    ref: canvasBaseRef,
+                    class: [ ns.be("canvas", "context") ]
+                }, null), vue.createVNode("canvas", {
+                    ref: canvasRectRef,
+                    class: [ ns.be("canvas", "rect") ]
+                }, null), contextmenuLabelFixed.value.show ? vue.createVNode(ContextMenuLabel, {
+                    labelRect: contextmenuLabelRect.value,
+                    classes: props.classes,
+                    activateRect: contextmenuLabelFixed.value.activateRect,
+                    onClose: onCloseContentmenuLabel,
+                    onSelect: onSelectLabel,
+                    onDelete: onDeleteLabel
+                }, null) : null, draggableRectFixed.value.show ? vue.createVNode(DraggableRect, {
+                    parentEl: canvasMainRef.value,
+                    rect: draggableRectFixed.value.activateRect,
+                    color: draggableRectFixed.value.color,
+                    onDraggleResize: onDraggleRectResize,
+                    onContextmenu: onContextmenuDraggable
+                }, null) : null ]) ]
+            }) ]);
+        }
+    }), RightLabel = vue.defineComponent({
+        props: {
+            classes: {
+                type: Array,
+                default: () => []
+            },
+            labels: {
+                type: Array,
+                default: () => []
+            }
+        },
+        emits: [ "delete", "select" ],
+        setup(props, {emit: emit}) {
+            const {t: t} = useLocale(), ns = vue.inject("ns", {}), labels = vue.ref([]);
+            vue.watch((() => props.labels), (rects => {
+                const _rects = vue.toRaw(rects);
+                labels.value = (labels => labels.length ? labels.map((rect => {
+                    const typeName = props.classes[rect.type];
+                    return typeName && (rect.typeName = typeName), rect;
+                })) : [])(_rects);
+            }), {
+                deep: !0,
+                immediate: !0
+            });
+            const renderContent = () => vue.createVNode("div", {
+                class: [ ns.b("right") ]
+            }, [ labels.value.length ? vue.createVNode("ul", null, [ labels.value.map(((rect, index) => vue.createVNode("li", {
+                key: index,
+                onClick: () => ((rect, index) => {
+                    emit("select", rect, index);
+                })(rect, index)
+            }, [ vue.createVNode("div", null, [ vue.createVNode("span", {
+                style: {
+                    "background-color": colors[rect.type]
+                },
+                class: "label-line"
+            }, null), vue.createVNode("span", null, [ rect.typeName ]) ]), vue.createVNode(elementPlus.ElPopconfirm, {
+                title: t("next.labelimg.confirmDeleteLabel"),
+                width: 180,
+                onConfirm: () => (rect => {
+                    emit("delete", rect);
+                })(rect)
+            }, {
+                reference: () => vue.createVNode(elementPlus.ElIcon, {
+                    size: 16,
+                    color: "#ff0000",
+                    onClick: event => {
+                        event.preventDefault(), event.stopPropagation();
+                    }
+                }, {
+                    default: () => [ vue.createVNode(delete_default, null, null) ]
+                })
+            }) ]))) ]) : vue.createVNode(elementPlus.ElEmpty, {
+                "image-size": 120,
+                description: t("next.labelimg.emptyLabelText")
+            }, null) ]);
+            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
+        }
+    }), defaultConfig = {
+        mainContentHeight: 600
+    };
+    const ns$1 = useNamespace("labelimg");
+    var Element = vue.defineComponent({
+        name: "NextLabelimg",
+        props: {
+            className: {
+                type: String,
+                default: ""
+            },
+            style: {
+                type: Object,
+                default: () => ({
+                    position: "unset"
+                })
+            },
+            rowKey: {
+                type: String,
+                default: "id"
+            },
+            options: {
+                type: Object,
+                default: () => ({})
+            },
+            classes: {
+                type: Array,
+                default: () => []
+            },
+            data: {
+                type: Array,
+                default: () => []
+            }
+        },
+        emits: [ "change", "save", "prev-click", "next-click" ],
+        setup(props, {emit: emit, slots: slots, expose: expose}) {
+            const {t: t} = useLocale(), _config = deepClone(defaultConfig), _options = vue.computed((() => {
+                const cfg = vue.unref(props.options);
+                return merge$1(_config, cfg);
+            })), options = vue.unref(_options);
+            vue.provide("ns", ns$1), vue.provide("_emit", emit);
+            const activateNodeIndex = vue.ref(0), classes = vue.ref(props.classes), labelImages = vue.ref(deepClone(props.data));
+            vue.watch((() => props.data), (data => {
+                labelImages.value = deepClone(data);
+            }), {
+                deep: !0
+            }), vue.watch((() => props.data.length), (() => {
+                activateNodeIndex.value = 0;
+            })), vue.watch((() => props.classes), (val => {
+                classes.value = val;
+            }), {
+                deep: !0
+            });
+            const currentNode = vue.computed((() => {
+                if (!labelImages.value) return {};
+                const node = labelImages.value[activateNodeIndex.value] || {};
+                return deepClone(node);
+            })), activateNodeLabels = vue.ref(currentNode.value.labels || []);
+            vue.watch((() => currentNode.value), (() => {
+                activateNodeLabels.value = currentNode.value.labels || [];
+            }));
+            const onChangeNodeRect = rects => {
+                currentNode.value.labels = rects, activateNodeLabels.value = rects;
+            }, loading = vue.ref(!1), formatNodeLabels = () => {
+                const node = currentNode.value;
+                let yolo_label = [];
+                return node.labels.forEach((rect => {
+                    delete rect.typeName;
+                    const label_rect = convertToLabel(rect);
+                    yolo_label.push(label_rect.join(" "));
+                })), {
+                    node: node,
+                    label_txt: yolo_label.join("\n")
+                };
+            }, isChangeNodeLabels = () => isEqual(labelImages.value[activateNodeIndex.value].labels, currentNode.value.labels), 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));
+            }, onKeydownPrevNext = e => {
+                if (loading.value) return;
+                if (![ "KeyA", "KeyD" ].includes(e.code)) return;
+                loading.value = !0;
+                const {node: node, label_txt: label_txt} = formatNodeLabels();
+                if (canvasContextRef.value.onCloseDraggableRectFixed(), isChangeNodeLabels()) return switchKeydownAD(e), 
+                void (loading.value = !1);
+                emit("save", {
+                    node: node,
+                    label_txt: label_txt
+                }, (imageItem => {
+                    labelImages.value[activateNodeIndex.value] = imageItem || node, switchKeydownAD(e), 
+                    loading.value = !1;
+                }), (() => {
+                    loading.value = !1;
+                }));
+            }, onChangeActivateNode = index => {
+                if (loading.value) return;
+                loading.value = !0;
+                const {node: node, label_txt: label_txt} = formatNodeLabels();
+                if (canvasContextRef.value.onCloseDraggableRectFixed(), isChangeNodeLabels()) return activateNodeIndex.value = index, 
+                void (loading.value = !1);
+                emit("save", {
+                    node: node,
+                    label_txt: label_txt
+                }, (imageItem => {
+                    labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index, 
+                    loading.value = !1;
+                }), (() => {
+                    loading.value = !1;
+                }));
+            }, onPaginationPrev = () => {
+                const imageLength = labelImages.value.length;
+                let i = activateNodeIndex.value - 1;
+                i < 0 && (i = imageLength - 1), onChangeActivateNode(i), emit("prev-click");
+            }, onPaginationNext = () => {
+                const imageLength = labelImages.value.length;
+                let i = activateNodeIndex.value + 1;
+                i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
+            }, canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), mainContentHeight = vue.ref(options.mainContentHeight);
+            vue.onMounted((() => {
+                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value, (() => {
+                    vue.nextTick((() => {
+                        layoutLabelRef.value.style.position = "unset";
+                        const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
+                        mainContentHeight.value = contentHeight;
+                    }));
+                }));
+            })), vue.onUnmounted((() => {
+                document.removeEventListener("keydown", onKeydownPrevNext);
+            }));
+            const onSelectLabelNode = (rect, index) => {
+                canvasContextRef.value.onSelectedLabel(rect, index);
+            }, onDeleteLabelNode = rect => {
+                canvasContextRef.value.onDeleteLabel(rect);
+            };
+            expose({
+                convertToLabel: convertToLabel,
+                canvertToCanvas: canvertToCanvas
+            });
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
+                ref: layoutLabelRef,
+                class: [ ns$1.b(), props.className ],
+                style: {
+                    ...props.style
+                }
+            }, [ vue.createVNode(NextSpinLoading$1, {
+                loading: loading.value,
+                tip: t("next.labelimg.saveTxt"),
+                class: [ ns$1.b("loading") ]
+            }, {
+                default: () => [ vue.createVNode(elementPlus.ElScrollbar, null, {
+                    default: () => [ vue.createVNode("header", {
+                        ref: headerRef,
+                        class: [ ns$1.b("header") ]
+                    }, [ slots.header ? slots.header() : vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", null, null), vue.createVNode("ul", null, null) ]) ]), vue.createVNode("div", {
+                        ref: mainRef,
+                        class: [ ns$1.b("main") ],
+                        style: {
+                            height: mainContentHeight.value + "px"
+                        }
+                    }, [ vue.createVNode("div", {
+                        class: [ ns$1.be("main", "content") ]
+                    }, [ vue.createVNode(CanvasContext, {
+                        ref: canvasContextRef,
+                        contextClientHeight: mainContentHeight.value,
+                        classes: classes.value,
+                        rowInfo: currentNode.value,
+                        onChange: onChangeNodeRect
+                    }, null) ]), vue.createVNode(RightLabel, {
+                        classes: classes.value,
+                        labels: activateNodeLabels.value,
+                        onDelete: onDeleteLabelNode,
+                        onSelect: onSelectLabelNode
+                    }, null) ]), vue.createVNode("footer", {
+                        ref: footerRef,
+                        class: [ ns$1.b("footer") ]
+                    }, [ vue.createVNode("div", {
+                        class: [ ns$1.be("footer", "left") ]
+                    }, [ vue.createVNode(elementPlus.ElIcon, {
+                        size: 24,
+                        color: "#797979",
+                        onClick: onPaginationPrev
+                    }, {
+                        default: () => [ vue.createVNode(arrow_left_default, null, null) ]
+                    }) ]), vue.createVNode("div", {
+                        class: [ ns$1.be("footer", "center") ]
+                    }, [ vue.createVNode(elementPlus.ElScrollbar, null, {
+                        default: () => [ vue.createVNode("ul", {
+                            class: [ ns$1.bem("footer", "center", "list") ]
+                        }, [ labelImages.value.map(((item, index) => vue.createVNode("li", {
+                            key: index,
+                            onClick: () => onChangeActivateNode(index),
+                            class: {
+                                "is-activate": activateNodeIndex.value === index
+                            }
+                        }, [ vue.createVNode(elementPlus.ElImage, {
+                            style: "height: 100%",
+                            src: item.imageSrc,
+                            "zoom-rate": 1.2,
+                            "max-scale": 2,
+                            "min-scale": .2,
+                            fit: "cover"
+                        }, null) ]))) ]) ]
+                    }) ]), vue.createVNode("div", {
+                        class: [ ns$1.be("footer", "right") ]
+                    }, [ vue.createVNode(elementPlus.ElIcon, {
+                        size: 24,
+                        color: "#797979",
+                        onClick: onPaginationNext
+                    }, {
+                        default: () => [ vue.createVNode(arrow_right_default, null, null) ]
+                    }) ]) ]) ]
+                }) ]
+            }) ]) ]);
+        }
+    });
+    const ns = useNamespace("labelimg-preview");
+    var preview = vue.defineComponent({
+        name: "NextLabelimgPreview",
+        props: {
+            className: {
+                type: String,
+                default: ""
+            },
+            style: {
+                type: Object,
+                default: () => ({})
+            },
+            src: {
+                type: String,
+                default: ""
+            },
+            classes: {
+                type: Array,
+                default: () => []
+            },
+            labels: {
+                type: Array,
+                default: () => []
+            }
+        },
+        setup(props) {
+            const canvasBaseRef = vue.ref(), classes = vue.ref(deepClone(props.classes)), labels = vue.ref(deepClone(props.labels)), renderImageAndLabel = () => {
+                if (props.src) {
+                    const ctx = canvasBaseRef.value?.getContext("2d"), image = new Image;
+                    image.src = props.src, image.onload = () => {
+                        const {width: width, height: height} = image, canvasHeight = height, scaleFactor = canvasHeight / height, canvasWidth = Math.ceil(width * scaleFactor);
+                        ((canvasWidth, canvasHeight) => {
+                            canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight, 
+                            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];
+                            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];
+                                typeName && (rect.typeName = typeName);
+                            }
+                            if (isValueExist(rect.typeName) || isValueExist(rect.type)) {
+                                const text = rect.typeName || rect.type;
+                                ctx.fillStyle = color, ctx.fillText(text, startX + 6, startY + 6);
+                            }
+                            ctx.restore();
+                        }
+                    };
+                }
+            };
+            vue.onMounted((() => {
+                vue.watch((() => props.src), (() => {
+                    renderImageAndLabel();
+                }), {
+                    immediate: !0
+                });
+            }));
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
+                class: [ ns.b(), props.className ],
+                style: {
+                    ...props.style
+                }
+            }, [ vue.createVNode("canvas", {
+                ref: canvasBaseRef
+            }, null) ]) ]);
+        }
+    });
+    const NextLabelimg = withInstall(Element), NextLabelimgPreview = withInstall(preview);
     var components = Object.freeze({
         __proto__: null,
         NextContainer: NextContainer,
@@ -5628,6 +6571,8 @@
         NextDialog: NextDialog,
         NextDragResize: NextDragResize,
         NextForm: NextForm,
+        NextLabelimg: NextLabelimg,
+        NextLabelimgPreview: NextLabelimgPreview,
         NextLayout: NextLayout,
         NextMenu: NextMenu,
         NextSpinLoading: NextSpinLoading,
@@ -5678,11 +6623,12 @@
         })(app);
     };
     var index = {
-        version: "0.2.6",
+        version: "0.2.9",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
     exports.NextDialog = NextDialog, exports.NextDragResize = NextDragResize, exports.NextForm = NextForm, 
+    exports.NextLabelimg = NextLabelimg, exports.NextLabelimgPreview = NextLabelimgPreview, 
     exports.NextLayout = NextLayout, exports.NextMenu = NextMenu, exports.NextSpinLoading = NextSpinLoading, 
     exports.NextTabs = NextTabs, exports.NextTextEllipsis = NextTextEllipsis, exports.NextTreeSelect = NextTreeSelect, 
     exports.NextUpload = NextUpload, exports.NextVideoPlayer = NextVideoPlayer, exports.buildLocaleContext = buildLocaleContext, 
@@ -5723,7 +6669,7 @@
     }), exports.useGetDerivedNamespace = useGetDerivedNamespace, exports.useLanguage = (locale, lang) => {
         const localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
         localeRef.value.name = lang, localeRef.value.next = nextLang.next;
-    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.2.6", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.2.9", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });