feat: root 密码修改样式调整

backend/app/dto/database.go

@@ -94,7 +94,6 @@ type MysqlConfUpdateByFile struct {
 
 type ChangeDBInfo struct {
 	ID        uint   `json:"id"`
-	MysqlName string `json:"mysqlName" validate:"required"`
 	Operation string `json:"operation" validate:"required,oneof=password privilege"`
 	Value     string `json:"value" validate:"required"`
 }

backend/app/repo/app_install.go

@@ -91,7 +91,6 @@ func (a AppInstallRepo) Page(page, size int, opts ...DBOption) (int64, []model.A
 }
 
 func (a AppInstallRepo) BatchUpdateBy(maps map[string]interface{}, opts ...DBOption) error {
-
 	db := getDb(opts...).Model(&model.AppInstall{})
 	if len(opts) == 0 {
 		db = db.Where("1=1")

backend/app/service/app_install.go

@@ -267,10 +267,6 @@ func (a AppInstallService) ChangeAppPort(req dto.PortUpdate) error {
 		files    []string
 		newFiles []string
 	)
-	app, err := appInstallRepo.LoadBaseInfoByKey(req.Key)
-	if err != nil {
-		return err
-	}
 
 	ComposeDir := fmt.Sprintf("%s/%s/%s", constant.AppInstallDir, req.Key, req.Name)
 	ComposeFile := fmt.Sprintf("%s/%s/%s/docker-compose.yml", constant.AppInstallDir, req.Key, req.Name)
@@ -298,11 +294,8 @@ func (a AppInstallService) ChangeAppPort(req dto.PortUpdate) error {
 		return err
 	}
 
-	if err := mysqlRepo.UpdateDatabaseInfo(app.ID, map[string]interface{}{
+	updateInstallInfoInDB(req.Key, "port", strconv.FormatInt(req.Port, 10))
-		"env": strings.ReplaceAll(app.Env, strconv.FormatInt(app.Port, 10), strconv.FormatInt(req.Port, 10)),
+
-	}); err != nil {
-		return err
-	}
 	stdout, err := compose.Down(ComposeFile)
 	if err != nil {
 		return errors.New(stdout)
@@ -482,3 +475,26 @@ func syncById(installId uint) error {
 	appInstall.Message = errMsg.String()
 	return appInstallRepo.Save(&appInstall)
 }
+
+func updateInstallInfoInDB(appKey, param string, value interface{}) {
+	if param != "password" && param != "port" {
+		return
+	}
+	appInstall, _ := appInstallRepo.LoadBaseInfoByKey(appKey)
+	if appInstall.ID == 0 {
+		return
+	}
+	oldVal, newVal := "", ""
+	if param == "password" {
+		oldVal = fmt.Sprintf("\"PANEL_DB_ROOT_PASSWORD\":\"%v\"", appInstall.Password)
+		newVal = fmt.Sprintf("\"PANEL_DB_ROOT_PASSWORD\":\"%v\"", value)
+	}
+	if param == "port" {
+		oldVal = fmt.Sprintf("\"PANEL_APP_PORT_HTTP\":%v", appInstall.Port)
+		newVal = fmt.Sprintf("\"PANEL_APP_PORT_HTTP\":%v", value)
+	}
+	_ = appInstallRepo.BatchUpdateBy(map[string]interface{}{
+		"param": strings.ReplaceAll(appInstall.Param, oldVal, newVal),
+		"env":   strings.ReplaceAll(appInstall.Env, oldVal, newVal),
+	}, commonRepo.WithByID(appInstall.ID))
+}

backend/app/service/database_mysql.go

@@ -303,10 +303,8 @@ func (u *MysqlService) ChangeInfo(info dto.ChangeDBInfo) error {
 				}
 			}
 		}
-		_ = mysqlRepo.UpdateDatabaseInfo(app.ID, map[string]interface{}{
+		updateInstallInfoInDB("mysql", "password", info.Value)
-			"param": strings.ReplaceAll(app.Param, app.Password, info.Value),
+		updateInstallInfoInDB("phpmyadmin", "password", info.Value)
-			"env":   strings.ReplaceAll(app.Env, app.Password, info.Value),
-		})
 		return nil
 	}
 

backend/app/service/database_redis.go

@@ -47,12 +47,10 @@ func (u *RedisService) UpdateConf(req dto.RedisConfUpdate) error {
 	if err := configSetStr(redisInfo.ContainerName, redisInfo.Password, "maxclients", req.Maxclients); err != nil {
 		return err
 	}
-	if err := mysqlRepo.UpdateDatabaseInfo(redisInfo.ID, map[string]interface{}{
+
-		"param": strings.ReplaceAll(redisInfo.Param, redisInfo.Password, req.Requirepass),
+	updateInstallInfoInDB("redis", "password", req.Requirepass)
-		"env":   strings.ReplaceAll(redisInfo.Env, redisInfo.Password, req.Requirepass),
+	updateInstallInfoInDB("phpmyadmin", "password", req.Requirepass)
-	}); err != nil {
+
-		return err
-	}
 	if err := configSetStr(redisInfo.ContainerName, redisInfo.Password, "requirepass", req.Requirepass); err != nil {
 		return err
 	}

frontend/src/api/interface/database.ts

@@ -113,7 +113,6 @@ export namespace Database {
     }
     export interface ChangeInfo {
         id: number;
-        mysqlName: string;
         operation: string;
         value: string;
     }

frontend/src/components/confirm-dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="submitVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
+    <el-dialog v-model="submitVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="20%">
         <template #header>
             <div class="card-header">
                 <span>{{ header }}</span>

frontend/src/lang/modules/en.ts

@@ -64,6 +64,7 @@ export default {
             deleteSuccess: 'Delete Success',
             loginSuccess: 'Login Success',
             operationSuccess: 'Successful operation',
+            copySuccess: 'Copy Successful',
             notSupportOperation: 'This operation is not supported',
             requestTimeout: 'The request timed out, please try again later',
             infoTitle: 'Hint',

frontend/src/lang/modules/zh.ts

@@ -65,6 +65,7 @@ export default {
             deleteSuccess: '删除成功',
             loginSuccess: '登录成功',
             operationSuccess: '操作成功',
+            copySuccess: '复制成功',
             notSupportOperation: '不支持的当前操作',
             requestTimeout: '请求超时,请稍后重试',
             infoTitle: '提示',

frontend/src/views/app-store/apps/index.vue

@@ -52,16 +52,16 @@
                                 <el-col :span="16">
                                     <div class="a-detail">
                                         <div class="d-name">
-                                            <font size="3" style="font-weight: 700">{{ app.name }}</font>
+                                            <span style="font-weight: 500; font-size: 16px">
+                                                {{ app.name }}
+                                            </span>
                                         </div>
                                         <div class="d-description">
-                                            <font size="1">
                                             <span>
                                                 {{ app.shortDesc }}
                                             </span>
-                                            </font>
                                         </div>
-                                        <div class="d-tag">
+                                        <div class="d-tag" style="margin-top: 5px">
                                             <el-tag
                                                 v-for="(tag, ind) in app.tags"
                                                 :key="ind"
@@ -188,6 +188,7 @@ onMounted(() => {
         }
 
         .d-description {
+            margin-top: 5px;
             overflow: hidden;
             display: -webkit-box;
             -webkit-line-clamp: 2;

frontend/src/views/app-store/detail/index.vue

@@ -11,13 +11,11 @@
                     <el-col :span="20">
                         <div class="a-detail">
                             <div class="a-name">
-                                <font size="5" style="font-weight: 800">{{ app.name }}</font>
+                                <span style="font-weight: 500; font-size: 18px">{{ app.name }}</span>
                             </div>
                             <div class="a-description">
                                 <span>
-                                    <font>
                                     {{ app.shortDesc }}
-                                    </font>
                                 </span>
                             </div>
                             <br />

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

@@ -16,6 +16,10 @@
                         <el-button type="primary" icon="Plus" @click="onOpenDialog()">
                             {{ $t('commons.button.create') }}
                         </el-button>
+                        <el-button @click="onChangeRootPassword" type="primary" plain>
+                            {{ $t('database.rootPassword') }}
+                        </el-button>
+                        <el-button @click="goDashboard">远程访问</el-button>
                         <el-button @click="goDashboard" icon="Position">phpMyAdmin</el-button>
                     </template>
                     <el-table-column type="selection" fix />
@@ -23,21 +27,36 @@
                     <el-table-column :label="$t('commons.login.username')" prop="username" />
                     <el-table-column :label="$t('commons.login.password')" prop="password">
                         <template #default="{ row }">
-                            <div v-if="!row.showPassword">
+                            <div>
-                                <span style="float: left">***********</span>
+                                <span style="float: left; line-height: 25px" v-if="!row.showPassword">***********</span>
-                                <div style="margin-top: 2px; cursor: pointer">
+                                <div style="cursor: pointer; float: left" v-if="!row.showPassword">
-                                    <el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
+                                    <el-icon
+                                        style="margin-left: 5px; margin-top: 3px"
+                                        @click="row.showPassword = true"
+                                        :size="16"
+                                    >
                                         <View />
                                     </el-icon>
                                 </div>
-                            </div>
+                                <span style="float: left" v-if="row.showPassword">{{ row.password }}</span>
-                            <div v-else>
+                                <div style="cursor: pointer; float: left" v-if="row.showPassword">
-                                <span style="float: left">{{ row.password }}</span>
+                                    <el-icon
-                                <div style="margin-top: 4px; cursor: pointer">
+                                        style="margin-left: 5px; margin-top: 3px"
-                                    <el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
+                                        @click="row.showPassword = false"
+                                        :size="16"
+                                    >
                                         <Hide />
                                     </el-icon>
                                 </div>
+                                <div style="cursor: pointer; float: left">
+                                    <el-icon
+                                        style="margin-left: 5px; margin-top: 3px"
+                                        :size="16"
+                                        @click="onCopyPassword(row)"
+                                    >
+                                        <DocumentCopy />
+                                    </el-icon>
+                                </div>
                             </div>
                         </template>
                     </el-table-column>
@@ -125,6 +144,7 @@
             </template>
         </el-dialog>
 
+        <RootPasswordDialog @search="search" ref="rootPasswordRef" />
         <UploadDialog ref="uploadRef" />
         <OperatrDialog @search="search" ref="dialogRef" />
         <BackupRecords ref="dialogBackupRef" />
@@ -136,6 +156,7 @@
 <script lang="ts" setup>
 import ComplexTable from '@/components/complex-table/index.vue';
 import OperatrDialog from '@/views/database/mysql/create/index.vue';
+import RootPasswordDialog from '@/views/database/mysql/password/index.vue';
 import BackupRecords from '@/views/database/mysql/backup/index.vue';
 import UploadDialog from '@/views/database/mysql/upload/index.vue';
 import AppResources from '@/views/database/mysql/check/index.vue';
@@ -191,6 +212,11 @@ const onOpenBackupDialog = async (dbName: string) => {
 
 const uploadRef = ref();
 
+const rootPasswordRef = ref();
+const onChangeRootPassword = async () => {
+    rootPasswordRef.value!.acceptParams();
+};
+
 const settingRef = ref();
 const onSetting = async () => {
     isOnSetting.value = true;
@@ -264,6 +290,16 @@ const checkExist = (data: App.CheckInstalled) => {
     }
 };
 
+const onCopyPassword = (row: Database.MysqlDBInfo) => {
+    let input = document.createElement('input');
+    input.value = row.password;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('Copy');
+    document.body.removeChild(input);
+    ElMessage.success(i18n.global.t('commons.msg.copySuccess'));
+};
+
 const onDelete = async (row: Database.MysqlDBInfo) => {
     const res = await deleteCheckMysqlDB(row.id);
     if (res.data && res.data.length > 0) {

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

@@ -0,0 +1,88 @@
+<template>
+    <el-dialog v-model="dialogVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
+        <template #header>
+            <div class="card-header">
+                <span>{{ $t('database.rootPassword') }}</span>
+            </div>
+        </template>
+        <el-form v-loading="loading" ref="formRef" :model="form" label-width="80px">
+            <el-form-item :label="$t('database.rootPassword')" :rules="Rules.requiredInput" prop="password">
+                <el-input type="password" show-password clearable v-model="form.password" />
+            </el-form-item>
+        </el-form>
+
+        <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { Rules } from '@/global/form-rules';
+import i18n from '@/lang';
+import { ElForm, ElMessage } from 'element-plus';
+import { updateMysqlDBInfo } from '@/api/modules/database';
+import ConfirmDialog from '@/components/confirm-dialog/index.vue';
+
+const loading = ref(false);
+
+const dialogVisiable = ref(false);
+const form = reactive({
+    password: '',
+});
+
+const confirmDialogRef = ref();
+
+type FormInstance = InstanceType<typeof ElForm>;
+const formRef = ref<FormInstance>();
+
+const acceptParams = (): void => {
+    form.password = '';
+    dialogVisiable.value = true;
+};
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+const onSubmit = async () => {
+    let param = {
+        id: 0,
+        operation: 'password',
+        value: form.password,
+    };
+    loading.value = true;
+    await updateMysqlDBInfo(param)
+        .then(() => {
+            loading.value = false;
+            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            emit('search');
+            dialogVisiable.value = false;
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
+const onSave = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        let params = {
+            header: i18n.global.t('database.confChange'),
+            operationInfo: i18n.global.t('database.restartNowHelper'),
+            submitInputInfo: i18n.global.t('database.restartNow'),
+        };
+        confirmDialogRef.value!.acceptParams(params);
+    });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>