feat: 优化数据库切换效果 (#6757)

Refs #6755

frontend/src/components/app-status/index.vue

@@ -107,7 +107,7 @@
 <script lang="ts" setup>
 import { CheckAppInstalled, InstalledOp } from '@/api/modules/app';
 import router from '@/routers';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import Status from '@/components/status/index.vue';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
@@ -125,21 +125,6 @@ const props = defineProps({
     },
 });
 
-watch(
-    () => props.appKey,
-    (val) => {
-        key.value = val;
-        onCheck();
-    },
-);
-watch(
-    () => props.appName,
-    (val) => {
-        name.value = val;
-        onCheck();
-    },
-);
-
 let key = ref('');
 let name = ref('');
 
@@ -250,4 +235,8 @@ onMounted(() => {
     name.value = props.appName;
     onCheck();
 });
+
+defineExpose({
+    onCheck,
+});
 </script>

frontend/src/views/database/mysql/index.vue

@@ -21,6 +21,7 @@
                     v-model:mask-show="maskShow"
                     @setting="onSetting"
                     @is-exist="checkExist"
+                    ref="appStatusRef"
                 ></AppStatus>
             </template>
 
@@ -327,6 +328,8 @@ const dashboardName = ref();
 const dashboardKey = ref();
 const dashboardVisible = ref(false);
 
+const appStatusRef = ref();
+
 const dialogPortJumpRef = ref();
 
 const data = ref();
@@ -384,6 +387,7 @@ const onSetting = async () => {
 };
 
 const changeDatabase = async () => {
+    appStatusRef.value.onCheck();
     for (const item of dbOptionsLocal.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;

frontend/src/views/database/postgresql/index.vue

@@ -19,6 +19,7 @@
                     v-model:mask-show="maskShow"
                     @setting="onSetting"
                     @is-exist="checkExist"
+                    ref="appStatusRef"
                 ></AppStatus>
             </template>
 
@@ -305,6 +306,7 @@ const postgresqlContainer = ref();
 const postgresqlStatus = ref();
 const postgresqlVersion = ref();
 
+const appStatusRef = ref();
 const dialogRef = ref();
 const onOpenDialog = async () => {
     let params = {
@@ -348,6 +350,7 @@ const onSetting = async () => {
 };
 
 const changeDatabase = async () => {
+    appStatusRef.value.onCheck();
     for (const item of dbOptionsLocal.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;

frontend/src/views/database/redis/index.vue

@@ -19,6 +19,7 @@
                     @before="onBefore"
                     @after="onAfter"
                     @setting="onSetting"
+                    ref="appStatusRef"
                 ></AppStatus>
             </template>
             <template #search v-if="!isOnSetting && currentDB">
@@ -164,6 +165,7 @@ const redisIsExist = ref(false);
 const redisStatus = ref();
 const terminalShow = ref(false);
 
+const appStatusRef = ref();
 const commandVisible = ref(false);
 
 const redisCliExist = ref();
@@ -220,6 +222,7 @@ const goRouter = async (target: string) => {
 };
 
 const changeDatabase = async () => {
+    appStatusRef.value.onCheck();
     for (const item of dbOptionsLocal.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;