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

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

@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaActionType,
+  SliderRotateVerifyPassingData,
+  SliderTranslateCaptchaProps,
+} from '../types';
+
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+  unref,
+  useTemplateRef,
+  watch,
+} from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import SliderCaptcha from '../slider-captcha/index.vue';
+
+const props = withDefaults(defineProps<SliderTranslateCaptchaProps>(), {
+  defaultTip: '',
+  canvasWidth: 420,
+  canvasHeight: 280,
+  squareLength: 42,
+  circleRadius: 10,
+  src: '',
+  diffDistance: 3,
+});
+
+const emit = defineEmits<{
+  success: [CaptchaVerifyPassingData];
+}>();
+
+const PI: number = Math.PI;
+const canvasOpr = {
+  clip: 'clip',
+  fill: 'fill',
+} as const;
+
+type CanvasOpr = (typeof canvasOpr)[keyof typeof canvasOpr];
+
+const modalValue = defineModel<boolean>({ default: false });
+
+const slideBarRef = useTemplateRef<SliderCaptchaActionType>('slideBarRef');
+const puzzleCanvasRef = useTemplateRef<HTMLCanvasElement>('puzzleCanvasRef');
+const pieceCanvasRef = useTemplateRef<HTMLCanvasElement>('pieceCanvasRef');
+
+const state = reactive({
+  dragging: false,
+  startTime: 0,
+  endTime: 0,
+  pieceX: 0,
+  pieceY: 0,
+  moveDistance: 0,
+  isPassing: false,
+  showTip: false,
+});
+
+const left = ref('0');
+
+const pieceStyle = computed(() => {
+  return {
+    left: left.value,
+  };
+});
+
+function setLeft(val: string) {
+  left.value = val;
+}
+
+const verifyTip = computed(() => {
+  return state.isPassing
+    ? $t('ui.captcha.sliderTranslateSuccessTip', [
+        ((state.endTime - state.startTime) / 1000).toFixed(1),
+      ])
+    : $t('ui.captcha.sliderTranslateFailTip');
+});
+function handleStart() {
+  state.startTime = Date.now();
+}
+
+function handleDragBarMove(data: SliderRotateVerifyPassingData) {
+  state.dragging = true;
+  const { moveX } = data;
+  state.moveDistance = moveX;
+  setLeft(`${moveX}px`);
+}
+
+function handleDragEnd() {
+  const { pieceX } = state;
+  const { diffDistance } = props;
+
+  if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 3)) {
+    setLeft('0');
+    state.moveDistance = 0;
+  } else {
+    checkPass();
+  }
+  state.showTip = true;
+  state.dragging = false;
+}
+
+function checkPass() {
+  state.isPassing = true;
+  state.endTime = Date.now();
+}
+
+watch(
+  () => state.isPassing,
+  (isPassing) => {
+    if (isPassing) {
+      const { endTime, startTime } = state;
+      const time = (endTime - startTime) / 1000;
+      emit('success', { isPassing, time: time.toFixed(1) });
+    }
+    modalValue.value = isPassing;
+  },
+);
+
+function resetCanvas() {
+  const { canvasWidth, canvasHeight } = props;
+  const puzzleCanvas = unref(puzzleCanvasRef);
+  const pieceCanvas = unref(pieceCanvasRef);
+  if (!puzzleCanvas || !pieceCanvas) return;
+  pieceCanvas.width = canvasWidth;
+  const puzzleCanvasCtx = puzzleCanvas.getContext('2d');
+  // Canvas2D: Multiple readback operations using getImageData
+  // are faster with the willReadFrequently attribute set to true.
+  // See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous)
+  const pieceCanvasCtx = pieceCanvas.getContext('2d', {
+    willReadFrequently: true,
+  });
+  if (!puzzleCanvasCtx || !pieceCanvasCtx) return;
+  puzzleCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
+  pieceCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
+}
+
+function initCanvas() {
+  const { canvasWidth, canvasHeight, squareLength, circleRadius, src } = props;
+  const puzzleCanvas = unref(puzzleCanvasRef);
+  const pieceCanvas = unref(pieceCanvasRef);
+  if (!puzzleCanvas || !pieceCanvas) return;
+  const puzzleCanvasCtx = puzzleCanvas.getContext('2d');
+  // Canvas2D: Multiple readback operations using getImageData
+  // are faster with the willReadFrequently attribute set to true.
+  // See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous)
+  const pieceCanvasCtx = pieceCanvas.getContext('2d', {
+    willReadFrequently: true,
+  });
+  if (!puzzleCanvasCtx || !pieceCanvasCtx) return;
+  const img = new Image();
+  // 解决跨域
+  img.crossOrigin = 'Anonymous';
+  img.src = src;
+  img.addEventListener('load', () => {
+    draw(puzzleCanvasCtx, pieceCanvasCtx);
+    puzzleCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+    pieceCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+    const pieceLength = squareLength + 2 * circleRadius + 3;
+    const sx = state.pieceX;
+    const sy = state.pieceY - 2 * circleRadius - 1;
+    const imageData = pieceCanvasCtx.getImageData(
+      sx,
+      sy,
+      pieceLength,
+      pieceLength,
+    );
+    pieceCanvas.width = pieceLength;
+    pieceCanvasCtx.putImageData(imageData, 0, sy);
+    setLeft('0');
+  });
+}
+
+function getRandomNumberByRange(start: number, end: number) {
+  return Math.round(Math.random() * (end - start) + start);
+}
+
+// 绘制拼图
+function draw(ctx1: CanvasRenderingContext2D, ctx2: CanvasRenderingContext2D) {
+  const { canvasWidth, canvasHeight, squareLength, circleRadius } = props;
+  state.pieceX = getRandomNumberByRange(
+    squareLength + 2 * circleRadius,
+    canvasWidth - (squareLength + 2 * circleRadius),
+  );
+  state.pieceY = getRandomNumberByRange(
+    3 * circleRadius,
+    canvasHeight - (squareLength + 2 * circleRadius),
+  );
+  drawPiece(ctx1, state.pieceX, state.pieceY, canvasOpr.fill);
+  drawPiece(ctx2, state.pieceX, state.pieceY, canvasOpr.clip);
+}
+
+// 绘制拼图切块
+function drawPiece(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  opr: CanvasOpr,
+) {
+  const { squareLength, circleRadius } = props;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.arc(
+    x + squareLength / 2,
+    y - circleRadius + 2,
+    circleRadius,
+    0.72 * PI,
+    2.26 * PI,
+  );
+  ctx.lineTo(x + squareLength, y);
+  ctx.arc(
+    x + squareLength + circleRadius - 2,
+    y + squareLength / 2,
+    circleRadius,
+    1.21 * PI,
+    2.78 * PI,
+  );
+  ctx.lineTo(x + squareLength, y + squareLength);
+  ctx.lineTo(x, y + squareLength);
+  ctx.arc(
+    x + circleRadius - 2,
+    y + squareLength / 2,
+    circleRadius + 0.4,
+    2.76 * PI,
+    1.24 * PI,
+    true,
+  );
+  ctx.lineTo(x, y);
+  ctx.lineWidth = 2;
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+  ctx.stroke();
+  opr === canvasOpr.clip ? ctx.clip() : ctx.fill();
+  ctx.globalCompositeOperation = 'destination-over';
+}
+
+function resume() {
+  state.showTip = false;
+  const basicEl = unref(slideBarRef);
+  if (!basicEl) {
+    return;
+  }
+  state.dragging = false;
+  state.isPassing = false;
+  state.pieceX = 0;
+  state.pieceY = 0;
+
+  basicEl.resume();
+  resetCanvas();
+  initCanvas();
+}
+
+onMounted(() => {
+  initCanvas();
+});
+</script>
+
+<template>
+  <div class="relative flex flex-col items-center">
+    <div
+      class="relative flex cursor-pointer overflow-hidden border border-border shadow-md"
+    >
+      <canvas
+        ref="puzzleCanvasRef"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        @click="resume"
+      ></canvas>
+      <canvas
+        ref="pieceCanvasRef"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        :style="pieceStyle"
+        class="absolute"
+        @click="resume"
+      ></canvas>
+      <div
+        class="absolute bottom-3 left-0 z-10 block h-15 w-full text-center text-xs leading-[30px] text-white"
+      >
+        <div
+          v-if="state.showTip"
+          :class="{
+            'bg-success/80': state.isPassing,
+            'bg-destructive/80': !state.isPassing,
+          }"
+        >
+          {{ verifyTip }}
+        </div>
+        <div v-if="!state.dragging" class="bg-black/30">
+          {{ defaultTip || $t('ui.captcha.sliderTranslateDefaultTip') }}
+        </div>
+      </div>
+    </div>
+    <SliderCaptcha
+      ref="slideBarRef"
+      v-model="modalValue"
+      class="mt-5"
+      is-slot
+      @end="handleDragEnd"
+      @move="handleDragBarMove"
+      @start="handleStart"
+    >
+      <template v-for="(_, key) in $slots" :key="key" #[key]="slotProps">
+        <slot :name="key" v-bind="slotProps"></slot>
+      </template>
+    </SliderCaptcha>
+  </div>
+</template>

package/src/common-ui/components/captcha/types.ts

@@ -0,0 +1,210 @@
+import type { CSSProperties } from 'vue';
+
+import type { ClassType } from '@melt-js/libs-vben/types';
+
+export interface CaptchaData {
+  /**
+   * x
+   */
+  x: number;
+  /**
+   * y
+   */
+  y: number;
+  /**
+   * 时间戳
+   */
+  t: number;
+}
+export interface CaptchaPoint extends CaptchaData {
+  /**
+   * 数据索引
+   */
+  i: number;
+}
+export interface PointSelectionCaptchaCardProps {
+  /**
+   * 验证码图片
+   */
+  captchaImage: string;
+  /**
+   * 验证码图片高度
+   * @default '220px'
+   */
+  height?: number | string;
+  /**
+   * 水平内边距
+   * @default '12px'
+   */
+  paddingX?: number | string;
+  /**
+   * 垂直内边距
+   * @default '16px'
+   */
+  paddingY?: number | string;
+  /**
+   * 标题
+   * @default '请按图依次点击'
+   */
+  title?: string;
+  /**
+   * 验证码图片宽度
+   * @default '300px'
+   */
+  width?: number | string;
+}
+
+export interface PointSelectionCaptchaProps extends PointSelectionCaptchaCardProps {
+  /**
+   * 是否展示确定按钮
+   * @default false
+   */
+  showConfirm?: boolean;
+  /**
+   * 提示图片
+   * @default ''
+   */
+  hintImage?: string;
+  /**
+   * 提示文本
+   * @default ''
+   */
+  hintText?: string;
+}
+
+export interface SliderCaptchaProps {
+  class?: ClassType;
+  /**
+   * @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 SliderTranslateCaptchaProps {
+  /**
+   * @description 拼图的宽度
+   * @default 420
+   */
+  canvasWidth?: number;
+  /**
+   * @description 拼图的高度
+   * @default 280
+   */
+  canvasHeight?: number;
+  /**
+   * @description 切块上正方形的长度
+   * @default 42
+   */
+  squareLength?: number;
+  /**
+   * @description 切块上圆形的半径
+   * @default 10
+   */
+  circleRadius?: number;
+  /**
+   * @description 图片的地址
+   */
+  src?: string;
+  /**
+   * @description 允许的最大差距
+   * @default 3
+   */
+  diffDistance?: number;
+  /**
+   * @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;
+}

package/src/common-ui/components/col-page/col-page.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { ColPageProps } from './types';
+
+import { computed, ref, useSlots } from 'vue';
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+import Page from '../page/page.vue';
+
+defineOptions({
+  name: 'ColPage',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ColPageProps>(), {
+  leftWidth: 30,
+  rightWidth: 70,
+  resizable: true,
+});
+
+const delegatedProps = computed(() => {
+  const { leftWidth: _, ...delegated } = props;
+  return delegated;
+});
+
+const slots = useSlots();
+
+const delegatedSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (!['default', 'left'].includes(key)) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots;
+});
+
+const leftPanelRef = ref<InstanceType<typeof ResizablePanel>>();
+
+function expandLeft() {
+  leftPanelRef.value?.expand();
+}
+
+function collapseLeft() {
+  leftPanelRef.value?.collapse();
+}
+
+defineExpose({
+  expandLeft,
+  collapseLeft,
+});
+</script>
+<template>
+  <Page v-bind="delegatedProps">
+    <!-- 继承默认的slot -->
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+
+    <ResizablePanelGroup class="w-full" direction="horizontal">
+      <ResizablePanel
+        ref="leftPanelRef"
+        :collapsed-size="leftCollapsedWidth"
+        :collapsible="leftCollapsible"
+        :default-size="leftWidth"
+        :max-size="leftMaxWidth"
+        :min-size="leftMinWidth"
+      >
+        <template #default="slotProps">
+          <div class="h-full pr-2">
+            <slot
+              name="left"
+              v-bind="{
+                ...slotProps,
+                expand: expandLeft,
+                collapse: collapseLeft,
+              }"
+            ></slot>
+          </div>
+        </template>
+      </ResizablePanel>
+      <ResizableHandle
+        v-if="resizable"
+        :style="{ backgroundColor: splitLine ? undefined : 'transparent' }"
+        :with-handle="splitHandle"
+      />
+      <ResizablePanel
+        :collapsed-size="rightCollapsedWidth"
+        :collapsible="rightCollapsible"
+        :default-size="rightWidth"
+        :max-size="rightMaxWidth"
+        :min-size="rightMinWidth"
+      >
+        <template #default>
+          <div class="h-full pl-2">
+            <slot></slot>
+          </div>
+        </template>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </Page>
+</template>

package/src/common-ui/components/col-page/index.ts

@@ -0,0 +1,2 @@
+export { default as ColPage } from './col-page.vue';
+export * from './types';

package/src/common-ui/components/col-page/types.ts

@@ -0,0 +1,26 @@
+import type { PageProps } from '../page/types';
+
+export interface ColPageProps extends PageProps {
+  /**
+   * 左侧宽度
+   * @default 30
+   */
+  leftWidth?: number;
+  leftMinWidth?: number;
+  leftMaxWidth?: number;
+  leftCollapsedWidth?: number;
+  leftCollapsible?: boolean;
+  /**
+   * 右侧宽度
+   * @default 70
+   */
+  rightWidth?: number;
+  rightMinWidth?: number;
+  rightCollapsedWidth?: number;
+  rightMaxWidth?: number;
+  rightCollapsible?: boolean;
+
+  resizable?: boolean;
+  splitLine?: boolean;
+  splitHandle?: boolean;
+}