fix(projects): 修复页面缓存，添加多页签删除

src/hooks/common/index.ts

@@ -3,6 +3,5 @@ import useCreateContext from './useCreateContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
-import useScrollBehavior from './useScrollBehavior';
 
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useRouteQuery, useScrollBehavior };
+export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useRouteQuery };

src/hooks/common/useScrollBehavior.ts

@@ -1,25 +0,0 @@
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-
-export default function useScrollBehavior() {
-  const scrollbar = ref<HTMLElement | null>(null);
-  const route = useRoute();
-
-  function resetScrollBehavior() {
-    scrollbar.value?.scrollTo({ left: 0, top: 0 });
-  }
-
-  function resetScrollWatcher() {
-    watch(
-      () => route.name,
-      () => {
-        resetScrollBehavior();
-      }
-    );
-  }
-
-  return {
-    scrollbar,
-    resetScrollWatcher
-  };
-}

src/hooks/index.ts

@@ -1,9 +1,2 @@
-export {
+export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useRouteQuery } from './common';
-  useAppTitle,
-  useCreateContext,
-  useRouterChange,
-  useRouteParam,
-  useRouteQuery,
-  useScrollBehavior
-} from './common';
 export { useCountDown, useSmsCode } from './business';

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -11,7 +11,10 @@
         :key="item.path"
         :type="app.multiTab.activeRoute === item.fullPath ? 'primary' : 'default'"
         class="cursor-pointer"
+        :closable="item.name !== ROUTE_HOME.name"
+        size="large"
         @click="handleClickTab(item.fullPath)"
+        @close="removeMultiTab(item.fullPath)"
       >
         {{ item.meta?.title }}
       </n-tag>
@@ -28,6 +31,7 @@ import { useRoute } from 'vue-router';
 import { NSpace, NTag } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
 import { useRouterChange } from '@/hooks';
+import { ROUTE_HOME } from '@/router';
 
 defineProps({
   zIndex: {
@@ -39,7 +43,7 @@ defineProps({
 const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
-const { initMultiTab, addMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
+const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
 const { toReload } = useRouterChange();
 
 const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');

src/layouts/BasicLayout/index.vue

@@ -4,19 +4,24 @@
     <global-header v-if="isHorizontalMix" :z-index="2" />
     <div class="flex-1-hidden flex h-full">
       <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="1" />
-      <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
+      <n-scrollbar
+        ref="scrollbar"
+        class="h-full"
+        :x-scrollable="true"
+        :content-class="routeProps.fullPage ? 'h-full' : ''"
+      >
         <div
           class="inline-flex-col-stretch w-full"
-          :class="[{ 'content-padding': isHorizontalMix }, fullPage ? 'h-full' : 'min-h-100vh']"
+          :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
         >
           <global-header v-if="!isHorizontalMix" :z-index="1" />
           <global-tab :z-index="1" />
           <n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
             <router-view v-slot="{ Component }">
-              <keep-alive v-if="keepAlive">
+              <keep-alive>
-                <component :is="Component" />
+                <component :is="Component" v-if="routeProps.keepAlive" :key="routeProps.name" />
               </keep-alive>
-              <component :is="Component" v-else />
+              <component :is="Component" v-if="!routeProps.keepAlive" :key="routeProps.name" />
             </router-view>
           </n-layout-content>
           <global-footer />
@@ -29,15 +34,14 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
 import { useThemeStore } from '@/store';
-import { useScrollBehavior } from '@/hooks';
 import { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer } from './components';
+import { useRouteProps, useScrollBehavior } from '../composables';
 
-const route = useRoute();
 const theme = useThemeStore();
-const { scrollbar, resetScrollWatcher } = useScrollBehavior();
+const { scrollbar } = useScrollBehavior();
+const routeProps = useRouteProps();
 
 const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
 const headerAndMultiTabHeight = computed(() => {
@@ -47,15 +51,6 @@ const headerAndMultiTabHeight = computed(() => {
   } = theme;
   return `${hHeight + mHeight}px`;
 });
-
-/** 缓存页面 */
-const keepAlive = computed(() => Boolean(route.meta?.keepAlive));
-
-/** 100%视高 */
-const fullPage = computed(() => Boolean(route.meta?.fullPage));
-
-// 路由切换，重置滚动行为
-resetScrollWatcher();
 </script>
 <style scoped>
 :deep(.n-scrollbar-rail) {

src/layouts/BlankLayout/index.vue

@@ -1,31 +1,21 @@
 <template>
-  <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
+  <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
-    <div class="inline-block w-full" :class="[fullPage ? 'h-full' : 'min-h-100vh']">
+    <div class="inline-block w-full" :class="[routeProps.fullPage ? 'h-full' : 'min-h-100vh']">
       <router-view v-slot="{ Component }">
-        <keep-alive v-if="keepAlive">
+        <keep-alive>
-          <component :is="Component" />
+          <component :is="Component" v-if="routeProps.keepAlive" :key="routeProps.name" />
         </keep-alive>
-        <component :is="Component" v-else />
+        <component :is="Component" v-if="!routeProps.keepAlive" :key="routeProps.name" />
       </router-view>
     </div>
   </n-scrollbar>
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from 'vue-router';
 import { NScrollbar } from 'naive-ui';
-import { computed } from 'vue';
+import { useRouteProps, useScrollBehavior } from '../composables';
-import { useScrollBehavior } from '@/hooks';
 
-const route = useRoute();
+const { scrollbar } = useScrollBehavior();
-const { scrollbar, resetScrollWatcher } = useScrollBehavior();
+const routeProps = useRouteProps();
-
-/** 缓存页面 */
-const keepAlive = computed(() => Boolean(route.meta?.keepAlive));
-
-/** 100%视高 */
-const fullPage = computed(() => Boolean(route.meta?.fullPage));
-
-resetScrollWatcher();
 </script>
 <style scoped></style>

src/layouts/composables/index.ts

@@ -0,0 +1,44 @@
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+export function useRouteProps() {
+  const route = useRoute();
+
+  const props = computed(() => {
+    /** 路由名称 */
+    const name = route.name as string;
+    /** 混存页面 */
+    const keepAlive = Boolean(route.meta?.keepAlive);
+    /** 视高100% */
+    const fullPage = Boolean(route.meta?.fullPage);
+
+    return {
+      name,
+      keepAlive,
+      fullPage
+    };
+  });
+
+  return props;
+}
+
+/** 路由切换，重置滚动行为 */
+export function useScrollBehavior() {
+  const scrollbar = ref<HTMLElement | null>(null);
+  const route = useRoute();
+
+  function resetScrollBehavior() {
+    scrollbar.value?.scrollTo({ left: 0, top: 0 });
+  }
+
+  watch(
+    () => route.name,
+    () => {
+      resetScrollBehavior();
+    }
+  );
+
+  return {
+    scrollbar
+  };
+}

src/store/modules/app/index.ts

@@ -60,11 +60,11 @@ const appStore = defineStore({
     toggleMenu() {
       this.menu.collapsed = !this.menu.collapsed;
     },
-    /** 判断tab路由是否存在某个路由 */
+    /** 判断页签路由是否存在某个路由 */
     getIndexInTabRoutes(fullPath: string) {
       return this.multiTab.routes.findIndex(item => item.fullPath === fullPath);
     },
-    /** 添加多tab的数据 */
+    /** 添加多页签的数据 */
     addMultiTab(route: RouteLocationNormalizedLoaded) {
       const { fullPath } = route;
       const isExist = this.getIndexInTabRoutes(fullPath) > -1;
@@ -72,13 +72,24 @@ const appStore = defineStore({
         this.multiTab.routes.push({ ...route });
       }
     },
+    /** 删除多页签的数据 */
+    removeMultiTab(fullPath: string) {
+      const index = this.getIndexInTabRoutes(fullPath);
+      if (index > -1) {
+        this.multiTab.routes = this.multiTab.routes.filter(item => item.fullPath !== fullPath);
+        const { routes } = this.multiTab;
+        const activePath = routes[routes.length - 1].fullPath;
+        router.push(activePath);
+      }
+    },
+    /** 点击单个页签tab */
     handleClickTab(fullPath: string) {
       if (this.multiTab.activeRoute !== fullPath) {
         router.push(fullPath);
         this.setActiveMultiTab(fullPath);
       }
     },
-    /** 设置当前路由对应的tab为激活状态 */
+    /** 设置当前路由对应的页签为激活状态 */
     setActiveMultiTab(fullPath: string) {
       this.multiTab.activeRoute = fullPath;
     },