fix: mysql 数据库连接信息样式调整

Author: ssongliu

backend/app/repo/databse_mysql.go

@@ -20,7 +20,7 @@ type IMysqlRepo interface {
 	Delete(ctx context.Context, opts ...DBOption) error
 	Update(id uint, vars map[string]interface{}) error
 	UpdateDatabaseInfo(id uint, vars map[string]interface{}) error
-	DeleteAll(ctx context.Context) error
+	DeleteLocal(ctx context.Context) error
 }
 
 func NewIMysqlRepo() IMysqlRepo {
@@ -67,8 +67,8 @@ func (u *MysqlRepo) Delete(ctx context.Context, opts ...DBOption) error {
 	return getTx(ctx, opts...).Delete(&model.DatabaseMysql{}).Error
 }
 
-func (u *MysqlRepo) DeleteAll(ctx context.Context) error {
-	return getTx(ctx).Where("1 = 1").Delete(&model.DatabaseMysql{}).Error
+func (u *MysqlRepo) DeleteLocal(ctx context.Context) error {
+	return getTx(ctx).Where("`from` = ?", "local").Delete(&model.DatabaseMysql{}).Error
 }
 
 func (u *MysqlRepo) Update(id uint, vars map[string]interface{}) error {

backend/app/service/app_utils.go

@@ -200,7 +200,7 @@ func deleteAppInstall(install model.AppInstall, deleteBackup bool, forceDelete b
 	_ = backupRepo.DeleteRecord(ctx, commonRepo.WithByType("app"), commonRepo.WithByName(install.App.Key), backupRepo.WithByDetailName(install.Name))
 	_ = backupRepo.DeleteRecord(ctx, commonRepo.WithByType(install.App.Key))
 	if install.App.Key == constant.AppMysql {
-		_ = mysqlRepo.DeleteAll(ctx)
+		_ = mysqlRepo.DeleteLocal(ctx)
 	}
 	uploadDir := path.Join(global.CONF.System.BaseDir, fmt.Sprintf("1panel/uploads/app/%s/%s", install.App.Key, install.Name))
 	if _, err := os.Stat(uploadDir); err == nil {

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

@@ -16,7 +16,7 @@
                         </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.remoteConn')">
-                        <el-tag>{{ $t('database.localIP') + ':' + form.port }}</el-tag>
+                        <el-tag>{{ form.systemIP + ':' + form.port }}</el-tag>
                         <span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
                     </el-form-item>
 
@@ -81,13 +81,15 @@ import { GetAppConnInfo } from '@/api/modules/app';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/util';
+import { getSettingInfo } from '@/api/modules/setting';
 import useClipboard from 'vue-clipboard3';
 const { toClipboard } = useClipboard();
 
 const loading = ref(false);
 
 const dialogVisiable = ref(false);
 const form = reactive({
+    systemIP: '',
     password: '',
     serviceName: '',
     privilege: false,
@@ -112,11 +114,10 @@ interface DialogProps {
 const acceptParams = (param: DialogProps): void => {
     form.password = '';
     form.from = param.from;
-    if (form.from !== 'local') {
-        loadRemoteInfo();
+    if (form.from === 'local') {
+        loadAccess();
     }
     loadPassword();
-    loadAccess();
     dialogVisiable.value = true;
 };
 
@@ -142,18 +143,26 @@ const loadAccess = async () => {
     form.privilege = res.data;
 };
 
-const loadRemoteInfo = async () => {
-    const res = await getRemoteDB(form.from);
-    form.remoteIP = res.data.address;
-    form.username = res.data.username;
-    form.password = res.data.password;
+const loadSystemIP = async () => {
+    const res = await getSettingInfo();
+    form.systemIP = res.data.systemIP || i18n.global.t('database.localIP');
 };
 
 const loadPassword = async () => {
-    const res = await GetAppConnInfo('mysql');
+    if (form.from === 'local') {
+        const res = await GetAppConnInfo('mysql');
+        form.password = res.data.password || '';
+        form.port = res.data.port || 3306;
+        form.serviceName = res.data.serviceName || '';
+        loadSystemIP();
+        return;
+    }
+    const res = await getRemoteDB(form.from);
     form.password = res.data.password || '';
     form.port = res.data.port || 3306;
-    form.serviceName = res.data.serviceName || '';
+    form.username = res.data.username;
+    form.password = res.data.password;
+    form.remoteIP = res.data.address;
 };
 
 const onSubmit = async () => {

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

@@ -38,7 +38,7 @@
                         >
                             {{ $t('database.create') }}
                         </el-button>
-                        <el-button @click="onChangeConn" type="primary" plain>
+                        <el-button :disabled="!mysqlIsExist && isLocal()" @click="onChangeConn" type="primary" plain>
                             {{ $t('database.databaseConnInfo') }}
                         </el-button>
                         <el-button