@deppon/deppon-template 2.4.4 → 2.4.7

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

@@ -1,10 +1,12 @@
 import '../_virtual/_rollup-plugin-inject-process-env.js';
-import _typeof from '@babel/runtime/helpers/typeof';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useSlots, ref, computed, watch, markRaw, onMounted, onUnmounted, nextTick, openBlock, createBlock, unref, normalizeClass, withCtx, createCommentVNode, createElementVNode, createElementBlock, renderSlot, normalizeStyle, createTextVNode, toDisplayString, createVNode, Fragment, renderList, resolveDynamicComponent, withDirectives, mergeProps, withModifiers, vShow } from 'vue';
+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 { useRouter, useRoute } from '@deppon/deppon-router';
-import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElBadge, ElSubMenu, ElInput, ElIcon, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter } from '@deppon/deppon-ui';
-import { Search, Service, Bell, Close, Refresh, Expand, Fold, ArrowRight, ArrowLeft } from '@deppon/deppon-ui/icons-vue';
+import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElIcon, ElBadge, ElSubMenu, ElInput, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter } 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';
 
 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; }
@@ -28,258 +30,239 @@ var _hoisted_5 = {
   "class": "pro-layout__top-menu"
 };
 var _hoisted_6 = {
-  "class": "pro-layout__top-menu-item-label"
+  "class": "pro-layout__top-menu-glass"
 };
 var _hoisted_7 = {
   "class": "pro-layout__top-menu-item-label"
 };
 var _hoisted_8 = {
-  "class": "pro-layout__header-right"
+  "class": "pro-layout__top-menu-item-text"
 };
 var _hoisted_9 = {
-  "class": "pro-layout__header-user-name"
+  "class": "pro-layout__top-menu-item-label"
 };
 var _hoisted_10 = {
+  "class": "pro-layout__top-menu-item-text"
+};
+var _hoisted_11 = {
+  "class": "pro-layout__header-right"
+};
+var _hoisted_12 = {
+  "class": "pro-layout__header-user-name"
+};
+var _hoisted_13 = {
   key: 0,
   "class": "pro-layout__sider-header"
 };
-var _hoisted_11 = {
+var _hoisted_14 = {
   key: 1,
   "class": "pro-layout__menu-search"
 };
-var _hoisted_12 = {
+var _hoisted_15 = {
   key: 0,
   "class": "pro-layout__menu-group"
 };
-var _hoisted_13 = {
+var _hoisted_16 = {
   "class": "pro-layout__menu-group-header-left"
 };
-var _hoisted_14 = {
+var _hoisted_17 = {
   key: 1,
   "class": "pro-layout__menu-group-title"
 };
-var _hoisted_15 = {
+var _hoisted_18 = {
   key: 2,
   "class": "pro-layout__menu-group-title-char"
 };
-var _hoisted_16 = {
+var _hoisted_19 = {
   key: 0,
   "class": "pro-layout__menu-group-actions"
 };
-var _hoisted_17 = {
+var _hoisted_20 = {
   key: 0,
   "class": "pro-layout__menu-group-count"
 };
-var _hoisted_18 = {
+var _hoisted_21 = {
   "class": "pro-layout__menu-group-count-current"
 };
-var _hoisted_19 = {
+var _hoisted_22 = {
   "class": "pro-layout__menu-group-count-max"
 };
-var _hoisted_20 = {
+var _hoisted_23 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_21 = {
+var _hoisted_24 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_22 = {
+var _hoisted_25 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_23 = {
+var _hoisted_26 = {
+  "class": "pro-layout__tag-label pro-layout__tag-label--affix-icon"
+};
+var _hoisted_27 = {
   "class": "pro-layout__tag-label"
 };
-var _hoisted_24 = {
+var _hoisted_28 = {
   "class": "pro-layout__tag-actions"
 };
 var script = {
   __name: 'ProLayout',
   props: {
-    /** 是否显示侧边栏 */
     showSider: {
       type: Boolean,
       "default": true
     },
-    /** 侧边栏宽度 */
     siderWidth: {
       type: String,
       "default": '180px'
     },
-    /** 侧边栏折叠宽度 */
     siderCollapsedWidth: {
       type: String,
       "default": '64px'
     },
-    /** 是否固定头部 */
     fixedHeader: {
       type: Boolean,
       "default": true
     },
-    /** 是否折叠 */
     collapsed: {
       type: Boolean,
       "default": true
     },
-    /** 是否显示折叠按钮 */
     showCollapse: {
       type: Boolean,
       "default": true
     },
-    /** 是否显示 Logo */
     showLogo: {
       type: Boolean,
       "default": true
     },
-    /** Logo 图片，可以是字符串（路径）或对象（包含 src 和 size） */
     logo: {
       type: [String, Object],
       "default": null
     },
-    /** 标题 */
     title: {
       type: String,
       "default": 'Pro Layout'
     },
-    /** 菜单项 */
     menuItems: {
       type: Array,
       "default": function _default() {
         return [];
       }
     },
-    /** 顶部菜单项 */
     topMenuItems: {
       type: Array,
       "default": function _default() {
         return [];
       }
     },
-    /** 当前激活的菜单 */
     activeMenu: {
       type: String,
       "default": undefined
     },
-    /** 菜单折叠动画 */
     menuCollapseTransition: {
       type: Boolean,
       "default": true
     },
-    /** 是否只保持一个子菜单的展开 */
     menuUniqueOpened: {
       type: Boolean,
       "default": true
     },
-    /** 菜单模式 */
     menuMode: {
       type: String,
       "default": 'vertical'
     },
-    /** 是否使用 vue-router 的模式 */
     menuRouter: {
       type: Boolean,
       "default": true
     },
-    /** 菜单属性 */
     menuProps: {
       type: Object,
       "default": function _default() {
         return {};
       }
     },
-    /** 是否显示头部 */
     showHeader: {
       type: Boolean,
       "default": true
     },
-    /** 头部高度 */
     headerHeight: {
       type: String,
       "default": '60px'
     },
-    /** 是否显示页脚 */
     showFooter: {
       type: Boolean,
       "default": false
     },
-    /** 页脚高度 */
     footerHeight: {
       type: String,
       "default": '60px'
     },
-    /** 是否启用响应式布局 */
     responsive: {
       type: Boolean,
       "default": true
     },
-    /** 响应式断点（屏幕宽度小于此值时视为移动端） */
     breakpoint: {
       type: Number,
       "default": 768
     },
-    /** 是否显示菜单搜索框 */
     showMenuSearch: {
       type: Boolean,
       "default": true
     },
-    /** 菜单搜索框占位符 */
     menuSearchPlaceholder: {
       type: String,
       "default": '请输入菜单名称'
     },
-    /** 是否显示常用菜单 */
     showCommonMenus: {
       type: Boolean,
       "default": true
     },
-    /** 常用菜单最大数量 */
     commonMenusMax: {
       type: Number,
       "default": 5
     },
-    /** 是否在头部显示 Logo */
     showLogoInHeader: {
       type: Boolean,
       "default": true
     },
-    /** 是否显示顶部菜单 */
     showTopMenu: {
       type: Boolean,
       "default": true
     },
-    /** 是否显示头部搜索框 */
     showHeaderSearch: {
       type: Boolean,
       "default": true
     },
-    /** 头部搜索框占位符 */
     headerSearchPlaceholder: {
       type: String,
       "default": '输入客户名称'
     },
-    /** 是否显示电话图标 */
     showPhoneIcon: {
       type: Boolean,
       "default": true
     },
-    /** 是否显示通知图标 */
     showBellIcon: {
       type: Boolean,
       "default": true
     },
-    /** 是否显示 TagsView */
     showTagsView: {
       type: Boolean,
       "default": true
     },
-    /** TagsView 高度 */
     tagsViewHeight: {
       type: String,
       "default": '40px'
+    },
+    tagsViewHomePath: {
+      type: String,
+      "default": '/'
     }
   },
-  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-refresh', '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'],
   setup: function setup(__props, _ref) {
     var __emit = _ref.emit;
     var slots = useSlots();
@@ -294,17 +277,21 @@ var script = {
     var headerSearchText = ref('');
     var menuTitleRefs = new Map();
     var menuTitleOverflowMap = ref(new Map());
-
-    // TagsView 相关
     var visitedTags = ref([]);
     var currentPath = ref('');
-
-    // 为 tags menu 生成唯一的 key，确保动态添加标签时能触发 ellipsis 重新计算
     var tagsMenuKey = computed(function () {
       return "tags-menu-".concat(visitedTags.value.length, "-").concat(visitedTags.value.map(function (t) {
         return t.path;
       }).join('-'));
     });
+    var tagsViewHomePath = computed(function () {
+      return props.tagsViewHomePath;
+    });
+    var otherVisitedTags = computed(function () {
+      return visitedTags.value.filter(function (t) {
+        return t.path !== tagsViewHomePath.value;
+      });
+    });
     var getMenuTitleKey = function getMenuTitleKey(item) {
       var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
       return "".concat(prefix).concat((item === null || item === void 0 ? void 0 : item.path) || (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.label) || '');
@@ -342,8 +329,6 @@ var script = {
     var isMenuTitleOverflow = function isMenuTitleOverflow(key) {
       return menuTitleOverflowMap.value.get(key) === true;
     };
-
-    // 从 menuItems 中查找标题
     var _findMenuTitle = function findMenuTitle(path) {
       var menuItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.menuItems;
       var _iterator = _createForOfIteratorHelper(menuItems),
@@ -366,29 +351,39 @@ var script = {
       }
       return null;
     };
-
-    // 获取路由标题
+    var ensureAffixHomeTag = function ensureAffixHomeTag() {
+      var hp = tagsViewHomePath.value;
+      var idx = visitedTags.value.findIndex(function (t) {
+        return t.path === hp;
+      });
+      if (idx === -1) {
+        var title = _findMenuTitle(hp) || '首页';
+        visitedTags.value.unshift({
+          path: hp,
+          title: title,
+          fullPath: hp
+        });
+      } else if (idx > 0) {
+        var _visitedTags$value$sp = visitedTags.value.splice(idx, 1),
+          _visitedTags$value$sp2 = _slicedToArray(_visitedTags$value$sp, 1),
+          homeTag = _visitedTags$value$sp2[0];
+        visitedTags.value.unshift(homeTag);
+      }
+    };
     var getRouteTitle = function getRouteTitle(route) {
       var _route$meta;
-      // 优先使用路由 meta.title
       if ((_route$meta = route.meta) !== null && _route$meta !== void 0 && _route$meta.title) {
         return route.meta.title;
       }
-      // 其次从 menuItems 中查找
       var menuTitle = _findMenuTitle(route.path);
       if (menuTitle) {
         return menuTitle;
       }
-      // 最后使用路由名称或路径
       return route.name || route.path;
     };
-
-    // 添加标签
     var addTag = function addTag(route) {
       var path = route.path;
       var title = getRouteTitle(route);
-
-      // 检查标签是否已存在
       var existingTag = visitedTags.value.find(function (tag) {
         return tag.path === path;
       });
@@ -401,35 +396,30 @@ var script = {
       }
       currentPath.value = path;
     };
-
-    // 删除标签
     var removeTag = function removeTag(tag) {
+      if (tag.path === tagsViewHomePath.value) {
+        return;
+      }
       var index = visitedTags.value.findIndex(function (t) {
         return t.path === tag.path;
       });
       if (index > -1) {
         visitedTags.value.splice(index, 1);
-
-        // 如果删除的是当前标签，跳转到最后一个标签或首页
         if (tag.path === currentPath.value) {
           if (visitedTags.value.length > 0) {
             var lastTag = visitedTags.value[visitedTags.value.length - 1];
             router.push(lastTag.fullPath || lastTag.path);
           } else {
-            router.push('/');
+            router.push(tagsViewHomePath.value);
           }
         }
       }
     };
-
-    // 点击标签
     var handleTagClick = function handleTagClick(tag) {
       if (tag.path !== currentPath.value) {
         router.push(tag.fullPath || tag.path);
       }
     };
-
-    // 处理 el-menu 的 select 事件
     var handleTagMenuSelect = function handleTagMenuSelect(index) {
       var tag = visitedTags.value.find(function (t) {
         return t.path === index;
@@ -438,50 +428,30 @@ var script = {
         handleTagClick(tag);
       }
     };
-
-    // 刷新标签
-    var handleTagRefresh = function handleTagRefresh(tag) {
-      // 触发路由刷新，通过重新导航到相同路径并添加时间戳参数
-      var currentQuery = _objectSpread({}, route.query);
-      currentQuery._t = Date.now();
-      router.replace({
-        path: tag.fullPath || tag.path,
-        query: currentQuery
-      });
-      emit('tag-refresh', tag);
-    };
-
-    // 关闭标签
     var handleTagClose = function handleTagClose(tag) {
-      // 至少保留一个标签
-      if (visitedTags.value.length <= 1) {
+      if (tag.path === tagsViewHomePath.value) {
         return;
       }
       removeTag(tag);
       emit('tag-close', tag);
     };
-
-    // 监听路由变化
     watch(function () {
       return route.path;
     }, function (newPath) {
       if (props.showTagsView && newPath) {
         addTag(route);
+        ensureAffixHomeTag();
       }
     }, {
       immediate: true
     });
-
-    // 图标组件
     var SearchIcon = markRaw(Search);
     var PhoneIcon = markRaw(Service);
     var BellIcon = markRaw(Bell);
     var CloseIcon = markRaw(Close);
-    var RefreshRightIcon = markRaw(Refresh);
+    var HouseIcon = markRaw(House);
     var ExpandIcon = markRaw(Expand);
     var FoldIcon = markRaw(Fold);
-
-    // Logo 相关计算属性
     var logoSrc = computed(function () {
       if (!props.logo) return null;
       if (typeof props.logo === 'string') {
@@ -517,8 +487,6 @@ var script = {
       }
       return {};
     });
-
-    // 检测是否为移动端
     var checkMobile = function checkMobile() {
       if (!props.responsive) {
         isMobile.value = _isMobile();
@@ -526,8 +494,6 @@ var script = {
       }
       windowWidth.value = window.innerWidth;
       isMobile.value = windowWidth.value < props.breakpoint || _isMobile();
-
-      // 移动端自动折叠侧边栏
       if (isMobile.value && !collapsed.value) {
         collapsed.value = true;
       }
@@ -562,8 +528,6 @@ var script = {
     var toggleCollapse = function toggleCollapse() {
       collapsed.value = !collapsed.value;
     };
-
-    // 计算下方容器的高度和位置
     var bodyStyle = computed(function () {
       var style = {};
       if (props.showHeader) {
@@ -578,39 +542,27 @@ var script = {
       }
       return style;
     });
-
-    // 计算折叠按钮的位置
     var collapseBtnStyle = computed(function () {
       var siderWidthValue = collapsed.value ? props.siderCollapsedWidth : props.siderWidth;
-      // 将宽度值转换为数字（去掉 px 单位）
       var widthNum = parseFloat(siderWidthValue);
       return {
         left: "".concat(widthNum, "px")
       };
     });
-
-    // 处理菜单项的通用函数
     var _processMenuItem = function processMenuItem(item) {
       var processed = _objectSpread({}, item);
-      // 如果 icon 是组件，使用 markRaw 标记
       if (processed.icon && _typeof(processed.icon) === 'object' && 'setup' in processed.icon) {
         processed.icon = markRaw(processed.icon);
       }
-
-      // 菜单搜索过滤
       if (props.showMenuSearch && menuSearchText.value) {
         var searchText = menuSearchText.value.toLowerCase();
         var title = (processed.title || processed.label || '').toLowerCase();
-
-        // 如果当前项匹配，保留所有子项
         if (title.includes(searchText)) {
           if (processed.children && Array.isArray(processed.children)) {
             processed.children = processed.children.map(_processMenuItem);
           }
           return processed;
         }
-
-        // 如果当前项不匹配，检查子项
         if (processed.children && Array.isArray(processed.children)) {
           var filteredChildren = processed.children.map(_processMenuItem).filter(function (child) {
             return child !== null;
@@ -620,24 +572,16 @@ var script = {
             return processed;
           }
         }
-
-        // 都不匹配，返回 null
         return null;
       }
-
-      // 递归处理子菜单（无搜索时）
       if (processed.children && Array.isArray(processed.children)) {
         processed.children = processed.children.map(_processMenuItem);
       }
       return processed;
     };
-
-    // 处理菜单组，将 menuItems 中的组数据转换为可渲染的格式
     var menuGroups = computed(function () {
       return props.menuItems.map(function (group) {
-        // 如果 group 有 type 和 children，说明是分组格式
         if (group.type && group.children) {
-          // 如果 type 是 'common' 且 showCommonMenus 为 false，则跳过
           if (group.type === 'common' && !props.showCommonMenus) {
             return null;
           }
@@ -650,7 +594,6 @@ var script = {
             items: processedItems
           };
         }
-        // 如果没有 type，说明是单个菜单项，需要包装成组
         var processed = _processMenuItem(group);
         if (processed) {
           return {
@@ -664,38 +607,26 @@ var script = {
         return group !== null && group.items.length > 0;
       });
     });
-
-    // 自动计算常用菜单数量
     var commonMenusCount = computed(function () {
       var commonGroup = menuGroups.value.find(function (group) {
         return group.type === 'common';
       });
       return commonGroup ? commonGroup.items.length : 0;
     });
-
-    // 菜单组展开/收缩状态管理
     var menuGroupExpanded = ref({});
-
-    // 初始化菜单组展开状态（默认全部展开）
     var initMenuGroupExpanded = function initMenuGroupExpanded() {
       menuGroups.value.forEach(function (group, index) {
         if (menuGroupExpanded.value[index] === undefined) {
-          menuGroupExpanded.value[index] = true; // 默认展开
+          menuGroupExpanded.value[index] = true;
         }
       });
     };
-
-    // 判断菜单组是否展开
     var isMenuGroupExpanded = function isMenuGroupExpanded(groupIndex) {
-      return menuGroupExpanded.value[groupIndex] !== false; // 默认为 true
+      return menuGroupExpanded.value[groupIndex] !== false;
     };
-
-    // 切换菜单组展开/收缩状态
     var toggleMenuGroup = function toggleMenuGroup(groupIndex) {
       menuGroupExpanded.value[groupIndex] = !isMenuGroupExpanded(groupIndex);
     };
-
-    // 监听 menuGroups 变化，初始化展开状态
     watch(menuGroups, function () {
       initMenuGroupExpanded();
       nextTick(checkAllMenuTitleOverflow);
@@ -708,41 +639,49 @@ var script = {
     }, function () {
       nextTick(checkAllMenuTitleOverflow);
     });
-
-    // 编辑模式状态
     var isEditMode = ref(false);
-
-    // 切换编辑模式
     var toggleEditMode = function toggleEditMode() {
       isEditMode.value = !isEditMode.value;
     };
-
-    // 处理常用菜单删除
     var handleCommonMenuDelete = function handleCommonMenuDelete(item) {
       emit('common-menu-delete', item);
     };
-
-    // 获取文字的第一个字符
     var getFirstChar = function getFirstChar(text) {
       if (!text) return '';
-      // 获取第一个字符（支持中文和英文）
       var firstChar = text.trim().charAt(0);
       return firstChar || '';
     };
-
-    // 顶部菜单项（优先使用传入的 topMenuItems，否则从 menuItems 中提取顶级菜单）
     var topMenuItems = computed(function () {
-      // 如果传入了 topMenuItems，直接使用
       if (props.topMenuItems && props.topMenuItems.length > 0) {
         return props.topMenuItems;
       }
       return [];
     });
 
-    // 计算当前激活的顶部菜单
+    /** 顶栏只保留「工作台」右侧一条竖向分隔线 */
+    var topMenuItemsWithDividers = computed(function () {
+      var list = topMenuItems.value;
+      if (!list.length) return [];
+      if (list.length === 1) return list;
+      return [list[0], {
+        __divider: true,
+        key: 'top-menu-div-lead'
+      }].concat(_toConsumableArray(list.slice(1)));
+    });
+
+    /** 顶栏横向菜单中第一个真实项（工作台 / 首页）在扁平列表里的下标，用于常驻灰底样式 */
+    var topMenuLeadFlatIndex = computed(function () {
+      var arr = topMenuItemsWithDividers.value;
+      var i = arr.findIndex(function (x) {
+        return !x.__divider;
+      });
+      return i >= 0 ? i : -1;
+    });
+    var isTopMenuLeadItem = function isTopMenuLeadItem(index) {
+      return index === topMenuLeadFlatIndex.value;
+    };
     var activeTopMenu = computed(function () {
       var currentPath = route.path;
-      // 查找匹配的菜单项
       var _iterator2 = _createForOfIteratorHelper(props.topMenuItems),
         _step2;
       try {
@@ -751,7 +690,6 @@ var script = {
           if (item.path && (currentPath === item.path || currentPath.startsWith(item.path + '/'))) {
             return item.path || item.key;
           }
-          // 检查子菜单
           if (item.children && item.children.length > 0) {
             var _iterator3 = _createForOfIteratorHelper(item.children),
               _step3;
@@ -776,27 +714,18 @@ var script = {
       }
       return '';
     });
-
-    // 处理顶部菜单点击
     var handleTopMenuClick = function handleTopMenuClick(item) {
       if (item.path) {
         router.push(item.path);
       }
     };
-
-    // 处理菜单搜索按钮点击
     var handleMenuSearchClick = function handleMenuSearchClick() {
-      // 点击后展开菜单
       collapsed.value = false;
       emit('menu-search-click');
     };
-
-    // 监听菜单搜索
     watch(menuSearchText, function (val) {
       emit('menu-search', val);
     });
-
-    // 监听头部搜索
     watch(headerSearchText, function (val) {
       emit('header-search', val);
     });
@@ -807,7 +736,7 @@ var script = {
         }])
       }, {
         "default": withCtx(function () {
-          return [createCommentVNode(" 顶部 Header (100vw) "), __props.showHeader ? (openBlock(), createBlock(unref(ElHeader), {
+          return [__props.showHeader ? (openBlock(), createBlock(unref(ElHeader), {
             key: 0,
             height: __props.headerHeight,
             "class": normalizeClass(["pro-layout__header", {
@@ -815,7 +744,7 @@ var script = {
             }])
           }, {
             "default": withCtx(function () {
-              return [createElementVNode("div", _hoisted_1, [createCommentVNode(" 左侧：Logo "), createElementVNode("div", _hoisted_2, [__props.showLogoInHeader ? (openBlock(), createElementBlock("div", {
+              return [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [__props.showLogoInHeader ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 "class": "pro-layout__header-logo",
                 onClick: _cache[0] || (_cache[0] = function ($event) {
@@ -828,45 +757,81 @@ 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[5] || (_cache[5] = createElementVNode("span", {
+                }, null, 12 /* STYLE, PROPS */, _hoisted_3)) : createCommentVNode("v-if", true), __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, [_cache[6] || (_cache[6] = 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(" 中间：主菜单导航 "), __props.showTopMenu && topMenuItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(ElMenu), {
+              })]), __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: __props.menuRouter,
+                router: false,
                 ellipsis: true,
                 "class": "pro-layout__top-menu-el"
               }, {
                 "default": withCtx(function () {
-                  return [(openBlock(true), createElementBlock(Fragment, null, renderList(topMenuItems.value, function (item) {
+                  return [(openBlock(true), createElementBlock(Fragment, null, renderList(topMenuItemsWithDividers.value, function (item, index) {
                     return openBlock(), createElementBlock(Fragment, {
-                      key: item.path || item.key || item.label
-                    }, [!item.children || item.children.length === 0 ? (openBlock(), createBlock(unref(ElMenuItem), {
+                      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[1] || (_cache[1] = withModifiers(function () {}, ["prevent", "stop"]))
+                    }, {
+                      "default": withCtx(function () {
+                        return _toConsumableArray(_cache[7] || (_cache[7] = [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_6, [createTextVNode(toDisplayString(item.title || item.label) + " ", 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
+                        return [createElementVNode("span", _hoisted_7, [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_8, 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", "onClick"])) : (openBlock(), createBlock(unref(ElSubMenu), {
-                      key: 1,
-                      index: item.path || item.key
+                    }, 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_7, [createTextVNode(toDisplayString(item.title || item.label) + " ", 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
+                        return [createElementVNode("span", _hoisted_9, [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_10, 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'
@@ -889,14 +854,14 @@ var script = {
                         }), 128 /* KEYED_FRAGMENT */))];
                       }),
                       _: 2 /* DYNAMIC */
-                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index"]))], 64 /* STABLE_FRAGMENT */);
+                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "class"]))], 64 /* STABLE_FRAGMENT */);
                   }), 128 /* KEYED_FRAGMENT */))];
                 }),
                 _: 1 /* STABLE */
-              }, 8 /* PROPS */, ["default-active", "router"])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_8, [__props.showHeaderSearch ? (openBlock(), createBlock(unref(ElInput), {
+              }, 8 /* PROPS */, ["default-active"])])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_11, [__props.showHeaderSearch ? (openBlock(), createBlock(unref(ElInput), {
                 key: 0,
                 modelValue: headerSearchText.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
                   return headerSearchText.value = $event;
                 }),
                 placeholder: __props.headerSearchPlaceholder,
@@ -919,7 +884,7 @@ var script = {
                 text: "",
                 circle: "",
                 "class": "pro-layout__header-action-btn",
-                onClick: _cache[2] || (_cache[2] = function ($event) {
+                onClick: _cache[3] || (_cache[3] = function ($event) {
                   return _ctx.$emit('phone-click');
                 })
               }, {
@@ -937,7 +902,7 @@ var script = {
                 text: "",
                 circle: "",
                 "class": "pro-layout__header-action-btn",
-                onClick: _cache[3] || (_cache[3] = function ($event) {
+                onClick: _cache[4] || (_cache[4] = function ($event) {
                   return _ctx.$emit('bell-click');
                 })
               }, {
@@ -950,17 +915,17 @@ var script = {
                   })];
                 }),
                 _: 1 /* STABLE */
-              })) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_9, [renderSlot(_ctx.$slots, "header-right", {
+              })) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "header-right", {
                 collapsed: collapsed.value
               })])])])];
             }),
             _: 3 /* FORWARDED */
-          }, 8 /* PROPS */, ["height", "class"])) : createCommentVNode("v-if", true), createCommentVNode(" 下方容器：左侧导航 + 右侧内容区 "), createVNode(unref(ElContainer), {
+          }, 8 /* PROPS */, ["height", "class"])) : createCommentVNode("v-if", true), createVNode(unref(ElContainer), {
             "class": "pro-layout__body",
             style: normalizeStyle(bodyStyle.value)
           }, {
             "default": withCtx(function () {
-              return [createCommentVNode(" 侧边栏 "), __props.showSider ? (openBlock(), createBlock(unref(ElAside), {
+              return [__props.showSider ? (openBlock(), createBlock(unref(ElAside), {
                 key: 0,
                 width: collapsed.value ? __props.siderCollapsedWidth : __props.siderWidth,
                 "class": normalizeClass(["pro-layout__sider", {
@@ -968,12 +933,12 @@ var script = {
                 }])
               }, {
                 "default": withCtx(function () {
-                  return [createCommentVNode(" 侧边栏头部插槽 "), unref(slots)['sider-header'] ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "sider-header", {
+                  return [unref(slots)['sider-header'] ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "sider-header", {
                     collapsed: collapsed.value
-                  })])) : createCommentVNode("v-if", true), createCommentVNode(" 菜单搜索框 "), __props.showMenuSearch ? (openBlock(), createElementBlock("div", _hoisted_11, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
+                  })])) : createCommentVNode("v-if", true), __props.showMenuSearch ? (openBlock(), createElementBlock("div", _hoisted_14, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
                     key: 0,
                     modelValue: menuSearchText.value,
-                    "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
+                    "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
                       return menuSearchText.value = $event;
                     }),
                     placeholder: __props.menuSearchPlaceholder,
@@ -1006,19 +971,19 @@ var script = {
                       })];
                     }),
                     _: 1 /* STABLE */
-                  }))])) : createCommentVNode("v-if", true), createCommentVNode(" 菜单滚动区域 "), createVNode(unref(ElScrollbar), {
+                  }))])) : createCommentVNode("v-if", true), createVNode(unref(ElScrollbar), {
                     "class": "pro-layout__menu-scrollbar"
                   }, {
                     "default": withCtx(function () {
-                      return [createCommentVNode(" 动态菜单组 "), (openBlock(true), createElementBlock(Fragment, null, renderList(menuGroups.value, function (group, groupIndex) {
+                      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_12, [createCommentVNode(" 当 showCommonMenus 为 false 且只有一个菜单组时，隐藏头部 "), __props.showCommonMenus || menuGroups.value.length > 1 ? (openBlock(), createElementBlock("div", {
+                        }, [group.items && group.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [__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_13, [!collapsed.value ? (openBlock(), createBlock(unref(ElIcon), {
+                        }, [createElementVNode("div", _hoisted_16, [!collapsed.value ? (openBlock(), createBlock(unref(ElIcon), {
                           key: 0,
                           "class": "pro-layout__menu-group-toggle",
                           onClick: function onClick($event) {
@@ -1029,7 +994,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_14, toDisplayString(group.title), 1 /* TEXT */)) : (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(getFirstChar(group.title)), 1 /* TEXT */))]), !collapsed.value ? (openBlock(), createElementBlock("div", _hoisted_16, [group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_17, [createElementVNode("span", _hoisted_18, toDisplayString(commonMenusCount.value), 1 /* TEXT */), createElementVNode("span", _hoisted_19, "/" + 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_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", {
                           key: 1,
                           "class": "pro-layout__menu-group-edit",
                           onClick: toggleEditMode
@@ -1094,7 +1059,7 @@ var script = {
                                       return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
                                     }),
                                     _: 2 /* DYNAMIC */
-                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
+                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_23, 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), {
@@ -1110,7 +1075,7 @@ var script = {
                                       return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
                                     }),
                                     _: 2 /* DYNAMIC */
-                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_21, 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_24, 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",
@@ -1161,7 +1126,7 @@ var script = {
                                             return [(openBlock(), createBlock(resolveDynamicComponent(child.icon)))];
                                           }),
                                           _: 2 /* DYNAMIC */
-                                        }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
+                                        }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_25, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
                                       }),
                                       _: 2 /* DYNAMIC */
                                     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "disabled"]);
@@ -1183,17 +1148,17 @@ var script = {
                   })];
                 }),
                 _: 3 /* FORWARDED */
-              }, 8 /* PROPS */, ["width", "class"])) : createCommentVNode("v-if", true), createCommentVNode(" 折叠按钮：悬浮在侧边栏右边线的中间 "), __props.showSider && __props.showCollapse ? (openBlock(), createBlock(unref(ElButton), {
+              }, 8 /* PROPS */, ["width", "class"])) : createCommentVNode("v-if", true), __props.showSider && __props.showCollapse ? (openBlock(), createBlock(unref(ElButton), {
                 key: 1,
                 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), createCommentVNode(" 右侧内容区 "), createVNode(unref(ElContainer), {
+              }, null, 8 /* PROPS */, ["icon", "style"])) : createCommentVNode("v-if", true), createVNode(unref(ElContainer), {
                 "class": "pro-layout__content-wrapper"
               }, {
                 "default": withCtx(function () {
-                  return [createCommentVNode(" 右上：TagsView 区域 "), __props.showTagsView ? (openBlock(), createElementBlock("div", {
+                  return [__props.showTagsView ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     "class": "pro-layout__tags-view",
                     style: normalizeStyle({
@@ -1208,25 +1173,27 @@ var script = {
                     onSelect: handleTagMenuSelect
                   }, {
                     "default": withCtx(function () {
-                      return [(openBlock(true), createElementBlock(Fragment, null, renderList(visitedTags.value, function (tag) {
+                      return [createVNode(unref(ElMenuItem), {
+                        index: tagsViewHomePath.value,
+                        "class": "pro-layout__tag-item pro-layout__tag-item--affix"
+                      }, {
+                        title: withCtx(function () {
+                          return [createElementVNode("span", _hoisted_26, [createVNode(unref(ElIcon), null, {
+                            "default": withCtx(function () {
+                              return [(openBlock(), createBlock(resolveDynamicComponent(unref(HouseIcon))))];
+                            }),
+                            _: 1 /* STABLE */
+                          })])];
+                        }),
+                        _: 1 /* STABLE */
+                      }, 8 /* PROPS */, ["index"]), (openBlock(true), createElementBlock(Fragment, null, renderList(otherVisitedTags.value, function (tag) {
                         return openBlock(), createBlock(unref(ElMenuItem), {
                           key: tag.path,
                           index: tag.path,
                           "class": "pro-layout__tag-item"
                         }, {
                           title: withCtx(function () {
-                            return [createElementVNode("span", _hoisted_23, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_24, [createVNode(unref(ElIcon), {
-                              "class": "pro-layout__tag-icon",
-                              onClick: withModifiers(function ($event) {
-                                return handleTagRefresh(tag);
-                              }, ["stop"])
-                            }, {
-                              "default": withCtx(function () {
-                                return [(openBlock(), createBlock(resolveDynamicComponent(unref(RefreshRightIcon))))];
-                              }),
-                              _: 1 /* STABLE */
-                            }, 8 /* PROPS */, ["onClick"]), visitedTags.value.length > 1 ? (openBlock(), createBlock(unref(ElIcon), {
-                              key: 0,
+                            return [createElementVNode("span", _hoisted_27, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_28, [createVNode(unref(ElIcon), {
                               "class": "pro-layout__tag-icon",
                               onClick: withModifiers(function ($event) {
                                 return handleTagClose(tag);
@@ -1236,21 +1203,21 @@ var script = {
                                 return [(openBlock(), createBlock(resolveDynamicComponent(unref(CloseIcon))))];
                               }),
                               _: 1 /* STABLE */
-                            }, 8 /* PROPS */, ["onClick"])) : createCommentVNode("v-if", true)])];
+                            }, 8 /* PROPS */, ["onClick"])])];
                           }),
                           _: 2 /* DYNAMIC */
                         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index"]);
                       }), 128 /* KEYED_FRAGMENT */))];
                     }),
                     _: 1 /* STABLE */
-                  }, 8 /* PROPS */, ["default-active"]))], 4 /* STYLE */)) : createCommentVNode("v-if", true), createCommentVNode(" 右下：Contain 区域 "), createVNode(unref(ElMain), {
+                  }, 8 /* PROPS */, ["default-active"]))], 4 /* STYLE */)) : createCommentVNode("v-if", true), createVNode(unref(ElMain), {
                     "class": "pro-layout__content"
                   }, {
                     "default": withCtx(function () {
                       return [renderSlot(_ctx.$slots, "default")];
                     }),
                     _: 3 /* FORWARDED */
-                  }), createCommentVNode(" 页脚 "), __props.showFooter ? (openBlock(), createBlock(unref(ElFooter), {
+                  }), __props.showFooter ? (openBlock(), createBlock(unref(ElFooter), {
                     key: 1,
                     height: __props.footerHeight,
                     "class": "pro-layout__footer"