diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue index a2c43ec..69f8999 100644 --- a/src/layout/components/Menu/index.vue +++ b/src/layout/components/Menu/index.vue @@ -74,6 +74,9 @@ export default defineComponent({ watch( () => currentRoute.fullPath, () => { + const matched = currentRoute.matched + const getOpenKeys = matched && matched.length ? [matched[0]?.name] : [] + state.openKeys = getOpenKeys state.selectedKeys = currentRoute.name } ) @@ -89,6 +92,7 @@ export default defineComponent({ //展开菜单 function menuExpanded(openKeys: string[]) { + console.log(openKeys) if (!openKeys) return const latestOpenKey = openKeys.pop(); state.openKeys = latestOpenKey ? [latestOpenKey] : [] diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 909cd52..55f0e98 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -192,10 +192,10 @@ export default defineComponent({ const delKeepAliveCompName = () => { if (route.meta.keepAlive) { const name = router.currentRoute.value.matched.find((item) => item.name == route.name) - ?.components?.default.name + ?.components?.default.name if (name) { asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter( - (item) => item != name + (item) => item != name ) } } @@ -203,16 +203,16 @@ export default defineComponent({ // 标签页列表 const tabsList: any = computed(() => tabsViewStore.tabsList) - const whiteList = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN] + const whiteList: string[] = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN] watch( - () => route.fullPath, - (to) => { - if (whiteList.includes(route.name as string) || ['ErrorPage'].includes(route.name as string)) return - state.activeKey = to - tabsViewStore.addTabs(getSimpleRoute(route)) - }, - { immediate: true } + () => route.fullPath, + (to) => { + if (whiteList.includes(route.name as string) || ['ErrorPage'].includes(route.name as string)) return + state.activeKey = to + tabsViewStore.addTabs(getSimpleRoute(route)) + }, + { immediate: true } ) // 在页面关闭或刷新之前,保存数据 @@ -233,6 +233,7 @@ export default defineComponent({ state.activeKey = currentRoute.fullPath router.push(currentRoute) } + onElementResize() } // 刷新页面 @@ -251,6 +252,7 @@ export default defineComponent({ tabsViewStore.closeLeftTabs(route) state.activeKey = route.fullPath router.replace(route.fullPath) + onElementResize() } // 关闭右侧 @@ -258,6 +260,7 @@ export default defineComponent({ tabsViewStore.closeRightTabs(route) state.activeKey = route.fullPath router.replace(route.fullPath) + onElementResize() } // 关闭其他 @@ -265,6 +268,7 @@ export default defineComponent({ tabsViewStore.closeOtherTabs(route) state.activeKey = route.fullPath router.replace(route.fullPath) + onElementResize() } // 关闭全部 @@ -272,28 +276,30 @@ export default defineComponent({ localStorage.removeItem('routes') tabsViewStore.closeAllTabs() router.replace('/') + onElementResize() } //tab 操作 const closeHandleSelect = (key) => { switch (key) { - //刷新 + //刷新 case '1': reloadPage() break - //关闭 + //关闭 case '2': removeTab(route) break - //关闭其他 + //关闭其他 case '3': closeOther(route) break - //关闭所有 + //关闭所有 case '4': closeAll() break } + onElementResize() } function getCurrentScrollOffset() { @@ -321,9 +327,9 @@ export default defineComponent({ if (navWidth - currentOffset <= containerWidth) return let newOffset = - navWidth - currentOffset > containerWidth * 2 - ? currentOffset + containerWidth - : navWidth - containerWidth + navWidth - currentOffset > containerWidth * 2 + ? currentOffset + containerWidth + : navWidth - containerWidth setOffset(newOffset) } @@ -383,10 +389,14 @@ export default defineComponent({ } onMounted(() => { + onElementResize() + }) + + function onElementResize() { let observer observer = elementResizeDetectorMaker() observer.listenTo(navWrap.value, handleResize) - }) + } return { ...toRefs(state), @@ -519,7 +529,8 @@ export default defineComponent({ } } } - .active-item{ + + .active-item { color: #2d8cf0 } } diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index 71693c8..39c24cb 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -59,7 +59,8 @@ import { NTable, NInputNumber, NLoadingBarProvider, - NModal + NModal, + NUpload } from 'naive-ui' const naive = create({ @@ -122,7 +123,8 @@ const naive = create({ NTable, NInputNumber, NLoadingBarProvider, - NModal + NModal, + NUpload ] }) diff --git a/src/router/router-guards.ts b/src/router/router-guards.ts index 62caea8..d597c32 100644 --- a/src/router/router-guards.ts +++ b/src/router/router-guards.ts @@ -1,11 +1,9 @@ -import { toRefs } from 'vue' import { isNavigationFailure, Router } from 'vue-router' import { useUserStoreWidthOut } from '@/store/modules/user' import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute' import NProgress from 'nprogress' // progress bar import { ACCESS_TOKEN } from '@/store/mutation-types' import { storage } from '@/utils/Storage' -import { debounce } from '@/utils/lodashChunk' import { PageEnum } from '@/enums/pageEnum' @@ -15,39 +13,6 @@ const LOGIN_PATH = PageEnum.BASE_LOGIN const whitePathList = [LOGIN_PATH] // no redirect whitelist -// 是否需要从后端获取菜单 -const isGetMenus = debounce( - ({ to, from, next, hasRoute, router }) => { - const userStore = useUserStoreWidthOut(); - const asyncRouteStore = useAsyncRouteStoreWidthOut(); - userStore.GetInfo().then(res => { - asyncRouteStore.generateRoutes(res).then(() => { - // 根据roles权限生成可访问的路由表 - // 动态添加可访问路由表 - asyncRouteStore.getRouters().forEach((item) => { - router.addRoute(item) - }); - // if (whitePathList.includes(to.name as string)) return - if (!hasRoute) { - // 请求带有 redirect 重定向时,登录自动重定向到该地址 - const redirect = decodeURIComponent((from.query.redirect || '') as string) - if (to.path === redirect) { - next({ ...to, replace: true }) - } else { - // 跳转到目的路由 - next({ ...to, replace: true }) - } - } else { - next() - } - }).catch(() => next({ path: defaultRoutePath })) - }) - }, - 1800, - { leading: true } -) - - export function createRouterGuards(router: Router) { const userStore = useUserStoreWidthOut(); const asyncRouteStore = useAsyncRouteStoreWidthOut(); @@ -65,7 +30,6 @@ export function createRouterGuards(router: Router) { } const token = storage.get(ACCESS_TOKEN) - const roles = storage.get('roles') if (!token) { @@ -111,7 +75,7 @@ export function createRouterGuards(router: Router) { NProgress.done() }) - router.afterEach((to, from, failure) => { + router.afterEach((to, _, failure) => { document.title = (to?.meta?.title as string) || document.title if (isNavigationFailure(failure)) { //console.log('failed navigation', failure) diff --git a/src/utils/index.ts b/src/utils/index.ts index 0d912cd..326db12 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -12,7 +12,7 @@ export function renderIcon(icon) { /** * 递归组装菜单格式 */ -export function generatorMenu(routerMap: Array, parent?: object) { +export function generatorMenu(routerMap: Array) { return routerMap.filter(item => { return item.meta.hidden != true && !['/:path(.*)*', '/', '/redirect', '/login'].includes(item.path) }).map(item => { @@ -25,7 +25,7 @@ export function generatorMenu(routerMap: Array, parent?: object) { // 是否有子菜单,并递归处理 if (item.children && item.children.length > 0) { // Recursion - currentMenu.children = generatorMenu(item.children, currentMenu) + currentMenu.children = generatorMenu(item.children) } return currentMenu })