From a04f4a8b96518aecf5db82487a6cd9f22b72c7ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Fri, 10 Jan 2025 18:57:45 +0800
Subject: [PATCH] feat: Improve international language and style (#7697)

Refs #7696
---
 .../src/components/router-button/index.vue    |   2 +-
 frontend/src/lang/modules/ja.ts               |  10 +-
 frontend/src/lang/modules/ru.ts               |   2 +-
 .../src/views/database/mysql/conn/index.vue   |   2 +-
 .../views/database/postgresql/conn/index.vue  |   2 +-
 .../src/views/database/redis/conn/index.vue   |   2 +-
 frontend/src/views/home/index.vue             |   1 +
 .../src/views/host/file-management/index.vue  |   6 +-
 frontend/src/views/setting/panel/index.vue    |   2 +-
 frontend/src/views/setting/safe/index.vue     | 297 +++++++++---------
 .../website/config/basic/other/index.vue      |   2 +-
 11 files changed, 160 insertions(+), 168 deletions(-)

diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index 0eda101a5..6e6b86dca 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-card class="router_card p-1 sm:p-0">
         <div class="flex w-full flex-col justify-start sm:items-center items-start sm:justify-between sm:flex-row">
-            <el-radio-group v-model="activeName" @change="handleChange">
+            <el-radio-group v-model="activeName" @change="handleChange" class="flex-1">
                 <el-radio-button
                     class="router_card_button"
                     :label="button.label"
diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts
index deba56058..c81f5a762 100644
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@@ -52,7 +52,7 @@ const message = {
             saveAndEnable: '保存して有効にします',
             import: '輸入',
             search: '検索',
-            refresh: 'リフレッシュします',
+            refresh: 'リロード',
             get: '得る',
             upgrade: 'アップグレード',
             ignore: 'アップグレードを無視します',
@@ -1184,7 +1184,7 @@ const message = {
         editPermissions: '編集@:file.mode',
         owner: '所有者',
         file: 'ファイル',
-        remoteFile: 'リモコンからダウンロードしてください',
+        remoteFile: 'リモートダウンロード',
         share: '共有',
         sync: 'データ同期',
         size: 'サイズ',
@@ -1283,9 +1283,9 @@ const message = {
         clashOpenAlert: '「リサイクルビン」ボタンをクリックして、リサイクルビンディレクトリを開きます',
         right: 'フォワード',
         back: '戻る',
-        top: '戻って行きます',
-        refresh: 'リフレッシュします',
-        up: '戻って行きます',
+        top: '戻る',
+        refresh: 'リロード',
+        up: '戻る',
         openWithVscode: 'VSコードで開く',
         vscodeHelper:
             'VSコードがローカルにインストールされ、SSHリモートプラグインが構成されていることを確認してください',
diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts
index d4d6d5ddc..52ab5a118 100644
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@@ -1215,7 +1215,7 @@ const message = {
         editPermissions: '@:file.mode',
         owner: 'Владелец',
         file: 'Файл',
-        remoteFile: 'Скачать с удаленного сервера',
+        remoteFile: 'Удалённая загрузка',
         share: 'Поделиться',
         sync: 'Синхронизация данных',
         size: 'Размер',
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index 925955344..6fa18e233 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -81,7 +81,7 @@
                             prop="password"
                         >
                             <el-input
-                                style="width: calc(100% - 167px)"
+                                style="width: calc(100% - 205px)"
                                 type="password"
                                 show-password
                                 clearable
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index dccf4acca..64515cfe4 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -82,7 +82,7 @@
                             prop="password"
                         >
                             <el-input
-                                style="width: calc(100% - 147px)"
+                                style="width: calc(100% - 205px)"
                                 type="password"
                                 show-password
                                 clearable
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index 4bfb02488..a453ad1b7 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -68,7 +68,7 @@
                     <el-divider border-style="dashed" />
                     <el-form-item :label="$t('commons.login.password')" v-if="form.from === 'local'" prop="password">
                         <el-input
-                            style="width: calc(100% - 147px)"
+                            style="width: calc(100% - 205px)"
                             type="password"
                             show-password
                             clearable
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 721ce5bdf..b746aecb9 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -720,6 +720,7 @@ onBeforeUnmount(() => {
     font-size: 13px !important;
     border: none !important;
     width: 100% !important;
+    line-height: normal !important;
 }
 
 .monitor-tags {
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 2b3afee91..9594e7800 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -386,12 +386,12 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('file.mode')" prop="mode" max-width="50" min-width="110px">
+                    <el-table-column :label="$t('file.mode')" prop="mode" min-width="110">
                         <template #default="{ row }">
                             <el-link :underline="false" @click="openMode(row)">{{ row.mode }}</el-link>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.user')" prop="user" show-overflow-tooltip>
+                    <el-table-column :label="$t('commons.table.user')" prop="user" show-overflow-tooltip min-width="90">
                         <template #default="{ row }">
                             <el-link :underline="false" @click="openChown(row)">
                                 {{ row.user ? row.user : '-' }} ({{ row.uid }})
@@ -405,7 +405,7 @@
                             </el-link>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('file.size')" prop="size" max-width="50" sortable>
+                    <el-table-column :label="$t('file.size')" prop="size" min-width="100" sortable>
                         <template #default="{ row, $index }">
                             <span v-if="row.isDir">
                                 <el-button
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index ba846bf42..9ee325cd4 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -6,7 +6,7 @@
                     :model="form"
                     :label-position="mobile ? 'top' : 'left'"
                     label-width="auto"
-                    class="sm:w-full md:w-4/5 lg:w-3/5 2xl:w-1/2 max-w-max"
+                    class="sm:w-full md:w-4/5 lg:w-3/5 2xl:w-1/2 max-w-max ml-8"
                 >
                     <el-form-item :label="$t('setting.user')" prop="userName">
                         <el-input disabled v-model="form.userName">
diff --git a/frontend/src/views/setting/safe/index.vue b/frontend/src/views/setting/safe/index.vue
index b37f66116..a86e76952 100644
--- a/frontend/src/views/setting/safe/index.vue
+++ b/frontend/src/views/setting/safe/index.vue
@@ -6,166 +6,157 @@
                     :model="form"
                     v-loading="loading"
                     :label-position="mobile ? 'top' : 'left'"
-                    label-width="150px"
+                    label-width="auto"
+                    class="sm:w-full md:w-4/5 lg:w-3/5 2xl:w-1/2 max-w-max ml-8"
                 >
-                    <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('setting.panelPort')" prop="serverPort">
-                                <el-input disabled v-model.number="form.serverPort">
-                                    <template #append>
-                                        <el-button @click="onChangePort" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.bindInfo')" prop="bindAddress">
-                                <el-input disabled v-model="form.bindAddress">
-                                    <template #append>
-                                        <el-button @click="onChangeBind" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.entrance')">
-                                <el-input
-                                    type="password"
-                                    disabled
-                                    v-if="form.securityEntrance"
-                                    v-model="form.securityEntrance"
-                                >
-                                    <template #append>
-                                        <el-button @click="onChangeEntrance" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <el-input disabled v-if="!form.securityEntrance" v-model="unset">
-                                    <template #append>
-                                        <el-button @click="onChangeEntrance" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <span class="input-help">{{ $t('setting.entranceHelper') }}</span>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.panelPort')" prop="serverPort">
+                        <el-input disabled v-model.number="form.serverPort">
+                            <template #append>
+                                <el-button @click="onChangePort" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.bindInfo')" prop="bindAddress">
+                        <el-input disabled v-model="form.bindAddress">
+                            <template #append>
+                                <el-button @click="onChangeBind" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.entrance')">
+                        <el-input type="password" disabled v-if="form.securityEntrance" v-model="form.securityEntrance">
+                            <template #append>
+                                <el-button @click="onChangeEntrance" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <el-input disabled v-if="!form.securityEntrance" v-model="unset">
+                            <template #append>
+                                <el-button @click="onChangeEntrance" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <span class="input-help">{{ $t('setting.entranceHelper') }}</span>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.noAuthSetting')">
-                                <el-input disabled v-model="form.noAuthSetting">
-                                    <template #append>
-                                        <el-button @click="onChangeResponse" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.noAuthSetting')">
+                        <el-input disabled v-model="form.noAuthSetting">
+                            <template #append>
+                                <el-button @click="onChangeResponse" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.allowIPs')">
-                                <div style="width: 100%" v-if="form.allowIPs">
-                                    <el-input
-                                        type="textarea"
-                                        :rows="3"
-                                        disabled
-                                        v-model="form.allowIPs"
-                                        style="width: calc(100% - 80px)"
-                                    />
-                                    <el-button class="append-button" @click="onChangeAllowIPs" icon="Setting">
-                                        {{ $t('commons.button.set') }}
-                                    </el-button>
-                                </div>
-                                <el-input disabled v-if="!form.allowIPs" v-model="unset">
-                                    <template #append>
-                                        <el-button @click="onChangeAllowIPs" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <span class="input-help">{{ $t('setting.allowIPsHelper') }}</span>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.allowIPs')">
+                        <div style="width: 100%" v-if="form.allowIPs">
+                            <el-input
+                                type="textarea"
+                                :rows="3"
+                                disabled
+                                v-model="form.allowIPs"
+                                style="width: calc(100% - 80px)"
+                            />
+                            <el-button class="append-button" @click="onChangeAllowIPs" icon="Setting">
+                                {{ $t('commons.button.set') }}
+                            </el-button>
+                        </div>
+                        <el-input disabled v-if="!form.allowIPs" v-model="unset">
+                            <template #append>
+                                <el-button @click="onChangeAllowIPs" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <span class="input-help">{{ $t('setting.allowIPsHelper') }}</span>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.bindDomain')">
-                                <el-input disabled v-if="form.bindDomain" v-model="form.bindDomain">
-                                    <template #append>
-                                        <el-button @click="onChangeBindDomain" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <el-input disabled v-if="!form.bindDomain" v-model="unset">
-                                    <template #append>
-                                        <el-button @click="onChangeBindDomain" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <span class="input-help">{{ $t('setting.bindDomainHelper') }}</span>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.bindDomain')">
+                        <el-input disabled v-if="form.bindDomain" v-model="form.bindDomain">
+                            <template #append>
+                                <el-button @click="onChangeBindDomain" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <el-input disabled v-if="!form.bindDomain" v-model="unset">
+                            <template #append>
+                                <el-button @click="onChangeBindDomain" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <span class="input-help">{{ $t('setting.bindDomainHelper') }}</span>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.panelSSL')" prop="ssl">
-                                <el-switch
-                                    @change="handleSSL"
-                                    v-model="form.ssl"
-                                    active-value="enable"
-                                    inactive-value="disable"
-                                />
-                                <span class="input-help">{{ $t('setting.https') }}</span>
-                                <div v-if="form.ssl === 'enable' && sslInfo">
-                                    <el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag>
-                                    <el-tag style="margin-left: 5px">
-                                        {{ $t('setting.timeOut') }} {{ dateFormat('', '', sslInfo.timeout) }}
-                                    </el-tag>
-                                    <div>
-                                        <el-button link type="primary" @click="handleSSL">
-                                            {{ $t('commons.button.view') }}
-                                        </el-button>
-                                    </div>
-                                </div>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.panelSSL')" prop="ssl">
+                        <el-switch
+                            @change="handleSSL"
+                            v-model="form.ssl"
+                            active-value="enable"
+                            inactive-value="disable"
+                        />
+                        <span class="input-help">{{ $t('setting.https') }}</span>
+                        <div v-if="form.ssl === 'enable' && sslInfo">
+                            <el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag>
+                            <el-tag style="margin-left: 5px">
+                                {{ $t('setting.timeOut') }} {{ dateFormat('', '', sslInfo.timeout) }}
+                            </el-tag>
+                            <div>
+                                <el-button link type="primary" @click="handleSSL">
+                                    {{ $t('commons.button.view') }}
+                                </el-button>
+                            </div>
+                        </div>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.expirationTime')" prop="expirationTime">
-                                <el-input disabled v-model="form.expirationTime">
-                                    <template #append>
-                                        <el-button @click="onChangeExpirationTime" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <div>
-                                    <span class="input-help" v-if="form.expirationTime !== $t('setting.unSetting')">
-                                        {{ $t('setting.timeoutHelper', [loadTimeOut()]) }}
-                                    </span>
-                                    <span class="input-help" v-else>
-                                        {{ $t('setting.noneSetting') }}
-                                    </span>
-                                </div>
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.complexity')" prop="complexityVerification">
-                                <el-switch
-                                    @change="onSaveComplexity"
-                                    v-model="form.complexityVerification"
-                                    active-value="enable"
-                                    inactive-value="disable"
-                                />
-                                <span class="input-help">
-                                    {{ $t('setting.complexityHelper') }}
-                                </span>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.expirationTime')" prop="expirationTime">
+                        <el-input disabled v-model="form.expirationTime">
+                            <template #append>
+                                <el-button @click="onChangeExpirationTime" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <div>
+                            <span class="input-help" v-if="form.expirationTime !== $t('setting.unSetting')">
+                                {{ $t('setting.timeoutHelper', [loadTimeOut()]) }}
+                            </span>
+                            <span class="input-help" v-else>
+                                {{ $t('setting.noneSetting') }}
+                            </span>
+                        </div>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.complexity')" prop="complexityVerification">
+                        <el-switch
+                            @change="onSaveComplexity"
+                            v-model="form.complexityVerification"
+                            active-value="enable"
+                            inactive-value="disable"
+                        />
+                        <span class="input-help">
+                            {{ $t('setting.complexityHelper') }}
+                        </span>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.mfa')">
-                                <el-switch
-                                    @change="handleMFA"
-                                    v-model="form.mfaStatus"
-                                    active-value="enable"
-                                    inactive-value="disable"
-                                />
-                                <span class="input-help">
-                                    {{ $t('setting.mfaHelper') }}
-                                </span>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
+                    <el-form-item :label="$t('setting.mfa')">
+                        <el-switch
+                            @change="handleMFA"
+                            v-model="form.mfaStatus"
+                            active-value="enable"
+                            inactive-value="disable"
+                        />
+                        <span class="input-help">
+                            {{ $t('setting.mfaHelper') }}
+                        </span>
+                    </el-form-item>
                 </el-form>
             </template>
         </LayoutContent>
diff --git a/frontend/src/views/website/website/config/basic/other/index.vue b/frontend/src/views/website/website/config/basic/other/index.vue
index 935650c38..6ac6b4681 100644
--- a/frontend/src/views/website/website/config/basic/other/index.vue
+++ b/frontend/src/views/website/website/config/basic/other/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :xs="24" :sm="18" :md="9" :lg="9" :xl="9">
+        <el-col :xs="24" :sm="18" :md="14" :lg="12" :xl="9">
             <el-form ref="websiteForm" label-position="right" label-width="150px" :model="form" :rules="rules">
                 <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
                     <el-input v-model="form.primaryDomain"></el-input>