feat: email i18n (#2013)

Author: shaohuzhang1

ui/src/locales/lang/en_US/index.ts

@@ -2,51 +2,12 @@ import en from 'element-plus/es/locale/lang/en'
 import components from './components'
 import layout from './layout'
 import views from './views'
-
+import common from './common'
 export default {
   lang: 'English',
   layout,
   views,
   components,
   en,
-  common: {
-    create: 'Create',
-    createSuccess: 'Create Success',
-    copy: 'Copy',
-    copySuccess: 'Copy Success',
-    copyError: 'Copy Failed',
-    save: 'Save',
-    saveSuccess: 'Save Success',
-    delete: 'Delete',
-    deleteSuccess: 'Successfully deleted',
-    setting: 'Setting',
-    settingSuccess: 'Setting Successful',
-    submit: 'Submit',
-    submitSuccess: 'Submitted successfully',
-    edit: 'Edit',
-    editSuccess: 'Edit Successful',
-    cancel: 'Cancel',
-    confirm: 'Confirm',
-    tip: 'Prompt',
-    add: 'Add',
-    refresh: 'Refresh',
-    search: 'Search',
-    clear: 'Clear',
-    professional: 'Purchase the Professional Edition',
-    status: 'Status',
-    createDate: 'Create date',
-    operation: 'Operation',
-    document: 'Documentation',
-    character: 'characters',
-    export: 'Export',
-    exportSuccess: 'Export successful',
-    unavailable: '(Unavailable)',
-    public: 'Public',
-    private: 'Private',
-    paramSetting: 'Parameter Settings',
-    creator: 'Creator',
-    debug: 'Debug',
-    modify: 'Modify',
-  },
-
+  common
 }

ui/src/locales/lang/en_US/views/system.ts

@@ -130,6 +130,20 @@ export default {
     saveSuccess: 'Appearance settings successfully applied'
   },
   email: {
-    title: 'Email Setting'
+    title: 'Email Setting',
+    smtpHost: 'SMTP Host',
+    smtpHostPlaceholder: 'Please enter SMTP Host',
+    smtpPort: 'SMTP Port',
+    smtpPortPlaceholder: 'Please enter SMTP Port',
+    smtpUser: 'SMTP User',
+    smtpUserPlaceholder: 'Please enter SMTP User',
+    sendEmail: 'Send Email',
+    sendEmailPlaceholder: 'Please enter Send Email',
+    smtpPassword: 'SMTP Password',
+    smtpPasswordPlaceholder: 'Please enter SMTP Password',
+    test: 'Test Connection',
+    enableSSL: 'Enable SSL (if the SMTP port is 465, you usually need to enable SSL)',
+    enableTLS: 'Enable TLS (if the SMTP port is 587, you usually need to enable TLS)',
+    testSuccess: 'Test Connection Successful'
   }
 }

ui/src/locales/lang/zh_CN/index.ts

@@ -2,50 +2,12 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import components from './components'
 import layout from './layout'
 import views from './views'
-
+import common from './common'
 export default {
   lang: '简体中文',
   layout,
   views,
   components,
   zhCn,
-  common: {
-    create: '创建',
-    createSuccess: '创建成功',
-    copy: '复制',
-    copySuccess: '复制成功',
-    copyError: '复制失败',
-    save: '保存',
-    saveSuccess: '保存成功',
-    delete: '删除',
-    deleteSuccess: '删除成功',
-    setting: '设置',
-    settingSuccess: '设置成功',
-    submit: '提交',
-    submitSuccess: '提交成功',
-    edit: '编辑',
-    editSuccess: '编辑成功',
-    cancel: '取消',
-    confirm: '确定',
-    tip: '提示',
-    add: '添加',
-    refresh: '刷新',
-    search: '搜索',
-    clear: '清空',
-    professional: '购买专业版',
-    status: '状态',
-    createDate: '创建日期',
-    operation: '操作',
-    document: '文档',
-    character: '字符',
-    export: '导出',
-    exportSuccess: '导出成功',
-    unavailable: '（不可用）',
-    public: '公用',
-    private: '私有',
-    paramSetting: '参数设置',
-    creator: '创建者',
-    debug: '调试',
-    modify: '修改'
-  }
+  common
 }

ui/src/locales/lang/zh_CN/views/system.ts

@@ -128,6 +128,20 @@ export default {
     saveSuccess: '外观设置成功'
   },
   email: {
-    title: '邮箱配置'
+    title: '邮箱设置',
+    smtpHost: 'SMTP Host',
+    smtpHostPlaceholder: '请输入 SMTP Host',
+    smtpPort: 'SMTP Port',
+    smtpPortPlaceholder: '请输入 SMTP Port',
+    smtpUser: 'SMTP 账户',
+    smtpUserPlaceholder: '请输入 SMTP 账户',
+    sendEmail: '发件人邮箱',
+    sendEmailPlaceholder: '请输入发件人邮箱',
+    smtpPassword: '密码',
+    smtpPasswordPlaceholder: '请输入发件人密码',
+    test: '测试连接',
+    enableSSL: '启用 SSL（如果 SMTP 端口是 465，通常需要启用 SSL）',
+    enableTLS: '启用 TLS（如果 SMTP 端口是 587，通常需要启用 TLS）',
+    testSuccess: '测试连接成功'
   }
 }

ui/src/locales/lang/zh_TW/index.ts

@@ -2,45 +2,13 @@ import zhTw from 'element-plus/es/locale/lang/zh-tw'
 import components from './components'
 import layout from './layout'
 import views from './views'
+import common from './common'
 
 export default {
   lang: '繁體中文',
   layout,
+  common,
   views,
   components,
-  zhTw,
-  common: {
-    create: '創建',
-    createSuccess: '創建成功',
-    copy: '複製',
-    copySuccess: '複製成功',
-    copyError: '複製失敗',
-    save: '儲存',
-    saveSuccess: '儲存成功',
-    delete: '刪除',
-    deleteSuccess: '刪除成功',
-    setting: '設定',
-    settingSuccess: '設定成功',
-    submit: '提交',
-    submitSuccess: '提交成功',
-    cancel: '取消',
-    confirm: '確認',
-    tip: '提示',
-    add: '新增',
-    refresh: '重新整理',
-    search: '搜尋',
-    clear: '清除',
-    professional: '購買專業版',
-    status: '狀態',
-    createDate: '創建日期',
-    operation: '操作',
-    document: '文檔',
-    character: '字符',
-    export: '匯出',
-    exportSuccess: '匯出成功',
-    unavailable: '（不可用）',
-    public: '公用',
-    paramSetting: '參數設定',
-    edit: '編輯',
-  },
+  zhTw
 }

ui/src/locales/lang/zh_TW/views/system.ts

@@ -129,6 +129,20 @@ export default {
     saveSuccess: '外觀設置成功'
   },
   email: {
-    title: '郵箱配置'
+    title: '郵箱設置',
+    smtpHost: 'SMTP Host',
+    smtpHostPlaceholder: '請輸入 SMTP Host',
+    smtpPort: 'SMTP Port',
+    smtpPortPlaceholder: '請輸入 SMTP Port',
+    smtpUser: 'SMTP 帳戶',
+    smtpUserPlaceholder: '請輸入 SMTP 帳戶',
+    sendEmail: '發件人信箱',
+    sendEmailPlaceholder: '請輸入發件人信箱',
+    smtpPassword: '密碼',
+    smtpPasswordPlaceholder: '請輸入發件人密碼',
+    test: '測試連接',
+    enableSSL: '啟用 SSL（如果 SMTP 端口是 465，通常需要啟用 SSL）',
+    enableTLS: '啟用 TLS（如果 SMTP 端口是 587，通常需要啟用 TLS）',
+    testSuccess: '測試連接成功'
   }
 }

ui/src/router/modules/setting.ts

@@ -1,6 +1,7 @@
 import { hasPermission } from '@/utils/permission/index'
 import Layout from '@/layout/layout-template/SystemLayout.vue'
 import { Role, ComplexPermission } from '@/utils/permission/type'
+import { t } from '@/locales'
 const settingRouter = {
   path: '/setting',
   name: 'setting',
@@ -70,7 +71,7 @@ const settingRouter = {
           path: '/system/theme',
           name: 'theme',
           meta: {
-            title: '外观设置',
+            title: t('views.system.theme.title'),
             activeMenu: '/setting',
             parentPath: '/setting',
             parentName: 'setting',
@@ -82,7 +83,7 @@ const settingRouter = {
           path: '/system/authentication',
           name: 'authentication',
           meta: {
-            title: '登录认证',
+            title: t('views.system.authentication.title'),
             activeMenu: '/setting',
             parentPath: '/setting',
             parentName: 'setting',
@@ -94,7 +95,7 @@ const settingRouter = {
           path: '/system/email',
           name: 'email',
           meta: {
-            title: '邮箱配置',
+            title: t('views.system.email.title'),
             activeMenu: '/setting',
             parentPath: '/setting',
             parentName: 'setting',

ui/src/views/email/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer header="邮箱配置">
+  <LayoutContainer :header="$t('views.system.email.title')">
     <div class="email-setting main-calc-height">
       <el-scrollbar>
         <div class="p-24" v-loading="loading">
@@ -10,43 +10,55 @@
             label-position="top"
             require-asterisk-position="right"
           >
-            <el-form-item label="SMTP 主机" prop="email_host">
-              <el-input v-model="form.email_host" placeholder="请输入 SMTP 主机" />
+            <el-form-item :label="$t('views.system.email.smtpHost')" prop="email_host">
+              <el-input
+                v-model="form.email_host"
+                :placeholder="$t('views.system.email.smtpHostPlaceholder')"
+              />
             </el-form-item>
-            <el-form-item label="SMTP 端口" prop="email_port">
-              <el-input v-model="form.email_port" placeholder="请输入 SMTP 端口" />
+            <el-form-item :label="$t('views.system.email.smtpPort')" prop="email_port">
+              <el-input
+                v-model="form.email_port"
+                :placeholder="$t('views.system.email.smtpPortPlaceholder')"
+              />
             </el-form-item>
-            <el-form-item label="SMTP 账户" prop="email_host_user">
-              <el-input v-model="form.email_host_user" placeholder="请输入 SMTP 账户" />
+            <el-form-item :label="$t('views.system.email.smtpUser')" prop="email_host_user">
+              <el-input
+                v-model="form.email_host_user"
+                :placeholder="$t('views.system.email.smtpUserPlaceholder')"
+              />
             </el-form-item>
-            <el-form-item label="发件人邮箱" prop="from_email">
-              <el-input v-model="form.from_email" placeholder="请输入发件人邮箱" />
+            <el-form-item :label="$t('views.system.email.sendEmail')" prop="from_email">
+              <el-input
+                v-model="form.from_email"
+                :placeholder="$t('views.system.email.sendEmailPlaceholder')"
+              />
             </el-form-item>
-            <el-form-item label="密码" prop="email_host_password">
+            <el-form-item :label="$t('views.system.email.smtpPassword')" prop="email_host_password">
               <el-input
                 v-model="form.email_host_password"
-                placeholder="请输入发件人密码"
+                :placeholder="$t('views.system.email.smtpPasswordPlaceholder')"
                 show-password
               />
             </el-form-item>
             <el-form-item>
               <el-checkbox v-model="form.email_use_ssl"
-                >开启SSL(如果SMTP端口是465，通常需要启用SSL)
+                >{{ $t('views.system.email.enableSSL') }}
               </el-checkbox>
             </el-form-item>
             <el-form-item>
               <el-checkbox v-model="form.email_use_tls"
-                >开启TLS(如果SMTP端口是587，通常需要启用TLS)</el-checkbox
-              >
+                >{{ $t('views.system.email.enableTLS') }}
+              </el-checkbox>
             </el-form-item>
             <el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
-              测试连接
+              {{ $t('views.system.email.test') }}
             </el-button>
           </el-form>
 
           <div class="text-right">
             <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
-              {{ $t('common.save')}}
+              {{ $t('common.save') }}
             </el-button>
           </div>
         </div>
@@ -60,6 +72,8 @@ import emailApi from '@/api/email-setting'
 import type { FormInstance, FormRules } from 'element-plus'
 
 import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+
 const form = ref<any>({
   email_host: '',
   email_port: '',
@@ -75,11 +89,21 @@ const emailFormRef = ref()
 const loading = ref(false)
 
 const rules = reactive<FormRules<any>>({
-  email_host: [{ required: true, message: '请输入 SMTP 主机', trigger: 'blur' }],
-  email_port: [{ required: true, message: '请输入 SMTP 端口', trigger: 'blur' }],
-  email_host_user: [{ required: true, message: '请输入 SMTP 账户', trigger: 'blur' }],
-  email_host_password: [{ required: true, message: '请输入发件人邮箱密码', trigger: 'blur' }],
-  from_email: [{ required: true, message: '请输入发件人邮箱', trigger: 'blur' }]
+  email_host: [
+    { required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur' }
+  ],
+  email_port: [
+    { required: true, message: t('views.system.email.smtpPortPlaceholder'), trigger: 'blur' }
+  ],
+  email_host_user: [
+    { required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur' }
+  ],
+  email_host_password: [
+    { required: true, message: t('views.system.email.smtpPasswordPlaceholder'), trigger: 'blur' }
+  ],
+  from_email: [
+    { required: true, message: t('views.system.email.sendEmailPlaceholder'), trigger: 'blur' }
+  ]
 })
 
 const submit = async (formEl: FormInstance | undefined, test?: string) => {
@@ -88,11 +112,11 @@ const submit = async (formEl: FormInstance | undefined, test?: string) => {
     if (valid) {
       if (test) {
         emailApi.postTestEmail(form.value, loading).then((res) => {
-          MsgSuccess('测试连接成功')
+          MsgSuccess(t('views.system.email.testSuccess'))
         })
       } else {
         emailApi.putEmailSetting(form.value, loading).then((res) => {
-          MsgSuccess('设置成功')
+          MsgSuccess(t('common.saveSuccess'))
         })
       }
     }
@@ -115,6 +139,7 @@ onMounted(() => {
 .email-setting {
   width: 70%;
   margin: 0 auto;
+
   :deep(.el-checkbox__label) {
     font-weight: 400;
   }