修改tab刷新位置问题

frontend/src/layouts/components/Main/index.vue

@@ -4,7 +4,7 @@
   <el-main>
     <router-view v-slot="{ Component, route }" style="height:100%;">
       <!-- <transition  name="slide-right" mode="out-in"> -->
-        <keep-alive :include="keepAliveName" >
+        <keep-alive :include="tabsMenuList" >
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
       <!-- </transition> -->
@@ -25,11 +25,12 @@ import Maximize from "./components/Maximize.vue";
 import Tabs from "@/layouts/components/Tabs/index.vue";
 import Footer from "@/layouts/components/Footer/index.vue";
 import { useAuthStore } from "@/stores/modules/auth";
-import { useRoute, type RouteLocationNormalized } from 'vue-router'
+import { useTabsStore } from '@/stores/modules/tabs'
+const tabStore = useTabsStore()
 const globalStore = useGlobalStore();
+const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
 const authStore = useAuthStore();
 const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
-const route = useRoute()
 const keepAliveStore = useKeepAliveStore();
 const { keepAliveName } = storeToRefs(keepAliveStore);
 // console.log("🚀 ~ keepAliveName:", keepAliveName)
@@ -60,14 +61,7 @@ watch(
   },
   { immediate: true }
 );
-watch(
-  () => route.path,
-  () => {
-    console.log(123, route.path);
 
-  },
-
-);
 
 // 监听窗口大小变化，折叠侧边栏
 const screenWidth = ref(0);

frontend/src/layouts/components/Tabs/index.vue

@@ -77,6 +77,7 @@ const initTabs = () => {
         name: item.name,
         close: !item.meta.isAffix,
         isKeepAlive: item.meta.isKeepAlive,
+        unshift:true
       }
       tabStore.addTabs(tabsParams)
     }
@@ -100,6 +101,7 @@ const tabsDrop = () => {
 // Tab Click
 const tabClick = (tabItem: TabsPaneContext) => {
   const fullPath = tabItem.props.name as string
+  console.log("🚀 ~ tabClick ~ fullPath:", tabItem)
   router.push(fullPath)
 }
 

frontend/src/stores/interface/index.ts

@@ -39,6 +39,7 @@ export interface TabsMenuProps {
   name: string;
   close: boolean;
   isKeepAlive: boolean;
+  unshift?: boolean;
 }
 
 /* TabsState */

frontend/src/stores/modules/tabs.ts

@@ -16,8 +16,14 @@ export const useTabsStore = defineStore({
   actions: {
     // Add Tabs
     async addTabs(tabItem: TabsMenuProps) {
+
       if (this.tabsMenuList.every(item => item.path !== tabItem.path)) {
-        this.tabsMenuList.push(tabItem);
+        if (tabItem?.unshift) {
+          this.tabsMenuList.unshift(tabItem);
+        }else{
+          this.tabsMenuList.push(tabItem);
+
+        }
       }
       if (!keepAliveStore.keepAliveName.includes(tabItem.name) && tabItem.isKeepAlive) {
         keepAliveStore.addKeepAliveName(tabItem.name);