style: CloudFlare DNS 账号增加提示 (#3648)

frontend/src/lang/modules/en.ts

@@ -1930,6 +1930,7 @@ const message = {
         httpHelper2: 'Unable to apply for a generic domain name certificate in HTTP mode',
         skipDNSCheck: 'Skip DNS check',
         skipDNSCheckHelper: 'If there is an application timeout problem, please check here, otherwise do not check it',
+        cfHelper: 'Do not use Global API Key',
     },
     firewall: {
         create: 'Create rule',

frontend/src/lang/modules/tw.ts

@@ -1811,6 +1811,7 @@ const message = {
         httpHelper2: 'HTTP 模式無法申請泛網域憑證',
         skipDNSCheck: '跳過 DNS 校驗',
         skipDNSCheckHelper: '如果出現申請超時問題，請勾選此處，其他情況請勿勾選',
+        cfHelper: '請勿使用 Global API Key',
     },
     firewall: {
         create: '創建規則',

frontend/src/lang/modules/zh.ts

@@ -1811,6 +1811,7 @@ const message = {
         httpHelper2: 'HTTP 模式无法申请泛域名证书',
         skipDNSCheck: '跳过 DNS 校验',
         skipDNSCheckHelper: '如果出现申请超时问题，请勾选此处，其他情况请勿勾选',
+        cfHelper: '请勿使用 Global API Key',
     },
     firewall: {
         create: '创建规则',

frontend/src/views/website/ssl/dns-account/create/index.vue

@@ -44,19 +44,21 @@
                         <el-form-item label="EMAIL" prop="authorization.email">
                             <el-input v-model.trim="account.authorization['email']"></el-input>
                         </el-form-item>
+                        <el-form-item label="API Token" prop="authorization.apiKey">
+                            <el-input v-model.trim="account.authorization['apiKey']"></el-input>
+                            <span class="input-help">
+                                {{ $t('ssl.cfHelper') }}
+                            </span>
+                        </el-form-item>
                     </div>
                     <el-form-item
                         label="API Key"
                         prop="authorization.apiKey"
-                        v-if="
+                        v-if="account.type === 'NameCheap' || account.type === 'NameSilo' || account.type === 'Godaddy'"
-                            account.type === 'CloudFlare' ||
-                            account.type === 'NameCheap' ||
-                            account.type === 'NameSilo' ||
-                            account.type === 'Godaddy'
-                        "
                     >
                         <el-input v-model.trim="account.authorization['apiKey']"></el-input>
                     </el-form-item>
+
                     <el-form-item label="API User" prop="authorization.apiUser" v-if="account.type === 'NameCheap'">
                         <el-input v-model.trim="account.authorization['apiUser']"></el-input>
                     </el-form-item>