perf: 动态加载验证码script

packages/ui/certd-client/index.html

@@ -23,7 +23,7 @@
 
 </div>
 <script type="module" src="/src/main.ts"></script>
-<script src="https://static.geetest.com/v4/gt4.js"></script>
-<script src="https://turing.captcha.qcloud.com/TJCaptcha.js"></script>
+<!--<script src="https://static.geetest.com/v4/gt4.js"></script>-->
+<!--<script src="https://turing.captcha.qcloud.com/TJCaptcha.js"></script>-->
 </body>
 </html>

packages/ui/certd-client/package.json

@@ -97,6 +97,7 @@
     "vue-cropperjs": "^5.0.0",
     "vue-echarts": "^7.0.3",
     "vue-i18n": "^9.10.2",
+    "vue-plugin-load-script": "2.1.1",
     "vue-router": "^4.3.0",
     "vuedraggable": "^4.1.0",
     "watermark-js-plus": "^1.5.8",

packages/ui/certd-client/src/components/captcha/captchas/geetest_captcha.vue

@@ -7,6 +7,15 @@ import { useSettingStore } from "/@/store/settings";
 import { request } from "/src/api/service";
 import { notification } from "ant-design-vue";
 
+import { loadScript } from "vue-plugin-load-script";
+const loaded = ref(false);
+async function loadCaptchaScript() {
+  // 加载验证码js
+  await loadScript("https://static.geetest.com/v4/gt4.js");
+  loaded.value = true;
+}
+loadCaptchaScript();
+
 defineOptions({
   name: "GeetestCaptcha",
 });

packages/ui/certd-client/src/components/captcha/captchas/tencent_captcha.vue

@@ -4,7 +4,8 @@
       <div class="sweep-animation"></div>
       <div class="box-content">
         <div class="box-icon">✓</div>
-        <span class="status-text">点击进行校验</span>
+        <span v-if="modelValue == null" class="status-text">点击进行验证</span>
+        <span v-else class="status-text">验证成功</span>
       </div>
     </div>
   </div>
@@ -13,6 +14,17 @@
 import { onMounted, defineProps, defineEmits, ref, onUnmounted, Ref, watch } from "vue";
 import { notification } from "ant-design-vue";
 
+import { loadScript } from "vue-plugin-load-script";
+const loaded = ref(false);
+async function loadCaptchaScript() {
+  // 加载验证码js
+  // var appid = "您的CaptchaAppId";
+  // loadScript("https://turing.captcha.qq.com/TJCaptcha.js?appid=" + appid);
+  await loadScript("https://turing.captcha.qcloud.com/TJCaptcha.js");
+  loaded.value = true;
+}
+loadCaptchaScript();
+
 defineOptions({
   name: "TencentCaptcha",
 });
@@ -42,7 +54,6 @@ function callback(res: { ret: number; ticket: string; randstr: string; errorCode
   // res（请求验证码发生错误，验证码自动返回trerror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
   // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
   if (res.ret === 0) {
-    debugger;
     emitChange({
       ticket: res.ticket,
       randstr: res.randstr,
@@ -69,6 +80,13 @@ function loadErrorCallback(error: any) {
   });
 }
 async function triggerCaptcha() {
+  if (!loaded.value) {
+    notification.error({
+      message: "验证码还未加载完成，请稍后再试",
+    });
+    return;
+  }
+
   const { captchaAppId } = await props.captchaGet();
 
   try {