fix: 数据库密码修改同步修改绑定应用

backend/app/api/v1/helper/helper.go

@@ -40,9 +40,9 @@ func ErrorWithDetail(ctx *gin.Context, code int, msgKey string, err error) {
 	if msgKey == constant.ErrTypeInternalServer {
 		switch {
 		case errors.Is(err, constant.ErrRecordExist):
-			res.Message = i18n.GetMsgWithMap("ErrRecordExist", map[string]interface{}{"detail": err})
+			res.Message = i18n.GetMsgWithMap("ErrRecordExist", nil)
 		case errors.Is(constant.ErrRecordNotFound, err):
-			res.Message = i18n.GetMsgWithMap("ErrRecordNotFound", map[string]interface{}{"detail": err})
+			res.Message = i18n.GetMsgWithMap("ErrRecordNotFound", nil)
 		case errors.Is(constant.ErrStructTransform, err):
 			res.Message = i18n.GetMsgWithMap("ErrStructTransform", map[string]interface{}{"detail": err})
 		case errors.Is(constant.ErrCaptchaCode, err):

backend/app/repo/app_install.go

@@ -3,6 +3,7 @@ package repo
 import (
 	"context"
 	"encoding/json"
+
 	"github.com/1Panel-dev/1Panel/backend/app/model"
 	"github.com/1Panel-dev/1Panel/backend/global"
 	"gorm.io/gorm"
@@ -116,7 +117,7 @@ type RootInfo struct {
 	Version       string `json:"version"`
 }
 
-func (a *AppInstallRepo) LoadBaseInfoByKey(key string) (*RootInfo, error) {
+func (a *AppInstallRepo) LoadBaseInfo(key string, name string) (*RootInfo, error) {
 	var (
 		app        model.App
 		appInstall model.AppInstall
@@ -125,9 +126,15 @@ func (a *AppInstallRepo) LoadBaseInfoByKey(key string) (*RootInfo, error) {
 	if err := global.DB.Where("key = ?", key).First(&app).Error; err != nil {
 		return nil, err
 	}
+	if len(name) == 0 {
 		if err := global.DB.Where("app_id = ?", app.ID).First(&appInstall).Error; err != nil {
 			return nil, err
 		}
+	} else {
+		if err := global.DB.Where("app_id = ? AND name = ?", app.ID, name).First(&appInstall).Error; err != nil {
+			return nil, err
+		}
+	}
 	envMap := make(map[string]interface{})
 	if err := json.Unmarshal([]byte(appInstall.Env), &envMap); err != nil {
 		return nil, err

backend/app/service/app_install.go

@@ -82,7 +82,7 @@ func (a AppInstallService) CheckExist(key string) (*response.AppInstalledCheck,
 }
 
 func (a AppInstallService) LoadPort(key string) (int64, error) {
-	app, err := appInstallRepo.LoadBaseInfoByKey(key)
+	app, err := appInstallRepo.LoadBaseInfo(key, "")
 	if err != nil {
 		return int64(0), nil
 	}
@@ -90,7 +90,7 @@ func (a AppInstallService) LoadPort(key string) (int64, error) {
 }
 
 func (a AppInstallService) LoadPassword(key string) (string, error) {
-	app, err := appInstallRepo.LoadBaseInfoByKey(key)
+	app, err := appInstallRepo.LoadBaseInfo(key, "")
 	if err != nil {
 		return "", nil
 	}
@@ -272,7 +272,7 @@ func (a AppInstallService) GetUpdateVersions(installId uint) ([]dto.AppVersion,
 }
 
 func (a AppInstallService) ChangeAppPort(req request.PortUpdate) error {
-	return updateInstallInfoInDB(req.Key, "port", true, strconv.FormatInt(req.Port, 10))
+	return updateInstallInfoInDB(req.Key, "", "port", true, strconv.FormatInt(req.Port, 10))
 }
 
 func (a AppInstallService) DeleteCheck(installId uint) ([]dto.AppResource, error) {
@@ -444,11 +444,11 @@ func syncById(installId uint) error {
 	return appInstallRepo.Save(&appInstall)
 }
 
-func updateInstallInfoInDB(appKey, param string, isRestart bool, value interface{}) error {
+func updateInstallInfoInDB(appKey, appName, param string, isRestart bool, value interface{}) error {
 	if param != "password" && param != "port" {
 		return nil
 	}
-	appInstall, err := appInstallRepo.LoadBaseInfoByKey(appKey)
+	appInstall, err := appInstallRepo.LoadBaseInfo(appKey, appName)
 	if err != nil {
 		return nil
 	}

backend/app/service/cornjob.go

@@ -137,7 +137,7 @@ func (u *CronjobService) Download(down dto.CronjobDownload) (string, error) {
 	case "website":
 		return fmt.Sprintf("%v/website/%s/website_%s_%s.tar.gz", varMap["dir"], cronjob.Website, cronjob.Website, record.StartTime.Format("20060102150405")), nil
 	case "database":
-		mysqlInfo, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+		mysqlInfo, err := appInstallRepo.LoadBaseInfo("mysql", "")
 		if err != nil {
 			return "", fmt.Errorf("load mysqlInfo failed, err: %v", err)
 		}

backend/app/service/cronjob_helper.go

@@ -93,7 +93,7 @@ func (u *CronjobService) HandleBackup(cronjob *model.Cronjob, startTime time.Tim
 
 	switch cronjob.Type {
 	case "database":
-		app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+		app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 		if err != nil {
 			return "", err
 		}

backend/app/service/database_mysql.go

@@ -67,7 +67,7 @@ func (u *MysqlService) SearchWithPage(search dto.PageInfo) (int64, interface{},
 }
 
 func (u *MysqlService) RecoverByUpload(req dto.UploadRecover) error {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -157,7 +157,7 @@ func (u *MysqlService) Create(mysqlDto dto.MysqlDBCreate) error {
 	if mysqlDto.Username == "root" {
 		return errors.New("Cannot set root as user name")
 	}
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -204,7 +204,7 @@ func (u *MysqlService) Backup(db dto.BackupDB) error {
 }
 
 func (u *MysqlService) Recover(db dto.RecoverDB) error {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -230,7 +230,7 @@ func (u *MysqlService) Recover(db dto.RecoverDB) error {
 
 func (u *MysqlService) DeleteCheck(id uint) ([]string, error) {
 	var appInUsed []string
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return appInUsed, err
 	}
@@ -251,7 +251,7 @@ func (u *MysqlService) DeleteCheck(id uint) ([]string, error) {
 }
 
 func (u *MysqlService) Delete(id uint) error {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -298,7 +298,7 @@ func (u *MysqlService) ChangePassword(info dto.ChangeDBInfo) error {
 			return err
 		}
 	}
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -308,6 +308,20 @@ func (u *MysqlService) ChangePassword(info dto.ChangeDBInfo) error {
 		passwordChangeCMD = fmt.Sprintf("ALTER USER '%s'@'%s' IDENTIFIED WITH mysql_native_password BY '%s';", mysql.Username, mysql.Permission, info.Value)
 	}
 	if info.ID != 0 {
+		appRess, _ := appInstallResourceRepo.GetBy(appInstallResourceRepo.WithLinkId(app.ID), appInstallResourceRepo.WithResourceId(mysql.ID))
+		for _, appRes := range appRess {
+			appInstall, err := appInstallRepo.GetFirst(commonRepo.WithByID(appRes.AppInstallId))
+			if err != nil {
+				return err
+			}
+			appModel, err := appRepo.GetFirst(commonRepo.WithByID(appInstall.AppId))
+			if err != nil {
+				return err
+			}
+			if err := updateInstallInfoInDB(appModel.Key, appInstall.Name, "password", true, info.Value); err != nil {
+				return err
+			}
+		}
 		if err := excuteSql(app.ContainerName, app.Password, passwordChangeCMD); err != nil {
 			return err
 		}
@@ -330,10 +344,10 @@ func (u *MysqlService) ChangePassword(info dto.ChangeDBInfo) error {
 			}
 		}
 	}
-	if err := updateInstallInfoInDB("mysql", "password", false, info.Value); err != nil {
+	if err := updateInstallInfoInDB("mysql", "", "password", false, info.Value); err != nil {
 		return err
 	}
-	if err := updateInstallInfoInDB("phpmyadmin", "password", true, info.Value); err != nil {
+	if err := updateInstallInfoInDB("phpmyadmin", "", "password", true, info.Value); err != nil {
 		return err
 	}
 	return nil
@@ -350,7 +364,7 @@ func (u *MysqlService) ChangeAccess(info dto.ChangeDBInfo) error {
 			return err
 		}
 	}
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -392,7 +406,7 @@ func (u *MysqlService) ChangeAccess(info dto.ChangeDBInfo) error {
 }
 
 func (u *MysqlService) UpdateConfByFile(info dto.MysqlConfUpdateByFile) error {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -412,7 +426,7 @@ func (u *MysqlService) UpdateConfByFile(info dto.MysqlConfUpdateByFile) error {
 }
 
 func (u *MysqlService) UpdateVariables(updatas []dto.MysqlVariablesUpdate) error {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}
@@ -458,7 +472,7 @@ func (u *MysqlService) UpdateVariables(updatas []dto.MysqlVariablesUpdate) error
 
 func (u *MysqlService) LoadBaseInfo() (*dto.DBBaseInfo, error) {
 	var data dto.DBBaseInfo
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return nil, err
 	}
@@ -470,7 +484,7 @@ func (u *MysqlService) LoadBaseInfo() (*dto.DBBaseInfo, error) {
 }
 
 func (u *MysqlService) LoadRemoteAccess() (bool, error) {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return false, err
 	}
@@ -488,7 +502,7 @@ func (u *MysqlService) LoadRemoteAccess() (bool, error) {
 }
 
 func (u *MysqlService) LoadVariables() (*dto.MysqlVariables, error) {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return nil, err
 	}
@@ -506,7 +520,7 @@ func (u *MysqlService) LoadVariables() (*dto.MysqlVariables, error) {
 }
 
 func (u *MysqlService) LoadStatus() (*dto.MysqlStatus, error) {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return nil, err
 	}
@@ -590,7 +604,7 @@ func excuteSql(containerName, password, command string) error {
 }
 
 func backupMysql(backupType, baseDir, backupDir, mysqlName, dbName, fileName string) error {
-	app, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	app, err := appInstallRepo.LoadBaseInfo("mysql", "")
 	if err != nil {
 		return err
 	}

backend/app/service/database_redis.go

@@ -38,7 +38,7 @@ func NewIRedisService() IRedisService {
 }
 
 func (u *RedisService) UpdateConf(req dto.RedisConfUpdate) error {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return err
 	}
@@ -63,10 +63,10 @@ func (u *RedisService) UpdateConf(req dto.RedisConfUpdate) error {
 }
 
 func (u *RedisService) ChangePassword(req dto.ChangeDBInfo) error {
-	if err := updateInstallInfoInDB("redis", "password", true, req.Value); err != nil {
+	if err := updateInstallInfoInDB("redis", "", "password", true, req.Value); err != nil {
 		return err
 	}
-	if err := updateInstallInfoInDB("redis-commander", "password", true, req.Value); err != nil {
+	if err := updateInstallInfoInDB("redis-commander", "", "password", true, req.Value); err != nil {
 		return err
 	}
 
@@ -74,7 +74,7 @@ func (u *RedisService) ChangePassword(req dto.ChangeDBInfo) error {
 }
 
 func (u *RedisService) UpdatePersistenceConf(req dto.RedisConfPersistenceUpdate) error {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return err
 	}
@@ -101,7 +101,7 @@ func (u *RedisService) UpdatePersistenceConf(req dto.RedisConfPersistenceUpdate)
 }
 
 func (u *RedisService) LoadStatus() (*dto.RedisStatus, error) {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return nil, err
 	}
@@ -129,7 +129,7 @@ func (u *RedisService) LoadStatus() (*dto.RedisStatus, error) {
 }
 
 func (u *RedisService) LoadConf() (*dto.RedisConf, error) {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return nil, err
 	}
@@ -146,7 +146,7 @@ func (u *RedisService) LoadConf() (*dto.RedisConf, error) {
 }
 
 func (u *RedisService) LoadPersistenceConf() (*dto.RedisPersistence, error) {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return nil, err
 	}
@@ -165,7 +165,7 @@ func (u *RedisService) LoadPersistenceConf() (*dto.RedisPersistence, error) {
 }
 
 func (u *RedisService) Backup() error {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return err
 	}
@@ -210,7 +210,7 @@ func (u *RedisService) Backup() error {
 }
 
 func (u *RedisService) Recover(req dto.RedisBackupRecover) error {
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return err
 	}
@@ -250,7 +250,7 @@ func (u *RedisService) SearchBackupListWithPage(req dto.PageInfo) (int64, interf
 		list      []dto.DatabaseFileRecords
 		backDatas []dto.DatabaseFileRecords
 	)
-	redisInfo, err := appInstallRepo.LoadBaseInfoByKey("redis")
+	redisInfo, err := appInstallRepo.LoadBaseInfo("redis", "")
 	if err != nil {
 		return 0, nil, err
 	}

backend/app/service/website_utils.go

@@ -4,6 +4,13 @@ import (
 	"bufio"
 	"encoding/json"
 	"fmt"
+	"io"
+	"os"
+	"os/exec"
+	"path"
+	"strconv"
+	"strings"
+
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/app/model"
 	"github.com/1Panel-dev/1Panel/backend/constant"
@@ -16,12 +23,6 @@ import (
 	"github.com/1Panel-dev/1Panel/cmd/server/nginx_conf"
 	"github.com/pkg/errors"
 	"gorm.io/gorm"
-	"io"
-	"os"
-	"os/exec"
-	"path"
-	"strconv"
-	"strings"
 )
 
 func getDomain(domainStr string, websiteID uint) (model.WebsiteDomain, error) {
@@ -397,7 +398,7 @@ func handleWebsiteBackup(backupType, baseDir, backupDir, domain, backupName stri
 		return err
 	}
 
-	nginxInfo, err := appInstallRepo.LoadBaseInfoByKey(constant.AppNginx)
+	nginxInfo, err := appInstallRepo.LoadBaseInfo(constant.AppNginx, "")
 	if err != nil {
 		return err
 	}
@@ -451,7 +452,7 @@ func handleWebsiteBackup(backupType, baseDir, backupDir, domain, backupName stri
 }
 
 func handleWebsiteRecover(website *model.Website, fileDir string) error {
-	nginxInfo, err := appInstallRepo.LoadBaseInfoByKey(constant.AppNginx)
+	nginxInfo, err := appInstallRepo.LoadBaseInfo(constant.AppNginx, "")
 	if err != nil {
 		return err
 	}
@@ -493,7 +494,7 @@ func handleWebsiteRecover(website *model.Website, fileDir string) error {
 }
 
 func mysqlOpration(website *model.Website, operation, filePath string) error {
-	mysqlInfo, err := appInstallRepo.LoadBaseInfoByKey("mysql")
+	mysqlInfo, err := appInstallRepo.LoadBaseInfo(constant.AppNginx, "")
 	if err != nil {
 		return err
 	}

backend/i18n/lang/en.yaml

@@ -4,8 +4,8 @@ ErrTokenParse: "Token generation error: {{ .detail }}"
 ErrTokenTimeOut: "Login information is out of date: {{ .detail }}"
 ErrInitialPassword: "Initial password error"
 ErrInternalServer: "Service internal error: {{ .detail }}"
-ErrRecordExist: "Record already exists: {{ .detail }}"
-ErrRecordNotFound: "Records not found: {{ .detail }}"
+ErrRecordExist: "Record already exists"
+ErrRecordNotFound: "Records not found"
 ErrStructTransform: "Type conversion failure: {{ .detail }}"
 ErrNotLogin: "User is not Login: {{ .detail }}"
 ErrNotSafety: "The login status of the current user is unsafe: {{ .detail }}"

backend/i18n/lang/zh.yaml

@@ -4,8 +4,8 @@ ErrTokenParse: "Token 生成错误: {{ .detail }}"
 ErrTokenTimeOut: "登陆信息已过期: {{ .detail }}"
 ErrInitialPassword: "原密码错误"
 ErrInternalServer: "服务内部错误: {{ .detail }}"
-ErrRecordExist: "记录已存在: {{ .detail }}"
-ErrRecordNotFound: "记录未能找到: {{ .detail }}"
+ErrRecordExist: "记录已存在"
+ErrRecordNotFound: "记录未能找到"
 ErrStructTransform: "类型转换失败: {{ .detail }}"
 ErrNotLogin: "用户未登录: {{ .detail }}"
 ErrNotSafety: "当前用户登录状态不安全: {{ .detail }}"

frontend/src/lang/modules/en.ts

@@ -239,6 +239,8 @@ export default {
         setting: 'Mysql Settings',
         remoteAccess: 'Remote access',
         changePassword: 'Password change',
+        changePasswordHelper:
+            'The database has been associated with an application. Changing the password will change the database password of the application at the same time. The change takes effect after the application restarts.',
 
         baseSetting: 'infrastructure',
         remoteConnHelper:

frontend/src/lang/modules/zh.ts

@@ -247,6 +247,7 @@ export default {
         remoteAccess: '远程访问',
         remoteConnHelper: 'root 帐号远程连接 mysql 有安全风险，开启需谨慎！',
         changePassword: '改密',
+        changePasswordHelper: '当前数据库已经关联应用，修改密码将同步修改应用中数据库密码，修改后重启生效。',
 
         portSetting: '端口',
         portHelper: '该端口为容器对外暴露端口，修改需要单独保存并且重启容器！',

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

@@ -95,7 +95,7 @@
                 </div>
             </template>
             <el-form>
-                <el-form ref="changeFormRef" :model="changeForm" label-width="80px">
+                <el-form v-loading="loading" ref="changeFormRef" :model="changeForm" label-width="80px">
                     <div v-if="changeForm.operation === 'password'">
                         <el-form-item :label="$t('commons.login.username')" prop="userName">
                             <el-input disabled v-model="changeForm.userName"></el-input>
@@ -128,8 +128,10 @@
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="changeVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button @click="submitChangeInfo(changeFormRef)">
+                    <el-button :disabled="loading" @click="changeVisiable = false">
+                        {{ $t('commons.button.cancel') }}
+                    </el-button>
+                    <el-button :disabled="loading" @click="submitChangeInfo(changeFormRef)">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -162,6 +164,8 @@
         <BackupRecords ref="dialogBackupRef" />
 
         <AppResources ref="checkRef"></AppResources>
+
+        <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
     </div>
 </template>
 
@@ -171,6 +175,7 @@ import OperatrDialog from '@/views/database/mysql/create/index.vue';
 import RootPasswordDialog from '@/views/database/mysql/password/index.vue';
 import RemoteAccessDialog from '@/views/database/mysql/remote/index.vue';
 import BackupRecords from '@/views/database/mysql/backup/index.vue';
+import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import UploadDialog from '@/views/database/mysql/upload/index.vue';
 import AppResources from '@/views/database/mysql/check/index.vue';
 import Setting from '@/views/database/mysql/setting/index.vue';
@@ -216,6 +221,7 @@ const paginationConfig = reactive({
 const mysqlIsExist = ref(false);
 const mysqlContainer = ref();
 const mysqlStatus = ref();
+const mysqlVersion = ref();
 
 const dialogRef = ref();
 const onOpenDialog = async () => {
@@ -256,6 +262,7 @@ const onSetting = async () => {
     let params = {
         status: mysqlStatus.value,
         mysqlName: mysqlName.value,
+        mysqlVersion: mysqlVersion.value,
     };
     settingRef.value!.acceptParams(params);
 };
@@ -282,19 +289,43 @@ const submitChangeInfo = async (formEl: FormInstance | undefined) => {
             value: '',
         };
         if (changeForm.operation === 'password') {
+            const res = await deleteCheckMysqlDB(changeForm.id);
+            if (res.data && res.data.length > 0) {
+                let params = {
+                    header: i18n.global.t('database.changePassword'),
+                    operationInfo: i18n.global.t('database.changePasswordHelper'),
+                    submitInputInfo: i18n.global.t('database.restartNow'),
+                };
+                confirmDialogRef.value!.acceptParams(params);
+            } else {
                 param.value = changeForm.password;
-            await updateMysqlPassword(param);
+                loading.value = true;
+                await updateMysqlPassword(param)
+                    .then(() => {
+                        loading.value = false;
                         search();
                         changeVisiable.value = false;
                         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                    })
+                    .catch(() => {
+                        loading.value = false;
+                    });
+            }
             return;
         }
         param.value = changeForm.privilege;
         changeForm.mysqlName = mysqlName.value;
-        await updateMysqlAccess(param);
+        loading.value = true;
+        await updateMysqlAccess(param)
+            .then(() => {
+                loading.value = false;
                 search();
                 changeVisiable.value = false;
                 ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 
@@ -331,6 +362,7 @@ const checkExist = (data: App.CheckInstalled) => {
     mysqlIsExist.value = data.isExist;
     mysqlName.value = data.name;
     mysqlStatus.value = data.status;
+    mysqlVersion.value = data.version;
     mysqlContainer.value = data.containerName;
     if (mysqlIsExist.value) {
         search();
@@ -358,6 +390,25 @@ const onDelete = async (row: Database.MysqlDBInfo) => {
     }
 };
 
+const confirmDialogRef = ref();
+const onSubmit = async () => {
+    let param = {
+        id: changeForm.id,
+        value: changeForm.password,
+    };
+    loading.value = true;
+    await updateMysqlPassword(param)
+        .then(() => {
+            loading.value = false;
+            search();
+            changeVisiable.value = false;
+            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
 const buttons = [
     {
         label: i18n.global.t('database.changePassword'),

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

@@ -110,10 +110,12 @@ const slowLogRef = ref();
 const onSetting = ref<boolean>(false);
 const mysqlName = ref();
 const mysqlStatus = ref();
+const mysqlVersion = ref();
 const variables = ref();
 
 interface DialogProps {
     mysqlName: string;
+    mysqlVersion: string;
     status: string;
 }
 
@@ -121,6 +123,7 @@ const dialogContainerLogRef = ref();
 const acceptParams = (props: DialogProps): void => {
     onSetting.value = true;
     mysqlStatus.value = props.status;
+    mysqlVersion.value = props.mysqlVersion;
     loadBaseInfo();
     if (mysqlStatus.value === 'Running') {
         loadVariables();
@@ -221,7 +224,11 @@ const loadBaseInfo = async () => {
 const loadVariables = async () => {
     const res = await loadMysqlVariables();
     variables.value = res.data;
-    variablesRef.value!.acceptParams({ mysqlName: mysqlName.value, variables: res.data });
+    variablesRef.value!.acceptParams({
+        mysqlName: mysqlName.value,
+        mysqlVersion: mysqlVersion.value,
+        variables: res.data,
+    });
 };
 
 const loadSlowLogs = async () => {

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

@@ -26,11 +26,11 @@
                             </el-input>
                             <span class="input-help">{{ $t('database.keyBufferSizeHelper') }}</span>
                         </el-form-item>
-                        <el-form-item label="query_cache_size" prop="query_cache_size">
-                            <el-input clearable v-model.number="mysqlVariables.query_cache_size">
-                                <template #append>MB</template>
+                        <el-form-item label="join_buffer_size" prop="join_buffer_size">
+                            <el-input clearable v-model.number="mysqlVariables.join_buffer_size">
+                                <template #append>KB</template>
                             </el-input>
-                            <span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span>
+                            <span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span>
                         </el-form-item>
                         <el-form-item label="tmp_table_size" prop="tmp_table_size">
                             <el-input clearable v-model.number="mysqlVariables.tmp_table_size">
@@ -77,11 +77,11 @@
                             </el-input>
                             <span class="input-help">{{ $t('database.readRndBufferSizeHelper') }}</span>
                         </el-form-item>
-                        <el-form-item label="join_buffer_size" prop="join_buffer_size">
-                            <el-input clearable v-model.number="mysqlVariables.join_buffer_size">
-                                <template #append>KB</template>
+                        <el-form-item v-if="mysqlVersion === '5.7.39'" label="query_cache_size" prop="query_cache_size">
+                            <el-input clearable v-model.number="mysqlVariables.query_cache_size">
+                                <template #append>MB</template>
                             </el-input>
-                            <span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span>
+                            <span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span>
                         </el-form-item>
                         <el-form-item label="thread_stack" prop="thread_stack">
                             <el-input clearable v-model.number="mysqlVariables.thread_stack">
@@ -129,6 +129,7 @@ const loading = ref(false);
 
 const plan = ref();
 const confirmDialogRef = ref();
+const mysqlVersion = ref();
 
 const variableFormRef = ref<FormInstance>();
 const oldVariables = ref<Database.MysqlVariables>();
@@ -175,10 +176,12 @@ const variablesRules = reactive({
 const mysqlName = ref();
 interface DialogProps {
     mysqlName: string;
+    mysqlVersion: string;
     variables: Database.MysqlVariables;
 }
 const acceptParams = (params: DialogProps): void => {
     mysqlName.value = params.mysqlName;
+    mysqlVersion.value = params.mysqlVersion;
     mysqlVariables.key_buffer_size = Number(params.variables.key_buffer_size) / 1024 / 1024;
     mysqlVariables.query_cache_size = Number(params.variables.query_cache_size) / 1024 / 1024;
     mysqlVariables.tmp_table_size = Number(params.variables.tmp_table_size) / 1024 / 1024;