fix: 面板设置样式调整 (#2141)

Refs #2079

frontend/src/components/system-upgrade/index.vue

@@ -38,11 +38,11 @@
         </template>
         <div class="panel-MdEditor">
             <el-alert :closable="false">
-                {{ $t('setting.versionHelper') }}
+                <span class="line-heigth">{{ $t('setting.versionHelper') }}</span>
-                <li>{{ $t('setting.versionHelper1') }}</li>
+                <li class="line-heigth">{{ $t('setting.versionHelper1') }}</li>
-                <li>{{ $t('setting.versionHelper2') }}</li>
+                <li class="line-heigth">{{ $t('setting.versionHelper2') }}</li>
             </el-alert>
-            <div class="default-theme">
+            <div class="default-theme" style="margin-left: 20px">
                 <h2 class="inline-block">{{ $t('app.version') }}</h2>
             </div>
             <el-radio-group class="inline-block tag" v-model="upgradeVersion" @change="changeOption">
@@ -158,18 +158,21 @@ onMounted(() => {
     text-decoration: none;
     letter-spacing: 0.5px;
 }
+.line-heigth {
+    line-height: 25px;
+}
 .panel-MdEditor {
     height: calc(100vh - 330px);
-    margin-left: 70px;
     .tag {
         margin-top: -6px;
+        margin-left: 20px;
         vertical-align: middle;
     }
     :deep(.md-editor-preview) {
         font-size: 14px;
     }
     :deep(.default-theme h2) {
-        margin: 13px 0;
+        margin: 13px, 0;
         padding: 0;
         font-size: 16px;
     }

frontend/src/lang/modules/en.ts

@@ -354,7 +354,6 @@ const message = {
         localDB: 'Local DB',
         address: 'DB address',
         version: 'DB version',
-        versionHelper: 'Currently, only versions {0} are supported',
         userHelper: 'The root user or a database user with root privileges can access the remote database.',
 
         selectFile: 'Select file',
@@ -963,10 +962,11 @@ const message = {
         panel: 'Panel',
         userChange: 'Change username',
         userChangeHelper: 'Change the user name to log out. Do you want to continue?',
+        user: 'User Name',
         passwd: 'Password',
         emailHelper: 'For password retrieval',
-        title: 'Panel alias',
+        title: 'Panel Alias',
-        panelPort: 'Panel port',
+        panelPort: 'Panel Port',
         portHelper:
             'The recommended port range is 8888 to 65535. Note: If the server has a security group, permit the new port from the security group in advance',
         portChange: 'Port change',
@@ -983,7 +983,7 @@ const message = {
             'If you do not operate the panel for more than {0} seconds, the panel automatically logs out',
         systemIP: 'System Address',
         systemIPWarning: 'The server address is not currently set. Please set it in the control panel first!',
-        syncTime: 'Server time',
+        syncTime: 'Server Time',
         timeZone: 'Time Zone',
         timeZoneChangeHelper: 'Changing the time zone requires restarting the service. Do you want to continue?',
         timeZoneHelper:
@@ -1060,11 +1060,11 @@ const message = {
         expiredHelper: 'The current password has expired. Please change the password again.',
         timeoutHelper:
             '[ {0} days ] The panel password is about to expire. After the expiration, you need to reset the password',
-        complexity: 'Complexity verification',
+        complexity: 'Complexity Verification',
         complexityHelper:
             'The password must contain at least eight characters and contain at least three uppercase letters, lowercase letters, digits, and special characters',
 
-        bindDomain: 'Bind domain',
+        bindDomain: 'Bind Domain',
         unBindDomain: 'Unbind domain',
         unBindDomainHelper:
             'The action of unbinding a domain name may cause system insecurity. Do you want to continue?',

frontend/src/lang/modules/tw.ts

@@ -346,7 +346,6 @@ const message = {
         localDB: '本地數據庫',
         address: '數據庫地址',
         version: '數據庫版本',
-        versionHelper: '當前僅支持 {0} 三個版本',
         userHelper: 'root 用戶或者擁有 root 權限的數據庫用戶',
 
         selectFile: '選擇文件',

frontend/src/lang/modules/zh.ts

@@ -346,7 +346,6 @@ const message = {
         localDB: '本地数据库',
         address: '数据库地址',
         version: '数据库版本',
-        versionHelper: '当前仅支持 {0} 版本',
         userHelper: 'root 用户或者拥有 root 权限的数据库用户',
 
         selectFile: '选择文件',

frontend/src/styles/common.scss

@@ -351,3 +351,17 @@ html {
 .pre-select {
     width: 85px !important;
 }
+
+
+.el-input-group__append {
+    border-left: 0;
+    &:hover {
+        color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-9) !important;
+    }
+    background-color: #ffffff !important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset,
+        -1px 0 0 0 var(--el-input-border-color) inset;
+}

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

@@ -51,8 +51,8 @@
                             <span class="input-help">{{ $t('database.remoteHelper') }}</span>
                         </el-form-item>
 
-                        <el-form-item :label="$t('commons.table.type')" prop="from">
+                        <el-form-item :label="$t('commons.table.type')" prop="database">
-                            <el-tag>{{ loadLabel(form.from) }}</el-tag>
+                            <el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
                         </el-form-item>
 
                         <el-form-item :label="$t('commons.table.description')" prop="description">
@@ -91,6 +91,7 @@ const createVisiable = ref(false);
 const form = reactive({
     name: '',
     from: 'local',
+    type: '',
     database: '',
     format: '',
     username: '',
@@ -111,11 +112,13 @@ const formRef = ref<FormInstance>();
 
 interface DialogProps {
     from: string;
+    type: string;
     database: string;
 }
 const acceptParams = (params: DialogProps): void => {
     form.name = '';
     form.from = params.from;
+    form.type = params.type;
     form.database = params.database;
     form.format = 'utf8mb4';
     form.username = '';
@@ -129,10 +132,6 @@ const handleClose = () => {
     createVisiable.value = false;
 };
 
-function loadLabel(from: any) {
-    return from === 'local' ? i18n.global.t('database.localDB') : from;
-}
-
 const random = async () => {
     form.password = getRandomStr(16);
 };

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

@@ -30,7 +30,7 @@
                             <el-option
                                 v-if="item.from === 'local'"
                                 :value="item.database"
-                                :label="item.type + ' [' + item.database + ']'"
+                                :label="item.database + ' [' + item.type + ']'"
                             ></el-option>
                         </div>
                     </el-option-group>
@@ -39,7 +39,7 @@
                             <el-option
                                 v-if="item.from === 'remote'"
                                 :value="item.database"
-                                :label="item.type + ' [' + item.database + ']'"
+                                :label="item.database + ' [' + item.type + ']'"
                             ></el-option>
                         </div>
                     </el-option-group>
@@ -267,6 +267,7 @@ const dialogRef = ref();
 const onOpenDialog = async () => {
     let params = {
         from: currentDB.value.from,
+        type: currentDB.value.type,
         database: currentDBName.value,
     };
     dialogRef.value!.acceptParams(params);

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

@@ -135,7 +135,7 @@ const onOpenDialog = async (
     rowData: Partial<Database.DatabaseInfo> = {
         name: '',
         type: 'mysql',
-        version: '5.6',
+        version: '8.x',
         address: '',
         port: 3306,
         username: 'root',

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

@@ -20,28 +20,20 @@
                         <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
                     </el-form-item>
                     <el-form-item :label="$t('commons.table.type')" prop="type">
-                        <el-select v-model="dialogData.rowData!.type" @change="changeType">
+                        <el-radio-group v-model="dialogData.rowData!.type" @change="changeType">
-                            <div>
+                            <el-radio-button label="mysql">MySQL</el-radio-button>
-                                <el-option value="mysql" label="MySQL" />
+                            <el-radio-button label="mariadb">MariaDB</el-radio-button>
-                                <el-option value="mariadb" label="Mariadb" />
+                        </el-radio-group>
-                            </div>
-                        </el-select>
                     </el-form-item>
                     <el-form-item :label="$t('database.version')" prop="version">
-                        <el-select @change="isOK = false" v-model="dialogData.rowData!.version">
+                        <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
                             <div v-if="dialogData.rowData!.type === 'mysql'">
-                                <el-option value="5.6" label="5.6" />
+                                <el-radio label="8.x" />
-                                <el-option value="5.7" label="5.7" />
+                                <el-radio label="5.7" />
-                                <el-option value="8.x" label="8.x" />
+                                <el-radio label="5.6" />
                             </div>
-                            <el-option v-else value="10.x" label="10.x" />
+                            <el-radio v-else label="10.x" />
-                        </el-select>
+                        </el-radio-group>
-                        <span v-if="dialogData.rowData!.type === 'mysql'" class="input-help">
-                            {{ $t('database.versionHelper', ['5.6 5.7 8.x']) }}
-                        </span>
-                        <span v-else class="input-help">
-                            {{ $t('database.versionHelper', ['10.x']) }}
-                        </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.address')" prop="address">
                         <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
@@ -118,6 +110,7 @@ const handleClose = () => {
 
 const rules = reactive({
     name: [Rules.requiredInput],
+    type: [Rules.requiredSelect],
     version: [Rules.requiredSelect],
     address: [Rules.host],
     port: [Rules.port],

frontend/src/views/setting/panel/index.vue

@@ -6,7 +6,7 @@
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
-                            <el-form-item :label="$t('commons.login.username')" prop="userName">
+                            <el-form-item :label="$t('setting.user')" prop="userName">
                                 <el-input disabled v-model="form.userName">
                                     <template #append>
                                         <el-button @click="onChangeUserName()" icon="Setting">

frontend/src/views/setting/safe/index.vue

@@ -121,7 +121,7 @@
                                 </span>
                             </el-form-item>
 
-                            <el-form-item label="https" prop="ssl">
+                            <el-form-item label="HTTPS" prop="ssl">
                                 <el-switch
                                     @change="handleSSL"
                                     v-model="form.ssl"