结构调整

app/wails/frontend/src/App.vue

@@ -1,26 +1,17 @@
 <template>
     <div class="mx-1">
         <el-config-provider v-bind="globalConfig">
-
-                <el-tabs v-model="globalTab" @tab-change="tabChange" @tab-remove="tabRemove">
-                    <el-tab-pane
-                        v-for="item in globalTabs"
-                        :key="item.name"
-                        :label="item.title"
-                        :closable="item.closable"
-                        :name="item.name">
-                        <router-view v-slot="{ Component, route  }">
-                            <transition name="fade" mode="out-in">
-                                <div>
-                                    <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
-                                    <keep-alive v-else>
-                                        <component :is="Component" :key="route.path"/>
-                                    </keep-alive>
-                                </div>
-                            </transition>
-                        </router-view>
-                    </el-tab-pane>
-                </el-tabs>
+            <router-view v-slot="{ Component, route  }">
+                <transition name="fade" mode="out-in">
+                    <div>
+                        <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
+                                   :key="route.path"/>
+                        <keep-alive v-else>
+                            <component :is="Component" :key="route.path"/>
+                        </keep-alive>
+                    </div>
+                </transition>
+            </router-view>
         </el-config-provider>
     </div>
 </template>
@@ -29,39 +20,10 @@
 import {computed, onBeforeUnmount, onMounted} from "vue";
 import {createDebugger, destroyDebugger} from "src/utils/debugger/eruda";
 import {useGlobalConfig} from "src/store/globalConfig";
-import {useGlobalTabs} from "src/store/globalTabs";
-import {mapWritableState, storeToRefs} from "pinia";
-import {useRoute, useRouter} from "vue-router";
+import {mapWritableState} from "pinia";
 
 const globalConfig = computed(mapWritableState(useGlobalConfig,['ui']).ui)
 
-const globalTabsState = useGlobalTabs()
-globalTabsState.$reset()
-
-const {tab:globalTab, tabs:globalTabs} = storeToRefs(globalTabsState)
-const router = useRouter()
-const route = useRoute()
-router.push({
-    path: "/"
-})
-
-function tabChange(name){
-    console.log("tabChange", name)
-    router.push({
-        path: name
-    })
-}
-
-function tabRemove(name){
-    let index = globalTabs.value.findIndex(item => item.name === name)
-    if(index >= globalTabs.value.length){
-        globalTab.value = globalTabs.value[0].name
-    } else {
-        globalTab.value = globalTabs.value[index+1].name
-        globalTabs.value.splice(index,1)
-    }
-}
-
 onMounted(()=>{
     createDebugger()
 })

app/wails/frontend/src/components/scaffold/TabScaffold.vue

@@ -0,0 +1,53 @@
+<script setup>
+import {useGlobalTabs} from "src/store/globalTabs";
+import {storeToRefs} from "pinia";
+import {useRoute, useRouter} from "vue-router";
+const globalTabsState = useGlobalTabs()
+const {tab, tabs} = storeToRefs(globalTabsState)
+const router = useRouter()
+const route = useRoute()
+
+
+function tabChange(name){
+    console.log("tabChange", name)
+    router.push({
+        path: name
+    })
+}
+
+function tabRemove(name){
+    let index = tabs.value.findIndex(item => item.name === name)
+    if(index >= tabs.value.length){
+        tab.value = tabs.value[0].name
+    } else {
+        tab.value = tabs.value[index-1].name
+        tabs.value.splice(index,1)
+    }
+}
+</script>
+
+<template>
+    <el-tabs v-model="tab" @tab-change="tabChange" @tab-remove="tabRemove">
+        <el-tab-pane
+            v-for="item in tabs"
+            :key="item.name"
+            :label="item.title"
+            :closable="item.closable"
+            :name="item.name">
+            <router-view v-slot="{ Component, route  }">
+                <transition name="fade" mode="out-in">
+                    <div>
+                        <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
+                        <keep-alive v-else>
+                            <component :is="Component" :key="route.path"/>
+                        </keep-alive>
+                    </div>
+                </transition>
+            </router-view>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<style scoped>
+
+</style>

app/wails/frontend/src/router/router.js

@@ -7,18 +7,28 @@ import * as  VueRouter from "vue-router"
 const routes = [
     {
         path: '/',
-        component: ()=>import("frontend/src/views/Home.vue"),
+        component: ()=>import("src/views/home/index.vue"),
         meta: {
-            title: "首页"
-        }
+            title: "首页",
+            keepAlive: true,
+        },
+        children: [
+            {
+                path: "/home",
+                component: ()=>import("src/views/home/Home.vue"),
+                meta: {
+                    title: "首页"
+                }
+            },
+            {
+                path: "/test",
+                component: ()=>import("src/views/home/Test.vue"),
+                meta: {
+                    title: "测试"
+                }
+            }
+        ]
     },
-    {
-        path: "/test",
-        component: ()=>import("frontend/src/views/Test.vue"),
-        meta: {
-            title: "测试"
-        }
-    }
 ]
 
 const Router = VueRouter.createRouter({

app/wails/frontend/src/store/globalTabs.js

@@ -2,10 +2,17 @@ import {defineStore} from "pinia";
 
 export const useGlobalTabs = defineStore("globalTabs",{
     state:()=>({
-        tab: "/",
-        tabs: [{
-            name:"/",
-            title: "首页"
-        }]
-    })
+        tab: "",
+        tabs: []
+    }),
+    actions:{
+        addTab(tab){
+            let index = this.tabs.findIndex(item => item.name === tab.name)
+            if( index === -1){
+                this.tabs.push(tab)
+            } else {
+                this.tabs[index] = Object.assign(this.tabs[index],tab)
+            }
+        }
+    }
 })

app/wails/frontend/src/views/home/Home.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {Greet} from 'frontend/wailsjs/go/main/App';
 import {reactive} from "vue";
-import {toReactive, useWebNotification} from '@vueuse/core'
+import {useWebNotification} from '@vueuse/core'
 import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
 import {hideDebugger, showDebugger} from "src/utils/debugger/eruda";
 import {useGlobalConfig} from "src/store/globalConfig";
@@ -89,14 +89,14 @@ function switchLocale(){
 }
 
 const router = useRouter()
-const globalTabState = storeToRefs(useGlobalTabs())
+const globalTabState = useGlobalTabs()
 function addTab(){
-    globalTabState.tabs.value.unshift({
+    globalTabState.addTab({
         name: "/test",
         title: "测试",
         closable: true,
     })
-    globalTabState.tab.value = "/test"
+    globalTabState.tab = "/test"
 }
 </script>
 

app/wails/frontend/src/views/home/index.vue

@@ -0,0 +1,28 @@
+<script setup>
+import TabScaffold from "src/components/scaffold/TabScaffold.vue";
+import {useRoute, useRouter} from "vue-router";
+import {ref} from "vue";
+import {useGlobalTabs} from "src/store/globalTabs";
+const route = useRoute();
+const router = useRouter();
+const globalTabsState = useGlobalTabs()
+globalTabsState.tab = route.path
+if(globalTabsState.tabs.find(item => item.name === route.path) == null){
+    globalTabsState.tabs = [...new Set(globalTabsState.tabs).add({
+        name: route.path,
+        title: route.meta.title,
+    })]
+}
+
+if(route.path === "/"){
+    router.push("/home")
+}
+</script>
+
+<template>
+<TabScaffold></TabScaffold>
+</template>
+
+<style scoped>
+
+</style>