diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
index ee0f453d422..f5357aee2ca 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
@@ -1,5 +1,22 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const { animationDuration = 2, animationIterationCount = 'infinite' } =
+  defineProps<{
+    // 动画持续时间，单位秒
+    animationDuration?: number;
+    // 动画是否只执行一次
+    animationIterationCount?: 'infinite' | number;
+  }>();
+
+const style = computed(() => {
+  return {
+    animation: `shine ${animationDuration}s linear ${animationIterationCount}`,
+  };
+});
+</script>
 <template>
-  <div class="vben-spine-text !bg-clip-text text-transparent">
+  <div :style="style" class="vben-spine-text !bg-clip-text text-transparent">
     <slot></slot>
   </div>
 </template>
@@ -9,7 +26,8 @@
     radial-gradient(circle at center, rgb(255 255 255 / 80%), #f000) -200% 50% /
       200% 100% no-repeat,
     #000;
-  animation: shine 3s linear infinite;
+
+  /* animation: shine 3s linear infinite; */
 }
 
 .dark .vben-spine-text {
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index a89e9e39ccd..3cb4bf42c75 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -23,6 +23,7 @@
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",
diff --git a/packages/effects/common-ui/src/components/captcha/index.ts b/packages/effects/common-ui/src/components/captcha/index.ts
index 54b6db2bf96..6ad68c49647 100644
--- a/packages/effects/common-ui/src/components/captcha/index.ts
+++ b/packages/effects/common-ui/src/components/captcha/index.ts
@@ -1,3 +1,6 @@
-export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
-export { default as PointSelectionCaptchaCard } from './point-selection-captcha-card.vue';
+export { default as PointSelectionCaptcha } from './point-selection-captcha/index.vue';
+export { default as PointSelectionCaptchaCard } from './point-selection-captcha/index.vue';
+
+export { default as SliderCaptcha } from './slider-captcha/index.vue';
+export { default as SliderRotateCaptcha } from './slider-rotate-captcha/index.vue';
 export type * from './types';
diff --git a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue b/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
similarity index 89%
rename from packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
rename to packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
index 57ddbb1cf50..63ce6c2233e 100644
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { CaptchaPoint, PointSelectionCaptchaProps } from './types';
+import type { CaptchaPoint, PointSelectionCaptchaProps } from '../types';
 
 import { RotateCw } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { VbenButton, VbenIconButton } from '@vben-core/shadcn-ui';
 
-import { useCaptchaPoints } from './hooks/useCaptchaPoints';
+import { useCaptchaPoints } from '../hooks/useCaptchaPoints';
 import CaptchaCard from './point-selection-captcha-card.vue';
 
 const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
@@ -121,12 +121,12 @@ function handleConfirm() {
     @click="handleClick"
   >
     <template #title>
-      <slot name="title">{{ $t('captcha.title') }}</slot>
+      <slot name="title">{{ $t('ui.captcha.title') }}</slot>
     </template>
 
     <template #extra>
       <VbenIconButton
-        :aria-label="$t('captcha.refreshAriaLabel')"
+        :aria-label="$t('ui.captcha.refreshAriaLabel')"
         class="ml-1"
         @click="handleRefresh"
       >
@@ -134,19 +134,19 @@ function handleConfirm() {
       </VbenIconButton>
       <VbenButton
         v-if="showConfirm"
-        :aria-label="$t('captcha.confirmAriaLabel')"
+        :aria-label="$t('ui.captcha.confirmAriaLabel')"
         class="ml-2"
         size="sm"
         @click="handleConfirm"
       >
-        {{ $t('captcha.confirm') }}
+        {{ $t('ui.captcha.confirm') }}
       </VbenButton>
     </template>
 
     <div
       v-for="(point, index) in points"
       :key="index"
-      :aria-label="$t('captcha.pointAriaLabel') + (index + 1)"
+      :aria-label="$t('ui.captcha.pointAriaLabel') + (index + 1)"
       :style="{
         top: `${point.y - POINT_OFFSET}px`,
         left: `${point.x - POINT_OFFSET}px`,
@@ -160,7 +160,7 @@ function handleConfirm() {
     <template #footer>
       <img
         v-if="hintImage"
-        :alt="$t('captcha.alt')"
+        :alt="$t('ui.captcha.alt')"
         :src="hintImage"
         class="h-10 w-full rounded border border-solid border-slate-200"
       />
@@ -168,7 +168,7 @@ function handleConfirm() {
         v-else-if="hintText"
         class="flex h-10 w-full items-center justify-center rounded border border-solid border-slate-200"
       >
-        {{ `${$t('captcha.clickInOrder')}` + `【${hintText}】` }}
+        {{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
       </div>
     </template>
   </CaptchaCard>
diff --git a/packages/effects/common-ui/src/components/captcha/point-selection-captcha-card.vue b/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
similarity index 83%
rename from packages/effects/common-ui/src/components/captcha/point-selection-captcha-card.vue
rename to packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
index 6f2761b51ee..0ece2bf040d 100644
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha-card.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PointSelectionCaptchaCardProps } from './types';
+import type { PointSelectionCaptchaCardProps } from '../types';
 
 import { computed } from 'vue';
 
@@ -12,8 +12,6 @@ import {
   CardTitle,
 } from '@vben-core/shadcn-ui';
 
-import { parseValue } from './utils';
-
 const props = withDefaults(defineProps<PointSelectionCaptchaCardProps>(), {
   height: '220px',
   paddingX: '12px',
@@ -26,6 +24,14 @@ const emit = defineEmits<{
   click: [MouseEvent];
 }>();
 
+const parseValue = (value: number | string) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  const parsed = Number.parseFloat(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
 const rootStyles = computed(() => ({
   padding: `${parseValue(props.paddingY)}px ${parseValue(props.paddingX)}px`,
   width: `${parseValue(props.width) + parseValue(props.paddingX) * 2}px`,
@@ -47,7 +53,7 @@ function handleClick(e: MouseEvent) {
     <CardHeader class="p-0">
       <CardTitle id="captcha-title" class="flex items-center justify-between">
         <template v-if="$slots.title">
-          <slot name="title">{{ $t('captcha.title') }}</slot>
+          <slot name="title">{{ $t('ui.captcha.title') }}</slot>
         </template>
         <template v-else>
           <span>{{ title }}</span>
@@ -60,7 +66,7 @@ function handleClick(e: MouseEvent) {
     <CardContent class="relative mt-2 flex w-full overflow-hidden rounded p-0">
       <img
         v-show="captchaImage"
-        :alt="$t('captcha.alt')"
+        :alt="$t('ui.captcha.alt')"
         :src="captchaImage"
         :style="captchaStyles"
         class="relative z-10"
diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue b/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
similarity index 53%
rename from packages/effects/common-ui/src/components/verify/drag-verify/index.vue
rename to packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
index d186c98236c..7cec62e4f69 100644
--- a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
+++ b/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
@@ -1,26 +1,39 @@
 <script setup lang="ts">
-import { computed, reactive, ref, unref, watch, watchEffect } from 'vue';
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaProps,
+  SliderRotateVerifyPassingData,
+} from '../types';
+
+import { reactive, unref, useTemplateRef, watch, watchEffect } from 'vue';
+
+import { $t } from '@vben/locales';
+import { cn } from '@vben-core/shared/utils';
 
 import { useTimeoutFn } from '@vueuse/core';
 
-import { defaultDragVerifyProps, type VerifyProps } from '../props';
-import ActionCmp from './action.vue';
-import BarCmp from './bar.vue';
-import ContentCmp from './content.vue';
+import SliderCaptchaAction from './slider-captcha-action.vue';
+import SliderCaptchaBar from './slider-captcha-bar.vue';
+import SliderCaptchaContent from './slider-captcha-content.vue';
+
+const props = withDefaults(defineProps<SliderCaptchaProps>(), {
+  actionStyle: () => ({}),
+  barStyle: () => ({}),
+  contentStyle: () => ({}),
+  isSlot: false,
+  successText: '',
+  text: '',
+  wrapperStyle: () => ({}),
+});
 
-const props = withDefaults(
-  defineProps<VerifyProps>(),
-  defaultDragVerifyProps(),
-);
+const emit = defineEmits<{
+  end: [MouseEvent | TouchEvent];
+  move: [SliderRotateVerifyPassingData];
+  start: [MouseEvent | TouchEvent];
+  success: [CaptchaVerifyPassingData];
+}>();
 
-const emit = defineEmits([
-  'success',
-  'update:value',
-  'change',
-  'start',
-  'move',
-  'end',
-]);
+const modelValue = defineModel<boolean>({ default: false });
 
 const state = reactive({
   endTime: 0,
@@ -35,24 +48,10 @@ defineExpose({
   resume,
 });
 
-const wrapElRef = ref<HTMLDivElement>();
-const barElRef = ref<typeof BarCmp>();
-const contentElRef = ref<typeof ContentCmp>();
-const actionElRef = ref<typeof ActionCmp>();
-
-const getWrapStyleRef = computed(() => {
-  const { circle, height, width, wrapStyle } = props;
-  const h = Number.parseInt(height as string);
-  const w = `${Number.parseInt(width as string)}px`;
-  return {
-    backgroundColor: 'hsl(var(--background-deep))',
-    borderRadius: circle ? `${h / 2}px` : 0,
-    height: `${h}px`,
-    lineHeight: `${h}px`,
-    width: w,
-    ...wrapStyle,
-  };
-});
+const wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');
+const barRef = useTemplateRef<typeof SliderCaptchaBar>('barRef');
+const contentRef = useTemplateRef<typeof SliderCaptchaContent>('contentRef');
+const actionRef = useTemplateRef<typeof SliderCaptchaAction>('actionRef');
 
 watch(
   () => state.isPassing,
@@ -61,14 +60,13 @@ watch(
       const { endTime, startTime } = state;
       const time = (endTime - startTime) / 1000;
       emit('success', { isPassing, time: time.toFixed(1) });
-      emit('update:value', isPassing);
-      emit('change', isPassing);
+      modelValue.value = isPassing;
     }
   },
 );
 
 watchEffect(() => {
-  state.isPassing = !!props.value;
+  state.isPassing = !!modelValue.value;
 });
 
 function getEventPageX(e: MouseEvent | TouchEvent): number {
@@ -84,34 +82,33 @@ function handleDragStart(e: MouseEvent | TouchEvent) {
   if (state.isPassing) {
     return;
   }
-  if (!actionElRef.value) return;
+  if (!actionRef.value) return;
   emit('start', e);
 
   state.moveDistance =
     getEventPageX(e) -
     Number.parseInt(
-      actionElRef.value.getStyle().left.replace('px', '') || '0',
+      actionRef.value.getStyle().left.replace('px', '') || '0',
       10,
     );
   state.startTime = Date.now();
   state.isMoving = true;
 }
 
-function getOffset(el: HTMLDivElement) {
-  const actionWidth = Number.parseInt(el.style.width);
-  const { width } = props;
-  const widthNum = Number.parseInt(width as string);
-  const offset = widthNum - actionWidth - 6;
-  return { actionWidth, offset, widthNum };
+function getOffset(actionEl: HTMLDivElement) {
+  const wrapperWidth = wrapperRef.value?.offsetWidth ?? 220;
+  const actionWidth = actionEl?.offsetWidth ?? 40;
+  const offset = wrapperWidth - actionWidth - 6;
+  return { actionWidth, offset, wrapperWidth };
 }
 
 function handleDragMoving(e: MouseEvent | TouchEvent) {
   const { isMoving, moveDistance } = state;
   if (isMoving) {
-    const actionEl = unref(actionElRef);
-    const barEl = unref(barElRef);
+    const actionEl = unref(actionRef);
+    const barEl = unref(barRef);
     if (!actionEl || !barEl) return;
-    const { actionWidth, offset, widthNum } = getOffset(actionEl.getEl());
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionEl.getEl());
     const moveX = getEventPageX(e) - moveDistance;
 
     emit('move', {
@@ -123,8 +120,8 @@ function handleDragMoving(e: MouseEvent | TouchEvent) {
       actionEl.setLeft(`${moveX}px`);
       barEl.setWidth(`${moveX + actionWidth / 2}px`);
     } else if (moveX > offset) {
-      actionEl.setLeft(`${widthNum - actionWidth}px`);
-      barEl.setWidth(`${widthNum - actionWidth / 2}px`);
+      actionEl.setLeft(`${wrapperWidth - actionWidth}px`);
+      barEl.setWidth(`${wrapperWidth - actionWidth / 2}px`);
       if (!props.isSlot) {
         checkPass();
       }
@@ -136,16 +133,16 @@ function handleDragOver(e: MouseEvent | TouchEvent) {
   const { isMoving, isPassing, moveDistance } = state;
   if (isMoving && !isPassing) {
     emit('end', e);
-    const actionEl = actionElRef.value;
-    const barEl = unref(barElRef);
+    const actionEl = actionRef.value;
+    const barEl = unref(barRef);
     if (!actionEl || !barEl) return;
     const moveX = getEventPageX(e) - moveDistance;
-    const { actionWidth, offset, widthNum } = getOffset(actionEl.getEl());
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionEl.getEl());
     if (moveX < offset) {
       if (props.isSlot) {
         setTimeout(() => {
-          if (props.value) {
-            const contentEl = unref(contentElRef);
+          if (modelValue.value) {
+            const contentEl = unref(contentRef);
             if (contentEl) {
               contentEl.getEl().style.width = `${Number.parseInt(barEl.getEl().style.width)}px`;
             }
@@ -157,8 +154,8 @@ function handleDragOver(e: MouseEvent | TouchEvent) {
         resume();
       }
     } else {
-      actionEl.setLeft(`${widthNum - actionWidth}px`);
-      barEl.setWidth(`${widthNum - actionWidth / 2}px`);
+      actionEl.setLeft(`${wrapperWidth - actionWidth + 10}px`);
+      barEl.setWidth(`${wrapperWidth - actionWidth / 2}px`);
       checkPass();
     }
     state.isMoving = false;
@@ -182,54 +179,55 @@ function resume() {
   state.toLeft = false;
   state.startTime = 0;
   state.endTime = 0;
-  const actionEl = unref(actionElRef);
-  const barEl = unref(barElRef);
-  const contentEl = unref(contentElRef);
+  const actionEl = unref(actionRef);
+  const barEl = unref(barRef);
+  const contentEl = unref(contentRef);
   if (!actionEl || !barEl || !contentEl) return;
   state.toLeft = true;
   useTimeoutFn(() => {
     state.toLeft = false;
-    actionEl.setLeft('0px');
-    barEl.setWidth('0px');
+    actionEl.setLeft('0');
+    barEl.setWidth('0');
   }, 300);
 }
 </script>
 
 <template>
   <div
-    ref="wrapElRef"
-    :style="getWrapStyleRef"
-    class="border-border relative overflow-hidden rounded-md border text-center"
+    ref="wrapperRef"
+    :class="
+      cn(
+        'border-border bg-background-deep relative flex h-10 w-full items-center overflow-hidden rounded-md border text-center',
+        props.class,
+      )
+    "
+    :style="wrapperStyle"
     @mouseleave="handleDragOver"
     @mousemove="handleDragMoving"
     @mouseup="handleDragOver"
     @touchend="handleDragOver"
     @touchmove="handleDragMoving"
   >
-    <BarCmp
-      ref="barElRef"
+    <SliderCaptchaBar
+      ref="barRef"
       :bar-style="barStyle"
-      :circle="circle"
-      :height="height"
       :to-left="state.toLeft"
     />
-    <ContentCmp
-      ref="contentElRef"
+    <SliderCaptchaContent
+      ref="contentRef"
       :content-style="contentStyle"
-      :height="height"
       :is-passing="state.isPassing"
-      :success-text="successText"
-      :text="text"
-      :width="width"
+      :success-text="successText || $t('ui.captcha.sliderSuccessText')"
+      :text="text || $t('ui.captcha.sliderDefaultText')"
     >
       <template v-if="$slots.text" #text>
         <slot :is-passing="state.isPassing" name="text"></slot>
       </template>
-    </ContentCmp>
-    <ActionCmp
-      ref="actionElRef"
+    </SliderCaptchaContent>
+
+    <SliderCaptchaAction
+      ref="actionRef"
       :action-style="actionStyle"
-      :height="height"
       :is-passing="state.isPassing"
       :to-left="state.toLeft"
       @mousedown="handleDragStart"
@@ -238,6 +236,6 @@ function resume() {
       <template v-if="$slots.actionIcon" #icon>
         <slot :is-passing="state.isPassing" name="actionIcon"></slot>
       </template>
-    </ActionCmp>
+    </SliderCaptchaAction>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
new file mode 100644
index 00000000000..fc002bd8b19
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
+
+import { Check, ChevronsRight } from '@vben/icons';
+import { Slot } from '@vben-core/shadcn-ui';
+
+const props = defineProps<{
+  actionStyle: CSSProperties;
+  isPassing: boolean;
+  toLeft: boolean;
+}>();
+
+const actionRef = useTemplateRef<HTMLDivElement>('actionRef');
+
+const left = ref('0');
+
+const style = computed(() => {
+  const { actionStyle } = props;
+  return {
+    ...actionStyle,
+    left: left.value,
+  };
+});
+
+const isDragging = computed(() => {
+  const currentLeft = Number.parseInt(left.value as string);
+
+  return currentLeft > 10 && !props.isPassing;
+});
+
+defineExpose({
+  getEl: () => {
+    return actionRef.value;
+  },
+  getStyle: () => {
+    return actionRef?.value?.style;
+  },
+  setLeft: (val: string) => {
+    left.value = val;
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="actionRef"
+    :class="{
+      'transition-width !left-0 duration-300': toLeft,
+      'rounded-md': isDragging,
+    }"
+    :style="style"
+    class="bg-background dark:bg-accent absolute left-0 top-0 flex h-full cursor-move items-center justify-center px-3.5 shadow-md"
+  >
+    <Slot :is-passing="isPassing" class="text-foreground/60 size-4">
+      <slot name="icon">
+        <ChevronsRight v-if="!isPassing" />
+        <Check v-else />
+      </slot>
+    </Slot>
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
new file mode 100644
index 00000000000..eacf6842d3d
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, type CSSProperties, ref, useTemplateRef } from 'vue';
+
+const props = defineProps<{
+  barStyle: CSSProperties;
+  toLeft: boolean;
+}>();
+
+const barRef = useTemplateRef<HTMLDivElement>('barRef');
+
+const width = ref('0');
+
+const style = computed(() => {
+  const { barStyle } = props;
+  return {
+    ...barStyle,
+    width: width.value,
+  };
+});
+
+defineExpose({
+  getEl: () => {
+    return barRef.value;
+  },
+  setWidth: (val: string) => {
+    width.value = val;
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    :class="toLeft && 'transition-width !w-0 duration-300'"
+    :style="style"
+    class="bg-success absolute h-full"
+  ></div>
+</template>
diff --git a/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
new file mode 100644
index 00000000000..5c481f2e618
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+import { computed, useTemplateRef } from 'vue';
+
+import { VbenSpineText } from '@vben-core/shadcn-ui';
+
+const props = defineProps<{
+  contentStyle: CSSProperties;
+  isPassing: boolean;
+  successText: string;
+  text: string;
+}>();
+
+const contentRef = useTemplateRef<HTMLDivElement>('contentRef');
+
+const style = computed(() => {
+  const { contentStyle } = props;
+
+  return {
+    ...contentStyle,
+  };
+});
+
+defineExpose({
+  getEl: () => {
+    return contentRef.value;
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="contentRef"
+    :class="{
+      [$style.success]: isPassing,
+    }"
+    :style="style"
+    class="absolute top-0 flex size-full select-none items-center justify-center text-xs"
+  >
+    <slot name="text">
+      <VbenSpineText class="flex h-full items-center">
+        {{ isPassing ? successText : text }}
+      </VbenSpineText>
+    </slot>
+  </div>
+</template>
+
+<style module>
+.success {
+  -webkit-text-fill-color: hsl(0deg 0% 98%);
+}
+</style>
diff --git a/packages/effects/common-ui/src/components/verify/rotate-verify/index.vue b/packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue
similarity index 60%
rename from packages/effects/common-ui/src/components/verify/rotate-verify/index.vue
rename to packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue
index 1678961a22d..e855900af3f 100644
--- a/packages/effects/common-ui/src/components/verify/rotate-verify/index.vue
+++ b/packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue
@@ -1,22 +1,37 @@
 <script setup lang="ts">
-import type { DragVerifyActionType, VerifyMoveData } from '../typing';
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaActionType,
+  SliderRotateCaptchaProps,
+  SliderRotateVerifyPassingData,
+} from '../types';
 
-import { computed, reactive, ref, unref, watch } from 'vue';
+import { computed, reactive, unref, useTemplateRef, watch } from 'vue';
+
+import { $t } from '@vben/locales';
 
 import { useTimeoutFn } from '@vueuse/core';
 
-import DragVerify from '../drag-verify/index.vue';
-import { defaultRotateVerifyProps, type RotateProps } from '../props';
+import SliderCaptcha from '../slider-captcha/index.vue';
+
+const props = withDefaults(defineProps<SliderRotateCaptchaProps>(), {
+  defaultTip: '',
+  diffDegree: 20,
+  imageSize: 260,
+  maxDegree: 300,
+  minDegree: 120,
+  src: '',
+});
+
+const emit = defineEmits<{
+  success: [CaptchaVerifyPassingData];
+}>();
+
+const slideBarRef = useTemplateRef<SliderCaptchaActionType>('slideBarRef');
 
-const props = withDefaults(
-  defineProps<RotateProps>(),
-  defaultRotateVerifyProps(),
-);
-const emit = defineEmits(['success', 'change', 'update:value']);
-const basicRef = ref<DragVerifyActionType | null>(null);
 const state = reactive({
   currentRotate: 0,
-  draged: false,
+  dragging: false,
   endTime: 0,
   imgStyle: {},
   isPassing: false,
@@ -25,6 +40,9 @@ const state = reactive({
   startTime: 0,
   toOrigin: false,
 });
+
+const modalValue = defineModel<boolean>({ default: false });
+
 watch(
   () => state.isPassing,
   (isPassing) => {
@@ -32,18 +50,17 @@ watch(
       const { endTime, startTime } = state;
       const time = (endTime - startTime) / 1000;
       emit('success', { isPassing, time: time.toFixed(1) });
-      emit('change', isPassing);
-      emit('update:value', isPassing);
     }
+    modalValue.value = isPassing;
   },
 );
 
 const getImgWrapStyleRef = computed(() => {
-  const { imgWidth, imgWrapStyle } = props;
+  const { imageSize, imageWrapperStyle } = props;
   return {
-    height: `${imgWidth}px`,
-    width: `${imgWidth}px`,
-    ...imgWrapStyle,
+    height: `${imageSize}px`,
+    width: `${imageSize}px`,
+    ...imageWrapperStyle,
   };
 });
 
@@ -54,20 +71,21 @@ const getFactorRef = computed(() => {
   }
   return 1;
 });
+
 function handleStart() {
   state.startTime = Date.now();
 }
 
-function handleDragBarMove(data: VerifyMoveData) {
-  state.draged = true;
-  const { height, imgWidth, maxDegree } = props;
+function handleDragBarMove(data: SliderRotateVerifyPassingData) {
+  state.dragging = true;
+  const { imageSize, maxDegree } = props;
   const { moveX } = data;
-  const denominator = imgWidth! - Number.parseInt(height as string);
+  const denominator = imageSize!;
   if (denominator === 0) {
     return;
   }
   const currentRotate = Math.ceil(
-    (moveX / denominator) * maxDegree! * unref(getFactorRef),
+    (moveX / denominator) * 1.5 * maxDegree! * unref(getFactorRef),
   );
   state.currentRotate = currentRotate;
   setImgRotate(state.randomRotate - currentRotate);
@@ -113,7 +131,7 @@ function checkPass() {
 
 function resume() {
   state.showTip = false;
-  const basicEl = unref(basicRef);
+  const basicEl = unref(slideBarRef);
   if (!basicEl) {
     return;
   }
@@ -127,10 +145,12 @@ const imgCls = computed(() => {
   return state.toOrigin ? ['transition-transform duration-300'] : [];
 });
 
-const tip = computed(() => {
+const verifyTip = computed(() => {
   return state.isPassing
-    ? `验证校验成功,耗时${((state.endTime - state.startTime) / 1000).toFixed(1)}秒！`
-    : '验证失败！';
+    ? $t('ui.captcha.sliderRotateSuccessTip', [
+        ((state.endTime - state.startTime) / 1000).toFixed(1),
+      ])
+    : $t('ui.captcha.sliderRotateFailTip');
 });
 
 defineExpose({
@@ -142,46 +162,40 @@ defineExpose({
   <div class="relative flex flex-col items-center">
     <div
       :style="getImgWrapStyleRef"
-      class="relative overflow-hidden rounded-full"
+      class="border-border relative overflow-hidden rounded-full border shadow-md"
     >
       <img
         :class="imgCls"
         :src="src"
         :style="state.imgStyle"
-        :width="parseInt(props.width as string)"
         alt="verify"
         class="w-full rounded-full"
         @click="resume"
         @load="handleImgOnLoad"
       />
       <div
-        class="absolute bottom-[10px] left-0 z-10 block h-[30px] w-full text-center text-xs leading-[30px] text-white"
+        class="absolute bottom-3 left-0 z-10 block h-7 w-full text-center text-xs leading-[30px] text-white"
       >
         <div
           v-if="state.showTip"
-          :style="{
-            backgroundColor: state.isPassing
-              ? 'hsl(var(--success))'
-              : 'hsl(var(--red-700))',
+          :class="{
+            'bg-success/80': state.isPassing,
+            'bg-destructive/80': !state.isPassing,
           }"
         >
-          {{ tip }}
+          {{ verifyTip }}
         </div>
-        <div
-          v-if="!state.showTip && !state.draged"
-          class="bg-[rgba(0,0,0,0.3)]"
-        >
-          点击图片可刷新
+        <div v-if="!state.showTip && !state.dragging" class="bg-black/30">
+          {{ defaultTip || $t('ui.captcha.sliderRotateDefaultTip') }}
         </div>
       </div>
     </div>
 
-    <DragVerify
-      v-bind="props"
-      ref="basicRef"
-      :is-slot="true"
-      :value="state.isPassing"
+    <SliderCaptcha
+      ref="slideBarRef"
+      v-model="modalValue"
       class="mt-5"
+      is-slot
       @end="handleDragEnd"
       @move="handleDragBarMove"
       @start="handleStart"
@@ -189,6 +203,6 @@ defineExpose({
       <template v-for="(_, key) in $slots" :key="key" #[key]="slotProps">
         <slot :name="key" v-bind="slotProps"></slot>
       </template>
-    </DragVerify>
+    </SliderCaptcha>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/components/captcha/types.ts b/packages/effects/common-ui/src/components/captcha/types.ts
index ea7b739a4d5..18c0b9ae606 100644
--- a/packages/effects/common-ui/src/components/captcha/types.ts
+++ b/packages/effects/common-ui/src/components/captcha/types.ts
@@ -1,3 +1,5 @@
+import type { CSSProperties } from 'vue';
+
 export interface CaptchaData {
   /**
    * x
@@ -69,22 +71,103 @@ export interface PointSelectionCaptchaProps
   hintText?: string;
 }
 
-/**
- * TODO: 滑动验证码
- */
-// export interface SlideCaptchaProps extends PointSelectionCaptchaCardProps {
-//   /**
-//    * 瓦片图片高度
-//    * @default '40px'
-//    */
-//   tileHeight?: number | string;
-//   /**
-//    * 瓦片图片宽度
-//    * @default '150px'
-//    */
-//   tileWidth?: number | string;
-//   /**
-//    * 瓦片图片
-//    */
-//   tileImage: string;
-// }
+export interface SliderCaptchaProps {
+  class?: any;
+  /**
+   * @description 滑块的样式
+   * @default {}
+   */
+  actionStyle?: CSSProperties;
+
+  /**
+   * @description 滑块条的样式
+   * @default {}
+   */
+  barStyle?: CSSProperties;
+
+  /**
+   * @description 内容的样式
+   * @default {}
+   */
+  contentStyle?: CSSProperties;
+
+  /**
+   * @description 组件的样式
+   * @default {}
+   */
+  wrapperStyle?: CSSProperties;
+
+  /**
+   * @description 是否作为插槽使用，用于联动组件，可参考旋转校验组件
+   * @default false
+   */
+  isSlot?: boolean;
+
+  /**
+   * @description 验证成功的提示
+   * @default '验证通过'
+   */
+  successText?: string;
+
+  /**
+   * @description 提示文字
+   * @default '请按住滑块拖动'
+   */
+  text?: string;
+}
+
+export interface SliderRotateCaptchaProps {
+  /**
+   * @description 旋转的角度
+   * @default 20
+   */
+  diffDegree?: number;
+
+  /**
+   * @description 图片的宽度
+   * @default 260
+   */
+  imageSize?: number;
+
+  /**
+   * @description 图片的样式
+   * @default {}
+   */
+  imageWrapperStyle?: CSSProperties;
+
+  /**
+   * @description 最大旋转角度
+   * @default 270
+   */
+  maxDegree?: number;
+
+  /**
+   * @description 最小旋转角度
+   * @default 90
+   */
+  minDegree?: number;
+
+  /**
+   * @description 图片的地址
+   */
+  src?: string;
+  /**
+   * @description 默认提示文本
+   */
+  defaultTip?: string;
+}
+
+export interface CaptchaVerifyPassingData {
+  isPassing: boolean;
+  time: number | string;
+}
+
+export interface SliderCaptchaActionType {
+  resume: () => void;
+}
+
+export interface SliderRotateVerifyPassingData {
+  event: MouseEvent | TouchEvent;
+  moveDistance: number;
+  moveX: number;
+}
diff --git a/packages/effects/common-ui/src/components/captcha/utils.ts b/packages/effects/common-ui/src/components/captcha/utils.ts
deleted file mode 100644
index 4deb272ce25..00000000000
--- a/packages/effects/common-ui/src/components/captcha/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const parseValue = (value: number | string) => {
-  if (typeof value === 'number') {
-    return value;
-  }
-  const parsed = Number.parseFloat(value);
-  return Number.isNaN(parsed) ? 0 : parsed;
-};
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index cefe1ce3fc6..865adf409db 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './captcha';
 export * from './ellipsis-text';
 export * from './page';
-export * from './verify';
 export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';
 
diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/action.vue b/packages/effects/common-ui/src/components/verify/drag-verify/action.vue
deleted file mode 100644
index 01347d3324f..00000000000
--- a/packages/effects/common-ui/src/components/verify/drag-verify/action.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { computed, type CSSProperties, ref } from 'vue';
-
-import { Check, ChevronsRight } from '@vben/icons';
-
-const props = defineProps<{
-  actionStyle: CSSProperties;
-  height: number | string;
-  isPassing: boolean;
-  toLeft: boolean;
-}>();
-const divRef = ref<HTMLDivElement>();
-
-const left = ref('0px');
-const style = computed(() => {
-  const { actionStyle, height } = props;
-  const h = `${Number.parseInt(height as string)}px`;
-  return {
-    background: 'hsl(var(--background))',
-    height: h,
-    left: left.value,
-    width: h,
-    ...actionStyle,
-  };
-});
-
-defineExpose({
-  getEl: () => {
-    return divRef.value;
-  },
-  getStyle: () => {
-    return divRef.value && divRef.value && divRef.value.style;
-  },
-  setLeft: (val: string) => {
-    left.value = val;
-  },
-});
-</script>
-
-<template>
-  <div
-    ref="divRef"
-    :class="toLeft ? 'transition-width !left-0 duration-300' : ''"
-    :style="style"
-    class="absolute left-0 top-0 flex cursor-move items-center justify-center rounded-md"
-  >
-    <slot v-if="$slots.icon" name="icon"></slot>
-
-    <template v-else>
-      <ChevronsRight v-if="!isPassing" />
-      <Check v-else />
-    </template>
-  </div>
-</template>
diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/bar.vue b/packages/effects/common-ui/src/components/verify/drag-verify/bar.vue
deleted file mode 100644
index f607550f59e..00000000000
--- a/packages/effects/common-ui/src/components/verify/drag-verify/bar.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed, type CSSProperties, ref } from 'vue';
-
-const props = defineProps<{
-  barStyle: CSSProperties;
-  circle: boolean;
-  height: number | string;
-  toLeft: boolean;
-}>();
-const divRef = ref<HTMLDivElement>();
-const width = ref('0px');
-
-const style = computed(() => {
-  const { barStyle, circle, height } = props;
-  const h = Number.parseInt(height as string);
-  return {
-    background: 'hsl(var(--success))',
-    borderRadius: circle ? `${h / 2}px 0 0 ${h / 2}px` : 0,
-    height: `${h}px`,
-    ...barStyle,
-    width: width.value,
-  };
-});
-
-defineExpose({
-  getEl: () => {
-    return divRef.value;
-  },
-  setWidth: (val: string) => {
-    width.value = val;
-  },
-});
-</script>
-
-<template>
-  <div
-    ref="divRef"
-    :class="props.toLeft ? 'transition-width !w-0 duration-300' : ''"
-    :style="style"
-    class="absolute h-9 w-0 rounded-md"
-  ></div>
-</template>
diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/content.vue b/packages/effects/common-ui/src/components/verify/drag-verify/content.vue
deleted file mode 100644
index 21a82c28f0e..00000000000
--- a/packages/effects/common-ui/src/components/verify/drag-verify/content.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { computed, type CSSProperties, ref } from 'vue';
-
-const props = defineProps<{
-  contentStyle: CSSProperties;
-  height: number | string;
-  isPassing: boolean;
-  successText: string;
-  text: string;
-  width: number | string;
-}>();
-
-const divRef = ref<HTMLDivElement>();
-
-const style = computed(() => {
-  const { contentStyle, height, width } = props;
-  const h = `${Number.parseInt(height as string)}px`;
-  const w = `${Number.parseInt(width as string)}px`;
-
-  return {
-    height: h,
-    width: w,
-    ...contentStyle,
-  };
-});
-
-defineExpose({
-  getEl: () => {
-    return divRef.value;
-  },
-});
-</script>
-
-<template>
-  <div
-    ref="divRef"
-    :class="{
-      [$style.content]: true,
-      [$style.success]: isPassing,
-    }"
-    :style="style"
-    class="absolute top-0 flex select-none items-center justify-center text-xs"
-  >
-    <slot v-if="$slots.text" name="text"></slot>
-    <template v-else>
-      {{ isPassing ? successText : text }}
-    </template>
-  </div>
-</template>
-
-<style module>
-@keyframes slidetounlock {
-  0% {
-    background-position: -120px 0;
-  }
-
-  100% {
-    background-position: 120px 0;
-  }
-}
-
-.content {
-  background-clip: text;
-  animation: slidetounlock 3s infinite;
-  text-size-adjust: none;
-}
-
-.success {
-  -webkit-text-fill-color: white;
-}
-</style>
diff --git a/packages/effects/common-ui/src/components/verify/index.ts b/packages/effects/common-ui/src/components/verify/index.ts
deleted file mode 100644
index b96f54ec124..00000000000
--- a/packages/effects/common-ui/src/components/verify/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as DragVerify } from './drag-verify/index.vue';
-export { default as RotateVerify } from './rotate-verify/index.vue';
-
-export * from './typing';
diff --git a/packages/effects/common-ui/src/components/verify/props.ts b/packages/effects/common-ui/src/components/verify/props.ts
deleted file mode 100644
index 6f65144a989..00000000000
--- a/packages/effects/common-ui/src/components/verify/props.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import type { CSSProperties } from 'vue';
-
-export interface VerifyProps {
-  /**
-   * @description 滑块的样式
-   * @default {}
-   */
-  actionStyle?: CSSProperties;
-
-  /**
-   * @description 滑块条的样式
-   * @default {}
-   */
-  barStyle?: CSSProperties;
-
-  /**
-   * @description 内容的样式
-   * @default {}
-   */
-  contentStyle?: CSSProperties;
-
-  /**
-   * @description 组件的样式
-   * @default {}
-   */
-  wrapStyle?: CSSProperties;
-
-  /**
-   * @description 组件是否为圆角
-   * @default false
-   */
-  circle?: boolean;
-
-  /**
-   * @description 组件宽度
-   * @default 220px
-   */
-  width?: number | string;
-  /**
-   * @description 组件高度
-   * @default 40px
-   */
-  height?: number | string;
-
-  /**
-   * @description 是否作为插槽使用，用于联动组件，可参考旋转校验组件
-   * @default false
-   */
-  isSlot?: boolean;
-
-  /**
-   * @description 验证成功的提示
-   * @default '验证通过'
-   */
-  successText?: string;
-
-  /**
-   * @description 提示文字
-   * @default '请按住滑块拖动'
-   */
-  text?: string;
-
-  /**
-   * @description 是否验证成功
-   * @default false
-   */
-  value?: boolean;
-}
-
-export interface RotateProps extends VerifyProps {
-  /**
-   * @description 旋转的角度
-   * @default 20
-   */
-  diffDegree?: number;
-
-  /**
-   * @description 图片的宽度
-   * @default 260
-   */
-  imgWidth?: number;
-
-  /**
-   * @description 图片的样式
-   * @default {}
-   */
-  imgWrapStyle?: CSSProperties;
-
-  /**
-   * @description 最大旋转角度
-   * @default 270
-   */
-  maxDegree?: number;
-
-  /**
-   * @description 最小旋转角度
-   * @default 90
-   */
-  minDegree?: number;
-
-  /**
-   * @description 图片的地址
-   */
-  src?: string;
-}
-
-export function defaultDragVerifyProps() {
-  return {
-    actionStyle: () => ({}),
-    barStyle: () => ({}),
-    circle: false,
-    contentStyle: () => ({}),
-    height: '40',
-    isSlot: false,
-    successText: '验证通过',
-    text: '请按住滑块拖动',
-    value: false,
-    width: '220',
-    wrapStyle: () => ({}),
-  };
-}
-
-export function defaultRotateVerifyProps() {
-  return {
-    ...defaultDragVerifyProps(),
-    diffDegree: 20,
-    imgWidth: 260,
-    imgWrapStyle: () => ({}),
-    maxDegree: 270,
-    minDegree: 90,
-    src: '',
-  };
-}
diff --git a/packages/effects/common-ui/src/components/verify/typing.ts b/packages/effects/common-ui/src/components/verify/typing.ts
deleted file mode 100644
index 42256968bef..00000000000
--- a/packages/effects/common-ui/src/components/verify/typing.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface DragVerifyActionType {
-  resume: () => void;
-}
-
-export interface VerifyPassingData {
-  isPassing: boolean;
-  time: number;
-}
-
-export interface VerifyMoveData {
-  event: MouseEvent | TouchEvent;
-  moveDistance: number;
-  moveX: number;
-}
diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json
index 338a6a81fcb..ae5e5b3c434 100644
--- a/packages/locales/src/langs/en-US.json
+++ b/packages/locales/src/langs/en-US.json
@@ -313,13 +313,20 @@
       "lockScreen": "Enable Lock Screen"
     }
   },
-  "captcha": {
-    "alt": "Supports img tag src attribute value",
-    "title": "Please complete the security verification",
-    "refreshAriaLabel": "Refresh captcha",
-    "confirmAriaLabel": "Confirm selection",
-    "confirm": "Confirm",
-    "pointAriaLabel": "Click point",
-    "clickInOrder": "Please click in order"
+  "ui": {
+    "captcha": {
+      "title": "Please complete the security verification",
+      "sliderSuccessText": "Passed",
+      "sliderDefaultText": "Slider and drag",
+      "alt": "Supports img tag src attribute value",
+      "sliderRotateDefaultTip": "Click picture to refresh",
+      "sliderRotateFailTip": "Validation failed",
+      "sliderRotateSuccessTip": "Validation successful, time {0} seconds",
+      "refreshAriaLabel": "Refresh captcha",
+      "confirmAriaLabel": "Confirm selection",
+      "confirm": "Confirm",
+      "pointAriaLabel": "Click point",
+      "clickInOrder": "Please click in order"
+    }
   }
 }
diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json
index 816170cdf82..8d4ac6a06fa 100644
--- a/packages/locales/src/langs/zh-CN.json
+++ b/packages/locales/src/langs/zh-CN.json
@@ -313,13 +313,20 @@
       "lockScreen": "启用锁屏"
     }
   },
-  "captcha": {
-    "alt": "支持img标签src属性值",
-    "title": "请完成安全验证",
-    "refreshAriaLabel": "刷新验证码",
-    "confirmAriaLabel": "确认选择",
-    "confirm": "确认",
-    "pointAriaLabel": "点击点",
-    "clickInOrder": "请依次点击"
+  "ui": {
+    "captcha": {
+      "title": "请完成安全验证",
+      "sliderSuccessText": "验证通过",
+      "sliderDefaultText": "请按住滑块拖动",
+      "sliderRotateDefaultTip": "点击图片可刷新",
+      "sliderRotateFailTip": "验证失败",
+      "sliderRotateSuccessTip": "验证成功，耗时{0}秒",
+      "alt": "支持img标签src属性值",
+      "refreshAriaLabel": "刷新验证码",
+      "confirmAriaLabel": "确认选择",
+      "confirm": "确认",
+      "pointAriaLabel": "点击点",
+      "clickInOrder": "请依次点击"
+    }
   }
 }
diff --git a/playground/src/locales/langs/en-US.json b/playground/src/locales/langs/en-US.json
index a128204dc4b..9e926ca89b7 100644
--- a/playground/src/locales/langs/en-US.json
+++ b/playground/src/locales/langs/en-US.json
@@ -83,6 +83,9 @@
       },
       "captcha": {
         "title": "Captcha",
+        "pointSelection": "Point Selection Captcha",
+        "sliderCaptcha": "Slider Captcha",
+        "sliderRotateCaptcha": "Rotate Captcha",
         "captchaCardTitle": "Please complete the security verification",
         "pageDescription": "Verify user identity by clicking on specific locations in the image.",
         "pageTitle": "Captcha Component Example",
@@ -103,15 +106,6 @@
         "timestamp": "Timestamp:",
         "x": "x:",
         "y": "y:"
-      },
-      "verify": {
-        "title": "Verify",
-        "drag-verify": {
-          "title": "Drag Verify"
-        },
-        "rotate-verify": {
-          "title": "Rotate Verify"
-        }
       }
     }
   }
diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json
index 3edd99bd3d5..08a2c38f4a3 100644
--- a/playground/src/locales/langs/zh-CN.json
+++ b/playground/src/locales/langs/zh-CN.json
@@ -83,6 +83,9 @@
       },
       "captcha": {
         "title": "验证码",
+        "pointSelection": "点选验证",
+        "sliderCaptcha": "滑块验证",
+        "sliderRotateCaptcha": "旋转验证",
         "captchaCardTitle": "请完成安全验证",
         "pageDescription": "通过点击图片中的特定位置来验证用户身份。",
         "pageTitle": "验证码组件示例",
@@ -103,15 +106,6 @@
         "timestamp": "时间戳：",
         "x": "x：",
         "y": "y："
-      },
-      "verify": {
-        "title": "验证组件",
-        "drag-verify": {
-          "title": "拖动验证"
-        },
-        "rotate-verify": {
-          "title": "旋转校验"
-        }
       }
     }
   }
diff --git a/playground/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts
index 5286d75ae6f..954c1154c34 100644
--- a/playground/src/router/routes/modules/examples.ts
+++ b/playground/src/router/routes/modules/examples.ts
@@ -42,15 +42,7 @@ const routes: RouteRecordRaw[] = [
           title: $t('page.examples.ellipsis.title'),
         },
       },
-      {
-        name: 'CaptchaExample',
-        path: '/examples/captcha',
-        component: () => import('#/views/examples/captcha/index.vue'),
-        meta: {
-          icon: 'logos:recaptcha',
-          title: $t('page.examples.captcha.title'),
-        },
-      },
+
       {
         name: 'FormExample',
         path: '/examples/form',
@@ -110,29 +102,38 @@ const routes: RouteRecordRaw[] = [
         ],
       },
       {
-        name: 'VerifyExample',
-        path: '/examples/verify',
+        name: 'CaptchaExample',
+        path: '/examples/captcha',
         meta: {
-          icon: 'arcticons:okta-verify',
-          title: $t('page.examples.verify.title'),
+          icon: 'logos:recaptcha',
+          title: $t('page.examples.captcha.title'),
         },
         children: [
           {
             name: 'DragVerifyExample',
-            path: '/examples/verify/drag-verify',
+            path: '/examples/captcha/slider',
             component: () =>
-              import('#/views/examples/verify/drag-verify/index.vue'),
+              import('#/views/examples/captcha/slider-captcha.vue'),
             meta: {
-              title: $t('page.examples.verify.drag-verify.title'),
+              title: $t('page.examples.captcha.sliderCaptcha'),
             },
           },
           {
             name: 'RotateVerifyExample',
-            path: '/examples/verify/rotate-verify',
+            path: '/examples/captcha/slider-rotate',
+            component: () =>
+              import('#/views/examples/captcha/slider-rotate-captcha.vue'),
+            meta: {
+              title: $t('page.examples.captcha.sliderRotateCaptcha'),
+            },
+          },
+          {
+            name: 'CaptchaPointSelectionExample',
+            path: '/examples/captcha/point-selection',
             component: () =>
-              import('#/views/examples/verify/rotate-verify/index.vue'),
+              import('#/views/examples/captcha/point-selection-captcha.vue'),
             meta: {
-              title: $t('page.examples.verify.rotate-verify.title'),
+              title: $t('page.examples.captcha.pointSelection'),
             },
           },
         ],
diff --git a/playground/src/views/examples/captcha/index.vue b/playground/src/views/examples/captcha/point-selection-captcha.vue
similarity index 98%
rename from playground/src/views/examples/captcha/index.vue
rename to playground/src/views/examples/captcha/point-selection-captcha.vue
index 483154698e0..4a247c4b2b6 100644
--- a/playground/src/views/examples/captcha/index.vue
+++ b/playground/src/views/examples/captcha/point-selection-captcha.vue
@@ -9,7 +9,7 @@ import { Card, Input, InputNumber, message, Switch } from 'ant-design-vue';
 
 import { $t } from '#/locales';
 
-const DEFAULT_CAPATCHA_IMAGE =
+const DEFAULT_CAPTCHA_IMAGE =
   'https://unpkg.com/@vbenjs/static-source@0.1.7/source/default-captcha-image.jpeg';
 
 const DEFAULT_HINT_IMAGE =
@@ -18,7 +18,7 @@ const DEFAULT_HINT_IMAGE =
 const selectedPoints = ref<CaptchaPoint[]>([]);
 const params = reactive({
   captchaImage: '',
-  captchaImageUrl: DEFAULT_CAPATCHA_IMAGE,
+  captchaImageUrl: DEFAULT_CAPTCHA_IMAGE,
   height: undefined,
   hintImage: '',
   hintImageUrl: DEFAULT_HINT_IMAGE,
diff --git a/playground/src/views/examples/captcha/slider-captcha.vue b/playground/src/views/examples/captcha/slider-captcha.vue
new file mode 100644
index 00000000000..e6b4c99fd54
--- /dev/null
+++ b/playground/src/views/examples/captcha/slider-captcha.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaActionType,
+} from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import { Page, SliderCaptcha } from '@vben/common-ui';
+import { Bell, Sun } from '@vben/icons';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+function handleSuccess(data: CaptchaVerifyPassingData) {
+  const { time } = data;
+  message.success(`校验成功,耗时${time}秒`);
+}
+function handleBtnClick(elRef?: SliderCaptchaActionType) {
+  if (!elRef) {
+    return;
+  }
+  elRef.resume();
+}
+
+const el1 = ref<SliderCaptchaActionType>();
+const el2 = ref<SliderCaptchaActionType>();
+const el3 = ref<SliderCaptchaActionType>();
+const el4 = ref<SliderCaptchaActionType>();
+const el5 = ref<SliderCaptchaActionType>();
+</script>
+
+<template>
+  <Page description="用于前端简单的拖动校验场景" title="滑块校验">
+    <Card class="mb-5" title="基础示例">
+      <div class="flex items-center justify-center p-4 px-[30%]">
+        <SliderCaptcha ref="el1" @success="handleSuccess" />
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el1)">
+          还原
+        </Button>
+      </div>
+    </Card>
+    <Card class="mb-5" title="自定义圆角">
+      <div class="flex items-center justify-center p-4 px-[30%]">
+        <SliderCaptcha
+          ref="el2"
+          class="rounded-full"
+          @success="handleSuccess"
+        />
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el2)">
+          还原
+        </Button>
+      </div>
+    </Card>
+    <Card class="mb-5" title="自定义背景色">
+      <div class="flex items-center justify-center p-4 px-[30%]">
+        <SliderCaptcha
+          ref="el3"
+          :bar-style="{
+            backgroundColor: '#018ffb',
+          }"
+          success-text="校验成功"
+          text="拖动以进行校验"
+          @success="handleSuccess"
+        />
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el3)">
+          还原
+        </Button>
+      </div>
+    </Card>
+    <Card class="mb-5" title="自定义拖拽图标">
+      <div class="flex items-center justify-center p-4 px-[30%]">
+        <SliderCaptcha ref="el4" @success="handleSuccess">
+          <template #actionIcon="{ isPassing }">
+            <Bell v-if="isPassing" />
+            <Sun v-else />
+          </template>
+        </SliderCaptcha>
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el4)">
+          还原
+        </Button>
+      </div>
+    </Card>
+    <Card class="mb-5" title="自定义文本">
+      <div class="flex items-center justify-center p-4 px-[30%]">
+        <SliderCaptcha
+          ref="el5"
+          success-text="成功"
+          text="拖动"
+          @success="handleSuccess"
+        />
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
+          还原
+        </Button>
+      </div>
+    </Card>
+    <Card class="mb-5" title="自定义内容(slot)">
+      <div class="flex items-center justify-center p-4 px-[30%]">
+        <SliderCaptcha ref="el5" @success="handleSuccess">
+          <template #text="{ isPassing }">
+            <template v-if="isPassing">
+              <Bell class="mr-2 size-4" />
+              成功
+            </template>
+            <template v-else>
+              拖动
+              <Sun class="ml-2 size-4" />
+            </template>
+          </template>
+        </SliderCaptcha>
+        <Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
+          还原
+        </Button>
+      </div>
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/verify/rotate-verify/index.vue b/playground/src/views/examples/captcha/slider-rotate-captcha.vue
similarity index 50%
rename from playground/src/views/examples/verify/rotate-verify/index.vue
rename to playground/src/views/examples/captcha/slider-rotate-captcha.vue
index 12a7f9d4067..23775774192 100644
--- a/playground/src/views/examples/verify/rotate-verify/index.vue
+++ b/playground/src/views/examples/captcha/slider-rotate-captcha.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Page, RotateVerify } from '@vben/common-ui';
-import { Bell, Sun } from '@vben/icons';
+import { Page, SliderRotateCaptcha } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
 
@@ -19,18 +18,11 @@ const avatar = computed(() => {
 </script>
 
 <template>
-  <Page title="旋转校验示例">
-    <Card class="flex items-center justify-center p-4">
-      <RotateVerify
-        :src="avatar"
-        text="拖动以进行校验"
-        @success="handleSuccess"
-      >
-        <template #actionIcon="{ isPassing }">
-          <Bell v-if="isPassing" />
-          <Sun v-else />
-        </template>
-      </RotateVerify>
+  <Page description="用于前端简单的拖动校验场景" title="滑块旋转校验">
+    <Card class="mb-5" title="基本示例">
+      <div class="flex items-center justify-center p-4">
+        <SliderRotateCaptcha :src="avatar" @success="handleSuccess" />
+      </div>
     </Card>
   </Page>
 </template>
diff --git a/playground/src/views/examples/verify/drag-verify/index.vue b/playground/src/views/examples/verify/drag-verify/index.vue
deleted file mode 100644
index 218005972c6..00000000000
--- a/playground/src/views/examples/verify/drag-verify/index.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import {
-  DragVerify,
-  type DragVerifyActionType,
-  Page,
-  type VerifyPassingData,
-} from '@vben/common-ui';
-import { Bell, Sun } from '@vben/icons';
-
-import { Button, Card, message } from 'ant-design-vue';
-
-function handleSuccess(data: VerifyPassingData) {
-  const { time } = data;
-  message.success(`校验成功,耗时${time}秒`);
-}
-function handleBtnClick(elRef?: DragVerifyActionType) {
-  if (!elRef) {
-    return;
-  }
-  elRef.resume();
-}
-
-const el1 = ref<DragVerifyActionType>();
-const el2 = ref<DragVerifyActionType>();
-const el3 = ref<DragVerifyActionType>();
-const el4 = ref<DragVerifyActionType>();
-const el5 = ref<DragVerifyActionType>();
-</script>
-
-<template>
-  <Page title="拖动校验示例">
-    <Card>
-      <div class="flex items-center justify-center p-4">
-        <DragVerify ref="el1" @success="handleSuccess" />
-        <Button class="ml-2" type="primary" @click="handleBtnClick(el1)">
-          还原
-        </Button>
-      </div>
-      <div class="flex items-center justify-center p-4">
-        <DragVerify ref="el2" circle @success="handleSuccess" />
-        <Button class="ml-2" type="primary" @click="handleBtnClick(el2)">
-          还原
-        </Button>
-      </div>
-      <div class="flex items-center justify-center p-4">
-        <DragVerify
-          ref="el3"
-          :bar-style="{
-            backgroundColor: '#018ffb',
-          }"
-          success-text="校验成功"
-          text="拖动以进行校验"
-          @success="handleSuccess"
-        />
-        <Button class="ml-2" type="primary" @click="handleBtnClick(el3)">
-          还原
-        </Button>
-      </div>
-      <div class="flex items-center justify-center p-4">
-        <DragVerify ref="el4" @success="handleSuccess">
-          <template #actionIcon="{ isPassing }">
-            <Bell v-if="isPassing" />
-            <Sun v-else />
-          </template>
-        </DragVerify>
-        <Button class="ml-2" type="primary" @click="handleBtnClick(el4)">
-          还原
-        </Button>
-      </div>
-      <div class="flex items-center justify-center p-4">
-        <DragVerify ref="el5" @success="handleSuccess">
-          <template #text="{ isPassing }">
-            <template v-if="isPassing">
-              <Bell />
-              成功
-            </template>
-            <template v-else>
-              拖动
-              <Sun />
-            </template>
-          </template>
-        </DragVerify>
-        <Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
-          还原
-        </Button>
-      </div>
-    </Card>
-  </Page>
-</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d42d949646..8fd7f75e381 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1448,6 +1448,9 @@ importers:
       '@vben-core/shadcn-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../@core/base/shared
       '@vben/constants':
         specifier: workspace:*
         version: link:../../constants