From 02d6a3940277a5939d25d16fda58e09346821e0e Mon Sep 17 00:00:00 2001 From: nebv Date: Tue, 13 Oct 2020 22:22:04 +0800 Subject: [PATCH] fix: fix missing cache of refresh page --- src/hooks/web/useTabs.ts | 21 ++++++++++++++++--- src/layouts/default/index.less | 18 +++++++++------- src/router/menus/index.ts | 5 +++-- .../menus/modules/{demo => }/dashboard.ts | 0 src/router/menus/modules/demo/charts.ts | 8 +++---- src/router/routes/index.ts | 6 ++++-- .../routes/modules/{demo => }/dashboard.ts | 0 src/router/routes/modules/demo/charts.ts | 2 +- src/router/routes/modules/demo/feat.ts | 19 +++++++++-------- src/settings/projectSetting.ts | 2 +- src/store/modules/tab.ts | 5 +---- src/utils/helper/envHelper.ts | 8 ++----- 12 files changed, 54 insertions(+), 40 deletions(-) rename src/router/menus/modules/{demo => }/dashboard.ts (100%) rename src/router/routes/modules/{demo => }/dashboard.ts (100%) diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts index e7eccfc3..7a6809f2 100644 --- a/src/hooks/web/useTabs.ts +++ b/src/hooks/web/useTabs.ts @@ -1,3 +1,4 @@ +import type { AppRouteRecordRaw } from '/@/router/types.d'; import { useTimeout } from '/@/hooks/core/useTimeout'; import { PageEnum } from '/@/enums/pageEnum'; import { TabItem, tabStore } from '/@/store/modules/tab'; @@ -64,6 +65,18 @@ export function useTabs() { } return !!show; } + function getTo(path: string): any { + const routes = router.getRoutes(); + const fn = (p: string): any => { + const to = routes.find((item) => item.path === p); + if (!to) return ''; + if (!to.redirect) return to; + if (to.redirect) { + return getTo(to.redirect as string); + } + }; + return fn(path); + } return { initTabFn, refreshPage: () => canIUseFn() && refreshPage(tabStore.getCurrentTab), @@ -74,11 +87,13 @@ export function useTabs() { closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab), resetCache: () => canIUseFn() && resetCache(), addTab: (path: PageEnum, goTo = false, replace = false) => { + const to = getTo(path); + if (!to) return; useTimeout(() => { - tabStore.addTabByPathAction(path); + tabStore.addTabByPathAction((to as unknown) as AppRouteRecordRaw); }, 0); - activeKeyRef.value = path; - goTo && replace ? router.replace : router.push(path); + activeKeyRef.value = to.path; + goTo && replace ? router.replace : router.push(to.path); }, activeKeyRef, }; diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less index 19e70e7a..1a61db7e 100644 --- a/src/layouts/default/index.less +++ b/src/layouts/default/index.less @@ -1,11 +1,11 @@ @import (reference) '../../design/index.less'; .default-layout { - .ant-menu-submenu .ant-menu-sub { - transition: none !important; - // transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, - // padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s !important; - } + // .ant-menu-submenu .ant-menu-sub { + // transition: none !important; + // // transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, + // // padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s !important; + // } &__content { position: relative; @@ -102,10 +102,12 @@ .setting-button { top: 45%; right: 0; - border-radius: 10px 0 0 10px; + padding: 14px; + border-radius: 6px 0 0 6px; - .svg { - width: 2em; + svg { + width: 1.2em; + height: 1.2em; } } diff --git a/src/router/menus/index.ts b/src/router/menus/index.ts index 30730f62..ef525be6 100644 --- a/src/router/menus/index.ts +++ b/src/router/menus/index.ts @@ -10,7 +10,8 @@ import { PermissionModeEnum } from '/@/enums/appEnum'; // =========================== // ==========module import==== // =========================== -import dashboardDemo from './modules/demo/dashboard'; +import dashboard from './modules/dashboard'; + import exceptionDemo from './modules/demo/exception'; import iframeDemo from './modules/demo/iframe'; import compDemo from './modules/demo/comp'; @@ -22,7 +23,7 @@ import formDemo from './modules/demo/form'; import treeDemo from './modules/demo/tree'; const menuModules = [ - dashboardDemo, + dashboard, featDemo, exceptionDemo, iframeDemo, diff --git a/src/router/menus/modules/demo/dashboard.ts b/src/router/menus/modules/dashboard.ts similarity index 100% rename from src/router/menus/modules/demo/dashboard.ts rename to src/router/menus/modules/dashboard.ts diff --git a/src/router/menus/modules/demo/charts.ts b/src/router/menus/modules/demo/charts.ts index 914841f4..77967992 100644 --- a/src/router/menus/modules/demo/charts.ts +++ b/src/router/menus/modules/demo/charts.ts @@ -5,6 +5,10 @@ const menu: MenuModule = { name: '图表', path: '/charts', children: [ + { + path: '/apexChart', + name: 'ApexChart', + }, { path: '/echarts', name: 'Echarts', @@ -23,10 +27,6 @@ const menu: MenuModule = { }, ], }, - { - path: '/apexChart', - name: 'ApexChart', - }, ], }, }; diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts index aa39aeac..0c180d3e 100644 --- a/src/router/routes/index.ts +++ b/src/router/routes/index.ts @@ -4,9 +4,11 @@ import { DEFAULT_LAYOUT_COMPONENT, PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from ' import { genRouteModule } from '/@/utils/helper/routeHelper'; import LoginRoute from './modules/sys'; + +import dashboard from './modules/dashboard'; + // demo import exceptionDemo from './modules/demo/exception'; -import dashboardDemo from './modules/demo/dashboard'; import iframeDemo from './modules/demo/iframe'; import compDemo from './modules/demo/comp'; import permissionDemo from './modules/demo/permission'; @@ -18,7 +20,7 @@ import treeDemo from './modules/demo/tree'; const routeModuleList: AppRouteModule[] = [ exceptionDemo, - dashboardDemo, + dashboard, iframeDemo, compDemo, featDemo, diff --git a/src/router/routes/modules/demo/dashboard.ts b/src/router/routes/modules/dashboard.ts similarity index 100% rename from src/router/routes/modules/demo/dashboard.ts rename to src/router/routes/modules/dashboard.ts diff --git a/src/router/routes/modules/demo/charts.ts b/src/router/routes/modules/demo/charts.ts index 3e0eea15..a86da872 100644 --- a/src/router/routes/modules/demo/charts.ts +++ b/src/router/routes/modules/demo/charts.ts @@ -7,7 +7,7 @@ export default { path: '/charts', name: 'Charts', component: PAGE_LAYOUT_COMPONENT, - redirect: '/charts/welcome', + redirect: '/charts/apexChart', meta: { icon: 'ant-design:area-chart-outlined', title: '图表库', diff --git a/src/router/routes/modules/demo/feat.ts b/src/router/routes/modules/demo/feat.ts index cd07d561..fa430061 100644 --- a/src/router/routes/modules/demo/feat.ts +++ b/src/router/routes/modules/demo/feat.ts @@ -7,7 +7,7 @@ export default { path: '/feat', name: 'FeatDemo', component: PAGE_LAYOUT_COMPONENT, - redirect: '/feat/tabs', + redirect: '/feat/icon', meta: { icon: 'ic:outline-featured-play-list', title: 'Feat', @@ -15,14 +15,6 @@ export default { }, routes: [ - { - path: '/tabs', - name: 'TabsDemo', - component: () => import('/@/views/demo/feat/tabs/index.vue'), - meta: { - title: '标签页操作', - }, - }, { path: '/icon', name: 'IconDemo', @@ -31,6 +23,15 @@ export default { title: '图标', }, }, + { + path: '/tabs', + name: 'TabsDemo', + component: () => import('/@/views/demo/feat/tabs/index.vue'), + meta: { + title: '标签页操作', + }, + }, + { path: '/context-menu', name: 'ContextMenuDemo', diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index 03532a51..c121976f 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -61,7 +61,7 @@ const setting: ProjectConfig = { // 分割菜单 split: false, // 顶部菜单布局 - topMenuAlign: 'center', + topMenuAlign: 'start', }, // 消息配置 messageSetting: { diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts index b5ab10fd..62582f9d 100644 --- a/src/store/modules/tab.ts +++ b/src/store/modules/tab.ts @@ -181,10 +181,7 @@ class Tab extends VuexModule { } @Action - addTabByPathAction(path: string): void { - if (!path) return; - const routes = router.getRoutes(); - const to = routes.find((item) => item.path === path); + addTabByPathAction(to: AppRouteRecordRaw): void { to && this.commitAddTab((to as unknown) as AppRouteRecordRaw); } diff --git a/src/utils/helper/envHelper.ts b/src/utils/helper/envHelper.ts index 63020e6e..d4caac10 100644 --- a/src/utils/helper/envHelper.ts +++ b/src/utils/helper/envHelper.ts @@ -1,13 +1,9 @@ -import { isDevMode, getEnv } from '/@/utils/env'; +import { getEnv } from '/@/utils/env'; import { useSetting } from '/@/hooks/core/useSetting'; -import moment from 'moment'; import pkg from '../../../package.json'; const { globSetting } = useSetting(); // Generate cache key according to version export const getStorageShortName = () => { - const shortTime = moment().format('MMDDHHmmss'); - return `${globSetting.shortName}__${getEnv()}${ - `__${pkg.version}` + (isDevMode() ? '' : `__${shortTime}`) - }__`.toUpperCase(); + return `${globSetting.shortName}__${getEnv()}${`__${pkg.version}`}__`.toUpperCase(); };