优化

admin/src/components/verify/Verify.vue

@@ -31,18 +31,19 @@
         </div>
     </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import VerifySlide from './Verify/VerifySlide.vue'
 import VerifyPoints from './Verify/VerifyPoints.vue'
 import { computed, ref } from 'vue'
-
+import type { PropType } from 'vue'
 defineOptions({
     name: 'Vue3Verify'
 })
 const props = defineProps({
     captchaType: {
-        type: String,
-        required: true
+        type: String as PropType<'clickWord' | 'blockPuzzle'>, //clickWord,blockPuzzle
+        required: true,
+        default: 'blockPuzzle'
     },
     figure: {
         type: Number
@@ -51,7 +52,7 @@ const props = defineProps({
         type: Number
     },
     mode: {
-        type: String,
+        type: String as PropType<'pop' | ''>,
         default: 'pop'
     },
     vSpace: {
@@ -330,15 +331,6 @@ defineExpose({ show, refresh, closeBox })
     z-index: 3;
 }
 
-/*字体图标的css*/
-/*@font-face {font-family: "iconfont";*/
-/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
-/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
-/*url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),*/
-/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
-/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
-/*}*/
-
 .iconfont {
     font-family: 'iconfont' !important;
     font-size: 16px;

admin/src/views/account/login.vue

@@ -66,7 +66,7 @@
                                 tabindex="1"
                                 show-password
                                 placeholder="请输入密码"
-                                @keyup.enter="onShowCaptcha('blockPuzzle')"
+                                @keyup.enter="onShowCaptcha"
                             >
                                 <template #prepend>
                                     <icon name="el-icon-Lock" />
@@ -82,29 +82,22 @@
                         size="large"
                         tabindex="1"
                         :loading="isLock"
-                        @click="onShowCaptcha('blockPuzzle')"
+                        @click="onShowCaptcha"
                     >
                         登录
                     </el-button>
 
-                    <!-- <button @click="onShowCaptcha('blockPuzzle')">滑块</button>
-                    <button @click="onShowCaptcha('clickWord')">点击文字</button> -->
                     <Verify
                         mode="pop"
-                        :captchaType="captchaType"
+                        captchaType="blockPuzzle"
                         :imgSize="{ width: '400px', height: '200px' }"
-                        ref="verify"
+                        ref="verifyRef"
                         @success="handleSuccess"
                         @error="
                             (e) => {
                                 console.log(e)
                             }
                         "
-                        @ready="
-                            (e) => {
-                                console.log(e)
-                            }
-                        "
                     ></Verify>
                 </div>
             </div>
@@ -114,7 +107,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
+import { computed, onMounted, reactive, shallowRef } from 'vue'
 import type { InputInstance, FormInstance } from 'element-plus'
 import LayoutFooter from '@/layout/components/footer.vue'
 import useAppStore from '@/stores/modules/app'
@@ -124,19 +117,17 @@ import { ACCOUNT_KEY } from '@/enums/cacheEnums'
 import { PageEnum } from '@/enums/pageEnum'
 import { useLockFn } from '@/hooks/useLockFn'
 
-import Verify from '@/components/verifition/Verify.vue'
+import Verify from '@/components/verify/Verify.vue'
 
-const verify = ref(null)
-const captchaType = ref('')
-const onShowCaptcha = (type) => {
-    captchaType.value = type
-    verify.value.show()
+// const verifyRef = ref(null)
+const verifyRef = shallowRef<InstanceType<typeof Verify>>()
+const onShowCaptcha = () => {
+    verifyRef.value.show()
 }
-let verifition = null
+let verifyInfo = null
 const handleSuccess = (res) => {
     console.log(res)
-    console.log('sucess')
-    verifition = res
+    verifyInfo = res
     lockLogin(res)
 }
 
@@ -178,7 +169,7 @@ const handleLogin = async (captchaInfo) => {
     cache.set(ACCOUNT_KEY, {
         username: formData.username
     })
-    await userStore.login({ ...formData, ...verifition })
+    await userStore.login({ ...formData, ...verifyInfo })
     const {
         query: { redirect }
     } = route

server/admin/common/captcha/captcha_ctl.go

@@ -1,6 +1,7 @@
 package captcha
 
 import (
+	"errors"
 	"image/color"
 	"x_admin/core"
 
@@ -71,7 +72,10 @@ func CaptchaRoute(rg *gin.RouterGroup) {
 			c.JSON(200, errorRes(err))
 			return
 		}
-
+		if captchaGet.CaptchaType == "" {
+			c.JSON(200, errorRes(errors.New("验证码类型不能为空")))
+			return
+		}
 		// 根据参数类型获取不同服务即可
 		data, _ := factory.GetService(captchaGet.CaptchaType).Get()
 		//输出json结果给调用方

x_admin_app/components/verify/verify.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   captchaType: {
     type: String as PropType<"clickWord" | "blockPuzzle">, //clickWord,blockPuzzle
     required: true,
-    default: "",
+    default: "blockPuzzle",
   },
 
   mode: {