TabScaffold 重构

app/wails/frontend/src/App.vue

@@ -5,9 +5,9 @@
                 <transition name="fade" mode="out-in">
                     <div style="height: 100vh">
                         <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
-                                   :key="route.path"/>
+                                   :key="route.meta.groups ? route.meta.groups : route.path"/>
                         <keep-alive v-else>
-                            <component :is="Component" :key="route.path"/>
+                            <component :is="Component" :key="route.meta.groups ? route.meta.groups : route.path"/>
                         </keep-alive>
                     </div>
                 </transition>
@@ -17,8 +17,8 @@
 </template>
 
 <script setup>
-import {computed, onBeforeUnmount, onMounted} from "vue";
+import {computed, onBeforeUnmount} from "vue";
-import {createDebugger, destroyDebugger, switchDebugger} from "src/utils/debugger/eruda";
+import {destroyDebugger, switchDebugger} from "src/utils/debugger/eruda";
 import {useGlobalConfig} from "src/store/globalConfig";
 import {mapWritableState} from "pinia";
 import {useMagicKeys, whenever} from "@vueuse/core";

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

@@ -2,26 +2,88 @@
 import {useGlobalTabs} from "src/store/globalTabs";
 import {storeToRefs} from "pinia";
 import {useRoute, useRouter} from "vue-router";
+import {onBeforeMount, watch} from "vue";
 const globalTabsState = useGlobalTabs()
 const {tab, tabs} = storeToRefs(globalTabsState)
 const router = useRouter()
 const route = useRoute()
+const props = defineProps({
+    init: {
+        required: true
+    },
+    initCanCloseable: {
+        type: Boolean,
+        default: false,
+        required: false
+    },
+    rollBack: {
+        default: "/",
+        required: false
+    },
+    rollBackCanCloseable: {
+        type: Boolean,
+        default: false,
+        required: false
+    }
+})
 
+onBeforeMount(()=>{
+    let initRoute = router.resolve(props.init)
+
+    globalTabsState.addTab({
+        name: initRoute.path,
+        title: initRoute.meta.title,
+        closable: props.initCanCloseable,
+    })
+    globalTabsState.tab = initRoute.path
+    router.push(initRoute)
+})
+
+
+watch(route,()=>{
+    if(route.path === tab.value) {
+        return
+    }
+
+    let index = tabs.value.findIndex(item => item.name === name)
+    if(index === -1){
+        globalTabsState.addTab({
+            name: route.path,
+            title: route.meta.title
+        })
+    }
+    globalTabsState.tab = route.path
+})
 
 function tabChange(name){
     console.log("tabChange", name)
+    globalTabsState.tab = name
     router.push({
         path: name
     })
 }
 
 function tabRemove(name){
+    console.log("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
+        if(index === 0 && tabs.value.length === 1){
-        tabs.value.splice(index,1)
+            tabs.value.splice(index,1)
+            let r = router.resolve(props.rollBack)
+            tabs.value.push({
+                name: r.path,
+                title: r.meta.title,
+                closable: props.rollBackCanCloseable
+            })
+            tab.value = tabs.value[0].name
+            router.push(r)
+        } else {
+            let nextIndex = index === tabs.value.length - 1? index - 1: index + 1
+            tab.value = tabs.value[nextIndex].name
+            tabs.value.splice(index,1)
+        }
     }
 }
 </script>

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

@@ -11,27 +11,31 @@ const routes = [
         meta: {
             title: "首页",
             keepAlive: true,
+            groups: "/"
         },
         children: [
             {
                 path: "/home",
-                component: ()=>import("src/views/home/Home.vue"),
+                component: ()=>import("src/views/tabs/home/Home.vue"),
                 meta: {
-                    title: "首页"
+                    title: "首页",
+                    groups: "/"
                 }
             },
             {
                 path: "environment",
-                component:()=>import("src/views/environment/index.vue"),
+                component:()=>import("src/views/tabs/environment/index.vue"),
                 meta:{
-                    title: "环境变量"
+                    title: "环境变量",
+                    groups: "/"
                 }
             },
             {
                 path: "/test",
-                component: ()=>import("src/views/home/Test.vue"),
+                component: ()=>import("src/views/tabs/home/Test.vue"),
                 meta: {
-                    title: "测试"
+                    title: "测试",
+                    groups: "/"
                 }
             }
         ]

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

@@ -8,7 +8,8 @@ export const useGlobalTabs = defineStore("globalTabs",{
     actions:{
         addTab(tab){
             let index = this.tabs.findIndex(item => item.name === tab.name)
-            if( index === -1){
+            console.log("addTab", tab, index)
+            if( index === -1 ){
                 this.tabs.push(tab)
             } else {
                 this.tabs[index] = Object.assign(this.tabs[index],tab)

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

@@ -1,48 +0,0 @@
-<script setup>
-import {reactive} from "vue";
-import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
-import {ElAutoResizer} from "element-plus";
-
-const table = reactive({
-    columns: [
-        {
-            key: "name",
-            dataKey: "name",
-            title: "名称",
-            width: 150,
-        },
-        {
-            key: "value",
-            dataKey: "value",
-            title: "值",
-            width: 150,
-            minWidth: "150px",
-            flexGrow: 1
-        }
-    ],
-    data: []
-})
-
-GetAllEnv().then((data)=>{
-    table.data = Object.entries(data).map(item => {
-        return {
-            name: item[0],
-            value: item[1]
-        }
-    })
-})
-</script>
-
-<template>
-    <div style="height: 100%">
-        <el-auto-resizer>
-            <template #default="{ height, width}">
-                <el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns"/>
-            </template>
-        </el-auto-resizer>
-    </div>
-</template>
-
-<style scoped>
-
-</style>

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

@@ -1,31 +1,9 @@
 <script setup>
 import TabScaffold from "src/components/scaffold/TabScaffold.vue";
-import {useRoute, useRouter} from "vue-router";
-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 && route.path !== "/"){
-    globalTabsState.tabs = [...new Set(globalTabsState.tabs).add({
-        name: route.path,
-        title: route.meta.title,
-    })]
-}
-
-if(route.path === "/"){
-    let r = router.resolve("/home")
-    router.push(r)
-    globalTabsState.addTab({
-        name: "/home",
-        title: r.meta.title,
-        closable: false,
-    })
-}
 </script>
 
 <template>
-<TabScaffold style="height: 100%"></TabScaffold>
+<TabScaffold class="w-full h-full" init="/home" rollBack="/home"/>
 </template>
 
 <style scoped>

app/wails/frontend/src/views/tabs/environment/index.vue

@@ -0,0 +1,65 @@
+<script setup>
+import {reactive} from "vue";
+import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
+import {ElAutoResizer} from "element-plus";
+
+const table = reactive({
+    columns: [
+        {
+            key: "name",
+            dataKey: "name",
+            title: "名称",
+            width: 300,
+            minWidth: "300px",
+        },
+        {
+            key: "value",
+            dataKey: "value",
+            title: "值",
+            width: 300,
+            minWidth: "300px",
+            flexGrow: 1
+        }
+    ],
+    data: []
+})
+
+GetAllEnv().then((data)=>{
+    table.data = Object.entries(data).map(item => {
+        return {
+            name: item[0],
+            value: item[1]
+        }
+    })
+})
+</script>
+
+<template>
+    <div style="height: 100%">
+        <el-auto-resizer>
+            <template #default="{ height, width}">
+                <el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns">
+                    <template #cell="scope">
+                        <el-tooltip teleported>
+                            <template #content>
+                                <div v-for="(item,index) in (scope.rowData[scope.column.dataKey].split(';'))" :key="index">
+                                    {{item}}
+                                </div>
+                            </template>
+
+                            <template #default>
+                                <div class="w-full truncate">
+                                    {{scope.rowData[scope.column.dataKey]}}
+                                </div>
+                            </template>
+                        </el-tooltip>
+                    </template>
+                </el-table-v2>
+            </template>
+        </el-auto-resizer>
+    </div>
+</template>
+
+<style scoped>
+
+</style>