tab 测试

app/wails/frontend/src/App.vue

@@ -1,16 +1,55 @@
 <template>
-    <el-config-provider v-bind="globalConfig">
-        <router-view/>
-    </el-config-provider>
+    <div class="mx-1">
+        <el-config-provider v-bind="globalConfig">
+            <keep-alive>
+                <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"
+                        @close="closeTabPane"
+                        :name="item.name">
+                        <router-view />
+                    </el-tab-pane>
+                </el-tabs>
+            </keep-alive>
+        </el-config-provider>
+    </div>
 </template>
 
 <script setup>
-import {computed, onBeforeUnmount, onMounted, reactive} from "vue";
+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 {storeToRefs} from "pinia";
+import {useRouter} from "vue-router";
 
 const globalConfig = computed(()=>useGlobalConfig().$state.ui)
 
+const globalTabsState = useGlobalTabs()
+globalTabsState.$reset()
+
+const {tab:globalTab, tabs:globalTabs} = storeToRefs(globalTabsState)
+const router = useRouter()
+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/router/router.js

@@ -8,6 +8,16 @@ const routes = [
     {
         path: '/',
         component: ()=>import("frontend/src/views/Home.vue"),
+        meta: {
+            title: "首页"
+        }
+    },
+    {
+        path: "/test",
+        component: ()=>import("frontend/src/views/Test.vue"),
+        meta: {
+            title: "测试"
+        }
     }
 ]
 

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

@@ -0,0 +1,11 @@
+import {defineStore} from "pinia";
+
+export const useGlobalTabs = defineStore("globalTabs",{
+    state:()=>({
+        tab: "/",
+        tabs: [{
+            name:"/",
+            title: "首页"
+        }]
+    })
+})

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

@@ -73,6 +73,8 @@ const globalConfigState = storeToRefs(globalConfig)
 
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import en from 'element-plus/dist/locale/en.mjs'
+import {useGlobalTabs} from "src/store/globalTabs";
+import {useRouter} from "vue-router";
 function switchLocale(){
     console.log(globalConfigState.ui.value.locale)
     if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@@ -85,6 +87,17 @@ function switchLocale(){
         })
     }
 }
+
+const router = useRouter()
+const globalTabState = storeToRefs(useGlobalTabs())
+function addTab(){
+    globalTabState.tabs.value.unshift({
+        name: "/test",
+        title: "测试",
+        closable: true,
+    })
+    globalTabState.tab.value = "/test"
+}
 </script>
 
 <template>
@@ -104,6 +117,8 @@ function switchLocale(){
     <el-button @click="switchLocale()">切换 locale</el-button>
     <el-table mb-1 :data="[]" />
     <el-pagination :total="100" />
+
+    <el-button @click="addTab()">添加tab</el-button>
 </template>
 
 <style scoped>

app/wails/frontend/src/views/Test.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>测试页面</div>
+</template>
+
+<style scoped>
+
+</style>