diff --git a/src/api/login.ts b/src/api/login.ts index c905886..cc65235 100644 --- a/src/api/login.ts +++ b/src/api/login.ts @@ -45,6 +45,6 @@ export function fetchRefreshToken(data: any) { }) } -export function fetchUserRoutes(params: { id: number }) { - return request.Get>('/getUserRoutes', { params }) +export function fetchUserMenus() { + return request.Get>('/userMenu') } diff --git a/src/router/routes.static.ts b/src/router/routes.static.ts index 4560859..b2d595e 100644 --- a/src/router/routes.static.ts +++ b/src/router/routes.static.ts @@ -1,6 +1,5 @@ -export const staticRoutes: AppRoute.RowRoute[] = [ +export const staticRoutes: Entity.Menu[] = [ { - name: 'home', path: '/home', title: '概览', icon: 'icon-park-outline:analysis', @@ -11,21 +10,16 @@ export const staticRoutes: AppRoute.RowRoute[] = [ parentId: 0, }, { - name: 'multi', path: '/multi', title: '多级菜单演示', - requiresAuth: true, icon: 'icon-park-outline:list', - menuType: 'dir', - component: null, + menuType: 'directory', id: 2, - parentId: null, + parentId: 0, }, { - name: 'multi2', path: '/multi/multi-2', title: '多级菜单子页', - requiresAuth: true, icon: 'icon-park-outline:list', menuType: 'page', component: '/demo/multi/multi-2/index.vue', @@ -33,106 +27,83 @@ export const staticRoutes: AppRoute.RowRoute[] = [ parentId: 2, }, { - name: 'multi2-detail', path: '/multi/multi-2/detail', title: '菜单详情页', - requiresAuth: false, icon: 'icon-park-outline:list', - hide: true, - activeMenu: '/multi/multi-2', + menuVisible: true, + activePath: '/multi/multi-2', menuType: 'page', component: '/demo/multi/multi-2/detail/index.vue', id: 20101, parentId: 2, }, { - name: 'multi3', path: '/multi/multi-3', title: '多级菜单', - requiresAuth: true, icon: 'icon-park-outline:list', - menuType: 'dir', - component: null, + menuType: 'directory', id: 202, parentId: 2, }, { - name: 'multi4', path: '/multi/multi-3/multi-4', title: '多级菜单3-1', - requiresAuth: true, icon: 'icon-park-outline:list', component: '/demo/multi/multi-3/multi-4/index.vue', id: 20201, parentId: 202, }, { - name: 'list', path: '/list', title: '列表页', - requiresAuth: true, icon: 'icon-park-outline:list-two', - menuType: 'dir', - component: null, + menuType: 'directory', id: 3, - parentId: null, + parentId: 0, }, { - name: 'cardList', path: '/list/card-list', title: '卡片列表', - requiresAuth: true, icon: 'icon-park-outline:view-grid-list', component: '/demo/list/card-list/index.vue', id: 302, parentId: 3, }, { - name: 'draggableList', path: '/list/draggable-list', title: '拖拽列表', - requiresAuth: true, icon: 'icon-park-outline:menu-fold', component: '/demo/list/draggable-list/index.vue', id: 303, parentId: 3, }, { - name: 'demo', path: '/demo', title: '功能示例', - requiresAuth: true, icon: 'icon-park-outline:application-one', - menuType: 'dir', - component: null, + menuType: 'directory', id: 4, - parentId: null, + parentId: 0, }, { - name: 'fetch', path: '/demo/fetch', title: '请求示例', - requiresAuth: true, icon: 'icon-park-outline:international', component: '/demo/fetch/index.vue', id: 401, parentId: 4, }, { - name: 'echarts', path: '/demo/echarts', title: 'ECharts', - requiresAuth: true, icon: 'icon-park-outline:chart-proportion', component: '/demo/echarts/index.vue', id: 402, parentId: 4, }, { - name: 'map', path: '/demo/map', title: '地图', - requiresAuth: true, icon: 'carbon:map', keepAlive: true, component: '/demo/map/index.vue', @@ -140,266 +111,206 @@ export const staticRoutes: AppRoute.RowRoute[] = [ parentId: 4, }, { - name: 'editor', path: '/demo/editor', title: '编辑器', - requiresAuth: true, icon: 'icon-park-outline:editor', - menuType: 'dir', - component: null, + menuType: 'directory', id: 404, parentId: 4, }, { - name: 'editorMd', path: '/demo/editor/md', title: 'MarkDown', - requiresAuth: true, icon: 'ri:markdown-line', component: '/demo/editor/md/index.vue', id: 40401, parentId: 404, }, { - name: 'editorRich', path: '/demo/editor/rich', title: '富文本', - requiresAuth: true, icon: 'icon-park-outline:edit-one', component: '/demo/editor/rich/index.vue', id: 40402, parentId: 404, }, { - name: 'clipboard', path: '/demo/clipboard', title: '剪贴板', - requiresAuth: true, icon: 'icon-park-outline:clipboard', component: '/demo/clipboard/index.vue', id: 405, parentId: 4, }, { - name: 'icons', path: '/demo/icons', title: '图标', - requiresAuth: true, icon: 'local:cool', component: '/demo/icons/index.vue', id: 406, parentId: 4, }, { - name: 'QRCode', path: '/demo/qr-code', title: '二维码', - requiresAuth: true, icon: 'icon-park-outline:two-dimensional-code', component: '/demo/qr-code/index.vue', id: 407, parentId: 4, }, { - name: 'cascader', path: '/demo/cascader', title: '省市区联动', - requiresAuth: true, icon: 'icon-park-outline:add-subset', component: '/demo/cascader/index.vue', id: 408, parentId: 4, }, { - name: 'dict', path: '/demo/dict', title: '字典示例', - requiresAuth: true, icon: 'icon-park-outline:book-one', component: '/demo/dict/index.vue', id: 409, parentId: 4, }, { - name: 'documents', path: '/documents', title: '外链文档', - requiresAuth: true, icon: 'icon-park-outline:file-doc', - menuType: 'dir', - component: null, + menuType: 'directory', id: 5, - parentId: null, + parentId: 0, }, { - name: 'documentsVue', path: '/documents/vue', title: 'Vue', - requiresAuth: true, icon: 'logos:vue', component: '/demo/documents/vue/index.vue', id: 501, parentId: 5, }, { - name: 'documentsVite', path: '/documents/vite', title: 'Vite', - requiresAuth: true, icon: 'logos:vitejs', component: '/demo/documents/vite/index.vue', id: 502, parentId: 5, }, { - name: 'documentsVueuse', - path: '/documents/vue-use', + path: 'https://vueuse.org/guide/', title: 'VueUse(外链)', - requiresAuth: true, icon: 'logos:vueuse', - href: 'https://vueuse.org/guide/', - component: 'null', + isLink: true, id: 503, parentId: 5, }, { - name: 'documentsNova', - path: '/documents/nova', + path: 'https://nova-admin-docs.netlify.app/', title: 'Nova docs', - requiresAuth: true, icon: 'local:logo', - href: 'https://nova-admin-docs.netlify.app/', - component: '2333333', + isLink: true, id: 504, parentId: 5, }, { - name: 'documentsPublic', - path: '/documents/public', + path: '/public', title: '公共示例页(外链)', - requiresAuth: true, icon: 'local:logo', - href: '/public', - component: 'null', + isLink: true, id: 505, parentId: 5, }, { - name: 'permission', path: '/permission', title: '权限', - requiresAuth: true, icon: 'icon-park-outline:people-safe', - menuType: 'dir', - component: null, + menuType: 'directory', id: 6, - parentId: null, + parentId: 0, }, { - name: 'permissionDemo', path: '/permission/permission', title: '权限示例', - requiresAuth: true, icon: 'icon-park-outline:right-user', component: '/demo/permission/permission/index.vue', id: 601, parentId: 6, }, { - name: 'justSuper', path: '/permission/just-super', title: 'super可见', - requiresAuth: true, - roles: [ - 'super', - ], icon: 'icon-park-outline:wrong-user', component: '/demo/permission/just-super/index.vue', id: 602, parentId: 6, }, { - name: 'setting', path: '/system', title: '系统设置', - requiresAuth: true, icon: 'icon-park-outline:setting', - menuType: 'dir', - component: null, + menuType: 'directory', id: 7, - parentId: null, + parentId: 0, }, { - name: 'accountSetting', path: '/system/user', title: '用户设置', - requiresAuth: true, icon: 'icon-park-outline:every-user', component: '/system/user/index.vue', id: 701, parentId: 7, }, { - name: 'roleSetting', path: '/system/role', title: '角色设置', - requiresAuth: true, icon: 'icon-park-outline:every-user', component: '/system/role/index.vue', id: 702, parentId: 7, }, { - name: 'dictionarySetting', path: '/system/dict', title: '字典设置', - requiresAuth: true, icon: 'icon-park-outline:book-one', component: '/system/dict/index.vue', id: 703, parentId: 7, }, { - name: 'menuSetting', path: '/system/menu', title: '菜单设置', - requiresAuth: true, icon: 'icon-park-outline:application-menu', component: '/system/menu/index.vue', id: 704, parentId: 7, }, { - name: 'deptSetting', path: '/system/dept', title: '部门管理', - requiresAuth: true, icon: 'icon-park-outline:application-menu', component: '/system/dept/index.vue', id: 705, parentId: 7, }, { - name: 'about', path: '/about', title: '关于', - requiresAuth: true, icon: 'icon-park-outline:info', component: '/demo/about/index.vue', id: 8, - parentId: null, + parentId: 0, }, { - name: 'userCenter', path: '/user-center', title: '个人中心', - requiresAuth: true, - hide: true, + menuVisible: true, icon: 'carbon:user-avatar-filled-alt', component: '/build-in/user-center/index.vue', id: 999, - parentId: null, + parentId: 0, }, ] diff --git a/src/store/router/index.ts b/src/store/router/index.ts index 7ba8702..31653db 100644 --- a/src/store/router/index.ts +++ b/src/store/router/index.ts @@ -1,14 +1,14 @@ import type { MenuOption } from 'naive-ui' import { router } from '@/router' import { staticRoutes } from '@/router/routes.static' -import { fetchUserRoutes } from '@/api' +import { fetchUserMenus } from '@/api' import { $t } from '@/utils' import { createMenus, createRoutes, generateCacheRoutes } from './helper' interface RoutesStatus { isInitAuthRoute: boolean menus: MenuOption[] - rowRoutes: AppRoute.RowRoute[] + rowRoutes: Entity.Menu[] activeMenu: string | null cacheRoutes: string[] } @@ -40,9 +40,7 @@ export const useRouteStore = defineStore('route-store', { if (import.meta.env.VITE_ROUTE_LOAD_MODE === 'dynamic') { try { // Get user's route - const { data } = await fetchUserRoutes({ - id: 1, - }) + const { data } = await fetchUserMenus() if (!data) { throw new Error('Failed to fetch user routes') } diff --git a/src/typings/entities/menu.d.ts b/src/typings/entities/menu.d.ts index 5851029..4c6eb44 100644 --- a/src/typings/entities/menu.d.ts +++ b/src/typings/entities/menu.d.ts @@ -9,19 +9,19 @@ namespace Entity { /** * 组件路径 */ - component: string + component?: string /** * 菜单图标 */ - icon: string + icon?: string /** * 是否缓存 */ - keepAlive: boolean + keepAlive?: boolean /** * 是否为外链 */ - isLink: boolean + isLink?: boolean /** * 菜单名称 */ @@ -29,11 +29,11 @@ namespace Entity { /** * 国际化标识Key */ - i18nKey: string + i18nKey?: string /** * 菜单类型 */ - menuType: MenuType + menuType?: MenuType /** * 父菜单ID */ @@ -45,31 +45,35 @@ namespace Entity { /** * 高亮菜单路径 */ - activePath: string + activePath?: string /** * 权限标识 */ - perms: string + perms?: string /** * 备注信息 */ - remark: string + remark?: string /** * 显示顺序 */ - sort: number + sort?: number /** * 菜单状态 */ - status: number + status?: number /** * 菜单显示状态 */ - menuVisible: boolean + menuVisible?: boolean /** * 标签栏显示状态 */ - tabVisible: boolean + tabVisible?: boolean + /** + * 标签栏固定 + */ + pinTab?: boolean /** * 子菜单 */ diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts index 1666c02..6dc760e 100644 --- a/src/typings/route.d.ts +++ b/src/typings/route.d.ts @@ -1,6 +1,6 @@ declare namespace AppRoute { - type MenuType = 'dir' | 'page' + type MenuType = 'directory' | 'page' | 'permission' /** 单个路由所携带的meta标识 */ interface RouteMeta { /* 页面标题,通常必选。 */ @@ -13,6 +13,22 @@ declare namespace AppRoute { roles?: Entity.RoleType[] /* 是否开启页面缓存 */ keepAlive?: boolean + /* 菜单显示状态 - 适配新菜单实体 */ + menuVisible?: boolean + /* 菜单排序 - 适配新菜单实体 */ + sort?: number + /* 是否为外链 - 适配新菜单实体 */ + isLink?: boolean + /* 高亮菜单路径 - 适配新菜单实体 */ + activePath?: string + /* 标签栏显示状态 - 适配新菜单实体 */ + tabVisible?: boolean + /** 当前路由是否会被固定在Tab中,用于一些常驻页面 */ + pinTab?: boolean + /** 当前路由在左侧菜单是目录还是页面,不设置默认为page */ + menuType?: MenuType + + /* 以下字段保持向后兼容 */ /* 有些路由我们并不想在菜单中显示,比如某些编辑页面。 */ hide?: boolean /* 菜单排序。 */ @@ -23,10 +39,6 @@ declare namespace AppRoute { activeMenu?: string /** 当前路由是否会被添加到Tab中 */ withoutTab?: boolean - /** 当前路由是否会被固定在Tab中,用于一些常驻页面 */ - pinTab?: boolean - /** 当前路由在左侧菜单是目录还是页面,不设置默认为page */ - menuType?: MenuType } type MetaKeys = keyof RouteMeta