fix(types): 修正了route的meta类型，新增pageType类型，方便过滤菜单和标签

.env

@@ -17,7 +17,7 @@ VITE_ICON_LOCAL_PREFIX=icon-local
 VITE_AUTH_ROUTE_MODE=static
 
 # static auth route home
-VITE_ROUTE_HOME=home
+VITE_ROUTE_HOME=pan
 
 # default menu icon
 VITE_MENU_ICON=mdi:menu

src/layouts/modules/global-menu/modules/vertical-menu.vue

@@ -24,6 +24,10 @@ const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverte
 
 const expandedKeys = ref<string[]>([]);
 
+const menuOptions = computed(() => {
+  return routeStore.menus.filter(menu => menu.pageType === routeStore.currentPageType);
+});
+
 function updateExpandedKeys() {
   if (appStore.siderCollapse || !selectedKey.value) {
     expandedKeys.value = [];
@@ -51,7 +55,7 @@ watch(
         :collapsed="appStore.siderCollapse"
         :collapsed-width="themeStore.sider.collapsedWidth"
         :collapsed-icon-size="22"
-        :options="routeStore.menus"
+        :options="menuOptions"
         :inverted="inverted"
         :indent="18"
         @update:value="routerPushByKeyWithMetaQuery"

src/locales/langs/en-us.ts

@@ -162,7 +162,8 @@ const local: App.I18n.Schema = {
     404: 'Page Not Found',
     500: 'Server Error',
     'iframe-page': 'Iframe',
-    home: 'Home'
+    home: 'Home',
+    pan: 'My Files'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -162,7 +162,8 @@ const local: App.I18n.Schema = {
     404: '页面不存在',
     500: '服务器错误',
     'iframe-page': '外链页面',
-    home: '首页'
+    home: '首页',
+    pan: '我的文件'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -21,4 +21,5 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
   home: () => import("@/views/home/index.vue"),
+  pan: () => import("@/views/pan/index.vue"),
 };

src/router/elegant/routes.ts

@@ -47,7 +47,8 @@ export const generatedRoutes: GeneratedRoute[] = [
       title: 'home',
       i18nKey: 'route.home',
       icon: 'mdi:monitor-dashboard',
-      order: 1
+      order: 1,
+      pageType: 'admin'
     }
   },
   {
@@ -74,5 +75,15 @@ export const generatedRoutes: GeneratedRoute[] = [
       constant: true,
       hideInMenu: true
     }
+  },
+  {
+    name: 'pan',
+    path: '/pan',
+    component: 'layout.base$view.pan',
+    meta: {
+      title: 'pan',
+      i18nKey: 'route.pan',
+      pageType: 'pan'
+    }
   }
 ];

src/router/elegant/transform.ts

@@ -168,7 +168,8 @@ const routeMap: RouteMap = {
   "500": "/500",
   "home": "/home",
   "iframe-page": "/iframe-page/:url",
-  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?"
+  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
+  "pan": "/pan"
 };
 
 /**

src/router/guard/route.ts

@@ -18,6 +18,9 @@ import { localStg } from '@/utils/storage';
  */
 export function createRouteGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
+    const routeStore = useRouteStore();
+    // 每次路由变化时更新页面类型
+    routeStore.setPageType(to);
     const location = await initRoute(to);
 
     if (location) {

src/store/modules/route/index.ts

@@ -1,5 +1,5 @@
 import { computed, nextTick, ref, shallowRef } from 'vue';
-import type { RouteRecordRaw } from 'vue-router';
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useBoolean } from '@sa/hooks';
 import type { CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
@@ -41,6 +41,21 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   /** Home route key */
   const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
 
+  /** 当前页面的类型 */
+  const currentPageType = ref<UnionKey.SystemPageType>('pan');
+
+  /** 设置当前页面类型方法 */
+  const setPageType = (route: RouteLocationNormalized) => {
+    const matched = route.matched;
+    for (let i = matched.length - 1; i >= 0; i -= 1) {
+      const type = matched[i].meta?.pageType;
+      if (type) {
+        currentPageType.value = type;
+        return;
+      }
+    }
+    currentPageType.value = 'pan';
+  };
   /**
    * Set route home
    *
@@ -343,6 +358,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     getIsAuthRouteExist,
     getSelectedMenuKeyPath,
     onRouteSwitchWhenLoggedIn,
-    onRouteSwitchWhenNotLoggedIn
+    onRouteSwitchWhenNotLoggedIn,
+    currentPageType,
+    setPageType
   };
 });

src/store/modules/route/shared.ts

@@ -127,19 +127,33 @@ export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
 function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | ElegantConstRoute) {
   const { SvgIconVNode } = useSvgIcon();
 
-  const { name, path } = route;
+  const { name, path, meta } = route;
   const { title, i18nKey, icon = import.meta.env.VITE_MENU_ICON, localIcon, iconFontSize } = route.meta ?? {};
 
   const label = i18nKey ? $t(i18nKey) : title!;
 
-  const menu: App.Global.Menu = {
-    key: name as string,
-    label,
-    i18nKey,
-    routeKey: name as RouteKey,
-    routePath: path as RouteMap[RouteKey],
-    icon: SvgIconVNode({ icon, localIcon, fontSize: iconFontSize || 20 })
-  };
+  let menu: App.Global.Menu;
+
+  if (meta?.pageType) {
+    menu = {
+      key: name as string,
+      label,
+      i18nKey,
+      routeKey: name as RouteKey,
+      routePath: path as RouteMap[RouteKey],
+      icon: SvgIconVNode({ icon, localIcon, fontSize: iconFontSize || 20 }),
+      pageType: meta?.pageType
+    };
+  } else {
+    menu = {
+      key: name as string,
+      label,
+      i18nKey,
+      routeKey: name as RouteKey,
+      routePath: path as RouteMap[RouteKey],
+      icon: SvgIconVNode({ icon, localIcon, fontSize: iconFontSize || 20 })
+    };
+  }
 
   return menu;
 }

src/typings/app.d.ts

@@ -204,6 +204,7 @@ declare namespace App {
       /** The menu icon */
       icon?: () => VNode;
       /** The menu children */
+      pageType?: UnionKey.SystemPageType;
       children?: Menu[];
     };
 

src/typings/elegant-router.d.ts

@@ -23,6 +23,7 @@ declare module "@elegant-router/types" {
     "home": "/home";
     "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
+    "pan": "/pan";
   };
 
   /**
@@ -60,6 +61,7 @@ declare module "@elegant-router/types" {
     | "home"
     | "iframe-page"
     | "login"
+    | "pan"
   >;
 
   /**
@@ -82,6 +84,7 @@ declare module "@elegant-router/types" {
     | "iframe-page"
     | "login"
     | "home"
+    | "pan"
   >;
 
   /**

src/typings/router.d.ts

@@ -66,6 +66,8 @@ declare module 'vue-router' {
     multiTab?: boolean | null;
     /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
     fixedIndexInTab?: number | null;
+    /** 页面类型 */
+    pageType?: UnionKey.SystemPageType;
     /** if set query parameters, it will be automatically carried when entering the route */
     query?: { key: string; value: string }[] | null;
   }

src/typings/union-key.d.ts

@@ -51,6 +51,8 @@ declare namespace UnionKey {
    */
   type ThemeTabMode = import('@sa/materials').PageTabMode;
 
+  type SystemPageType = 'pan' | 'admin' | null;
+
   /** Unocss animate key */
   type UnoCssAnimateKey =
     | 'pulse'

src/views/pan/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>网盘页面</div>
+</template>
+
+<style scoped></style>