next-element-vue 0.5.8 → 0.5.10

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.5.8 v
- * 发布日期：2025-04-15
+ * 当前版本：0.5.10 v
+ * 发布日期：2025-04-30
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -1485,342 +1485,6 @@
             fill: "currentColor",
             d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"
         }) ]))
-    }), 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({
-                ..._config.setting
-            });
-            settingConfig.headerBarFontActiveColor || (settingConfig.headerBarFontActiveColor = settingConfig.themeColor);
-            const _changeUpdateOptions = () => {
-                const options = {
-                    ..._config,
-                    setting: {
-                        ...settingConfig
-                    }
-                };
-                _updateOptions(options);
-            }, _onChangeThemeColor = color => {
-                if (!color) return elementPlus.ElMessage({
-                    type: "warning",
-                    message: "主题颜色不能为空"
-                }), !1;
-                settingConfig.themeColor = color, nextUseCssTheme("--el-color-primary", color), 
-                _changeUpdateOptions();
-            }, _onChangeSwitchDark = () => {
-                const body = document.documentElement;
-                settingConfig.isDark ? body.setAttribute("data-theme", "dark") : body.setAttribute("data-theme", ""), 
-                _changeUpdateOptions();
-            }, _onChangeColor = (color, key, cssvar) => {
-                settingConfig[key] = color, nextUseCssVar(cssvar, color), _changeUpdateOptions();
-            }, layouts = [ {
-                type: "defaults",
-                text: "默认"
-            }, {
-                type: "classic",
-                text: "经典"
-            }, {
-                type: "transverse",
-                text: "横向"
-            }, {
-                type: "columns",
-                text: "分栏"
-            }, {
-                type: "composite",
-                text: "综合"
-            } ];
-            return vue.createVNode(elementPlus.ElScrollbar, null, {
-                default: () => [ vue.createVNode(elementPlus.ElDivider, {
-                    "border-style": "dashed"
-                }, {
-                    default: () => [ vue.createTextVNode("全局主题") ]
-                }), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item")
-                }, [ vue.createVNode("span", {
-                    class: _ns.be("config-bar-item", "label")
-                }, [ vue.createTextVNode("主题颜色") ]), vue.createVNode("div", {
-                    class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(elementPlus.ElColorPicker, {
-                    modelValue: settingConfig.themeColor,
-                    "onUpdate:modelValue": $event => settingConfig.themeColor = $event,
-                    predefine: [ "#409eff", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
-                    "show-alpha": !0,
-                    onChange: _onChangeThemeColor
-                }, null) ]) ]), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item")
-                }, [ vue.createVNode("span", {
-                    class: _ns.be("config-bar-item", "label")
-                }, [ vue.createTextVNode("暗黑模式") ]), vue.createVNode("div", {
-                    class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(elementPlus.ElSwitch, {
-                    modelValue: settingConfig.isDark,
-                    "onUpdate:modelValue": $event => settingConfig.isDark = $event,
-                    "inline-prompt": !0,
-                    size: "large",
-                    "active-icon": moon_night_default,
-                    "inactive-icon": sunny_default,
-                    "active-color": "#1f1f1f",
-                    "inactive-color": "#dcdfe6",
-                    onChange: _onChangeSwitchDark
-                }, null) ]) ]), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item")
-                }, [ vue.createVNode("span", {
-                    class: _ns.be("config-bar-item", "label")
-                }, [ vue.createTextVNode("顶栏背景颜色") ]), vue.createVNode("div", {
-                    class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(elementPlus.ElColorPicker, {
-                    modelValue: settingConfig.headerBarColor,
-                    "onUpdate:modelValue": $event => settingConfig.headerBarColor = $event,
-                    predefine: [ "#282c34", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
-                    "show-alpha": !0,
-                    onChange: color => _onChangeColor(color, "headerBarColor", "--next-layout-bg-color")
-                }, null) ]) ]), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item")
-                }, [ vue.createVNode("span", {
-                    class: _ns.be("config-bar-item", "label")
-                }, [ vue.createTextVNode("顶栏字体颜色") ]), vue.createVNode("div", {
-                    class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(elementPlus.ElColorPicker, {
-                    modelValue: settingConfig.headerBarFontColor,
-                    "onUpdate:modelValue": $event => settingConfig.headerBarFontColor = $event,
-                    predefine: [ "#282c34", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
-                    "show-alpha": !0,
-                    onChange: color => _onChangeColor(color, "headerBarFontColor", "--next-layout-font-color")
-                }, null) ]) ]), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item")
-                }, [ vue.createVNode("span", {
-                    class: _ns.be("config-bar-item", "label")
-                }, [ vue.createTextVNode("顶栏激活字体颜色") ]), vue.createVNode("div", {
-                    class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(elementPlus.ElColorPicker, {
-                    modelValue: settingConfig.headerBarFontActiveColor,
-                    "onUpdate:modelValue": $event => settingConfig.headerBarFontActiveColor = $event,
-                    predefine: [ "#282c34", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
-                    "show-alpha": !0,
-                    onChange: color => _onChangeColor(color, "headerBarFontActiveColor", "--next-layout-active-color")
-                }, null) ]) ]), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item")
-                }, [ vue.createVNode("span", {
-                    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"), {
-                    modelValue: settingConfig.isHeaderBarColorGradual,
-                    "onUpdate:modelValue": $event => settingConfig.isHeaderBarColorGradual = $event,
-                    onChange: _changeUpdateOptions
-                }, null) ]) ]), vue.createVNode(elementPlus.ElDivider, {
-                    "border-style": "dashed"
-                }, {
-                    default: () => [ vue.createTextVNode("布局方式") ]
-                }), vue.createVNode("ul", {
-                    class: _ns.b("config-bar-layout")
-                }, [ layouts.map((item => vue.createVNode("li", {
-                    class: [ _ns.be("config-bar-layout", item.type), _ns.is("active", settingConfig.layout === item.type) ],
-                    onClick: event => ((event, layout) => {
-                        event.stopPropagation(), settingConfig.layout = layout.type, _changeUpdateOptions();
-                    })(event, item)
-                }, [ vue.createVNode("div", {
-                    class: "layout-wrap"
-                }, [ vue.createVNode("div", {
-                    class: "layout-box"
-                }, [ vue.createVNode("p", {
-                    class: "layout-text"
-                }, [ item.text ]) ]) ]), vue.createVNode("aside", null, null) ]))) ]), vue.createVNode("div", {
-                    class: _ns.b("config-bar-item"),
-                    style: {
-                        "margin-top": "20px"
-                    }
-                }, [ vue.createVNode("span", {
-                    class: _ns.be("config-bar-item", "label")
-                }, [ vue.createTextVNode("是否显示标签栏") ]), vue.createVNode("div", {
-                    class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(elementPlus.ElSwitch, {
-                    modelValue: _config.showTabs,
-                    "onUpdate:modelValue": $event => _config.showTabs = $event
-                }, null) ]) ]), _slots.setting?.({
-                    config: settingConfig
-                }) ]
-            });
-        }
-    });
-    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);
-            return {
-                locale: locale,
-                config: config,
-                t: t,
-                toggle: toggle,
-                isFullscreen: isFullscreen,
-                language: language,
-                settingDrawer: settingDrawer
-            };
-        },
-        render() {
-            const _ns = vue.inject("__ns__", {}), _config = this.config, _emit = vue.inject("__emit__", {}), slots = this.$slots, _t = this.t, isFullscreen = this.isFullscreen, profile_url = _config.profile, _userDropdown = _config.userDropdown, _languageDropdown = _config.languageDropdown, _closeSettingDrawer = () => {
-                this.settingDrawer = !1;
-            };
-            return vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
-                class: _ns.b("header-tools")
-            }, [ slots[slots_config_headerToolsPrefix]?.(), vue.createVNode("li", null, [ vue.createVNode(elementPlus.ElDropdown, {
-                "show-timeout": 70,
-                "hide-timeout": 50,
-                trigger: "click",
-                onCommand: command => {
-                    this.language = command, _emit("changeLanguage", command), _config.onChangeLanguage && _config.onChangeLanguage(command);
-                }
-            }, {
-                default: () => vue.createVNode("div", null, [ vue.createVNode(elementPlus.ElIcon, {
-                    size: 16
-                }, {
-                    default: () => [ vue.createVNode("svg", {
-                        class: "icon",
-                        viewBox: "0 0 1070 1024",
-                        version: "1.1",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        "p-id": "1855",
-                        width: "128",
-                        height: "128"
-                    }, [ vue.createVNode("path", {
-                        d: "M232.58156522 358.13286957C244.86956522 394.4626087 265.17147826 425.984 293.48730435 453.76556522c24.04173913-26.17878261 42.2066087-58.23443478 53.96034782-95.63269565H232.58156522z",
-                        "p-id": "1856"
-                    }, null), vue.createVNode("path", {
-                        d: "M981.61530435 143.36h-448.77913044L507.19165217 6.05495652h-416.72347826c-45.94643478 0-83.34469565 37.39826087-83.34469565 83.34469565v708.42991305c0 45.94643478 37.39826087 83.34469565 83.34469565 83.34469565h379.85947826l-30.45286956 137.30504348h541.74052174c45.94643478 0 83.34469565-37.39826087 83.34469565-83.34469565V226.70469565c0-45.94643478-37.39826087-83.34469565-83.34469565-83.34469565zM415.83304348 564.35756522c-49.152-18.16486957-89.75582609-41.13808696-122.34573913-67.85113044-34.19269565 30.45286957-76.93356522 52.89182609-126.61982609 66.7826087l-17.09634783-28.31582609c48.61773913-12.82226087 89.22156522-32.05565217 121.2772174-59.30295652-33.12417391-33.65843478-56.0973913-72.65947826-68.91965218-117.00313044h-46.48069565v-32.05565217H276.92521739c-7.47965217-13.89078261-17.09634783-27.24730435-28.31582609-40.06956522l32.05565218-11.75373913c11.21947826 14.42504348 21.37043478 31.5213913 30.45286956 51.28904348h115.9346087v32.05565218h-46.48069565c-14.95930435 45.94643478-36.32973913 84.41321739-64.64556522 115.40034782 31.5213913 25.11026087 71.05669565 45.94643478 117.5373913 63.04278261l-17.63060869 27.78156522z m607.45460869 370.24278261c0 22.97321739-18.69913043 41.67234783-41.67234782 41.67234782H492.23234783l20.83617391-95.63269565h156.53843478l-89.22156522-497.39686957-0.53426087 2.67130435-3.73982608-19.76765217 1.06852174 0.53426087-32.58991305-181.64869565H982.14956522c22.97321739 0 41.67234783 18.69913043 41.67234782 41.67234782v707.89565218z",
-                        "p-id": "1857"
-                    }, null), vue.createVNode("path", {
-                        d: "M684.56626087 541.38434783h114.86608696v-30.45286957h-114.86608696V450.02573913h122.34573913v-30.45286956h-158.14121739v219.04695652h162.94956522V608.16695652h-127.15408696v-66.78260869z m239.88313043-65.71408696c-9.61669565 0-18.16486957 1.60278261-26.1787826 5.87686956-7.47965217 3.73982609-14.95930435 9.61669565-20.83617392 17.09634783V479.94434783h-34.72695652v158.67547826h34.72695652v-95.63269566c1.06852174-12.82226087 5.3426087-22.43895652 12.82226087-29.38434782 6.41113043-5.87686957 13.89078261-9.08243478 22.43895652-9.08243478 24.04173913 0 35.79547826 12.82226087 35.79547826 39.00104347v94.56417392h34.72695653v-97.76973913c1.06852174-43.27513043-19.2333913-64.64556522-58.76869566-64.64556522z",
-                        "p-id": "1858"
-                    }, null) ]) ]
-                }) ]),
-                dropdown: () => {
-                    let _slot;
-                    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 ]
-                    })))) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
-                        default: () => [ _slot ]
-                    });
-                    var s;
-                }
-            }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
-                style: {
-                    display: "inline-block",
-                    lineHeight: 1
-                },
-                onClick: this.toggle
-            }, [ vue.createVNode(elementPlus.ElIcon, {
-                size: 16
-            }, {
-                default: () => [ isFullscreen ? vue.createVNode("svg", {
-                    class: "icon",
-                    viewBox: "0 0 1024 1024",
-                    version: "1.1",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    "p-id": "2676",
-                    width: "128",
-                    height: "128"
-                }, [ vue.createVNode("path", {
-                    d: "M749.248 704H864a32 32 0 1 0 0-64H672a32 32 0 0 0-32 32v192a32 32 0 1 0 64 0v-114.752l137.36 137.36a32 32 0 1 0 45.232-45.264L749.248 704zM320 749.248V864a32 32 0 1 0 64 0V672a32 32 0 0 0-32-32H160a32 32 0 1 0 0 64h114.752l-137.36 137.36a32 32 0 1 0 45.264 45.232L320 749.248zM749.248 320H864a32 32 0 1 1 0 64H672a32 32 0 0 1-32-32V160a32 32 0 1 1 64 0v114.752l137.36-137.36a32 32 0 1 1 45.232 45.264L749.248 320zM320 274.752V160a32 32 0 1 1 64 0v192a32 32 0 0 1-32 32H160a32 32 0 1 1 0-64h114.752l-137.36-137.36a32 32 0 1 1 45.264-45.232L320 274.752z",
-                    "p-id": "2677"
-                }, null) ]) : vue.createVNode("svg", {
-                    class: "icon",
-                    viewBox: "0 0 1024 1024",
-                    version: "1.1",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    "p-id": "2522",
-                    width: "128",
-                    height: "128"
-                }, [ vue.createVNode("path", {
-                    d: "M237.248 192H352a32 32 0 1 0 0-64H160a32 32 0 0 0-32 32v192a32 32 0 1 0 64 0v-114.752l137.36 137.36a32 32 0 1 0 45.232-45.264L237.248 192zM832 237.248V352a32 32 0 1 0 64 0V160a32 32 0 0 0-32-32H672a32 32 0 1 0 0 64h114.752l-137.36 137.36a32 32 0 1 0 45.264 45.232L832 237.248zM237.248 832H352a32 32 0 1 1 0 64H160a32 32 0 0 1-32-32V672a32 32 0 1 1 64 0v114.752l137.36-137.36a32 32 0 1 1 45.232 45.264L237.248 832zM832 786.752V672a32 32 0 1 1 64 0v192a32 32 0 0 1-32 32H672a32 32 0 1 1 0-64h114.752l-137.36-137.36a32 32 0 1 1 45.264-45.232L832 786.752z",
-                    "p-id": "2523"
-                }, null) ]) ]
-            }) ]) ]), 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);
-                }
-            }, {
-                default: () => vue.createVNode("span", {
-                    class: _ns.be("header-tools", "user")
-                }, [ profile_url ? vue.createVNode("img", {
-                    class: "user-photo",
-                    src: profile_url
-                }, null) : null, vue.createVNode("span", null, [ _config.userName ]), vue.createVNode(elementPlus.ElIcon, {
-                    class: "el-icon--right"
-                }, {
-                    default: () => [ vue.createVNode(arrow_down_default, null, null) ]
-                }) ]),
-                dropdown: () => vue.createVNode(elementPlus.ElDropdownMenu, null, {
-                    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: {
-                    display: "inline-block",
-                    lineHeight: 1
-                },
-                onClick: () => {
-                    this.settingDrawer = !0;
-                }
-            }, [ vue.createVNode(elementPlus.ElIcon, {
-                size: 16
-            }, {
-                default: () => [ vue.createVNode(setting_default, null, null) ]
-            }) ]) ]) ]), vue.createVNode(vue.Teleport, {
-                to: "body"
-            }, {
-                default: () => [ vue.createVNode(elementPlus.ElDrawer, {
-                    modelValue: this.settingDrawer,
-                    "onUpdate:modelValue": $event => this.settingDrawer = $event,
-                    title: this.t("next.layout.systemSetting"),
-                    direction: "rtl",
-                    size: "380px",
-                    class: _ns.be("drawer", "setting"),
-                    "destroy-on-close": !0,
-                    beforeClose: _closeSettingDrawer
-                }, {
-                    default: () => [ vue.createVNode(LayoutSetting, null, null) ]
-                }) ]
-            }) ]);
-        }
-    });
-    const {getLightColor: getLightColor$4} = useChangeColor();
-    var Header$4 = vue.defineComponent({
-        setup: () => ({
-            ns: vue.inject("ns", {})
-        }),
-        render() {
-            const slots = this.$slots, _ns = this.ns, _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
-                const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
-                return isHeaderBarColorGradual ? {
-                    background: `linear-gradient(to bottom , ${color}, ${getLightColor$4(color, .5)})`
-                } : "";
-            })), __slots_header_tools = {};
-            return slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
-            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]()), 
-            vue.createVNode("header", {
-                class: _ns.b("header"),
-                style: headerStyle.value
-            }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
-                class: _ns.bf("header", "right")
-            }, [ vue.createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
-                default: () => [ __slots_header_tools ]
-            })) ]) ]);
-            var s;
-        }
     });
     function getDefaultExportFromCjs(x) {
         return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
@@ -2166,327 +1830,667 @@
                 function getExpandHeight(height) {
                     return height + 10 + getHeightOffset();
                 }
-                function positionScrollbars(element, width, height) {
-                    var expand = getExpandElement(element), shrink = getShrinkElement(element), expandWidth = getExpandWidth(width), expandHeight = getExpandHeight(height), shrinkWidth = function(width) {
-                        return 2 * width + getWidthOffset();
-                    }(width), shrinkHeight = function(height) {
-                        return 2 * height + getHeightOffset();
-                    }(height);
-                    expand.scrollLeft = expandWidth, expand.scrollTop = expandHeight, shrink.scrollLeft = shrinkWidth, 
-                    shrink.scrollTop = shrinkHeight;
+                function positionScrollbars(element, width, height) {
+                    var expand = getExpandElement(element), shrink = getShrinkElement(element), expandWidth = getExpandWidth(width), expandHeight = getExpandHeight(height), shrinkWidth = function(width) {
+                        return 2 * width + getWidthOffset();
+                    }(width), shrinkHeight = function(height) {
+                        return 2 * height + getHeightOffset();
+                    }(height);
+                    expand.scrollLeft = expandWidth, expand.scrollTop = expandHeight, shrink.scrollLeft = shrinkWidth, 
+                    shrink.scrollTop = shrinkHeight;
+                }
+                function injectContainerElement() {
+                    var container = getState(element).container;
+                    if (!container) {
+                        (container = document.createElement("div")).className = "erd_scroll_detection_container", 
+                        container.style.cssText = buildCssTextString([ "visibility: hidden", "display: inline", "width: 0px", "height: 0px", "z-index: -1", "overflow: hidden", "margin: 0", "padding: 0" ]), 
+                        getState(element).container = container, function(element) {
+                            element.className += " erd_scroll_detection_container_animation_active";
+                        }(container), element.appendChild(container);
+                        var onAnimationStart = function() {
+                            getState(element).onRendered && getState(element).onRendered();
+                        };
+                        addEvent(container, "animationstart", onAnimationStart), getState(element).onAnimationStart = onAnimationStart;
+                    }
+                    return container;
+                }
+                function injectScrollElements() {
+                    if (debug("Injecting elements"), getState(element)) {
+                        !function() {
+                            var style = getState(element).style;
+                            if ("static" === style.position) {
+                                element.style.setProperty("position", "relative", options.important ? "important" : "");
+                                var removeRelativeStyles = function(reporter, element, style, property) {
+                                    var value = style[property];
+                                    "auto" !== value && "0" !== function(value) {
+                                        return value.replace(/[^-\d\.]/g, "");
+                                    }(value) && (reporter.warn("An element that is positioned static has style." + property + "=" + value + " which is ignored due to the static positioning. The element will need to be positioned relative, so the style." + property + " will be set to 0. Element: ", element), 
+                                    element.style[property] = 0);
+                                };
+                                removeRelativeStyles(reporter, element, style, "top"), removeRelativeStyles(reporter, element, style, "right"), 
+                                removeRelativeStyles(reporter, element, style, "bottom"), removeRelativeStyles(reporter, element, style, "left");
+                            }
+                        }();
+                        var rootContainer = getState(element).container;
+                        rootContainer || (rootContainer = injectContainerElement());
+                        var left, top, bottom, right, scrollbarWidth = scrollbarSizes.width, scrollbarHeight = scrollbarSizes.height, containerContainerStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: hidden", "z-index: -1", "visibility: hidden", "width: 100%", "height: 100%", "left: 0px", "top: 0px" ]), containerStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: hidden", "z-index: -1", "visibility: hidden" ].concat([ "left: " + (left = (left = -(1 + scrollbarWidth)) ? left + "px" : "0"), "top: " + (top = (top = -(1 + scrollbarHeight)) ? top + "px" : "0"), "right: " + (right = (right = -scrollbarWidth) ? right + "px" : "0"), "bottom: " + (bottom = (bottom = -scrollbarHeight) ? bottom + "px" : "0") ])), expandStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: scroll", "z-index: -1", "visibility: hidden", "width: 100%", "height: 100%" ]), shrinkStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: scroll", "z-index: -1", "visibility: hidden", "width: 100%", "height: 100%" ]), expandChildStyle = buildCssTextString([ "position: absolute", "left: 0", "top: 0" ]), shrinkChildStyle = buildCssTextString([ "position: absolute", "width: 200%", "height: 200%" ]), containerContainer = document.createElement("div"), container = document.createElement("div"), expand = document.createElement("div"), expandChild = document.createElement("div"), shrink = document.createElement("div"), shrinkChild = document.createElement("div");
+                        containerContainer.dir = "ltr", containerContainer.style.cssText = containerContainerStyle, 
+                        containerContainer.className = "erd_scroll_detection_container", container.className = "erd_scroll_detection_container", 
+                        container.style.cssText = containerStyle, expand.style.cssText = expandStyle, expandChild.style.cssText = expandChildStyle, 
+                        shrink.style.cssText = shrinkStyle, shrinkChild.style.cssText = shrinkChildStyle, 
+                        expand.appendChild(expandChild), shrink.appendChild(shrinkChild), container.appendChild(expand), 
+                        container.appendChild(shrink), containerContainer.appendChild(container), rootContainer.appendChild(containerContainer), 
+                        addEvent(expand, "scroll", onExpandScroll), addEvent(shrink, "scroll", onShrinkScroll), 
+                        getState(element).onExpandScroll = onExpandScroll, getState(element).onShrinkScroll = onShrinkScroll;
+                    } else debug("Aborting because element has been uninstalled");
+                    function onExpandScroll() {
+                        var state = getState(element);
+                        state && state.onExpand ? state.onExpand() : debug("Aborting expand scroll handler: element has been uninstalled");
+                    }
+                    function onShrinkScroll() {
+                        var state = getState(element);
+                        state && state.onShrink ? state.onShrink() : debug("Aborting shrink scroll handler: element has been uninstalled");
+                    }
+                }
+                function registerListenersAndPositionElements() {
+                    function updateChildSizes(element, width, height) {
+                        var expandChild = function(element) {
+                            return getExpandElement(element).childNodes[0];
+                        }(element), expandWidth = getExpandWidth(width), expandHeight = getExpandHeight(height);
+                        expandChild.style.setProperty("width", expandWidth + "px", options.important ? "important" : ""), 
+                        expandChild.style.setProperty("height", expandHeight + "px", options.important ? "important" : "");
+                    }
+                    function updateDetectorElements(done) {
+                        var width = element.offsetWidth, height = element.offsetHeight, sizeChanged = width !== getState(element).lastWidth || height !== getState(element).lastHeight;
+                        debug("Storing current size", width, height), storeCurrentSize(element, width, height), 
+                        batchProcessor.add(0, (function() {
+                            if (sizeChanged) if (getState(element)) if (areElementsInjected()) {
+                                if (options.debug) {
+                                    var w = element.offsetWidth, h = element.offsetHeight;
+                                    w === width && h === height || reporter.warn(idHandler.get(element), "Scroll: Size changed before updating detector elements.");
+                                }
+                                updateChildSizes(element, width, height);
+                            } else debug("Aborting because element container has not been initialized"); else debug("Aborting because element has been uninstalled");
+                        })), batchProcessor.add(1, (function() {
+                            getState(element) ? areElementsInjected() ? positionScrollbars(element, width, height) : debug("Aborting because element container has not been initialized") : debug("Aborting because element has been uninstalled");
+                        })), sizeChanged && done && batchProcessor.add(2, (function() {
+                            getState(element) ? areElementsInjected() ? done() : debug("Aborting because element container has not been initialized") : debug("Aborting because element has been uninstalled");
+                        }));
+                    }
+                    function areElementsInjected() {
+                        return !!getState(element).container;
+                    }
+                    function notifyListenersIfNeeded() {
+                        debug("notifyListenersIfNeeded invoked");
+                        var state = getState(element);
+                        return void 0 === getState(element).lastNotifiedWidth && state.lastWidth === state.startSize.width && state.lastHeight === state.startSize.height ? debug("Not notifying: Size is the same as the start size, and there has been no notification yet.") : state.lastWidth === state.lastNotifiedWidth && state.lastHeight === state.lastNotifiedHeight ? debug("Not notifying: Size already notified") : (debug("Current size not notified, notifying..."), 
+                        state.lastNotifiedWidth = state.lastWidth, state.lastNotifiedHeight = state.lastHeight, 
+                        void forEach$1(getState(element).listeners, (function(listener) {
+                            listener(element);
+                        })));
+                    }
+                    function handleScroll() {
+                        debug("Scroll detected."), isUnrendered(element) ? debug("Scroll event fired while unrendered. Ignoring...") : updateDetectorElements(notifyListenersIfNeeded);
+                    }
+                    if (debug("registerListenersAndPositionElements invoked."), getState(element)) {
+                        getState(element).onRendered = function() {
+                            if (debug("startanimation triggered."), isUnrendered(element)) debug("Ignoring since element is still unrendered..."); else {
+                                debug("Element rendered.");
+                                var expand = getExpandElement(element), shrink = getShrinkElement(element);
+                                0 !== expand.scrollLeft && 0 !== expand.scrollTop && 0 !== shrink.scrollLeft && 0 !== shrink.scrollTop || (debug("Scrollbars out of sync. Updating detector elements..."), 
+                                updateDetectorElements(notifyListenersIfNeeded));
+                            }
+                        }, getState(element).onExpand = handleScroll, getState(element).onShrink = handleScroll;
+                        var style = getState(element).style;
+                        updateChildSizes(element, style.width, style.height);
+                    } else debug("Aborting because element has been uninstalled");
+                }
+                function finalizeDomMutation() {
+                    if (debug("finalizeDomMutation invoked."), getState(element)) {
+                        var style = getState(element).style;
+                        storeCurrentSize(element, style.width, style.height), positionScrollbars(element, style.width, style.height);
+                    } else debug("Aborting because element has been uninstalled");
+                }
+                function ready() {
+                    callback(element);
+                }
+                function install() {
+                    var style;
+                    debug("Installing..."), getState(element).listeners = [], style = getStyle(), getState(element).startSize = {
+                        width: style.width,
+                        height: style.height
+                    }, debug("Element start size", getState(element).startSize), batchProcessor.add(0, storeStyle), 
+                    batchProcessor.add(1, injectScrollElements), batchProcessor.add(2, registerListenersAndPositionElements), 
+                    batchProcessor.add(3, finalizeDomMutation), batchProcessor.add(4, ready);
+                }
+                callback || (callback = element, element = options, options = null), options = options || {}, 
+                debug("Making detectable..."), !function(element) {
+                    return !function(element) {
+                        var isInShadowRoot = element.getRootNode && element.getRootNode().contains(element);
+                        return element === element.ownerDocument.body || element.ownerDocument.body.contains(element) || isInShadowRoot;
+                    }(element) || null === window.getComputedStyle(element);
+                }(element) ? install() : (debug("Element is detached"), injectContainerElement(), 
+                debug("Waiting until element is attached..."), getState(element).onRendered = function() {
+                    debug("Element is now attached"), install();
+                });
+            },
+            addListener: function(element, listener) {
+                if (!getState(element).listeners.push) throw new Error("Cannot add listener to an element that is not detectable.");
+                getState(element).listeners.push(listener);
+            },
+            uninstall: function(element) {
+                var state = getState(element);
+                state && (state.onExpandScroll && removeEvent(getExpandElement(element), "scroll", state.onExpandScroll), 
+                state.onShrinkScroll && removeEvent(getShrinkElement(element), "scroll", state.onShrinkScroll), 
+                state.onAnimationStart && removeEvent(state.container, "animationstart", state.onAnimationStart), 
+                state.container && element.removeChild(state.container));
+            },
+            initDocument: initDocument
+        };
+    };
+    function isCollection(obj) {
+        return Array.isArray(obj) || void 0 !== obj.length;
+    }
+    function toArray(collection) {
+        if (Array.isArray(collection)) return collection;
+        var array = [];
+        return forEach(collection, (function(obj) {
+            array.push(obj);
+        })), array;
+    }
+    function isElement(obj) {
+        return obj && 1 === obj.nodeType;
+    }
+    var elementResizeDetector = function(options) {
+        var idHandler;
+        if ((options = options || {}).idHandler) idHandler = {
+            get: function(element) {
+                return options.idHandler.get(element, !0);
+            },
+            set: options.idHandler.set
+        }; else {
+            var idGenerator = idGeneratorMaker(), defaultIdHandler = idHandlerMaker({
+                idGenerator: idGenerator,
+                stateHandler: stateHandler
+            });
+            idHandler = defaultIdHandler;
+        }
+        var reporter = options.reporter;
+        reporter || (reporter = reporterMaker(!1 === reporter));
+        var batchProcessor = getOption(options, "batchProcessor", batchProcessorMaker({
+            reporter: reporter
+        })), globalOptions = {};
+        globalOptions.callOnAdd = !!getOption(options, "callOnAdd", !0), globalOptions.debug = !!getOption(options, "debug", !1);
+        var detectionStrategy, eventListenerHandler = listenerHandlerMaker(idHandler), elementUtils = elementUtilsMaker({
+            stateHandler: stateHandler
+        }), desiredStrategy = getOption(options, "strategy", "object"), importantCssRules = getOption(options, "important", !1), strategyOptions = {
+            reporter: reporter,
+            batchProcessor: batchProcessor,
+            stateHandler: stateHandler,
+            idHandler: idHandler,
+            important: importantCssRules
+        };
+        if ("scroll" === desiredStrategy && (browserDetector.isLegacyOpera() ? (reporter.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."), 
+        desiredStrategy = "object") : browserDetector.isIE(9) && (reporter.warn("Scroll strategy is not supported on IE9. Changing to object strategy."), 
+        desiredStrategy = "object")), "scroll" === desiredStrategy) detectionStrategy = scrollStrategyMaker(strategyOptions); else {
+            if ("object" !== desiredStrategy) throw new Error("Invalid strategy name: " + desiredStrategy);
+            detectionStrategy = objectStrategyMaker(strategyOptions);
+        }
+        var onReadyCallbacks = {};
+        return {
+            listenTo: function(options, elements, listener) {
+                function onResizeCallback(element) {
+                    var listeners = eventListenerHandler.get(element);
+                    forEach(listeners, (function(listener) {
+                        listener(element);
+                    }));
+                }
+                function addListener(callOnAdd, element, listener) {
+                    eventListenerHandler.add(element, listener), callOnAdd && listener(element);
                 }
-                function injectContainerElement() {
-                    var container = getState(element).container;
-                    if (!container) {
-                        (container = document.createElement("div")).className = "erd_scroll_detection_container", 
-                        container.style.cssText = buildCssTextString([ "visibility: hidden", "display: inline", "width: 0px", "height: 0px", "z-index: -1", "overflow: hidden", "margin: 0", "padding: 0" ]), 
-                        getState(element).container = container, function(element) {
-                            element.className += " erd_scroll_detection_container_animation_active";
-                        }(container), element.appendChild(container);
-                        var onAnimationStart = function() {
-                            getState(element).onRendered && getState(element).onRendered();
-                        };
-                        addEvent(container, "animationstart", onAnimationStart), getState(element).onAnimationStart = onAnimationStart;
-                    }
-                    return container;
+                if (listener || (listener = elements, elements = options, options = {}), !elements) throw new Error("At least one element required.");
+                if (!listener) throw new Error("Listener required.");
+                if (isElement(elements)) elements = [ elements ]; else {
+                    if (!isCollection(elements)) return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");
+                    elements = toArray(elements);
                 }
-                function injectScrollElements() {
-                    if (debug("Injecting elements"), getState(element)) {
-                        !function() {
-                            var style = getState(element).style;
-                            if ("static" === style.position) {
-                                element.style.setProperty("position", "relative", options.important ? "important" : "");
-                                var removeRelativeStyles = function(reporter, element, style, property) {
-                                    var value = style[property];
-                                    "auto" !== value && "0" !== function(value) {
-                                        return value.replace(/[^-\d\.]/g, "");
-                                    }(value) && (reporter.warn("An element that is positioned static has style." + property + "=" + value + " which is ignored due to the static positioning. The element will need to be positioned relative, so the style." + property + " will be set to 0. Element: ", element), 
-                                    element.style[property] = 0);
-                                };
-                                removeRelativeStyles(reporter, element, style, "top"), removeRelativeStyles(reporter, element, style, "right"), 
-                                removeRelativeStyles(reporter, element, style, "bottom"), removeRelativeStyles(reporter, element, style, "left");
+                var elementsReady = 0, callOnAdd = getOption(options, "callOnAdd", globalOptions.callOnAdd), onReadyCallback = getOption(options, "onReady", (function() {})), debug = getOption(options, "debug", globalOptions.debug);
+                forEach(elements, (function(element) {
+                    stateHandler.getState(element) || (stateHandler.initState(element), idHandler.set(element));
+                    var id = idHandler.get(element);
+                    if (debug && reporter.log("Attaching listener to element", id, element), !elementUtils.isDetectable(element)) return debug && reporter.log(id, "Not detectable."), 
+                    elementUtils.isBusy(element) ? (debug && reporter.log(id, "System busy making it detectable"), 
+                    addListener(callOnAdd, element, listener), onReadyCallbacks[id] = onReadyCallbacks[id] || [], 
+                    void onReadyCallbacks[id].push((function() {
+                        ++elementsReady === elements.length && onReadyCallback();
+                    }))) : (debug && reporter.log(id, "Making detectable..."), elementUtils.markBusy(element, !0), 
+                    detectionStrategy.makeDetectable({
+                        debug: debug,
+                        important: importantCssRules
+                    }, element, (function(element) {
+                        if (debug && reporter.log(id, "onElementDetectable"), stateHandler.getState(element)) {
+                            elementUtils.markAsDetectable(element), elementUtils.markBusy(element, !1), detectionStrategy.addListener(element, onResizeCallback), 
+                            addListener(callOnAdd, element, listener);
+                            var state = stateHandler.getState(element);
+                            if (state && state.startSize) {
+                                var width = element.offsetWidth, height = element.offsetHeight;
+                                state.startSize.width === width && state.startSize.height === height || onResizeCallback(element);
                             }
-                        }();
-                        var rootContainer = getState(element).container;
-                        rootContainer || (rootContainer = injectContainerElement());
-                        var left, top, bottom, right, scrollbarWidth = scrollbarSizes.width, scrollbarHeight = scrollbarSizes.height, containerContainerStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: hidden", "z-index: -1", "visibility: hidden", "width: 100%", "height: 100%", "left: 0px", "top: 0px" ]), containerStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: hidden", "z-index: -1", "visibility: hidden" ].concat([ "left: " + (left = (left = -(1 + scrollbarWidth)) ? left + "px" : "0"), "top: " + (top = (top = -(1 + scrollbarHeight)) ? top + "px" : "0"), "right: " + (right = (right = -scrollbarWidth) ? right + "px" : "0"), "bottom: " + (bottom = (bottom = -scrollbarHeight) ? bottom + "px" : "0") ])), expandStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: scroll", "z-index: -1", "visibility: hidden", "width: 100%", "height: 100%" ]), shrinkStyle = buildCssTextString([ "position: absolute", "flex: none", "overflow: scroll", "z-index: -1", "visibility: hidden", "width: 100%", "height: 100%" ]), expandChildStyle = buildCssTextString([ "position: absolute", "left: 0", "top: 0" ]), shrinkChildStyle = buildCssTextString([ "position: absolute", "width: 200%", "height: 200%" ]), containerContainer = document.createElement("div"), container = document.createElement("div"), expand = document.createElement("div"), expandChild = document.createElement("div"), shrink = document.createElement("div"), shrinkChild = document.createElement("div");
-                        containerContainer.dir = "ltr", containerContainer.style.cssText = containerContainerStyle, 
-                        containerContainer.className = "erd_scroll_detection_container", container.className = "erd_scroll_detection_container", 
-                        container.style.cssText = containerStyle, expand.style.cssText = expandStyle, expandChild.style.cssText = expandChildStyle, 
-                        shrink.style.cssText = shrinkStyle, shrinkChild.style.cssText = shrinkChildStyle, 
-                        expand.appendChild(expandChild), shrink.appendChild(shrinkChild), container.appendChild(expand), 
-                        container.appendChild(shrink), containerContainer.appendChild(container), rootContainer.appendChild(containerContainer), 
-                        addEvent(expand, "scroll", onExpandScroll), addEvent(shrink, "scroll", onShrinkScroll), 
-                        getState(element).onExpandScroll = onExpandScroll, getState(element).onShrinkScroll = onShrinkScroll;
-                    } else debug("Aborting because element has been uninstalled");
-                    function onExpandScroll() {
-                        var state = getState(element);
-                        state && state.onExpand ? state.onExpand() : debug("Aborting expand scroll handler: element has been uninstalled");
-                    }
-                    function onShrinkScroll() {
-                        var state = getState(element);
-                        state && state.onShrink ? state.onShrink() : debug("Aborting shrink scroll handler: element has been uninstalled");
-                    }
+                            onReadyCallbacks[id] && forEach(onReadyCallbacks[id], (function(callback) {
+                                callback();
+                            }));
+                        } else debug && reporter.log(id, "Element uninstalled before being detectable.");
+                        delete onReadyCallbacks[id], ++elementsReady === elements.length && onReadyCallback();
+                    })));
+                    debug && reporter.log(id, "Already detecable, adding listener."), addListener(callOnAdd, element, listener), 
+                    elementsReady++;
+                })), elementsReady === elements.length && onReadyCallback();
+            },
+            removeListener: eventListenerHandler.removeListener,
+            removeAllListeners: eventListenerHandler.removeAllListeners,
+            uninstall: function(elements) {
+                if (!elements) return reporter.error("At least one element is required.");
+                if (isElement(elements)) elements = [ elements ]; else {
+                    if (!isCollection(elements)) return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");
+                    elements = toArray(elements);
                 }
-                function registerListenersAndPositionElements() {
-                    function updateChildSizes(element, width, height) {
-                        var expandChild = function(element) {
-                            return getExpandElement(element).childNodes[0];
-                        }(element), expandWidth = getExpandWidth(width), expandHeight = getExpandHeight(height);
-                        expandChild.style.setProperty("width", expandWidth + "px", options.important ? "important" : ""), 
-                        expandChild.style.setProperty("height", expandHeight + "px", options.important ? "important" : "");
-                    }
-                    function updateDetectorElements(done) {
-                        var width = element.offsetWidth, height = element.offsetHeight, sizeChanged = width !== getState(element).lastWidth || height !== getState(element).lastHeight;
-                        debug("Storing current size", width, height), storeCurrentSize(element, width, height), 
-                        batchProcessor.add(0, (function() {
-                            if (sizeChanged) if (getState(element)) if (areElementsInjected()) {
-                                if (options.debug) {
-                                    var w = element.offsetWidth, h = element.offsetHeight;
-                                    w === width && h === height || reporter.warn(idHandler.get(element), "Scroll: Size changed before updating detector elements.");
-                                }
-                                updateChildSizes(element, width, height);
-                            } else debug("Aborting because element container has not been initialized"); else debug("Aborting because element has been uninstalled");
-                        })), batchProcessor.add(1, (function() {
-                            getState(element) ? areElementsInjected() ? positionScrollbars(element, width, height) : debug("Aborting because element container has not been initialized") : debug("Aborting because element has been uninstalled");
-                        })), sizeChanged && done && batchProcessor.add(2, (function() {
-                            getState(element) ? areElementsInjected() ? done() : debug("Aborting because element container has not been initialized") : debug("Aborting because element has been uninstalled");
-                        }));
-                    }
-                    function areElementsInjected() {
-                        return !!getState(element).container;
-                    }
-                    function notifyListenersIfNeeded() {
-                        debug("notifyListenersIfNeeded invoked");
-                        var state = getState(element);
-                        return void 0 === getState(element).lastNotifiedWidth && state.lastWidth === state.startSize.width && state.lastHeight === state.startSize.height ? debug("Not notifying: Size is the same as the start size, and there has been no notification yet.") : state.lastWidth === state.lastNotifiedWidth && state.lastHeight === state.lastNotifiedHeight ? debug("Not notifying: Size already notified") : (debug("Current size not notified, notifying..."), 
-                        state.lastNotifiedWidth = state.lastWidth, state.lastNotifiedHeight = state.lastHeight, 
-                        void forEach$1(getState(element).listeners, (function(listener) {
-                            listener(element);
-                        })));
+                forEach(elements, (function(element) {
+                    eventListenerHandler.removeAllListeners(element), detectionStrategy.uninstall(element), 
+                    stateHandler.cleanState(element);
+                }));
+            },
+            initDocument: function(targetDocument) {
+                detectionStrategy.initDocument && detectionStrategy.initDocument(targetDocument);
+            }
+        };
+    };
+    function getOption(options, name, defaultValue) {
+        var value = options[name];
+        return null == value && void 0 !== defaultValue ? defaultValue : value;
+    }
+    var elementResizeDetectorMaker = getDefaultExportFromCjs(elementResizeDetector);
+    const elementResize = (el, cb) => {
+        const erd = elementResizeDetectorMaker();
+        let timer = null;
+        erd.listenTo(el, (() => {
+            null !== timer && clearTimeout(timer), timer = setTimeout((() => {
+                cb && cb(el), clearTimeout(timer);
+            }), 200);
+        })), vue.onUnmounted((() => {
+            erd.removeListener(el, (() => {}));
+        }));
+    }, deepClone = source => {
+        if (null == source) return source;
+        let target;
+        if ("object" == typeof source) {
+            target = Array.isArray(source) ? [] : {};
+            for (let key in source) "object" == typeof source[key] ? target[key] = deepClone(source[key]) : target[key] = source[key];
+        } else target = source;
+        return target;
+    }, arrayObjNoRepeat = (arr, property) => {
+        const result = [], uniqueMap = new Map;
+        for (const item of arr) {
+            const key = item[property];
+            uniqueMap.has(key) || (uniqueMap.set(key, !0), result.push(item));
+        }
+        return result;
+    }, isValueExist = value => null != value && ("string" == typeof value ? "" !== value.trim() : !1 !== value), valueExist = (...arg) => {
+        let exist = null;
+        for (let i = 0; i < arg.length; i++) {
+            const val = arg[i];
+            if (null != val) {
+                exist = val;
+                break;
+            }
+        }
+        return exist;
+    }, shareObjectProperty = (target, source, key) => (Object.defineProperty(target, key, {
+        get: () => source[key]
+    }), {
+        target: target,
+        source: source
+    });
+    var LayoutSetting = vue.defineComponent({
+        setup() {
+            const config = vue.inject("options", {});
+            return isValueExist(config.setting.headerBarFontActiveColor) || (config.setting.headerBarFontActiveColor = config.setting.themeColor), 
+            {
+                config: config
+            };
+        },
+        render() {
+            const _slots = vue.inject("__slots__", {}), _ns = vue.inject("__ns__", {}), _config = this.config, _updateOptions = vue.inject("updateOptions", null), settingConfig = vue.reactive({
+                ..._config.setting
+            }), _changeUpdateOptions = () => {
+                const options = {
+                    ..._config,
+                    setting: {
+                        ...settingConfig
                     }
-                    function handleScroll() {
-                        debug("Scroll detected."), isUnrendered(element) ? debug("Scroll event fired while unrendered. Ignoring...") : updateDetectorElements(notifyListenersIfNeeded);
+                };
+                _updateOptions(options);
+            }, _onChangeThemeColor = color => {
+                if (!color) return elementPlus.ElMessage({
+                    type: "warning",
+                    message: "主题颜色不能为空"
+                }), !1;
+                settingConfig.themeColor = color, nextUseCssTheme("--el-color-primary", color), 
+                _changeUpdateOptions();
+            }, _onChangeSwitchDark = () => {
+                const body = document.documentElement;
+                settingConfig.isDark ? body.setAttribute("data-theme", "dark") : body.setAttribute("data-theme", ""), 
+                _changeUpdateOptions();
+            }, _onChangeColor = (color, key, cssvar) => {
+                settingConfig[key] = color, nextUseCssVar(cssvar, color), _changeUpdateOptions();
+            }, layouts = [ {
+                type: "defaults",
+                text: "默认"
+            }, {
+                type: "classic",
+                text: "经典"
+            }, {
+                type: "transverse",
+                text: "横向"
+            }, {
+                type: "columns",
+                text: "分栏"
+            }, {
+                type: "composite",
+                text: "综合"
+            } ];
+            return vue.createVNode(elementPlus.ElScrollbar, null, {
+                default: () => [ vue.createVNode(elementPlus.ElDivider, {
+                    "border-style": "dashed"
+                }, {
+                    default: () => [ vue.createTextVNode("全局主题") ]
+                }), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item")
+                }, [ vue.createVNode("span", {
+                    class: _ns.be("config-bar-item", "label")
+                }, [ vue.createTextVNode("主题颜色") ]), vue.createVNode("div", {
+                    class: _ns.be("config-bar-item", "value")
+                }, [ vue.createVNode(elementPlus.ElColorPicker, {
+                    modelValue: settingConfig.themeColor,
+                    "onUpdate:modelValue": $event => settingConfig.themeColor = $event,
+                    predefine: [ "#409eff", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
+                    "show-alpha": !0,
+                    onChange: _onChangeThemeColor
+                }, null) ]) ]), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item")
+                }, [ vue.createVNode("span", {
+                    class: _ns.be("config-bar-item", "label")
+                }, [ vue.createTextVNode("暗黑模式") ]), vue.createVNode("div", {
+                    class: _ns.be("config-bar-item", "value")
+                }, [ vue.createVNode(elementPlus.ElSwitch, {
+                    modelValue: settingConfig.isDark,
+                    "onUpdate:modelValue": $event => settingConfig.isDark = $event,
+                    "inline-prompt": !0,
+                    size: "large",
+                    "active-icon": moon_night_default,
+                    "inactive-icon": sunny_default,
+                    "active-color": "#1f1f1f",
+                    "inactive-color": "#dcdfe6",
+                    onChange: _onChangeSwitchDark
+                }, null) ]) ]), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item")
+                }, [ vue.createVNode("span", {
+                    class: _ns.be("config-bar-item", "label")
+                }, [ vue.createTextVNode("顶栏背景颜色") ]), vue.createVNode("div", {
+                    class: _ns.be("config-bar-item", "value")
+                }, [ vue.createVNode(elementPlus.ElColorPicker, {
+                    modelValue: settingConfig.headerBarColor,
+                    "onUpdate:modelValue": $event => settingConfig.headerBarColor = $event,
+                    predefine: [ "#282c34", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
+                    "show-alpha": !0,
+                    onChange: color => _onChangeColor(color, "headerBarColor", "--next-layout-bg-color")
+                }, null) ]) ]), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item")
+                }, [ vue.createVNode("span", {
+                    class: _ns.be("config-bar-item", "label")
+                }, [ vue.createTextVNode("顶栏字体颜色") ]), vue.createVNode("div", {
+                    class: _ns.be("config-bar-item", "value")
+                }, [ vue.createVNode(elementPlus.ElColorPicker, {
+                    modelValue: settingConfig.headerBarFontColor,
+                    "onUpdate:modelValue": $event => settingConfig.headerBarFontColor = $event,
+                    predefine: [ "#282c34", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
+                    "show-alpha": !0,
+                    onChange: color => _onChangeColor(color, "headerBarFontColor", "--next-layout-font-color")
+                }, null) ]) ]), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item")
+                }, [ vue.createVNode("span", {
+                    class: _ns.be("config-bar-item", "label")
+                }, [ vue.createTextVNode("顶栏激活字体颜色") ]), vue.createVNode("div", {
+                    class: _ns.be("config-bar-item", "value")
+                }, [ vue.createVNode(elementPlus.ElColorPicker, {
+                    modelValue: settingConfig.headerBarFontActiveColor,
+                    "onUpdate:modelValue": $event => settingConfig.headerBarFontActiveColor = $event,
+                    predefine: [ "#282c34", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#FB07A0" ],
+                    "show-alpha": !0,
+                    onChange: color => _onChangeColor(color, "headerBarFontActiveColor", "--next-layout-active-color")
+                }, null) ]) ]), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item")
+                }, [ vue.createVNode("span", {
+                    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"), {
+                    modelValue: settingConfig.isHeaderBarColorGradual,
+                    "onUpdate:modelValue": $event => settingConfig.isHeaderBarColorGradual = $event,
+                    onChange: _changeUpdateOptions
+                }, null) ]) ]), vue.createVNode(elementPlus.ElDivider, {
+                    "border-style": "dashed"
+                }, {
+                    default: () => [ vue.createTextVNode("布局方式") ]
+                }), vue.createVNode("ul", {
+                    class: _ns.b("config-bar-layout")
+                }, [ layouts.map((item => vue.createVNode("li", {
+                    class: [ _ns.be("config-bar-layout", item.type), _ns.is("active", settingConfig.layout === item.type) ],
+                    onClick: event => ((event, layout) => {
+                        event.stopPropagation(), settingConfig.layout = layout.type, _changeUpdateOptions();
+                    })(event, item)
+                }, [ vue.createVNode("div", {
+                    class: "layout-wrap"
+                }, [ vue.createVNode("div", {
+                    class: "layout-box"
+                }, [ vue.createVNode("p", {
+                    class: "layout-text"
+                }, [ item.text ]) ]) ]), vue.createVNode("aside", null, null) ]))) ]), vue.createVNode("div", {
+                    class: _ns.b("config-bar-item"),
+                    style: {
+                        "margin-top": "20px"
                     }
-                    if (debug("registerListenersAndPositionElements invoked."), getState(element)) {
-                        getState(element).onRendered = function() {
-                            if (debug("startanimation triggered."), isUnrendered(element)) debug("Ignoring since element is still unrendered..."); else {
-                                debug("Element rendered.");
-                                var expand = getExpandElement(element), shrink = getShrinkElement(element);
-                                0 !== expand.scrollLeft && 0 !== expand.scrollTop && 0 !== shrink.scrollLeft && 0 !== shrink.scrollTop || (debug("Scrollbars out of sync. Updating detector elements..."), 
-                                updateDetectorElements(notifyListenersIfNeeded));
-                            }
-                        }, getState(element).onExpand = handleScroll, getState(element).onShrink = handleScroll;
-                        var style = getState(element).style;
-                        updateChildSizes(element, style.width, style.height);
-                    } else debug("Aborting because element has been uninstalled");
-                }
-                function finalizeDomMutation() {
-                    if (debug("finalizeDomMutation invoked."), getState(element)) {
-                        var style = getState(element).style;
-                        storeCurrentSize(element, style.width, style.height), positionScrollbars(element, style.width, style.height);
-                    } else debug("Aborting because element has been uninstalled");
-                }
-                function ready() {
-                    callback(element);
-                }
-                function install() {
-                    var style;
-                    debug("Installing..."), getState(element).listeners = [], style = getStyle(), getState(element).startSize = {
-                        width: style.width,
-                        height: style.height
-                    }, debug("Element start size", getState(element).startSize), batchProcessor.add(0, storeStyle), 
-                    batchProcessor.add(1, injectScrollElements), batchProcessor.add(2, registerListenersAndPositionElements), 
-                    batchProcessor.add(3, finalizeDomMutation), batchProcessor.add(4, ready);
-                }
-                callback || (callback = element, element = options, options = null), options = options || {}, 
-                debug("Making detectable..."), !function(element) {
-                    return !function(element) {
-                        var isInShadowRoot = element.getRootNode && element.getRootNode().contains(element);
-                        return element === element.ownerDocument.body || element.ownerDocument.body.contains(element) || isInShadowRoot;
-                    }(element) || null === window.getComputedStyle(element);
-                }(element) ? install() : (debug("Element is detached"), injectContainerElement(), 
-                debug("Waiting until element is attached..."), getState(element).onRendered = function() {
-                    debug("Element is now attached"), install();
-                });
-            },
-            addListener: function(element, listener) {
-                if (!getState(element).listeners.push) throw new Error("Cannot add listener to an element that is not detectable.");
-                getState(element).listeners.push(listener);
-            },
-            uninstall: function(element) {
-                var state = getState(element);
-                state && (state.onExpandScroll && removeEvent(getExpandElement(element), "scroll", state.onExpandScroll), 
-                state.onShrinkScroll && removeEvent(getShrinkElement(element), "scroll", state.onShrinkScroll), 
-                state.onAnimationStart && removeEvent(state.container, "animationstart", state.onAnimationStart), 
-                state.container && element.removeChild(state.container));
-            },
-            initDocument: initDocument
-        };
-    };
-    function isCollection(obj) {
-        return Array.isArray(obj) || void 0 !== obj.length;
-    }
-    function toArray(collection) {
-        if (Array.isArray(collection)) return collection;
-        var array = [];
-        return forEach(collection, (function(obj) {
-            array.push(obj);
-        })), array;
-    }
-    function isElement(obj) {
-        return obj && 1 === obj.nodeType;
-    }
-    var elementResizeDetector = function(options) {
-        var idHandler;
-        if ((options = options || {}).idHandler) idHandler = {
-            get: function(element) {
-                return options.idHandler.get(element, !0);
-            },
-            set: options.idHandler.set
-        }; else {
-            var idGenerator = idGeneratorMaker(), defaultIdHandler = idHandlerMaker({
-                idGenerator: idGenerator,
-                stateHandler: stateHandler
+                }, [ vue.createVNode("span", {
+                    class: _ns.be("config-bar-item", "label")
+                }, [ vue.createTextVNode("是否显示标签栏") ]), vue.createVNode("div", {
+                    class: _ns.be("config-bar-item", "value")
+                }, [ vue.createVNode(elementPlus.ElSwitch, {
+                    modelValue: _config.showTabs,
+                    "onUpdate:modelValue": $event => _config.showTabs = $event
+                }, null) ]) ]), _slots.setting?.({
+                    config: settingConfig
+                }) ]
             });
-            idHandler = defaultIdHandler;
-        }
-        var reporter = options.reporter;
-        reporter || (reporter = reporterMaker(!1 === reporter));
-        var batchProcessor = getOption(options, "batchProcessor", batchProcessorMaker({
-            reporter: reporter
-        })), globalOptions = {};
-        globalOptions.callOnAdd = !!getOption(options, "callOnAdd", !0), globalOptions.debug = !!getOption(options, "debug", !1);
-        var detectionStrategy, eventListenerHandler = listenerHandlerMaker(idHandler), elementUtils = elementUtilsMaker({
-            stateHandler: stateHandler
-        }), desiredStrategy = getOption(options, "strategy", "object"), importantCssRules = getOption(options, "important", !1), strategyOptions = {
-            reporter: reporter,
-            batchProcessor: batchProcessor,
-            stateHandler: stateHandler,
-            idHandler: idHandler,
-            important: importantCssRules
-        };
-        if ("scroll" === desiredStrategy && (browserDetector.isLegacyOpera() ? (reporter.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."), 
-        desiredStrategy = "object") : browserDetector.isIE(9) && (reporter.warn("Scroll strategy is not supported on IE9. Changing to object strategy."), 
-        desiredStrategy = "object")), "scroll" === desiredStrategy) detectionStrategy = scrollStrategyMaker(strategyOptions); else {
-            if ("object" !== desiredStrategy) throw new Error("Invalid strategy name: " + desiredStrategy);
-            detectionStrategy = objectStrategyMaker(strategyOptions);
         }
-        var onReadyCallbacks = {};
-        return {
-            listenTo: function(options, elements, listener) {
-                function onResizeCallback(element) {
-                    var listeners = eventListenerHandler.get(element);
-                    forEach(listeners, (function(listener) {
-                        listener(element);
-                    }));
+    });
+    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);
+            return {
+                locale: locale,
+                config: config,
+                t: t,
+                toggle: toggle,
+                isFullscreen: isFullscreen,
+                language: language,
+                settingDrawer: settingDrawer
+            };
+        },
+        render() {
+            const _ns = vue.inject("__ns__", {}), _config = this.config, _emit = vue.inject("__emit__", {}), slots = this.$slots, _t = this.t, isFullscreen = this.isFullscreen, profile_url = _config.profile, _userDropdown = _config.userDropdown, _languageDropdown = _config.languageDropdown, _closeSettingDrawer = () => {
+                this.settingDrawer = !1;
+            };
+            return vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
+                class: _ns.b("header-tools")
+            }, [ slots[slots_config_headerToolsPrefix]?.(), vue.createVNode("li", null, [ vue.createVNode(elementPlus.ElDropdown, {
+                "show-timeout": 70,
+                "hide-timeout": 50,
+                trigger: "click",
+                onCommand: command => {
+                    this.language = command, _emit("changeLanguage", command), _config.onChangeLanguage && _config.onChangeLanguage(command);
                 }
-                function addListener(callOnAdd, element, listener) {
-                    eventListenerHandler.add(element, listener), callOnAdd && listener(element);
+            }, {
+                default: () => vue.createVNode("div", null, [ vue.createVNode(elementPlus.ElIcon, {
+                    size: 16
+                }, {
+                    default: () => [ vue.createVNode("svg", {
+                        class: "icon",
+                        viewBox: "0 0 1070 1024",
+                        version: "1.1",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "p-id": "1855",
+                        width: "128",
+                        height: "128"
+                    }, [ vue.createVNode("path", {
+                        d: "M232.58156522 358.13286957C244.86956522 394.4626087 265.17147826 425.984 293.48730435 453.76556522c24.04173913-26.17878261 42.2066087-58.23443478 53.96034782-95.63269565H232.58156522z",
+                        "p-id": "1856"
+                    }, null), vue.createVNode("path", {
+                        d: "M981.61530435 143.36h-448.77913044L507.19165217 6.05495652h-416.72347826c-45.94643478 0-83.34469565 37.39826087-83.34469565 83.34469565v708.42991305c0 45.94643478 37.39826087 83.34469565 83.34469565 83.34469565h379.85947826l-30.45286956 137.30504348h541.74052174c45.94643478 0 83.34469565-37.39826087 83.34469565-83.34469565V226.70469565c0-45.94643478-37.39826087-83.34469565-83.34469565-83.34469565zM415.83304348 564.35756522c-49.152-18.16486957-89.75582609-41.13808696-122.34573913-67.85113044-34.19269565 30.45286957-76.93356522 52.89182609-126.61982609 66.7826087l-17.09634783-28.31582609c48.61773913-12.82226087 89.22156522-32.05565217 121.2772174-59.30295652-33.12417391-33.65843478-56.0973913-72.65947826-68.91965218-117.00313044h-46.48069565v-32.05565217H276.92521739c-7.47965217-13.89078261-17.09634783-27.24730435-28.31582609-40.06956522l32.05565218-11.75373913c11.21947826 14.42504348 21.37043478 31.5213913 30.45286956 51.28904348h115.9346087v32.05565218h-46.48069565c-14.95930435 45.94643478-36.32973913 84.41321739-64.64556522 115.40034782 31.5213913 25.11026087 71.05669565 45.94643478 117.5373913 63.04278261l-17.63060869 27.78156522z m607.45460869 370.24278261c0 22.97321739-18.69913043 41.67234783-41.67234782 41.67234782H492.23234783l20.83617391-95.63269565h156.53843478l-89.22156522-497.39686957-0.53426087 2.67130435-3.73982608-19.76765217 1.06852174 0.53426087-32.58991305-181.64869565H982.14956522c22.97321739 0 41.67234783 18.69913043 41.67234782 41.67234782v707.89565218z",
+                        "p-id": "1857"
+                    }, null), vue.createVNode("path", {
+                        d: "M684.56626087 541.38434783h114.86608696v-30.45286957h-114.86608696V450.02573913h122.34573913v-30.45286956h-158.14121739v219.04695652h162.94956522V608.16695652h-127.15408696v-66.78260869z m239.88313043-65.71408696c-9.61669565 0-18.16486957 1.60278261-26.1787826 5.87686956-7.47965217 3.73982609-14.95930435 9.61669565-20.83617392 17.09634783V479.94434783h-34.72695652v158.67547826h34.72695652v-95.63269566c1.06852174-12.82226087 5.3426087-22.43895652 12.82226087-29.38434782 6.41113043-5.87686957 13.89078261-9.08243478 22.43895652-9.08243478 24.04173913 0 35.79547826 12.82226087 35.79547826 39.00104347v94.56417392h34.72695653v-97.76973913c1.06852174-43.27513043-19.2333913-64.64556522-58.76869566-64.64556522z",
+                        "p-id": "1858"
+                    }, null) ]) ]
+                }) ]),
+                dropdown: () => {
+                    let _slot;
+                    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 ]
+                    })))) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
+                        default: () => [ _slot ]
+                    });
+                    var s;
                 }
-                if (listener || (listener = elements, elements = options, options = {}), !elements) throw new Error("At least one element required.");
-                if (!listener) throw new Error("Listener required.");
-                if (isElement(elements)) elements = [ elements ]; else {
-                    if (!isCollection(elements)) return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");
-                    elements = toArray(elements);
+            }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
+                style: {
+                    display: "inline-block",
+                    lineHeight: 1
+                },
+                onClick: this.toggle
+            }, [ vue.createVNode(elementPlus.ElIcon, {
+                size: 16
+            }, {
+                default: () => [ isFullscreen ? vue.createVNode("svg", {
+                    class: "icon",
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "p-id": "2676",
+                    width: "128",
+                    height: "128"
+                }, [ vue.createVNode("path", {
+                    d: "M749.248 704H864a32 32 0 1 0 0-64H672a32 32 0 0 0-32 32v192a32 32 0 1 0 64 0v-114.752l137.36 137.36a32 32 0 1 0 45.232-45.264L749.248 704zM320 749.248V864a32 32 0 1 0 64 0V672a32 32 0 0 0-32-32H160a32 32 0 1 0 0 64h114.752l-137.36 137.36a32 32 0 1 0 45.264 45.232L320 749.248zM749.248 320H864a32 32 0 1 1 0 64H672a32 32 0 0 1-32-32V160a32 32 0 1 1 64 0v114.752l137.36-137.36a32 32 0 1 1 45.232 45.264L749.248 320zM320 274.752V160a32 32 0 1 1 64 0v192a32 32 0 0 1-32 32H160a32 32 0 1 1 0-64h114.752l-137.36-137.36a32 32 0 1 1 45.264-45.232L320 274.752z",
+                    "p-id": "2677"
+                }, null) ]) : vue.createVNode("svg", {
+                    class: "icon",
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "p-id": "2522",
+                    width: "128",
+                    height: "128"
+                }, [ vue.createVNode("path", {
+                    d: "M237.248 192H352a32 32 0 1 0 0-64H160a32 32 0 0 0-32 32v192a32 32 0 1 0 64 0v-114.752l137.36 137.36a32 32 0 1 0 45.232-45.264L237.248 192zM832 237.248V352a32 32 0 1 0 64 0V160a32 32 0 0 0-32-32H672a32 32 0 1 0 0 64h114.752l-137.36 137.36a32 32 0 1 0 45.264 45.232L832 237.248zM237.248 832H352a32 32 0 1 1 0 64H160a32 32 0 0 1-32-32V672a32 32 0 1 1 64 0v114.752l137.36-137.36a32 32 0 1 1 45.232 45.264L237.248 832zM832 786.752V672a32 32 0 1 1 64 0v192a32 32 0 0 1-32 32H672a32 32 0 1 1 0-64h114.752l-137.36-137.36a32 32 0 1 1 45.264-45.232L832 786.752z",
+                    "p-id": "2523"
+                }, null) ]) ]
+            }) ]) ]), 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);
                 }
-                var elementsReady = 0, callOnAdd = getOption(options, "callOnAdd", globalOptions.callOnAdd), onReadyCallback = getOption(options, "onReady", (function() {})), debug = getOption(options, "debug", globalOptions.debug);
-                forEach(elements, (function(element) {
-                    stateHandler.getState(element) || (stateHandler.initState(element), idHandler.set(element));
-                    var id = idHandler.get(element);
-                    if (debug && reporter.log("Attaching listener to element", id, element), !elementUtils.isDetectable(element)) return debug && reporter.log(id, "Not detectable."), 
-                    elementUtils.isBusy(element) ? (debug && reporter.log(id, "System busy making it detectable"), 
-                    addListener(callOnAdd, element, listener), onReadyCallbacks[id] = onReadyCallbacks[id] || [], 
-                    void onReadyCallbacks[id].push((function() {
-                        ++elementsReady === elements.length && onReadyCallback();
-                    }))) : (debug && reporter.log(id, "Making detectable..."), elementUtils.markBusy(element, !0), 
-                    detectionStrategy.makeDetectable({
-                        debug: debug,
-                        important: importantCssRules
-                    }, element, (function(element) {
-                        if (debug && reporter.log(id, "onElementDetectable"), stateHandler.getState(element)) {
-                            elementUtils.markAsDetectable(element), elementUtils.markBusy(element, !1), detectionStrategy.addListener(element, onResizeCallback), 
-                            addListener(callOnAdd, element, listener);
-                            var state = stateHandler.getState(element);
-                            if (state && state.startSize) {
-                                var width = element.offsetWidth, height = element.offsetHeight;
-                                state.startSize.width === width && state.startSize.height === height || onResizeCallback(element);
-                            }
-                            onReadyCallbacks[id] && forEach(onReadyCallbacks[id], (function(callback) {
-                                callback();
-                            }));
-                        } else debug && reporter.log(id, "Element uninstalled before being detectable.");
-                        delete onReadyCallbacks[id], ++elementsReady === elements.length && onReadyCallback();
-                    })));
-                    debug && reporter.log(id, "Already detecable, adding listener."), addListener(callOnAdd, element, listener), 
-                    elementsReady++;
-                })), elementsReady === elements.length && onReadyCallback();
-            },
-            removeListener: eventListenerHandler.removeListener,
-            removeAllListeners: eventListenerHandler.removeAllListeners,
-            uninstall: function(elements) {
-                if (!elements) return reporter.error("At least one element is required.");
-                if (isElement(elements)) elements = [ elements ]; else {
-                    if (!isCollection(elements)) return reporter.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");
-                    elements = toArray(elements);
+            }, {
+                default: () => vue.createVNode("span", {
+                    class: _ns.be("header-tools", "user")
+                }, [ profile_url ? vue.createVNode("img", {
+                    class: "user-photo",
+                    src: profile_url
+                }, null) : null, vue.createVNode("span", null, [ _config.userName ]), vue.createVNode(elementPlus.ElIcon, {
+                    class: "el-icon--right"
+                }, {
+                    default: () => [ vue.createVNode(arrow_down_default, null, null) ]
+                }) ]),
+                dropdown: () => vue.createVNode(elementPlus.ElDropdownMenu, null, {
+                    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: {
+                    display: "inline-block",
+                    lineHeight: 1
+                },
+                onClick: () => {
+                    this.settingDrawer = !0;
                 }
-                forEach(elements, (function(element) {
-                    eventListenerHandler.removeAllListeners(element), detectionStrategy.uninstall(element), 
-                    stateHandler.cleanState(element);
-                }));
-            },
-            initDocument: function(targetDocument) {
-                detectionStrategy.initDocument && detectionStrategy.initDocument(targetDocument);
-            }
-        };
-    };
-    function getOption(options, name, defaultValue) {
-        var value = options[name];
-        return null == value && void 0 !== defaultValue ? defaultValue : value;
-    }
-    var elementResizeDetectorMaker = getDefaultExportFromCjs(elementResizeDetector);
-    const elementResize = (el, cb) => {
-        const erd = elementResizeDetectorMaker();
-        let timer = null;
-        erd.listenTo(el, (() => {
-            null !== timer && clearTimeout(timer), timer = setTimeout((() => {
-                cb && cb(el), clearTimeout(timer);
-            }), 200);
-        })), vue.onUnmounted((() => {
-            erd.removeListener(el, (() => {}));
-        }));
-    }, deepClone = source => {
-        if (null == source) return source;
-        let target;
-        if ("object" == typeof source) {
-            target = Array.isArray(source) ? [] : {};
-            for (let key in source) "object" == typeof source[key] ? target[key] = deepClone(source[key]) : target[key] = source[key];
-        } else target = source;
-        return target;
-    }, arrayObjNoRepeat = (arr, property) => {
-        const result = [], uniqueMap = new Map;
-        for (const item of arr) {
-            const key = item[property];
-            uniqueMap.has(key) || (uniqueMap.set(key, !0), result.push(item));
-        }
-        return result;
-    }, isValueExist = value => null != value && ("string" == typeof value ? "" !== value.trim() : !1 !== value), valueExist = (...arg) => {
-        let exist = null;
-        for (let i = 0; i < arg.length; i++) {
-            const val = arg[i];
-            if (null != val) {
-                exist = val;
-                break;
-            }
+            }, [ vue.createVNode(elementPlus.ElIcon, {
+                size: 16
+            }, {
+                default: () => [ vue.createVNode(setting_default, null, null) ]
+            }) ]) ]) ]), vue.createVNode(vue.Teleport, {
+                to: "body"
+            }, {
+                default: () => [ vue.createVNode(elementPlus.ElDrawer, {
+                    modelValue: this.settingDrawer,
+                    "onUpdate:modelValue": $event => this.settingDrawer = $event,
+                    title: this.t("next.layout.systemSetting"),
+                    direction: "rtl",
+                    size: "380px",
+                    class: _ns.be("drawer", "setting"),
+                    "destroy-on-close": !0,
+                    beforeClose: _closeSettingDrawer
+                }, {
+                    default: () => [ vue.createVNode(LayoutSetting, null, null) ]
+                }) ]
+            }) ]);
         }
-        return exist;
-    }, shareObjectProperty = (target, source, key) => (Object.defineProperty(target, key, {
-        get: () => source[key]
-    }), {
-        target: target,
-        source: source
     });
-    var MenuItemTitle = vue.defineComponent({
+    const {getLightColor: getLightColor$4} = useChangeColor();
+    var Header$4 = vue.defineComponent({
+        setup: () => ({
+            ns: vue.inject("ns", {})
+        }),
+        render() {
+            const slots = this.$slots, _ns = this.ns, _config = vue.inject("options", {}), headerStyle = vue.computed((() => {
+                const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
+                return isHeaderBarColorGradual ? {
+                    background: `linear-gradient(to bottom , ${color}, ${getLightColor$4(color, .5)})`
+                } : "";
+            })), __slots_header_tools = {};
+            return slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]()), 
+            vue.createVNode("header", {
+                class: _ns.b("header"),
+                style: headerStyle.value
+            }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
+                class: _ns.bf("header", "right")
+            }, [ vue.createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                default: () => [ __slots_header_tools ]
+            })) ]) ]);
+            var s;
+        }
+    }), MenuItemTitle = vue.defineComponent({
         props: {
             meta: {
                 type: Object,
@@ -3247,20 +3251,31 @@
                     padding: padding + "px"
                 }), style;
             }));
-            return () => props.scrollbar ? vue.createVNode(elementPlus.ElScrollbar, {
-                class: [ ns$e.b(), props.className ],
-                style: props.style
-            }, {
-                default: () => [ slots.default?.() ]
-            }) : vue.createVNode("div", {
-                class: [ ns$e.b(), props.className ],
-                style: {
-                    ...styles.value,
-                    ...props.style
+            return () => (() => {
+                if (props.scrollbar) {
+                    const scrollStyle = {
+                        "--next-container-padding": styles.value.padding
+                    };
+                    return vue.createVNode(elementPlus.ElScrollbar, {
+                        class: [ ns$e.b(), props.className ],
+                        style: {
+                            ...scrollStyle,
+                            ...props.style
+                        }
+                    }, {
+                        default: () => [ slots.default?.() ]
+                    });
                 }
-            }, [ props.card ? vue.createVNode("div", {
-                class: ns$e.b("card")
-            }, [ slots.default?.() ]) : slots.default?.() ]);
+                return vue.createVNode("div", {
+                    class: [ ns$e.b(), props.className ],
+                    style: {
+                        ...styles.value,
+                        ...props.style
+                    }
+                }, [ props.card ? vue.createVNode("div", {
+                    class: ns$e.b("card")
+                }, [ slots.default?.() ]) : slots.default?.() ]);
+            })();
         }
     }));
     function isEqual(value, other) {
@@ -3861,14 +3876,17 @@
         setup: () => ({}),
         emits: [ "clickAdd", "clickRefresh", "deleteRows" ],
         render() {
-            const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), ns = vue.inject("ns", {}), multipleSelection = vue.inject("multipleSelection"), multipleSelectionLength = vue.computed((() => multipleSelection.value.length)), drawerSettingRef = vue.ref();
+            const _options = vue.inject("options", {}), options = vue.isRef(_options) ? vue.unref(_options) : _options, {t: t} = useLocale(), ns = vue.inject("ns", {}), multipleSelection = vue.inject("multipleSelection"), multipleSelectionLength = vue.computed((() => multipleSelection.value.length)), onClickRefresh = () => {
+                this.$emit("clickRefresh");
+            }, drawerSettingRef = vue.ref(), slotProps = {
+                size: options.size,
+                refresh: onClickRefresh
+            };
             return vue.createVNode("div", {
                 class: ns.b("header-menu")
             }, [ vue.createVNode("div", {
                 class: ns.b("header-menu-left")
-            }, [ this.$slots["menu-left-prefix"]?.({
-                size: options.size
-            }), options.addBtn && vue.createVNode(elementPlus.ElButton, {
+            }, [ this.$slots["menu-left-prefix"]?.(slotProps), options.addBtn && vue.createVNode(elementPlus.ElButton, {
                 type: "primary",
                 size: options.size,
                 onClick: () => {
@@ -3905,18 +3923,12 @@
                     default: () => [ vue.createVNode(delete_default, null, null) ]
                 }),
                 default: () => t("next.table.batchDelete")
-            }), this.$slots["menu-left-suffix"]?.({
-                size: options.size
-            }) ]), vue.createVNode("div", {
+            }), this.$slots["menu-left-suffix"]?.(slotProps) ]), vue.createVNode("div", {
                 class: ns.b("header-menu-right")
-            }, [ this.$slots["menu-right-prefix"]?.({
-                size: options.size
-            }), options.refreshBtn && vue.createVNode(elementPlus.ElButton, {
+            }, [ this.$slots["menu-right-prefix"]?.(slotProps), options.refreshBtn && vue.createVNode(elementPlus.ElButton, {
                 circle: !0,
                 size: options.size,
-                onClick: () => {
-                    this.$emit("clickRefresh");
-                }
+                onClick: onClickRefresh
             }, {
                 icon: () => vue.createVNode(elementPlus.ElIcon, null, {
                     default: () => [ vue.createVNode(refresh_default, null, null) ]
@@ -3931,9 +3943,7 @@
                 icon: () => vue.createVNode(elementPlus.ElIcon, null, {
                     default: () => [ vue.createVNode(tools_default, null, null) ]
                 })
-            }), this.$slots["menu-right-suffix"]?.({
-                size: options.size
-            }) ]), vue.createVNode(DrawerSetting, {
+            }), this.$slots["menu-right-suffix"]?.(slotProps) ]), vue.createVNode(DrawerSetting, {
                 ref: drawerSettingRef
             }, null) ]);
         }
@@ -3970,11 +3980,19 @@
                     });
                     var s;
                 })) ]);
-                if (slots[columnSlotName(_prop)]) return slots[columnSlotName(_prop)]({
-                    row: row,
-                    index: $index,
-                    column: columnOption
-                });
+                if (slots[columnSlotName(_prop)]) {
+                    const btnCfg = {
+                        text: options.operationsBtnText,
+                        plain: options.operationsBtnPlain,
+                        size: options.operationsBtnSize
+                    };
+                    return slots[columnSlotName(_prop)]({
+                        row: row,
+                        index: $index,
+                        column: columnOption,
+                        btn: btnCfg
+                    });
+                }
                 if (columnOption.dicData?.length > 0) {
                     const loopDicData = list => {
                         const temp = [];
@@ -8293,16 +8311,19 @@
                 }));
             }
         });
-    }, install = function(app) {
-        Object.keys(components).forEach((key => {
+    }, configProviderContextKey = Symbol("configProviderContextKey"), install = function(app, options) {
+        if (Object.keys(components).forEach((key => {
             const component = components[key];
             app.component(component.name, component);
         })), (app => {
             zoomDialog(app);
-        })(app);
+        })(app), options) {
+            const inSetup = !!vue.getCurrentInstance();
+            (app?.provide ?? (inSetup ? vue.provide : void 0))(configProviderContextKey, vue.computed((() => options)));
+        }
     };
     var index = {
-        version: "0.5.8",
+        version: "0.5.10",
         install: install
     };
     exports.NextCarousel = NextCarousel, exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, 
@@ -8350,7 +8371,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.5.8", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.5.10", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });