diff --git a/.env b/.env index 0910581f..c5092e0a 100644 --- a/.env +++ b/.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 diff --git a/src/layouts/modules/global-menu/modules/vertical-menu.vue b/src/layouts/modules/global-menu/modules/vertical-menu.vue index 8270fca2..fe98fe5f 100644 --- a/src/layouts/modules/global-menu/modules/vertical-menu.vue +++ b/src/layouts/modules/global-menu/modules/vertical-menu.vue @@ -24,6 +24,10 @@ const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverte const expandedKeys = ref([]); +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" diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index 496d7fb9..e297bf4f 100644 --- a/src/locales/langs/en-us.ts +++ b/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: { diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index 25eb6ee2..79fd45c9 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -162,7 +162,8 @@ const local: App.I18n.Schema = { 404: '页面不存在', 500: '服务器错误', 'iframe-page': '外链页面', - home: '首页' + home: '首页', + pan: '我的文件' }, page: { login: { diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts index ce1b9d7d..03822757 100644 --- a/src/router/elegant/imports.ts +++ b/src/router/elegant/imports.ts @@ -21,4 +21,5 @@ export const views: Record Promise 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"), }; diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts index 9566e125..2d1a7b3d 100644 --- a/src/router/elegant/routes.ts +++ b/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' + } } ]; diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts index ba892572..71136590 100644 --- a/src/router/elegant/transform.ts +++ b/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" }; /** diff --git a/src/router/guard/route.ts b/src/router/guard/route.ts index 64250c85..fc3cfa46 100644 --- a/src/router/guard/route.ts +++ b/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) { diff --git a/src/store/modules/route/index.ts b/src/store/modules/route/index.ts index beb7443e..c79c0f9c 100644 --- a/src/store/modules/route/index.ts +++ b/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('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 }; }); diff --git a/src/store/modules/route/shared.ts b/src/store/modules/route/shared.ts index 0686d27e..8f2786f4 100644 --- a/src/store/modules/route/shared.ts +++ b/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; } diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts index 71b279cf..cc89b665 100644 --- a/src/typings/app.d.ts +++ b/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[]; }; diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts index 63025132..acd9e2d5 100644 --- a/src/typings/elegant-router.d.ts +++ b/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" >; /** diff --git a/src/typings/router.d.ts b/src/typings/router.d.ts index 256e646a..a1142da9 100644 --- a/src/typings/router.d.ts +++ b/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; } diff --git a/src/typings/union-key.d.ts b/src/typings/union-key.d.ts index a783294b..99c3111a 100644 --- a/src/typings/union-key.d.ts +++ b/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' diff --git a/src/views/pan/index.vue b/src/views/pan/index.vue new file mode 100644 index 00000000..68fba895 --- /dev/null +++ b/src/views/pan/index.vue @@ -0,0 +1,7 @@ + + + + +