next-element-vue 0.2.8 → 0.3.0

package/dist/index.js

@@ -2,14 +2,14 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.2.8 v
- * 发布日期：2024-06-12
+ * 当前版本：0.3.0 v
+ * 发布日期：2024-06-16
  * 地　　址：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, 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";
 
@@ -854,7 +854,8 @@ var merge = createAssigner((function(object, source, srcIndex) {
                 cancelDelete: "取消删除操作",
                 confirmButtonText: "确 定",
                 cancelButtonText: "取 消"
-            }
+            },
+            uploadfileExceed: "上传文件数量超出限制范围"
         },
         form: {
             input: "请输入",
@@ -889,7 +890,9 @@ var merge = createAssigner((function(object, source, srcIndex) {
             systemSetting: "系统配置"
         },
         labelimg: {
-            saveTxt: "保存中..."
+            saveTxt: "保存中...",
+            emptyLabelText: "暂无标签数据",
+            confirmDeleteLabel: "确定要删除该标注吗？"
         }
     }
 }, enLocale = {
@@ -926,7 +929,8 @@ var merge = createAssigner((function(object, source, srcIndex) {
                 cancelDelete: "Cancel delete",
                 confirmButtonText: "OK",
                 cancelButtonText: "Cancel"
-            }
+            },
+            uploadfileExceed: "The number of uploaded files exceeds the limit"
         },
         form: {
             input: "please input ",
@@ -961,7 +965,9 @@ var merge = createAssigner((function(object, source, srcIndex) {
             systemSetting: "system setting"
         },
         labelimg: {
-            saveTxt: "saving..."
+            saveTxt: "saving...",
+            emptyLabelText: "No label data",
+            confirmDeleteLabel: "Are you sure you want to delete this annotation?"
         }
     }
 }, zhtwLocale = {
@@ -998,7 +1004,8 @@ var merge = createAssigner((function(object, source, srcIndex) {
                 cancelDelete: "取消删除操作",
                 confirmButtonText: "確 定",
                 cancelButtonText: "取 消"
-            }
+            },
+            uploadfileExceed: "上传文件数量超出限制范围"
         },
         form: {
             input: "請輸入",
@@ -1033,7 +1040,9 @@ var merge = createAssigner((function(object, source, srcIndex) {
             systemSetting: "系統配置"
         },
         labelimg: {
-            saveTxt: "保存中..."
+            saveTxt: "保存中...",
+            emptyLabelText: "暂无标签数据",
+            confirmDeleteLabel: "确定要删除该标注吗？"
         }
     }
 };
@@ -1199,7 +1208,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",
@@ -1244,7 +1253,7 @@ var defaultConfig$3 = {
     }
 };
 
-const ns$j = useNamespace("text-ellipsis");
+const ns$k = useNamespace("text-ellipsis");
 
 const NextTextEllipsis = withInstall(defineComponent({
     name: "NextTextEllipsis",
@@ -1291,7 +1300,7 @@ const NextTextEllipsis = withInstall(defineComponent({
             }
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$j.b(), props.class ],
+            class: [ ns$k.b(), props.class ],
             style: setWidth.value,
             onMouseenter: onMouseenter
         }, [ isTip.value ? createVNode(ElTooltip, {
@@ -1301,11 +1310,11 @@ const NextTextEllipsis = withInstall(defineComponent({
             disabled: props.disabled
         }, {
             default: () => [ createVNode("span", {
-                class: ns$j.e("text"),
+                class: ns$k.e("text"),
                 ref: ellipsisRef
             }, [ slots.default ? slots.default() : props.content ]) ]
         }) : createVNode("span", {
-            class: ns$j.e("text"),
+            class: ns$k.e("text"),
             ref: ellipsisRef
         }, [ slots.default ? slots.default() : props.content ]) ]) ]);
     }
@@ -2677,7 +2686,7 @@ const NextMenuItem = defineComponent({
             }, null) ]
         }))) ]) ]);
     }
-}), ns$i = useNamespace("menu");
+}), ns$j = useNamespace("menu");
 
 const NextMenu = withInstall(defineComponent({
     name: "NextMenu",
@@ -2705,13 +2714,13 @@ const NextMenu = withInstall(defineComponent({
         }
     },
     setup(props) {
-        provide("ns", ns$i);
+        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$i.b(), props.className ],
+            class: [ ns$j.b(), props.className ],
             style: props.style,
             defaultActive: activePath.value,
             router: props.router,
@@ -2719,7 +2728,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$i.b("popper"),
+                "popper-class": ns$j.b("popper"),
                 index: item.path || item.id,
                 teleported: !0
             }, {
@@ -2730,7 +2739,7 @@ const NextMenu = withInstall(defineComponent({
                     menuData: item.children
                 }, null)
             }) : valueExist(item.meta?.isHide, !1) ? null : createVNode(ElMenuItem, {
-                "popper-class": ns$i.b("popper"),
+                "popper-class": ns$j.b("popper"),
                 index: item.path
             }, {
                 default: () => [ createVNode(MenuItemTitle, {
@@ -2758,20 +2767,20 @@ var Sidebar$2 = defineComponent({
     }
 });
 
-const ns$h = useNamespace("layout-defaults");
+const ns$i = useNamespace("layout-defaults");
 
 var defaults = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$h), {}),
+    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$h.b()
+            class: ns$i.b()
         }, {
             default: () => [ createVNode(Sidebar$2, null, null), createVNode("div", {
-                class: [ ns$h.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,
@@ -2779,7 +2788,7 @@ var defaults = defineComponent({
                 onSelect: (...arg) => _emit("tabsSelect", ...arg),
                 onClose: (...arg) => _emit("tabsClose", ...arg)
             }, null) : null, createVNode("main", {
-                class: [ ns$h.bf("main"), ns$h.is("layout-tabs", isTabs.value) ]
+                class: [ ns$i.bf("main"), ns$i.is("layout-tabs", isTabs.value) ]
             }, [ slots.default?.() ]) ]) ]
         });
     }
@@ -2812,11 +2821,11 @@ var Header$2 = defineComponent({
     }
 });
 
-const ns$g = useNamespace("layout-transverse");
+const ns$h = useNamespace("layout-transverse");
 
 var transverse = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$g), {}),
+    setup: () => (provide("ns", ns$h), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2833,7 +2842,7 @@ var transverse = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, createVNode("main", {
-            class: [ ns$g.b("main"), ns$g.is("layout-tabs", isTabs.value) ]
+            class: [ ns$h.b("main"), ns$h.is("layout-tabs", isTabs.value) ]
         }, [ slots.default?.() ]) ]);
         var s;
     }
@@ -2875,11 +2884,11 @@ var Header$1 = defineComponent({
     }
 });
 
-const ns$f = useNamespace("layout-columns");
+const ns$g = useNamespace("layout-columns");
 
 var columns = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$f), {}),
+    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]()), 
@@ -2887,11 +2896,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$f.b()
+            class: ns$g.b()
         }, {
             default: () => {
                 return [ createVNode(Sidebar$1, null, null), createVNode("div", {
-                    class: [ ns$f.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, {
@@ -2901,7 +2910,7 @@ var columns = defineComponent({
                     onSelect: (...arg) => _emit("tabsSelect", ...arg),
                     onClose: (...arg) => _emit("tabsClose", ...arg)
                 }, null) : null, createVNode("main", {
-                    class: [ ns$f.bf("main"), ns$f.is("layout-tabs", isTabs.value) ]
+                    class: [ ns$g.bf("main"), ns$g.is("layout-tabs", isTabs.value) ]
                 }, [ slots.default?.() ]) ]) ];
                 var s;
             }
@@ -2947,21 +2956,21 @@ var Header = defineComponent({
     }
 });
 
-const ns$e = useNamespace("layout-classic");
+const ns$f = useNamespace("layout-classic");
 
 var classic = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$e), {
-        ns: ns$e
+    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$e.b("content"), ns$e.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$e.b("container")
+            class: ns$f.b("container")
         }, [ _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
             tabs: _config.tabs,
             activeTab: _config.activeTab,
@@ -2969,12 +2978,12 @@ var classic = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, createVNode("main", {
-            class: [ ns$e.b("main") ]
+            class: [ ns$f.b("main") ]
         }, [ slots.default?.() ]) ]) ]) ]);
     }
 });
 
-const ns$d = useNamespace("layout"), layouts = {
+const ns$e = useNamespace("layout"), layouts = {
     defaults: markRaw(defaults),
     transverse: markRaw(transverse),
     columns: markRaw(columns),
@@ -3001,8 +3010,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$d), 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), 
@@ -3026,13 +3035,13 @@ 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$d.b(), props.className ],
+            class: [ ns$e.b(), props.className ],
             style: props.style
         }, [ h(activeLayout.value, {}, {
             ..._activeSlots
         }) ]);
     }
-})), ns$c = useNamespace("tabs");
+})), ns$d = useNamespace("tabs");
 
 var Element$8 = defineComponent({
     name: "NextTabs",
@@ -3103,12 +3112,12 @@ var Element$8 = defineComponent({
             tabsView.value.push(activeRoute)), emit("change", activeIndex.value, tabsView.value, "add");
         }));
         const renderContent = () => createVNode("nav", {
-            class: ns$c.b()
+            class: ns$d.b()
         }, [ createVNode(ElScrollbar, null, {
             default: () => [ createVNode("ul", {
-                class: ns$c.b("list")
+                class: ns$d.b("list")
             }, [ tabsView.value.map(((tab, index) => tab ? createVNode("li", {
-                class: [ "tab-item", ns$c.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 ]
@@ -3139,11 +3148,11 @@ var Element$8 = defineComponent({
             onCommand: onChange
         }, {
             default: () => createVNode("span", {
-                class: ns$c.b("tab-more")
+                class: ns$d.b("tab-more")
             }, [ createVNode("i", {
-                class: [ ns$c.be("tab-more", "box"), ns$c.be("tab-more", "top") ]
+                class: [ ns$d.be("tab-more", "box"), ns$d.be("tab-more", "top") ]
             }, null), createVNode("i", {
-                class: [ ns$c.be("tab-more", "box"), ns$c.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, {
@@ -3177,7 +3186,7 @@ var Element$8 = defineComponent({
     }
 });
 
-const NextTabs = withInstall(Element$8), ns$b = useNamespace("container");
+const NextTabs = withInstall(Element$8), ns$c = useNamespace("container");
 
 const NextContainer = withInstall(defineComponent({
     name: "NextContainer",
@@ -3216,18 +3225,18 @@ const NextContainer = withInstall(defineComponent({
             }), style;
         }));
         return () => props.scrollbar ? createVNode(ElScrollbar, {
-            class: [ ns$b.b(), props.className ],
+            class: [ ns$c.b(), props.className ],
             style: props.style
         }, {
             default: () => [ slots.default?.() ]
         }) : createVNode("div", {
-            class: [ ns$b.b(), props.className ],
+            class: [ ns$c.b(), props.className ],
             style: {
                 ...styles.value,
                 ...props.style
             }
         }, [ props.card ? createVNode("div", {
-            class: ns$b.b("card")
+            class: ns$c.b("card")
         }, [ slots.default?.() ]) : slots.default?.() ]);
     }
 }));
@@ -3305,7 +3314,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,
@@ -3352,7 +3361,7 @@ var defaultConfig$2 = {
     formColumnMinWidth: 350
 };
 
-const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$a = useNamespace("spin-loading");
+const columnSlotName = prop => "column-" + prop, searchFormSlotName = prop => "search-" + prop, formSlotName = prop => "form-" + prop, ns$b = useNamespace("spin-loading");
 
 var NextSpinLoading$1 = defineComponent({
     name: "NextSpinLoading",
@@ -3374,31 +3383,35 @@ var NextSpinLoading$1 = 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$a.b(), props.className ],
+            ref: "elementInstance",
+            class: [ ns$b.b(), props.className ],
             style: props.style
         }, [ slots.default?.(), props.loading ? createVNode("div", {
-            class: ns$a.b("mask")
+            class: ns$b.b("mask")
         }, [ createVNode("span", {
-            class: ns$a.b("mask-dot")
+            class: ns$b.b("mask-dot")
         }, [ createVNode("i", {
-            class: ns$a.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$a.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$a.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null), createVNode("i", {
-            class: ns$a.be("mask", "dot-item")
+            class: ns$b.be("mask", "dot-item")
         }, null) ]), createVNode("span", {
-            class: ns$a.be("mask", "text")
+            class: ns$b.be("mask", "text")
         }, [ loadingText ]) ]) : null ]);
     }
 }), SearchColumn = defineComponent({
@@ -3813,8 +3826,11 @@ var HeaderSearch = defineComponent({
             class: ns.b("header-menu")
         }, [ createVNode("div", {
             class: ns.b("header-menu-left")
-        }, [ this.$slots["menu-left-prefix"]?.(), options.addBtn && createVNode(ElButton, {
+        }, [ this.$slots["menu-left-prefix"]?.({
+            size: options.size
+        }), options.addBtn && createVNode(ElButton, {
             type: "primary",
+            size: options.size,
             onClick: () => {
                 this.$emit("clickAdd");
             }
@@ -3825,6 +3841,7 @@ var HeaderSearch = defineComponent({
             default: () => t("next.table.add")
         }), options.batchDelBtn && createVNode(ElButton, {
             type: "danger",
+            size: options.size,
             disabled: !multipleSelectionLength.value,
             onClick: () => {
                 const selection = unref(toRaw(multipleSelection.value.map((row => toRaw(row)))));
@@ -3848,10 +3865,15 @@ var HeaderSearch = defineComponent({
                 default: () => [ createVNode(delete_default, null, null) ]
             }),
             default: () => t("next.table.batchDelete")
-        }), this.$slots["menu-left-suffix"]?.() ]), createVNode("div", {
+        }), this.$slots["menu-left-suffix"]?.({
+            size: options.size
+        }) ]), createVNode("div", {
             class: ns.b("header-menu-right")
-        }, [ this.$slots["menu-right-prefix"]?.(), options.refreshBtn && createVNode(ElButton, {
+        }, [ this.$slots["menu-right-prefix"]?.({
+            size: options.size
+        }), options.refreshBtn && createVNode(ElButton, {
             circle: !0,
+            size: options.size,
             onClick: () => {
                 this.$emit("clickRefresh");
             }
@@ -3861,6 +3883,7 @@ var HeaderSearch = defineComponent({
             })
         }), options.settingBtn && createVNode(ElButton, {
             circle: !0,
+            size: options.size,
             onClick: () => {
                 drawerSettingRef.value.visible = !0;
             }
@@ -3868,7 +3891,9 @@ var HeaderSearch = defineComponent({
             icon: () => createVNode(ElIcon, null, {
                 default: () => [ createVNode(tools_default, null, null) ]
             })
-        }), this.$slots["menu-right-suffix"]?.() ]), createVNode(DrawerSetting, {
+        }), this.$slots["menu-right-suffix"]?.({
+            size: options.size
+        }) ]), createVNode(DrawerSetting, {
             ref: drawerSettingRef
         }, null) ]);
     }
@@ -4076,7 +4101,7 @@ var TableColumnOperations = defineComponent({
     }
 });
 
-const ns$9 = useNamespace("dialog");
+const ns$a = useNamespace("dialog");
 
 var NextDialog$1 = defineComponent({
     name: "NextDialog",
@@ -4142,7 +4167,7 @@ var NextDialog$1 = defineComponent({
         return () => createVNode(Fragment, null, [ createVNode(ElDialog, {
             modelValue: visible.value,
             "onUpdate:modelValue": $event => visible.value = $event,
-            class: ns$9.b(),
+            class: ns$a.b(),
             title: props.title,
             appendToBody: props.appendToBody,
             "destroy-on-close": !0,
@@ -4159,12 +4184,12 @@ var NextDialog$1 = defineComponent({
         }, {
             default: () => [ slots.default?.() ],
             header: ({close: close, titleId: titleId, titleClass: titleClass}) => createVNode("div", {
-                class: ns$9.b("header")
+                class: ns$a.b("header")
             }, [ createVNode("h4", {
                 id: titleId,
                 class: titleClass
             }, [ props.title ]), createVNode("div", {
-                class: ns$9.e("header-right")
+                class: ns$a.e("header-right")
             }, [ props.fullscreenBtn && createVNode("span", {
                 class: "icon-fullscreen",
                 onClick: () => isFullscreen.value = !isFullscreen.value
@@ -4198,7 +4223,7 @@ const tableSelectConfig = {
     operations: !1
 };
 
-var defaultConfig$1 = {
+var defaultConfig$2 = {
     size: "default",
     colSpan: 8,
     labelWidth: "6em",
@@ -4213,7 +4238,7 @@ var defaultConfig$1 = {
     resetText: null
 };
 
-const ns$8 = useNamespace("form");
+const ns$9 = useNamespace("form");
 
 var NumberRangePicker = defineComponent({
     name: "NumberRangePicker",
@@ -4253,7 +4278,7 @@ var NumberRangePicker = defineComponent({
         }));
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: numberRangeRef,
-            class: ns$8.e("number-range")
+            class: ns$9.e("number-range")
         }, [ createVNode(ElInputNumber, {
             modelValue: startNumber.value,
             "onUpdate:modelValue": $event => startNumber.value = $event,
@@ -4263,7 +4288,7 @@ var NumberRangePicker = defineComponent({
             disabled: disabled,
             onChange: onChangeStart
         }, null), createVNode("span", {
-            class: ns$8.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,
@@ -4282,7 +4307,7 @@ function _isSlot$3(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$7 = useNamespace("form"), InputTableSelect = defineComponent({
+const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
     name: "InputTableSelect",
     props: {
         modelValue: {
@@ -4310,7 +4335,7 @@ const ns$7 = 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
@@ -4381,18 +4406,18 @@ const ns$7 = useNamespace("form"), InputTableSelect = defineComponent({
         }, renderContent = () => {
             let _slot, _slot2;
             return createVNode(Fragment, null, [ createVNode("div", {
-                class: [ "el-input", ns$7.e("input-table"), ns$7.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$7.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$7.e("tooltip-tags"),
+                "popper-class": ns$8.e("tooltip-tags"),
                 placement: "bottom",
                 effect: "light"
             }, {
@@ -4406,10 +4431,10 @@ const ns$7 = useNamespace("form"), InputTableSelect = defineComponent({
                     default: () => [ tag.label ]
                 })))
             }) : null ]) : createVNode("span", {
-                class: ns$7.em("input-table", "placeholder")
+                class: ns$8.em("input-table", "placeholder")
             }, [ _placeholder ]) ]), createVNode(ElButton, {
                 type: "primary",
-                class: ns$7.em("input-table", "append"),
+                class: ns$8.em("input-table", "append"),
                 disabled: _disabled,
                 icon: search_default,
                 onClick: onClickTableDialog
@@ -4423,7 +4448,7 @@ const ns$7 = useNamespace("form"), InputTableSelect = defineComponent({
                 onClose: onCloseTableDialog
             }, {
                 default: () => [ createVNode("div", {
-                    class: ns$7.em("input-table", "content")
+                    class: ns$8.em("input-table", "content")
                 }, [ createVNode(ElRadioGroup, {
                     modelValue: sinleSelection.value
                 }, {
@@ -4446,7 +4471,7 @@ const ns$7 = useNamespace("form"), InputTableSelect = defineComponent({
                         }) ]
                     }) ]
                 }) ]), createVNode("div", {
-                    class: ns$7.em("input-table", "footer")
+                    class: ns$8.em("input-table", "footer")
                 }, [ createVNode(ElButton, {
                     onClick: onResetTableSelect
                 }, _isSlot$3(_slot = t("next.form.reset")) ? _slot : {
@@ -4462,7 +4487,7 @@ const ns$7 = useNamespace("form"), InputTableSelect = defineComponent({
         };
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
-}), ns$6 = useNamespace("form");
+}), ns$7 = useNamespace("form");
 
 var UploadImage = defineComponent({
     name: "UploadImage",
@@ -4488,12 +4513,20 @@ var UploadImage = defineComponent({
             values: [ "text", "picture", "picture-card" ],
             default: "picture-card"
         },
+        multiple: {
+            type: Boolean,
+            default: !1
+        },
+        limit: {
+            type: Number,
+            default: 1
+        },
         accept: {
             type: String,
             default: "image/*"
         }
     },
-    emits: [ "change" ],
+    emits: [ "change", "exceed" ],
     setup(props) {
         const {appContext: appContext} = getCurrentInstance(), {t: t} = useLocale();
         return {
@@ -4511,7 +4544,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$6.e("preview-image"),
+                class: ns$7.e("preview-image"),
                 src: urls[0],
                 previewSrcList: urls,
                 "preview-teleported": !0,
@@ -4526,9 +4559,11 @@ var UploadImage = defineComponent({
                 })
             }) : null;
         })(), _disabled ? null : createVNode(ElUpload, {
-            class: [ ns$6.b("upload-image"), props.className ],
+            class: [ ns$7.b("upload-image"), props.className ],
             style: props.style,
             "list-type": props.listType,
+            multiple: props.multiple,
+            limit: props.limit,
             "auto-upload": !1,
             "on-preview": uploadFile => {
                 const body = document.getElementsByTagName("body")[0], initial = uploadfilesPreview.value.findIndex((file => file.url === uploadFile.url)) || 0;
@@ -4547,8 +4582,14 @@ var UploadImage = defineComponent({
                 });
                 previewImagesContainer.appContext = this.appContext, render(previewComponent, previewImagesContainer);
             },
-            onChange: (uploadfile, uploadfiles) => {
+            "on-change": (uploadfile, uploadfiles) => {
                 uploadfilesPreview.value = uploadfiles, emit("change", uploadfile, uploadfiles);
+            },
+            "on-exceed": (uploadfile, uploadfiles) => {
+                ElMessage({
+                    type: "info",
+                    message: _t("next.table.uploadfileExceed")
+                }), emit("exceed", uploadfile, uploadfiles);
             }
         }, {
             trigger: () => slots.default ? slots.default() : "picture-card" === props.listType ? createVNode(ElIcon, null, {
@@ -4652,7 +4693,11 @@ var UploadImage = defineComponent({
     }
 });
 
-const ns$5 = useNamespace("form");
+function _isSlot$2(s) {
+    return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
+}
+
+const ns$6 = useNamespace("form");
 
 var Element$6 = defineComponent({
     name: "NextForm",
@@ -4672,7 +4717,7 @@ var Element$6 = 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;
@@ -4695,17 +4740,17 @@ var Element$6 = defineComponent({
             deep: !0,
             immediate: !0
         });
-        const formColumns = arrayObjNoRepeat(_formColumns.value, "prop");
+        const formColumns = arrayObjNoRepeat(_formColumns.value, "prop"), spanResizeLoading = ref(!1);
         onMounted((() => {
             const formEl = ruleFormRef.value?.$el;
             let timer = null;
             elementResize(formEl, (el => {
-                null !== timer && clearTimeout(timer), timer = setTimeout((() => {
+                null !== timer ? clearTimeout(timer) : spanResizeLoading.value = !0, timer = setTimeout((() => {
                     colSpan.value = ((el, minWidth = 350) => {
                         const el_width = el.clientWidth;
                         let span = Math.floor(el_width / minWidth);
                         return span > 4 && (span = 4), Math.ceil(24 / span);
-                    })(el, options.columnMinWidth), clearTimeout(timer);
+                    })(el, options.columnMinWidth), spanResizeLoading.value = !1, clearTimeout(timer);
                 }), 200);
             }));
         }));
@@ -4996,7 +5041,10 @@ var Element$6 = defineComponent({
                 modelValue: formParams[col.prop],
                 "onUpdate:modelValue": $event => formParams[col.prop] = $event,
                 disabled: col.disabled,
-                onChange: (...arg) => col.onChange?.(...arg, col, formParams, formColumns)
+                multiple: col.multiple,
+                limit: col.limit,
+                onChange: (...arg) => col.onChange?.(...arg, col, formParams, formColumns),
+                onExceed: (...arg) => col.onExceed?.(...arg, col, formParams, formColumns)
             }, null) : "treeSelect" === col.type ? createVNode(treeSelect, {
                 modelValue: formParams[col.prop],
                 "onUpdate:modelValue": $event => formParams[col.prop] = $event,
@@ -5012,19 +5060,22 @@ var Element$6 = defineComponent({
             getFormInstance: () => ruleFormRef.value,
             getFormParams: () => toRaw(formParams)
         });
-        const renderContent = () => {
-            let _slot;
-            return createVNode(ElForm, {
-                ref: ruleFormRef,
-                class: ns$5.b(),
-                inline: !1,
-                model: formParams,
-                size: options.size
-            }, {
-                default: () => {
-                    return [ createVNode(ElRow, {
+        return () => {
+            let _slot2;
+            return createVNode(NextSpinLoading, {
+                loading: spanResizeLoading.value
+            }, _isSlot$2(_slot2 = (() => {
+                let _slot;
+                return createVNode(ElForm, {
+                    ref: ruleFormRef,
+                    class: ns$6.b(),
+                    inline: !1,
+                    model: formParams,
+                    size: options.size
+                }, {
+                    default: () => [ createVNode(ElRow, {
                         gutter: 20
-                    }, (s = _slot = formColumns.map((column => !column.hide && createVNode(ElCol, {
+                    }, _isSlot$2(_slot = formColumns.map((column => !column.hide && createVNode(ElCol, {
                         span: valueExist(column.span, colSpan.value)
                     }, {
                         default: () => [ createVNode(ElFormItem, {
@@ -5037,7 +5088,7 @@ var Element$6 = defineComponent({
                         }, {
                             label: () => column.label ? createVNode(Fragment, null, [ createVNode(NextTextEllipsis, {
                                 content: t(column.label),
-                                class: ns$5.e("item-label")
+                                class: ns$6.e("item-label")
                             }, null), column.tip ? createVNode(ElTooltip, {
                                 effect: "dark",
                                 content: column.tip,
@@ -5054,10 +5105,10 @@ var Element$6 = defineComponent({
                             }) : null ]) : null,
                             default: () => renderFormItem(column)
                         }) ]
-                    }))), "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? _slot : {
+                    })))) ? _slot : {
                         default: () => [ _slot ]
-                    })), _isEditing.value && options.showFooter ? createVNode("div", {
-                        class: ns$5.e("footer")
+                    }), _isEditing.value && options.showFooter ? createVNode("div", {
+                        class: ns$6.e("footer")
                     }, [ createVNode(ElButton, {
                         type: "primary",
                         loading: submitLoading.value,
@@ -5068,12 +5119,12 @@ var Element$6 = defineComponent({
                         onClick: onResetForm
                     }, {
                         default: () => [ t(options.resetText) || t("next.form.reset") ]
-                    }) : null ]) : null ];
-                    var s;
-                }
+                    }) : null ]) : null ]
+                });
+            })()) ? _slot2 : {
+                default: () => [ _slot2 ]
             });
         };
-        return () => createVNode(Fragment, null, [ renderContent() ]);
     }
 });
 
@@ -5134,18 +5185,18 @@ function _isSlot(s) {
     return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
 }
 
-const ns$4 = useNamespace("crud-table");
+const ns$5 = useNamespace("crud-table");
 
 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$4);
+        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 => {
@@ -5180,6 +5231,7 @@ var Element$5 = defineComponent({
                         rules: valueExist(col.formRules, col.rules, null),
                         span: valueExist(col.formSpan, col.span, null),
                         multiple: valueExist(col.formMultiple, col.multiple, !1),
+                        limit: valueExist(col.formLimit, col.limit, 1),
                         dicData: valueExist(col.formDicData, col.dicData, []),
                         loadDicData: valueExist(col.formLoadDicData, col.loadDicData, null),
                         onChange: valueExist(col.onChangeForm, col.onChange, null),
@@ -5386,11 +5438,11 @@ var Element$5 = defineComponent({
         });
         return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("div", {
             ref: crudTableRef,
-            class: [ ns$4.b(), props.className ],
+            class: [ ns$5.b(), props.className ],
             style: props.style
         }, [ options.showSearchForm || options.showHeaderMenu ? createVNode("header", {
             ref: headerRef,
-            class: ns$4.b("header")
+            class: ns$5.b("header")
         }, [ options.showSearchForm && createVNode(HeaderSearch, {
             columns: _searchColumns.value,
             onZoomResize: updateTableContentHeight,
@@ -5409,7 +5461,7 @@ var Element$5 = defineComponent({
         }, {
             default: () => [ createVNode("div", {
                 ref: tableRef,
-                class: ns$4.b("content")
+                class: ns$5.b("content")
             }, [ createVNode(ElTable, {
                 data: tableData.value,
                 height: tableContentHeight.value,
@@ -5472,7 +5524,7 @@ var Element$5 = defineComponent({
             }) ]) ]
         }), options.isPagination ? createVNode("div", {
             ref: footerRef,
-            class: ns$4.b("footer")
+            class: ns$5.b("footer")
         }, [ createVNode(FooterPagination, {
             page: props.page,
             onChange: onChangePagination
@@ -5530,15 +5582,15 @@ var propsConfig = {
             total: 0
         })
     }
-}, defaultConfig = {};
+}, defaultConfig$1 = {};
 
-const ns$3 = 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);
@@ -5553,7 +5605,7 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
             emit("close-add-edit");
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$3.b(), props.className ]
+            class: [ ns$4.b(), props.className ]
         }, [ createVNode(NextSpinLoading, null, null), createVNode(NextDialog, {
             modelValue: addEditDialog.visible,
             "onUpdate:modelValue": $event => addEditDialog.visible = $event,
@@ -5564,7 +5616,7 @@ const NextCrudTableVirtualized = withInstall(defineComponent({
             onClose: onCloseAddEditDialog
         }, null) ]) ]);
     }
-})), NextSpinLoading = withInstall(NextSpinLoading$1), ns$2 = useNamespace("upload");
+})), NextSpinLoading = withInstall(NextSpinLoading$1), ns$3 = useNamespace("upload");
 
 const NextUpload = withInstall(defineComponent({
     name: "NextUpload",
@@ -5599,7 +5651,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$2.b(), props.className ],
+            class: [ ns$3.b(), props.className ],
             style: props.style,
             "list-type": props.listType,
             "auto-upload": !1,
@@ -5637,7 +5689,7 @@ const NextUpload = withInstall(defineComponent({
             })
         });
     }
-})), ns$1 = useNamespace("video-player");
+})), ns$2 = useNamespace("video-player");
 
 var Element$2 = defineComponent({
     name: "NextVideoPlayer",
@@ -5712,7 +5764,7 @@ var Element$2 = defineComponent({
             if (!classNames || !classNames.length) throw new Error("模型类别不能未空！");
             container.innerHTML = "", tf.loadGraphModel(modelUrl).then((model => {
                 const canvas = document.createElement("canvas");
-                canvas.className = ns$1.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;
@@ -5883,7 +5935,7 @@ var Element$2 = defineComponent({
         });
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: videoBoxRef,
-            class: [ ns$1.b(), props.className ],
+            class: [ ns$2.b(), props.className ],
             style: props.style
         }, null) ]);
     }
@@ -5980,7 +6032,7 @@ var ContextMenuLabel = defineComponent({
             }
         }, [ createVNode("span", {
             style: {
-                "background-color": colors[index]
+                "background-color": colors[index % colors.length]
             },
             class: "label-line"
         }, null), createVNode("span", null, [ name ]) ]))) ]), isValueExist(activateIndex.value) ? createVNode("div", {
@@ -5996,7 +6048,11 @@ var ContextMenuLabel = defineComponent({
         }) ]) : null ]);
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
-}), DraggableRect = defineComponent({
+});
+
+const {hexToRgb: hexToRgb} = useChangeColor();
+
+var DraggableRect = defineComponent({
     props: {
         parentEl: {
             type: Object,
@@ -6005,6 +6061,10 @@ var ContextMenuLabel = defineComponent({
         rect: {
             type: Object,
             default: () => ({})
+        },
+        color: {
+            type: String,
+            default: null
         }
     },
     emits: [ "draggle-resize", "contextmenu" ],
@@ -6113,17 +6173,21 @@ var ContextMenuLabel = defineComponent({
         };
     },
     render() {
-        const _ns = inject("ns", {});
+        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;
-                return {
+                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,
@@ -6163,13 +6227,18 @@ var ContextMenuLabel = defineComponent({
             type: Array,
             default: () => []
         },
+        contextClientHeight: {
+            type: Number,
+            default: null
+        },
         rowInfo: {
             type: Object,
             default: () => ({})
         }
     },
-    setup(props) {
-        const ns = inject("ns", {}), _emit = inject("_emit", null), canvasMainRef = ref(), canvasBaseRef = ref(), canvasRectRef = ref(), formatLabelsType = () => {
+    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 {
@@ -6180,7 +6249,7 @@ var ContextMenuLabel = defineComponent({
                 })),
                 label_txt: yolo_label.join("\n")
             };
-        }, labels = ref([]), drawBaseCanvas = ref({}), renderImageLabel = rowInfo => {
+        }, 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;
@@ -6188,15 +6257,26 @@ var ContextMenuLabel = defineComponent({
             const clientHeight = canvasMainRef.value?.clientHeight, ctx = canvasBaseRef.value?.getContext("2d");
             if (rowInfo?.imageSrc) {
                 const image = new Image;
-                image.src = rowInfo.imageSrc, image.onload = () => {
-                    const {width: width, height: height} = image, canvasHeight = clientHeight, scaleFactor = canvasHeight / height, canvasWidth = Math.ceil(width * scaleFactor);
+                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);
+                    })(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);
@@ -6217,15 +6297,16 @@ var ContextMenuLabel = defineComponent({
                                 ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight);
                             },
                             hitCanvasLabel: (x, y) => {
-                                let hit_rect = null, hit_index = null;
+                                let hit_rect = null, hit_index = null, color = null;
                                 for (let i = 0; i < labels.length; i++) {
-                                    const rect = labels[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
+                                    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);
+                                    hit_index = i, color = colors[type]);
                                 }
                                 return {
                                     hit_rect: hit_rect,
-                                    hit_index: hit_index
+                                    hit_index: hit_index,
+                                    color: color
                                 };
                             }
                         };
@@ -6235,20 +6316,23 @@ var ContextMenuLabel = defineComponent({
                         image: image,
                         canvasWidth: canvasWidth,
                         canvasHeight: canvasHeight,
-                        labels: labels.value
+                        labels: labels.value,
+                        scaleFactor: scaleFactor
                     });
                     drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
                     drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
-                    const {clearCanvas: clearCanvas} = ((canvas, callback) => {
+                    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 => {
-                            "w" === event.key && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", canvas.style.zIndex = "11");
+                            "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
+                            canvas.style.zIndex = "11", keyW && keyW());
                         })), document.addEventListener("keyup", (event => {
-                            "w" === event.key && (isWKeyPressed = !1, canvas.style.cursor = "unset", canvas.style.zIndex = "0");
+                            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 => {
@@ -6256,7 +6340,7 @@ var ContextMenuLabel = defineComponent({
                             drawRect());
                         })), canvas.addEventListener("mouseup", (() => {
                             if (!isRectDraw) return;
-                            isDrawing = !1, isWKeyPressed = !1;
+                            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,
@@ -6281,8 +6365,12 @@ var ContextMenuLabel = defineComponent({
                         };
                     })(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 => {
@@ -6292,9 +6380,9 @@ var ContextMenuLabel = defineComponent({
                     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} = drawBaseCanvas.value.hitCanvasLabel(x, y);
+                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);
+                    updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
                 }));
             }));
         };
@@ -6305,7 +6393,13 @@ var ContextMenuLabel = defineComponent({
             }), {
                 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,
@@ -6335,21 +6429,23 @@ var ContextMenuLabel = defineComponent({
             width: 0,
             height: 0,
             activateRect: null,
-            activateIndex: null
-        }), updateDraggableRectFixed = (x, y, rect, index) => {
+            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.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.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), 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;
@@ -6364,40 +6460,117 @@ var ContextMenuLabel = defineComponent({
             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), 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), emit("change", rects, label_txt);
         };
-        return () => createVNode(Fragment, null, [ 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,
-            onDraggleResize: onDraggleRectResize,
-            onContextmenu: onContextmenuDraggable
-        }, null) : null ]) ]);
+        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 = useNamespace("labelimg");
+const ns$1 = useNamespace("labelimg");
 
 var Element = defineComponent({
     name: "NextLabelimg",
@@ -6408,25 +6581,58 @@ var Element = defineComponent({
         },
         style: {
             type: Object,
-            default: () => ({})
+            default: () => ({
+                position: "unset"
+            })
+        },
+        rowKey: {
+            type: String,
+            default: "id"
         },
         options: {
             type: Object,
-            default: () => ({
-                classes: [],
-                list: []
-            })
+            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();
-        provide("ns", ns), provide("_emit", emit);
-        const {classes: classes, list: list} = props.options, activateNodeIndex = ref(0), currentNode = computed((() => {
-            if (!list) return {};
-            return list[activateNodeIndex.value] || {};
-        })), imageLength = list.length, loading = ref(!1), formatNodeLabels = () => {
-            const node = deepClone(currentNode.value);
+        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;
@@ -6436,89 +6642,123 @@ var Element = defineComponent({
                 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
-            }, (() => {
-                "KeyD" === e.code ? (activateNodeIndex.value++, activateNodeIndex.value >= imageLength && (activateNodeIndex.value = 0)) : "KeyA" === e.code && (activateNodeIndex.value--, 
-                activateNodeIndex.value < 0 && (activateNodeIndex.value = imageLength - 1)), loading.value = !1;
+            }, (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 = () => {
-            emit("prev-click");
+            const imageLength = labelImages.value.length;
+            let i = activateNodeIndex.value - 1;
+            i < 0 && (i = imageLength - 1), onChangeActivateNode(i), emit("prev-click");
         }, onPaginationNext = () => {
-            emit("next-click");
-        }, layoutRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), mainContentHeight = ref(500);
+            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(layoutRef.value, (() => {
+            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value, (() => {
                 nextTick((() => {
-                    const contentHeight = (layoutRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
+                    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);
-        })), expose({
+        }));
+        const onSelectLabelNode = (rect, index) => {
+            canvasContextRef.value.onSelectedLabel(rect, index);
+        }, onDeleteLabelNode = rect => {
+            canvasContextRef.value.onDeleteLabel(rect);
+        };
+        expose({
             convertToLabel: convertToLabel,
             canvertToCanvas: canvertToCanvas
         });
-        const renderContent = () => createVNode("div", {
-            ref: layoutRef,
-            class: [ ns.b(), props.className ],
+        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.b("loading") ]
+            class: [ ns$1.b("loading") ]
         }, {
             default: () => [ createVNode(ElScrollbar, null, {
                 default: () => [ createVNode("header", {
                     ref: headerRef,
-                    class: [ ns.b("header") ]
+                    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.b("main") ]
+                    class: [ ns$1.b("main") ],
+                    style: {
+                        height: mainContentHeight.value + "px"
+                    }
+                }, [ createVNode("div", {
+                    class: [ ns$1.be("main", "content") ]
                 }, [ createVNode(CanvasContext, {
-                    classes: classes,
-                    rowInfo: currentNode.value
+                    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.b("footer") ]
+                    class: [ ns$1.b("footer") ]
                 }, [ createVNode("div", {
-                    class: [ ns.be("footer", "left") ]
+                    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.be("footer", "center") ]
+                    class: [ ns$1.be("footer", "center") ]
                 }, [ createVNode(ElScrollbar, null, {
                     default: () => [ createVNode("ul", {
-                        class: [ ns.bem("footer", "center", "list") ]
-                    }, [ list.map(((item, index) => createVNode("li", {
+                        class: [ ns$1.bem("footer", "center", "list") ]
+                    }, [ labelImages.value.map(((item, index) => createVNode("li", {
                         key: index,
-                        onClick: () => (index => {
-                            if (loading.value) return;
-                            loading.value = !0;
-                            const {node: node, label_txt: label_txt} = formatNodeLabels();
-                            emit("save", {
-                                node: node,
-                                label_txt: label_txt
-                            }, (() => {
-                                activateNodeIndex.value = index, loading.value = !1;
-                            }), (() => {
-                                loading.value = !1;
-                            }));
-                        })(index),
+                        onClick: () => onChangeActivateNode(index),
                         class: {
                             "is-activate": activateNodeIndex.value === index
                         }
@@ -6531,20 +6771,90 @@ var Element = defineComponent({
                         fit: "cover"
                     }, null) ]))) ]) ]
                 }) ]), createVNode("div", {
-                    class: [ ns.be("footer", "right") ]
+                    class: [ ns$1.be("footer", "right") ]
                 }, [ createVNode(ElIcon, {
                     size: 24,
+                    color: "#797979",
                     onClick: onPaginationNext
                 }, {
                     default: () => [ createVNode(arrow_right_default, null, null) ]
                 }) ]) ]) ]
             }) ]
-        }) ]);
-        return () => createVNode(Fragment, null, [ renderContent() ]);
+        }) ]) ]);
+    }
+});
+
+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);
+const NextLabelimg = withInstall(Element), NextLabelimgPreview = withInstall(preview);
 
 var components = Object.freeze({
     __proto__: null,
@@ -6555,6 +6865,7 @@ var components = Object.freeze({
     NextDragResize: NextDragResize,
     NextForm: NextForm,
     NextLabelimg: NextLabelimg,
+    NextLabelimgPreview: NextLabelimgPreview,
     NextLayout: NextLayout,
     NextMenu: NextMenu,
     NextSpinLoading: NextSpinLoading,
@@ -6597,7 +6908,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.2.8", install = function(app) {
+}, version = "0.3.0", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -6607,8 +6918,8 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.2.8",
+    version: "0.3.0",
     install: install
 };
 
-export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextLabelimg, 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 };