perf: 同步完整版分支代码

public/serverConfig.json

@@ -3,6 +3,7 @@
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,
+  "MultiTagsCache": false,
   "KeepAlive": true,
   "Locale": "zh",
   "Layout": "vertical",

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1636197082361") format("woff2"),
-    url("iconfont.woff?t=1636197082361") format("woff"),
-    url("iconfont.ttf?t=1636197082361") format("truetype");
+  src: url("iconfont.woff2?t=1638023560828") format("woff2"),
+    url("iconfont.woff?t=1638023560828") format("woff"),
+    url("iconfont.ttf?t=1638023560828") format("truetype");
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.team-icontabs::before {
+  content: "\e63e";
+}
+
 .team-iconlogo::before {
   content: "\e620";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "team-icon",
   "description": "pure-admin",
   "glyphs": [
+    {
+      "icon_id": "20594647",
+      "name": "标签页",
+      "font_class": "tabs",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
     {
       "icon_id": "22129506",
       "name": "水能",

src/components/ReIcon/index.ts

@@ -3,6 +3,66 @@ import icon from "./src/Icon.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { iconComponents } from "/@/plugins/element-plus";
 
+/**
+ * find icon component
+ * @param icon icon图标
+ * @returns component
+ */
+export function findIconReg(icon: string) {
+  // fontawesome
+  const faReg = /^FA-/;
+  // iconfont
+  const iFReg = /^IF-/;
+  // typeof icon === "function" 属于SVG
+  if (faReg.test(icon)) {
+    const text = icon.split(faReg)[1];
+    return findIcon(
+      text.slice(0, text.indexOf(" ")),
+      "FA",
+      text.slice(text.indexOf(" ") + 1, text.length)
+    );
+  } else if (iFReg.test(icon)) {
+    return findIcon(icon.split(iFReg)[1], "IF");
+  } else if (typeof icon === "function") {
+    return findIcon(icon, "SVG");
+  } else {
+    return findIcon(icon, "EL");
+  }
+}
+
+// 支持fontawesome、iconfont、element-plus/icons、自定义svg
+export function findIcon(icon: String, type = "EL", property?: string) {
+  if (type === "FA") {
+    return defineComponent({
+      name: "FaIcon",
+      setup() {
+        return { icon, property };
+      },
+      components: { FontAwesomeIcon },
+      template: `<font-awesome-icon :icon="icon" v-bind:[property]="true" />`
+    });
+  } else if (type === "IF") {
+    return defineComponent({
+      name: "IfIcon",
+      data() {
+        return { icon: `iconfont ${icon}` };
+      },
+      template: `<i :class="icon" />`
+    });
+  } else if (type === "EL") {
+    const components = iconComponents.filter(
+      component => component.name === icon
+    );
+    if (components.length > 0) {
+      return components[0];
+    } else {
+      return null;
+    }
+  } else if (type === "SVG") {
+    return icon;
+  }
+}
+
 export const Icon = Object.assign(icon, {
   install(app: App) {
     app.component(icon.name, icon);
@@ -12,37 +72,3 @@ export const Icon = Object.assign(icon, {
 export default {
   Icon
 };
-/**
- * find icon component
- * @param icon icon图标
- * @returns component
- */
-export function findIconReg(icon: string) {
-  const faReg = /^fa-/;
-  if (faReg.test(icon)) {
-    return findIcon(icon.split(faReg)[1]);
-  } else {
-    return findIcon(icon, false);
-  }
-}
-export function findIcon(icon: String, isFa: Boolean = true) {
-  if (isFa) {
-    return defineComponent({
-      name: "FaIcon",
-      data() {
-        return { icon: icon };
-      },
-      components: { FontAwesomeIcon },
-      template: `<font-awesome-icon :icon="icon" />`
-    });
-  } else {
-    const components = iconComponents.filter(
-      component => component.name === icon
-    );
-    if (components.length > 0) {
-      return components[0];
-    } else {
-      return null;
-    }
-  }
-}

src/layout/components/setting/index.vue

@@ -17,6 +17,7 @@ import { debounce } from "/@/utils/debounce";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { storageLocal, storageSession } from "/@/utils/storage";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
 
 const router = useRouter();
@@ -135,6 +136,18 @@ function onReset() {
   storageSession.clear();
   toggleClass(false, "html-grey", document.querySelector("html"));
   toggleClass(false, "html-weakness", document.querySelector("html"));
+  useMultiTagsStoreHook().handleTags("equal", [
+    {
+      path: "/welcome",
+      parentPath: "/",
+      meta: {
+        title: "message.hshome",
+        icon: "el-icon-s-home",
+        i18n: true,
+        showLink: true
+      }
+    }
+  ]);
   router.push("/login");
 }
 

src/layout/components/tag/index.vue

@@ -1,18 +1,3 @@
-<script lang="ts">
-let routerArrays: Array<RouteConfigs> = [
-  {
-    path: "/welcome",
-    parentPath: "/",
-    meta: {
-      title: "message.hshome",
-      icon: "el-icon-s-home",
-      i18n: true,
-      showLink: true
-    }
-  }
-];
-</script>
-
 <script setup lang="ts">
 import {
   ref,
@@ -33,15 +18,16 @@ import closeOther from "/@/assets/svg/close_other.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 
 import { emitter } from "/@/utils/mitt";
-import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { transformI18n } from "/@/utils/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
+import { RouteConfigs, tagsViewsType } from "../../types";
 import { handleAliveRoute, delAliveRoutes } from "/@/router";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
-import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
+import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 
 const route = useRoute();
 const router = useRouter();
@@ -49,15 +35,18 @@ const translateX = ref<number>(0);
 const activeIndex = ref<number>(-1);
 let refreshButton = "refresh-button";
 const instance = getCurrentInstance();
-let relativeStorage: relativeStorageType;
 const pureSetting = useSettingStoreHook();
 const showTags = ref(storageLocal.getItem("tagsVal") || false);
 const tabDom = templateRef<HTMLElement | null>("tabDom", null);
 const containerDom = templateRef<HTMLElement | null>("containerDom", null);
 const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
 
+let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
+  return useMultiTagsStoreHook()?.multiTags;
+});
+
 const dynamicTagView = () => {
-  const index = dynamicTagList.value.findIndex(item => {
+  const index = multiTags.value.findIndex(item => {
     return item.path === route.path;
   });
   moveToView(index);
@@ -150,41 +139,38 @@ const tagsViews = ref<Array<tagsViewsType>>([
     icon: close,
     text: "message.hscloseCurrentTab",
     divided: false,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeLeft,
     text: "message.hscloseLeftTabs",
     divided: true,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeRight,
     text: "message.hscloseRightTabs",
     divided: false,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeOther,
     text: "message.hscloseOtherTabs",
     divided: true,
-    disabled: routerArrays.length > 2 ? false : true,
+    disabled: multiTags.value.length > 2 ? false : true,
     show: true
   },
   {
     icon: closeAll,
     text: "message.hscloseAllTabs",
     divided: false,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   }
 ]);
-const dynamicTagList: ComputedRef<Array<RouteConfigs>> = computed(() => {
-  return relativeStorage.routesInStorage;
-});
 
 // 显示模式，默认灵动模式显示
 const showModel = ref(storageLocal.getItem("showModel") || "smart");
@@ -200,7 +186,7 @@ let buttonTop = ref(0);
 let currentSelect = ref({});
 
 function dynamicRouteTag(value: string, parentPath: string): void {
-  const hasValue = relativeStorage.routesInStorage.some((item: any) => {
+  const hasValue = multiTags.value.some(item => {
     return item.path === value;
   });
 
@@ -209,13 +195,12 @@ function dynamicRouteTag(value: string, parentPath: string): void {
       arr.forEach((arrItem: any) => {
         let pathConcat = parentPath + arrItem.path;
         if (arrItem.path === value || pathConcat === value) {
-          routerArrays.push({
+          useMultiTagsStoreHook().handleTags("push", {
             path: value,
             parentPath: `/${parentPath.split("/")[1]}`,
             meta: arrItem.meta,
             name: arrItem.name
           });
-          relativeStorage.routesInStorage = routerArrays;
         } else {
           if (arrItem.children && arrItem.children.length > 0) {
             concatPath(arrItem.children, value, parentPath);
@@ -242,13 +227,17 @@ function onFresh() {
 function deleteDynamicTag(obj: any, current: any, tag?: string) {
   // 存放被删除的缓存路由
   let delAliveRouteList = [];
-  let valueIndex: number = routerArrays.findIndex((item: any) => {
+  let valueIndex: number = multiTags.value.findIndex((item: any) => {
     return item.path === obj.path;
   });
 
-  const spliceRoute = (start?: number, end?: number, other?: boolean): void => {
+  const spliceRoute = (
+    startIndex?: number,
+    length?: number,
+    other?: boolean
+  ): void => {
     if (other) {
-      relativeStorage.routesInStorage = [
+      useMultiTagsStoreHook().handleTags("equal", [
         {
           path: "/welcome",
           parentPath: "/",
@@ -260,11 +249,12 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
           }
         },
         obj
-      ];
-      routerArrays = relativeStorage.routesInStorage;
+      ]);
     } else {
-      delAliveRouteList = routerArrays.splice(start, end);
-      relativeStorage.routesInStorage = routerArrays;
+      delAliveRouteList = useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex,
+        length
+      });
     }
   };
 
@@ -273,12 +263,12 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   } else if (tag === "left") {
     spliceRoute(1, valueIndex - 1);
   } else if (tag === "right") {
-    spliceRoute(valueIndex + 1, routerArrays.length);
+    spliceRoute(valueIndex + 1, multiTags.value.length);
   } else {
     // 从当前匹配到的路径中删除
     spliceRoute(valueIndex, 1);
   }
-  let newRoute: any = routerArrays.slice(-1);
+  let newRoute = useMultiTagsStoreHook().handleTags("slice");
   if (current === route.path) {
     // 删除缓存路由
     tag
@@ -294,8 +284,8 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   } else {
     // 删除缓存路由
     tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]);
-    if (!routerArrays.length) return;
-    let isHasActiveTag = routerArrays.some(item => {
+    if (!multiTags.value.length) return;
+    let isHasActiveTag = multiTags.value.some(item => {
       return item.path === route.path;
     });
     !isHasActiveTag &&
@@ -365,11 +355,12 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       break;
     case 5:
       // 关闭全部标签页
-      routerArrays.splice(1, routerArrays.length);
-      relativeStorage.routesInStorage = routerArrays;
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex: 1,
+        length: multiTags.value.length
+      });
       usePermissionStoreHook().clearAllCachePage();
       router.push("/welcome");
-
       break;
   }
   setTimeout(() => {
@@ -400,8 +391,8 @@ function disabledMenus(value: boolean) {
 
 // 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
 function showMenuModel(currentPath: string, refresh = false) {
-  let allRoute = unref(relativeStorage.routesInStorage);
-  let routeLength = unref(relativeStorage.routesInStorage).length;
+  let allRoute = multiTags.value;
+  let routeLength = multiTags.value.length;
   // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
   let currentIndex = allRoute.findIndex(v => v.path === currentPath);
   // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
@@ -452,7 +443,7 @@ function openMenu(tag, e) {
     showMenuModel(tag.path);
   } else if (
     // eslint-disable-next-line no-dupe-else-if
-    relativeStorage.routesInStorage.length === 2 &&
+    multiTags.value.length === 2 &&
     route.path !== tag.path
   ) {
     showMenus(true);
@@ -531,8 +522,6 @@ watch(
 
 onBeforeMount(() => {
   if (!instance) return;
-  relativeStorage = instance.appContext.app.config.globalProperties.$storage;
-  routerArrays = relativeStorage.routesInStorage ?? routerArrays;
 
   // 根据当前路由初始化操作标签页的禁用状态
   showMenuModel(route.fullPath);
@@ -569,7 +558,7 @@ onBeforeMount(() => {
       >
         <div
           :ref="'dynamic' + index"
-          v-for="(item, index) in dynamicTagList"
+          v-for="(item, index) in multiTags"
           :key="index"
           :class="[
             'scroll-item is-closable',

src/layout/index.vue

@@ -17,6 +17,7 @@ import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { useMultiTagsStore } from "/@/store/modules/multiTags";
 
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -33,11 +34,11 @@ const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const layout = computed(() => {
   // 路由
   if (
-    !instance.$storage.routesInStorage ||
-    instance.$storage.routesInStorage.length === 0
+    useMultiTagsStore().multiTagsCache &&
+    (!instance.$storage.tags || instance.$storage.tags.length === 0)
   ) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    instance.$storage.routesInStorage = routerArrays;
+    instance.$storage.tags = routerArrays;
   }
   // 国际化
   if (!instance.$storage.locale) {
@@ -105,6 +106,9 @@ function toggle(device: string, bool: boolean) {
   useAppStoreHook().toggleSideBar(bool, "resize");
 }
 
+// 判断是否可自动关闭菜单栏
+let isAutoCloseSidebar = true;
+
 // 监听容器
 emitter.on("resize", ({ detail }) => {
   if (isMobile) return;
@@ -117,11 +121,16 @@ emitter.on("resize", ({ detail }) => {
    */
   if (width > 0 && width <= 760) {
     toggle("mobile", false);
+    isAutoCloseSidebar = true;
   } else if (width > 760 && width <= 990) {
-    toggle("desktop", false);
+    if (isAutoCloseSidebar) {
+      toggle("desktop", false);
+      isAutoCloseSidebar = false;
+    }
   } else if (width > 990) {
     if (!set.sidebar.isClickHamburger) {
       toggle("desktop", true);
+      isAutoCloseSidebar = true;
     }
   }
 });

src/layout/types.ts

@@ -24,8 +24,8 @@ export type RouteConfigs = {
   name?: string;
 };
 
-export type relativeStorageType = {
-  routesInStorage: Array<RouteConfigs>;
+export type multiTagsType = {
+  tags: Array<RouteConfigs>;
 };
 
 export type tagsViewsType = {

src/plugins/fontawesome/index.ts

@@ -6,12 +6,16 @@
 import { App } from "vue";
 import "font-awesome/css/font-awesome.css";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUserSecret,
+  faCoffee,
+  faSpinner
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 // github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
 import "remixicon/fonts/remixicon.css";
 
 export function useFontawesome(app: App) {
-  library.add(faUserSecret);
+  library.add(faUserSecret, faCoffee, faSpinner);
   app.component("font-awesome-icon", FontAwesomeIcon);
 }

src/router/index.ts

@@ -13,6 +13,7 @@ import NProgress from "/@/utils/progress";
 import { useTimeoutFn } from "@vueuse/core";
 import { storageSession, storageLocal } from "/@/utils/storage";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 
 // 静态路由
 import homeRouter from "./modules/home";
@@ -126,7 +127,7 @@ export const addAsyncRoutes = (arrRoutes: Array<RouteComponent>) => {
 // 创建路由实例
 export const router: Router = createRouter({
   history: createWebHashHistory(),
-  routes: filterTree(ascending(constantRoutes)).concat(...remainingRouter),
+  routes: ascending(constantRoutes).concat(...remainingRouter),
   scrollBehavior(to, from, savedPosition) {
     return new Promise(resolve => {
       if (savedPosition) {
@@ -222,11 +223,12 @@ router.beforeEach((to, _from, next) => {
       // 刷新
       if (usePermissionStoreHook().wholeRoutes.length === 0)
         initRouter(name.username).then((router: Router) => {
+          if (!useMultiTagsStoreHook().getMultiTagsCache) {
+            return router.push("/");
+          }
           router.push(to.path);
           // 刷新页面更新标签栏与页面路由匹配
-          const localRoutes = storageLocal.getItem(
-            "responsive-routesInStorage"
-          );
+          const localRoutes = storageLocal.getItem("responsive-tags");
           const optionsRoutes = router.options?.routes;
           const newLocalRoutes = [];
           optionsRoutes.forEach(ors => {
@@ -237,7 +239,7 @@ router.beforeEach((to, _from, next) => {
             });
           });
           storageLocal.setItem(
-            "responsive-routesInStorage",
+            "responsive-tags",
             uniqBy(newLocalRoutes, "path")
           );
         });

src/store/modules/multiTags.ts

@@ -0,0 +1,98 @@
+import { defineStore } from "pinia";
+import { store } from "/@/store";
+import { getConfig } from "/@/config";
+import { positionType } from "./types";
+import { storageLocal } from "/@/utils/storage";
+
+interface Itag {
+  path: string;
+  parentPath: string;
+  name: string;
+  meta: any;
+}
+
+export const useMultiTagsStore = defineStore({
+  id: "pure-multiTags",
+  state: () => ({
+    // 存储标签页信息（路由信息）
+    multiTags: getConfig().MultiTagsCache
+      ? storageLocal.getItem("responsive-tags")
+      : [
+          {
+            path: "/welcome",
+            parentPath: "/",
+            meta: {
+              title: "message.hshome",
+              icon: "el-icon-s-home",
+              i18n: true,
+              showLink: true
+            }
+          }
+        ],
+    multiTagsCache: getConfig().MultiTagsCache
+  }),
+  getters: {
+    getMultiTagsCache() {
+      return this.multiTagsCache;
+    }
+  },
+  actions: {
+    tagsCache(multiTags) {
+      this.getMultiTagsCache &&
+        storageLocal.setItem("responsive-tags", multiTags);
+    },
+    handleTags<T>(
+      mode: string,
+      value?: T | Itag,
+      position?: positionType
+    ): any {
+      switch (mode) {
+        case "equal":
+          this.multiTags = value;
+          break;
+        case "push":
+          {
+            const tagVal = value as Itag;
+            // 判断tag是否已存在:
+            const tagHasExits = this.multiTags.some(tag => {
+              return tag.path === tagVal?.path;
+            });
+
+            if (tagHasExits) return;
+            const meta = tagVal?.meta;
+            const dynamicLevel = meta?.dynamicLevel ?? -1;
+            if (dynamicLevel > 0) {
+              // dynamicLevel动态路由可打开的数量
+              const realPath = meta?.realPath ?? "";
+              // 获取到已经打开的动态路由数, 判断是否大于dynamicLevel
+              if (
+                this.multiTags.filter(e => e.meta?.realPath ?? "" === realPath)
+                  .length >= dynamicLevel
+              ) {
+                // 关闭第一个
+                const index = this.multiTags.findIndex(
+                  item => item.meta?.realPath === realPath
+                );
+                index !== -1 && this.multiTags.splice(index, 1);
+              }
+            }
+            this.multiTags.push(value);
+            this.tagsCache(this.multiTags);
+          }
+          break;
+        case "splice":
+          this.multiTags.splice(position?.startIndex, position?.length);
+          this.tagsCache(this.multiTags);
+          return this.multiTags;
+          break;
+        case "slice":
+          return this.multiTags.slice(-1);
+          break;
+      }
+    }
+  }
+});
+
+export function useMultiTagsStoreHook() {
+  return useMultiTagsStore(store);
+}

src/store/modules/types.ts

@@ -4,3 +4,8 @@ export type cacheType = {
   mode: string;
   name?: RouteRecordName;
 };
+
+export type positionType = {
+  startIndex?: number;
+  length?: number;
+};

src/style/sidebar.scss

@@ -444,12 +444,6 @@
       }
     }
 
-    & > .el-menu {
-      i {
-        margin-right: 16px;
-      }
-    }
-
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;

src/utils/progress/index.ts

@@ -7,7 +7,7 @@ NProgress.configure({
   // 递增进度条的速度
   speed: 500,
   // 是否显示加载ico
-  showSpinner: true,
+  showSpinner: false,
   // 自动递增间隔
   trickleSpeed: 200,
   // 初始化时的最小百分比

src/utils/storage/responsive.ts

@@ -3,45 +3,53 @@ import { App } from "vue";
 import Storage from "responsive-storage";
 
 export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
-  app.use(Storage, {
-    // 默认显示首页tag
-    routesInStorage: {
-      type: Array,
-      default: Storage.getData(undefined, "routesInStorage") ?? [
-        {
-          path: "/welcome",
-          parentPath: "/",
-          meta: {
-            title: "message.hshome",
-            i18n: true,
-            icon: "HomeFilled",
-            showLink: true
+  const configObj = Object.assign(
+    {
+      // 国际化 默认中文zh
+      locale: {
+        type: Object,
+        default: Storage.getData(undefined, "locale") ?? {
+          locale: config.Locale ?? "zh"
+        }
+      },
+      // layout模式以及主题
+      layout: {
+        type: Object,
+        default: Storage.getData(undefined, "layout") ?? {
+          layout: config.Layout ?? "vertical",
+          theme: config.Theme ?? "default"
+        }
+      },
+      sets: {
+        type: Object,
+        default: Storage.getData(undefined, "sets") ?? {
+          grey: config.Grey ?? false,
+          weak: config.Weak ?? false,
+          hideTabs: config.HideTabs ?? false
+        }
+      }
+    },
+    config.MultiTagsCache
+      ? {
+          // 默认显示首页tag
+          tags: {
+            type: Array,
+            default: Storage.getData(undefined, "tags") ?? [
+              {
+                path: "/welcome",
+                parentPath: "/",
+                meta: {
+                  title: "message.hshome",
+                  i18n: true,
+                  icon: "HomeFilled",
+                  showLink: true
+                }
+              }
+            ]
           }
         }
-      ]
-    },
-    // 国际化 默认中文zh
-    locale: {
-      type: Object,
-      default: Storage.getData(undefined, "locale") ?? {
-        locale: config.Locale ?? "zh"
-      }
-    },
-    // layout模式以及主题
-    layout: {
-      type: Object,
-      default: Storage.getData(undefined, "layout") ?? {
-        layout: config.Layout ?? "vertical",
-        theme: config.Theme ?? "default"
-      }
-    },
-    sets: {
-      type: Object,
-      default: Storage.getData(undefined, "sets") ?? {
-        grey: config.Grey ?? false,
-        weak: config.Weak ?? false,
-        hideTabs: config.HideTabs ?? false
-      }
-    }
-  });
+      : {}
+  );
+
+  app.use(Storage, configObj);
 };

types/global.d.ts

@@ -87,6 +87,7 @@ declare global {
     Title?: string;
     FixedHeader?: boolean;
     HiddenSideBar?: boolean;
+    MultiTagsCache?: boolean;
     KeepAlive?: boolean;
     Locale?: string;
     Layout?: string;