feat: vue3 add captcha support i18n

xingyu4j
1 parent 40f73003
Showing 5 changed files with 35 additions and 13 deletions
yudao-ui-admin-vue3/src/components/Verifition/src/Verify.vue
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifyPoints.vue
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue
yudao-ui-admin-vue3/src/locales/en.ts
yudao-ui-admin-vue3/src/locales/zh-CN.ts
@@ -5,7 +5,7 @@
       :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }"
     >
       <div class="verifybox-top" v-if="mode == 'pop'">
-        请完成安全验证
+        {{ t('captcha.verification') }}
         <span class="verifybox-close" @click="closeBox">
           <i class="iconfont icon-close"></i>
         </span>
@@ -38,6 +38,7 @@
  * */
 import { VerifySlide, VerifyPoints } from './Verify'
 import { computed, ref, toRefs, watchEffect } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
  
 export default {
   name: 'Vue3Verify',
@@ -83,6 +84,7 @@ export default {
     }
   },
   setup(props) {
+    const { t } = useI18n()
     const { captchaType, mode } = toRefs(props)
     const clickShow = ref(false)
     const verifyType = ref(undefined)
@@ -129,6 +131,7 @@ export default {
     })
  
     return {
+      t,
       clickShow,
       verifyType,
       componentType,
@@ -66,6 +66,7 @@ import { resetSize } from &#39;./../utils/util&#39;
 import { aesEncrypt } from './../utils/ase'
 import { reqGet, reqCheck } from './../api/index'
 import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
 export default {
   name: 'VerifyPoints',
   props: {
@@ -102,6 +103,7 @@ export default {
     }
   },
   setup(props) {
+    const { t } = useI18n()
     const { mode, captchaType } = toRefs(props)
     const { proxy } = getCurrentInstance()
     let secretKey = ref(''), //后端返回的ase加密秘钥
@@ -174,7 +176,7 @@ export default {
             if (res.repCode == '0000') {
               barAreaColor.value = '#4cae4c'
               barAreaBorderColor.value = '#5cb85c'
-              text.value = '验证成功'
+              text.value = t('captcha.success')
               bindingClick.value = false
               if (mode.value == 'pop') {
                 setTimeout(() => {
@@ -187,7 +189,7 @@ export default {
               proxy.$parent.$emit('error', proxy)
               barAreaColor.value = '#d9534f'
               barAreaBorderColor.value = '#d9534f'
-              text.value = '验证失败'
+              text.value = t('captcha.fail')
               setTimeout(() => {
                 refresh()
               }, 700)
@@ -219,7 +221,7 @@ export default {
       checkPosArr.splice(0, checkPosArr.length)
       num.value = 1
       getPictrue()
-      text.value = '验证失败'
+      text.value = t('captcha.fail')
       showRefresh.value = true
     }
  
@@ -234,7 +236,7 @@ export default {
           backToken.value = res.repData.token
           secretKey.value = res.repData.secretKey
           poinTextList.value = res.repData.wordList
-          text.value = '请依次点击【' + poinTextList.value.join(',') + '】'
+          text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
         } else {
           text.value = res.repMsg
         }
@@ -79,6 +79,7 @@
 import { aesEncrypt } from './../utils/ase'
 import { resetSize } from './../utils/util'
 import { reqGet, reqCheck } from './../api/index'
+import { useI18n } from '@/hooks/web/useI18n'
 import {
   computed,
   onMounted,
@@ -111,7 +112,7 @@ export default {
     },
     explain: {
       type: String,
-      default: '向右滑动完成验证'
+      default: ''
     },
     imgSize: {
       type: Object,
@@ -142,6 +143,7 @@ export default {
     }
   },
   setup(props) {
+    const { t } = useI18n()
     const { mode, captchaType, type, blockSize, explain } = toRefs(props)
     const { proxy } = getCurrentInstance()
     let secretKey = ref(''), //后端返回的ase加密秘钥
@@ -181,7 +183,11 @@ export default {
       return proxy.$el.querySelector('.verify-bar-area')
     })
     function init() {
-      text.value = explain.value
+      if (explain.value === '') {
+        text.value = t('captcha.slide')
+      } else {
+        text.value = explain.value
+      }
       getPictrue()
       nextTick(() => {
         let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
@@ -311,9 +317,8 @@ export default {
               }, 1500)
             }
             passFlag.value = true
-            tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(
-              2
-            )}s验证成功`
+            tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s 
+            ${t('captcha.success')}`
             var captchaVerification = secretKey.value
               ? aesEncrypt(
                   backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
@@ -335,7 +340,7 @@ export default {
               refresh()
             }, 1000)
             proxy.$parent.$emit('error', proxy)
-            tipWords.value = '验证失败'
+            tipWords.value = t('captcha.fail')
             setTimeout(() => {
               tipWords.value = ''
             }, 1000)
@@ -128,6 +128,13 @@ export default {
     btnRegister: 'Sign up',
     SmsSendMsg: 'code has been sent'
   },
+  captcha: {
+    verification: 'Please complete security verification',
+    slide: 'Swipe right to complete verification',
+    point: 'Please click',
+    success: 'Verification succeeded',
+    fail: 'verification failed'
+  },
   router: {
     login: 'Login',
     home: 'Home',
@@ -191,7 +198,6 @@ export default {
     yield: 'Yield',
     dynamic: 'Dynamic',
     push: 'push',
-    pushCode: 'push code to Github',
     follow: 'Follow'
   },
   form: {
@@ -128,6 +128,13 @@ export default {
     btnRegister: '注册',
     SmsSendMsg: '验证码已发送'
   },
+  captcha: {
+    verification: '请完成安全验证',
+    slide: '向右滑动完成验证',
+    point: '请依次点击',
+    success: '验证成功',
+    fail: '验证失败'
+  },
   router: {
     login: '登录',
     home: '首页',
@@ -191,7 +198,6 @@ export default {
     yield: '产量',
     dynamic: '动态',
     push: '推送',
-    pushCode: '推送 代码到 Github',
     follow: '关注'
   },
   form: {