Refine English translation (#8991)

* Refine English translation (#7232) * Refine English translation (#7247) * Refine pluralization of some English words (#7318) * Refine plural translation of English words * Remove useless i18n modifier * Refine English translation again and again (#7353) * Replace whitelist and blacklist with allowlist and blocklist (#7358) * Refine English translation and UI style (#7399) * Resolve build error * Fix build error
2025-12-09 11:55:52 +08:00 · 2025-06-11 14:41:29 +08:00 · 2025-06-11 14:41:29 +08:00 · f843438baf
commit f843438baf
parent 4528f1feaf
66 changed files with 1122 additions and 1020 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -56,7 +56,7 @@
        "vue-clipboard3": "^2.0.0",
        "vue-codemirror": "^6.1.1",
        "vue-demi": "^0.14.6",
-        "vue-i18n": "^9.13.1",
+        "vue-i18n": "^10.0.5",
        "vue-router": "^4.3.3",
        "vue-virtual-scroller": "^2.0.0-beta.8"
    },
--- a/frontend/src/components/group/index.vue
+++ b/frontend/src/components/group/index.vue
@ -1,5 +1,5 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('commons.table.group')" @close="handleClose" size="large">
+    <DrawerPro v-model="open" :header="$t('commons.table.manageGroup')" @close="handleClose" size="large">
        <template #content>
            <ComplexTable :data="data" @search="search()">
                <template #toolbar>
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@ -7,6 +7,7 @@ import * as echarts from 'echarts';
 import { GlobalStore } from '@/store';
 import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/utils/util';
 import { storeToRefs } from 'pinia';
+import i18n from '@/lang';
 const globalStore = GlobalStore();
 const { isDarkTheme } = storeToRefs(globalStore);

@ -153,17 +154,35 @@ function initChart() {
                switch (props.option.formatStr) {
                    case 'KB/s':
                        for (const item of datas) {
-                            res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
+                            res +=
+                                item.marker +
+                                ' ' +
+                                item.seriesName +
+                                i18n.global.t('commons.colon') +
+                                computeSizeFromKBs(item.data) +
+                                '<br/>';
                        }
                        break;
                    case 'KB':
                        for (const item of datas) {
-                            res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKB(item.data) + '<br/>';
+                            res +=
+                                item.marker +
+                                ' ' +
+                                item.seriesName +
+                                i18n.global.t('commons.colon') +
+                                computeSizeFromKB(item.data) +
+                                '<br/>';
                        }
                        break;
                    case 'MB':
                        for (const item of datas) {
-                            res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromMB(item.data) + '<br/>';
+                            res +=
+                                item.marker +
+                                ' ' +
+                                item.seriesName +
+                                i18n.global.t('commons.colon') +
+                                computeSizeFromMB(item.data) +
+                                '<br/>';
                        }
                        break;
                    default:
@ -172,7 +191,7 @@ function initChart() {
                                item.marker +
                                ' ' +
                                item.seriesName +
-                                '：' +
+                                i18n.global.t('commons.colon') +
                                item.data +
                                props.option.formatStr +
                                '<br/>';
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@ -4,10 +4,10 @@ const message = {
    commons: {
        true: '是',
        false: '否',
-        example: '例：',
+        colon: '：',
+        example: '例如：',
        fit2cloud: '飞致云',
        lingxia: '凌霞',
-        colon: '： ',
        button: {
            run: '執行',
            prev: '上一步',
@ -446,7 +446,7 @@ const message = {
        loadBackup: '導入備份',
        remoteAccess: '遠程訪問',
        remoteHelper: '多個 ip 以逗號分隔，例：172.16.10.111,172.16.10.112',
-        remoteConnHelper: 'root 帳號遠程連接 mysql 有安全風險，開啟需謹慎！',
+        remoteConnHelper: 'root 帳號遠程連接 MySQL 有安全風險，開啟需謹慎！',
        changePassword: '改密',
        changeConnHelper: '此操作將修改當前資料庫 {0}，是否繼續？',
        changePasswordHelper: '當前數據庫已經關聯應用，修改密碼將同步修改應用中數據庫密碼，修改後重啟生效。',
@ -464,6 +464,7 @@ const message = {
        passwordHelper: '無法獲取密碼，請修改',
        remote: '遠程',
        remoteDB: '遠程服務器',
+        manageRemoteDB: '管理遠程服務器',
        createRemoteDB: '添加遠程服務器',
        unBindRemoteDB: '解綁遠程服務器',
        unBindForce: '強制解綁',
@ -940,6 +941,7 @@ const message = {
        taskType: '任務類型',
        nextTime: '近 5 次執行',
        record: '報告',
+        viewRecords: '查看報告',
        shell: 'Shell 腳本',
        log: '備份日誌',
        logHelper: '備份系統日誌',
@ -1203,6 +1205,7 @@ const message = {
                'ClamAV 的最低建議配置為：3 GiB 以上的 RAM，2.0 GHz 以上的單核 CPU，以及至少 5 GiB 的可用硬盤空間。',
            notStart: '當前未 ClamAV 服務，請先開啟！',
            removeRecord: '刪除報告文件',
+            noRecords: '點擊“執行”按鈕開始掃描，掃描結果將會記錄在這裏。',
            removeResultHelper: '刪除任務執行過程中生成的報告文件，以清理存儲空間。',
            removeInfected: '刪除病毒文件',
            removeInfectedHelper: '刪除任務檢測到的病毒文件，以確保伺服器的安全和正常運行。',
@ -1278,9 +1281,12 @@ const message = {
        dir: '文件夾',
        upload: '上傳',
        download: '下載',
+        uploadFile: '@:file.upload@:file.file',
+        uploadDirectory: '@:file.upload@:file.dir',
        fileName: '文件名',
        search: '在當前目錄下查找',
        mode: '權限',
+        editPermissions: '編輯@:file.mode',
        owner: '所有者',
        file: '文件',
        remoteFile: '遠程下載',
@ -1651,6 +1657,7 @@ const message = {
        deleteHelper: '將刪除該快照的所有備份文件，包括第三方備份賬號中的文件。',
        status: '快照狀態',
        ignoreRule: '排除規則',
+        editIgnoreRule: '@:commons.button.edit@:setting.ignoreRule',
        ignoreHelper: '快照時將使用該規則對 1Panel 數據目錄進行壓縮備份，請謹慎修改。',
        ignoreHelper1: '一行一個，例： \n*.log\n/opt/1panel/cache',
        panelInfo: '寫入 1Panel 基礎信息',
@ -2171,7 +2178,7 @@ const message = {
        disabled: '已停止',
        startProxy: '開啟反向代理',
        stopProxy: '關閉反向代理',
-        proxyFile: '源文',
+        sourceFile: '源文',
        proxyHelper1: '訪問這個目錄時將會把目標URL的內容返回並顯示',
        proxyPassHelper: '代理的站點，必須為可正常訪問的URL',
        proxyHostHelper: '將域名添加到請求頭傳遞到代理服務器',
@ -2478,8 +2485,11 @@ const message = {
        addressHelper2: '多個 IP 或 IP 段 請用 "," 隔開：172.16.10.11,172.16.0.0/24',
        allIP: '所有 IP',
        portRule: '端口規則',
+        createPortRule: '@:commons.button.create@:firewall.portRule',
        forwardRule: '端口轉發',
+        createForwardRule: '@:commons.button.create@:firewall.forwardRule',
        ipRule: 'IP 規則',
+        createIpRule: '@:commons.button.create @:firewall.ipRule',
        userAgent: 'User-Agent 過濾',
        sourcePort: '來源端口',
        targetIP: '目標 IP',
@ -2587,6 +2597,7 @@ const message = {
        laddr: '本地地址/端口',
        raddr: '远程地址/端口',
        stopProcess: '結束',
+        viewDetails: '查看詳情',
        stopProcessWarn: '是否確定結束此進程 (PID:{0})？',
        processName: '進程名稱',
    },
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -4,10 +4,10 @@ const message = {
    commons: {
        true: '是',
        false: '否',
+        colon: '：',
        example: '例：',
        fit2cloud: '飞致云',
        lingxia: '凌霞',
-        colon: '： ',
        button: {
            run: '运行',
            prev: '上一步',
@ -126,8 +126,8 @@ const message = {
            protocol: '协议',
            tableSetting: '列表设置',
            refreshRate: '刷新频率',
-            noRefresh: '不刷新',
            selectColumn: '选择列',
+            noRefresh: '不刷新',
            local: '本地',
            serialNumber: '序号',
        },
@ -444,7 +444,7 @@ const message = {
        loadBackup: '导入备份',
        remoteAccess: '远程访问',
        remoteHelper: '多个 ip 以逗号分隔，例：172.16.10.111,172.16.10.112',
-        remoteConnHelper: 'root 帐号远程连接 mysql 有安全风险，开启需谨慎！',
+        remoteConnHelper: 'root 帐号远程连接 MySQL 有安全风险，开启需谨慎！',
        changePassword: '改密',
        changeConnHelper: '此操作将修改当前数据库 {0}，是否继续？',
        changePasswordHelper: '当前数据库已经关联应用，修改密码将同步修改应用中数据库密码，修改后重启生效。',
@ -462,6 +462,7 @@ const message = {
        passwordHelper: '无法获取密码，请修改',
        remote: '远程',
        remoteDB: '远程服务器',
+        manageRemoteDB: '管理远程服务器',
        createRemoteDB: '添加远程服务器',
        unBindRemoteDB: '解绑远程服务器',
        unBindForce: '强制解绑',
@ -938,6 +939,7 @@ const message = {
        taskType: '任务类型',
        nextTime: '近 5 次执行',
        record: '报告',
+        viewRecords: '查看报告',
        shell: 'Shell 脚本',
        log: '备份日志',
        logHelper: '备份系统日志',
@ -1201,6 +1203,7 @@ const message = {
                'ClamAV 的最低建议配置为：3 GiB 以上的 RAM，2.0 GHz 以上的单核 CPU，以及至少 5 GiB 的可用硬盘空间',
            notStart: '当前未开启 ClamAV 服务，请先开启！',
            removeRecord: '删除报告文件',
+            noRecords: '点击“执行”按钮开始扫描，扫描结果将会记录在这里。',
            removeResultHelper: '删除任务执行过程中生成的报告文件，以清理存储空间。',
            removeInfected: '删除病毒文件',
            removeInfectedHelper: '删除任务检测到的病毒文件，以确保服务器的安全和正常运行。',
@ -1277,6 +1280,7 @@ const message = {
        fileName: '文件名',
        search: '在当前目录下查找',
        mode: '权限',
+        editPermissions: '编辑@:file.mode',
        owner: '所有者',
        file: '文件',
        remoteFile: '远程下载',
@ -1524,12 +1528,12 @@ const message = {
        developerModeHelper: '获取 1Panel 的预览版本，以分享有关新功能和更新的反馈',

        thirdParty: '第三方账号',
+        noTypeForCreate: '当前无可创建备份类型',
        scope: '使用范围',
        public: '公有',
        publicHelper: '公有类型的备份账号会同步到各个子节点，子节点可以一起使用',
        private: '私有',
        privateHelper: '私有类型的备份账号只创建在当前节点上，仅供当前节点使用',
-        noTypeForCreate: '当前无可创建备份类型',
        LOCAL: '服务器磁盘',
        OSS: '阿里云 OSS',
        S3: '亚马逊 S3 云存储',
@ -1642,6 +1646,7 @@ const message = {
        reRollback: '回滚快照失败',
        deleteHelper: '将删除该快照的所有备份文件，包括第三方备份账号中的文件。',
        ignoreRule: '排除规则',
+        editIgnoreRule: '@:commons.button.edit@:setting.ignoreRule',
        ignoreHelper: '快照时将使用该规则对 1Panel 数据目录进行压缩备份，请谨慎修改。',
        ignoreHelper1: '一行一个，例： \n*.log\n/opt/1panel/cache',
        status: '快照状态',
@ -2008,7 +2013,7 @@ const message = {
        deleteApp: '删除应用',
        deleteBackup: '删除备份',
        domain: '域名',
-        domainHelper: '一行一个域名,支持*和IP地址,支持域名:端口',
+        domainHelper: '一行一个域名，支持*和IP地址，支持"域名:端口"',
        addDomain: '新增域名',
        domainConfig: '域名设置',
        defaultDoc: '默认文档',
@ -2129,7 +2134,7 @@ const message = {
        websiteDeploymentHelper: '使用从 1Panel 部署的应用创建网站',
        websiteStatictHelper: '在主机上创建网站目录',
        websiteProxyHelper:
-            '代理已有服务,例如本机已安装使用 8080 端口的 halo 服务，那么代理地址为 http://127.0.0.1:8080',
+            '代理已有服务。例如本机已安装使用 8080 端口的 halo 服务，那么代理地址为 http://127.0.0.1:8080',
        restoreHelper: '确认使用此备份恢复？',
        wafValueHelper: '值',
        runtimeProxyHelper: '使用从 1Panel 创建的运行环境',
@ -2161,7 +2166,7 @@ const message = {
        disabled: '已停止',
        startProxy: '开启反向代理',
        stopProxy: '关闭反向代理',
-        proxyFile: '源文',
+        sourceFile: '源文',
        proxyHelper1: '访问这个目录时将会把目标URL的内容返回并显示',
        proxyPassHelper: '代理的站点，必须为可正常访问的URL',
        proxyHostHelper: '将域名添加到请求头传递到代理服务器',
@ -2468,8 +2473,11 @@ const message = {
        addressHelper2: '多个 IP 或 IP 段 请用 "," 隔开：172.16.10.11,172.16.0.0/24',
        allIP: '所有 IP',
        portRule: '端口规则',
+        createPortRule: '@:commons.button.create@:firewall.portRule',
        forwardRule: '端口转发',
+        createForwardRule: '@:commons.button.create@:firewall.forwardRule',
        ipRule: 'IP 规则',
+        createIpRule: '@:commons.button.create @:firewall.ipRule',
        userAgent: 'User-Agent 过滤',
        destination: '目的地',
        sourcePort: '源端口',
@ -2578,6 +2586,7 @@ const message = {
        laddr: '本地地址/端口',
        raddr: '远程地址/端口',
        stopProcess: '结束',
+        viewDetails: '查看详情',
        stopProcessWarn: '是否确定结束此进程 (PID:{0})？',
        processName: '进程名称',
    },
--- a/frontend/src/layout/components/Sidebar/components/SubItem.vue
+++ b/frontend/src/layout/components/Sidebar/components/SubItem.vue
@ -5,7 +5,7 @@
                <el-icon>
                    <SvgIcon :iconName="(subItem.meta?.icon as string)" />
                </el-icon>
-                <span>{{ $t(subItem.meta?.title as string) }}</span>
+                <span>{{ $t(subItem.meta?.title as string, 2) }}</span>
            </template>
            <SubItem :menuList="subItem.children" />
        </el-sub-menu>
@ -15,7 +15,7 @@
                <SvgIcon :iconName="(subItem.meta?.icon as string)" />
            </el-icon>
            <template #title>
-                <span>{{ $t(subItem.meta?.title as string) }}</span>
+                <span>{{ $t(subItem.meta?.title as string, 2) }}</span>
            </template>
        </el-menu-item>

@ -24,8 +24,8 @@
                <SvgIcon :iconName="(subItem.meta?.icon as string)" />
            </el-icon>
            <template #title>
-                <span v-if="subItem.meta?.icon">{{ $t(subItem.meta?.title as string) }}</span>
-                <span v-else style="margin-left: 10px">{{ $t(subItem.meta?.title as string) }}</span>
+                <span v-if="subItem.meta?.icon">{{ $t(subItem.meta?.title as string, 2) }}</span>
+                <span v-else style="margin-left: 10px">{{ $t(subItem.meta?.title as string, 2) }}</span>
            </template>
        </el-menu-item>
    </template>
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@ -521,17 +521,17 @@ export function getAge(d1: string): string {

    let res = '';
    if (dayDiff > 0) {
-        res += String(dayDiff) + ' ' + i18n.global.t('commons.units.day') + ' ';
+        res += String(dayDiff) + ' ' + i18n.global.t('commons.units.day', dayDiff) + ' ';
        if (hours <= 0) {
            return res;
        }
    }
    if (hours > 0) {
-        res += String(hours) + ' ' + i18n.global.t('commons.units.hour');
+        res += String(hours) + ' ' + i18n.global.t('commons.units.hour', hours);
        return res;
    }
    if (minutes > 0) {
-        res += String(minutes) + ' ' + i18n.global.t('commons.units.minute');
+        res += String(minutes) + ' ' + i18n.global.t('commons.units.minute', minutes);
        return res;
    }
    return i18n.global.t('app.less1Minute');
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@ -1,5 +1,5 @@
 <template>
-    <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
+    <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app', 2)">
        <template #search>
            <Tags @change="changeTag" />
        </template>
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@ -228,7 +228,8 @@
                                                    class="d-description flex flex-wrap items-center justify-start gap-1.5"
                                                >
                                                    <el-button class="mr-1" plain size="small">
-                                                        {{ $t('app.version') }}：{{ installed.version }}
+                                                        {{ $t('app.version') }}{{ $t('commons.colon')
+                                                        }}{{ installed.version }}
                                                    </el-button>
                                                    <el-button
                                                        v-if="installed.httpPort > 0"
@ -236,7 +237,8 @@
                                                        plain
                                                        size="small"
                                                    >
-                                                        {{ $t('app.busPort') }}：{{ installed.httpPort }}
+                                                        {{ $t('app.busPort') }}{{ $t('commons.colon')
+                                                        }}{{ installed.httpPort }}
                                                    </el-button>
                                                    <el-button v-if="installed.httpsPort > 0" plain size="small">
                                                        {{ $t('app.busPort') }}：{{ installed.httpsPort }}
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@ -11,7 +11,7 @@
            @search="search"
        />

-        <LayoutContent v-if="!isOnDetail && isExist" :title="$t('container.compose')" :class="{ mask: !isActive }">
+        <LayoutContent v-if="!isOnDetail && isExist" :title="$t('container.compose', 2)" :class="{ mask: !isActive }">
            <template #leftToolBar>
                <el-button type="primary" @click="onOpenDialog()">
                    {{ $t('container.createCompose') }}
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@ -2,7 +2,7 @@
    <div v-loading="loading">
        <docker-status v-model:isActive="isActive" v-model:isExist="isExist" @search="search" />

-        <LayoutContent :title="$t('menu.container')" v-if="isExist" :class="{ mask: !isActive }">
+        <LayoutContent :title="$t('menu.container', 2)" v-if="isExist" :class="{ mask: !isActive }">
            <template #search v-if="tags.length !== 0">
                <div class="card-interval" v-if="isExist && isActive">
                    <div v-for="item in tags" :key="item.key" class="inline">
--- a/frontend/src/views/container/container/upgrade/index.vue
+++ b/frontend/src/views/container/container/upgrade/index.vue
@ -11,7 +11,7 @@
            v-if="form.fromApp"
            class="common-prompt"
            :closable="false"
-            type="error"
+            type="warning"
        />
        <el-form @submit.prevent ref="formRef" :model="form" label-position="top">
            <el-form-item :label="$t('container.oldImage')" prop="oldImage">
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@ -8,7 +8,7 @@
            @mounted="loadRepos"
        />

-        <LayoutContent v-if="isExist" :title="$t('container.image')" :class="{ mask: !isActive }">
+        <LayoutContent v-if="isExist" :title="$t('container.image', 2)" :class="{ mask: !isActive }">
            <template #leftToolBar>
                <el-button type="primary" plain @click="onOpenPull">
                    {{ $t('container.imagePull') }}
--- a/frontend/src/views/container/index.vue
+++ b/frontend/src/views/container/index.vue
@ -16,35 +16,35 @@ const buttons = [
        path: '/containers/dashboard',
    },
    {
-        label: i18n.global.t('menu.container'),
+        label: i18n.global.t('menu.container', 2),
        path: '/containers/container',
    },
    {
-        label: i18n.global.t('container.compose'),
+        label: i18n.global.t('container.compose', 2),
        path: '/containers/compose',
    },
    {
-        label: i18n.global.t('container.image'),
+        label: i18n.global.t('container.image', 2),
        path: '/containers/image',
    },
    {
-        label: i18n.global.t('container.network'),
+        label: i18n.global.t('container.network', 2),
        path: '/containers/network',
    },
    {
-        label: i18n.global.t('container.volume'),
+        label: i18n.global.t('container.volume', 2),
        path: '/containers/volume',
    },
    {
-        label: i18n.global.t('container.repo'),
+        label: i18n.global.t('container.repo', 2),
        path: '/containers/repo',
    },
    {
-        label: i18n.global.t('container.composeTemplate'),
+        label: i18n.global.t('container.composeTemplate', 2),
        path: '/containers/template',
    },
    {
-        label: i18n.global.t('container.setting'),
+        label: i18n.global.t('container.setting', 2),
        path: '/containers/setting',
    },
 ];
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@ -7,7 +7,7 @@
            @search="search"
        />

-        <LayoutContent v-if="isExist" :title="$t('container.network')" :class="{ mask: !isActive }">
+        <LayoutContent v-if="isExist" :title="$t('container.network', 2)" :class="{ mask: !isActive }">
            <template #leftToolBar>
                <el-button type="primary" @click="onCreate()">
                    {{ $t('container.createNetwork') }}
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@ -7,7 +7,7 @@
            @search="search"
        />

-        <LayoutContent v-if="isExist" :title="$t('container.repo')" :class="{ mask: !isActive }">
+        <LayoutContent v-if="isExist" :title="$t('container.repo', 2)" :class="{ mask: !isActive }">
            <template #leftToolBar>
                <el-button type="primary" @click="onOpenDialog('add')">
                    {{ $t('container.createRepo') }}
--- a/frontend/src/views/container/repo/operator/index.vue
+++ b/frontend/src/views/container/repo/operator/index.vue
@ -1,7 +1,7 @@
 <template>
    <DrawerPro
        v-model="drawerVisible"
-        :header="title + $t('container.repo')"
+        :header="title + $t('container.repo').toLowerCase()"
        :resource="dialogData.rowData?.name"
        @close="handleClose"
        size="small"
@ -45,7 +45,7 @@
                    :placeholder="'172.16.10.10:8081'"
                ></el-input>
                <span v-if="dialogData.rowData!.downloadUrl" class="input-help">
-                    docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
+                    Pull example:docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
                </span>
            </el-form-item>
            <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@ -32,7 +32,7 @@
            </el-card>
        </div>

-        <LayoutContent v-if="isExist" class="card-interval" :title="$t('container.setting')">
+        <LayoutContent v-if="isExist" class="card-interval" :title="$t('container.setting', 2)">
            <template #main>
                <el-radio-group v-model="confShowType" @change="changeMode">
                    <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
@ -98,7 +98,7 @@
                                </el-input>
                            </el-form-item>

-                            <el-form-item label="ipv6" prop="ipv6">
+                            <el-form-item label="IPv6" prop="ipv6">
                                <el-switch v-model="form.ipv6" @change="handleIPv6"></el-switch>
                                <span class="input-help"></span>
                                <div v-if="ipv6OptionShow">
@ -129,7 +129,7 @@
                                <el-switch v-model="form.iptables" @change="handleIptables"></el-switch>
                                <span class="input-help">{{ $t('container.iptablesHelper1') }}</span>
                            </el-form-item>
-                            <el-form-item label="live-restore" prop="liveRestore">
+                            <el-form-item label="Live restore" prop="liveRestore">
                                <el-switch
                                    :disabled="form.isSwarm"
                                    v-model="form.liveRestore"
@ -140,7 +140,7 @@
                                    {{ $t('container.liveWithSwarmHelper') }}
                                </span>
                            </el-form-item>
-                            <el-form-item label="cgroup-driver" prop="cgroupDriver">
+                            <el-form-item label="cgroup driver" prop="cgroupDriver">
                                <el-radio-group v-model="form.cgroupDriver" @change="handleCgroup">
                                    <el-radio value="cgroupfs">cgroupfs</el-radio>
                                    <el-radio value="systemd">systemd</el-radio>
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@ -7,7 +7,7 @@
            @search="search"
        />

-        <LayoutContent v-if="isExist" :title="$t('container.composeTemplate')" :class="{ mask: !isActive }">
+        <LayoutContent v-if="isExist" :title="$t('container.composeTemplate', 2)" :class="{ mask: !isActive }">
            <template #leftToolBar>
                <el-button type="primary" @click="onOpenDialog('create')">
                    {{ $t('container.createComposeTemplate') }}
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@ -7,7 +7,7 @@
            @search="search"
        />

-        <LayoutContent v-if="isExist" :title="$t('container.volume')" :class="{ mask: !isActive }">
+        <LayoutContent v-if="isExist" :title="$t('container.volume', 2)" :class="{ mask: !isActive }">
            <template #leftToolBar>
                <el-button type="primary" @click="onCreate()">
                    {{ $t('container.createVolume') }}
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@ -44,7 +44,7 @@
                    {{ $t('database.loadFromRemote') }}
                </el-button>
                <el-button @click="goRemoteDB()" type="primary" plain>
-                    {{ $t('database.remoteDB') }}
+                    {{ $t('database.manageRemoteDB') }}
                </el-button>
                <el-dropdown>
                    <el-button type="primary" plain>
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@ -1,6 +1,6 @@
 <template>
    <div v-loading="loading">
-        <LayoutContent :title="$t('database.remoteDB')" backName="PostgreSQL">
+        <LayoutContent :title="$t('database.remoteDB', 2)" backName="PostgreSQL">
            <template #leftToolBar>
                <el-button type="primary" @click="onOpenDialog('create')">
                    {{ $t('database.createRemoteDB') }}
--- a/frontend/src/views/database/redis/remote/index.vue
+++ b/frontend/src/views/database/redis/remote/index.vue
@ -1,6 +1,6 @@
 <template>
    <div v-loading="loading">
-        <LayoutContent :title="$t('database.remoteDB')" backName="Redis">
+        <LayoutContent :title="$t('database.remoteDB', 2)" backName="Redis">
            <template #leftToolBar>
                <el-button type="primary" @click="onOpenDialog('create')">
                    {{ $t('database.createRemoteDB') }}
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@ -47,7 +47,7 @@
                        <div class="h-overview">
                            <el-row>
                                <el-col :span="6">
-                                    <span>{{ $t('menu.website') }}</span>
+                                    <span>{{ $t('menu.website', 2) }}</span>
                                    <div class="count">
                                        <span @click="jumpToPath(router, '/websites')">
                                            {{ baseInfo?.websiteNumber }}
@ -55,7 +55,7 @@
                                    </div>
                                </el-col>
                                <el-col :span="6">
-                                    <span>{{ $t('menu.database') }} - {{ $t('commons.table.all') }}</span>
+                                    <span>{{ $t('menu.database', 2) }} - {{ $t('commons.table.all') }}</span>
                                    <div class="count">
                                        <span @click="jumpToPath(router, '/databases')">
                                            {{ baseInfo?.databaseNumber }}
@ -63,7 +63,7 @@
                                    </div>
                                </el-col>
                                <el-col :span="6">
-                                    <span>{{ $t('menu.cronjob') }}</span>
+                                    <span>{{ $t('menu.cronjob', 2) }}</span>
                                    <div class="count">
                                        <span @click="jumpToPath(router, '/cronjobs')">
                                            {{ baseInfo?.cronjobNumber }}
@ -180,20 +180,16 @@
                <CardWithHeader :header="$t('home.systemInfo')">
                    <template #body>
                        <el-scrollbar>
-                            <el-descriptions :column="1" class="h-systemInfo">
-                                <el-descriptions-item class-name="system-content">
+                            <el-descriptions :column="1" class="h-systemInfo" border>
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.hostname') }}
-                                        </span>
+                                        <span>{{ $t('home.hostname') }}</span>
                                    </template>
                                    {{ baseInfo.hostname }}
                                </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.platformVersion') }}
-                                        </span>
+                                        <span>{{ $t('home.platformVersion') }}</span>
                                    </template>
                                    {{
                                        baseInfo.platformVersion
@ -201,54 +197,43 @@
                                            : baseInfo.platform + '-' + baseInfo.platformVersion
                                    }}
                                </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.kernelVersion') }}
-                                        </span>
+                                        <span>{{ $t('home.kernelVersion') }}</span>
                                    </template>
                                    {{ baseInfo.kernelVersion }}
                                </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.kernelArch') }}
-                                        </span>
+                                        <span>{{ $t('home.kernelArch') }}</span>
                                    </template>
                                    {{ baseInfo.kernelArch }}
                                </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.ip') }}
-                                        </span>
+                                        <span>{{ $t('home.ip') }}</span>
                                    </template>
                                    {{ baseInfo.ipV4Addr }}
                                </el-descriptions-item>
                                <el-descriptions-item
                                    v-if="baseInfo.httpProxy && baseInfo.httpProxy !== 'noProxy'"
                                    class-name="system-content"
+                                    label-class-name="system-label"
                                >
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.proxy') }}
-                                        </span>
+                                        <span>{{ $t('home.proxy') }}</span>
                                        {{ baseInfo.httpProxy }}
                                    </template>
                                </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.uptime') }}
-                                        </span>
+                                        <span>{{ $t('home.uptime') }}</span>
                                    </template>
                                    {{ currentInfo.timeSinceUptime }}
                                </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                    <template #label>
-                                        <span class="system-label">
-                                            {{ $t('home.runningTime') }}
-                                        </span>
+                                        <span>{{ $t('home.runningTime') }}</span>
                                    </template>
                                    {{ loadUpTime(currentInfo.uptime) }}
                                </el-descriptions-item>
@ -611,10 +596,16 @@ onBeforeUnmount(() => {
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--panel-text-color);
+    border: none !important;
+    background: none !important;
+    width: fit-content !important;
+    white-space: nowrap !important;
 }

 .system-content {
    font-size: 13px !important;
+    border: none !important;
+    width: 100% !important;
 }

 .monitor-tags {
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@ -47,7 +47,8 @@
                </template>
            </el-popover>
            <span class="input-help">
-                ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) {{ $t('commons.units.core') }}
+                ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} )
+                {{ $t('commons.units.core', currentInfo.cpuTotal) }}
            </span>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
@ -90,14 +91,10 @@
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
            <el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
+                <el-tag class="tagClass">{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
+                <el-tag class="tagClass">{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', [1]) }}: {{ formatNumber(currentInfo.load1) }}
-                </el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', [5]) }}: {{ formatNumber(currentInfo.load5) }}
-                </el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', [15]) }}: {{ formatNumber(currentInfo.load15) }}
+                    {{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}
                </el-tag>
                <template #reference>
                    <v-charts
--- a/frontend/src/views/host/file-management/batch-role/index.vue
+++ b/frontend/src/views/host/file-management/batch-role/index.vue
@ -1,5 +1,5 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('file.setRole')" @close="handleClose" size="large">
+    <DrawerPro v-model="open" :header="$t('file.editPermissions')" @close="handleClose" size="large">
        <div v-loading="loading">
            <FileRole :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
            <el-form ref="fileForm" label-position="left" :model="addForm" label-width="100px" :rules="rules">
--- a/frontend/src/views/host/file-management/change-role/index.vue
+++ b/frontend/src/views/host/file-management/change-role/index.vue
@ -1,5 +1,5 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('file.setRole')" @close="handleClose" :resource="name" size="large">
+    <DrawerPro v-model="open" :header="$t('file.editPermissions')" @close="handleClose" :resource="name" size="large">
        <FileRole v-loading="loading" :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
        <el-form-item v-if="form.isDir">
            <el-checkbox v-model="form.sub">{{ $t('file.containSub') }}</el-checkbox>
--- a/frontend/src/views/host/file-management/create/index.vue
+++ b/frontend/src/views/host/file-management/create/index.vue
@ -29,7 +29,7 @@
                </el-input>
            </el-form-item>
            <el-form-item>
-                <el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
+                <el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.editPermissions')"></el-checkbox>
            </el-form-item>
        </el-form>
        <FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode" :key="open.toString()"></FileRole>
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@ -1350,7 +1350,7 @@ const buttons = [
        },
    },
    {
-        label: i18n.global.t('file.mode'),
+        label: i18n.global.t('file.editPermissions'),
        click: (row: File.File) => {
            openBatchRole([row]);
        },
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@ -16,10 +16,10 @@
                    <span>{{ $t('firewall.firewallNotStart') }}</span>
                </el-card>

-                <LayoutContent :title="$t('firewall.forwardRule')" :class="{ mask: !isActive }">
+                <LayoutContent :title="$t('firewall.forwardRule', 2)" :class="{ mask: !isActive }">
                    <template #leftToolBar>
                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('commons.button.create') }}{{ $t('firewall.forwardRule') }}
+                            {{ $t('firewall.createForwardRule') }}
                        </el-button>
                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
                            {{ $t('commons.button.delete') }}
--- a/frontend/src/views/host/firewall/index.vue
+++ b/frontend/src/views/host/firewall/index.vue
@ -12,15 +12,15 @@ import i18n from '@/lang';

 const buttons = [
    {
-        label: i18n.global.t('firewall.portRule'),
+        label: i18n.global.t('firewall.portRule', 2),
        path: '/hosts/firewall/port',
    },
    {
-        label: i18n.global.t('firewall.forwardRule'),
+        label: i18n.global.t('firewall.forwardRule', 2),
        path: '/hosts/firewall/forward',
    },
    {
-        label: i18n.global.t('firewall.ipRule'),
+        label: i18n.global.t('firewall.ipRule', 2),
        path: '/hosts/firewall/ip',
    },
 ];
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@ -17,10 +17,10 @@
                    <span>{{ $t('firewall.firewallNotStart') }}</span>
                </el-card>

-                <LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: !isActive }">
+                <LayoutContent :title="$t('firewall.ipRule', 2)" :class="{ mask: !isActive }">
                    <template #leftToolBar>
                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
+                            {{ $t('firewall.createIpRule') }}
                        </el-button>
                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
                            {{ $t('commons.button.delete') }}
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@ -16,7 +16,7 @@
                    <span>{{ $t('firewall.firewallNotStart') }}</span>
                </el-card>

-                <LayoutContent :title="$t('firewall.portRule')" :class="{ mask: !isActive }">
+                <LayoutContent :title="$t('firewall.portRule', 2)" :class="{ mask: !isActive }">
                    <template #prompt>
                        <el-alert type="info" :closable="false">
                            <template #default>
--- a/frontend/src/views/host/monitor/index.vue
+++ b/frontend/src/views/host/monitor/index.vue
@ -16,7 +16,7 @@ const buttons = [
        path: '/hosts/monitor/monitor',
    },
    {
-        label: i18n.global.t('commons.button.set'),
+        label: i18n.global.t('menu.settings', 2),
        path: '/hosts/monitor/setting',
    },
 ];
--- a/frontend/src/views/host/monitor/setting/index.vue
+++ b/frontend/src/views/host/monitor/setting/index.vue
@ -2,7 +2,7 @@
    <div>
        <MonitorRouter />

-        <LayoutContent v-loading="loading" :title="$t('commons.button.set')" :divider="true">
+        <LayoutContent v-loading="loading" :title="$t('menu.settings', 2)" :divider="true">
            <template #main>
                <el-form :model="form" @submit.prevent ref="panelFormRef" label-position="left" label-width="160px">
                    <el-row>
--- a/frontend/src/views/host/process/index.vue
+++ b/frontend/src/views/host/process/index.vue
@ -12,11 +12,11 @@ import i18n from '@/lang';

 const buttons = [
    {
-        label: i18n.global.t('menu.process'),
+        label: i18n.global.t('menu.process', 2),
        path: '/hosts/process/process',
    },
    {
-        label: i18n.global.t('menu.network'),
+        label: i18n.global.t('menu.network', 2),
        path: '/hosts/process/network',
    },
 ];
--- a/frontend/src/views/host/process/network/index.vue
+++ b/frontend/src/views/host/process/network/index.vue
@ -1,7 +1,7 @@
 <template>
    <div>
        <FireRouter />
-        <LayoutContent :title="$t('menu.network')" v-loading="loading">
+        <LayoutContent :title="$t('menu.network', 2)" v-loading="loading">
            <template #rightToolBar>
                <div class="w-full">
                    <el-form-item class="float-right">
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@ -1,7 +1,7 @@
 <template>
    <div>
        <FireRouter />
-        <LayoutContent :title="$t('menu.process')" v-loading="loading">
+        <LayoutContent :title="$t('menu.process', 2)" v-loading="loading">
            <template #rightToolBar>
                <div class="w-full">
                    <el-form-item class="float-right">
@ -137,7 +137,7 @@ const opRef = ref();

 const buttons = [
    {
-        label: i18n.global.t('app.detail'),
+        label: i18n.global.t('process.viewDetails'),
        click: function (row: any) {
            openDetail(row);
        },
--- a/frontend/src/views/host/ssh/index.vue
+++ b/frontend/src/views/host/ssh/index.vue
@ -12,15 +12,15 @@ import i18n from '@/lang';

 const buttons = [
    {
-        label: i18n.global.t('menu.config'),
+        label: i18n.global.t('menu.settings', 2),
        path: '/hosts/ssh/ssh',
    },
    {
-        label: i18n.global.t('ssh.session'),
+        label: i18n.global.t('ssh.session', 2),
        path: '/hosts/ssh/session',
    },
    {
-        label: i18n.global.t('ssh.loginLogs'),
+        label: i18n.global.t('ssh.loginLogs', 2),
        path: '/hosts/ssh/log',
    },
 ];
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@ -1,6 +1,6 @@
 <template>
    <div>
-        <LayoutContent v-loading="loading" :title="$t('ssh.loginLogs')">
+        <LayoutContent v-loading="loading" :title="$t('ssh.loginLogs', 2)">
            <template #prompt>
                <el-alert type="info" :title="$t('ssh.sshAlert2')" :closable="false" />
                <div class="mt-2"><el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" /></div>
--- a/frontend/src/views/host/ssh/session/index.vue
+++ b/frontend/src/views/host/ssh/session/index.vue
@ -1,7 +1,7 @@
 <template>
    <div>
        <FireRouter />
-        <LayoutContent :title="$t('ssh.session')">
+        <LayoutContent :title="$t('ssh.session', 2)">
            <template #rightToolBar>
                <TableSearch @search="search()" v-model:searchName="sshSearch.loginUser" />
            </template>
--- a/frontend/src/views/host/ssh/ssh/address/index.vue
+++ b/frontend/src/views/host/ssh/ssh/address/index.vue
@ -1,7 +1,7 @@
 <template>
    <DrawerPro v-model="drawerVisible" :header="$t('ssh.listenAddress')" @close="handleClose" size="small">
        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
-            <el-alert class="common-prompt" :closable="false" type="error">
+            <el-alert class="common-prompt" :closable="false" type="warning">
                <template #default>
                    <span>
                        {{ $t('ssh.listenHelper', [form.port]) }}
--- a/frontend/src/views/host/ssh/ssh/index.vue
+++ b/frontend/src/views/host/ssh/ssh/index.vue
@ -46,7 +46,7 @@
                <el-row class="mt-10" v-if="confShowType === 'base'">
                    <el-col :xs="24" :sm="20" :md="20" :lg="10" :xl="10">
                        <el-form :model="form" label-position="right" ref="formRef" label-width="100px">
-                            <el-form-item :label="$t('commons.table.port')" prop="port">
+                            <el-form-item :label="$t('ssh.port')" prop="port">
                                <el-input disabled v-model.number="form.port">
                                    <template #append>
                                        <el-button @click="onChangePort" icon="Setting">
--- a/frontend/src/views/host/ssh/ssh/port/index.vue
+++ b/frontend/src/views/host/ssh/ssh/port/index.vue
@ -1,7 +1,7 @@
 <template>
-    <DrawerPro v-model="drawerVisible" :header="$t('commons.table.port')" @close="handleClose" size="small">
+    <DrawerPro v-model="drawerVisible" :header="$t('ssh.port')" @close="handleClose" size="small">
        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-            <el-form-item :label="$t('commons.table.port')" prop="port" :rules="Rules.port">
+            <el-form-item :label="$t('ssh.port')" prop="port" :rules="Rules.port">
                <el-input clearable v-model.number="form.port" />
            </el-form-item>
        </el-form>
--- a/frontend/src/views/setting/index.vue
+++ b/frontend/src/views/setting/index.vue
@ -20,11 +20,11 @@ const buttons = [
        path: '/settings/safe',
    },
    {
-        label: i18n.global.t('setting.backupAccount'),
+        label: i18n.global.t('setting.backupAccount', 2),
        path: '/settings/backupaccount',
    },
    {
-        label: i18n.global.t('setting.snapshot'),
+        label: i18n.global.t('setting.snapshot', 2),
        path: '/settings/snapshot',
    },
    {
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@ -1,6 +1,6 @@
 <template>
    <div>
-        <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('setting.snapshot')">
+        <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('setting.snapshot', 2)">
            <template #leftToolBar>
                <el-button type="primary" @click="onCreate()">
                    {{ $t('setting.createSnapshot') }}
@ -9,7 +9,7 @@
                    {{ $t('setting.importSnapshot') }}
                </el-button>
                <el-button type="primary" plain @click="onIgnore()">
-                    {{ $t('setting.ignoreRule') }}
+                    {{ $t('setting.editIgnoreRule') }}
                </el-button>
                <el-button type="primary" plain :disabled="selects.length === 0" @click="batchDelete(null)">
                    {{ $t('commons.button.delete') }}
--- a/frontend/src/views/terminal/host/index.vue
+++ b/frontend/src/views/terminal/host/index.vue
@ -1,12 +1,12 @@
 <template>
    <div>
-        <LayoutContent v-loading="loading" :title="$t('terminal.host')">
+        <LayoutContent v-loading="loading" :title="$t('terminal.host', 2)">
            <template #leftToolBar>
                <el-button type="primary" @click="onOpenDialog('create')">
                    {{ $t('terminal.addHost') }}
                </el-button>
                <el-button type="primary" plain @click="onOpenGroupDialog()">
-                    {{ $t('commons.table.group') }}
+                    {{ $t('commons.table.manageGroup') }}
                </el-button>
                <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
                    {{ $t('commons.button.delete') }}
--- a/frontend/src/views/terminal/index.vue
+++ b/frontend/src/views/terminal/index.vue
@ -3,13 +3,13 @@
        <el-card class="router_card">
            <el-radio-group v-model="activeNames" @change="handleChange">
                <el-radio-button class="router_card_button" size="large" value="terminal">
-                    {{ $t('menu.terminal') }}
+                    {{ $t('menu.terminal', 2) }}
                </el-radio-button>
                <el-radio-button class="router_card_button" size="large" value="host">
-                    {{ $t('terminal.host') }}
+                    {{ $t('terminal.host', 2) }}
                </el-radio-button>
                <el-radio-button class="router_card_button" size="large" value="command">
-                    {{ $t('terminal.quickCommand') }}
+                    {{ $t('terminal.quickCommand', 2) }}
                </el-radio-button>
                <el-radio-button class="router_card_button" size="large" value="setting">
                    {{ $t('container.setting') }}
--- a/frontend/src/views/terminal/terminal/index.vue
+++ b/frontend/src/views/terminal/terminal/index.vue
@ -400,7 +400,7 @@ const onConnTerminal = async (title: string, wsID: number) => {
                endpoint: '/api/v2/core/hosts/terminal',
                args: `id=${wsID}`,
                initCmd: initCmd.value,
-                error: res.data ? '' : 'Authentication failed.  Please check the host information !',
+                error: res.data ? '' : 'Authentication failed. Please check the host information!',
            });
        initCmd.value = '';
    });
--- a/frontend/src/views/toolbox/clam/record/index.vue
+++ b/frontend/src/views/toolbox/clam/record/index.vue
@ -146,7 +146,7 @@
                </div>
                <div class="app-warn" v-show="!hasRecords">
                    <div>
-                        <span>{{ $t('cronjob.noRecord') }}</span>
+                        <span>{{ $t('toolbox.clam.noRecords') }}</span>
                        <div>
                            <img src="@/assets/images/no_app.svg" />
                        </div>
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@ -23,10 +23,10 @@
            </el-card>
        </div>
        <div v-if="form.isExist">
-            <LayoutContent v-loading="loading" title="FTP" :class="{ mask: !form.isActive }">
+            <LayoutContent v-loading="loading" :title="$t('toolbox.ftp.ftp', 2)" :class="{ mask: !form.isActive }">
                <template #leftToolBar>
                    <el-button type="primary" @click="onOpenDialog('add')">
-                        {{ $t('commons.button.add') }} FTP
+                        {{ $t('commons.button.add') }} {{ $t('toolbox.ftp.ftp') }}
                    </el-button>
                    <el-button @click="onSync()">
                        {{ $t('commons.button.sync') }}
--- a/frontend/src/views/toolbox/supervisor/file/index.vue
+++ b/frontend/src/views/toolbox/supervisor/file/index.vue
@ -125,9 +125,9 @@ const acceptParams = (name: string, file: string, operate: string) => {
 const cleanLog = async () => {
    let log = req.file === 'out.log' ? i18n.global.t('logs.runLog') : i18n.global.t('logs.errLog');
    opRef.value.acceptParams({
-        title: i18n.global.t('commons.msg.clean'),
+        title: i18n.global.t('commons.button.clean'),
        names: [req.name],
-        msg: i18n.global.t('commons.msg.operatorHelper', [log, i18n.global.t('commons.msg.clean')]),
+        msg: i18n.global.t('commons.msg.operatorHelper', [log, i18n.global.t('commons.button.clean')]),
        api: operateSupervisorProcessFile,
        params: { name: req.name, operate: 'clear', file: req.file },
    });
--- a/frontend/src/views/toolbox/supervisor/index.vue
+++ b/frontend/src/views/toolbox/supervisor/index.vue
@ -3,7 +3,7 @@
        <el-card v-if="showStopped" class="mask-prompt">
            <span>{{ $t('tool.supervisor.notStartWarn') }}</span>
        </el-card>
-        <LayoutContent :title="$t('tool.supervisor.list')" v-loading="loading">
+        <LayoutContent :title="$t('tool.supervisor.list', 2)" v-loading="loading">
            <template #app>
                <SuperVisorStatus
                    @setting="setting"
@ -14,7 +14,7 @@
            </template>
            <template v-if="showTable" #leftToolBar>
                <el-button type="primary" @click="openCreate" :disabled="showStopped">
-                    {{ $t('commons.button.create') + $t('tool.supervisor.list') }}
+                    {{ $t('commons.button.create') + $t('tool.supervisor.list').toLowerCase() }}
                </el-button>
            </template>
            <template #main v-if="showTable">
@ -315,7 +315,7 @@ const buttons = [
        },
    },
    {
-        label: i18n.global.t('website.proxyFile'),
+        label: i18n.global.t('website.sourceFile'),
        click: function (row: HostTool.SupersivorProcess) {
            getFile(row.name, 'config');
        },
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@ -6,7 +6,7 @@
                    <div class="flex flex-wrap gap-4 ml-3">
                        <el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
                        <Status class="mt-0.5" :key="data.status" :status="data.status"></Status>
-                        <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
+                        <el-tag>{{ $t('app.version') }}{{ $t('commons.colon') }}{{ data.version }}</el-tag>
                    </div>
                    <div class="mt-0.5" v-if="!data.init">
                        <el-button type="primary" v-if="data.status != 'running'" link @click="onOperate('start')">
--- a/frontend/src/views/website/runtime/go/operate/index.vue
+++ b/frontend/src/views/website/runtime/go/operate/index.vue
@ -1,59 +1,142 @@
 <template>
-    <DrawerPro
-        v-model="open"
-        :header="$t('runtime.' + mode)"
-        size="large"
-        :resource="mode === 'edit' ? runtime.name : ''"
-        @close="handleClose"
-    >
-        <el-form
-            v-loading="loading"
-            ref="runtimeForm"
-            label-position="top"
-            :model="runtime"
-            label-width="125px"
-            :rules="rules"
-            :validate-on-rule-change="false"
-        >
-            <el-form-item :label="$t('commons.table.name')" prop="name">
-                <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
-            </el-form-item>
-            <AppConfig v-model="runtime" :mode="mode" appKey="go" />
-            <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
-                <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
-                    <template #prepend>
-                        <FileList
-                            :disabled="mode === 'edit'"
-                            :path="runtime.codeDir"
-                            @choose="getPath"
-                            :dir="true"
-                        ></FileList>
-                    </template>
-                </el-input>
-                <span class="input-help">
-                    {{ $t('runtime.goDirHelper') }}
-                </span>
-            </el-form-item>
-            <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
-                <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
-                <span class="input-help">
-                    {{ $t('runtime.goHelper') }}
-                </span>
-            </el-form-item>
-            <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
-                <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
-            </el-form-item>
-            <el-tabs type="border-card">
-                <el-tab-pane :label="$t('commons.table.port')">
-                    <PortConfig v-model="runtime" :mode="mode" />
-                </el-tab-pane>
-                <el-tab-pane :label="$t('runtime.environment')">
-                    <Environment :environments="runtime.environments" />
-                </el-tab-pane>
-                <el-tab-pane :label="$t('container.mount')"><Volumes :volumes="runtime.volumes" /></el-tab-pane>
-            </el-tabs>
-        </el-form>
-
+    <DrawerPro v-model="open" size="50%">
+        <template #header>
+            <DrawerHeader
+                :header="$t('runtime.' + mode)"
+                :hideResource="mode == 'create'"
+                :resource="runtime.name"
+                :back="handleClose"
+            />
+        </template>
+        <el-row v-loading="loading">
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="runtimeForm"
+                    label-position="top"
+                    :model="runtime"
+                    label-width="125px"
+                    :rules="rules"
+                    :validate-on-rule-change="false"
+                >
+                    <el-form-item :label="$t('commons.table.name')" prop="name">
+                        <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('runtime.app')" prop="appID">
+                        <el-row :gutter="20">
+                            <el-col :span="12">
+                                <el-select
+                                    v-model="runtime.appID"
+                                    :disabled="mode === 'edit'"
+                                    @change="changeApp(runtime.appID)"
+                                    class="p-w-200"
+                                >
+                                    <el-option
+                                        v-for="(app, index) in apps"
+                                        :key="index"
+                                        :label="app.name"
+                                        :value="app.id"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-select
+                                    v-model="runtime.version"
+                                    :disabled="mode === 'edit'"
+                                    @change="changeVersion()"
+                                    class="p-w-200"
+                                >
+                                    <el-option
+                                        v-for="(version, index) in appVersions"
+                                        :key="index"
+                                        :label="version"
+                                        :value="version"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                    <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
+                        <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
+                            <template #prepend>
+                                <FileList
+                                    :disabled="mode === 'edit'"
+                                    :path="runtime.codeDir"
+                                    @choose="getPath"
+                                    :dir="true"
+                                ></FileList>
+                            </template>
+                        </el-input>
+                        <span class="input-help">
+                            {{ $t('runtime.goDirHelper') }}
+                        </span>
+                    </el-form-item>
+                    <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
+                        <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
+                        <span class="input-help">
+                            {{ $t('runtime.goHelper') }}
+                        </span>
+                    </el-form-item>
+                    <el-row :gutter="20">
+                        <el-col :span="7">
+                            <el-form-item :label="$t('runtime.appPort')" prop="params.GO_APP_PORT">
+                                <el-input v-model.number="runtime.params['GO_APP_PORT']" />
+                                <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                            <el-form-item :label="$t('runtime.externalPort')" prop="port">
+                                <el-input v-model.number="runtime.port" />
+                                <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
+                                <el-button @click="addPort">
+                                    <el-icon><Plus /></el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
+                                <el-switch
+                                    v-model="runtime.params['HOST_IP']"
+                                    :active-value="'0.0.0.0'"
+                                    :inactive-value="'127.0.0.1'"
+                                />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
+                        <el-col :span="7">
+                            <el-form-item
+                                :prop="'exposedPorts.' + index + '.containerPort'"
+                                :rules="rules.params.GO_APP_PORT"
+                            >
+                                <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                            <el-form-item
+                                :prop="'exposedPorts.' + index + '.hostPort'"
+                                :rules="rules.params.GO_APP_PORT"
+                            >
+                                <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-form-item>
+                                <el-button type="primary" @click="removePort(index)" link>
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
+                        <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
        <template #footer>
            <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
            <el-button type="primary" @click="submit(runtimeForm)" :disabled="loading">
@ -72,10 +155,6 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref, watch } from 'vue';
-import PortConfig from '@/views/website/runtime/port/index.vue';
-import Environment from '@/views/website/runtime/environment/index.vue';
-import Volumes from '@/views/website/runtime/volume/index.vue';
-import AppConfig from '@/views/website/runtime/app/index.vue';

 interface OperateRrops {
    id?: number;
--- a/frontend/src/views/website/ssl/ca/index.vue
+++ b/frontend/src/views/website/ssl/ca/index.vue
@ -1,5 +1,5 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('ssl.ca')" size="large" @close="handleClose">
+    <DrawerPro v-model="open" :header="$t('ssl.selfSigned')" size="large" @close="handleClose">
        <template #content>
            <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
                <template #toolbar>
@ -119,7 +119,7 @@ const deleteca = async (row: any) => {
        title: i18n.global.t('commons.button.delete'),
        names: [row.name],
        msg: i18n.global.t('commons.msg.operatorHelper', [
-            i18n.global.t('website.ca'),
+            i18n.global.t('ssl.ca'),
            i18n.global.t('commons.button.delete'),
        ]),
        api: deleteCA,
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@ -1,7 +1,7 @@
 <template>
    <div>
        <RouterButton :buttons="routerButton" />
-        <LayoutContent :title="$t('website.ssl')">
+        <LayoutContent :title="$t('website.ssl', 2)">
            <template #leftToolBar>
                <el-button type="primary" @click="openSSL()">
                    {{ $t('ssl.create') }}
@ -206,7 +206,7 @@ const req = reactive({

 const routerButton = [
    {
-        label: i18n.global.t('website.ssl'),
+        label: i18n.global.t('website.ssl', 2),
        path: '/websites/ssl',
    },
 ];
--- a/frontend/src/views/website/website/config/basic/proxy/file/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/file/index.vue
@ -1,5 +1,10 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('website.proxyFile')" @close="handleClose" :size="mobile ? 'full' : 'normal'">
+    <DrawerPro
+        v-model="open"
+        :header="$t('website.sourceFile')"
+        @close="handleClose"
+        :size="mobile ? 'full' : 'normal'"
+    >
        <CodemirrorPro v-model="req.content" mode="nginx"></CodemirrorPro>
        <template #footer>
            <span class="dialog-footer">
--- a/frontend/src/views/website/website/config/basic/proxy/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/index.vue
@ -72,7 +72,7 @@ const hasCache = ref(false);

 const buttons = [
    {
-        label: i18n.global.t('website.proxyFile'),
+        label: i18n.global.t('website.sourceFile'),
        click: function (row: Website.ProxyConfig) {
            openEditFile(row);
        },
@ -141,7 +141,7 @@ const deleteProxy = async (proxyConfig: Website.ProxyConfig) => {
        names: [proxyConfig.name],
        msg: i18n.global.t('commons.msg.operatorHelper', [
            i18n.global.t('website.proxy'),
-            i18n.global.t('commons.msg.delete'),
+            i18n.global.t('commons.button.delete'),
        ]),
        api: operateProxyConfig,
        params: proxyConfig,
--- a/frontend/src/views/website/website/config/basic/redirect/file/index.vue
+++ b/frontend/src/views/website/website/config/basic/redirect/file/index.vue
@ -1,5 +1,5 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('website.proxyFile')" @close="handleClose" size="normal">
+    <DrawerPro v-model="open" :header="$t('website.sourceFile')" @close="handleClose" size="normal">
        <CodemirrorPro v-model="req.content" mode="nginx"></CodemirrorPro>
        <template #footer>
            <span class="dialog-footer">
--- a/frontend/src/views/website/website/config/basic/redirect/index.vue
+++ b/frontend/src/views/website/website/config/basic/redirect/index.vue
@ -81,7 +81,7 @@ const opRef = ref();

 const buttons = [
    {
-        label: i18n.global.t('website.proxyFile'),
+        label: i18n.global.t('website.sourceFile'),
        click: function (row: Website.RedirectConfig) {
            openEditFile(row);
        },
@ -143,7 +143,7 @@ const deleteProxy = async (redirectConfig: Website.RedirectConfig) => {
        names: [redirectConfig.name],
        msg: i18n.global.t('commons.msg.operatorHelper', [
            i18n.global.t('website.redirect'),
-            i18n.global.t('commons.msg.delete'),
+            i18n.global.t('commons.button.delete'),
        ]),
        api: operateRedirectConfig,
        params: redirectConfig,
--- a/frontend/src/views/website/website/config/index.vue
+++ b/frontend/src/views/website/website/config/index.vue
@ -25,7 +25,7 @@
                    {{ $t('commons.button.log') }}
                </el-button>
                <el-button type="primary" :plain="index !== 'resource'" @click="changeTab('resource')">
-                    {{ $t('website.source') }}
+                    {{ $t('website.source', 2) }}
                </el-button>
            </template>
            <template #main>
--- a/frontend/src/views/website/website/config/log/log-fiile/index.vue
+++ b/frontend/src/views/website/website/config/log/log-fiile/index.vue
@ -71,9 +71,9 @@ const clearLog = () => {
 const cleanLog = async () => {
    let log = props.logType === 'access.log' ? i18n.global.t('website.accessLog') : i18n.global.t('website.errLog');
    opRef.value.acceptParams({
-        title: i18n.global.t('commons.msg.clean'),
+        title: i18n.global.t('commons.button.clean'),
        names: [],
-        msg: i18n.global.t('commons.msg.operatorHelper', [log, i18n.global.t('commons.msg.clean')]),
+        msg: i18n.global.t('commons.msg.operatorHelper', [log, i18n.global.t('commons.button.clean')]),
        api: opWebsiteLog,
        params: { id: id.value, operate: 'delete', logType: props.logType },
    });
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@ -265,7 +265,7 @@
                        >
                            <template #append>{{ $t('app.cpuCore') }}</template>
                        </el-input>
-                        <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                        <span class="input-help">{{ $t('container.limitHelper', [99999]) }}</span>
                    </el-form-item>
                    <el-form-item :label="$t('container.memoryLimit')" prop="appinstall.memoryLimit">
                        <el-input style="width: 40%" v-model.number="website.appinstall.memoryLimit" maxlength="10">
@ -281,7 +281,7 @@
                                </el-select>
                            </template>
                        </el-input>
-                        <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                        <span class="input-help">{{ $t('container.limitHelper', ['9999999999']) }}</span>
                    </el-form-item>
                    <el-form-item prop="allowPort" v-if="website.type === 'deployment'">
                        <el-checkbox v-model="website.appinstall.allowPort" :label="$t('app.allowPort')" size="large" />
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@ -3,12 +3,12 @@
        <RouterButton
            :buttons="[
                {
-                    label: i18n.global.t('menu.website'),
+                    label: i18n.global.t('menu.website', 2),
                    path: '/websites',
                },
            ]"
        />
-        <LayoutContent :title="$t('menu.website')" v-loading="loading">
+        <LayoutContent :title="$t('menu.website', 2)" v-loading="loading">
            <template #app>
                <AppStatus
                    :app-key="'openresty'"
@ -23,7 +23,7 @@
                    {{ $t('website.create') }}
                </el-button>
                <el-button type="primary" plain @click="openGroup" :disabled="nginxStatus != 'Running'">
-                    {{ $t('commons.table.group') }}
+                    {{ $t('commons.table.manageGroup') }}
                </el-button>
                <el-button type="primary" plain @click="openDefault" :disabled="nginxStatus != 'Running'">
                    {{ $t('website.defaultServer') }}