多标签tabs 调整

admin/src/layout/default/components/header/multiple-tabs.vue

@@ -3,12 +3,12 @@
         <div class="flex-1 min-w-0">
             <el-tabs
                 :model-value="currentTab"
-                :closable="tabsState.length > 1"
+                :closable="tabsLists.length > 1"
                 @tab-change="handleChange"
-                @tab-remove="handleRemove"
+                @tab-remove="removeTab($event)"
             >
-                <template v-for="item in tabsState" :key="item.path">
-                    <el-tab-pane :label="item.title" :name="item.path"></el-tab-pane>
+                <template v-for="item in tabsLists" :key="item.fullPath">
+                    <el-tab-pane :label="item.title" :name="item.fullPath"></el-tab-pane>
                 </template>
             </el-tabs>
         </div>
@@ -28,40 +28,31 @@
 </template>
 
 <script setup lang="ts">
+import useMultipleTabs from '@/hooks/useMultipleTabs'
 import { useWatchRoute } from '@/hooks/useWatchRoute'
 import useTabsStore, { getRouteParams } from '@/stores/modules/multipleTabs'
 const router = useRouter()
 const tabsStore = useTabsStore()
-const { route } = useWatchRoute((route) => {
-    tabsStore.addTab(route, router)
+const { removeOtherTab, addTab, removeAllTab, removeTab, tabsLists, currentTab } = useMultipleTabs()
+useWatchRoute(() => {
+    addTab()
 })
 
-const currentTab = computed(() => {
-    return route.path
-})
-
-const tabsState = computed(() => {
-    return tabsStore.getTabList
-})
-
-const handleChange = (path: any) => {
-    const tabItem = tabsStore.tasMap[path]
+const handleChange = (fullPath: any) => {
+    const tabItem = tabsStore.tasMap[fullPath]
     router.push(getRouteParams(tabItem))
 }
 
-const handleRemove = (path: any) => {
-    tabsStore.removeTab(path, router)
-}
 const handleCommand = (command: any) => {
     switch (command) {
         case 'closeCurrent':
-            handleRemove(route.path)
+            removeTab()
             break
         case 'closeOther':
-            tabsStore.removeOtherTab(route.path)
+            removeOtherTab()
             break
         case 'closeAll':
-            tabsStore.removeAllTab(router)
+            removeAllTab()
             break
     }
 }

admin/src/layout/default/components/main.vue

@@ -3,7 +3,9 @@
         <el-scrollbar>
             <div class="p-4">
                 <router-view v-if="isRouteShow" v-slot="{ Component, route }">
-                    <component :is="Component" :key="route.fullPath" />
+                    <keep-alive :include="includeList" :max="20">
+                        <component :is="Component" :key="route.fullPath" />
+                    </keep-alive>
                 </router-view>
             </div>
         </el-scrollbar>
@@ -12,8 +14,13 @@
 
 <script setup lang="ts">
 import useAppStore from '@/stores/modules/app'
+import useTabsStore from '@/stores/modules/multipleTabs'
+import useSettingStore from '@/stores/modules/setting'
 const appStore = useAppStore()
+const tabsStore = useTabsStore()
+const settingStore = useSettingStore()
 const isRouteShow = computed(() => appStore.isRouteShow)
+const includeList = computed(() => (settingStore.openMultipleTabs ? tabsStore.getCacheTabList : []))
 </script>
 
 <style></style>

admin/src/layout/default/components/setting/drawer.vue

@@ -65,7 +65,6 @@ import theme_light from '@/assets/images/theme_white.png'
 import theme_dark from '@/assets/images/theme_black.png'
 
 const settingStore = useSettingStore()
-
 const predefineColors = ref(['#409EFF', '#28C76F', '#EA5455', '#FF9F43', '#01CFE8', '#4A5DFF'])
 const sideThemeList = [
     {