From 7bed9df9287898b7e0dc82a16428fe7b39f78936 Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Sat, 15 Jul 2023 17:19:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/wails/frontend/src/App.vue                |  4 +-
 .../src/components/scaffold/TabScaffold.vue   | 50 +++++++++++--------
 app/wails/frontend/src/router/router.js       |  7 +--
 .../frontend/src/utils/fixed/el-tablev2.js    | 10 ++++
 .../src/views/tabs/environment/index.vue      |  9 +++-
 .../src/main/resources/application.yaml       |  2 +-
 6 files changed, 54 insertions(+), 28 deletions(-)
 create mode 100644 app/wails/frontend/src/utils/fixed/el-tablev2.js

diff --git a/app/wails/frontend/src/App.vue b/app/wails/frontend/src/App.vue
index 52c241d..fc8bab6 100644
--- a/app/wails/frontend/src/App.vue
+++ b/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">
-                        <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
+                    <div style="height: 100vh" class="overflow-auto">
+                        <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"/>
diff --git a/app/wails/frontend/src/components/scaffold/TabScaffold.vue b/app/wails/frontend/src/components/scaffold/TabScaffold.vue
index b12005a..9f3d2fe 100644
--- a/app/wails/frontend/src/components/scaffold/TabScaffold.vue
+++ b/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"
-            :key="item.name"
-            :label="item.title"
-            :closable="item.closable == null || item.closable"
-            :name="item.name">
-            <router-view v-slot="{ Component, route  }">
-                <transition name="fade" mode="out-in">
-                    <div class="h-full">
-                        <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-tab-pane
+                v-for="item in tabs"
+                :key="item.name"
+                :label="item.title"
+                :closable="item.closable == null || item.closable"
+                :name="item.name">
+                <router-view v-slot="{ Component, route  }">
+                    <transition name="fade" mode="out-in">
+                        <el-scrollbar height="100%" class="scroll-bar">
+                            <div class="h-full">
+                                <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>
+                        </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) {
-        height: 100%;
+        & .el-tab-pane {
+            height: 100%;
+            overflow: auto;
+
+            & .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
+                height: 100%;
+            }
+        }
     }
 }
 </style>
diff --git a/app/wails/frontend/src/router/router.js b/app/wails/frontend/src/router/router.js
index b6d8acf..a547b72 100644
--- a/app/wails/frontend/src/router/router.js
+++ b/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: "/",
                 }
             },
             {
diff --git a/app/wails/frontend/src/utils/fixed/el-tablev2.js b/app/wails/frontend/src/utils/fixed/el-tablev2.js
new file mode 100644
index 0000000..74df67f
--- /dev/null
+++ b/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)
+    })
+}
diff --git a/app/wails/frontend/src/views/tabs/environment/index.vue b/app/wails/frontend/src/views/tabs/environment/index.vue
index 776cf2e..ff95e9d 100644
--- a/app/wails/frontend/src/views/tabs/environment/index.vue
+++ b/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>
diff --git a/backend/java/sk-matrix-service/starter/src/main/resources/application.yaml b/backend/java/sk-matrix-service/starter/src/main/resources/application.yaml
index 308e84d..9dc33e2 100644
--- a/backend/java/sk-matrix-service/starter/src/main/resources/application.yaml
+++ b/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: