优化滚动

app/wails/frontend/src/App.vue

@@ -3,8 +3,8 @@
         <el-config-provider v-bind="globalConfig">
             <router-view v-slot="{ Component, route  }">
                 <transition name="fade" mode="out-in">
-                    <div style="height: 100vh">
+                    <div style="height: 100vh" class="overflow-auto">
-                        <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
+                        <component v-if="route.meta.keepAlive != null && (route.meta.groups ? true: route.meta.keepAlive === false)" :is="Component"
                                    :key="route.meta.groups ? route.meta.groups : route.path"/>
                         <keep-alive v-else>
                             <component :is="Component" :key="route.meta.groups ? route.meta.groups : route.path"/>

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

@@ -45,6 +45,7 @@ watch(route,()=>{
         return
     }
 
+    console.log("route change", route.path)
     let index = tabs.value.findIndex(item => item.name === name)
     if(index === -1){
         globalTabsState.addTab({
@@ -90,23 +91,27 @@ function tabRemove(name){
 
 <template>
     <el-tabs v-model="tab" @tab-change="tabChange" @tab-remove="tabRemove" style="height:100%" class="tab-scaffold">
-        <el-tab-pane
+
-            v-for="item in tabs"
+            <el-tab-pane
-            :key="item.name"
+                v-for="item in tabs"
-            :label="item.title"
+                :key="item.name"
-            :closable="item.closable == null || item.closable"
+                :label="item.title"
-            :name="item.name">
+                :closable="item.closable == null || item.closable"
-            <router-view v-slot="{ Component, route  }">
+                :name="item.name">
-                <transition name="fade" mode="out-in">
+                <router-view v-slot="{ Component, route  }">
-                    <div class="h-full">
+                    <transition name="fade" mode="out-in">
-                        <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
+                        <el-scrollbar height="100%" class="scroll-bar">
-                        <keep-alive v-else>
+                            <div class="h-full">
-                            <component :is="Component" :key="route.path"/>
+                                <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
-                        </keep-alive>
+                                <keep-alive v-else>
-                    </div>
+                                    <component :is="Component" :key="route.path"/>
-                </transition>
+                                </keep-alive>
-            </router-view>
+                            </div>
-        </el-tab-pane>
+                        </el-scrollbar>
+                    </transition>
+                </router-view>
+            </el-tab-pane>
+
     </el-tabs>
 </template>
 
@@ -114,10 +119,15 @@ function tabRemove(name){
 .tab-scaffold {
     & > ::v-deep(.el-tabs__content) {
         height: calc(100% - 55px);
-    }
 
-    & > ::v-deep(.el-tabs__content .el-tab-pane) {
+        & .el-tab-pane {
-        height: 100%;
+            height: 100%;
+            overflow: auto;
+
+            & .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
+                height: 100%;
+            }
+        }
     }
 }
 </style>

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

@@ -19,15 +19,16 @@ const routes = [
                 component: ()=>import("src/views/tabs/home/Home.vue"),
                 meta: {
                     title: "首页",
-                    groups: "/"
+                    groups: "/",
+                    keepAlive: true,
                 }
             },
             {
-                path: "environment",
+                path: "/environment",
                 component:()=>import("src/views/tabs/environment/index.vue"),
                 meta:{
                     title: "环境变量",
-                    groups: "/"
+                    groups: "/",
                 }
             },
             {

app/wails/frontend/src/utils/fixed/el-tablev2.js

@@ -0,0 +1,10 @@
+import {ref, watch} from "vue";
+import {useRoute} from "vue-router";
+
+export function keepAliveFixed(tableRef){
+    const route = useRoute()
+    watch(route,()=>{
+        // 虚拟表格 keepAlive 切换后渲染空白 需要手动重新滚回顶部 以正常显示
+        tableRef.value?.scrollToTop(0)
+    })
+}

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

@@ -1,7 +1,9 @@
 <script setup>
-import {reactive} from "vue";
+import {reactive, ref, watch} from "vue";
 import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
 import {ElAutoResizer} from "element-plus";
+import {useRoute} from "vue-router";
+import {keepAliveFixed} from "src/utils/fixed/el-tablev2";
 
 const table = reactive({
     columns: [
@@ -24,6 +26,9 @@ const table = reactive({
     data: []
 })
 
+const tableRef = ref()
+keepAliveFixed(tableRef)
+
 GetAllEnv().then((data)=>{
     table.data = Object.entries(data).map(item => {
         return {
@@ -38,7 +43,7 @@ GetAllEnv().then((data)=>{
     <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">
+                <el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns" ref="tableRef">
                     <template #cell="scope">
                         <el-tooltip teleported>
                             <template #content>

backend/java/sk-matrix-service/starter/src/main/resources/application.yaml

@@ -42,7 +42,7 @@ spring:
         driver-class-name: com.mysql.cj.jdbc.Driver
         username: root
         password: 12341234
-        url: jdbc:mysql://10.10.10.200:3306/matrix_v2?createDatabaseIfNotExist=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
+        url: jdbc:mysql://10.10.10.200:3306/matrix_v2?createDatabaseIfNotExist=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&autoReconnect=true
     #        jdbc-url: jdbc:mysql://10.10.10.100:3306/matrix?createDatabaseIfNotExist=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
 
     rules: