pref: 优化远程数据库删除提示信息 (#5824)

Refs #5819 #5818

backend/utils/common/common.go

@@ -230,13 +230,17 @@ func RemoveRepeatElement(a interface{}) (ret []interface{}) {
 }
 
 func LoadSizeUnit(value float64) string {
-	if value > 1048576 {
+	val := int64(value)
-		return fmt.Sprintf("%vM", value/1048576)
+	if val%1024 != 0 {
+		return fmt.Sprintf("%v", val)
 	}
-	if value > 1024 {
+	if val > 1048576 {
-		return fmt.Sprintf("%vK", value/1024)
+		return fmt.Sprintf("%vM", val/1048576)
 	}
-	return fmt.Sprintf("%v", value)
+	if val > 1024 {
+		return fmt.Sprintf("%vK", val/1024)
+	}
+	return fmt.Sprintf("%v", val)
 }
 
 func LoadSizeUnit2F(value float64) string {

frontend/src/lang/modules/en.ts

@@ -437,6 +437,11 @@ const message = {
         remote: 'Remote',
         remoteDB: 'Remote DB',
         createRemoteDB: 'Create Remote Server',
+        unBindRemoteDB: 'Unbind remote server',
+        unBindForce: 'Force unbind',
+        unBindForceHelper: 'Ignore all errors during the unbinding process to ensure the final operation is successful',
+        unBindRemoteHelper:
+            'Unbinding the remote database will only remove the binding relationship and will not directly delete the remote database',
         editRemoteDB: 'Edit Remote Server',
         localDB: 'Local DB',
         address: 'DB address',

frontend/src/lang/modules/tw.ts

@@ -424,6 +424,10 @@ const message = {
         remote: '遠程',
         remoteDB: '遠程服務器',
         createRemoteDB: '添加遠程服務器',
+        unBindRemoteDB: '解綁遠程服務器',
+        unBindForce: '強制解綁',
+        unBindForceHelper: '忽略解綁過程中的所有錯誤，確保最終操作成功',
+        unBindRemoteHelper: '解綁遠程數據庫只會刪除綁定關係，不會直接刪除遠程數據庫',
         editRemoteDB: '編輯遠程服務器',
         localDB: '本地數據庫',
         address: '數據庫地址',

frontend/src/lang/modules/zh.ts

@@ -424,6 +424,10 @@ const message = {
         remote: '远程',
         remoteDB: '远程服务器',
         createRemoteDB: '添加远程服务器',
+        unBindRemoteDB: '解绑远程服务器',
+        unBindForce: '强制解绑',
+        unBindForceHelper: '忽略解绑过程中的所有错误，确保最终操作成功',
+        unBindRemoteHelper: '解绑远程数据库只会删除绑定关系，不会直接删除远程数据库',
         editRemoteDB: '编辑远程服务器',
         localDB: '本地数据库',
         address: '数据库地址',

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

@@ -1,15 +1,15 @@
 <template>
     <el-dialog
         v-model="dialogVisible"
-        :title="$t('commons.button.delete') + ' - ' + deleteMysqlReq.database"
+        :title="$t('database.unBindRemoteDB') + ' - ' + deleteMysqlReq.database"
         width="30%"
         :close-on-click-modal="false"
     >
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
-                <el-checkbox v-model="deleteMysqlReq.forceDelete" :label="$t('app.forceDelete')" />
+                <el-checkbox v-model="deleteMysqlReq.forceDelete" :label="$t('database.unBindForce')" />
                 <span class="input-help">
-                    {{ $t('app.forceDeleteHelper') }}
+                    {{ $t('database.unBindForceHelper') }}
                 </span>
             </el-form-item>
             <el-form-item>
@@ -18,25 +18,15 @@
                     {{ $t('database.deleteBackupHelper') }}
                 </span>
             </el-form-item>
-            <el-form-item>
+
-                <div>
+            <span style="font-size: 12px">{{ $t('database.unBindRemoteHelper') }}</span>
-                    <span style="font-size: 12px">{{ $t('database.delete') }}</span>
-                    <span style="font-size: 12px; color: red; font-weight: 500">{{ deleteMysqlReq.database }}</span>
-                    <span style="font-size: 12px">{{ $t('database.deleteHelper') }}</span>
-                </div>
-                <el-input v-model="delMysqlInfo" :placeholder="deleteMysqlReq.database"></el-input>
-            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="dialogVisible = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button
+                <el-button type="primary" @click="submit" :disabled="loading">
-                    type="primary"
-                    @click="submit"
-                    :disabled="delMysqlInfo != deleteMysqlReq.database || loading"
-                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -58,7 +48,6 @@ let deleteMysqlReq = ref({
 });
 let dialogVisible = ref(false);
 let loading = ref(false);
-let delMysqlInfo = ref('');
 
 const deleteForm = ref<FormInstance>();
 
@@ -70,7 +59,6 @@ interface DialogProps {
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const acceptParams = async (prop: DialogProps) => {
-    delMysqlInfo.value = '';
     deleteMysqlReq.value = {
         id: prop.id,
         database: prop.database,

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

@@ -1,15 +1,15 @@
 <template>
     <el-dialog
         v-model="dialogVisible"
-        :title="$t('commons.button.delete') + ' - ' + deleteReq.database"
+        :title="$t('database.unBindRemoteDB') + ' - ' + deleteReq.database"
         width="30%"
         :close-on-click-modal="false"
     >
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
-                <el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
+                <el-checkbox v-model="deleteReq.forceDelete" :label="$t('database.unBindForce')" />
                 <span class="input-help">
-                    {{ $t('app.forceDeleteHelper') }}
+                    {{ $t('database.unBindForceHelper') }}
                 </span>
             </el-form-item>
             <el-form-item>
@@ -18,21 +18,15 @@
                     {{ $t('database.deleteBackupHelper') }}
                 </span>
             </el-form-item>
-            <el-form-item>
+
-                <div>
+            <span style="font-size: 12px">{{ $t('database.unBindRemoteHelper') }}</span>
-                    <span style="font-size: 12px">{{ $t('database.delete') }}</span>
-                    <span style="font-size: 12px; color: red; font-weight: 500">{{ deleteReq.database }}</span>
-                    <span style="font-size: 12px">{{ $t('database.deleteHelper') }}</span>
-                </div>
-                <el-input v-model="deleteInfo" :placeholder="deleteReq.database"></el-input>
-            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="dialogVisible = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="submit" :disabled="deleteInfo != deleteReq.database || loading">
+                <el-button type="primary" @click="submit" :disabled="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -54,7 +48,6 @@ let deleteReq = ref({
 });
 let dialogVisible = ref(false);
 let loading = ref(false);
-let deleteInfo = ref('');
 
 const deleteForm = ref<FormInstance>();
 
@@ -66,7 +59,6 @@ interface DialogProps {
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const acceptParams = async (prop: DialogProps) => {
-    deleteInfo.value = '';
     deleteReq.value = {
         id: prop.id,
         database: prop.database,

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

@@ -1,15 +1,15 @@
 <template>
     <el-dialog
         v-model="dialogVisible"
-        :title="$t('commons.button.delete') + ' - ' + deleteMysqlReq.database"
+        :title="$t('database.unBindRemoteDB') + ' - ' + deleteMysqlReq.database"
         width="30%"
         :close-on-click-modal="false"
     >
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
-                <el-checkbox v-model="deleteMysqlReq.forceDelete" :label="$t('app.forceDelete')" />
+                <el-checkbox v-model="deleteMysqlReq.forceDelete" :label="$t('database.unBindForce')" />
                 <span class="input-help">
-                    {{ $t('app.forceDeleteHelper') }}
+                    {{ $t('database.unBindForceHelper') }}
                 </span>
             </el-form-item>
             <el-form-item>
@@ -18,25 +18,15 @@
                     {{ $t('database.deleteBackupHelper') }}
                 </span>
             </el-form-item>
-            <el-form-item>
+
-                <div>
+            <span style="font-size: 12px">{{ $t('database.unBindRemoteHelper') }}</span>
-                    <span style="font-size: 12px">{{ $t('database.delete') }}</span>
-                    <span style="font-size: 12px; color: red; font-weight: 500">{{ deleteMysqlReq.database }}</span>
-                    <span style="font-size: 12px">{{ $t('database.deleteHelper') }}</span>
-                </div>
-                <el-input v-model="delMysqlInfo" :placeholder="deleteMysqlReq.database"></el-input>
-            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="dialogVisible = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button
+                <el-button type="primary" @click="submit" :disabled="loading">
-                    type="primary"
-                    @click="submit"
-                    :disabled="delMysqlInfo != deleteMysqlReq.database || loading"
-                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -58,7 +48,6 @@ let deleteMysqlReq = ref({
 });
 let dialogVisible = ref(false);
 let loading = ref(false);
-let delMysqlInfo = ref('');
 
 const deleteForm = ref<FormInstance>();
 
@@ -70,7 +59,6 @@ interface DialogProps {
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const acceptParams = async (prop: DialogProps) => {
-    delMysqlInfo.value = '';
     deleteMysqlReq.value = {
         id: prop.id,
         database: prop.database,