vue-vben-admin/playground/src/views/examples/captcha/point-selection-captcha.vue

<script lang="ts" setup>
import type { CaptchaPoint } from '@vben/common-ui';

import { reactive, ref } from 'vue';

import { Page, PointSelectionCaptcha } from '@vben/common-ui';

import { Card, Input, InputNumber, message, Switch } from 'ant-design-vue';

import { $t } from '#/locales';

const DEFAULT_CAPTCHA_IMAGE =
  'https://unpkg.com/@vbenjs/static-source@0.1.7/source/default-captcha-image.jpeg';

const DEFAULT_HINT_IMAGE =
  'https://unpkg.com/@vbenjs/static-source@0.1.7/source/default-hint-image.png';

const selectedPoints = ref<CaptchaPoint[]>([]);
const params = reactive({
  captchaImage: '',
  captchaImageUrl: DEFAULT_CAPTCHA_IMAGE,
  height: undefined,
  hintImage: '',
  hintImageUrl: DEFAULT_HINT_IMAGE,
  hintText: '唇，燕，碴，找',
  paddingX: undefined,
  paddingY: undefined,
  showConfirm: true,
  showHintImage: false,
  title: '',
  width: undefined,
});
const handleConfirm = (points: CaptchaPoint[], clear: () => void) => {
  message.success({
    content: `captcha points: ${JSON.stringify(points)}`,
  });
  clear();
  selectedPoints.value = [];
};
const handleRefresh = () => {
  selectedPoints.value = [];
};
const handleClick = (point: CaptchaPoint) => {
  selectedPoints.value.push(point);
};
</script>

<template>
  <Page
    :description="$t('page.examples.captcha.pageDescription')"
    :title="$t('page.examples.captcha.pageTitle')"
  >
    <Card
      :title="$t('page.examples.captcha.basic')"
      class="mb-4 overflow-x-auto"
    >
      <div class="mb-3 flex items-center justify-start">
        <Input
          v-model:value="params.title"
          :placeholder="$t('page.examples.captcha.titlePlaceholder')"
          class="w-64"
        />
        <Input
          v-model:value="params.captchaImageUrl"
          :placeholder="$t('page.examples.captcha.captchaImageUrlPlaceholder')"
          class="ml-8 w-64"
        />
        <div class="ml-8 flex w-96 items-center">
          <Switch
            v-model:checked="params.showHintImage"
            :checked-children="$t('page.examples.captcha.hintImage')"
            :un-checked-children="$t('page.examples.captcha.hintText')"
            class="mr-4 w-40"
          />
          <Input
            v-show="params.showHintImage"
            v-model:value="params.hintImageUrl"
            :placeholder="$t('page.examples.captcha.hintImagePlaceholder')"
          />
          <Input
            v-show="!params.showHintImage"
            v-model:value="params.hintText"
            :placeholder="$t('page.examples.captcha.hintTextPlaceholder')"
          />
        </div>

        <Switch
          v-model:checked="params.showConfirm"
          :checked-children="$t('page.examples.captcha.showConfirm')"
          :un-checked-children="$t('page.examples.captcha.hideConfirm')"
          class="ml-8 w-28"
        />
      </div>
      <div class="mb-3 flex items-center justify-start">
        <div>
          <InputNumber
            v-model:value="params.width"
            :min="1"
            :placeholder="$t('page.examples.captcha.widthPlaceholder')"
            :precision="0"
            :step="1"
            class="w-64"
          >
            <template #addonAfter>px</template>
          </InputNumber>
        </div>
        <div class="ml-8">
          <InputNumber
            v-model:value="params.height"
            :min="1"
            :placeholder="$t('page.examples.captcha.heightPlaceholder')"
            :precision="0"
            :step="1"
            class="w-64"
          >
            <template #addonAfter>px</template>
          </InputNumber>
        </div>
        <div class="ml-8">
          <InputNumber
            v-model:value="params.paddingX"
            :min="1"
            :placeholder="$t('page.examples.captcha.paddingXPlaceholder')"
            :precision="0"
            :step="1"
            class="w-64"
          >
            <template #addonAfter>px</template>
          </InputNumber>
        </div>
        <div class="ml-8">
          <InputNumber
            v-model:value="params.paddingY"
            :min="1"
            :placeholder="$t('page.examples.captcha.paddingYPlaceholder')"
            :precision="0"
            :step="1"
            class="w-64"
          >
            <template #addonAfter>px</template>
          </InputNumber>
        </div>
      </div>

      <PointSelectionCaptcha
        :captcha-image="params.captchaImageUrl || params.captchaImage"
        :height="params.height || 220"
        :hint-image="
          params.showHintImage ? params.hintImageUrl || params.hintImage : ''
        "
        :hint-text="params.hintText"
        :padding-x="params.paddingX"
        :padding-y="params.paddingY"
        :show-confirm="params.showConfirm"
        :width="params.width || 300"
        class="float-left"
        @click="handleClick"
        @confirm="handleConfirm"
        @refresh="handleRefresh"
      >
        <template #title>
          {{ params.title || $t('page.examples.captcha.captchaCardTitle') }}
        </template>
      </PointSelectionCaptcha>

      <ol class="float-left p-5">
        <li v-for="point in selectedPoints" :key="point.i" class="flex">
          <span class="mr-3 w-16">{{
            $t('page.examples.captcha.index') + point.i
          }}</span>
          <span class="mr-3 w-52">{{
            $t('page.examples.captcha.timestamp') + point.t
          }}</span>
          <span class="mr-3 w-16">{{
            $t('page.examples.captcha.x') + point.x
          }}</span>
          <span class="mr-3 w-16">{{
            $t('page.examples.captcha.y') + point.y
          }}</span>
        </li>
      </ol>
    </Card>
  </Page>
</template>