fix: MySQL 设置页样式统一 (#2335)

frontend/src/lang/modules/en.ts

@@ -1544,7 +1544,7 @@ const message = {
         writing: 'Number of Responses (Writing)',
         waiting: 'resident process (Waiting)',
         status: 'Current Status',
-        nginxConfig: 'OpenResty Settings',
+        nginxConfig: 'Settings',
         configResource: 'Configuration',
         saveAndReload: 'Save and Reload',
     },

frontend/src/lang/modules/tw.ts

@@ -1469,7 +1469,7 @@ const message = {
         writing: '響應數(Writing)',
         waiting: '駐留進程(Waiting)',
         status: '當前狀態',
-        nginxConfig: 'OpenResty 設置',
+        nginxConfig: '設置',
         configResource: '配置修改',
         saveAndReload: '保存並重載',
     },

frontend/src/lang/modules/zh.ts

@@ -1469,7 +1469,7 @@ const message = {
         writing: '响应数(Writing)',
         waiting: '驻留进程(Waiting)',
         status: '当前状态',
-        nginxConfig: 'OpenResty 设置',
+        nginxConfig: '设置',
         configResource: '配置修改',
         saveAndReload: '保存并重载',
     },

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

@@ -2,19 +2,8 @@
     <div v-loading="loading">
         <LayoutContent>
             <template #title>
-                <back-button
+                <back-button name="MySQL" :header="props.database + ' ' + $t('commons.button.set')">
-                    name="MySQL"
+                    <template #buttons>
-                    :header="
-                        props.database +
-                        ' [' +
-                        (props.type === 'mysql' ? 'MySQL' : 'MariaDB') +
-                        '] - ' +
-                        $t('commons.button.set')
-                    "
-                />
-            </template>
-
-            <template #toolbar>
                         <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
                             {{ $t('database.confChange') }}
                         </el-button>
@@ -54,6 +43,13 @@
                             {{ $t('database.slowLog') }}
                         </el-button>
                     </template>
+                </back-button>
+            </template>
+
+            <template #app>
+                <AppStatus :app-key="props.type" :app-name="props.database" v-model:loading="loading" />
+            </template>
+
             <template #main>
                 <div v-if="activeName === 'conf'">
                     <codemirror

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

@@ -6,22 +6,6 @@
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
             <el-row type="flex" justify="center">
                 <el-col :span="22">
-                    <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
-                        <el-input type="password" show-password clearable v-model="form.password">
-                            <template #append>
-                                <el-button @click="onCopy(form.password)">{{ $t('commons.button.copy') }}</el-button>
-                                <el-divider direction="vertical" />
-                                <el-button style="margin-left: 1px" @click="random">
-                                    {{ $t('commons.button.random') }}
-                                </el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.serviceName')" prop="serviceName">
-                        <el-tag>{{ form.serviceName }}</el-tag>
-                        <el-button @click="onCopy(form.serviceName)" icon="DocumentCopy" link></el-button>
-                        <span class="input-help">{{ $t('database.serviceNameHelper') }}</span>
-                    </el-form-item>
                     <el-form-item :label="$t('database.containerConn')">
                         <el-tag>
                             {{ form.serviceName + ':6379' }}
@@ -32,10 +16,24 @@
                         </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.remoteConn')">
-                        <el-tag>{{ form.systemIP + ':' + form.port }}</el-tag>
+                        <el-tooltip v-if="loadConnInfo().length > 48" :content="loadConnInfo()" placement="top">
+                            <el-tag>{{ loadConnInfo().substring(0, 48) }}...</el-tag>
+                        </el-tooltip>
+                        <el-tag v-else>{{ loadConnInfo() }}</el-tag>
                         <el-button @click="onCopy(form.systemIP + ':6379')" icon="DocumentCopy" link></el-button>
                         <span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
                     </el-form-item>
+                    <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
+                        <el-input type="password" show-password clearable v-model="form.password">
+                            <template #append>
+                                <el-button @click="onCopy(form.password)">{{ $t('commons.button.copy') }}</el-button>
+                                <el-divider direction="vertical" />
+                                <el-button style="margin-left: 1px" @click="random">
+                                    {{ $t('commons.button.random') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
                 </el-col>
             </el-row>
         </el-form>
@@ -133,6 +131,10 @@ const onSubmit = async () => {
         });
 };
 
+function loadConnInfo() {
+    return form.value.systemIP + ':' + form.value.port;
+}
+
 const onSave = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {