next-element-vue 0.2.6 → 0.2.9

package/dist/index.js

@@ -2,14 +2,14 @@
 /**
  * 作　　者：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
  */
 
-import { getCurrentInstance, inject, ref, computed, unref, isRef, defineComponent, createVNode, Fragment, openBlock, createElementBlock, createElementVNode, reactive, createTextVNode, resolveComponent, Teleport, isVNode, onUnmounted, provide, watch, markRaw, watchEffect, h, onMounted, toRaw, render, nextTick } from "vue";
+import { getCurrentInstance, inject, ref, computed, unref, isRef, defineComponent, createVNode, Fragment, openBlock, createElementBlock, createElementVNode, reactive, createTextVNode, resolveComponent, Teleport, isVNode, onUnmounted, provide, watch, markRaw, watchEffect, h, onMounted, toRaw, render, nextTick, toRef } from "vue";
 
-import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollbar, ElDivider, ElColorPicker, ElSwitch, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElDrawer, ElMenuItem, ElSubMenu, ElMenu, ElContainer, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElInputNumber, ElForm, ElRow, ElButton, ElTable, ElTableColumn, ElCheckbox, ElMessageBox, ElPagination, ElDialog, ElTag, ElRadioGroup, ElRadio, ElUpload, ElImageViewer, ElImage, ElTreeSelect, ElTimeSelect, ElCheckboxGroup, ElEmpty } from "element-plus";
+import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollbar, ElDivider, ElColorPicker, ElSwitch, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElDrawer, ElMenuItem, ElSubMenu, ElMenu, ElContainer, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElInputNumber, ElForm, ElRow, ElButton, ElTable, ElTableColumn, ElCheckbox, ElMessageBox, ElPagination, ElDialog, ElTag, ElRadioGroup, ElRadio, ElUpload, ElImageViewer, ElImage, ElTreeSelect, ElTimeSelect, ElCheckboxGroup, ElEmpty, ElPopconfirm } from "element-plus";
 
 import { useDateFormat, useNow, useFullscreen } from "@vueuse/core";
 
@@ -887,6 +887,11 @@ var merge = createAssigner((function(object, source, srcIndex) {
             tabsRight: "关闭右侧",
             tabsAll: "关闭全部",
             systemSetting: "系统配置"
+        },
+        labelimg: {
+            saveTxt: "保存中...",
+            emptyLabelText: "暂无标签数据",
+            confirmDeleteLabel: "确定要删除该标注吗？"
         }
     }
 }, enLocale = {
@@ -956,6 +961,11 @@ var merge = createAssigner((function(object, source, srcIndex) {
             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 = {
@@ -1025,6 +1035,11 @@ var merge = createAssigner((function(object, source, srcIndex) {
             tabsRight: "關閉右側",
             tabsAll: "關閉全部",
             systemSetting: "系統配置"
+        },
+        labelimg: {
+            saveTxt: "保存中...",
+            emptyLabelText: "暂无标签数据",
+            confirmDeleteLabel: "确定要删除该标注吗？"
         }
     }
 };
@@ -1190,7 +1205,7 @@ const {getLightColor: getLightColor$4} = useChangeColor(), nextUseCssVar = (cssv
     return main;
 }, slots_config_headerMenu = "header-menu", slots_config_headerToolsPrefix = "header-tools-prefix", slots_config_headerToolsSuffix = "header-tools-suffix";
 
-var defaultConfig$3 = {
+var defaultConfig$4 = {
     logo: "",
     title: "Next Element Vue",
     userName: "Admin",
@@ -1235,7 +1250,7 @@ var defaultConfig$3 = {
     }
 };
 
-const ns$i = useNamespace("text-ellipsis");
+const ns$k = useNamespace("text-ellipsis");
 
 const NextTextEllipsis = withInstall(defineComponent({
     name: "NextTextEllipsis",
@@ -1282,7 +1297,7 @@ const NextTextEllipsis = withInstall(defineComponent({
             }
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$i.b(), props.class ],
+            class: [ ns$k.b(), props.class ],
             style: setWidth.value,
             onMouseenter: onMouseenter
         }, [ isTip.value ? createVNode(ElTooltip, {
@@ -1292,11 +1307,11 @@ const NextTextEllipsis = withInstall(defineComponent({
             disabled: props.disabled
         }, {
             default: () => [ createVNode("span", {
-                class: ns$i.e("text"),
+                class: ns$k.e("text"),
                 ref: ellipsisRef
             }, [ slots.default ? slots.default() : props.content ]) ]
         }) : createVNode("span", {
-            class: ns$i.e("text"),
+            class: ns$k.e("text"),
             ref: ellipsisRef
         }, [ slots.default ? slots.default() : props.content ]) ]) ]);
     }
@@ -1333,7 +1348,31 @@ var LogoView = defineComponent({
 
 var arrow_down_default = export_helper_default(arrow_down_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), 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 = [ 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 openBlock(), 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 = [ 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 openBlock(), 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",
@@ -2644,7 +2683,7 @@ const NextMenuItem = defineComponent({
             }, null) ]
         }))) ]) ]);
     }
-}), ns$h = useNamespace("menu");
+}), ns$j = useNamespace("menu");
 
 const NextMenu = withInstall(defineComponent({
     name: "NextMenu",
@@ -2672,13 +2711,13 @@ const NextMenu = withInstall(defineComponent({
         }
     },
     setup(props) {
-        provide("ns", ns$h);
+        provide("ns", ns$j);
         const router = getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, activePath = ref(currentPath);
         watch((() => router.currentRoute?.value), (to => {
             activePath.value = to.fullPath;
         }));
         return () => createVNode(Fragment, null, [ createVNode(ElMenu, {
-            class: [ ns$h.b(), props.className ],
+            class: [ ns$j.b(), props.className ],
             style: props.style,
             defaultActive: activePath.value,
             router: props.router,
@@ -2686,7 +2725,7 @@ const NextMenu = withInstall(defineComponent({
             ellipsis: !0
         }, {
             default: () => [ createVNode(Fragment, null, [ props.menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
-                "popper-class": ns$h.b("popper"),
+                "popper-class": ns$j.b("popper"),
                 index: item.path || item.id,
                 teleported: !0
             }, {
@@ -2697,7 +2736,7 @@ const NextMenu = withInstall(defineComponent({
                     menuData: item.children
                 }, null)
             }) : valueExist(item.meta?.isHide, !1) ? null : createVNode(ElMenuItem, {
-                "popper-class": ns$h.b("popper"),
+                "popper-class": ns$j.b("popper"),
                 index: item.path
             }, {
                 default: () => [ createVNode(MenuItemTitle, {
@@ -2725,20 +2764,20 @@ var Sidebar$2 = defineComponent({
     }
 });
 
-const ns$g = useNamespace("layout-defaults");
+const ns$i = useNamespace("layout-defaults");
 
 var defaults = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$g), {}),
+    setup: () => (provide("ns", ns$i), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
         slots.menu;
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(ElContainer, {
-            class: ns$g.b()
+            class: ns$i.b()
         }, {
             default: () => [ createVNode(Sidebar$2, null, null), createVNode("div", {
-                class: [ ns$g.b("content") ]
+                class: [ ns$i.b("content") ]
             }, [ createVNode(Header$3, null, null), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
                 tabs: _config.tabs,
                 activeTab: _config.activeTab,
@@ -2746,7 +2785,7 @@ var defaults = defineComponent({
                 onSelect: (...arg) => _emit("tabsSelect", ...arg),
                 onClose: (...arg) => _emit("tabsClose", ...arg)
             }, null) : null, createVNode("main", {
-                class: [ ns$g.bf("main"), ns$g.is("layout-tabs", isTabs.value) ]
+                class: [ ns$i.bf("main"), ns$i.is("layout-tabs", isTabs.value) ]
             }, [ slots.default?.() ]) ]) ]
         });
     }
@@ -2779,11 +2818,11 @@ var Header$2 = defineComponent({
     }
 });
 
-const ns$f = useNamespace("layout-transverse");
+const ns$h = useNamespace("layout-transverse");
 
 var transverse = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$f), {}),
+    setup: () => (provide("ns", ns$h), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2800,7 +2839,7 @@ var transverse = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, 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;
     }
@@ -2842,11 +2881,11 @@ var Header$1 = defineComponent({
     }
 });
 
-const ns$e = useNamespace("layout-columns");
+const ns$g = useNamespace("layout-columns");
 
 var columns = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$e), {}),
+    setup: () => (provide("ns", ns$g), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2854,11 +2893,11 @@ var columns = defineComponent({
         slots[slots_config_headerToolsSuffix] && (__slots_header[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(ElContainer, {
-            class: ns$e.b()
+            class: ns$g.b()
         }, {
             default: () => {
                 return [ createVNode(Sidebar$1, null, null), createVNode("div", {
-                    class: [ ns$e.b("content") ]
+                    class: [ ns$g.b("content") ]
                 }, [ createVNode(Header$1, null, (s = __slots_header, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header : {
                     default: () => [ __slots_header ]
                 })), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
@@ -2868,7 +2907,7 @@ var columns = defineComponent({
                     onSelect: (...arg) => _emit("tabsSelect", ...arg),
                     onClose: (...arg) => _emit("tabsClose", ...arg)
                 }, null) : null, 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;
             }
@@ -2914,21 +2953,21 @@ var Header = defineComponent({
     }
 });
 
-const ns$d = useNamespace("layout-classic");
+const ns$f = useNamespace("layout-classic");
 
 var classic = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$d), {
-        ns: ns$d
+    setup: () => (provide("ns", ns$f), {
+        ns: ns$f
     }),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
         slots.menu;
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(Fragment, null, [ createVNode(Header, null, null), createVNode("div", {
-            class: [ ns$d.b("content"), ns$d.is("layout-tabs", isTabs.value) ]
+            class: [ ns$f.b("content"), ns$f.is("layout-tabs", isTabs.value) ]
         }, [ createVNode(Sidebar, null, null), createVNode("div", {
-            class: ns$d.b("container")
+            class: ns$f.b("container")
         }, [ _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
             tabs: _config.tabs,
             activeTab: _config.activeTab,
@@ -2936,12 +2975,12 @@ var classic = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, 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: markRaw(defaults),
     transverse: markRaw(transverse),
     columns: markRaw(columns),
@@ -2968,8 +3007,8 @@ const NextLayout = withInstall(defineComponent({
     },
     emits: [ "changeLanguage", "changeUserDropdown", "changeOptions", "tabsChange", "tabsSelect", "tabsClose" ],
     setup(props, {slots: slots, emit: emit}) {
-        const _config = ref(mergeWith(defaultConfig$3, props.options, customizerCoverArray));
-        provide("options", _config.value), provide("__ns__", ns$c), provide("__emit__", emit), 
+        const _config = ref(mergeWith(defaultConfig$4, props.options, customizerCoverArray));
+        provide("options", _config.value), provide("__ns__", ns$e), provide("__emit__", emit), 
         provide("__slots__", slots);
         const updateOptions = cfg => {
             _config.value = mergeWith(_config.value, cfg, customizerCoverArray), updateThemeColorCssVar(_config.value?.setting), 
@@ -2993,15 +3032,15 @@ const NextLayout = withInstall(defineComponent({
         const _activeSlots = {};
         for (const key in slots) Object.prototype.hasOwnProperty.call(slots, key) && (_activeSlots[key] = () => slots[key]?.());
         return createVNode("div", {
-            class: [ ns$c.b(), props.className ],
+            class: [ ns$e.b(), props.className ],
             style: props.style
         }, [ h(activeLayout.value, {}, {
             ..._activeSlots
         }) ]);
     }
-})), ns$b = useNamespace("tabs");
+})), ns$d = useNamespace("tabs");
 
-var Element$7 = defineComponent({
+var Element$8 = defineComponent({
     name: "NextTabs",
     props: {
         activeTab: {
@@ -3070,12 +3109,12 @@ var Element$7 = defineComponent({
             tabsView.value.push(activeRoute)), emit("change", activeIndex.value, tabsView.value, "add");
         }));
         const renderContent = () => createVNode("nav", {
-            class: ns$b.b()
+            class: ns$d.b()
         }, [ createVNode(ElScrollbar, null, {
             default: () => [ createVNode("ul", {
-                class: ns$b.b("list")
+                class: ns$d.b("list")
             }, [ tabsView.value.map(((tab, index) => tab ? 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)
             }, [ createVNode("i", {
                 class: [ "tab-icon", tab.meta?.icon ]
@@ -3106,11 +3145,11 @@ var Element$7 = defineComponent({
             onCommand: onChange
         }, {
             default: () => createVNode("span", {
-                class: ns$b.b("tab-more")
+                class: ns$d.b("tab-more")
             }, [ 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), 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: () => createVNode(ElDropdownMenu, null, {
                 default: () => [ createVNode(ElDropdownItem, {
@@ -3144,7 +3183,7 @@ var Element$7 = defineComponent({
     }
 });
 
-const NextTabs = withInstall(Element$7), ns$a = useNamespace("container");
+const NextTabs = withInstall(Element$8), ns$c = useNamespace("container");
 
 const NextContainer = withInstall(defineComponent({
     name: "NextContainer",
@@ -3183,22 +3222,26 @@ const NextContainer = withInstall(defineComponent({
             }), style;
         }));
         return () => props.scrollbar ? createVNode(ElScrollbar, {
-            class: [ ns$a.b(), props.className ],
+            class: [ ns$c.b(), props.className ],
             style: props.style
         }, {
             default: () => [ slots.default?.() ]
         }) : createVNode("div", {
-            class: [ ns$a.b(), props.className ],
+            class: [ ns$c.b(), props.className ],
             style: {
                 ...styles.value,
                 ...props.style
             }
         }, [ props.card ? 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,
@@ -3268,7 +3311,7 @@ var defaultPropsConfig = {
 
 const header_menu_slots_key = [ "menu-left-prefix", "menu-left-suffix", "menu-right-prefix", "menu-right-suffix" ], operation_column_slots_key = [ "operation-column-prefix", "operation-column-suffix" ];
 
-var defaultConfig$2 = {
+var defaultConfig$3 = {
     initLoadData: !0,
     defaultContentHeight: 300,
     fullscreenchangeContentHeight: !1,
@@ -3315,9 +3358,9 @@ var defaultConfig$2 = {
     formColumnMinWidth: 350
 };
 
-const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$9 = useNamespace("spin-loading");
+const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$b = useNamespace("spin-loading");
 
-var SpinLoading = defineComponent({
+var NextSpinLoading$1 = defineComponent({
     name: "NextSpinLoading",
     props: {
         className: {
@@ -3337,32 +3380,36 @@ var SpinLoading = defineComponent({
             default: ""
         }
     },
-    setup() {
-        const {t: t} = useLocale();
-        return {
-            t: t
+    setup(props, {expose: expose}) {
+        const {t: t} = useLocale(), elementInstance = 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 createVNode("div", {
-            class: [ ns$9.b(), props.className ],
+            ref: "elementInstance",
+            class: [ ns$b.b(), props.className ],
             style: props.style
-        }, [ props.loading ? createVNode("div", {
-            class: ns$9.b("mask")
+        }, [ slots.default?.(), props.loading ? createVNode("div", {
+            class: ns$b.b("mask")
         }, [ createVNode("span", {
-            class: ns$9.b("mask-dot")
+            class: ns$b.b("mask-dot")
         }, [ createVNode("i", {
-            class: ns$9.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$9.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$9.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$9.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null) ]), createVNode("span", {
-            class: ns$9.be("mask", "text")
-        }, [ loadingText ]) ]) : null, slots.default?.() ]);
+            class: ns$b.be("mask", "text")
+        }, [ loadingText ]) ]) : null ]);
     }
 }), SearchColumn = defineComponent({
     name: "SearchColumn",
@@ -4039,7 +4086,7 @@ var TableColumnOperations = defineComponent({
     }
 });
 
-const ns$8 = useNamespace("dialog");
+const ns$a = useNamespace("dialog");
 
 var NextDialog$1 = defineComponent({
     name: "NextDialog",
@@ -4105,7 +4152,7 @@ var NextDialog$1 = defineComponent({
         return () => createVNode(Fragment, null, [ createVNode(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,
@@ -4122,12 +4169,12 @@ var NextDialog$1 = defineComponent({
         }, {
             default: () => [ slots.default?.() ],
             header: ({close: close, titleId: titleId, titleClass: titleClass}) => createVNode("div", {
-                class: ns$8.b("header")
+                class: ns$a.b("header")
             }, [ createVNode("h4", {
                 id: titleId,
                 class: titleClass
             }, [ props.title ]), createVNode("div", {
-                class: ns$8.e("header-right")
+                class: ns$a.e("header-right")
             }, [ props.fullscreenBtn && createVNode("span", {
                 class: "icon-fullscreen",
                 onClick: () => isFullscreen.value = !isFullscreen.value
@@ -4161,7 +4208,7 @@ const tableSelectConfig = {
     operations: !1
 };
 
-var defaultConfig$1 = {
+var defaultConfig$2 = {
     size: "default",
     colSpan: 8,
     labelWidth: "6em",
@@ -4176,7 +4223,7 @@ var defaultConfig$1 = {
     resetText: null
 };
 
-const ns$7 = useNamespace("form");
+const ns$9 = useNamespace("form");
 
 var NumberRangePicker = defineComponent({
     name: "NumberRangePicker",
@@ -4216,7 +4263,7 @@ var NumberRangePicker = defineComponent({
         }));
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: numberRangeRef,
-            class: ns$7.e("number-range")
+            class: ns$9.e("number-range")
         }, [ createVNode(ElInputNumber, {
             modelValue: startNumber.value,
             "onUpdate:modelValue": $event => startNumber.value = $event,
@@ -4226,7 +4273,7 @@ var NumberRangePicker = defineComponent({
             disabled: disabled,
             onChange: onChangeStart
         }, null), createVNode("span", {
-            class: ns$7.em("number-range", "division")
+            class: ns$9.em("number-range", "division")
         }, [ t("next.date.rangeSeparator") ]), createVNode(ElInputNumber, {
             modelValue: endNumber.value,
             "onUpdate:modelValue": $event => endNumber.value = $event,
@@ -4245,7 +4292,7 @@ function _isSlot$3(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
+const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
     name: "InputTableSelect",
     props: {
         modelValue: {
@@ -4273,7 +4320,7 @@ const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
     },
     emits: [ "select" ],
     setup(props, {emit: emit}) {
-        const {t: t} = useLocale(), _disabled = props.disabled, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$2), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = reactive({
+        const {t: t} = useLocale(), _disabled = props.disabled, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$3), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = reactive({
             visible: !1,
             title: _column.label + t("next.form.tableSelect"),
             dialogWidth: _options.dialogWidth
@@ -4344,18 +4391,18 @@ const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
         }, renderContent = () => {
             let _slot, _slot2;
             return createVNode(Fragment, null, [ 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) ]
             }, [ createVNode("div", {
                 class: "el-input__wrapper"
             }, [ tags?.value.length ? createVNode("span", {
-                class: ns$6.em("input-table", "value")
+                class: ns$8.em("input-table", "value")
             }, [ tags.value.map(((tag, index) => createVNode(ElTag, {
                 closable: !_disabled,
                 onClose: () => _onCloseTag(0, index)
             }, {
                 default: () => [ tag.label ]
             }))), tagsMore?.value?.length ? createVNode(ElTooltip, {
-                "popper-class": ns$6.e("tooltip-tags"),
+                "popper-class": ns$8.e("tooltip-tags"),
                 placement: "bottom",
                 effect: "light"
             }, {
@@ -4369,10 +4416,10 @@ const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
                     default: () => [ tag.label ]
                 })))
             }) : null ]) : createVNode("span", {
-                class: ns$6.em("input-table", "placeholder")
+                class: ns$8.em("input-table", "placeholder")
             }, [ _placeholder ]) ]), createVNode(ElButton, {
                 type: "primary",
-                class: ns$6.em("input-table", "append"),
+                class: ns$8.em("input-table", "append"),
                 disabled: _disabled,
                 icon: search_default,
                 onClick: onClickTableDialog
@@ -4386,7 +4433,7 @@ const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
                 onClose: onCloseTableDialog
             }, {
                 default: () => [ createVNode("div", {
-                    class: ns$6.em("input-table", "content")
+                    class: ns$8.em("input-table", "content")
                 }, [ createVNode(ElRadioGroup, {
                     modelValue: sinleSelection.value
                 }, {
@@ -4409,7 +4456,7 @@ const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
                         }) ]
                     }) ]
                 }) ]), createVNode("div", {
-                    class: ns$6.em("input-table", "footer")
+                    class: ns$8.em("input-table", "footer")
                 }, [ createVNode(ElButton, {
                     onClick: onResetTableSelect
                 }, _isSlot$3(_slot = t("next.form.reset")) ? _slot : {
@@ -4425,7 +4472,7 @@ const ns$6 = useNamespace("form"), InputTableSelect = defineComponent({
         };
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
-}), ns$5 = useNamespace("form");
+}), ns$7 = useNamespace("form");
 
 var UploadImage = defineComponent({
     name: "UploadImage",
@@ -4474,7 +4521,7 @@ var UploadImage = defineComponent({
             let urls = [];
             return "string" == typeof value ? urls = [ value ] : "[object Array]" === Object.prototype.toString.call(value) && (urls = value), 
             urls = urls.filter((url => !!url)), urls.length ? createVNode(ElImage, {
-                class: ns$5.e("preview-image"),
+                class: ns$7.e("preview-image"),
                 src: urls[0],
                 previewSrcList: urls,
                 "preview-teleported": !0,
@@ -4489,7 +4536,7 @@ var UploadImage = defineComponent({
                 })
             }) : null;
         })(), _disabled ? null : createVNode(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,
@@ -4615,9 +4662,9 @@ var UploadImage = defineComponent({
     }
 });
 
-const ns$4 = useNamespace("form");
+const ns$6 = useNamespace("form");
 
-var Element$5 = defineComponent({
+var Element$6 = defineComponent({
     name: "NextForm",
     props: {
         options: {
@@ -4635,7 +4682,7 @@ var Element$5 = defineComponent({
     },
     emits: [ "submit", "close", "reset" ],
     setup(props, {slots: slots, emit: emit, expose: expose}) {
-        const _config = deepClone(defaultConfig$1), options = reactive(merge$1(_config, props.options)), _isEditing = computed((() => "boolean" != typeof options.isEditing || options.isEditing)), {t: t} = useLocale(), colSpan = ref(options.colSpan), formDatum = reactive(props.formDatum) || {}, formParams = reactive(merge$1({}, formDatum)), _formColumns = ref([]), formRules = reactive({});
+        const _config = deepClone(defaultConfig$2), options = reactive(merge$1(_config, props.options)), _isEditing = computed((() => "boolean" != typeof options.isEditing || options.isEditing)), {t: t} = useLocale(), colSpan = ref(options.colSpan), formDatum = reactive(props.formDatum) || {}, formParams = reactive(merge$1({}, formDatum)), _formColumns = ref([]), formRules = reactive({});
         watch((() => [ props.columns, props.formDatum ]), (() => {
             (() => {
                 const columns = props.columns;
@@ -4979,7 +5026,7 @@ var Element$5 = defineComponent({
             let _slot;
             return createVNode(ElForm, {
                 ref: ruleFormRef,
-                class: ns$4.b(),
+                class: ns$6.b(),
                 inline: !1,
                 model: formParams,
                 size: options.size
@@ -5000,7 +5047,7 @@ var Element$5 = defineComponent({
                         }, {
                             label: () => column.label ? createVNode(Fragment, null, [ createVNode(NextTextEllipsis, {
                                 content: t(column.label),
-                                class: ns$4.e("item-label")
+                                class: ns$6.e("item-label")
                             }, null), column.tip ? createVNode(ElTooltip, {
                                 effect: "dark",
                                 content: column.tip,
@@ -5020,7 +5067,7 @@ var Element$5 = defineComponent({
                     }))), "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? _slot : {
                         default: () => [ _slot ]
                     })), _isEditing.value && options.showFooter ? createVNode("div", {
-                        class: ns$4.e("footer")
+                        class: ns$6.e("footer")
                     }, [ createVNode(ElButton, {
                         type: "primary",
                         loading: submitLoading.value,
@@ -5040,7 +5087,7 @@ var Element$5 = defineComponent({
     }
 });
 
-const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$5);
+const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$6);
 
 var AddEditForm = defineComponent({
     name: "AddEditForm",
@@ -5097,18 +5144,18 @@ function _isSlot(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$3 = useNamespace("crud-table");
+const ns$5 = useNamespace("crud-table");
 
-var Element$4 = defineComponent({
+var Element$5 = 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 = computed((() => {
+        const _config = deepClone(defaultConfig$3), _options = computed((() => {
             const cfg = unref(props.options);
             return merge$1(_config, cfg);
         })), options = unref(_options);
-        provide("options", computed((() => _options.value))), provide("ns", ns$3);
+        provide("options", computed((() => _options.value))), provide("ns", ns$5);
         const {t: t} = useLocale(), _columns = ref(options.columns), _searchColumns = ref([]), _formColumns = ref([]), _updateColumnsAll = ops => {
             ((options, cb) => {
                 const _columns = reactive(options.columns), _loadDicData = col => {
@@ -5230,7 +5277,7 @@ var Element$4 = defineComponent({
             return params;
         })()), onConfirmSearch = searchParams => {
             const params = deepClone(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");
@@ -5349,11 +5396,11 @@ var Element$4 = defineComponent({
         });
         return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("div", {
             ref: crudTableRef,
-            class: [ ns$3.b(), props.className ],
+            class: [ ns$5.b(), props.className ],
             style: props.style
         }, [ options.showSearchForm || options.showHeaderMenu ? createVNode("header", {
             ref: headerRef,
-            class: ns$3.b("header")
+            class: ns$5.b("header")
         }, [ options.showSearchForm && createVNode(HeaderSearch, {
             columns: _searchColumns.value,
             onZoomResize: updateTableContentHeight,
@@ -5367,12 +5414,12 @@ var Element$4 = defineComponent({
             onClickRefresh: onClickRefresh
         }, _isSlot(headerMenu_solts) ? headerMenu_solts : {
             default: () => [ headerMenu_solts ]
-        }), slots["table-head-tip"]?.() ]) : null, createVNode(SpinLoading, {
+        }), slots["table-head-tip"]?.() ]) : null, createVNode(NextSpinLoading$1, {
             loading: props.loading
         }, {
             default: () => [ createVNode("div", {
                 ref: tableRef,
-                class: ns$3.b("content")
+                class: ns$5.b("content")
             }, [ createVNode(ElTable, {
                 data: tableData.value,
                 height: tableContentHeight.value,
@@ -5435,7 +5482,7 @@ var Element$4 = defineComponent({
             }) ]) ]
         }), options.isPagination ? createVNode("div", {
             ref: footerRef,
-            class: ns$3.b("footer")
+            class: ns$5.b("footer")
         }, [ createVNode(FooterPagination, {
             page: props.page,
             onChange: onChangePagination
@@ -5462,7 +5509,7 @@ var Element$4 = defineComponent({
     }
 });
 
-const NextCrudTable = withInstall(Element$4);
+const NextCrudTable = withInstall(Element$5);
 
 var propsConfig = {
     className: {
@@ -5493,15 +5540,15 @@ var propsConfig = {
             total: 0
         })
     }
-}, defaultConfig = {};
+}, defaultConfig$1 = {};
 
-const ns$2 = useNamespace("crud-table-virtualized");
+const ns$4 = useNamespace("crud-table-virtualized");
 
 const NextCrudTableVirtualized = withInstall(defineComponent({
     name: "NextCrudTableVirtualized",
     props: propsConfig,
     setup(props, {emit: emit}) {
-        const _config = deepClone(defaultConfig), _options = computed((() => {
+        const _config = deepClone(defaultConfig$1), _options = computed((() => {
             const cfg = unref(props.options);
             return merge$1(_config, cfg);
         })), options = unref(_options);
@@ -5516,7 +5563,7 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
             emit("close-add-edit");
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$2.b(), props.className ]
+            class: [ ns$4.b(), props.className ]
         }, [ createVNode(NextSpinLoading, null, null), createVNode(NextDialog, {
             modelValue: addEditDialog.visible,
             "onUpdate:modelValue": $event => addEditDialog.visible = $event,
@@ -5527,7 +5574,7 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
             onClose: onCloseAddEditDialog
         }, null) ]) ]);
     }
-})), NextSpinLoading = withInstall(SpinLoading), ns$1 = useNamespace("upload");
+})), NextSpinLoading = withInstall(NextSpinLoading$1), ns$3 = useNamespace("upload");
 
 const NextUpload = withInstall(defineComponent({
     name: "NextUpload",
@@ -5562,7 +5609,7 @@ const NextUpload = withInstall(defineComponent({
         const slots = this.$slots, props = this.$props, emit = this.$emit, _t = this.t, uploadfilesPreview = ref([]), body = document.getElementsByTagName("body")[0];
         let previewImagesContainer = null;
         return createVNode(ElUpload, {
-            class: [ ns$1.b(), props.className ],
+            class: [ ns$3.b(), props.className ],
             style: props.style,
             "list-type": props.listType,
             "auto-upload": !1,
@@ -5600,9 +5647,9 @@ const NextUpload = withInstall(defineComponent({
             })
         });
     }
-})), ns = useNamespace("video-player");
+})), ns$2 = useNamespace("video-player");
 
-var Element$1 = defineComponent({
+var Element$2 = defineComponent({
     name: "NextVideoPlayer",
     props: {
         className: {
@@ -5675,7 +5722,7 @@ var Element$1 = defineComponent({
             if (!classNames || !classNames.length) throw new Error("模型类别不能未空！");
             container.innerHTML = "", tf.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;
@@ -5846,19 +5893,926 @@ var Element$1 = defineComponent({
         });
         return () => createVNode(Fragment, null, [ 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(defineComponent({
     name: "NextDragResize",
     props: {},
     setup: () => () => createVNode(Fragment, null, [ createVNode(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 = 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 = inject("ns", {}), onClose = () => {
+            emit("close");
+        }, onDelete = () => {
+            emit("delete", props.activateRect);
+        }, activateIndex = ref();
+        watch((() => props.activateRect), (() => {
+            const {type: type} = props.activateRect;
+            activateIndex.value = isValueExist(type) ? type : null;
+        }), {
+            deep: !0,
+            immediate: !0
+        });
+        const labelRectWidthHeight = ref({
+            width: 0,
+            height: 0
+        });
+        onMounted((() => {
+            const {clientWidth: clientWidth, clientHeight: clientHeight} = labelMenuRef.value;
+            labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
+        }));
+        const labelMenuRef = ref(), labelStyleFixed = computed((() => {
+            const {left: left, top: top, 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 = () => createVNode("div", {
+            ref: labelMenuRef,
+            class: [ ns.b("contextmenu-label") ],
+            style: labelStyleFixed.value
+        }, [ createVNode("div", {
+            class: "label-head"
+        }, [ createVNode("span", {
+            style: "padding-right: 30px"
+        }, [ createTextVNode("标签选择") ]), createVNode(ElIcon, {
+            size: 16,
+            onClick: onClose
+        }, {
+            default: () => [ createVNode(close_default, null, null) ]
+        }) ]), createVNode("ul", {
+            class: "label-main"
+        }, [ props.classes.map(((name, index) => createVNode("li", {
+            key: index,
+            onClick: () => (index => {
+                activateIndex.value = index, emit("select", index);
+            })(index),
+            class: {
+                "activate-label": activateIndex.value === index
+            }
+        }, [ createVNode("span", {
+            style: {
+                "background-color": colors[index % colors.length]
+            },
+            class: "label-line"
+        }, null), createVNode("span", null, [ name ]) ]))) ]), isValueExist(activateIndex.value) ? createVNode("div", {
+            style: "margin: 10px auto 0"
+        }, [ createVNode(ElButton, {
+            icon: delete_default,
+            plain: !0,
+            size: "small",
+            type: "danger",
+            onClick: onDelete
+        }, {
+            default: () => [ createTextVNode("删除标注框") ]
+        }) ]) : null ]);
+        return () => createVNode(Fragment, null, [ renderContent() ]);
+    }
+});
+
+const {hexToRgb: hexToRgb} = useChangeColor();
+
+var DraggableRect = 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 = ref(!1), isResizeCorner = ref({
+            topLeft: !1,
+            topCenter: !1,
+            topRight: !1,
+            leftCenter: !1,
+            rightCenter: !1,
+            bottomLeft: !1,
+            bottomCenter: !1,
+            bottomRight: !1
+        }), draggleOffset = ref({
+            diff_x: null,
+            diff_y: null
+        });
+        let parentRect = {};
+        const rect = 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 onMounted((() => {
+            parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
+            document.addEventListener("mouseup", onMouseup);
+        })), 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 = inject("ns", {}), props = this.$props;
+        return 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
+        }, [ createVNode("ul", {
+            class: [ _ns.be("draggable-rect", "resize") ]
+        }, [ createVNode("li", {
+            class: "top-left",
+            onMousedown: event => this.onMousedownDot(event, "topLeft")
+        }, null), createVNode("li", {
+            class: "top-center",
+            onMousedown: event => this.onMousedownDot(event, "topCenter")
+        }, null), createVNode("li", {
+            class: "top-right",
+            onMousedown: event => this.onMousedownDot(event, "topRight")
+        }, null), createVNode("li", {
+            class: "left-center",
+            onMousedown: event => this.onMousedownDot(event, "leftCenter")
+        }, null), createVNode("li", {
+            class: "right-center",
+            onMousedown: event => this.onMousedownDot(event, "rightCenter")
+        }, null), createVNode("li", {
+            class: "bottom-left",
+            onMousedown: event => this.onMousedownDot(event, "bottomLeft")
+        }, null), createVNode("li", {
+            class: "bottom-center",
+            onMousedown: event => this.onMousedownDot(event, "bottomCenter")
+        }, null), createVNode("li", {
+            class: "bottom-right",
+            onMousedown: event => this.onMousedownDot(event, "bottomRight")
+        }, null) ]) ]);
+    }
+}), CanvasContext = 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 = inject("ns", {}), _emit = inject("_emit", null), canvasMainRef = ref(), canvasBaseRef = ref(), canvasRectRef = ref(), labels = ref([]), drawBaseCanvas = 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(" ")), toRaw(rect);
+                })),
+                label_txt: yolo_label.join("\n")
+            };
+        }, loadingImage = 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 && 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 && nextTick((() => {
+                    updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
+                }));
+            }));
+        };
+        onMounted((() => {
+            watch((() => props.rowInfo), (info => {
+                const rowInfo = toRaw(info);
+                renderImageLabel(rowInfo);
+            }), {
+                deep: !0,
+                immediate: !0
+            }), watch((() => props.contextClientHeight), (height => {
+                if (valueExist(height)) {
+                    canvasMainRef.value.style.height = height + "px";
+                    const rowInfo = toRaw(props.rowInfo);
+                    renderImageLabel(rowInfo);
+                }
+            }));
+        }));
+        const contextmenuLabelFixed = 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 = computed((() => {
+            const {top: top, left: left, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = contextmenuLabelFixed.value;
+            return {
+                top: top,
+                left: left,
+                canvasWidth: canvasWidth,
+                canvasHeight: canvasHeight
+            };
+        })), draggableRectFixed = 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(), nextTick((() => {
+                updateContextmenuLabelFixed(x, y, rect);
+            }));
+        }, activate_add_label = ref(), onSelectLabel = type => {
+            activate_add_label.value.type = type;
+            const typeName = props.classes[type];
+            typeName && (activate_add_label.value.typeName = typeName);
+            const i = labels.value.findIndex((o => isEqual(o, activate_add_label.value)));
+            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(), nextTick((() => {
+                    const {startX: x, startY: y, type: type} = rect;
+                    updateDraggableRectFixed(x, y, rect, index, colors[type]);
+                }));
+            },
+            onDeleteLabel: onDeleteLabel
+        });
+        return () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
+            loading: loadingImage.value,
+            class: [ ns.b("loading") ]
+        }, {
+            default: () => [ createVNode("div", {
+                ref: canvasMainRef,
+                class: [ ns.b("canvas") ]
+            }, [ createVNode("canvas", {
+                ref: canvasBaseRef,
+                class: [ ns.be("canvas", "context") ]
+            }, null), createVNode("canvas", {
+                ref: canvasRectRef,
+                class: [ ns.be("canvas", "rect") ]
+            }, null), contextmenuLabelFixed.value.show ? createVNode(ContextMenuLabel, {
+                labelRect: contextmenuLabelRect.value,
+                classes: props.classes,
+                activateRect: contextmenuLabelFixed.value.activateRect,
+                onClose: onCloseContentmenuLabel,
+                onSelect: onSelectLabel,
+                onDelete: onDeleteLabel
+            }, null) : null, draggableRectFixed.value.show ? createVNode(DraggableRect, {
+                parentEl: canvasMainRef.value,
+                rect: draggableRectFixed.value.activateRect,
+                color: draggableRectFixed.value.color,
+                onDraggleResize: onDraggleRectResize,
+                onContextmenu: onContextmenuDraggable
+            }, null) : null ]) ]
+        }) ]);
+    }
+}), RightLabel = defineComponent({
+    props: {
+        classes: {
+            type: Array,
+            default: () => []
+        },
+        labels: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: [ "delete", "select" ],
+    setup(props, {emit: emit}) {
+        const {t: t} = useLocale(), ns = inject("ns", {}), labels = ref([]);
+        watch((() => props.labels), (rects => {
+            const _rects = 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 = () => createVNode("div", {
+            class: [ ns.b("right") ]
+        }, [ labels.value.length ? createVNode("ul", null, [ labels.value.map(((rect, index) => createVNode("li", {
+            key: index,
+            onClick: () => ((rect, index) => {
+                emit("select", rect, index);
+            })(rect, index)
+        }, [ createVNode("div", null, [ createVNode("span", {
+            style: {
+                "background-color": colors[rect.type]
+            },
+            class: "label-line"
+        }, null), createVNode("span", null, [ rect.typeName ]) ]), createVNode(ElPopconfirm, {
+            title: t("next.labelimg.confirmDeleteLabel"),
+            width: 180,
+            onConfirm: () => (rect => {
+                emit("delete", rect);
+            })(rect)
+        }, {
+            reference: () => createVNode(ElIcon, {
+                size: 16,
+                color: "#ff0000",
+                onClick: event => {
+                    event.preventDefault(), event.stopPropagation();
+                }
+            }, {
+                default: () => [ createVNode(delete_default, null, null) ]
+            })
+        }) ]))) ]) : createVNode(ElEmpty, {
+            "image-size": 120,
+            description: t("next.labelimg.emptyLabelText")
+        }, null) ]);
+        return () => createVNode(Fragment, null, [ renderContent() ]);
+    }
+}), defaultConfig = {
+    mainContentHeight: 600
+};
+
+const ns$1 = useNamespace("labelimg");
+
+var Element = 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 = computed((() => {
+            const cfg = unref(props.options);
+            return merge$1(_config, cfg);
+        })), options = unref(_options);
+        provide("ns", ns$1), provide("_emit", emit);
+        const activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
+        watch((() => props.data), (data => {
+            labelImages.value = deepClone(data);
+        }), {
+            deep: !0
+        }), watch((() => props.data.length), (() => {
+            activateNodeIndex.value = 0;
+        })), watch((() => props.classes), (val => {
+            classes.value = val;
+        }), {
+            deep: !0
+        });
+        const currentNode = computed((() => {
+            if (!labelImages.value) return {};
+            const node = labelImages.value[activateNodeIndex.value] || {};
+            return deepClone(node);
+        })), activateNodeLabels = ref(currentNode.value.labels || []);
+        watch((() => currentNode.value), (() => {
+            activateNodeLabels.value = currentNode.value.labels || [];
+        }));
+        const onChangeNodeRect = rects => {
+            currentNode.value.labels = rects, activateNodeLabels.value = rects;
+        }, loading = ref(!1), formatNodeLabels = () => {
+            const node = currentNode.value;
+            let yolo_label = [];
+            return node.labels.forEach((rect => {
+                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 = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), mainContentHeight = ref(options.mainContentHeight);
+        onMounted((() => {
+            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value, (() => {
+                nextTick((() => {
+                    layoutLabelRef.value.style.position = "unset";
+                    const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
+                    mainContentHeight.value = contentHeight;
+                }));
+            }));
+        })), 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 () => createVNode(Fragment, null, [ createVNode("div", {
+            ref: layoutLabelRef,
+            class: [ ns$1.b(), props.className ],
+            style: {
+                ...props.style
+            }
+        }, [ createVNode(NextSpinLoading$1, {
+            loading: loading.value,
+            tip: t("next.labelimg.saveTxt"),
+            class: [ ns$1.b("loading") ]
+        }, {
+            default: () => [ createVNode(ElScrollbar, null, {
+                default: () => [ createVNode("header", {
+                    ref: headerRef,
+                    class: [ ns$1.b("header") ]
+                }, [ slots.header ? slots.header() : createVNode(Fragment, null, [ createVNode("ul", null, null), createVNode("ul", null, null) ]) ]), createVNode("div", {
+                    ref: mainRef,
+                    class: [ ns$1.b("main") ],
+                    style: {
+                        height: mainContentHeight.value + "px"
+                    }
+                }, [ createVNode("div", {
+                    class: [ ns$1.be("main", "content") ]
+                }, [ createVNode(CanvasContext, {
+                    ref: canvasContextRef,
+                    contextClientHeight: mainContentHeight.value,
+                    classes: classes.value,
+                    rowInfo: currentNode.value,
+                    onChange: onChangeNodeRect
+                }, null) ]), createVNode(RightLabel, {
+                    classes: classes.value,
+                    labels: activateNodeLabels.value,
+                    onDelete: onDeleteLabelNode,
+                    onSelect: onSelectLabelNode
+                }, null) ]), createVNode("footer", {
+                    ref: footerRef,
+                    class: [ ns$1.b("footer") ]
+                }, [ createVNode("div", {
+                    class: [ ns$1.be("footer", "left") ]
+                }, [ createVNode(ElIcon, {
+                    size: 24,
+                    color: "#797979",
+                    onClick: onPaginationPrev
+                }, {
+                    default: () => [ createVNode(arrow_left_default, null, null) ]
+                }) ]), createVNode("div", {
+                    class: [ ns$1.be("footer", "center") ]
+                }, [ createVNode(ElScrollbar, null, {
+                    default: () => [ createVNode("ul", {
+                        class: [ ns$1.bem("footer", "center", "list") ]
+                    }, [ labelImages.value.map(((item, index) => createVNode("li", {
+                        key: index,
+                        onClick: () => onChangeActivateNode(index),
+                        class: {
+                            "is-activate": activateNodeIndex.value === index
+                        }
+                    }, [ createVNode(ElImage, {
+                        style: "height: 100%",
+                        src: item.imageSrc,
+                        "zoom-rate": 1.2,
+                        "max-scale": 2,
+                        "min-scale": .2,
+                        fit: "cover"
+                    }, null) ]))) ]) ]
+                }) ]), createVNode("div", {
+                    class: [ ns$1.be("footer", "right") ]
+                }, [ createVNode(ElIcon, {
+                    size: 24,
+                    color: "#797979",
+                    onClick: onPaginationNext
+                }, {
+                    default: () => [ createVNode(arrow_right_default, null, null) ]
+                }) ]) ]) ]
+            }) ]
+        }) ]) ]);
+    }
+});
+
+const ns = useNamespace("labelimg-preview");
+
+var preview = 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 = ref(), classes = ref(deepClone(props.classes)), labels = 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();
+                    }
+                };
+            }
+        };
+        onMounted((() => {
+            watch((() => props.src), (() => {
+                renderImageAndLabel();
+            }), {
+                immediate: !0
+            });
+        }));
+        return () => createVNode(Fragment, null, [ createVNode("div", {
+            class: [ ns.b(), props.className ],
+            style: {
+                ...props.style
+            }
+        }, [ createVNode("canvas", {
+            ref: canvasBaseRef
+        }, null) ]) ]);
+    }
+});
+
+const NextLabelimg = withInstall(Element), NextLabelimgPreview = withInstall(preview);
 
 var components = Object.freeze({
     __proto__: null,
@@ -5868,6 +6822,8 @@ var components = Object.freeze({
     NextDialog: NextDialog,
     NextDragResize: NextDragResize,
     NextForm: NextForm,
+    NextLabelimg: NextLabelimg,
+    NextLabelimgPreview: NextLabelimgPreview,
     NextLayout: NextLayout,
     NextMenu: NextMenu,
     NextSpinLoading: NextSpinLoading,
@@ -5910,7 +6866,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.2.6", install = function(app) {
+}, version = "0.2.9", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -5920,8 +6876,8 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.2.6",
+    version: "0.2.9",
     install: install
 };
 
-export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextLayout, NextMenu, NextSpinLoading, NextTabs, NextTextEllipsis, NextTreeSelect, NextUpload, NextVideoPlayer, buildLocaleContext, buildTranslator, index as default, defaultNamespace, install, localeContextKey, localeLang, namespaceContextKey, nextUseCssTheme, nextUseCssVar, translate, updateThemeColor, updateThemeColorCssVar, useDetectVideo, useGetDerivedNamespace, useLanguage, useLocale, useNamespace, version };
+export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextLabelimg, NextLabelimgPreview, NextLayout, NextMenu, NextSpinLoading, NextTabs, NextTextEllipsis, NextTreeSelect, NextUpload, NextVideoPlayer, buildLocaleContext, buildTranslator, index as default, defaultNamespace, install, localeContextKey, localeLang, namespaceContextKey, nextUseCssTheme, nextUseCssVar, translate, updateThemeColor, updateThemeColorCssVar, useDetectVideo, useGetDerivedNamespace, useLanguage, useLocale, useNamespace, version };