feat: multi-language component

src/components/Verify/src/ImgRotate.tsx

@@ -1,3 +1,5 @@
+import './ImgRotate.less';
+
 import type { MoveData, DragVerifyActionType } from './types';
 
 import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
@@ -8,7 +10,8 @@ import BasicDragVerify from './DragVerify';
 import { hackCss } from '/@/utils/domUtils';
 
 import { rotateProps } from './props';
-import './ImgRotate.less';
+import { useI18n } from '/@/hooks/web/useI18n';
+
 export default defineComponent({
   name: 'ImgRotateDargVerify',
   inheritAttrs: false,
@@ -27,6 +30,7 @@ export default defineComponent({
       endTime: 0,
       draged: false,
     });
+    const { t } = useI18n('component.verify');
 
     watch(
       () => state.isPassing,
@@ -142,11 +146,11 @@ export default defineComponent({
             />
             {state.showTip && (
               <span class={[`ir-dv-img__tip`, state.isPassing ? 'success' : 'error']}>
-                {state.isPassing ? `校验成功,耗时${time.toFixed(1)}秒！` : '验证失败！'}
+                {state.isPassing ? t('time', { time: time.toFixed(1) }) : t('error')}
               </span>
             )}
             {!state.showTip && !state.draged && (
-              <span class={[`ir-dv-img__tip`, 'normal']}>点击图片可刷新</span>
+              <span class={[`ir-dv-img__tip`, 'normal']}>t('redoTip')</span>
             )}
           </div>
           <BasicDragVerify

src/components/Verify/src/VerifyModal.vue

@@ -1,44 +0,0 @@
-<script lang="tsx">
-  import { defineComponent, ref, unref } from 'vue';
-  import { BasicModal } from '/@/components/Modal/index';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-
-  import { RotateDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
-  export default defineComponent({
-    name: 'VerifyModal',
-
-    setup(_, { attrs, emit }) {
-      const dragRef = ref<DragVerifyActionType | null>(null);
-
-      function handleSuccess() {
-        useTimeoutFn(() => {
-          emit('success');
-          const dragEl = unref(dragRef);
-          if (dragEl) {
-            dragEl.resume();
-          }
-        }, 500);
-      }
-      return () => (
-        <BasicModal
-          {...attrs}
-          title="安全校验"
-          keyboard={false}
-          maskClosable={false}
-          canFullscreen={false}
-          footer={null}
-          wrapperFooterOffset={60}
-          destroyOnClose={true}
-        >
-          <RotateDragVerify
-            imgWidth={210}
-            ref={dragRef}
-            text="请拖动滑块将图片摆正"
-            {...attrs}
-            onSuccess={handleSuccess}
-          />
-        </BasicModal>
-      );
-    },
-  });
-</script>

src/components/Verify/src/props.ts

@@ -1,5 +1,7 @@
 import type { PropType } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
 
+const { t } = useI18n('component.verify');
 export const basicProps = {
   value: {
     type: Boolean as PropType<boolean>,
@@ -13,11 +15,11 @@ export const basicProps = {
 
   text: {
     type: [String] as PropType<string>,
-    default: '请按住滑块拖动',
+    default: t('dragText'),
   },
   successText: {
     type: [String] as PropType<string>,
-    default: '验证通过',
+    default: t('successText'),
   },
   height: {
     type: [Number, String] as PropType<number | string>,