@deppon/deppon-template 2.4.3 → 2.4.5

package/es/pro-layout/ProLayout.vue.css

@@ -1166,9 +1166,10 @@ body .el-overlay-dialog,
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: radial-gradient(circle at 8% 10%, rgba(64, 158, 255, 0.08), transparent 44%), radial-gradient(circle at 88% 0%, rgba(99, 102, 241, 0.08), transparent 38%), linear-gradient(180deg, #f6f9ff 0%, #f4f7fd 100%);
-  /* 覆盖 Element Plus 按钮样式，确保优先级 */
-  /* 防止 header-right 插槽内容挤压操作按钮 */
+  --pro-layout-header-bg: var(--el-bg-color, #ffffff);
+  --pro-layout-tags-bar-bg: var(--pro-layout-header-bg);
+  --pro-layout-main-bg: var(--el-bg-color-page, #f2f3f5);
+  background: #fff !important;
 }
 .pro-layout__sider {
   display: flex;
@@ -1181,9 +1182,6 @@ body .el-overlay-dialog,
   box-shadow: 2px 0 8px var(--pro-shadow-color-sider, rgba(0, 0, 0, 0.12));
   transition: width 0.3s ease, transform 0.3s ease;
   flex-shrink: 0;
-  /* 去除菜单组右侧的竖线 */
-  /* 直接针对 Element Plus 的 .el-menu 类设置样式 */
-  /* 确保 .pro-layout__menu 类也能正确匹配 */
 }
 .pro-layout__sider .el-scrollbar__view {
   overflow: visible;
@@ -1203,8 +1201,6 @@ body .el-overlay-dialog,
 }
 .pro-layout__sider .pro-layout__menu-group {
   border-right: none !important;
-  /* 确保菜单项也没有右侧边框 */
-  /* 直接针对菜单组内的 Element Plus 菜单设置样式 */
 }
 .pro-layout__sider .pro-layout__menu-group::after,
 .pro-layout__sider .pro-layout__menu-group::before {
@@ -1403,8 +1399,6 @@ body .el-overlay-dialog,
   border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0) !important;
   margin-bottom: 8px;
   margin-top: -1px;
-  /* 确保边框重叠时不会出现双边框 */
-  /* 收缩时居中显示首字符 */
 }
 .pro-layout__menu-group-header-left {
   display: flex;
@@ -1466,7 +1460,6 @@ body .el-overlay-dialog,
   background-color: transparent;
   font-weight: 400;
   font-family: var(--pro-font-family, 'PingFangSC-Regular') !important;
-  /* 常用菜单项样式 */
 }
 .pro-layout__menu--common .el-menu-item .el-menu-item__title {
   display: flex;
@@ -1509,14 +1502,11 @@ body .el-overlay-dialog,
 }
 .pro-layout__header {
   padding: 0 !important;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)) !important;
-  backdrop-filter: blur(10px);
+  background: var(--pro-layout-header-bg) !important;
   position: relative;
   z-index: 100;
   width: 100vw;
   border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
-  box-shadow: 0 8px 24px rgba(31, 56, 104, 0.06);
-  /* 覆盖 Element Plus 默认的按钮间距 */
 }
 .pro-layout__header--fixed {
   position: fixed;
@@ -1524,8 +1514,6 @@ body .el-overlay-dialog,
   left: 0;
   right: 0;
   z-index: 1000;
-  border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
-  box-shadow: 0 8px 24px rgba(31, 56, 104, 0.06);
 }
 .pro-layout__header-content {
   display: flex;
@@ -1672,8 +1660,8 @@ body .el-overlay-dialog,
   transition: all 0.2s ease !important;
 }
 .pro-layout__top-menu .el-menu-item:hover {
-  color: #1f6bff !important;
-  background: rgba(64, 158, 255, 0.09) !important;
+  color: var(--el-color-primary, #409eff) !important;
+  background: transparent !important;
 }
 .pro-layout__top-menu .el-menu-item.is-active {
   background: linear-gradient(135deg, rgba(57, 124, 255, 0.18), rgba(108, 74, 255, 0.15)) !important;
@@ -1741,25 +1729,30 @@ body .el-overlay-dialog,
 .pro-layout__tags-view {
   flex-shrink: 0;
   height: auto !important;
-  min-height: 48px !important;
-  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  background: var(--pro-layout-header-bg) !important;
   border-bottom: none !important;
   overflow: visible;
 }
 .pro-layout__tags-menu {
+  --el-menu-bg-color: var(--pro-layout-header-bg) !important;
   display: flex !important;
-  align-items: center;
+  flex: 1 1 auto;
+  align-self: stretch;
+  align-items: flex-end;
   flex-wrap: nowrap !important;
   overflow-x: auto !important;
-  overflow-y: hidden !important;
-  min-height: 48px;
-  padding: 6px 12px !important;
-  margin: 8px 14px 6px;
-  border-radius: 12px;
+  overflow-y: visible !important;
+  padding: 0 !important;
+  margin: 0 !important;
   border: none !important;
   outline: none;
-  background: transparent !important;
-  box-shadow: none;
+  background: var(--pro-layout-header-bg) !important;
+  min-height: 100%;
+  width: 100%;
   height: auto !important;
 }
 .pro-layout__tags-menu.el-menu.el-menu--horizontal {
@@ -1769,45 +1762,94 @@ body .el-overlay-dialog,
 }
 .pro-layout__tags-menu .el-menu-item {
   flex: 0 0 auto;
-  height: 34px !important;
-  line-height: 34px !important;
-  margin-right: 8px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  margin-right: 4px !important;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0 12px !important;
-  border-radius: 8px !important;
+  border-radius: 10px 10px 0 0 !important;
   border: none !important;
   border-bottom: none !important;
   background: transparent !important;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
-.pro-layout__tags-menu .el-menu-item:not(:last-child):not(.is-active)::after {
-  display: none;
-}
-.pro-layout__tags-menu .el-menu-item:hover {
-  background: rgba(78, 138, 255, 0.1) !important;
+.pro-layout__tags-menu .el-menu-item:not(.is-active):hover {
+  background: transparent !important;
 }
 .pro-layout__tags-menu .el-menu-item.is-active {
+  z-index: 2;
   border: none !important;
-  background: linear-gradient(135deg, #ffffff, #f3f8ff) !important;
-  box-shadow: 0 4px 12px rgba(59, 98, 186, 0.16);
+  background: var(--pro-layout-main-bg) !important;
+  box-shadow: none !important;
   border-bottom: none !important;
   overflow: visible;
 }
+.pro-layout__tags-menu .el-menu-item.is-active::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  bottom: 0;
+  width: 8px;
+  height: 8px;
+  background: var(--pro-layout-tags-bar-bg);
+  border-bottom-right-radius: 8px;
+  box-shadow: 2px 2px 0 0 var(--pro-layout-main-bg);
+}
+.pro-layout__tags-menu .el-menu-item.is-active::after {
+  content: '';
+  position: absolute;
+  right: -8px;
+  bottom: 0;
+  width: 8px;
+  height: 8px;
+  background: var(--pro-layout-tags-bar-bg);
+  border-bottom-left-radius: 8px;
+  box-shadow: -2px 2px 0 0 var(--pro-layout-main-bg);
+}
+.pro-layout__tags-menu .pro-layout__tag-item--affix {
+  padding: 0 10px !important;
+  min-width: 40px;
+  justify-content: center;
+  border-radius: 10px 10px 0 0 !important;
+}
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::before {
+  display: none;
+}
 .pro-layout__tags-menu .pro-layout__tag-label {
   color: #46556f;
   font-size: 12px;
   font-weight: 500;
   text-decoration: none !important;
 }
-.pro-layout__tags-menu .el-menu-item.is-active .pro-layout__tag-label {
-  color: #2259d2 !important;
+.pro-layout__tags-menu .pro-layout__tag-label--affix-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none !important;
+  overflow: visible;
+}
+.pro-layout__tags-menu .pro-layout__tag-label--affix-icon .el-icon {
+  font-size: 16px;
+  color: #5c6c84;
+}
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active .pro-layout__tag-label--affix-icon .el-icon {
+  color: var(--el-color-primary, #409eff);
+}
+.pro-layout__tags-menu .el-menu-item.is-active .pro-layout__tag-label:not(.pro-layout__tag-label--affix-icon) {
+  color: var(--el-color-primary, #409eff) !important;
   font-weight: 600;
 }
+.pro-layout__tags-menu .el-menu-item:not(.is-active:hover .pro-layout__tag-label:not(.pro-layout__tag-label--affix-icon)) {
+  color: var(--el-color-primary, #409eff) !important;
+}
+.pro-layout__tags-menu .el-menu-item:not(.is-active:hover .pro-layout__tag-label--affix-icon .el-icon) {
+  color: var(--el-color-primary, #409eff) !important;
+}
 .pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon {
   color: #8a98b2;
   font-size: 12px;
@@ -1816,7 +1858,7 @@ body .el-overlay-dialog,
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  margin-left: 2px;
+  margin-left: 4px;
 }
 .pro-layout__tags-menu .pro-layout__tag-item .pro-layout__tag-icon {
   margin-left: 0 !important;
@@ -1826,28 +1868,6 @@ body .el-overlay-dialog,
 .pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon:hover {
   color: #2b65f5 !important;
 }
-.pro-layout__tags-menu .fixed-home-tag-item {
-  cursor: pointer;
-  user-select: none;
-  padding: 0 12px !important;
-  background: linear-gradient(135deg, #eff5ff, #e8f1ff) !important;
-  box-shadow: none !important;
-}
-.pro-layout__tags-menu .fixed-home-tag-item .fixed-home-tag-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #2e5ccf;
-  font-weight: 600;
-}
-.pro-layout__tags-menu .fixed-home-tag-item .fixed-home-tag-icon {
-  font-style: normal;
-  font-size: 14px;
-  line-height: 1;
-}
-.pro-layout__tags-menu .fixed-home-tag-item .pro-layout__tag-actions {
-  display: none !important;
-}
 .pro-layout__tags-menu > .el-sub-menu {
   margin-left: auto !important;
   position: sticky;
@@ -1879,7 +1899,6 @@ body .el-overlay-dialog,
 }
 .pro-layout__tag-item.is-active .pro-layout__tag-icon:hover {
   color: var(--el-text-color-regular, #606266) !important;
-  background-color: var(--el-fill-color-dark, #e4e7ed) !important;
 }
 .pro-layout__tag-item.is-active .pro-layout__tag-icon:hover .el-icon,
 .pro-layout__tag-item.is-active .pro-layout__tag-icon:hover svg {
@@ -1916,7 +1935,6 @@ body .el-overlay-dialog,
   justify-content: center;
   width: 16px;
   height: 16px;
-  /* 穿透 el-icon 组件样式 */
 }
 .pro-layout__tag-icon .el-icon,
 .pro-layout__tag-icon svg {
@@ -1925,7 +1943,6 @@ body .el-overlay-dialog,
 }
 .pro-layout__tag-icon:hover {
   color: var(--el-text-color-regular, #606266) !important;
-  background-color: var(--el-fill-color-dark, #e4e7ed) !important;
 }
 .pro-layout__tag-icon:hover .el-icon,
 .pro-layout__tag-icon:hover svg {
@@ -1936,7 +1953,7 @@ body .el-overlay-dialog,
   width: 100%;
   padding: 0 !important;
   margin: 0 !important;
-  background: radial-gradient(circle at top left, #eef4ff 0%, #f7f9ff 45%, #fbfcff 100%) !important;
+  background: var(--pro-layout-main-bg) !important;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

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

@@ -1,10 +1,11 @@
 import '../_virtual/_rollup-plugin-inject-process-env.js';
-import _typeof from '@babel/runtime/helpers/typeof';
 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, resolveDynamicComponent, withDirectives, mergeProps, withModifiers, 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 { 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; }
@@ -89,197 +90,169 @@ var _hoisted_22 = {
   "class": "pro-layout__menu-item-char"
 };
 var _hoisted_23 = {
-  "class": "pro-layout__tag-label"
+  "class": "pro-layout__tag-label pro-layout__tag-label--affix-icon"
 };
 var _hoisted_24 = {
+  "class": "pro-layout__tag-label"
+};
+var _hoisted_25 = {
   "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 +267,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 +319,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 +341,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 +386,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 +418,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 +477,6 @@ var script = {
       }
       return {};
     });
-
-    // 检测是否为移动端
     var checkMobile = function checkMobile() {
       if (!props.responsive) {
         isMobile.value = _isMobile();
@@ -526,8 +484,6 @@ var script = {
       }
       windowWidth.value = window.innerWidth;
       isMobile.value = windowWidth.value < props.breakpoint || _isMobile();
-
-      // 移动端自动折叠侧边栏
       if (isMobile.value && !collapsed.value) {
         collapsed.value = true;
       }
@@ -562,8 +518,6 @@ var script = {
     var toggleCollapse = function toggleCollapse() {
       collapsed.value = !collapsed.value;
     };
-
-    // 计算下方容器的高度和位置
     var bodyStyle = computed(function () {
       var style = {};
       if (props.showHeader) {
@@ -578,39 +532,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 +562,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 +584,6 @@ var script = {
             items: processedItems
           };
         }
-        // 如果没有 type，说明是单个菜单项，需要包装成组
         var processed = _processMenuItem(group);
         if (processed) {
           return {
@@ -664,38 +597,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 +629,26 @@ 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 activeTopMenu = computed(function () {
       var currentPath = route.path;
-      // 查找匹配的菜单项
       var _iterator2 = _createForOfIteratorHelper(props.topMenuItems),
         _step2;
       try {
@@ -751,7 +657,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 +681,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 +703,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 +711,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) {
@@ -833,7 +729,7 @@ var script = {
                 }, 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, [createVNode(unref(ElMenu), {
                 "default-active": activeTopMenu.value,
                 mode: "horizontal",
                 router: __props.menuRouter,
@@ -955,12 +851,12 @@ var script = {
               })])])])];
             }),
             _: 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,9 +864,9 @@ 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_10, [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_11, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
                     key: 0,
                     modelValue: menuSearchText.value,
                     "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
@@ -1006,14 +902,14 @@ 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_12, [__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
@@ -1183,17 +1079,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 +1104,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_23, [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_24, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_25, [createVNode(unref(ElIcon), {
                               "class": "pro-layout__tag-icon",
                               onClick: withModifiers(function ($event) {
                                 return handleTagClose(tag);
@@ -1236,21 +1134,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"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.4.3",
+    "version": "2.4.5",
     "main": "es/index.js",
     "module": "es/index.js",
     "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
         "less": "^4.2.0"
     },
     "dependencies": {
-        "@deppon/deppon-assets": "2.4.3",
-        "@deppon/deppon-request": "2.4.3",
-        "@deppon/deppon-router": "2.4.3",
-        "@deppon/deppon-ui": "2.4.3",
-        "@deppon/deppon-utils": "2.4.3",
+        "@deppon/deppon-assets": "2.4.5",
+        "@deppon/deppon-request": "2.4.5",
+        "@deppon/deppon-router": "2.4.5",
+        "@deppon/deppon-ui": "2.4.5",
+        "@deppon/deppon-utils": "2.4.5",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"