refactor: verify

yudao-ui-admin-vue3/src/api/login/index.ts

@@ -62,3 +62,12 @@ export const socialAuthRedirectApi = (type: string, redirectUri: string) => {
     url: '/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri
   })
 }
+// 获取验证图片  以及token
+export const getCodeApi = (data) => {
+  return request.postOriginal({ url: 'system/captcha/get', data })
+}
+
+// 滑动或者点选验证
+export const reqCheckApi = (data) => {
+  return request.postOriginal({ url: 'system/captcha/check', data })
+}

yudao-ui-admin-vue3/src/components/Verifition/src/Verify.vue

@@ -2,7 +2,7 @@
   <div :class="mode == 'pop' ? 'mask' : ''" v-show="showBox">
     <div
       :class="mode == 'pop' ? 'verifybox' : ''"
-      :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }"
+      :style="{ 'max-width': parseInt(imgSize.width) + 20 + 'px' }"
     >
       <div class="verifybox-top" v-if="mode == 'pop'">
         {{ t('captcha.verification') }}
@@ -10,7 +10,7 @@
           <i class="iconfont icon-close"></i>
         </span>
       </div>
-      <div class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '15px' : '0' }">
+      <div class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '10px' : '0' }">
         <!-- 验证码容器 -->
         <component
           v-if="componentType"
@@ -153,12 +153,13 @@ export default {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   left: 50%;
   top: 50%;
+  border-radius: 5px;
   transform: translate(-50%, -50%);
 }
 .verifybox-top {
   padding: 0 15px;
-  height: 50px;
-  line-height: 50px;
+  height: 40px;
+  line-height: 40px;
   text-align: left;
   font-size: 16px;
   color: #45494c;
@@ -166,7 +167,7 @@ export default {
   box-sizing: border-box;
 }
 .verifybox-bottom {
-  padding: 15px;
+  padding: 10px;
   box-sizing: border-box;
 }
 .verifybox-close {
@@ -262,6 +263,7 @@ export default {
   color: #ffffff;
   border: none;
   margin-top: 10px;
+  border-radius: 8px;
 }
 
 /*滑动验证码*/
@@ -273,6 +275,7 @@ export default {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   border: 1px solid #ddd;
+  border-radius: 8px;
 }
 
 .verify-bar-area .verify-move-block {
@@ -285,6 +288,7 @@ export default {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   box-shadow: 0 0 2px #888888;
+  border-radius: 8px;
 }
 
 .verify-bar-area .verify-move-block:hover {
@@ -302,6 +306,7 @@ export default {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   border: 1px solid #ddd;
+  border-radius: 8px;
 }
 
 .verify-img-panel {

yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifyPoints.vue

@@ -64,7 +64,7 @@
  * */
 import { resetSize } from './../utils/util'
 import { aesEncrypt } from './../utils/ase'
-import { reqGet, reqCheck } from './../api/index'
+import { getCodeApi, reqCheckApi } from '@/api/login'
 import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 export default {
@@ -172,7 +172,7 @@ export default {
               : JSON.stringify(checkPosArr),
             token: backToken.value
           }
-          reqCheck(data).then((res) => {
+          reqCheckApi(data).then((res) => {
             if (res.repCode == '0000') {
               barAreaColor.value = '#4cae4c'
               barAreaBorderColor.value = '#5cb85c'
@@ -230,7 +230,7 @@ export default {
       let data = {
         captchaType: captchaType.value
       }
-      reqGet(data).then((res) => {
+      getCodeApi(data).then((res) => {
         if (res.repCode == '0000') {
           pointBackImgBase.value = res.repData.originalImageBase64
           backToken.value = res.repData.token

yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue

@@ -78,7 +78,7 @@
  * */
 import { aesEncrypt } from './../utils/ase'
 import { resetSize } from './../utils/util'
-import { reqGet, reqCheck } from './../api/index'
+import { getCodeApi, reqCheckApi } from '@/api/login'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
   computed,
@@ -302,7 +302,7 @@ export default {
             : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
           token: backToken.value
         }
-        reqCheck(data).then((res) => {
+        reqCheckApi(data).then((res) => {
           if (res.repCode == '0000') {
             moveBlockBackgroundColor.value = '#5cb85c'
             leftBarBorderColor.value = '#5cb85c'
@@ -379,7 +379,7 @@ export default {
       let data = {
         captchaType: captchaType.value
       }
-      reqGet(data).then((res) => {
+      getCodeApi(data).then((res) => {
         if (res.repCode == '0000') {
           backImgBase.value = res.repData.originalImageBase64
           blockBackImgBase.value = res.repData.jigsawImageBase64

yudao-ui-admin-vue3/src/components/Verifition/src/api/index.ts

@@ -1,26 +0,0 @@
-/**
- * 此处可直接引用自己项目封装好的 axios 配合后端联调
- */
-
-import request from './../utils/axios' //组件内部封装的axios
-// import request from "@/api/axios.js"       //调用项目封装的axios
-
-//获取验证图片  以及token
-export function reqGet(data) {
-  return request({
-    // url: '/captcha/get',
-    url: '/admin-api/system/captcha/get', // 使用项目自定义的 /admin-api/ 前缀
-    method: 'post',
-    data
-  })
-}
-
-//滑动或者点选验证
-export function reqCheck(data) {
-  return request({
-    // url: '/captcha/check',
-    url: '/admin-api/system/captcha/check', // 使用项目自定义的 /admin-api/ 前缀
-    method: 'post',
-    data
-  })
-}

yudao-ui-admin-vue3/src/components/Verifition/src/utils/axios.ts

@@ -1,26 +0,0 @@
-import axios from 'axios'
-
-axios.defaults.baseURL = import.meta.env.VITE_BASE_URL
-
-const service = axios.create({
-  timeout: 40000,
-  headers: {
-    'X-Requested-With': 'XMLHttpRequest',
-    'Content-Type': 'application/json; charset=UTF-8'
-  }
-})
-service.interceptors.request.use(
-  (config) => {
-    return config
-  },
-  (error) => {
-    Promise.reject(error)
-  }
-)
-
-// response interceptor
-service.interceptors.response.use((response) => {
-  const res = response.data
-  return res
-})
-export default service

yudao-ui-admin-vue3/src/config/axios/index.ts

@@ -26,6 +26,10 @@ export default {
     const res = await request({ method: 'POST', ...option })
     return res.data as unknown as T
   },
+  postOriginal: async (option: any) => {
+    const res = await request({ method: 'POST', ...option })
+    return res
+  },
   delete: async <T = any>(option: any) => {
     const res = await request({ method: 'DELETE', ...option })
     return res.data as unknown as T

yudao-ui-admin-vue3/vite.config.ts

@@ -144,6 +144,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         'vue-router',
         'vue-types',
         'vue-i18n',
+        'vxe-table',
+        'xe-utils',
         'element-plus/es',
         'element-plus/es/locale/lang/zh-cn',
         'element-plus/es/locale/lang/en',