为滑动验证组件添加动画效果

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "go-captcha-vue",
-  "version": "2.0.6",
+  "name": "miharakinu-go-captcha-vue",
+  "version": "2.0.8",
   "private": false,
   "type": "module",
   "license": "MIT",
-  "email": "wengaolng@gmail.com",
-  "author": "Awen <[email protected]>",
+  "email": "MiharaKinu1999@gmail.com",
+  "author": "MiharaKinu",
   "description": "GoCaptcha of Vue, which implements click mode, slider mode, drag-drop mode and rotation mode.",
   "keywords": [
     "go-captcha-vue",
@@ -17,13 +17,13 @@
     "gocapts"
   ],
   "bugs": {
-    "url": "https://github.com/wenlng/go-captcha-vue/issues"
+    "url": "https://github.com/MiharaKinu/go-captcha-vue/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wenlng/go-captcha-vue.git"
+    "url": "git+https://github.com/MiharaKinu/go-captcha-vue.git"
   },
-  "homepage": "https://github.com/wenlng/go-captcha-vue",
+  "homepage": "https://github.com/MiharaKinu/go-captcha-vue",
   "main": "dist/go-captcha-vue.umd.js",
   "module": "dist/go-captcha-vue.es.js",
   "types": "./dist/index.d.ts",
@@ -70,5 +70,8 @@
     "vue": "^3.0.0",
     "vite": "4.4.11",
     "vue-tsc": "^2.0.11"
+  },
+  "dependencies": {
+    "caniuse-lite": "^1.0.30001717"
   }
 }

packages/components/base/Tips.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    ref="notification"
+    class="notification"
+    :class="[typeClass, { show: isVisible }]"
+  >
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+
+const props = defineProps({
+  // 是否显示
+  show: {
+    type: Boolean,
+    default: false
+  },
+  // 显示内容
+  content: {
+    type: String,
+    default: ''
+  },
+  // 状态类型
+  type: {
+    type: String,
+    default: 'SUCCESS',
+    validator: (value) => ['SUCCESS', 'WARNING', 'ERROR'].includes(value)
+  },
+  // 自动关闭时间（毫秒），设为0则不自动关闭
+  duration: {
+    type: Number,
+    default: 1500
+  }
+})
+
+const emit = defineEmits(['update:show'])
+
+const notification = ref(null)
+const isVisible = ref(false)
+let hideTimeout = null
+
+const typeClass = computed(() => `notification-${props.type.toLowerCase()}`)
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      showNotification()
+    } else {
+      hideNotification()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.show) {
+    showNotification()
+  }
+})
+
+function showNotification() {
+  clearTimeout(hideTimeout)
+  isVisible.value = true
+
+  if (props.duration > 0) {
+    hideTimeout = setTimeout(() => {
+      hideNotification()
+    }, props.duration)
+  }
+}
+
+function hideNotification() {
+  isVisible.value = false
+  emit('update:show', false)
+}
+</script>
+
+<style lang="less">
+.notification {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  font-size: 16px;
+  z-index: 1000;
+  padding: 2px;
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(100%);
+
+  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
+              opacity 0.4s ease-in-out,
+              visibility 0s linear 0.5s;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    transition-delay: 0s, 0s, 0s;
+  }
+
+  // 不同类型样式
+  &-success {
+    background-color: #34a853;
+  }
+
+  &-warning {
+    background-color: #fbbc05;
+  }
+
+  &-error {
+    background-color: #ea4335;
+  }
+}
+</style>

packages/components/slide/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="`go-captcha gc-wrapper ${localConfig.showTheme && 'gc-theme'}`"
+    :class="`go-captcha gc-wrapper gc-slide ${localConfig.showTheme && 'gc-theme'}`"
     :style="wrapperStyles"
     v-show="hasDisplayWrapperState"
     ref="rootRef"
@@ -21,7 +21,7 @@
       </div>
     </div>
     <div
-      class="gc-body"
+      :class="`gc-body ${innerTips.type == 'SUCCESS' && innerTips.show ? 'shine-effect-tr-bl' : ''}`"
       ref="containerRef"
       :style="imageStyles"
     >
@@ -35,6 +35,11 @@
         :src="localData.image"
         alt=""
       />
+      <Tips
+        v-model:show="innerTips.show"
+        :content="innerTips.content"
+        :type="innerTips.type"
+      />
       <div
         class="gc-tile"
         ref="tileRef"
@@ -49,7 +54,10 @@
     </div>
     <div class="gc-footer">
       <div class="gc-drag-slide-bar" ref="dragBarRef">
-        <div class="gc-drag-line" />
+
+        <div class="gc-drag-line">
+          <div class="gc-drag-text" :style="dragTextStyles">{{ localConfig.title }}</div>
+        </div>
         <div
           class="gc-drag-block"
           :class="!hasDisplayImageState && 'disabled'"
@@ -82,6 +90,13 @@ import {defaultSlideData, SlideData} from "./meta/data";
 import {SlideEvent} from "./meta/event";
 import {SlideExpose} from "./meta/expose";
 import {useHandler} from "./hooks/handler";
+import Tips from "../base/Tips.vue";
+
+const innerTips = reactive({
+  show: false,
+  content: '',
+  type: 'SUCCESS',
+})
 
 // @ts-ignore
 const props = withDefaults(
@@ -182,6 +197,16 @@ const hasDisplayWrapperState = computed(() => {
   return (localConfig.width || 0) > 0 || (localConfig.height || 0) > 0
 })
 
+// 动态裁剪滑动槽中的文本：随着把柄移动，隐藏其左侧的文字
+const dragTextStyles = computed(() => {
+  const left = Math.max(0, handler.state.dragLeft || 0)
+  const px = left + 'px'
+  return {
+    clipPath: `inset(0 0 0 ${px})`,
+    WebkitClipPath: `inset(0 0 0 ${px})`,
+  } as any
+})
+
 const fn = (event: any) => event.preventDefault()
 onMounted(async () => {
   await nextTick();
@@ -197,6 +222,11 @@ defineExpose<SlideExpose>({
   clear: handler.clearData,
   refresh: handler.refresh,
   close: handler.close,
+  setTips: (show: boolean, content: string, type: string) => {
+    innerTips.show = show
+    innerTips.content = content
+    innerTips.type = type
+  }
 });
 </script>
 
@@ -215,4 +245,58 @@ defineExpose<SlideExpose>({
     }
   }
 }
+
+/* Slide-only overrides to implement track + square arrow handle */
+.go-captcha.gc-slide {
+  .gc-drag-slide-bar {
+    height: 40px;
+  }
+
+  .gc-drag-line {
+    height: 40px;
+    margin-top: -20px;
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb; // neutral-200
+    border-radius: 6px;
+    position: relative;
+    pointer-events: none; // allow dragging even when starting on text
+   }
+
+  .gc-drag-text {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #9ca3af; // neutral-400 text
+    font-size: 13px;
+    pointer-events: none;
+  }
+
+  .gc-drag-block {
+    width: 44px;
+    height: 36px;
+    margin-top: -18px;
+    background: #f3f4f6; // neutral-100
+    border: 1px solid #d1d5db; // neutral-300
+    border-radius: 4px;
+    color: #6b7280; // neutral-500 icon color
+    fill: #6b7280;
+    box-shadow: none;
+
+    &.disabled {
+      background: #eef2f7;
+      border-color: #e5e7eb;
+    }
+  }
+
+  .gc-drag-block-inline {
+    svg {
+      width: 16px;
+      height: 16px;
+      color: #6b7280;
+      fill: #6b7280;
+    }
+  }
+}
 </style>

packages/components/slide/meta/expose.ts

@@ -9,4 +9,5 @@ export interface SlideExpose {
   clear: () => void,
   refresh: () => void,
   close: () => void,
+  setTips: (show: boolean, content: string, type: string) => void,
 }