fix: 数据库操作增加一些 loading

backend/app/api/v1/terminal.go

@@ -90,6 +90,12 @@ func (b *BaseApi) RedisWsSsh(c *gin.Context) {
 		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
 		return
 	}
+	redisConf, err := redisService.LoadConf()
+	if err != nil {
+		global.LOG.Errorf("load redis container failed, err: %v", err)
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
 
 	wsConn, err := upGrader.Upgrade(c.Writer, c.Request, nil)
 	if err != nil {
@@ -97,12 +103,6 @@ func (b *BaseApi) RedisWsSsh(c *gin.Context) {
 		return
 	}
 	defer wsConn.Close()
-
-	redisConf, err := redisService.LoadConf()
-	if err != nil {
-		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
-		return
-	}
 	auth := ""
 	if len(redisConf.Requirepass) != 0 {
 		auth = fmt.Sprintf("-a %s --no-auth-warning", redisConf.Requirepass)

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-loading="loading">
         <el-drawer v-model="backupVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
             <template #header>
                 <DrawerHeader :header="$t('database.backup')" :resource="dbName" :back="handleClose" />
@@ -42,6 +42,7 @@ import { Backup } from '@/api/interface/backup';
 import { MsgSuccess } from '@/utils/message';
 
 const selects = ref<any>([]);
+const loading = ref();
 
 const data = ref();
 const paginationConfig = reactive({
@@ -85,9 +86,16 @@ const onBackup = async () => {
         mysqlName: mysqlName.value,
         dbName: dbName.value,
     };
-    await backup(params);
+    loading.value = true;
-    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+    await backup(params)
-    search();
+        .then(() => {
+            loading.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            search();
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const onRecover = async (row: Backup.RecordInfo) => {
@@ -96,8 +104,15 @@ const onRecover = async (row: Backup.RecordInfo) => {
         dbName: dbName.value,
         backupName: row.fileDir + '/' + row.fileName,
     };
-    await recover(params);
+    loading.value = true;
-    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+    await recover(params)
+        .then(() => {
+            loading.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const onDownload = async (row: Backup.RecordInfo) => {

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

@@ -1,6 +1,6 @@
 <template>
     <div v-show="onSetting">
-        <LayoutContent :title="'MySQL ' + $t('database.setting')" :reload="true">
+        <LayoutContent :title="'MySQL ' + $t('database.setting')" :reload="true" v-loading="loading">
             <template #buttons>
                 <el-button type="primary" :plain="activeName !== 'conf'" @click="activeName = 'conf'">
                     {{ $t('database.confChange') }}

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-loading="loading">
         <el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-position="top">
             <el-row>
                 <el-col :span="1"><br /></el-col>

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-loading="loading">
         <el-drawer v-model="upVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
             <template #header>
                 <DrawerHeader :header="$t('commons.button.import')" :back="handleClose" />
@@ -14,9 +14,6 @@
                 <template #trigger>
                     <el-button type="primary" plain>{{ $t('database.selectFile') }}</el-button>
                 </template>
-                <el-button style="margin-left: 10px" icon="Upload" @click="onSubmit">
-                    {{ $t('commons.button.upload') }}
-                </el-button>
             </el-upload>
             <div style="margin-left: 10px">
                 <span class="input-help">{{ $t('database.supportUpType') }}</span>
@@ -24,6 +21,9 @@
                     {{ $t('database.zipFormat') }}
                 </span>
             </div>
+            <el-button style="margin-top: 10px" v-if="uploaderFiles.length === 1" icon="Upload" @click="onSubmit">
+                {{ $t('commons.button.upload') }}
+            </el-button>
             <el-divider />
             <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data">
                 <template #toolbar>
@@ -74,6 +74,7 @@ import { BatchDeleteFile, GetFilesList, UploadFileData } from '@/api/modules/fil
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
 
+const loading = ref();
 const selects = ref<any>([]);
 const baseDir = ref();
 
@@ -120,8 +121,15 @@ const onRecover = async (row: File.File) => {
         fileDir: baseDir.value,
         fileName: row.name,
     };
-    await recoverByUpload(params);
+    loading.value = true;
-    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+    await recoverByUpload(params)
+        .then(() => {
+            loading.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const uploaderFiles = ref<UploadFiles>([]);

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

@@ -56,7 +56,7 @@ import Setting from '@/views/database/redis/setting/index.vue';
 import Password from '@/views/database/redis/password/index.vue';
 import Terminal from '@/views/database/redis/terminal/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
-import { nextTick, ref } from 'vue';
+import { nextTick, onBeforeUnmount, ref } from 'vue';
 import { App } from '@/api/interface/app';
 import { GetAppPort } from '@/api/modules/app';
 import router from '@/routers';
@@ -131,4 +131,7 @@ const onBefore = () => {
     closeTerminal(true);
     loading.value = true;
 };
+onBeforeUnmount(() => {
+    closeTerminal(false);
+});
 </script>

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

@@ -1,6 +1,6 @@
 <template>
     <div v-show="settingShow">
-        <LayoutContent :title="'Redis ' + $t('database.setting')" :reload="true">
+        <LayoutContent :title="'Redis ' + $t('database.setting')" :reload="true" v-loading="loading">
             <template #buttons>
                 <el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
                     {{ $t('database.confChange') }}

frontend/src/views/host/terminal/terminal/terminal.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted, nextTick } from 'vue';
+import { ref, nextTick, onBeforeUnmount } from 'vue';
 import { Terminal } from 'xterm';
 import { AttachAddon } from 'xterm-addon-attach';
 import { Base64 } from 'js-base64';
@@ -182,7 +182,7 @@ defineExpose({
     onSendMsg,
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
     onClose();
 });
 </script>

frontend/vite.config.ts

@@ -37,7 +37,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
             open: viteEnv.VITE_OPEN,
             proxy: {
                 '/api/v1': {
-                    target: 'http://172.16.10.181:9999/', // http://172.16.10.181:9999
+                    target: 'http://localhost:9999/',
                     changeOrigin: true,
                 },
             },