@deppon/deppon-template 2.4.24 → 2.5.4

package/es/pro-layout/ProLayout.vue_vue_type_script_setup_true_lang.vue.js

@@ -1,23 +1,32 @@
 import '../_virtual/_rollup-plugin-inject-process-env.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useSlots, ref, computed, watch, markRaw, onMounted, onUnmounted, nextTick, openBlock, createBlock, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, normalizeStyle, createCommentVNode, createTextVNode, toDisplayString, createVNode, Fragment, renderList, withModifiers, resolveDynamicComponent, withDirectives, mergeProps, vShow } from 'vue';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useSlots, ref, computed, provide, watch, markRaw, onMounted, onUnmounted, nextTick, openBlock, createBlock, unref, normalizeClass, normalizeStyle, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString, createVNode, Fragment, renderList, withModifiers, resolveDynamicComponent, withDirectives, mergeProps, vShow, createSlots } from 'vue';
 import { useRouter, useRoute } from '@deppon/deppon-router';
-import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElIcon, ElBadge, ElSubMenu, ElInput, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter } from '@deppon/deppon-ui';
+import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElIcon, ElBadge, ElSubMenu, ElInput, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter, ElMessage } from '@deppon/deppon-ui';
 import { Search, Service, Bell, Close, House, Expand, Fold, ArrowRight, ArrowLeft } from '@deppon/deppon-ui/icons-vue';
 import { isMobile as _isMobile } from '../utils/other.js';
+import './ProLayoutColumnsAside.vue.js';
+import './ProLayoutSettingsFab.vue.js';
+import './ProLayoutSettingsDrawer.vue.js';
+import { proLayoutContextKey } from './pro-layout-context.js';
+import { buildInitialProLayoutThemeConfig, mergeProLayoutTheme, applyProLayoutGlobalColors, applyProLayoutThemeToElement, clearPersistedProLayoutTheme, DEFAULT_PRO_LAYOUT_THEME_CONFIG, persistProLayoutTheme, cloneProLayoutThemeConfig } from './proLayoutTheme.js';
+import script$1 from './ProLayoutSettingsFab.vue_vue_type_script_setup_true_lang.vue.js';
+import script$2 from './ProLayoutColumnsAside.vue_vue_type_script_setup_true_lang.vue.js';
+import script$3 from './ProLayoutSettingsDrawer.vue_vue_type_script_setup_true_lang.vue.js';
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _hoisted_1 = {
   "class": "pro-layout__header-content"
 };
 var _hoisted_2 = {
+  key: 0,
   "class": "pro-layout__header-left"
 };
 var _hoisted_3 = ["src", "alt"];
@@ -26,7 +35,7 @@ var _hoisted_4 = {
   "class": "pro-layout__header-logo-text"
 };
 var _hoisted_5 = {
-  key: 0,
+  key: 1,
   "class": "pro-layout__top-menu"
 };
 var _hoisted_6 = {
@@ -54,58 +63,103 @@ var _hoisted_13 = {
   key: 0,
   "class": "pro-layout__sider-header"
 };
-var _hoisted_14 = {
+var _hoisted_14 = ["src", "alt"];
+var _hoisted_15 = {
   key: 1,
+  "class": "pro-layout__header-logo-text"
+};
+var _hoisted_16 = {
+  key: 2,
   "class": "pro-layout__menu-search"
 };
-var _hoisted_15 = {
+var _hoisted_17 = {
   key: 0,
   "class": "pro-layout__menu-group"
 };
-var _hoisted_16 = {
+var _hoisted_18 = {
   "class": "pro-layout__menu-group-header-left"
 };
-var _hoisted_17 = {
+var _hoisted_19 = {
   key: 1,
   "class": "pro-layout__menu-group-title"
 };
-var _hoisted_18 = {
+var _hoisted_20 = {
   key: 2,
   "class": "pro-layout__menu-group-title-char"
 };
-var _hoisted_19 = {
+var _hoisted_21 = {
   key: 0,
   "class": "pro-layout__menu-group-actions"
 };
-var _hoisted_20 = {
+var _hoisted_22 = {
   key: 0,
   "class": "pro-layout__menu-group-count"
 };
-var _hoisted_21 = {
+var _hoisted_23 = {
   "class": "pro-layout__menu-group-count-current"
 };
-var _hoisted_22 = {
+var _hoisted_24 = {
   "class": "pro-layout__menu-group-count-max"
 };
-var _hoisted_23 = {
+var _hoisted_25 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_24 = {
+var _hoisted_26 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_25 = {
+var _hoisted_27 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_26 = {
+var _hoisted_28 = {
+  "class": "pro-layout__header-content"
+};
+var _hoisted_29 = {
+  key: 0,
+  "class": "pro-layout__header-left"
+};
+var _hoisted_30 = ["src", "alt"];
+var _hoisted_31 = {
+  key: 1,
+  "class": "pro-layout__header-logo-text"
+};
+var _hoisted_32 = {
+  key: 1,
+  "class": "pro-layout__top-menu"
+};
+var _hoisted_33 = {
+  "class": "pro-layout__top-menu-glass"
+};
+var _hoisted_34 = {
+  "class": "pro-layout__top-menu-item-label"
+};
+var _hoisted_35 = {
+  "class": "pro-layout__top-menu-item-text"
+};
+var _hoisted_36 = {
+  "class": "pro-layout__top-menu-item-label"
+};
+var _hoisted_37 = {
+  "class": "pro-layout__top-menu-item-text"
+};
+var _hoisted_38 = {
+  "class": "pro-layout__header-right"
+};
+var _hoisted_39 = {
+  "class": "pro-layout__header-user-name"
+};
+var _hoisted_40 = {
+  "class": "pro-layout__main-panel"
+};
+var _hoisted_41 = {
   "class": "pro-layout__tag-label pro-layout__tag-label--affix-icon"
 };
-var _hoisted_27 = {
+var _hoisted_42 = {
   "class": "pro-layout__tag-label"
 };
-var _hoisted_28 = {
+var _hoisted_43 = {
   "class": "pro-layout__tag-actions"
 };
 var script = {
@@ -260,17 +314,285 @@ var script = {
     tagsViewHomePath: {
       type: String,
       "default": '/'
+    },
+    /** 布局结构：defaults | classic | transverse | columns */
+    layoutMode: {
+      type: String,
+      "default": 'classic'
+    },
+    /** 主题配置对象，支持 v-model:theme */
+    theme: {
+      type: Object,
+      "default": null
+    },
+    /** 为 true 时从 localStorage 恢复 theme；设置抽屉点「应用」写入、点「恢复默认」清除（键名见 themePersistKey） */
+    themePersist: {
+      type: Boolean,
+      "default": false
+    },
+    themePersistKey: {
+      type: String,
+      "default": 'deppon-pro-layout-theme'
+    },
+    /** 额外写入根节点的 CSS 变量 */
+    themeCssVars: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
+    /** 显示内置布局/主题配置抽屉 */
+    showSettingsDrawer: {
+      type: Boolean,
+      "default": false
+    },
+    settingsDrawerTitle: {
+      type: String,
+      "default": '布局与主题'
+    },
+    settingsDrawerSize: {
+      type: String,
+      "default": '320px'
+    },
+    /** 显示右侧悬浮设置按钮 */
+    showSettingsFab: {
+      type: Boolean,
+      "default": false
+    },
+    /** fixed：右侧悬浮；header：顶栏铃铛与用户区之间 */
+    settingsFabPlacement: {
+      type: String,
+      "default": 'fixed'
+    },
+    settingsFabPosition: {
+      type: String,
+      "default": 'right-center'
+    },
+    settingsFabOffset: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
+    settingsFabStyle: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
+    settingsFabClass: {
+      type: [String, Array, Object],
+      "default": ''
+    },
+    settingsFabSize: {
+      type: String,
+      "default": 'default'
+    },
+    settingsFabTitle: {
+      type: String,
+      "default": '布局与主题'
+    },
+    settingsFabShowIcon: {
+      type: Boolean,
+      "default": true
     }
   },
-  emits: ['update:collapsed', 'collapse-change', 'logo-click', 'breadcrumb-click', 'breadcrumb-close', 'phone-click', 'bell-click', 'user-command', 'menu-search', 'menu-search-click', 'header-search', 'tag-close', 'common-menu-delete'],
+  emits: ['update:collapsed', 'collapse-change', 'logo-click', 'breadcrumb-click', 'breadcrumb-close', 'phone-click', 'bell-click', 'user-command', 'menu-search', 'menu-search-click', 'header-search', 'tag-close', 'common-menu-delete', 'update:theme', 'update:layoutMode', 'theme-change', 'layout-mode-change', 'settings-fab-click', 'settings-drawer-open', 'settings-drawer-closed', 'theme-applied'],
   setup: function setup(__props, _ref) {
-    var __emit = _ref.emit;
+    var __expose = _ref.expose,
+      __emit = _ref.emit;
     var slots = useSlots();
     var router = useRouter();
     var route = useRoute();
     var props = __props;
     var emit = __emit;
     var localCollapsed = ref(props.collapsed);
+    var collapsed = computed({
+      get: function get() {
+        return props.collapsed !== undefined ? props.collapsed : localCollapsed.value;
+      },
+      set: function set(val) {
+        localCollapsed.value = val;
+        emit('update:collapsed', val);
+        emit('collapse-change', val);
+      }
+    });
+    var layoutRootRef = ref(null);
+    var settingsDrawerOpen = ref(false);
+    var activeColumnsAsideKey = ref('');
+    var themePersistEnabled = function themePersistEnabled() {
+      return props.themePersist || props.showSettingsDrawer;
+    };
+    var themeConfigState = ref(buildInitialProLayoutThemeConfig({
+      themePersist: themePersistEnabled(),
+      persistKey: props.themePersistKey,
+      layoutMode: props.layoutMode,
+      theme: props.theme
+    }));
+    var layoutModeResolved = computed(function () {
+      return themeConfigState.value.layout || props.layoutMode || 'classic';
+    });
+    var headerOnTop = computed(function () {
+      return layoutModeResolved.value !== 'defaults';
+    });
+    var isColumnsLayout = computed(function () {
+      return layoutModeResolved.value === 'columns';
+    });
+    var showSiderResolved = computed(function () {
+      if (layoutModeResolved.value === 'transverse') return false;
+      if (themeConfigState.value.isShowSider === false) return false;
+      return props.showSider;
+    });
+    var fixedHeaderResolved = computed(function () {
+      return themeConfigState.value.isFixedHeader !== undefined ? themeConfigState.value.isFixedHeader : props.fixedHeader;
+    });
+    var showTagsViewResolved = computed(function () {
+      return themeConfigState.value.isTagsView !== undefined ? themeConfigState.value.isTagsView : props.showTagsView;
+    });
+    var tagsViewStyle = computed(function () {
+      return {
+        minHeight: props.tagsViewHeight,
+        flexShrink: 0
+      };
+    });
+    var settingsFabVisible = computed(function () {
+      return props.showSettingsFab;
+    });
+    var settingsFabInHeader = computed(function () {
+      return settingsFabVisible.value && props.settingsFabPlacement === 'header';
+    });
+    var settingsFabFixedVisible = computed(function () {
+      return settingsFabVisible.value && props.settingsFabPlacement !== 'header';
+    });
+    var layoutRootClasses = computed(function () {
+      return _defineProperty(_defineProperty({
+        'pro-layout--collapsed': collapsed.value
+      }, "pro-layout--mode-".concat(layoutModeResolved.value), true), 'pro-layout--dark', Boolean(themeConfigState.value.isDark));
+    });
+    var layoutRootStyle = computed(function () {
+      return props.themeCssVars || {};
+    });
+    var columnsAsideItems = computed(function () {
+      var _props$topMenuItems;
+      if ((_props$topMenuItems = props.topMenuItems) !== null && _props$topMenuItems !== void 0 && _props$topMenuItems.length) return props.topMenuItems;
+      return (props.menuItems || []).filter(function (item) {
+        var _item$children;
+        return (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length;
+      });
+    });
+    var resolveLayoutRootEl = function resolveLayoutRootEl() {
+      var refVal = layoutRootRef.value;
+      if (!refVal) return null;
+      if (refVal instanceof HTMLElement) return refVal;
+      return refVal.$el || null;
+    };
+    var syncThemeToDom = function syncThemeToDom() {
+      var _themeConfigState$val = themeConfigState.value,
+        globalColors = _themeConfigState$val.globalColors,
+        tokens = _themeConfigState$val.tokens;
+      applyProLayoutGlobalColors(globalColors, document.documentElement);
+      var layoutEl = resolveLayoutRootEl();
+      applyProLayoutThemeToElement(layoutEl, tokens);
+      // 布局根上的 scoped 默认 --pro-layout-* 会盖住 :root 继承，须用 globalColors 再写一层
+      if (layoutEl) {
+        applyProLayoutGlobalColors(globalColors, layoutEl);
+      }
+      if (themeConfigState.value.isDark) {
+        document.documentElement.setAttribute('data-pro-layout-theme', 'dark');
+      } else {
+        document.documentElement.removeAttribute('data-pro-layout-theme');
+      }
+    };
+    var persistThemeIfNeeded = function persistThemeIfNeeded() {
+      if (themePersistEnabled()) {
+        persistProLayoutTheme(props.themePersistKey, cloneProLayoutThemeConfig(themeConfigState.value));
+      }
+    };
+    var onThemeConfigUpdate = function onThemeConfigUpdate(next) {
+      themeConfigState.value = mergeProLayoutTheme(themeConfigState.value, next);
+      if (next.layout) {
+        emit('update:layoutMode', next.layout);
+        emit('layout-mode-change', next.layout);
+      }
+      if (next.isCollapse !== undefined) {
+        collapsed.value = next.isCollapse;
+      }
+      syncThemeToDom();
+      emit('update:theme', themeConfigState.value);
+      emit('theme-change', themeConfigState.value);
+    };
+    var applyThemeConfig = function applyThemeConfig() {
+      persistThemeIfNeeded();
+      ElMessage.success('布局与主题已应用，刷新后仍会保留');
+      emit('theme-applied', themeConfigState.value);
+    };
+    var resetThemeConfig = function resetThemeConfig() {
+      clearPersistedProLayoutTheme(props.themePersistKey);
+      themeConfigState.value = mergeProLayoutTheme(DEFAULT_PRO_LAYOUT_THEME_CONFIG, {
+        layout: props.layoutMode || 'classic'
+      });
+      collapsed.value = props.collapsed;
+      syncThemeToDom();
+      emit('update:theme', themeConfigState.value);
+      emit('theme-change', themeConfigState.value);
+    };
+    var openSettingsDrawer = function openSettingsDrawer() {
+      settingsDrawerOpen.value = true;
+      emit('settings-drawer-open');
+    };
+    var closeSettingsDrawer = function closeSettingsDrawer() {
+      settingsDrawerOpen.value = false;
+    };
+    var handleSettingsFabClick = function handleSettingsFabClick(e) {
+      emit('settings-fab-click', e);
+      if (props.showSettingsDrawer) {
+        openSettingsDrawer();
+      }
+    };
+    var handleColumnsAsideSelect = function handleColumnsAsideSelect(item) {
+      activeColumnsAsideKey.value = item.path || item.key || '';
+      handleTopMenuClick(item);
+    };
+    provide(proLayoutContextKey, {
+      themeConfig: themeConfigState,
+      openSettingsDrawer: openSettingsDrawer,
+      closeSettingsDrawer: closeSettingsDrawer
+    });
+    watch(function () {
+      return props.theme;
+    }, function (val) {
+      if (val) {
+        themeConfigState.value = mergeProLayoutTheme(themeConfigState.value, val);
+        syncThemeToDom();
+      }
+    }, {
+      deep: true
+    });
+    watch(function () {
+      return props.layoutMode;
+    }, function (val) {
+      if (themePersistEnabled()) return;
+      if (val && val !== themeConfigState.value.layout) {
+        themeConfigState.value = _objectSpread(_objectSpread({}, themeConfigState.value), {}, {
+          layout: val
+        });
+      }
+    });
+    watch(themeConfigState, function () {
+      syncThemeToDom();
+    }, {
+      deep: true
+    });
+    watch(function () {
+      return props.topMenuItems;
+    }, function (items) {
+      if (!activeColumnsAsideKey.value && items !== null && items !== void 0 && items.length) {
+        var first = items[0];
+        activeColumnsAsideKey.value = first.path || first.key || '';
+      }
+    }, {
+      immediate: true
+    });
     var isMobile = ref(false);
     var windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920);
     var menuSearchText = ref('');
@@ -438,7 +760,7 @@ var script = {
     watch(function () {
       return route.path;
     }, function (newPath) {
-      if (props.showTagsView && newPath) {
+      if (showTagsViewResolved.value && newPath) {
         addTag(route);
         ensureAffixHomeTag();
       }
@@ -487,6 +809,77 @@ var script = {
       }
       return {};
     });
+
+    /** 侧栏折叠时可单独配置小图标：logo.collapsedSrc / logo.collapsedSize */
+    var logoCollapsedSrc = computed(function () {
+      var _props$logo$collapsed;
+      if (!props.logo || _typeof(props.logo) !== 'object') return null;
+      return props.logo.collapsedSrc || ((_props$logo$collapsed = props.logo.collapsed) === null || _props$logo$collapsed === void 0 ? void 0 : _props$logo$collapsed.src) || null;
+    });
+    var siderLogoImgSrc = computed(function () {
+      if (!logoSrc.value) return null;
+      if (collapsed.value && logoCollapsedSrc.value) return logoCollapsedSrc.value;
+      return logoSrc.value;
+    });
+    var siderLogoStyle = computed(function () {
+      var contain = {
+        objectFit: 'contain',
+        objectPosition: 'left center'
+      };
+      if (collapsed.value) {
+        var collapsedSize = _typeof(props.logo) === 'object' && props.logo.collapsedSize != null ? props.logo.collapsedSize : 28;
+        if (typeof collapsedSize === 'number') {
+          return {
+            width: "".concat(collapsedSize, "px"),
+            height: "".concat(collapsedSize, "px"),
+            maxWidth: '100%',
+            objectFit: 'contain',
+            objectPosition: 'center center'
+          };
+        }
+        if (_typeof(collapsedSize) === 'object') {
+          return {
+            width: collapsedSize.width ? "".concat(collapsedSize.width, "px") : '28px',
+            height: collapsedSize.height ? "".concat(collapsedSize.height, "px") : '28px',
+            maxWidth: '100%',
+            objectFit: 'contain',
+            objectPosition: 'center center'
+          };
+        }
+        return {
+          width: '28px',
+          height: '28px',
+          maxWidth: '100%',
+          objectFit: 'contain',
+          objectPosition: 'center center'
+        };
+      }
+      var size = _typeof(props.logo) === 'object' ? props.logo.size : null;
+      if (size && _typeof(size) === 'object') {
+        var rawW = size.width;
+        var rawH = size.height;
+        var w = typeof rawW === 'number' ? rawW : rawW ? parseInt(String(rawW), 10) : 72;
+        var h = typeof rawH === 'number' ? rawH : rawH ? parseInt(String(rawH), 10) : 20;
+        return _objectSpread(_objectSpread({}, contain), {}, {
+          width: 'auto',
+          maxWidth: "".concat(Math.min(Number.isFinite(w) ? w : 72, 72), "px"),
+          height: "".concat(Number.isFinite(h) ? h : 20, "px")
+        });
+      }
+      return _objectSpread(_objectSpread({}, contain), {}, {
+        width: 'auto',
+        maxWidth: '72px',
+        height: '20px'
+      });
+    });
+
+    /** defaults 布局：Logo/标题在侧栏顶部；有 sider-header 插槽时仍用插槽 */
+    var showLogoInSider = computed(function () {
+      return layoutModeResolved.value === 'defaults' && props.showLogo && props.showLogoInHeader && showSiderResolved.value && !slots['sider-header'] && Boolean(logoSrc.value || props.title);
+    });
+    var showLogoInHeaderResolved = computed(function () {
+      return props.showLogo && props.showLogoInHeader && !showLogoInSider.value;
+    });
     var checkMobile = function checkMobile() {
       if (!props.responsive) {
         isMobile.value = _isMobile();
@@ -502,6 +895,10 @@ var script = {
       nextTick(checkAllMenuTitleOverflow);
     };
     onMounted(function () {
+      if (themeConfigState.value.isCollapse !== undefined) {
+        collapsed.value = themeConfigState.value.isCollapse;
+      }
+      syncThemeToDom();
       checkMobile();
       handleMenuTitleResize();
       window.addEventListener('resize', handleMenuTitleResize);
@@ -509,29 +906,32 @@ var script = {
         window.addEventListener('resize', checkMobile);
       }
     });
+    __expose({
+      openSettingsDrawer: openSettingsDrawer,
+      closeSettingsDrawer: closeSettingsDrawer,
+      applyTheme: function applyTheme(tokens) {
+        onThemeConfigUpdate({
+          tokens: _objectSpread(_objectSpread({}, themeConfigState.value.tokens), tokens)
+        });
+      },
+      getThemeConfig: function getThemeConfig() {
+        return themeConfigState.value;
+      }
+    });
     onUnmounted(function () {
       window.removeEventListener('resize', handleMenuTitleResize);
       if (props.responsive) {
         window.removeEventListener('resize', checkMobile);
       }
     });
-    var collapsed = computed({
-      get: function get() {
-        return props.collapsed !== undefined ? props.collapsed : localCollapsed.value;
-      },
-      set: function set(val) {
-        localCollapsed.value = val;
-        emit('update:collapsed', val);
-        emit('collapse-change', val);
-      }
-    });
     var toggleCollapse = function toggleCollapse() {
       collapsed.value = !collapsed.value;
     };
     var bodyStyle = computed(function () {
       var style = {};
-      if (props.showHeader) {
-        if (props.fixedHeader) {
+      var headerVisible = props.showHeader && headerOnTop.value;
+      if (headerVisible) {
+        if (fixedHeaderResolved.value) {
           style.marginTop = props.headerHeight;
           style.height = "calc(100vh - ".concat(props.headerHeight, ")");
         } else {
@@ -731,20 +1131,21 @@ var script = {
     });
     return function (_ctx, _cache) {
       return openBlock(), createBlock(unref(ElContainer), {
-        "class": normalizeClass(["pro-layout", {
-          'pro-layout--collapsed': collapsed.value
-        }])
+        ref_key: "layoutRootRef",
+        ref: layoutRootRef,
+        "class": normalizeClass(["pro-layout", layoutRootClasses.value]),
+        style: normalizeStyle(layoutRootStyle.value)
       }, {
         "default": withCtx(function () {
-          return [__props.showHeader ? (openBlock(), createBlock(unref(ElHeader), {
+          return [__props.showHeader && headerOnTop.value ? (openBlock(), createBlock(unref(ElHeader), {
             key: 0,
             height: __props.headerHeight,
             "class": normalizeClass(["pro-layout__header", {
-              'pro-layout__header--fixed': __props.fixedHeader
+              'pro-layout__header--fixed': fixedHeaderResolved.value
             }])
           }, {
             "default": withCtx(function () {
-              return [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [__props.showLogoInHeader ? (openBlock(), createElementBlock("div", {
+              return [createElementVNode("div", _hoisted_1, [showLogoInHeaderResolved.value || unref(slots)['header-left'] ? (openBlock(), createElementBlock("div", _hoisted_2, [showLogoInHeaderResolved.value ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 "class": "pro-layout__header-logo",
                 onClick: _cache[0] || (_cache[0] = function ($event) {
@@ -757,12 +1158,12 @@ var script = {
                   alt: __props.title,
                   "class": "pro-layout__header-logo-img",
                   style: normalizeStyle(logoStyle.value)
-                }, null, 12 /* STYLE, PROPS */, _hoisted_3)) : createCommentVNode("v-if", true), __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, [_cache[6] || (_cache[6] = createElementVNode("span", {
+                }, null, 12 /* STYLE, PROPS */, _hoisted_3)) : createCommentVNode("v-if", true), __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, [_cache[14] || (_cache[14] = createElementVNode("span", {
                   "class": "pro-layout__header-logo-divider"
                 }, null, -1 /* CACHED */)), createTextVNode(" " + toDisplayString(__props.title), 1 /* TEXT */)])) : createCommentVNode("v-if", true)];
               })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "header-left", {
                 collapsed: collapsed.value
-              })]), __props.showTopMenu && topMenuItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createCommentVNode(" 顶栏不用 el-menu 内置 router：与 @click handleTopMenuClick 会重复 router.push，造成卡顿 "), createVNode(unref(ElMenu), {
+              })])) : createCommentVNode("v-if", true), __props.showTopMenu && topMenuItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createCommentVNode(" 顶栏不用 el-menu 内置 router：与 @click handleTopMenuClick 会重复 router.push，造成卡顿 "), createVNode(unref(ElMenu), {
                 "default-active": activeTopMenu.value,
                 mode: "horizontal",
                 router: false,
@@ -781,7 +1182,7 @@ var script = {
                       onClick: _cache[1] || (_cache[1] = withModifiers(function () {}, ["prevent", "stop"]))
                     }, {
                       "default": withCtx(function () {
-                        return _toConsumableArray(_cache[7] || (_cache[7] = [createElementVNode("span", {
+                        return _toConsumableArray(_cache[15] || (_cache[15] = [createElementVNode("span", {
                           "class": "pro-layout__top-menu-divider-line",
                           "aria-hidden": "true"
                         }, null, -1 /* CACHED */)]));
@@ -915,7 +1316,20 @@ var script = {
                   })];
                 }),
                 _: 1 /* STABLE */
-              })) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "header-right", {
+              })) : createCommentVNode("v-if", true), settingsFabInHeader.value ? (openBlock(), createBlock(script$1, {
+                key: 3,
+                placement: "header",
+                title: __props.settingsFabTitle,
+                "show-icon": __props.settingsFabShowIcon,
+                "class": normalizeClass(__props.settingsFabClass),
+                style: normalizeStyle(__props.settingsFabStyle),
+                onClick: handleSettingsFabClick
+              }, {
+                "default": withCtx(function () {
+                  return [renderSlot(_ctx.$slots, "settings-fab")];
+                }),
+                _: 3 /* FORWARDED */
+              }, 8 /* PROPS */, ["title", "show-icon", "class", "style"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "header-right", {
                 collapsed: collapsed.value
               })])])])];
             }),
@@ -925,8 +1339,13 @@ var script = {
             style: normalizeStyle(bodyStyle.value)
           }, {
             "default": withCtx(function () {
-              return [__props.showSider ? (openBlock(), createBlock(unref(ElAside), {
+              return [isColumnsLayout.value && columnsAsideItems.value.length > 0 ? (openBlock(), createBlock(script$2, {
                 key: 0,
+                items: columnsAsideItems.value,
+                "active-key": activeColumnsAsideKey.value,
+                onSelect: handleColumnsAsideSelect
+              }, null, 8 /* PROPS */, ["items", "active-key"])) : createCommentVNode("v-if", true), showSiderResolved.value ? (openBlock(), createBlock(unref(ElAside), {
+                key: 1,
                 width: collapsed.value ? __props.siderCollapsedWidth : __props.siderWidth,
                 "class": normalizeClass(["pro-layout__sider", {
                   'pro-layout__sider--collapsed': collapsed.value
@@ -935,10 +1354,30 @@ var script = {
                 "default": withCtx(function () {
                   return [unref(slots)['sider-header'] ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "sider-header", {
                     collapsed: collapsed.value
-                  })])) : createCommentVNode("v-if", true), __props.showMenuSearch ? (openBlock(), createElementBlock("div", _hoisted_14, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
+                  })])) : showLogoInSider.value ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    "class": normalizeClass(["pro-layout__sider-logo", {
+                      'pro-layout__sider-logo--collapsed': collapsed.value
+                    }]),
+                    onClick: _cache[5] || (_cache[5] = function ($event) {
+                      return _ctx.$emit('logo-click');
+                    })
+                  }, [renderSlot(_ctx.$slots, "header-logo", {
+                    collapsed: collapsed.value
+                  }, function () {
+                    return [siderLogoImgSrc.value ? (openBlock(), createElementBlock("img", {
+                      key: 0,
+                      src: siderLogoImgSrc.value,
+                      alt: __props.title,
+                      "class": "pro-layout__header-logo-img pro-layout__sider-logo-img",
+                      style: normalizeStyle(siderLogoStyle.value)
+                    }, null, 12 /* STYLE, PROPS */, _hoisted_14)) : createCommentVNode("v-if", true), __props.title && !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_15, [_cache[16] || (_cache[16] = createElementVNode("span", {
+                      "class": "pro-layout__header-logo-divider"
+                    }, null, -1 /* CACHED */)), createTextVNode(" " + toDisplayString(__props.title), 1 /* TEXT */)])) : createCommentVNode("v-if", true)];
+                  })], 2 /* CLASS */)) : createCommentVNode("v-if", true), __props.showMenuSearch ? (openBlock(), createElementBlock("div", _hoisted_16, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
                     key: 0,
                     modelValue: menuSearchText.value,
-                    "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
+                    "onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
                       return menuSearchText.value = $event;
                     }),
                     placeholder: __props.menuSearchPlaceholder,
@@ -978,12 +1417,12 @@ var script = {
                       return [(openBlock(true), createElementBlock(Fragment, null, renderList(menuGroups.value, function (group, groupIndex) {
                         return openBlock(), createElementBlock(Fragment, {
                           key: "".concat(group.type, "-").concat(groupIndex)
-                        }, [group.items && group.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [__props.showCommonMenus || menuGroups.value.length > 1 ? (openBlock(), createElementBlock("div", {
+                        }, [group.items && group.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_17, [__props.showCommonMenus || menuGroups.value.length > 1 ? (openBlock(), createElementBlock("div", {
                           key: 0,
                           "class": normalizeClass(["pro-layout__menu-group-header", {
                             'pro-layout__menu-group-header--collapsed': collapsed.value
                           }])
-                        }, [createElementVNode("div", _hoisted_16, [!collapsed.value ? (openBlock(), createBlock(unref(ElIcon), {
+                        }, [createElementVNode("div", _hoisted_18, [!collapsed.value ? (openBlock(), createBlock(unref(ElIcon), {
                           key: 0,
                           "class": "pro-layout__menu-group-toggle",
                           onClick: function onClick($event) {
@@ -994,7 +1433,7 @@ var script = {
                             return [(openBlock(), createBlock(resolveDynamicComponent(isMenuGroupExpanded(groupIndex) ? unref(FoldIcon) : unref(ExpandIcon))))];
                           }),
                           _: 2 /* DYNAMIC */
-                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(group.title), 1 /* TEXT */)) : (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(getFirstChar(group.title)), 1 /* TEXT */))]), !collapsed.value ? (openBlock(), createElementBlock("div", _hoisted_19, [group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_20, [createElementVNode("span", _hoisted_21, toDisplayString(commonMenusCount.value), 1 /* TEXT */), createElementVNode("span", _hoisted_22, "/" + toDisplayString(__props.commonMenusMax), 1 /* TEXT */)])) : createCommentVNode("v-if", true), group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", {
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(group.title), 1 /* TEXT */)) : (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(getFirstChar(group.title)), 1 /* TEXT */))]), !collapsed.value ? (openBlock(), createElementBlock("div", _hoisted_21, [group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_22, [createElementVNode("span", _hoisted_23, toDisplayString(commonMenusCount.value), 1 /* TEXT */), createElementVNode("span", _hoisted_24, "/" + toDisplayString(__props.commonMenusMax), 1 /* TEXT */)])) : createCommentVNode("v-if", true), group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", {
                           key: 1,
                           "class": "pro-layout__menu-group-edit",
                           onClick: toggleEditMode
@@ -1059,7 +1498,7 @@ var script = {
                                       return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
                                     }),
                                     _: 2 /* DYNAMIC */
-                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
+                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_25, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
                                 }),
                                 _: 2 /* DYNAMIC */
                               }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "disabled", "class"])) : (openBlock(), createBlock(unref(ElSubMenu), {
@@ -1075,7 +1514,7 @@ var script = {
                                       return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
                                     }),
                                     _: 2 /* DYNAMIC */
-                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_24, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createBlock(unref(ElTooltip), {
+                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_26, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createBlock(unref(ElTooltip), {
                                     key: 2,
                                     content: item.title || item.label,
                                     placement: "right",
@@ -1126,7 +1565,7 @@ var script = {
                                             return [(openBlock(), createBlock(resolveDynamicComponent(child.icon)))];
                                           }),
                                           _: 2 /* DYNAMIC */
-                                        }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_25, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
+                                        }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_27, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
                                       }),
                                       _: 2 /* DYNAMIC */
                                     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "disabled"]);
@@ -1148,22 +1587,219 @@ var script = {
                   })];
                 }),
                 _: 3 /* FORWARDED */
-              }, 8 /* PROPS */, ["width", "class"])) : createCommentVNode("v-if", true), __props.showSider && __props.showCollapse ? (openBlock(), createBlock(unref(ElButton), {
-                key: 1,
+              }, 8 /* PROPS */, ["width", "class"])) : createCommentVNode("v-if", true), showSiderResolved.value && __props.showCollapse ? (openBlock(), createBlock(unref(ElButton), {
+                key: 2,
                 icon: collapsed.value ? unref(ArrowRight) : unref(ArrowLeft),
                 "class": "pro-layout__sider-collapse-btn",
                 style: normalizeStyle(collapseBtnStyle.value),
                 onClick: toggleCollapse
               }, null, 8 /* PROPS */, ["icon", "style"])) : createCommentVNode("v-if", true), createVNode(unref(ElContainer), {
-                "class": "pro-layout__content-wrapper"
+                "class": normalizeClass(["pro-layout__content-wrapper", {
+                  'pro-layout__content-wrapper--with-inner-header': __props.showHeader && !headerOnTop.value
+                }])
               }, {
                 "default": withCtx(function () {
-                  return [__props.showTagsView ? (openBlock(), createElementBlock("div", {
+                  return [__props.showHeader && !headerOnTop.value ? (openBlock(), createBlock(unref(ElHeader), {
+                    key: 0,
+                    height: __props.headerHeight,
+                    "class": normalizeClass(["pro-layout__header pro-layout__header--in-main", {
+                      'pro-layout__header--fixed': fixedHeaderResolved.value
+                    }])
+                  }, {
+                    "default": withCtx(function () {
+                      return [createElementVNode("div", _hoisted_28, [showLogoInHeaderResolved.value || unref(slots)['header-left'] ? (openBlock(), createElementBlock("div", _hoisted_29, [showLogoInHeaderResolved.value ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        "class": "pro-layout__header-logo",
+                        onClick: _cache[7] || (_cache[7] = function ($event) {
+                          return _ctx.$emit('logo-click');
+                        })
+                      }, [renderSlot(_ctx.$slots, "header-logo", {}, function () {
+                        return [logoSrc.value ? (openBlock(), createElementBlock("img", {
+                          key: 0,
+                          src: logoSrc.value,
+                          alt: __props.title,
+                          "class": "pro-layout__header-logo-img",
+                          style: normalizeStyle(logoStyle.value)
+                        }, null, 12 /* STYLE, PROPS */, _hoisted_30)) : createCommentVNode("v-if", true), __props.title ? (openBlock(), createElementBlock("span", _hoisted_31, [_cache[17] || (_cache[17] = createElementVNode("span", {
+                          "class": "pro-layout__header-logo-divider"
+                        }, null, -1 /* CACHED */)), createTextVNode(" " + toDisplayString(__props.title), 1 /* TEXT */)])) : createCommentVNode("v-if", true)];
+                      })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "header-left", {
+                        collapsed: collapsed.value
+                      })])) : createCommentVNode("v-if", true), __props.showTopMenu && topMenuItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_32, [createElementVNode("div", _hoisted_33, [createVNode(unref(ElMenu), {
+                        "default-active": activeTopMenu.value,
+                        mode: "horizontal",
+                        router: false,
+                        ellipsis: true,
+                        "class": "pro-layout__top-menu-el"
+                      }, {
+                        "default": withCtx(function () {
+                          return [(openBlock(true), createElementBlock(Fragment, null, renderList(topMenuItemsWithDividers.value, function (item, index) {
+                            return openBlock(), createElementBlock(Fragment, {
+                              key: item.__divider ? item.key : item.path || item.key || item.label || String(index)
+                            }, [item.__divider ? (openBlock(), createBlock(unref(ElMenuItem), {
+                              key: 0,
+                              index: "__top_divider_".concat(index),
+                              disabled: "",
+                              "class": "pro-layout__top-menu-divider",
+                              onClick: _cache[8] || (_cache[8] = withModifiers(function () {}, ["prevent", "stop"]))
+                            }, {
+                              "default": withCtx(function () {
+                                return _toConsumableArray(_cache[18] || (_cache[18] = [createElementVNode("span", {
+                                  "class": "pro-layout__top-menu-divider-line",
+                                  "aria-hidden": "true"
+                                }, null, -1 /* CACHED */)]));
+                              }),
+                              _: 1 /* STABLE */
+                            }, 8 /* PROPS */, ["index"])) : !item.children || item.children.length === 0 ? (openBlock(), createBlock(unref(ElMenuItem), {
+                              key: 1,
+                              index: item.path || item.key,
+                              "class": normalizeClass({
+                                'pro-layout__top-menu-item--lead': isTopMenuLeadItem(index)
+                              }),
+                              onClick: function onClick($event) {
+                                return handleTopMenuClick(item);
+                              }
+                            }, {
+                              "default": withCtx(function () {
+                                return [createElementVNode("span", _hoisted_34, [item.icon ? (openBlock(), createBlock(unref(ElIcon), {
+                                  key: 0,
+                                  "class": "pro-layout__top-menu-item-icon"
+                                }, {
+                                  "default": withCtx(function () {
+                                    return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
+                                  }),
+                                  _: 2 /* DYNAMIC */
+                                }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_35, toDisplayString(item.title || item.label), 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
+                                  key: 1,
+                                  value: item.badge,
+                                  "class": "pro-layout__top-menu-item-badge",
+                                  type: item.badgeType || 'danger'
+                                }, null, 8 /* PROPS */, ["value", "type"])) : createCommentVNode("v-if", true)])];
+                              }),
+                              _: 2 /* DYNAMIC */
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "class", "onClick"])) : (openBlock(), createBlock(unref(ElSubMenu), {
+                              key: 2,
+                              index: item.path || item.key,
+                              "class": normalizeClass({
+                                'pro-layout__top-menu-item--lead': isTopMenuLeadItem(index)
+                              })
+                            }, {
+                              title: withCtx(function () {
+                                return [createElementVNode("span", _hoisted_36, [item.icon ? (openBlock(), createBlock(unref(ElIcon), {
+                                  key: 0,
+                                  "class": "pro-layout__top-menu-item-icon"
+                                }, {
+                                  "default": withCtx(function () {
+                                    return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
+                                  }),
+                                  _: 2 /* DYNAMIC */
+                                }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_37, toDisplayString(item.title || item.label), 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
+                                  key: 1,
+                                  value: item.badge,
+                                  "class": "pro-layout__top-menu-item-badge",
+                                  type: item.badgeType || 'danger'
+                                }, null, 8 /* PROPS */, ["value", "type"])) : createCommentVNode("v-if", true)])];
+                              }),
+                              "default": withCtx(function () {
+                                return [(openBlock(true), createElementBlock(Fragment, null, renderList(item.children, function (child) {
+                                  return openBlock(), createBlock(unref(ElMenuItem), {
+                                    key: child.path || child.key,
+                                    index: child.path || child.key,
+                                    onClick: function onClick($event) {
+                                      return handleTopMenuClick(child);
+                                    }
+                                  }, {
+                                    "default": withCtx(function () {
+                                      return [createTextVNode(toDisplayString(child.title || child.label), 1 /* TEXT */)];
+                                    }),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "onClick"]);
+                                }), 128 /* KEYED_FRAGMENT */))];
+                              }),
+                              _: 2 /* DYNAMIC */
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "class"]))], 64 /* STABLE_FRAGMENT */);
+                          }), 128 /* KEYED_FRAGMENT */))];
+                        }),
+                        _: 1 /* STABLE */
+                      }, 8 /* PROPS */, ["default-active"])])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_38, [__props.showHeaderSearch ? (openBlock(), createBlock(unref(ElInput), {
+                        key: 0,
+                        modelValue: headerSearchText.value,
+                        "onUpdate:modelValue": _cache[9] || (_cache[9] = function ($event) {
+                          return headerSearchText.value = $event;
+                        }),
+                        placeholder: __props.headerSearchPlaceholder,
+                        "class": "pro-layout__header-search",
+                        clearable: ""
+                      }, {
+                        suffix: withCtx(function () {
+                          return [createVNode(unref(ElIcon), {
+                            "class": "pro-layout__header-search-icon"
+                          }, {
+                            "default": withCtx(function () {
+                              return [(openBlock(), createBlock(resolveDynamicComponent(unref(SearchIcon))))];
+                            }),
+                            _: 1 /* STABLE */
+                          })];
+                        }),
+                        _: 1 /* STABLE */
+                      }, 8 /* PROPS */, ["modelValue", "placeholder"])) : createCommentVNode("v-if", true), __props.showPhoneIcon ? (openBlock(), createBlock(unref(ElButton), {
+                        key: 1,
+                        text: "",
+                        circle: "",
+                        "class": "pro-layout__header-action-btn",
+                        onClick: _cache[10] || (_cache[10] = function ($event) {
+                          return _ctx.$emit('phone-click');
+                        })
+                      }, {
+                        "default": withCtx(function () {
+                          return [createVNode(unref(ElIcon), null, {
+                            "default": withCtx(function () {
+                              return [(openBlock(), createBlock(resolveDynamicComponent(unref(PhoneIcon))))];
+                            }),
+                            _: 1 /* STABLE */
+                          })];
+                        }),
+                        _: 1 /* STABLE */
+                      })) : createCommentVNode("v-if", true), __props.showBellIcon ? (openBlock(), createBlock(unref(ElButton), {
+                        key: 2,
+                        text: "",
+                        circle: "",
+                        "class": "pro-layout__header-action-btn",
+                        onClick: _cache[11] || (_cache[11] = function ($event) {
+                          return _ctx.$emit('bell-click');
+                        })
+                      }, {
+                        "default": withCtx(function () {
+                          return [createVNode(unref(ElIcon), null, {
+                            "default": withCtx(function () {
+                              return [(openBlock(), createBlock(resolveDynamicComponent(unref(BellIcon))))];
+                            }),
+                            _: 1 /* STABLE */
+                          })];
+                        }),
+                        _: 1 /* STABLE */
+                      })) : createCommentVNode("v-if", true), settingsFabInHeader.value ? (openBlock(), createBlock(script$1, {
+                        key: 3,
+                        placement: "header",
+                        title: __props.settingsFabTitle,
+                        "show-icon": __props.settingsFabShowIcon,
+                        "class": normalizeClass(__props.settingsFabClass),
+                        style: normalizeStyle(__props.settingsFabStyle),
+                        onClick: handleSettingsFabClick
+                      }, {
+                        "default": withCtx(function () {
+                          return [renderSlot(_ctx.$slots, "settings-fab")];
+                        }),
+                        _: 3 /* FORWARDED */
+                      }, 8 /* PROPS */, ["title", "show-icon", "class", "style"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_39, [renderSlot(_ctx.$slots, "header-right", {
+                        collapsed: collapsed.value
+                      })])])])];
+                    }),
+                    _: 3 /* FORWARDED */
+                  }, 8 /* PROPS */, ["height", "class"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_40, [showTagsViewResolved.value ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     "class": "pro-layout__tags-view",
-                    style: normalizeStyle({
-                      height: __props.tagsViewHeight
-                    })
+                    style: normalizeStyle(tagsViewStyle.value)
                   }, [(openBlock(), createBlock(unref(ElMenu), {
                     key: tagsMenuKey.value,
                     "default-active": currentPath.value,
@@ -1178,7 +1814,7 @@ var script = {
                         "class": "pro-layout__tag-item pro-layout__tag-item--affix"
                       }, {
                         title: withCtx(function () {
-                          return [createElementVNode("span", _hoisted_26, [createVNode(unref(ElIcon), null, {
+                          return [createElementVNode("span", _hoisted_41, [createVNode(unref(ElIcon), null, {
                             "default": withCtx(function () {
                               return [(openBlock(), createBlock(resolveDynamicComponent(unref(HouseIcon))))];
                             }),
@@ -1193,7 +1829,7 @@ var script = {
                           "class": "pro-layout__tag-item"
                         }, {
                           title: withCtx(function () {
-                            return [createElementVNode("span", _hoisted_27, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_28, [createVNode(unref(ElIcon), {
+                            return [createElementVNode("span", _hoisted_42, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_43, [createVNode(unref(ElIcon), {
                               "class": "pro-layout__tag-icon",
                               onClick: withModifiers(function ($event) {
                                 return handleTagClose(tag);
@@ -1226,16 +1862,59 @@ var script = {
                       return [renderSlot(_ctx.$slots, "footer")];
                     }),
                     _: 3 /* FORWARDED */
-                  }, 8 /* PROPS */, ["height"])) : createCommentVNode("v-if", true)];
+                  }, 8 /* PROPS */, ["height"])) : createCommentVNode("v-if", true)])];
                 }),
                 _: 3 /* FORWARDED */
-              })];
+              }, 8 /* PROPS */, ["class"])];
+            }),
+            _: 3 /* FORWARDED */
+          }, 8 /* PROPS */, ["style"]), settingsFabFixedVisible.value ? (openBlock(), createBlock(script$1, {
+            key: 1,
+            visible: settingsFabFixedVisible.value,
+            placement: "fixed",
+            position: __props.settingsFabPosition,
+            offset: __props.settingsFabOffset,
+            style: normalizeStyle(__props.settingsFabStyle),
+            "class": normalizeClass(__props.settingsFabClass),
+            size: __props.settingsFabSize,
+            title: __props.settingsFabTitle,
+            "show-icon": __props.settingsFabShowIcon,
+            onClick: handleSettingsFabClick
+          }, {
+            "default": withCtx(function () {
+              return [renderSlot(_ctx.$slots, "settings-fab")];
             }),
             _: 3 /* FORWARDED */
-          }, 8 /* PROPS */, ["style"])];
+          }, 8 /* PROPS */, ["visible", "position", "offset", "style", "class", "size", "title", "show-icon"])) : createCommentVNode("v-if", true), __props.showSettingsDrawer ? (openBlock(), createBlock(script$3, {
+            key: 2,
+            modelValue: settingsDrawerOpen.value,
+            "onUpdate:modelValue": _cache[12] || (_cache[12] = function ($event) {
+              return settingsDrawerOpen.value = $event;
+            }),
+            theme: themeConfigState.value,
+            title: __props.settingsDrawerTitle,
+            size: __props.settingsDrawerSize,
+            "onUpdate:theme": onThemeConfigUpdate,
+            onApply: applyThemeConfig,
+            onReset: resetThemeConfig,
+            onClosed: _cache[13] || (_cache[13] = function ($event) {
+              return _ctx.$emit('settings-drawer-closed');
+            })
+          }, createSlots({
+            _: 2 /* DYNAMIC */
+          }, [unref(slots)['settings-panel'] ? {
+            name: "default",
+            fn: withCtx(function () {
+              return [renderSlot(_ctx.$slots, "settings-panel", {
+                theme: themeConfigState.value,
+                open: settingsDrawerOpen.value
+              })];
+            }),
+            key: "0"
+          } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "theme", "title", "size"])) : createCommentVNode("v-if", true)];
         }),
         _: 3 /* FORWARDED */
-      }, 8 /* PROPS */, ["class"]);
+      }, 8 /* PROPS */, ["class", "style"]);
     };
   }
 };