From 025d5aeeafe838ae102cc95e1b7e10f93110f1fc Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Fri, 13 Sep 2024 16:11:52 +0800
Subject: [PATCH] =?UTF-8?q?chore(@vben/common-ui):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=A0=A1=E9=AA=8C=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/effects/common-ui/package.json       |   1 +
 .../effects/common-ui/src/components/index.ts |   1 +
 .../components/verify/drag-verify/action.vue  |   9 +
 .../src/components/verify/drag-verify/bar.vue |   9 +
 .../components/verify/drag-verify/content.vue |  14 +
 .../components/verify/drag-verify/index.vue   | 314 ++++++++++++++++++
 .../common-ui/src/components/verify/index.ts  |   2 +
 .../common-ui/src/components/verify/typing.ts |  14 +
 .../components/verify/use-event-listener.ts   |  61 ++++
 .../src/router/routes/modules/examples.ts     |  19 ++
 .../examples/verify/drag-verify/index.vue     |  36 ++
 pnpm-lock.yaml                                |   3 +
 12 files changed, 483 insertions(+)
 create mode 100644 packages/effects/common-ui/src/components/verify/drag-verify/action.vue
 create mode 100644 packages/effects/common-ui/src/components/verify/drag-verify/bar.vue
 create mode 100644 packages/effects/common-ui/src/components/verify/drag-verify/content.vue
 create mode 100644 packages/effects/common-ui/src/components/verify/drag-verify/index.vue
 create mode 100644 packages/effects/common-ui/src/components/verify/index.ts
 create mode 100644 packages/effects/common-ui/src/components/verify/typing.ts
 create mode 100644 packages/effects/common-ui/src/components/verify/use-event-listener.ts
 create mode 100644 playground/src/views/examples/verify/drag-verify/index.vue

diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 9bc0a8a03de..10d3d1049fb 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -27,6 +27,7 @@
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",
     "@vben/types": "workspace:*",
+    "@vueuse/core": "^11.0.3",
     "@vueuse/integrations": "^11.0.3",
     "qrcode": "^1.5.4",
     "vue": "^3.5.4",
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index 865adf409db..cefe1ce3fc6 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,6 +1,7 @@
 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
new file mode 100644
index 00000000000..7e861709390
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/drag-verify/action.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const cls = [`darg-verify-action`];
+</script>
+
+<template>
+  <div :class="cls">cc</div>
+</template>
+
+<style scoped></style>
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
new file mode 100644
index 00000000000..e1617fbe5fa
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/drag-verify/bar.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const cls = [`darg-verify-bar`];
+</script>
+
+<template>
+  <div :class="cls"></div>
+</template>
+
+<style scoped></style>
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
new file mode 100644
index 00000000000..fba8e411da2
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/drag-verify/content.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  successText: string;
+  text: string;
+}>();
+
+const cls = [`darg-verify-content`];
+</script>
+
+<template>
+  <div :class="cls">123</div>
+</template>
+
+<style scoped></style>
diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue b/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
new file mode 100644
index 00000000000..ec073a8bb0d
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import {
+  computed,
+  type PropType,
+  reactive,
+  ref,
+  type Ref,
+  unref,
+  watch,
+  watchEffect,
+} from 'vue';
+
+import { useTimeoutFn } from '@vueuse/core';
+
+import { useEventListener } from '../use-event-listener';
+import ActionCmp from './action.vue';
+import BarCmp from './bar.vue';
+import ContentCmp from './content.vue';
+
+const props = defineProps({
+  actionStyle: {
+    default: () => ({}),
+    type: Object as PropType<any>,
+  },
+
+  barStyle: {
+    default: () => ({}),
+    type: Object as PropType<any>,
+  },
+
+  circle: {
+    default: false,
+    type: Boolean as PropType<boolean>,
+  },
+  contentStyle: {
+    default: () => ({}),
+    type: Object as PropType<any>,
+  },
+  height: {
+    default: 40,
+    type: [Number, String] as PropType<number | string>,
+  },
+
+  isSlot: {
+    default: false,
+    type: Boolean as PropType<boolean>,
+  },
+
+  successText: {
+    default: '验证通过',
+    type: [String] as PropType<string>,
+  },
+
+  text: {
+    default: '请按住滑块拖动',
+    type: [String] as PropType<string>,
+  },
+  value: {
+    default: false,
+    type: Boolean as PropType<boolean>,
+  },
+  width: {
+    default: 220,
+    type: [Number, String] as PropType<number | string>,
+  },
+  wrapStyle: {
+    default: () => ({}),
+    type: Object as PropType<any>,
+  },
+});
+
+const emit = defineEmits([
+  'success',
+  'update:value',
+  'change',
+  'start',
+  'move',
+  'end',
+]);
+
+const state = reactive({
+  endTime: 0,
+  isMoving: false,
+  isPassing: false,
+  moveDistance: 0,
+  startTime: 0,
+  toLeft: false,
+});
+
+defineExpose({
+  resume,
+});
+
+const wrapElRef = ref<HTMLDivElement>();
+const barElRef = ref<HTMLDivElement | null>(null);
+const contentElRef = ref<HTMLDivElement | null>(null);
+const actionElRef = ref(null) as Ref<HTMLDivElement | null>;
+
+useEventListener({
+  el: document,
+  listener: () => {
+    if (state.isMoving) {
+      resume();
+    }
+  },
+  name: 'mouseup',
+});
+
+const getActionStyleRef = computed(() => {
+  const { actionStyle, height } = props;
+  const h = `${Number.parseInt(height as string)}px`;
+  return {
+    height: h,
+    left: 0,
+    width: h,
+    ...actionStyle,
+  };
+});
+
+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 {
+    borderRadius: circle ? `${h / 2}px` : 0,
+    height: `${h}px`,
+    lineHeight: `${h}px`,
+    width: w,
+    ...wrapStyle,
+  };
+});
+
+const getBarStyleRef = computed(() => {
+  const { barStyle, circle, height } = props;
+  const h = Number.parseInt(height as string);
+  return {
+    borderRadius: circle ? `${h / 2}px 0 0 ${h / 2}px` : 0,
+    height: `${h}px`,
+    ...barStyle,
+  };
+});
+
+const getContentStyleRef = 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,
+  };
+});
+
+watch(
+  () => state.isPassing,
+  (isPassing) => {
+    if (isPassing) {
+      const { endTime, startTime } = state;
+      const time = (endTime - startTime) / 1000;
+      emit('success', { isPassing, time: time.toFixed(1) });
+      emit('update:value', isPassing);
+      emit('change', isPassing);
+    }
+  },
+);
+
+watchEffect(() => {
+  state.isPassing = !!props.value;
+});
+
+function getEventPageX(e: MouseEvent | TouchEvent): number {
+  if (e instanceof MouseEvent) {
+    return e.pageX;
+  } else if (e instanceof TouchEvent && e.touches[0]) {
+    return e.touches[0].pageX;
+  }
+  return 0;
+}
+
+function handleDragStart(e: MouseEvent | TouchEvent) {
+  if (state.isPassing) {
+    return;
+  }
+  const actionEl = unref(actionElRef);
+  if (!actionEl) return;
+  emit('start', e);
+  state.moveDistance =
+    getEventPageX(e) -
+    Number.parseInt(actionEl.style.left.replace('px', ''), 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 handleDragMoving(e: MouseEvent | TouchEvent) {
+  const { isMoving, moveDistance } = state;
+  if (isMoving) {
+    const actionEl = unref(actionElRef);
+    const barEl = unref(barElRef);
+    if (!actionEl || !barEl) return;
+    const { actionWidth, offset, widthNum } = getOffset(actionEl);
+    const moveX = getEventPageX(e) - moveDistance;
+
+    emit('move', {
+      event: e,
+      moveDistance,
+      moveX,
+    });
+    if (moveX > 0 && moveX <= offset) {
+      actionEl.style.left = `${moveX}px`;
+      barEl.style.width = `${moveX + actionWidth / 2}px`;
+    } else if (moveX > offset) {
+      actionEl.style.left = `${widthNum - actionWidth}px`;
+      barEl.style.width = `${widthNum - actionWidth / 2}px`;
+      if (!props.isSlot) {
+        checkPass();
+      }
+    }
+  }
+}
+
+function handleDragOver(e: MouseEvent | TouchEvent) {
+  const { isMoving, isPassing, moveDistance } = state;
+  if (isMoving && !isPassing) {
+    emit('end', e);
+    const actionEl = unref(actionElRef);
+    const barEl = unref(barElRef);
+    if (!actionEl || !barEl) return;
+    const moveX = getEventPageX(e) - moveDistance;
+    const { actionWidth, offset, widthNum } = getOffset(actionEl);
+    if (moveX < offset) {
+      if (props.isSlot) {
+        setTimeout(() => {
+          if (props.value) {
+            const contentEl = unref(contentElRef);
+            if (contentEl) {
+              contentEl.style.width = `${Number.parseInt(barEl.style.width)}px`;
+            }
+          } else {
+            resume();
+          }
+        }, 0);
+      } else {
+        resume();
+      }
+    } else {
+      actionEl.style.left = `${widthNum - actionWidth}px`;
+      barEl.style.width = `${widthNum - actionWidth / 2}px`;
+      checkPass();
+    }
+    state.isMoving = false;
+  }
+}
+
+function checkPass() {
+  if (props.isSlot) {
+    resume();
+    return;
+  }
+  state.endTime = Date.now();
+  state.isPassing = true;
+  state.isMoving = false;
+}
+
+function resume() {
+  state.isMoving = false;
+  state.isPassing = false;
+  state.moveDistance = 0;
+  state.toLeft = false;
+  state.startTime = 0;
+  state.endTime = 0;
+  const actionEl = unref(actionElRef);
+  const barEl = unref(barElRef);
+  const contentEl = unref(contentElRef);
+  if (!actionEl || !barEl || !contentEl) return;
+  state.toLeft = true;
+  useTimeoutFn(() => {
+    state.toLeft = false;
+    actionEl.style.left = '0';
+    barEl.style.width = '0';
+    //  The time is consistent with the animation time
+  }, 300);
+  contentEl.style.width = unref(getContentStyleRef).width;
+}
+</script>
+
+<template>
+  <div
+    ref="wrapElRef"
+    :style="getWrapStyleRef"
+    class="darg-verify"
+    @onMouseleave="handleDragOver"
+    @onMousemove="handleDragMoving"
+    @onMouseup="handleDragOver"
+    @onTouchend="handleDragOver"
+    @onTouchmove="handleDragMoving"
+  >
+    <BarCmp :style="getBarStyleRef" />
+    <ContentCmp :success-text="successText" :text="text" />
+    <ActionCmp
+      :style="getActionStyleRef"
+      @on-mousedown="handleDragStart"
+      @on-touchstart="handleDragStart"
+    />
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/components/verify/index.ts b/packages/effects/common-ui/src/components/verify/index.ts
new file mode 100644
index 00000000000..991ba7a6be1
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/index.ts
@@ -0,0 +1,2 @@
+export { default as DragVerify } from './drag-verify/index.vue';
+export * from './typing';
diff --git a/packages/effects/common-ui/src/components/verify/typing.ts b/packages/effects/common-ui/src/components/verify/typing.ts
new file mode 100644
index 00000000000..42256968bef
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/typing.ts
@@ -0,0 +1,14 @@
+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/effects/common-ui/src/components/verify/use-event-listener.ts b/packages/effects/common-ui/src/components/verify/use-event-listener.ts
new file mode 100644
index 00000000000..180023527d0
--- /dev/null
+++ b/packages/effects/common-ui/src/components/verify/use-event-listener.ts
@@ -0,0 +1,61 @@
+import type { Ref } from 'vue';
+import { ref, unref, watch } from 'vue';
+
+import { useDebounceFn, useThrottleFn } from '@vueuse/core';
+
+export type RemoveEventFn = () => void;
+export interface UseEventParams {
+  el?: any | Element | Ref<Element | undefined> | Window;
+  name: string;
+  listener: EventListener;
+  options?: AddEventListenerOptions | boolean;
+  autoRemove?: boolean;
+  isDebounce?: boolean;
+  wait?: number;
+}
+export function useEventListener({
+  autoRemove = true,
+  el = window,
+  isDebounce = true,
+  listener,
+  name,
+  options,
+  wait = 80,
+}: UseEventParams): { removeEvent: RemoveEventFn } {
+  let remove: RemoveEventFn = () => {};
+  const isAddRef = ref(false);
+
+  if (el) {
+    const element = ref(el as Element) as Ref<Element>;
+
+    const handler = isDebounce
+      ? useDebounceFn(listener, wait)
+      : useThrottleFn(listener, wait);
+    const realHandler = wait ? handler : listener;
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true;
+      e.removeEventListener(name, realHandler, options);
+    };
+    const addEventListener = (e: Element) =>
+      e.addEventListener(name, realHandler, options);
+
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v);
+          cleanUp(() => {
+            autoRemove && removeEventListener(v);
+          });
+        }
+      },
+      { immediate: true },
+    );
+
+    remove = () => {
+      removeEventListener(element.value);
+      removeWatch();
+    };
+  }
+  return { removeEvent: remove };
+}
diff --git a/playground/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts
index c946e79c2bc..1e53131cc40 100644
--- a/playground/src/router/routes/modules/examples.ts
+++ b/playground/src/router/routes/modules/examples.ts
@@ -101,6 +101,25 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        name: 'VerifyExample',
+        path: '/examples/verify',
+        meta: {
+          icon: 'logos:recaptcha',
+          title: '验证组件',
+        },
+        children: [
+          {
+            name: 'DragVerifyExample',
+            path: '/examples/verify/drag-verify',
+            component: () =>
+              import('#/views/examples/verify/drag-verify/index.vue'),
+            meta: {
+              title: '拖拽校验',
+            },
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/playground/src/views/examples/verify/drag-verify/index.vue b/playground/src/views/examples/verify/drag-verify/index.vue
new file mode 100644
index 00000000000..823b839e6d7
--- /dev/null
+++ b/playground/src/views/examples/verify/drag-verify/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import {
+  DragVerify,
+  type DragVerifyActionType,
+  Page,
+  type VerifyPassingData,
+} from '@vben/common-ui';
+
+import { Button, 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>();
+</script>
+
+<template>
+  <Page title="拖动校验示例">
+    <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>
+  </Page>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ac4c17b74c..3da5bae4e90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -983,6 +983,9 @@ importers:
       '@vben/types':
         specifier: workspace:*
         version: link:../../types
+      '@vueuse/core':
+        specifier: ^11.0.3
+        version: 11.0.3(vue@3.5.4(typescript@5.6.2))
       '@vueuse/integrations':
         specifier: ^11.0.3
         version: 11.0.3(async-validator@4.2.5)(axios@1.7.7)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.3)(vue@3.5.4(typescript@5.6.2))