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

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">
-                <component :is="Component" />
+              <keep-alive>
+                <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' : ''">
-    <div class="inline-block w-full" :class="[fullPage ? 'h-full' : 'min-h-100vh']">
+  <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
+    <div class="inline-block w-full" :class="[routeProps.fullPage ? 'h-full' : 'min-h-100vh']">
       <router-view v-slot="{ Component }">
-        <keep-alive v-if="keepAlive">
-          <component :is="Component" />
+        <keep-alive>
+          <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 { useScrollBehavior } from '@/hooks';
+import { useRouteProps, useScrollBehavior } from '../composables';
 
-const route = useRoute();
-const { scrollbar, resetScrollWatcher } = useScrollBehavior();
-
-/** 缓存页面 */
-const keepAlive = computed(() => Boolean(route.meta?.keepAlive));
-
-/** 100%视高 */
-const fullPage = computed(() => Boolean(route.meta?.fullPage));
-
-resetScrollWatcher();
+const { scrollbar } = useScrollBehavior();
+const routeProps = useRouteProps();
 </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
+  };
+}