feat: 路由添加可配置的fixedTag属性，作用为当前菜单是否固定显示在标签页且不可关闭

mock/asyncRoutes.ts

@@ -40,7 +40,8 @@ const systemManagementRouter = {
       meta: {
         icon: "ep:menu",
         title: "menus.pureSystemMenu",
-        roles: ["admin"]
+        roles: ["admin"],
+        fixedTag: true
       }
     },
     {
@@ -119,7 +120,8 @@ const permissionRouter = {
       name: "PermissionPage",
       meta: {
         title: "menus.purePermissionPage",
-        roles: ["admin", "common"]
+        roles: ["admin", "common"],
+        fixedTag: true
       }
     },
     {
@@ -243,7 +245,8 @@ const frameRouter = {
             title: "menus.purePiniaDoc",
             frameSrc: "https://pinia.vuejs.org/zh/index.html",
             keepAlive: true,
-            roles: ["admin", "common"]
+            roles: ["admin", "common"],
+            fixedTag: true
           }
         },
         {

src/layout/components/tag/index.scss

@@ -90,6 +90,10 @@
           padding: 0 12px;
         }
       }
+
+      .fixed-tag {
+        padding: 0 12px;
+      }
     }
   }
 

src/layout/components/tag/index.vue

@@ -425,7 +425,7 @@ function showMenuModel(
 
 function openMenu(tag, e) {
   closeMenu();
-  if (tag.path === topPath) {
+  if (tag.path === topPath || tag?.meta?.fixedTag) {
     // 右键菜单为顶级菜单，只显示刷新
     showMenus(false);
     tagsViews[0].show = true;
@@ -549,7 +549,11 @@ onBeforeUnmount(() => {
           v-for="(item, index) in multiTags"
           :ref="'dynamic' + index"
           :key="index"
-          :class="['scroll-item is-closable', linkIsActive(item)]"
+          :class="[
+            'scroll-item is-closable',
+            linkIsActive(item),
+            !isAllEmpty(item?.meta?.fixedTag) && 'fixed-tag'
+          ]"
           @contextmenu.prevent="openMenu(item, $event)"
           @mouseenter.prevent="onMouseenter(index)"
           @mouseleave.prevent="onMouseleave(index)"
@@ -562,8 +566,10 @@ onBeforeUnmount(() => {
           </span>
           <span
             v-if="
-              iconIsActive(item, index) ||
-              (index === activeIndex && index !== 0)
+              isAllEmpty(item?.meta?.fixedTag)
+                ? iconIsActive(item, index) ||
+                  (index === activeIndex && index !== 0)
+                : false
             "
             class="el-icon-close"
             @click.stop="deleteMenu(item)"

src/router/modules/able.ts

@@ -32,7 +32,8 @@ export default {
       name: "WaterMark",
       component: () => import("@/views/able/watermark.vue"),
       meta: {
-        title: $t("menus.pureWatermark")
+        title: $t("menus.pureWatermark"),
+        fixedTag: true
       }
     },
     {
@@ -72,7 +73,8 @@ export default {
       name: "Debounce",
       component: () => import("@/views/able/debounce.vue"),
       meta: {
-        title: $t("menus.pureDebounce")
+        title: $t("menus.pureDebounce"),
+        fixedTag: true
       }
     },
     {

src/router/modules/list.ts

@@ -17,7 +17,8 @@ export default {
       meta: {
         icon: "ri:bank-card-line",
         title: $t("menus.pureListCard"),
-        showParent: true
+        showParent: true,
+        fixedTag: true
       }
     }
   ]

src/router/modules/nested.ts

@@ -42,7 +42,8 @@ export default {
               name: "Menu1-2-1",
               meta: {
                 title: $t("menus.pureMenu1-2-1"),
-                keepAlive: true
+                keepAlive: true,
+                fixedTag: true
               }
             },
             {

src/router/modules/ppt.ts

@@ -18,7 +18,8 @@ export default {
         title: "PPT",
         keepAlive: true,
         frameSrc: "https://pipipi-pikachu.github.io/PPTist/",
-        frameLoading: false
+        frameLoading: false,
+        fixedTag: true
       }
     }
   ]

src/router/modules/table.ts

@@ -23,7 +23,8 @@ export default {
       name: "PureTableHigh",
       component: () => import("@/views/table/high.vue"),
       meta: {
-        title: $t("menus.pureTableHigh")
+        title: $t("menus.pureTableHigh"),
+        fixedTag: true
       }
     },
     {

src/store/modules/multiTags.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
+import { usePermissionStoreHook } from "./permission";
 import { routerArrays } from "@/layout/types";
 import { responsiveStorageNameSpace } from "@/config";
 import type { multiType, positionType } from "./types";
@@ -15,7 +16,10 @@ export const useMultiTagsStore = defineStore({
       ? storageLocal().getItem<StorageConfigs>(
           `${responsiveStorageNameSpace()}tags`
         )
-      : [...routerArrays],
+      : [
+          ...routerArrays,
+          ...usePermissionStoreHook().tagLists.filter(v => v?.meta?.fixedTag)
+        ],
     multiTagsCache: storageLocal().getItem<StorageConfigs>(
       `${responsiveStorageNameSpace()}configure`
     )?.multiTagsCache

src/store/modules/permission.ts

@@ -4,7 +4,12 @@ import type { cacheType } from "./types";
 import { constantMenus } from "@/router";
 import { useMultiTagsStoreHook } from "./multiTags";
 import { debounce, getKeyList } from "@pureadmin/utils";
-import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";
+import {
+  ascending,
+  filterTree,
+  filterNoPermissionTree,
+  formatFlatteningRoutes
+} from "@/router/utils";
 
 export const usePermissionStore = defineStore({
   id: "pure-permission",
@@ -13,6 +18,7 @@ export const usePermissionStore = defineStore({
     constantMenus,
     // 整体路由生成的菜单（静态、动态）
     wholeMenus: [],
+    tagLists: [],
     // 缓存页面keepAlive
     cachePageList: []
   }),
@@ -22,6 +28,7 @@ export const usePermissionStore = defineStore({
       this.wholeMenus = filterNoPermissionTree(
         filterTree(ascending(this.constantMenus.concat(routes)))
       );
+      this.tagLists = formatFlatteningRoutes(this.constantMenus.concat(routes));
     },
     cacheOperate({ mode, name }: cacheType) {
       const delIndex = this.cachePageList.findIndex(v => v === name);

src/views/system/menu/index.vue

@@ -61,7 +61,7 @@ const {
     </el-form>
 
     <PureTableBar
-      title="菜单管理（初版，持续完善中）"
+      title="菜单管理（仅演示，操作后不生效）"
       :columns="columns"
       :isExpandAll="false"
       :tableRef="tableRef?.getTableRef()"

types/router.d.ts

@@ -45,8 +45,10 @@ declare global {
       /** 离场动画 */
       leaveTransition?: string;
     };
-    // 是否不添加信息到标签页，（默认`false`）
+    /** 当前菜单名称或自定义信息禁止添加到标签页（默认`false`） */
     hiddenTag?: boolean;
+    /** 当前菜单是否固定显示在标签页且不可关闭（默认`false`） */
+    fixedTag?: boolean;
     /** 动态路由可打开的最大数量 `可选` */
     dynamicLevel?: number;
     /** 将某个菜单激活