From db0679cd92d932deede213eccd043e5a97451d93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <haozi@loli.email>
Date: Sun, 13 Apr 2025 00:34:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8F=90=E4=BA=A4=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 crowdin.yml                        |   4 +-
 web/src/views/app/route.ts         |   3 +-
 web/src/views/cert/AccountView.vue |  45 +++++++------
 web/src/views/cert/CertView.vue    | 104 +++++++++++++++--------------
 web/src/views/cert/DnsView.vue     |  81 +++++++++++-----------
 5 files changed, 124 insertions(+), 113 deletions(-)

diff --git a/crowdin.yml b/crowdin.yml
index 282e7f5c..049cf104 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -2,4 +2,6 @@ commit_message: 'Update translations (%language%) %original_file_name%'
 pull_request_title: 'l10n: update translations'
 files:
   - source: /pkg/embed/locales/*.pot
-    translation: /pkg/embed/locales/%locale_with_underscore%/%file_name%.mo
+    translation: /pkg/embed/locales/%locale_with_underscore%/%file_name%.po
+  - source: /web/src/locales/*.pot
+    translation: /web/src/locales/%locale_with_underscore%.po
diff --git a/web/src/views/app/route.ts b/web/src/views/app/route.ts
index 19aae324..74f8c74b 100644
--- a/web/src/views/app/route.ts
+++ b/web/src/views/app/route.ts
@@ -1,3 +1,4 @@
+import { $gettext } from '@/utils/gettext'
 import type { RouteType } from '~/types/router'
 
 const Layout = () => import('@/layout/IndexView.vue')
@@ -15,7 +16,7 @@ export default {
       path: '',
       component: () => import('./IndexView.vue'),
       meta: {
-        title: '应用中心',
+        title: $gettext('Apps'),
         icon: 'mdi:apps',
         role: ['admin'],
         requireAuth: true
diff --git a/web/src/views/cert/AccountView.vue b/web/src/views/cert/AccountView.vue
index 3ec31344..6d01aa15 100644
--- a/web/src/views/cert/AccountView.vue
+++ b/web/src/views/cert/AccountView.vue
@@ -8,9 +8,12 @@ import {
   NSpace,
   NTag
 } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import cert from '@/api/panel/cert'
 
+const { $gettext } = useGettext()
+
 const props = defineProps({
   caProviders: {
     type: Array<any>,
@@ -38,7 +41,7 @@ const updateAccount = ref<any>()
 
 const columns: any = [
   {
-    title: '邮箱',
+    title: $gettext('Email'),
     key: 'email',
     minWidth: 200,
     resizable: true,
@@ -66,14 +69,14 @@ const columns: any = [
     }
   },
   {
-    title: '密钥类型',
+    title: $gettext('Key Type'),
     key: 'key_type',
     width: 150,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: '操作',
+    title: $gettext('Actions'),
     key: 'actions',
     width: 200,
     align: 'center',
@@ -96,7 +99,7 @@ const columns: any = [
             }
           },
           {
-            default: () => '修改'
+            default: () => $gettext('Modify')
           }
         ),
         h(
@@ -104,14 +107,14 @@ const columns: any = [
           {
             onPositiveClick: () => {
               useRequest(cert.accountDelete(row.id)).onSuccess(() => {
-                window.$message.success('删除成功')
+                window.$message.success($gettext('Deletion successful'))
                 refresh()
               })
             }
           },
           {
             default: () => {
-              return '确定删除账号吗？'
+              return $gettext('Are you sure you want to delete the account?')
             },
             trigger: () => {
               return h(
@@ -122,7 +125,7 @@ const columns: any = [
                   style: 'margin-left: 15px;'
                 },
                 {
-                  default: () => '删除'
+                  default: () => $gettext('Delete')
                 }
               )
             }
@@ -144,7 +147,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 )
 
 const handleUpdateAccount = () => {
-  messageReactive = window.$message.loading('正在向 CA 注册账号，请耐心等待', {
+  messageReactive = window.$message.loading($gettext('Registering account with CA, please wait patiently'), {
     duration: 0
   })
   useRequest(cert.accountUpdate(updateAccount.value, updateAccountModel.value))
@@ -154,7 +157,7 @@ const handleUpdateAccount = () => {
       updateAccountModel.value.email = ''
       updateAccountModel.value.hmac_encoded = ''
       updateAccountModel.value.kid = ''
-      window.$message.success('更新成功')
+      window.$message.success($gettext('Update successful'))
     })
     .onComplete(() => {
       messageReactive?.destroy()
@@ -199,40 +202,40 @@ onUnmounted(() => {
   <n-modal
     v-model:show="updateAccountModal"
     preset="card"
-    title="修改账号"
+    :title="$gettext('Modify Account')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
     :segmented="false"
   >
     <n-space vertical>
-      <n-alert type="info"> Google 和 SSL.com 需要先去官网获得 KID 和 HMAC 并填入 </n-alert>
+      <n-alert type="info">{{ $gettext('Google and SSL.com require obtaining KID and HMAC from their official websites first') }}</n-alert>
       <n-alert type="warning">
-        境内无法使用 Google，其他 CA 视网络情况而定，建议使用 GoogleCN 或 Let's Encrypt
+        {{ $gettext('Google is not accessible in mainland China, other CAs depend on network conditions, recommend using GoogleCN or Let\'s Encrypt') }}
       </n-alert>
       <n-form :model="updateAccountModel">
-        <n-form-item path="ca" label="CA">
+        <n-form-item path="ca" :label="$gettext('CA')">
           <n-select
             v-model:value="updateAccountModel.ca"
-            placeholder="选择 CA"
+            :placeholder="$gettext('Select CA')"
             clearable
             :options="caProviders"
           />
         </n-form-item>
-        <n-form-item path="key_type" label="密钥类型">
+        <n-form-item path="key_type" :label="$gettext('Key Type')">
           <n-select
             v-model:value="updateAccountModel.key_type"
-            placeholder="选择密钥类型"
+            :placeholder="$gettext('Select key type')"
             clearable
             :options="algorithms"
           />
         </n-form-item>
-        <n-form-item path="email" label="邮箱">
+        <n-form-item path="email" :label="$gettext('Email')">
           <n-input
             v-model:value="updateAccountModel.email"
             type="text"
             @keydown.enter.prevent
-            placeholder="输入邮箱地址"
+            :placeholder="$gettext('Enter email address')"
           />
         </n-form-item>
         <n-form-item path="kid" label="KID">
@@ -240,7 +243,7 @@ onUnmounted(() => {
             v-model:value="updateAccountModel.kid"
             type="text"
             @keydown.enter.prevent
-            placeholder="输入 KID"
+            :placeholder="$gettext('Enter KID')"
           />
         </n-form-item>
         <n-form-item path="hmac_encoded" label="HMAC">
@@ -248,11 +251,11 @@ onUnmounted(() => {
             v-model:value="updateAccountModel.hmac_encoded"
             type="text"
             @keydown.enter.prevent
-            placeholder="输入 HMAC"
+            :placeholder="$gettext('Enter HMAC')"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleUpdateAccount">提交</n-button>
+      <n-button type="info" block @click="handleUpdateAccount">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>
diff --git a/web/src/views/cert/CertView.vue b/web/src/views/cert/CertView.vue
index aeca82bb..a6e88353 100644
--- a/web/src/views/cert/CertView.vue
+++ b/web/src/views/cert/CertView.vue
@@ -2,11 +2,14 @@
 import Editor from '@guolao/vue-monaco-editor'
 import type { MessageReactive } from 'naive-ui'
 import { NButton, NDataTable, NFlex, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import cert from '@/api/panel/cert'
 import { formatDateTime } from '@/utils'
 import ObtainModal from '@/views/cert/ObtainModal.vue'
 
+const { $gettext } = useGettext()
+
 const props = defineProps({
   algorithms: {
     type: Array<any>,
@@ -58,13 +61,13 @@ const obtainCert = ref(0)
 
 const columns: any = [
   {
-    title: '域名',
+    title: $gettext('Domain'),
     key: 'domains',
     minWidth: 200,
     resizable: true,
     render(row: any) {
       if (row.domains == null || row.domains.length == 0) {
-        return h(NTag, null, { default: () => '无' })
+        return h(NTag, null, { default: () => $gettext('None') })
       }
       return h(NFlex, null, {
         default: () =>
@@ -81,7 +84,7 @@ const columns: any = [
     }
   },
   {
-    title: '类型',
+    title: $gettext('Type'),
     key: 'type',
     width: 100,
     render(row: any) {
@@ -103,7 +106,7 @@ const columns: any = [
               case '4096':
                 return 'RSA 4096'
               default:
-                return '上传'
+                return $gettext('Upload')
             }
           }
         }
@@ -111,29 +114,29 @@ const columns: any = [
     }
   },
   {
-    title: '关联账号',
+    title: $gettext('Associated Account'),
     key: 'account_id',
     minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
       if (row.account_id == 0) {
-        return '无'
+        return $gettext('None')
       }
       return accounts.value?.find((item: any) => item.value === row.account_id)?.label
     }
   },
   {
-    title: '颁发者',
+    title: $gettext('Issuer'),
     key: 'issuer',
     width: 150,
     ellipsis: { tooltip: true },
     render(row: any) {
-      return row.issuer == '' ? '无' : row.issuer
+      return row.issuer == '' ? $gettext('None') : row.issuer
     }
   },
   {
-    title: '过期时间',
+    title: $gettext('Expiration Time'),
     key: 'not_after',
     width: 200,
     ellipsis: { tooltip: true },
@@ -148,7 +151,7 @@ const columns: any = [
     resizable: true,
     render(row: any) {
       if (row.ocsp_server == null || row.ocsp_server.length == 0) {
-        return h(NTag, null, { default: () => '无' })
+        return h(NTag, null, { default: () => $gettext('None') })
       }
       return h(NFlex, null, {
         default: () =>
@@ -161,7 +164,7 @@ const columns: any = [
     }
   },
   {
-    title: '自动续签',
+    title: $gettext('Auto Renew'),
     key: 'auto_renew',
     width: 100,
     align: 'center',
@@ -176,7 +179,7 @@ const columns: any = [
     }
   },
   {
-    title: '操作',
+    title: $gettext('Actions'),
     key: 'actions',
     width: 350,
     align: 'center',
@@ -196,7 +199,7 @@ const columns: any = [
                 }
               },
               {
-                default: () => '签发'
+                default: () => $gettext('Issue')
               }
             )
           : null,
@@ -215,7 +218,7 @@ const columns: any = [
                 }
               },
               {
-                default: () => '部署'
+                default: () => $gettext('Deploy')
               }
             )
           : null,
@@ -227,13 +230,13 @@ const columns: any = [
                 type: 'success',
                 style: 'margin-left: 15px;',
                 onClick: async () => {
-                  messageReactive = window.$message.loading('请稍后...', {
+                  messageReactive = window.$message.loading($gettext('Please wait...'), {
                     duration: 0
                   })
                   useRequest(cert.renew(row.id))
                     .onSuccess(() => {
                       refresh()
-                      window.$message.success('续签成功')
+                      window.$message.success($gettext('Renewal successful'))
                     })
                     .onComplete(() => {
                       messageReactive?.destroy()
@@ -241,7 +244,7 @@ const columns: any = [
                 }
               },
               {
-                default: () => '续签'
+                default: () => $gettext('Renew')
               }
             )
           : null,
@@ -259,7 +262,7 @@ const columns: any = [
                 }
               },
               {
-                default: () => '查看'
+                default: () => $gettext('View')
               }
             )
           : null,
@@ -284,7 +287,7 @@ const columns: any = [
             }
           },
           {
-            default: () => '修改'
+            default: () => $gettext('Modify')
           }
         ),
         h(
@@ -293,13 +296,13 @@ const columns: any = [
             onPositiveClick: async () => {
               useRequest(cert.certDelete(row.id)).onSuccess(() => {
                 refresh()
-                window.$message.success('删除成功')
+                window.$message.success($gettext('Deletion successful'))
               })
             }
           },
           {
             default: () => {
-              return '确定删除证书吗？'
+              return $gettext('Are you sure you want to delete the certificate?')
             },
             trigger: () => {
               return h(
@@ -310,7 +313,7 @@ const columns: any = [
                   style: 'margin-left: 15px;'
                 },
                 {
-                  default: () => '删除'
+                  default: () => $gettext('Delete')
                 }
               )
             }
@@ -344,7 +347,7 @@ const handleUpdateCert = () => {
     updateModel.value.cert = ''
     updateModel.value.key = ''
     updateModel.value.script = ''
-    window.$message.success('更新成功')
+    window.$message.success($gettext('Update successful'))
   })
 }
 
@@ -361,7 +364,7 @@ const handleAutoRenewUpdate = (row: any) => {
   useRequest(cert.certUpdate(row.id, updateModel.value))
     .onSuccess(() => {
       refresh()
-      window.$message.success('更新成功')
+      window.$message.success($gettext('Update successful'))
     })
     .onComplete(() => {
       updateModel.value.domains = []
@@ -385,7 +388,7 @@ const handleDeployCert = async () => {
   deployModal.value = false
   deployModel.value.id = null
   deployModel.value.websites = []
-  window.$message.success('部署成功')
+  window.$message.success($gettext('Deployment successful'))
 }
 
 const handleShowModalClose = () => {
@@ -431,7 +434,7 @@ onUnmounted(() => {
   <n-modal
     v-model:show="updateModal"
     preset="card"
-    title="修改证书"
+    :title="$gettext('Modify Certificate')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -439,11 +442,10 @@ onUnmounted(() => {
   >
     <n-space vertical>
       <n-alert v-if="updateModel.type != 'upload'" type="info">
-        可以通过选择网站 / DNS 中的任意一项来自动签发和部署证书，也可以手动输入域名并设置 DNS
-        解析来签发证书，还可以填写部署脚本来自动部署证书。
+        {{ $gettext('You can automatically issue and deploy certificates by selecting any website/DNS, or manually enter domain names and set DNS resolution to issue certificates, or fill in deployment scripts to automatically deploy certificates.') }}
       </n-alert>
       <n-form :model="updateModel">
-        <n-form-item v-if="updateModel.type != 'upload'" path="domains" label="域名">
+        <n-form-item v-if="updateModel.type != 'upload'" path="domains" :label="$gettext('Domain')">
           <n-dynamic-input
             v-model:value="updateModel.domains"
             placeholder="example.com"
@@ -451,70 +453,70 @@ onUnmounted(() => {
             show-sort-button
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type != 'upload'" path="type" label="密钥类型">
+        <n-form-item v-if="updateModel.type != 'upload'" path="type" :label="$gettext('Key Type')">
           <n-select
             v-model:value="updateModel.type"
-            placeholder="选择密钥类型"
+            :placeholder="$gettext('Select key type')"
             clearable
             :options="algorithms"
           />
         </n-form-item>
-        <n-form-item path="website_id" label="网站">
+        <n-form-item path="website_id" :label="$gettext('Website')">
           <n-select
             v-model:value="updateModel.website_id"
-            placeholder="选择用于部署证书的网站"
+            :placeholder="$gettext('Select website for certificate deployment')"
             clearable
             :options="websites"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type != 'upload'" path="account_id" label="账号">
+        <n-form-item v-if="updateModel.type != 'upload'" path="account_id" :label="$gettext('Account')">
           <n-select
             v-model:value="updateModel.account_id"
-            placeholder="选择用于签发证书的账号"
+            :placeholder="$gettext('Select account for certificate issuance')"
             clearable
             :options="accounts"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type != 'upload'" path="account_id" label="DNS">
+        <n-form-item v-if="updateModel.type != 'upload'" path="account_id" :label="$gettext('DNS')">
           <n-select
             v-model:value="updateModel.dns_id"
-            placeholder="选择用于签发证书的DNS"
+            :placeholder="$gettext('Select DNS for certificate issuance')"
             clearable
             :options="dns"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type == 'upload'" path="cert" label="证书">
+        <n-form-item v-if="updateModel.type == 'upload'" path="cert" :label="$gettext('Certificate')">
           <n-input
             v-model:value="updateModel.cert"
             type="textarea"
-            placeholder="输入 PEM 证书文件的内容"
+            :placeholder="$gettext('Enter the content of the PEM certificate file')"
             :autosize="{ minRows: 10, maxRows: 15 }"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type == 'upload'" path="key" label="私钥">
+        <n-form-item v-if="updateModel.type == 'upload'" path="key" :label="$gettext('Private Key')">
           <n-input
             v-model:value="updateModel.key"
             type="textarea"
-            placeholder="输入 KEY 私钥文件的内容"
+            :placeholder="$gettext('Enter the content of the KEY private key file')"
             :autosize="{ minRows: 10, maxRows: 15 }"
           />
         </n-form-item>
-        <n-form-item v-if="updateModel.type != 'upload'" path="key" label="部署脚本">
+        <n-form-item v-if="updateModel.type != 'upload'" path="key" :label="$gettext('Deployment Script')">
           <n-input
             v-model:value="updateModel.script"
             type="textarea"
-            placeholder="脚本中的 {cert} 和 {key} 会被替换为证书和私钥内容"
+            :placeholder="$gettext('The {cert} and {key} in the script will be replaced with the certificate and private key content')"
             :autosize="{ minRows: 5, maxRows: 10 }"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleUpdateCert">提交</n-button>
+      <n-button type="info" block @click="handleUpdateCert">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
   <n-modal
     v-model:show="deployModal"
     preset="card"
-    title="部署证书"
+    :title="$gettext('Deploy Certificate')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -522,23 +524,23 @@ onUnmounted(() => {
   >
     <n-space vertical>
       <n-form :model="deployModel">
-        <n-form-item path="website_id" label="网站">
+        <n-form-item path="website_id" :label="$gettext('Website')">
           <n-select
             v-model:value="deployModel.websites"
-            placeholder="选择需要部署证书的网站"
+            :placeholder="$gettext('Select websites to deploy the certificate')"
             clearable
             multiple
             :options="websites"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleDeployCert">提交</n-button>
+      <n-button type="info" block @click="handleDeployCert">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
   <n-modal
     v-model:show="showModal"
     preset="card"
-    title="查看证书"
+    :title="$gettext('View Certificate')"
     style="width: 80vw"
     size="huge"
     :bordered="false"
@@ -546,7 +548,7 @@ onUnmounted(() => {
     @close="handleShowModalClose"
   >
     <n-tabs type="line" animated>
-      <n-tab-pane name="cert" tab="证书">
+      <n-tab-pane name="cert" :tab="$gettext('Certificate')">
         <Editor
           v-model:value="showModel.cert"
           theme="vs-dark"
@@ -558,7 +560,7 @@ onUnmounted(() => {
           }"
         />
       </n-tab-pane>
-      <n-tab-pane name="key" tab="密钥">
+      <n-tab-pane name="key" :tab="$gettext('Private Key')">
         <Editor
           v-model:value="showModel.key"
           theme="vs-dark"
diff --git a/web/src/views/cert/DnsView.vue b/web/src/views/cert/DnsView.vue
index b54d08ca..912e336e 100644
--- a/web/src/views/cert/DnsView.vue
+++ b/web/src/views/cert/DnsView.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { NButton, NDataTable, NInput, NPopconfirm, NSpace, NTag } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
 
 import cert from '@/api/panel/cert'
 
+const { $gettext } = useGettext()
+
 const props = defineProps({
   dnsProviders: {
     type: Array<any>,
@@ -25,14 +28,14 @@ const updateDNS = ref<any>()
 
 const columns: any = [
   {
-    title: '备注名称',
+    title: $gettext('Note Name'),
     key: 'name',
     minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
-    title: '类型',
+    title: $gettext('Type'),
     key: 'type',
     width: 150,
     resizable: true,
@@ -50,7 +53,7 @@ const columns: any = [
             if (provider) {
               return provider.label
             } else {
-              return '未知'
+              return $gettext('Unknown')
             }
           }
         }
@@ -58,7 +61,7 @@ const columns: any = [
     }
   },
   {
-    title: '操作',
+    title: $gettext('Actions'),
     key: 'actions',
     width: 200,
     align: 'center',
@@ -80,7 +83,7 @@ const columns: any = [
             }
           },
           {
-            default: () => '修改'
+            default: () => $gettext('Modify')
           }
         ),
         h(
@@ -89,13 +92,13 @@ const columns: any = [
             onPositiveClick: async () => {
               useRequest(cert.dnsDelete(row.id)).onSuccess(() => {
                 refresh()
-                window.$message.success('删除成功')
+                window.$message.success($gettext('Deletion successful'))
               })
             }
           },
           {
             default: () => {
-              return '确定删除 DNS 吗？'
+              return $gettext('Are you sure you want to delete the DNS?')
             },
             trigger: () => {
               return h(
@@ -106,7 +109,7 @@ const columns: any = [
                   style: 'margin-left: 15px;'
                 },
                 {
-                  default: () => '删除'
+                  default: () => $gettext('Delete')
                 }
               )
             }
@@ -134,7 +137,7 @@ const handleUpdateDNS = () => {
     updateDNSModel.value.data.ak = ''
     updateDNSModel.value.data.sk = ''
     updateDNSModel.value.name = ''
-    window.$message.success('更新成功')
+    window.$message.success($gettext('Update successful'))
   })
 }
 
@@ -176,7 +179,7 @@ onUnmounted(() => {
   <n-modal
     v-model:show="updateDNSModal"
     preset="card"
-    title="修改 DNS"
+    :title="$gettext('Modify DNS')"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -184,13 +187,13 @@ onUnmounted(() => {
   >
     <n-space vertical>
       <n-form :model="updateDNSModel">
-        <n-form-item path="name" label="备注名称">
-          <n-input v-model:value="updateDNSModel.name" type="text" placeholder="输入备注名称" />
+        <n-form-item path="name" :label="$gettext('Note Name')">
+          <n-input v-model:value="updateDNSModel.name" type="text" :placeholder="$gettext('Enter note name')" />
         </n-form-item>
-        <n-form-item path="type" label="DNS">
+        <n-form-item path="type" :label="$gettext('DNS')">
           <n-select
             v-model:value="updateDNSModel.type"
-            placeholder="选择 DNS"
+            :placeholder="$gettext('Select DNS')"
             clearable
             :options="dnsProviders"
           />
@@ -199,172 +202,172 @@ onUnmounted(() => {
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入阿里云 Access Key"
+            :placeholder="$gettext('Enter Aliyun Access Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'aliyun'" path="sk" label="Secret Key">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入阿里云 Secret Key"
+            :placeholder="$gettext('Enter Aliyun Secret Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'tencent'" path="ak" label="SecretId">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入腾讯云 SecretId"
+            :placeholder="$gettext('Enter Tencent Cloud SecretId')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'tencent'" path="sk" label="SecretKey">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入腾讯云 SecretKey"
+            :placeholder="$gettext('Enter Tencent Cloud SecretKey')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'huawei'" path="ak" label="AccessKeyId">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入华为云 AccessKeyId"
+            :placeholder="$gettext('Enter Huawei Cloud AccessKeyId')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'huawei'" path="sk" label="SecretAccessKey">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入华为云 SecretAccessKey"
+            :placeholder="$gettext('Enter Huawei Cloud SecretAccessKey')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'westcn'" path="sk" label="Username">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入西部数码 Username"
+            :placeholder="$gettext('Enter West.cn Username')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'westcn'" path="ak" label="API Password">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入西部数码 API Password"
+            :placeholder="$gettext('Enter West.cn API Password')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'cloudflare'" path="ak" label="API Key">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Cloudflare API Key"
+            :placeholder="$gettext('Enter Cloudflare API Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'godaddy'" path="ak" label="Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 GoDaddy Token"
+            :placeholder="$gettext('Enter GoDaddy Token')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'gcore'" path="ak" label="API Key">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 G-Core API Key"
+            :placeholder="$gettext('Enter G-Core API Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'porkbun'" path="ak" label="API Key">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Porkbun API Key"
+            :placeholder="$gettext('Enter Porkbun API Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'porkbun'" path="sk" label="Secret Key">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入 Porkbun Secret Key"
+            :placeholder="$gettext('Enter Porkbun Secret Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'namecheap'" path="sk" label="API Username">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入 Namecheap API Username"
+            :placeholder="$gettext('Enter Namecheap API Username')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'namecheap'" path="ak" label="API Key">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Namecheap API Key"
+            :placeholder="$gettext('Enter Namecheap API Key')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'namesilo'" path="ak" label="API Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 NameSilo API Token"
+            :placeholder="$gettext('Enter NameSilo API Token')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'namecom'" path="sk" label="Username">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入 Name.com Username"
+            :placeholder="$gettext('Enter Name.com Username')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'namecom'" path="ak" label="Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Name.com Token"
+            :placeholder="$gettext('Enter Name.com Token')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'cloudns'" path="ak" label="Auth ID">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 ClouDNS Auth ID（使用Sub Auth ID请添加sub-前缀）"
+            :placeholder="$gettext('Enter ClouDNS Auth ID (Add sub- prefix for Sub Auth ID)')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'cloudns'" path="sk" label="Auth Password">
           <n-input
             v-model:value="updateDNSModel.data.sk"
             type="text"
-            placeholder="输入 ClouDNS Auth Password"
+            :placeholder="$gettext('Enter ClouDNS Auth Password')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'duckdns'" path="ak" label="Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Duck DNS Token"
+            :placeholder="$gettext('Enter Duck DNS Token')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'hetzner'" path="ak" label="Auth API Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Hetzner Auth API Token"
+            :placeholder="$gettext('Enter Hetzner Auth API Token')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'linode'" path="ak" label="Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Linode Token"
+            :placeholder="$gettext('Enter Linode Token')"
           />
         </n-form-item>
         <n-form-item v-if="updateDNSModel.type == 'vercel'" path="ak" label="Token">
           <n-input
             v-model:value="updateDNSModel.data.ak"
             type="text"
-            placeholder="输入 Vercel Token"
+            :placeholder="$gettext('Enter Vercel Token')"
           />
         </n-form-item>
       </n-form>
-      <n-button type="info" block @click="handleUpdateDNS">提交</n-button>
+      <n-button type="info" block @click="handleUpdateDNS">{{ $gettext('Submit') }}</n-button>
     </n-space>
   </n-modal>
 </template>