@melt-js/comps-vben 0.0.0-stage → 2026.11.8-1

package/src/common-ui/components/captcha/point-selection-captcha/index.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { CaptchaPoint, PointSelectionCaptchaProps } from '../types';
+
+import { RotateCw } from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { VbenButton, VbenIconButton } from '@melt-js/comps-vben/shadcn-ui';
+
+import { useCaptchaPoints } from '../hooks/useCaptchaPoints';
+import CaptchaCard from './point-selection-captcha-card.vue';
+
+const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
+  height: '220px',
+  hintImage: '',
+  hintText: '',
+  paddingX: '12px',
+  paddingY: '16px',
+  showConfirm: false,
+  title: '',
+  width: '300px',
+});
+const emit = defineEmits<{
+  click: [CaptchaPoint];
+  confirm: [Array<CaptchaPoint>, clear: () => void];
+  refresh: [];
+}>();
+const { addPoint, clearPoints, points } = useCaptchaPoints();
+
+if (!props.hintImage && !props.hintText) {
+  console.warn('At least one of hint image or hint text must be provided');
+}
+
+const POINT_OFFSET = 11;
+
+function getElementPosition(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY,
+  };
+}
+
+function handleClick(e: MouseEvent) {
+  try {
+    const dom = e.currentTarget as HTMLElement;
+    if (!dom) throw new Error('Element not found');
+
+    const { x: domX, y: domY } = getElementPosition(dom);
+
+    const mouseX = e.clientX + window.scrollX;
+    const mouseY = e.clientY + window.scrollY;
+
+    if (typeof mouseX !== 'number' || typeof mouseY !== 'number') {
+      throw new TypeError('Mouse coordinates not found');
+    }
+
+    const xPos = mouseX - domX;
+    const yPos = mouseY - domY;
+
+    const rect = dom.getBoundingClientRect();
+
+    // 点击位置边界校验
+    if (xPos < 0 || yPos < 0 || xPos > rect.width || yPos > rect.height) {
+      console.warn('Click position is out of the valid range');
+      return;
+    }
+
+    const x = Math.ceil(xPos);
+    const y = Math.ceil(yPos);
+
+    const point = {
+      i: points.length,
+      t: Date.now(),
+      x,
+      y,
+    };
+
+    addPoint(point);
+
+    emit('click', point);
+    e.stopPropagation();
+    e.preventDefault();
+  } catch (error) {
+    console.error('Error in handleClick:', error);
+  }
+}
+
+function clear() {
+  try {
+    clearPoints();
+  } catch (error) {
+    console.error('Error in clear:', error);
+  }
+}
+
+function handleRefresh() {
+  try {
+    clear();
+    emit('refresh');
+  } catch (error) {
+    console.error('Error in handleRefresh:', error);
+  }
+}
+
+function handleConfirm() {
+  if (!props.showConfirm) return;
+  try {
+    emit('confirm', points, clear);
+  } catch (error) {
+    console.error('Error in handleConfirm:', error);
+  }
+}
+</script>
+<template>
+  <CaptchaCard
+    :captcha-image="captchaImage"
+    :height="height"
+    :padding-x="paddingX"
+    :padding-y="paddingY"
+    :title="title"
+    :width="width"
+    @click="handleClick"
+  >
+    <template #title>
+      <slot name="title">{{ $t('ui.captcha.title') }}</slot>
+    </template>
+
+    <template #extra>
+      <VbenIconButton
+        :aria-label="$t('ui.captcha.refreshAriaLabel')"
+        class="ml-1"
+        @click="handleRefresh"
+      >
+        <RotateCw class="size-5" />
+      </VbenIconButton>
+      <VbenButton
+        v-if="showConfirm"
+        :aria-label="$t('ui.captcha.confirmAriaLabel')"
+        class="ml-2"
+        size="sm"
+        @click="handleConfirm"
+      >
+        {{ $t('ui.captcha.confirm') }}
+      </VbenButton>
+    </template>
+
+    <div
+      v-for="(point, index) in points"
+      :key="index"
+      :aria-label="$t('ui.captcha.pointAriaLabel') + (index + 1)"
+      :style="{
+        top: `${point.y - POINT_OFFSET}px`,
+        left: `${point.x - POINT_OFFSET}px`,
+      }"
+      class="absolute z-20 flex-center size-5 cursor-default rounded-full border-2 border-primary-50 bg-primary text-primary-50"
+      role="button"
+      tabindex="0"
+    >
+      {{ index + 1 }}
+    </div>
+    <template #footer>
+      <img
+        v-if="hintImage"
+        :alt="$t('ui.captcha.alt')"
+        :src="hintImage"
+        class="h-10 w-full rounded-sm border border-border"
+      />
+      <div
+        v-else-if="hintText"
+        class="flex-center h-10 w-full rounded-sm border border-border"
+      >
+        {{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
+      </div>
+    </template>
+  </CaptchaCard>
+</template>

package/src/common-ui/components/captcha/point-selection-captcha/point-selection-captcha-card.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { PointSelectionCaptchaCardProps } from '../types';
+
+import { computed } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+const props = withDefaults(defineProps<PointSelectionCaptchaCardProps>(), {
+  height: '220px',
+  paddingX: '12px',
+  paddingY: '16px',
+  title: '',
+  width: '300px',
+});
+
+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`,
+}));
+
+const captchaStyles = computed(() => {
+  return {
+    height: `${parseValue(props.height)}px`,
+    width: `${parseValue(props.width)}px`,
+  };
+});
+
+function handleClick(e: MouseEvent) {
+  emit('click', e);
+}
+</script>
+<template>
+  <Card :style="rootStyles" aria-labelledby="captcha-title" role="region">
+    <CardHeader class="p-0">
+      <CardTitle id="captcha-title" class="flex items-center justify-between">
+        <template v-if="$slots.title">
+          <slot name="title">{{ $t('ui.captcha.title') }}</slot>
+        </template>
+        <template v-else>
+          <span>{{ title }}</span>
+        </template>
+        <div class="flex items-center justify-end">
+          <slot name="extra"></slot>
+        </div>
+      </CardTitle>
+    </CardHeader>
+    <CardContent
+      class="relative mt-2 flex w-full overflow-hidden rounded-sm p-0"
+    >
+      <img
+        v-show="captchaImage"
+        :alt="$t('ui.captcha.alt')"
+        :src="captchaImage"
+        :style="captchaStyles"
+        class="relative z-10"
+        @click="handleClick"
+      />
+      <div class="absolute inset-0">
+        <slot></slot>
+      </div>
+    </CardContent>
+    <CardFooter class="mt-2 flex justify-between p-0">
+      <slot name="footer"></slot>
+    </CardFooter>
+  </Card>
+</template>

package/src/common-ui/components/captcha/slider-captcha/index.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaProps,
+  SliderRotateVerifyPassingData,
+} from '../types';
+
+import { reactive, unref, useTemplateRef, watch, watchEffect } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { useTimeoutFn } from '@vueuse/core';
+
+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 emit = defineEmits<{
+  end: [MouseEvent | TouchEvent];
+  move: [SliderRotateVerifyPassingData];
+  start: [MouseEvent | TouchEvent];
+  success: [CaptchaVerifyPassingData];
+}>();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const state = reactive({
+  endTime: 0,
+  isMoving: false,
+  isPassing: false,
+  moveDistance: 0,
+  startTime: 0,
+  toLeft: false,
+});
+
+defineExpose({
+  resume,
+});
+
+const wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');
+const barRef = useTemplateRef<InstanceType<typeof SliderCaptchaBar>>('barRef');
+const contentRef =
+  useTemplateRef<InstanceType<typeof SliderCaptchaContent>>('contentRef');
+const actionRef =
+  useTemplateRef<InstanceType<typeof SliderCaptchaAction>>('actionRef');
+
+watch(
+  () => state.isPassing,
+  (isPassing) => {
+    if (isPassing) {
+      const { endTime, startTime } = state;
+      const time = (endTime - startTime) / 1000;
+      emit('success', { isPassing, time: time.toFixed(1) });
+      modelValue.value = isPassing;
+    }
+  },
+);
+
+watchEffect(() => {
+  state.isPassing = !!modelValue.value;
+});
+
+function getEventPageX(e: MouseEvent | TouchEvent): number {
+  if ('pageX' in e) {
+    return e.pageX;
+  } else if ('touches' in e && e.touches[0]) {
+    return e.touches[0].pageX;
+  }
+  return 0;
+}
+
+function handleDragStart(e: MouseEvent | TouchEvent) {
+  if (state.isPassing) {
+    return;
+  }
+  const actionEl = actionRef.value;
+  const actionStyle = actionEl?.getStyle();
+  if (!actionEl || !actionStyle) return;
+  emit('start', e);
+
+  state.moveDistance =
+    getEventPageX(e) -
+    Number.parseInt(actionStyle.left.replace('px', '') || '0', 10);
+  state.startTime = Date.now();
+  state.isMoving = true;
+}
+
+function getOffset(actionEl?: HTMLDivElement | null) {
+  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(actionRef);
+    const barEl = unref(barRef);
+    if (!actionEl || !barEl) return;
+    const actionNode = actionEl.getEl();
+    if (!actionNode) return;
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionNode);
+    const moveX = getEventPageX(e) - moveDistance;
+
+    emit('move', {
+      event: e,
+      moveDistance,
+      moveX,
+    });
+    if (moveX > 0 && moveX <= offset) {
+      actionEl.setLeft(`${moveX}px`);
+      barEl.setWidth(`${moveX + actionWidth / 2}px`);
+    } else if (moveX > offset) {
+      actionEl.setLeft(`${wrapperWidth - actionWidth}px`);
+      barEl.setWidth(`${wrapperWidth - 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 = actionRef.value;
+    const barEl = unref(barRef);
+    if (!actionEl || !barEl) return;
+    const moveX = getEventPageX(e) - moveDistance;
+    const actionNode = actionEl.getEl();
+    if (!actionNode) return;
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionNode);
+    if (moveX < offset) {
+      if (props.isSlot) {
+        setTimeout(() => {
+          if (modelValue.value) {
+            const contentEl = unref(contentRef);
+            const contentNode = contentEl?.getEl();
+            const barNode = barEl.getEl();
+            if (contentNode && barNode) {
+              contentNode.style.width = `${Number.parseInt(barNode.style.width || '0', 10)}px`;
+            }
+          } else {
+            resume();
+          }
+        }, 0);
+      } else {
+        resume();
+      }
+    } else {
+      actionEl.setLeft(`${wrapperWidth - actionWidth}px`);
+      barEl.setWidth(`${wrapperWidth - 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(actionRef);
+  const barEl = unref(barRef);
+  const contentEl = unref(contentRef);
+  if (!actionEl || !barEl || !contentEl) return;
+
+  const contentNode = contentEl.getEl();
+  if (!contentNode) return;
+
+  contentNode.style.width = '100%';
+  state.toLeft = true;
+  useTimeoutFn(() => {
+    state.toLeft = false;
+    actionEl.setLeft('0');
+    barEl.setWidth('0');
+  }, 300);
+}
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    :class="
+      cn(
+        'relative flex h-10 w-full items-center overflow-hidden rounded-md border border-border bg-background-deep text-center',
+        props.class,
+      )
+    "
+    :style="wrapperStyle"
+    @mouseleave="handleDragOver"
+    @mousemove="handleDragMoving"
+    @mouseup="handleDragOver"
+    @touchend="handleDragOver"
+    @touchmove="handleDragMoving"
+  >
+    <SliderCaptchaBar
+      ref="barRef"
+      :bar-style="barStyle"
+      :to-left="state.toLeft"
+    />
+    <SliderCaptchaContent
+      ref="contentRef"
+      :content-style="contentStyle"
+      :is-passing="state.isPassing"
+      :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>
+    </SliderCaptchaContent>
+
+    <SliderCaptchaAction
+      ref="actionRef"
+      :action-style="actionStyle"
+      :is-passing="state.isPassing"
+      :to-left="state.toLeft"
+      @mousedown="handleDragStart"
+      @touchstart="handleDragStart"
+    >
+      <template v-if="$slots.actionIcon" #icon>
+        <slot :is-passing="state.isPassing" name="actionIcon"></slot>
+      </template>
+    </SliderCaptchaAction>
+  </div>
+</template>

package/src/common-ui/components/captcha/slider-captcha/slider-captcha-action.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, useTemplateRef } from 'vue';
+
+import { Check, ChevronsRight } from '@melt-js/libs-vben/icons';
+
+import { Slot } from '@melt-js/comps-vben/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="absolute top-0 left-0 flex-center h-full cursor-move bg-background px-3.5 shadow-md dark:bg-accent"
+    name="captcha-action"
+  >
+    <Slot :is-passing="isPassing" class="size-4 text-foreground/60">
+      <slot name="icon">
+        <ChevronsRight v-if="!isPassing" />
+        <Check v-else />
+      </slot>
+    </Slot>
+  </div>
+</template>

package/src/common-ui/components/captcha/slider-captcha/slider-captcha-bar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, 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="absolute h-full bg-success"
+  ></div>
+</template>

package/src/common-ui/components/captcha/slider-captcha/slider-captcha-content.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, useTemplateRef } from 'vue';
+
+import { VbenSpineText } from '@melt-js/comps-vben/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-center size-full text-xs select-none"
+  >
+    <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>