fix: fix missing cache of refresh page

nebv
1 parent bbfb06f0
Showing 12 changed files with 54 additions and 40 deletions
src/hooks/web/useTabs.ts
src/layouts/default/index.less
src/router/menus/index.ts
src/router/menus/modules/demo/dashboard.ts → src/router/menus/modules/dashboard.ts
src/router/menus/modules/demo/charts.ts
src/router/routes/index.ts
src/router/routes/modules/demo/dashboard.ts → src/router/routes/modules/dashboard.ts
src/router/routes/modules/demo/charts.ts
src/router/routes/modules/demo/feat.ts
src/settings/projectSetting.ts
src/store/modules/tab.ts
src/utils/helper/envHelper.ts
+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,
   };
 @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;
     }
   }
  
@@ -10,7 +10,8 @@ import { PermissionModeEnum } from &#39;/@/enums/appEnum&#39;;
 // ===========================
 // ==========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 &#39;./modules/demo/form&#39;;
 import treeDemo from './modules/demo/tree';
  
 const menuModules = [
-  dashboardDemo,
+  dashboard,
   featDemo,
   exceptionDemo,
   iframeDemo,
@@ -6,6 +6,10 @@ const menu: MenuModule = {
     path: '/charts',
     children: [
       {
+        path: '/apexChart',
+        name: 'ApexChart',
+      },
+      {
         path: '/echarts',
         name: 'Echarts',
         children: [
@@ -23,10 +27,6 @@ const menu: MenuModule = {
           },
         ],
       },
-      {
-        path: '/apexChart',
-        name: 'ApexChart',
-      },
     ],
   },
 };
@@ -4,9 +4,11 @@ import { DEFAULT_LAYOUT_COMPONENT, PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from &#39;
 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 &#39;./modules/demo/tree&#39;;
  
 const routeModuleList: AppRouteModule[] = [
   exceptionDemo,
-  dashboardDemo,
+  dashboard,
   iframeDemo,
   compDemo,
   featDemo,
@@ -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: '图表库',
@@ -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',
@@ -16,14 +16,6 @@ export default {
  
   routes: [
     {
-      path: '/tabs',
-      name: 'TabsDemo',
-      component: () => import('/@/views/demo/feat/tabs/index.vue'),
-      meta: {
-        title: '标签页操作',
-      },
-    },
-    {
       path: '/icon',
       name: 'IconDemo',
       component: () => import('/@/views/demo/comp/icon/index.vue'),
@@ -32,6 +24,15 @@ export default {
       },
     },
     {
+      path: '/tabs',
+      name: 'TabsDemo',
+      component: () => import('/@/views/demo/feat/tabs/index.vue'),
+      meta: {
+        title: '标签页操作',
+      },
+    },
+
+    {
       path: '/context-menu',
       name: 'ContextMenuDemo',
       component: () => import('/@/views/demo/feat/context-menu/index.vue'),
@@ -61,7 +61,7 @@ const setting: ProjectConfig = {
     // 分割菜单
     split: false,
     // 顶部菜单布局
-    topMenuAlign: 'center',
+    topMenuAlign: 'start',
   },
   // 消息配置
   messageSetting: {
@@ -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);
   }
  
-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();
 };