feat: captcha example (#4330)

* feat: captcha example

* fix: fix lint errors

* chore: event handling and methods

* chore: add accessibility features ARIA labels and roles

---------

Co-authored-by: vince <vince292007@gmail.com>

playground/src/locales/langs/en-US.json

@@ -71,6 +71,9 @@
       },
       "ellipsis": {
         "title": "EllipsisText"
+      },
+      "captcha": {
+        "title": "Captcha"
       }
     }
   }

playground/src/locales/langs/zh-CN.json

@@ -71,6 +71,9 @@
       },
       "ellipsis": {
         "title": "文本省略"
+      },
+      "captcha": {
+        "title": "验证码"
       }
     }
   }

playground/src/router/routes/modules/examples.ts

@@ -39,6 +39,14 @@ const routes: RouteRecordRaw[] = [
           title: $t('page.examples.ellipsis.title'),
         },
       },
+      {
+        name: 'CaptchaExample',
+        path: '/examples/captcha',
+        component: () => import('#/views/examples/captcha/index.vue'),
+        meta: {
+          title: $t('page.examples.captcha.title'),
+        },
+      },
     ],
   },
 ];

playground/src/views/examples/captcha/index.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page, type Point, PointSelectionCaptcha } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import { captchaImage, hintImage } from './base64';
+
+const selectedPoints = ref<Point[]>([]);
+const handleConfirm = (points: Point[], clear: () => void) => {
+  selectedPoints.value = points;
+  clear();
+};
+const handleRefresh = () => {
+  selectedPoints.value = [];
+};
+</script>
+
+<template>
+  <Page
+    description="通过点击图片中的特定位置来验证用户身份。"
+    title="验证码组件示例"
+  >
+    <Card class="mb-4" title="基本使用">
+      <PointSelectionCaptcha
+        :captcha-image="captchaImage"
+        :hint-image="hintImage"
+        class="float-left"
+        @confirm="handleConfirm"
+        @refresh="handleRefresh"
+      />
+      <div class="float-left p-5">
+        <div v-for="point in selectedPoints" :key="point.i" class="flex">
+          <span class="mr-3 w-16">索引：{{ point.i }}</span>
+          <span class="mr-3 w-44">时间戳：{{ point.t }}</span>
+          <span class="mr-3 w-16">x：{{ point.x }}</span>
+          <span class="mr-3 w-16">y：{{ point.y }}</span>
+        </div>
+      </div>
+    </Card>
+  </Page>
+</template>