feat: add sliding verification to the login form (#4461)

packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue

@@ -70,9 +70,9 @@ watchEffect(() => {
 });
 
 function getEventPageX(e: MouseEvent | TouchEvent): number {
-  if (e instanceof MouseEvent) {
+  if ('pageX' in e) {
     return e.pageX;
-  } else if (e instanceof TouchEvent && e.touches[0]) {
+  } else if ('touches' in e && e.touches[0]) {
     return e.touches[0].pageX;
   }
   return 0;
@@ -183,6 +183,8 @@ function resume() {
   const barEl = unref(barRef);
   const contentEl = unref(contentRef);
   if (!actionEl || !barEl || !contentEl) return;
+
+  contentEl.getEl().style.width = '100%';
   state.toLeft = true;
   useTimeoutFn(() => {
     state.toLeft = false;

packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue

@@ -66,6 +66,10 @@ const getImgWrapStyleRef = computed(() => {
 
 const getFactorRef = computed(() => {
   const { maxDegree, minDegree } = props;
+  if (minDegree > maxDegree) {
+    console.warn('minDegree should not be greater than maxDegree');
+  }
+
   if (minDegree === maxDegree) {
     return Math.floor(1 + Math.random() * 1) / 10 + 1;
   }
@@ -116,6 +120,7 @@ function handleDragEnd() {
     checkPass();
   }
   state.showTip = true;
+  state.dragging = false;
 }
 
 function setImgRotate(deg: number) {
@@ -162,7 +167,7 @@ defineExpose({
   <div class="relative flex flex-col items-center">
     <div
       :style="getImgWrapStyleRef"
-      class="border-border relative overflow-hidden rounded-full border shadow-md"
+      class="border-border relative cursor-pointer overflow-hidden rounded-full border shadow-md"
     >
       <img
         :class="imgCls"
@@ -185,7 +190,7 @@ defineExpose({
         >
           {{ verifyTip }}
         </div>
-        <div v-if="!state.showTip && !state.dragging" class="bg-black/30">
+        <div v-if="!state.dragging" class="bg-black/30">
           {{ defaultTip || $t('ui.captcha.sliderRotateDefaultTip') }}
         </div>
       </div>