feat: 加上图形滑动验证

src/stores/modules/breadCrumb.ts

@@ -18,6 +18,16 @@ export const useBreadCrumb = defineStore('breadCrumb', {
   getters: {},
   actions: {
     setRouteList(toRoute: any) {
+      if (toRoute.name === 'Reset Password') {
+        this.routeList = [
+          {
+            label: toRoute.name,
+            path: toRoute.path,
+            query: toRoute.query
+          }
+        ]
+      }
+
       const index = this.routeList.findIndex((item) => item.label === toRoute.name)
       if (index !== -1) {
         this.routeList.splice(index + 1)

src/views/Login/src/components/SliderVerification.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 //滑动图片验证码部分
-import Img01 from '../image/bg.png'
+import Img01 from '../image/verification-img.png'
 import { ref } from 'vue'
 //引入'vue3-puzzle-vcode'插件
 import Vcode from 'vue3-puzzle-vcode'
@@ -17,8 +17,16 @@ const openDialog = () => {
 const addElement = () => {
   addTipsNode()
   addSliderBtnNode('start')
+  updateRefreshImg()
 }
 
+const updateRefreshImg = () => {
+  const targetNode: any = document.querySelector('img.reset_')
+  if (targetNode) {
+    // 使用 import.meta.url 结合 new URL 获取图片的正确路径
+    targetNode.src = new URL('../image/icon_refresh_bold_b.png', import.meta.url).href
+  }
+}
 const addTipsNode = () => {
   const childNode = document.createElement('div')
   childNode.className = 'tips'
@@ -36,11 +44,6 @@ const addTipsNode = () => {
 
 const styleMap = {
   start: {
-    thumbColor: 'var(--color-neutral-1)',
-    thumbIcon: 'icon-icon_drag__line_b',
-    trackBackground: '#87909e'
-  },
-  dragging: {
     thumbColor: 'var(--color-neutral-1)',
     thumbIcon: 'icon-icon_drag__line_b',
     trackBackground: 'var(--color-success)'
@@ -92,7 +95,7 @@ const onSuccess = () => {
     const observer = new MutationObserver((mutationsList) => {
       mutationsList.forEach((mutation) => {
         if (mutation.type === 'childList') {
-          if ((mutation.target as any).innerHTML === '验证通过！') {
+          if ((mutation.target as any).innerHTML === 'Verification successful') {
             updateSliderBackground('success')
             addSliderBtnNode('success')
             setTimeout(() => {
@@ -117,6 +120,10 @@ const close = () => {
 const fail = () => {
   updateSliderBackground('error')
   addSliderBtnNode('error')
+  setTimeout(() => {
+    updateSliderBackground('start')
+    addSliderBtnNode('start')
+  }, 800)
 }
 
 defineExpose({
@@ -132,6 +139,9 @@ defineExpose({
     :canvasHeight="180"
     sliderText="Swipe to verify"
     :sliderSize="38"
+    successText="Verification successful"
+    failText="Verification failed"
+    :range="5"
     :imgs="[Img01]"
   ></Vcode>
 </template>
@@ -169,6 +179,10 @@ defineExpose({
   }
 }
 
+div.vue-puzzle-vcode {
+  background-color: rgba(43, 47, 54, 0.7);
+}
+
 .vue-auth-box_ .auth-control_ div.range-box {
   background-color: #87909e;
   box-shadow: none;
@@ -185,9 +199,32 @@ defineExpose({
   display: none;
 }
 
-// 隐藏成功的提示
+// 成功的提示
 .vue-auth-box_ .auth-body_ div.info-box_ {
-  // display: none;
-  opacity: 0 !important;
+  background: var(--color-success);
+}
+// 失败的提示
+.vue-auth-box_ .auth-body_ div.info-box_.fail {
+  background: #c7353f;
+}
+
+// 滑轨
+.vue-auth-box_ .auth-control_ .range-box div.range-slider {
+  border-radius: 6px;
+}
+// 滑块
+.vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
+  border-radius: 6px;
+}
+
+.vue-auth-box_ .auth-body_ .reset_ {
+  width: 20px;
+  height: 20px;
+  top: 10px;
+  right: 10px;
+}
+
+.vue-auth-box_ .auth-control_ .range-box .range-text {
+  color: #fff;
 }
 </style>

src/views/Login/src/loginView.vue

@@ -144,6 +144,7 @@ const handleLogin = () => {
   }
   sliderVerificationFn()
   // 这里是登录逻辑
+  // handleLoginAfterVerify()
 }
 // 验证结束后调用登录接口
 const handleLoginAfterVerify = () => {