next-element-vue 0.2.9 → 0.3.1

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.2.9 v
- * 发布日期：2024-06-14
+ * 当前版本：0.3.1 v
+ * 发布日期：2024-06-22
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -756,7 +756,8 @@
                     cancelDelete: "取消删除操作",
                     confirmButtonText: "确 定",
                     cancelButtonText: "取 消"
-                }
+                },
+                uploadfileExceed: "上传文件数量超出限制范围"
             },
             form: {
                 input: "请输入",
@@ -793,7 +794,10 @@
             labelimg: {
                 saveTxt: "保存中...",
                 emptyLabelText: "暂无标签数据",
-                confirmDeleteLabel: "确定要删除该标注吗？"
+                confirmDeleteLabel: "确定要删除该标注吗？",
+                saveLabel: "保存当前标注",
+                instructions: "使用说明",
+                labelNoUpdate: "暂无标签数据更新"
             }
         }
     }, enLocale = {
@@ -830,7 +834,8 @@
                     cancelDelete: "Cancel delete",
                     confirmButtonText: "OK",
                     cancelButtonText: "Cancel"
-                }
+                },
+                uploadfileExceed: "The number of uploaded files exceeds the limit"
             },
             form: {
                 input: "please input ",
@@ -867,7 +872,10 @@
             labelimg: {
                 saveTxt: "saving...",
                 emptyLabelText: "No label data",
-                confirmDeleteLabel: "Are you sure you want to delete this annotation?"
+                confirmDeleteLabel: "Are you sure you want to delete this annotation?",
+                saveLabel: "save label",
+                instructions: "instructions",
+                labelNoUpdate: "No label data update"
             }
         }
     }, zhtwLocale = {
@@ -904,7 +912,8 @@
                     cancelDelete: "取消删除操作",
                     confirmButtonText: "確 定",
                     cancelButtonText: "取 消"
-                }
+                },
+                uploadfileExceed: "上传文件数量超出限制范围"
             },
             form: {
                 input: "請輸入",
@@ -941,7 +950,10 @@
             labelimg: {
                 saveTxt: "保存中...",
                 emptyLabelText: "暂无标签数据",
-                confirmDeleteLabel: "确定要删除该标注吗？"
+                confirmDeleteLabel: "确定要删除该标注吗？",
+                saveLabel: "保存当前标注",
+                instructions: "使用说明",
+                labelNoUpdate: "暂无标签数据更新"
             }
         }
     };
@@ -1087,13 +1099,16 @@
         } ],
         userDropdown: [ {
             value: "/",
-            label: "next.layout.home"
+            label: "next.layout.home",
+            svg: '<svg t="1718695810903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11410" width="16" height="16"><path d="M988.672 502.272l-476.16-476.16-476.16 476.16c-8.704 8.704-8.704 22.528 0 31.232l1.536 1.536c8.704 8.704 22.528 8.704 31.232 0l443.392-443.392 443.392 443.392c8.704 8.704 22.528 8.704 31.232 0l1.536-1.536c8.704-8.704 8.704-22.528 0-31.232z" fill="" p-id="11411"></path><path d="M860.16 534.016c-12.288 0-22.016 9.728-22.016 22.016v333.312c0 54.272-27.648 64-47.104 64h-152.064v-227.84c0-25.088 0-59.392-44.544-59.392H418.816c-44.032 0-44.032 33.28-44.032 59.392v227.84h-153.6c-44.032 0-45.056-64-45.056-64v-333.312c0.512-12.288-8.704-22.528-20.992-23.04-12.288-0.512-22.528 8.704-23.04 20.992v368.64c0 65.536 70.144 75.264 70.144 75.264h217.088v-287.232h176.64v287.232H824.32c39.424 0 57.856-44.032 57.856-75.264v-366.592c0-12.288-9.728-22.016-22.016-22.016z" fill="" p-id="11412"></path></svg>'
         }, {
             value: "/personal",
-            label: "next.layout.personal"
+            label: "next.layout.personal",
+            svg: '<svg t="1718695007028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2161" width="16" height="16"><path d="M512 87.04c-136.704 0-247.808 111.104-247.808 247.808 0 98.816 58.368 184.32 142.336 223.744-155.136 45.568-268.8 188.928-268.8 358.912 0 10.752 8.704 19.456 19.456 19.456 10.752 0 19.456-8.704 19.456-19.456 0-184.832 150.528-335.36 335.36-335.36 136.704 0 247.808-111.104 247.808-247.808S648.704 87.04 512 87.04z m0 456.192c-115.2 0-208.384-93.696-208.384-208.384 0-115.2 93.696-208.384 208.384-208.384 115.2 0 208.384 93.696 208.384 208.384 0 114.688-93.184 208.384-208.384 208.384z m226.816 76.8c-8.704-6.656-20.992-5.12-27.648 3.584-6.656 8.704-5.12 20.992 3.584 27.648 83.968 64 132.096 161.28 132.096 266.752 0 10.752 8.704 19.456 19.456 19.456 10.752 0 19.456-8.704 19.456-19.456 0.512-118.272-53.248-226.816-146.944-297.984z" fill="" p-id="2162"></path></svg>'
         }, {
             value: "logOut",
             label: "next.layout.logOut",
+            svg: '<svg t="1718695049981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2313" width="16" height="16"><path d="M896 928H384a32 32 0 0 1-32-32v-128a32 32 0 0 1 64 0v96h448v-704h-448V256a32 32 0 1 1-64 0V128a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32z" fill="" p-id="2314"></path><path d="M608 544H192a32 32 0 0 1 0-64h416a32 32 0 0 1 0 64z" fill="" p-id="2315"></path><path d="M256 672a30.08 30.08 0 0 1-22.4-9.6l-128-128a30.72 30.72 0 0 1 0-44.8l128-128a31.36 31.36 0 1 1 44.8 44.8L173.44 512l104.96 105.6a30.72 30.72 0 0 1 0 44.8 30.08 30.08 0 0 1-22.4 9.6z" fill="" p-id="2316"></path></svg>',
             divided: !0
         } ],
         showTabs: !0,
@@ -1460,7 +1475,18 @@
     }, null, -1) ];
     var view_default = export_helper_default(view_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
         return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1283, _hoisted_3282);
-    } ], [ "__file", "view.vue" ] ]), LayoutSetting = vue.defineComponent({
+    } ], [ "__file", "view.vue" ] ]), warning_vue_vue_type_script_lang_default = {
+        name: "Warning"
+    }, _hoisted_1288 = {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+    }, _hoisted_3287 = [ vue.createElementVNode("path", {
+        fill: "currentColor",
+        d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
+    }, null, -1) ];
+    var warning_default = export_helper_default(warning_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1288, _hoisted_3287);
+    } ], [ "__file", "warning.vue" ] ]), LayoutSetting = vue.defineComponent({
         setup() {},
         render() {
             const _slots = vue.inject("__slots__", {}), _ns = vue.inject("__ns__", {}), _config = vue.inject("options", {}), _updateOptions = vue.inject("updateOptions", null), settingConfig = vue.reactive({
@@ -1589,16 +1615,13 @@
                     class: _ns.be("config-bar-item", "label")
                 }, [ vue.createTextVNode("是否显示标签栏") ]), vue.createVNode("div", {
                     class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(vue.resolveComponent("el-switch"), {
+                }, [ vue.createVNode(elementPlus.ElSwitch, {
                     modelValue: _config.showTabs,
                     "onUpdate:modelValue": $event => _config.showTabs = $event
                 }, null) ]) ]), _slots.setting?.() ]
             });
         }
     });
-    function _isSlot$8(s) {
-        return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
-    }
     var HeaderTools = vue.defineComponent({
         setup() {
             const locale = vue.inject(localeContextKey, vue.ref()), config = vue.inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = core.useFullscreen(), language = vue.ref(vue.computed((() => config.language)).value), settingDrawer = vue.ref(!1);
@@ -1650,14 +1673,15 @@
                 }) ]),
                 dropdown: () => {
                     let _slot;
-                    return vue.createVNode(elementPlus.ElDropdownMenu, null, _isSlot$8(_slot = _languageDropdown.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
+                    return vue.createVNode(elementPlus.ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
                         command: item.value,
                         disabled: this.language === item.value
                     }, {
                         default: () => [ item.label ]
-                    })))) ? _slot : {
+                    })))) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
                         default: () => [ _slot ]
                     });
+                    var s;
                 }
             }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
                 style: {
@@ -1694,6 +1718,7 @@
             }) ]) ]), slots[slots_config_headerToolsSuffix]?.(), vue.createVNode("li", null, [ vue.createVNode(elementPlus.ElDropdown, {
                 "show-timeout": 70,
                 "hide-timeout": 80,
+                "popper-class": _ns.be("header-tools", "userDropdown"),
                 onCommand: command => {
                     _emit("changeUserDropdown", command), _config.onChangeUserDropdown && _config.onChangeUserDropdown(command);
                 }
@@ -1709,15 +1734,17 @@
                     default: () => [ vue.createVNode(arrow_down_default, null, null) ]
                 }) ]),
                 dropdown: () => vue.createVNode(elementPlus.ElDropdownMenu, null, {
-                    default: () => [ _userDropdown?.map((item => {
-                        let _slot2;
-                        return vue.createVNode(elementPlus.ElDropdownItem, {
-                            command: item.value,
-                            divided: !!item.divided
-                        }, _isSlot$8(_slot2 = _t(item.label)) ? _slot2 : {
-                            default: () => [ _slot2 ]
-                        });
-                    })) ]
+                    default: () => [ _userDropdown?.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
+                        command: item.value,
+                        divided: !!item.divided
+                    }, {
+                        default: () => [ item.svg ? vue.createVNode("span", {
+                            innerHTML: item.svg,
+                            class: "item-svg"
+                        }, null) : null, item.iconfont ? vue.createVNode("i", {
+                            class: item.iconfont
+                        }, null) : null, _t(item.label) ]
+                    }))) ]
                 })
             }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
                 style: {
@@ -3608,8 +3635,11 @@
                 class: ns.b("header-menu")
             }, [ vue.createVNode("div", {
                 class: ns.b("header-menu-left")
-            }, [ this.$slots["menu-left-prefix"]?.(), options.addBtn && vue.createVNode(elementPlus.ElButton, {
+            }, [ this.$slots["menu-left-prefix"]?.({
+                size: options.size
+            }), options.addBtn && vue.createVNode(elementPlus.ElButton, {
                 type: "primary",
+                size: options.size,
                 onClick: () => {
                     this.$emit("clickAdd");
                 }
@@ -3620,6 +3650,7 @@
                 default: () => t("next.table.add")
             }), options.batchDelBtn && vue.createVNode(elementPlus.ElButton, {
                 type: "danger",
+                size: options.size,
                 disabled: !multipleSelectionLength.value,
                 onClick: () => {
                     const selection = vue.unref(vue.toRaw(multipleSelection.value.map((row => vue.toRaw(row)))));
@@ -3643,10 +3674,15 @@
                     default: () => [ vue.createVNode(delete_default, null, null) ]
                 }),
                 default: () => t("next.table.batchDelete")
-            }), this.$slots["menu-left-suffix"]?.() ]), vue.createVNode("div", {
+            }), this.$slots["menu-left-suffix"]?.({
+                size: options.size
+            }) ]), vue.createVNode("div", {
                 class: ns.b("header-menu-right")
-            }, [ this.$slots["menu-right-prefix"]?.(), options.refreshBtn && vue.createVNode(elementPlus.ElButton, {
+            }, [ this.$slots["menu-right-prefix"]?.({
+                size: options.size
+            }), options.refreshBtn && vue.createVNode(elementPlus.ElButton, {
                 circle: !0,
+                size: options.size,
                 onClick: () => {
                     this.$emit("clickRefresh");
                 }
@@ -3656,6 +3692,7 @@
                 })
             }), options.settingBtn && vue.createVNode(elementPlus.ElButton, {
                 circle: !0,
+                size: options.size,
                 onClick: () => {
                     drawerSettingRef.value.visible = !0;
                 }
@@ -3663,7 +3700,9 @@
                 icon: () => vue.createVNode(elementPlus.ElIcon, null, {
                     default: () => [ vue.createVNode(tools_default, null, null) ]
                 })
-            }), this.$slots["menu-right-suffix"]?.() ]), vue.createVNode(DrawerSetting, {
+            }), this.$slots["menu-right-suffix"]?.({
+                size: options.size
+            }) ]), vue.createVNode(DrawerSetting, {
                 ref: drawerSettingRef
             }, null) ]);
         }
@@ -4140,7 +4179,7 @@
                         }
                     })(event, vue.toRaw(row))
                 }, null) : vue.createVNode(elementPlus.ElRadio, {
-                    label: value,
+                    value: value,
                     onChange: () => {
                         sinleSelection.value = value, multipleSelection.value = [ row ];
                     }
@@ -4271,12 +4310,20 @@
                 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} = vue.getCurrentInstance(), {t: t} = useLocale();
             return {
@@ -4312,6 +4359,8 @@
                 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;
@@ -4330,8 +4379,14 @@
                     });
                     previewImagesContainer.appContext = this.appContext, vue.render(previewComponent, previewImagesContainer);
                 },
-                onChange: (uploadfile, uploadfiles) => {
+                "on-change": (uploadfile, uploadfiles) => {
                     uploadfilesPreview.value = uploadfiles, emit("change", uploadfile, uploadfiles);
+                },
+                "on-exceed": (uploadfile, uploadfiles) => {
+                    elementPlus.ElMessage({
+                        type: "info",
+                        message: _t("next.table.uploadfileExceed")
+                    }), emit("exceed", uploadfile, uploadfiles);
                 }
             }, {
                 trigger: () => slots.default ? slots.default() : "picture-card" === props.listType ? vue.createVNode(elementPlus.ElIcon, null, {
@@ -4434,6 +4489,9 @@
             }, null) ]);
         }
     });
+    function _isSlot$2(s) {
+        return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
+    }
     const ns$6 = useNamespace("form");
     var Element$6 = vue.defineComponent({
         name: "NextForm",
@@ -4476,17 +4534,17 @@
                 deep: !0,
                 immediate: !0
             });
-            const formColumns = arrayObjNoRepeat(_formColumns.value, "prop");
+            const formColumns = arrayObjNoRepeat(_formColumns.value, "prop"), spanResizeLoading = vue.ref(!1);
             vue.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);
                 }));
             }));
@@ -4683,7 +4741,7 @@
                 }, {
                     default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElRadio, {
                         key: item.value,
-                        label: item.value,
+                        value: item.value,
                         disabled: valueExist(item.disabled, !1)
                     }, {
                         default: () => [ item.label ]
@@ -4777,7 +4835,10 @@
                     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 ? vue.createVNode(treeSelect, {
                     modelValue: formParams[col.prop],
                     "onUpdate:modelValue": $event => formParams[col.prop] = $event,
@@ -4793,19 +4854,22 @@
                 getFormInstance: () => ruleFormRef.value,
                 getFormParams: () => vue.toRaw(formParams)
             });
-            const renderContent = () => {
-                let _slot;
-                return vue.createVNode(elementPlus.ElForm, {
-                    ref: ruleFormRef,
-                    class: ns$6.b(),
-                    inline: !1,
-                    model: formParams,
-                    size: options.size
-                }, {
-                    default: () => {
-                        return [ vue.createVNode(elementPlus.ElRow, {
+            return () => {
+                let _slot2;
+                return vue.createVNode(NextSpinLoading, {
+                    loading: spanResizeLoading.value
+                }, _isSlot$2(_slot2 = (() => {
+                    let _slot;
+                    return vue.createVNode(elementPlus.ElForm, {
+                        ref: ruleFormRef,
+                        class: ns$6.b(),
+                        inline: !1,
+                        model: formParams,
+                        size: options.size
+                    }, {
+                        default: () => [ vue.createVNode(elementPlus.ElRow, {
                             gutter: 20
-                        }, (s = _slot = formColumns.map((column => !column.hide && vue.createVNode(elementPlus.ElCol, {
+                        }, _isSlot$2(_slot = formColumns.map((column => !column.hide && vue.createVNode(elementPlus.ElCol, {
                             span: valueExist(column.span, colSpan.value)
                         }, {
                             default: () => [ vue.createVNode(elementPlus.ElFormItem, {
@@ -4835,9 +4899,9 @@
                                 }) : null ]) : null,
                                 default: () => renderFormItem(column)
                             }) ]
-                        }))), "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
+                        })))) ? _slot : {
                             default: () => [ _slot ]
-                        })), _isEditing.value && options.showFooter ? vue.createVNode("div", {
+                        }), _isEditing.value && options.showFooter ? vue.createVNode("div", {
                             class: ns$6.e("footer")
                         }, [ vue.createVNode(elementPlus.ElButton, {
                             type: "primary",
@@ -4849,12 +4913,12 @@
                             onClick: onResetForm
                         }, {
                             default: () => [ t(options.resetText) || t("next.form.reset") ]
-                        }) : null ]) : null ];
-                        var s;
-                    }
+                        }) : null ]) : null ]
+                    });
+                })()) ? _slot2 : {
+                    default: () => [ _slot2 ]
                 });
             };
-            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
     const NextTreeSelect = withInstall(treeSelect), NextForm = withInstall(Element$6);
@@ -4956,6 +5020,7 @@
                             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),
@@ -5663,7 +5728,103 @@
         name: "NextDragResize",
         props: {},
         setup: () => () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, null) ])
-    })), colors = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], convertToLabel = rect => {
+    }));
+    var ToolHeader = vue.defineComponent({
+        props: {
+            isFullscreen: {
+                type: Boolean,
+                default: !1
+            }
+        },
+        emits: [ "fullscreen", "save" ],
+        setup(props, {emit: emit}) {
+            const _ns = vue.inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
+                emit("fullscreen", val);
+            };
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
+                class: [ _ns.be("header", "tool") ]
+            }, [ vue.createVNode("li", {
+                onClick: () => emit("save")
+            }, [ vue.createVNode("svg", {
+                t: "1719034799379",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "4272",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M831.4 252.2L711.5 132.4c-10.3-10.3-24.2-16.1-38.8-16.1h-450c-23.3 0-42.2 18.9-42.2 42.2v709.4c0 23.3 18.9 42.2 42.2 42.2h582.6c23.3 0 42.2-18.9 42.2-42.2V291c-0.1-14.5-5.8-28.5-16.1-38.8zM619.6 159v159.8c0 4-3.3 7.3-7.3 7.3H387.2c-4 0-7.3-3.3-7.3-7.3V159h239.7z m67.7 708.4H340.8v-292c0-3.9 3.2-7.1 7.1-7.1h332.4c3.9 0 7.1 3.2 7.1 7.1v292z m117.4 0H730v-292c0-27.5-22.3-49.8-49.8-49.8H347.8c-27.5 0-49.8 22.3-49.8 49.8v292h-74.7V159.1h113.9v159.8c0 27.6 22.4 50.1 50.1 50.1h225.1c27.6 0 50.1-22.4 50.1-50.1V159h10.4c3.2 0 6.3 1.3 8.6 3.6l119.9 119.9c2.3 2.3 3.6 5.3 3.6 8.6l-0.3 576.3z",
+                "p-id": "4273"
+            }, null), vue.createVNode("path", {
+                d: "M536 196.3h42.7v87.2H536zM368.7 641.2h220.7v42.7H368.7zM368.7 744h170.9v42.7H368.7z",
+                "p-id": "4274"
+            }, null) ]), vue.createVNode("span", {
+                style: "padding-left: 3px"
+            }, [ t("next.labelimg.saveLabel") ]) ]) ]), vue.createVNode("ul", {
+                class: [ _ns.be("header", "tool") ]
+            }, [ vue.createVNode("li", {
+                style: "margin-right: 30px;"
+            }, [ vue.createVNode(elementPlus.ElPopover, {
+                trigger: "hover",
+                placement: "bottom",
+                width: "none"
+            }, {
+                reference: () => vue.createVNode("div", {
+                    class: "flex-center"
+                }, [ vue.createVNode("span", {
+                    style: "padding-right: 3px"
+                }, [ t("next.labelimg.instructions") ]), vue.createVNode(elementPlus.ElIcon, {
+                    size: 14
+                }, {
+                    default: () => [ vue.createVNode(warning_default, null, null) ]
+                }) ]),
+                default: () => vue.createVNode("ul", {
+                    style: "font-size: 12px;white-space: nowrap;"
+                }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("W：") ]), vue.createVNode("span", null, [ vue.createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+            }) ]), props.isFullscreen ? vue.createVNode("li", {
+                onClick: () => switchFillscreen(!1)
+            }, [ vue.createVNode(elementPlus.ElTooltip, {
+                placement: "top",
+                content: "取消全屏"
+            }, {
+                default: () => [ vue.createVNode("svg", {
+                    t: "1719035442027",
+                    class: "icon",
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "p-id": "5388",
+                    width: "18",
+                    height: "18"
+                }, [ vue.createVNode("path", {
+                    d: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z",
+                    "p-id": "5389"
+                }, null) ]) ]
+            }) ]) : vue.createVNode("li", {
+                onClick: () => switchFillscreen(!0)
+            }, [ vue.createVNode(elementPlus.ElTooltip, {
+                placement: "top",
+                content: "全屏"
+            }, {
+                default: () => [ vue.createVNode("svg", {
+                    t: "1719035375323",
+                    class: "icon",
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "p-id": "5241",
+                    width: "18",
+                    height: "18"
+                }, [ vue.createVNode("path", {
+                    d: "M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z",
+                    "p-id": "5242"
+                }, null) ]) ]
+            }) ]) ]) ]) ]);
+        }
+    });
+    const 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) => {
@@ -5716,7 +5877,7 @@
                 labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
             }));
             const labelMenuRef = vue.ref(), labelStyleFixed = vue.computed((() => {
-                const {left: left, top: top, canvasHeight: canvasHeight} = props.labelRect, height_diff = top + labelRectWidthHeight.value.height - canvasHeight;
+                const {left: left, top: top} = props.labelRect, height_diff = top + labelRectWidthHeight.value.height - window.innerHeight;
                 let y = top;
                 return height_diff > 0 && (y -= height_diff), {
                     top: y + "px",
@@ -5962,6 +6123,12 @@
                     })),
                     label_txt: yolo_label.join("\n")
                 };
+            }, setContainerWidthHeight = (canvasWidth, canvasHeight) => {
+                canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px", 
+                canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight, 
+                canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px", 
+                canvasRectRef.value.width = canvasWidth, canvasRectRef.value.height = canvasHeight, 
+                canvasRectRef.value.style.width = canvasWidth + "px", canvasRectRef.value.style.height = canvasHeight + "px";
             }, loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
                 labels.value = (rowInfo => rowInfo.labels ? rowInfo.labels.map((rect => {
                     const typeName = props.classes[rect.type];
@@ -5972,14 +6139,13 @@
                     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 {width: width, height: height} = image;
+                        if (height > clientHeight) {
+                            const scale = height / clientHeight;
+                            height = clientHeight, image.style.height = height + "px", width /= scale;
+                        }
+                        const canvasHeight = height, scaleFactor = parseFloat((canvasHeight / height).toFixed(3)), canvasWidth = Math.ceil(width * scaleFactor);
+                        setContainerWidthHeight(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));
@@ -6120,9 +6286,11 @@
                 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;
+                const contextRect = canvasBaseRef.value.getBoundingClientRect();
+                contextmenuLabelFixed.value.show = !0, contextmenuLabelFixed.value.left = x + contextRect.x, 
+                contextmenuLabelFixed.value.top = y + contextRect.y, contextmenuLabelFixed.value.canvasWidth = canvasBaseRef.value.width, 
+                contextmenuLabelFixed.value.canvasHeight = canvasBaseRef.value.height, contextmenuLabelFixed.value.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, 
@@ -6190,7 +6358,14 @@
                         updateDraggableRectFixed(x, y, rect, index, colors[type]);
                     }));
                 },
-                onDeleteLabel: onDeleteLabel
+                onDeleteLabel: onDeleteLabel,
+                rerenderImage: () => {
+                    setContainerWidthHeight(0, 0), onCloseContentmenuLabel(), onCloseDraggableRectFixed(), 
+                    vue.nextTick((() => {
+                        const rowInfo = vue.toRaw(props.rowInfo);
+                        renderImageLabel(rowInfo);
+                    }));
+                }
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
                 loading: loadingImage.value,
@@ -6223,6 +6398,9 @@
         }
     }), RightLabel = vue.defineComponent({
         props: {
+            contentHeight: {
+                type: Number
+            },
             classes: {
                 type: Array,
                 default: () => []
@@ -6246,7 +6424,10 @@
                 immediate: !0
             });
             const renderContent = () => vue.createVNode("div", {
-                class: [ ns.b("right") ]
+                class: [ ns.b("right") ],
+                style: {
+                    height: props.contentHeight + "px"
+                }
             }, [ labels.value.length ? vue.createVNode("ul", null, [ labels.value.map(((rect, index) => vue.createVNode("li", {
                 key: index,
                 onClick: () => ((rect, index) => {
@@ -6280,7 +6461,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     }), defaultConfig = {
-        mainContentHeight: 600
+        minContentHeight: 500
     };
     const ns$1 = useNamespace("labelimg");
     var Element = vue.defineComponent({
@@ -6292,9 +6473,7 @@
             },
             style: {
                 type: Object,
-                default: () => ({
-                    position: "unset"
-                })
+                default: () => ({})
             },
             rowKey: {
                 type: String,
@@ -6377,9 +6556,8 @@
                 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", {
+                return canvasContextRef.value.onCloseDraggableRectFixed(), isChangeNodeLabels() ? (activateNodeIndex.value = index, 
+                loading.value = !1, !1) : (emit("save", {
                     node: node,
                     label_txt: label_txt
                 }, (imageItem => {
@@ -6387,7 +6565,7 @@
                     loading.value = !1;
                 }), (() => {
                     loading.value = !1;
-                }));
+                })), !0);
             }, onPaginationPrev = () => {
                 const imageLength = labelImages.value.length;
                 let i = activateNodeIndex.value - 1;
@@ -6396,30 +6574,35 @@
                 const imageLength = labelImages.value.length;
                 let i = activateNodeIndex.value + 1;
                 i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
-            }, canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), mainContentHeight = vue.ref(options.mainContentHeight);
-            vue.onMounted((() => {
-                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value, (() => {
-                    vue.nextTick((() => {
-                        layoutLabelRef.value.style.position = "unset";
-                        const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
-                        mainContentHeight.value = contentHeight;
-                    }));
+            }, canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), mainContentHeight = vue.ref(options.minContentHeight), updateMainContentHeight = () => {
+                vue.nextTick((() => {
+                    const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
+                    mainContentHeight.value = contentHeight;
                 }));
+            };
+            vue.onMounted((() => {
+                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+                    updateMainContentHeight();
+                })), window.addEventListener("resize", updateMainContentHeight);
             })), vue.onUnmounted((() => {
-                document.removeEventListener("keydown", onKeydownPrevNext);
+                document.removeEventListener("keydown", onKeydownPrevNext), window.removeEventListener("resize", updateMainContentHeight);
             }));
             const onSelectLabelNode = (rect, index) => {
                 canvasContextRef.value.onSelectedLabel(rect, index);
             }, onDeleteLabelNode = rect => {
                 canvasContextRef.value.onDeleteLabel(rect);
+            }, isFullscreen = vue.ref(!1), onSwitchFillscreen = val => {
+                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
+                    canvasContextRef.value.rerenderImage();
+                }));
             };
             expose({
                 convertToLabel: convertToLabel,
                 canvertToCanvas: canvertToCanvas
             });
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
+            const renderContent = () => vue.createVNode("div", {
                 ref: layoutLabelRef,
-                class: [ ns$1.b(), props.className ],
+                class: [ ns$1.b(), props.className, isFullscreen.value ? ns$1.b("fullscreen") : "" ],
                 style: {
                     ...props.style
                 }
@@ -6432,21 +6615,35 @@
                     default: () => [ vue.createVNode("header", {
                         ref: headerRef,
                         class: [ ns$1.b("header") ]
-                    }, [ slots.header ? slots.header() : vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", null, null), vue.createVNode("ul", null, null) ]) ]), vue.createVNode("div", {
-                        ref: mainRef,
-                        class: [ ns$1.b("main") ],
-                        style: {
-                            height: mainContentHeight.value + "px"
+                    }, [ slots.header ? slots.header() : vue.createVNode(ToolHeader, {
+                        isFullscreen: isFullscreen.value,
+                        onFullscreen: onSwitchFillscreen,
+                        onSave: () => {
+                            onChangeActivateNode(activateNodeIndex.value) || elementPlus.ElMessage({
+                                type: "info",
+                                message: t("next.labelimg.labelNoUpdate")
+                            });
                         }
-                    }, [ vue.createVNode("div", {
+                    }, null) ]), vue.createVNode("div", {
+                        ref: mainRef,
+                        class: [ ns$1.b("main") ]
+                    }, [ vue.createVNode(elementPlus.ElScrollbar, {
                         class: [ ns$1.be("main", "content") ]
-                    }, [ vue.createVNode(CanvasContext, {
-                        ref: canvasContextRef,
-                        contextClientHeight: mainContentHeight.value,
-                        classes: classes.value,
-                        rowInfo: currentNode.value,
-                        onChange: onChangeNodeRect
-                    }, null) ]), vue.createVNode(RightLabel, {
+                    }, {
+                        default: () => [ vue.createVNode("div", {
+                            class: [ ns$1.be("main", "content") ],
+                            style: {
+                                height: mainContentHeight.value + "px"
+                            }
+                        }, [ vue.createVNode(CanvasContext, {
+                            ref: canvasContextRef,
+                            contextClientHeight: mainContentHeight.value,
+                            classes: classes.value,
+                            rowInfo: currentNode.value,
+                            onChange: onChangeNodeRect
+                        }, null) ]) ]
+                    }), vue.createVNode(RightLabel, {
+                        contentHeight: mainContentHeight.value,
                         classes: classes.value,
                         labels: activateNodeLabels.value,
                         onDelete: onDeleteLabelNode,
@@ -6491,7 +6688,8 @@
                         default: () => [ vue.createVNode(arrow_right_default, null, null) ]
                     }) ]) ]) ]
                 }) ]
-            }) ]) ]);
+            }) ]);
+            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
     const ns = useNamespace("labelimg-preview");
@@ -6623,7 +6821,7 @@
         })(app);
     };
     var index = {
-        version: "0.2.9",
+        version: "0.3.1",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -6669,7 +6867,7 @@
     }), exports.useGetDerivedNamespace = useGetDerivedNamespace, exports.useLanguage = (locale, lang) => {
         const localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
         localeRef.value.name = lang, localeRef.value.next = nextLang.next;
-    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.2.9", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.1", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });