refactor: organize certd client i18n translations

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/cname-record-info.vue

@@ -4,7 +4,7 @@
       <!--    <td class="domain">-->
       <!--      {{ props.domain }}-->
       <!--    </td>-->
-      <td class="host-record" :title="'域名：' + props.domain">
+      <td class="host-record" :title="t('certd.verifyPlan.domainTitle', { domain: props.domain })">
         <fs-copyable v-model="cnameRecord.hostRecord"></fs-copyable>
       </td>
       <td style="text-align: center">CNAME</td>
@@ -16,17 +16,17 @@
         <a-tooltip v-if="cnameRecord.error" :title="cnameRecord.error">
           <fs-icon class="ml-5 color-red" icon="ion:warning-outline"></fs-icon>
         </a-tooltip>
-        <a-tooltip v-if="cnameRecord.status === 'valid'" title="重置校验状态，重新校验">
+        <a-tooltip v-if="cnameRecord.status === 'valid'" :title="t('certd.verifyPlan.resetStatusTooltip')">
           <fs-icon class="ml-2 color-yellow text-md pointer" icon="solar:undo-left-square-bold" @click="resetStatus"></fs-icon>
         </a-tooltip>
       </td>
       <td class="center">
         <template v-if="cnameRecord.status !== 'valid'">
-          <a-button type="primary" size="small" :loading="loading" @click="doVerify">点击验证</a-button>
+          <a-button type="primary" size="small" :loading="loading" @click="doVerify">{{ t("certd.verifyPlan.clickToValidate") }}</a-button>
           <cname-tip :record="cnameRecord"></cname-tip>
         </template>
 
-        <div v-else class="helper" title="后续自动申请证书需要">不要删除CNAME</div>
+        <div v-else class="helper" :title="t('certd.verifyPlan.keepCnameTitle')">{{ t("certd.verifyPlan.keepCname") }}</div>
       </td>
     </tr>
   </tbody>
@@ -35,18 +35,20 @@
 <script lang="ts" setup>
 import { CnameRecord, GetByDomain } from "/@/components/plugins/cert/domains-verify-plan-editor/api";
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { dict } from "@fast-crud/fast-crud";
 import * as api from "./api.js";
 import CnameTip from "./cname-tip.vue";
 import { Modal } from "ant-design-vue";
 import { utils } from "/@/utils/index.js";
+const { t } = useI18n();
 const statusDict = dict({
   data: [
-    { label: "待设置CNAME", value: "cname", color: "warning" },
-    { label: "验证中", value: "validating", color: "blue" },
-    { label: "验证成功", value: "valid", color: "green" },
-    { label: "验证失败", value: "failed", color: "red" },
-    { label: "验证超时", value: "timeout", color: "red" },
+    { label: t("certd.verifyPlan.status.pendingCname"), value: "cname", color: "warning" },
+    { label: t("certd.verifyPlan.status.validating"), value: "validating", color: "blue" },
+    { label: t("certd.verifyPlan.status.valid"), value: "valid", color: "green" },
+    { label: t("certd.verifyPlan.status.failed"), value: "failed", color: "red" },
+    { label: t("certd.verifyPlan.status.timeout"), value: "timeout", color: "red" },
   ],
 });
 
@@ -125,8 +127,8 @@ async function doVerify() {
 
 async function resetStatus() {
   Modal.confirm({
-    title: "重置状态",
-    content: "确定要重置校验状态吗？",
+    title: t("certd.verifyPlan.resetStatus"),
+    content: t("certd.verifyPlan.confirmResetStatus"),
     onOk: async () => {
       await api.ResetStatus(cnameRecord.value.id);
       await loadRecord();

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/cname-tip.vue

@@ -2,17 +2,17 @@
   <a-tooltip :overlay-style="{ maxWidth: '400px' }">
     <template #title>
       <div>
-        <div>多试几次，如果仍然无法验证通过，请按如下步骤排查问题：</div>
-        <div>1. 解析记录应该添加在{{ record.domain }}域名下</div>
-        <div>2. 要添加的是CNAME类型的记录，不是TXT</div>
-        <div>3. 核对记录值是否是:{{ record.recordValue }}</div>
+        <div>{{ t("certd.verifyPlan.cnameTip.intro") }}</div>
+        <div>{{ t("certd.verifyPlan.cnameTip.step1", { domain: record.domain }) }}</div>
+        <div>{{ t("certd.verifyPlan.cnameTip.step2") }}</div>
+        <div>{{ t("certd.verifyPlan.cnameTip.step3", { value: record.recordValue }) }}</div>
         <div>
-          4. 在验证中状态下，运行下面的命令,查看cname和txt解析是否正确
+          {{ t("certd.verifyPlan.cnameTip.step4") }}
           <fs-copyable :style="{ color: '#52c41a' }" :model-value="nslookupCmd"></fs-copyable>
-          或者
+          {{ t("certd.verifyPlan.cnameTip.or") }}
           <fs-copyable :style="{ color: '#52c41a' }" :model-value="digCmd"></fs-copyable>
         </div>
-        <div>5. 如果以上检查都没有问题，则可能是DNS解析生效时间比较慢，某些提供商延迟可能高达几个小时</div>
+        <div>{{ t("certd.verifyPlan.cnameTip.step5") }}</div>
       </div>
     </template>
     <fs-icon class="ml-5 pointer" icon="mingcute:question-line"></fs-icon>
@@ -21,9 +21,11 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 const props = defineProps<{
   record: any;
 }>();
+const { t } = useI18n();
 
 const nslookupCmd = computed(() => {
   return `nslookup -q=txt _acme-challenge.${props.record.domain}`;

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/cname-verify-plan.vue

@@ -2,11 +2,11 @@
   <table class="cname-verify-plan">
     <thead>
       <tr>
-        <td style="width: 160px">主机记录</td>
-        <td style="width: 100px; text-align: center">记录类型</td>
-        <td style="width: 250px">请设置CNAME记录（验证成功以后不要删除）</td>
-        <td style="width: 120px" class="center">状态</td>
-        <td style="width: 90px" class="center">操作</td>
+        <td style="width: 160px">{{ t("certd.verifyPlan.hostRecord") }}</td>
+        <td style="width: 100px; text-align: center">{{ t("certd.verifyPlan.recordType") }}</td>
+        <td style="width: 250px">{{ t("certd.verifyPlan.setCnameRecord") }}</td>
+        <td style="width: 120px" class="center">{{ t("certd.status") }}</td>
+        <td style="width: 90px" class="center">{{ t("certd.verifyPlan.operation") }}</td>
       </tr>
     </thead>
     <template v-for="key in domains" :key="key">
@@ -19,11 +19,14 @@
 import { CnameRecord } from "/@/components/plugins/cert/domains-verify-plan-editor/api";
 import CnameRecordInfo from "/@/components/plugins/cert/domains-verify-plan-editor/cname-record-info.vue";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 defineOptions({
   name: "CnameVerifyPlan",
 });
 
+const { t } = useI18n();
+
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const props = defineProps<{

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/http-verify-plan.vue

@@ -2,10 +2,10 @@
   <table class="http-verify-plan">
     <thead>
       <tr>
-        <td style="width: 160px">网站域名</td>
-        <td style="width: 100px; text-align: center">上传方式</td>
-        <td style="width: 150px">上传授权</td>
-        <td style="width: 200px">网站根目录路径</td>
+        <td style="width: 160px">{{ t("certd.verifyPlan.websiteDomain") }}</td>
+        <td style="width: 100px; text-align: center">{{ t("certd.verifyPlan.uploadMethod") }}</td>
+        <td style="width: 150px">{{ t("certd.verifyPlan.uploadAccess") }}</td>
+        <td style="width: 200px">{{ t("certd.verifyPlan.websiteRootPath") }}</td>
       </tr>
     </thead>
     <tbody v-if="records" class="http-record-body">
@@ -21,7 +21,7 @@
             <access-selector v-model="item.httpUploaderAccess" :type="item.httpUploaderType" @change="onRecordChange"></access-selector>
           </td>
           <td>
-            <a-input v-model:value="item.httpUploadRootDir" placeholder="网站根目录，如：/www/wwwroot" @change="onRecordChange"></a-input>
+            <a-input v-model:value="item.httpUploadRootDir" :placeholder="t('certd.verifyPlan.websiteRootPlaceholder')" @change="onRecordChange"></a-input>
           </td>
         </tr>
       </template>
@@ -31,6 +31,7 @@
 
 <script lang="ts" setup>
 import { Ref, ref, watch, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
 import { HttpRecord } from "/@/components/plugins/cert/domains-verify-plan-editor/type";
 import { dict } from "@fast-crud/fast-crud";
 import { Dicts } from "/@/components/plugins/lib/dicts";
@@ -39,6 +40,8 @@ defineOptions({
   name: "HttpVerifyPlan",
 });
 
+const { t } = useI18n();
+
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const props = defineProps<{

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/index.vue

@@ -5,7 +5,7 @@
       <div class="plan-box bg-white dark:bg-neutral-700">
         <div class="fullscreen-button pointer flex-center" @click="fullscreen = !fullscreen">
           <span v-if="!fullscreen" style="font-size: 10px" class="flex-center">
-            这里可以放大
+            {{ t("certd.verifyPlan.expandTip") }}
             <fs-icon icon="ion:arrow-forward-outline"></fs-icon>
           </span>
           <fs-icon :icon="fullscreen ? 'material-symbols:fullscreen-exit' : 'material-symbols:fullscreen'"></fs-icon>
@@ -13,9 +13,9 @@
         <table class="plan-table">
           <thead>
             <tr>
-              <th style="min-width: 100px">主域名</th>
-              <th>验证方式</th>
-              <th>验证计划</th>
+              <th style="min-width: 100px">{{ t("certd.verifyPlan.mainDomain") }}</th>
+              <th>{{ t("certd.verifyPlan.challengeType") }}</th>
+              <th>{{ t("certd.verifyPlan.challengePlan") }}</th>
             </tr>
           </thead>
           <tbody>
@@ -30,13 +30,13 @@
                 <div class="plan">
                   <div v-if="item.type === 'dns'" class="plan-dns">
                     <div class="form-item">
-                      <span class="label">DNS类型：</span>
+                      <span class="label">{{ t("certd.verifyPlan.dnsType") }}:</span>
                       <span class="input">
                         <fs-dict-select
                           v-model:value="item.dnsProviderType"
                           size="small"
                           :dict="dnsProviderTypeDict"
-                          placeholder="DNS提供商"
+                          :placeholder="t('certd.verifyPlan.dnsProvider')"
                           @change="onPlanChanged"
                           @selected-change="onDnsProviderChange(item, $event)"
                         ></fs-dict-select>
@@ -44,9 +44,9 @@
                     </div>
                     <a-divider type="vertical" />
                     <div class="form-item">
-                      <span class="label">DNS授权：</span>
+                      <span class="label">{{ t("certd.verifyPlan.dnsAccess") }}:</span>
                       <span class="input">
-                        <access-selector v-model="item.dnsProviderAccessId" size="small" :type="item.dnsProviderAccessType || item.dnsProviderType" placeholder="请选择" @change="onPlanChanged"></access-selector>
+                        <access-selector v-model="item.dnsProviderAccessId" size="small" :type="item.dnsProviderAccessType || item.dnsProviderType" :placeholder="t('certd.verifyPlan.pleaseSelect')" @change="onPlanChanged"></access-selector>
                       </span>
                     </div>
                   </div>
@@ -55,7 +55,7 @@
                   </div>
                   <div v-if="item.type === 'http'" class="plan-http">
                     <http-verify-plan v-model="item.httpVerifyPlan" @change="onPlanChanged" />
-                    <div class="helper">证书颁发机构将请求 https://yourdomain/.well-known/acme-challenge/xxxxxx 来验证域名所有权。</div>
+                    <div class="helper">{{ t("certd.verifyPlan.httpHelper") }}</div>
                   </div>
                 </div>
               </td>
@@ -72,6 +72,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { dict, FsDictSelect } from "@fast-crud/fast-crud";
 import AccessSelector from "/@/views/certd/access/access-selector/index.vue";
 import CnameVerifyPlan from "./cname-verify-plan.vue";
@@ -84,17 +85,19 @@ defineOptions({
   name: "DomainsVerifyPlanEditor",
 });
 
+const { t } = useI18n();
+
 const challengeTypeOptions = ref<any[]>([
   {
-    label: "DNS验证",
+    label: t("certd.verifyPlan.dnsChallenge"),
     value: "dns",
   },
   {
-    label: "CNAME验证",
+    label: t("certd.verifyPlan.cnameChallenge"),
     value: "cname",
   },
   {
-    label: "HTTP验证",
+    label: t("certd.verifyPlan.httpChallenge"),
     value: "http",
   },
 ]);

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/validator.ts

@@ -1,5 +1,6 @@
 import Validator from "async-validator";
 import { DomainsVerifyPlanInput } from "./type";
+import { $t } from "/@/locales";
 
 function checkDomainVerifyPlan(rule: any, value: DomainsVerifyPlanInput) {
   if (value == null) {
@@ -13,7 +14,7 @@ function checkDomainVerifyPlan(rule: any, value: DomainsVerifyPlanInput) {
         for (const subDomain of subDomains) {
           const plan = value[domain].cnameVerifyPlan[subDomain];
           if (plan.status !== "valid") {
-            throw new Error(`域名${subDomain}的CNAME未验证通过，请先设置CNAME记录，点击验证按钮`);
+            throw new Error($t("certd.verifyPlan.errors.cnameNotValid", { domain: subDomain }));
           }
         }
       }
@@ -22,7 +23,7 @@ function checkDomainVerifyPlan(rule: any, value: DomainsVerifyPlanInput) {
       for (const item of domains) {
         //如果有通配符域名则不允许使用http校验
         if (item.startsWith("*.")) {
-          throw new Error(`域名${item}为通配符域名，不支持HTTP校验`);
+          throw new Error($t("certd.verifyPlan.errors.wildcardNotSupportHttp", { domain: item }));
         }
       }
 
@@ -31,19 +32,19 @@ function checkDomainVerifyPlan(rule: any, value: DomainsVerifyPlanInput) {
         for (const subDomain of subDomains) {
           const plan = value[domain].httpVerifyPlan[subDomain];
           if (!plan.httpUploaderType) {
-            throw new Error(`域名${subDomain}的上传方式必须填写`);
+            throw new Error($t("certd.verifyPlan.errors.uploadMethodRequired", { domain: subDomain }));
           }
           if (!plan.httpUploaderAccess) {
-            throw new Error(`域名${subDomain}的上传授权信息必须填写`);
+            throw new Error($t("certd.verifyPlan.errors.uploadAccessRequired", { domain: subDomain }));
           }
           if (!plan.httpUploadRootDir) {
-            throw new Error(`域名${subDomain}的网站根路径必须填写`);
+            throw new Error($t("certd.verifyPlan.errors.websiteRootRequired", { domain: subDomain }));
           }
         }
       }
     } else if (type === "dns") {
       if (!value[domain].dnsProviderType || !value[domain].dnsProviderAccessId) {
-        throw new Error(`DNS模式下，域名${domain}的DNS类型和授权信息必须填写`);
+        throw new Error($t("certd.verifyPlan.errors.dnsProviderRequired", { domain }));
       }
     }
   }