feat: 添加图形验证码示例

locales/en.yaml

@@ -94,6 +94,7 @@ menus:
   hsWavesurfer: Audio Visualization
   hsRipple: Ripple
   hsOptimize: Debounce、Throttle、Copy、Longpress Directives
+  hsVerify: Captcha
   hsWatermark: Water Mark
   hsPrint: Print
   hsDownload: Download

locales/zh-CN.yaml

@@ -94,6 +94,7 @@ menus:
   hsWavesurfer: 音频可视化
   hsRipple: 波纹(Ripple)
   hsOptimize: 防抖、截流、复制、长按指令
+  hsVerify: 图形验证码
   hsWatermark: 水印
   hsPrint: 打印
   hsDownload: 下载

package.json

@@ -101,6 +101,7 @@
     "vue-virtual-scroller": "2.0.0-beta.8",
     "vue-waterfall-plugin-next": "^2.4.3",
     "vue3-danmaku": "^1.6.0",
+    "vue3-puzzle-vcode": "^1.1.7",
     "vuedraggable": "^4.1.0",
     "vxe-table": "^4.5.21",
     "wavesurfer.js": "^7.7.5",

pnpm-lock.yaml

@@ -164,6 +164,9 @@ dependencies:
   vue3-danmaku:
     specifier: ^1.6.0
     version: 1.6.0(vue@3.4.21)
+  vue3-puzzle-vcode:
+    specifier: ^1.1.7
+    version: 1.1.7
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.4.21)
@@ -9223,6 +9226,10 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
+  /vue3-puzzle-vcode@1.1.7:
+    resolution: {integrity: sha512-mW780dz7HKjrElnE60CeYSeHGidKBKHoMjTDYfqF21330rTkFOsfDK1FQKZ22MktgMtTEoS/imfpEDlM1cxY/g==}
+    dev: false
+
   /vue@3.4.21(typescript@5.4.2):
     resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
     peerDependencies:

src/router/modules/able.ts

@@ -10,6 +10,15 @@ export default {
     rank: able
   },
   children: [
+    {
+      path: "/able/verify",
+      name: "Verify",
+      component: () => import("@/views/able/verify.vue"),
+      meta: {
+        title: $t("menus.hsVerify"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/able/watermark",
       name: "WaterMark",

src/views/able/verify.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Vcode from "vue3-puzzle-vcode";
+
+const isShow = ref(true);
+
+function onSuccess() {
+  console.log("验证成功");
+}
+
+function onFail() {
+  console.log("验证失败");
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        拼图人机验证、右滑拼图验证（
+        <el-link
+          href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          github地址
+        </el-link>
+        ）
+      </div>
+    </template>
+    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
+      <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
+    </div>
+  </el-card>
+</template>

types/shims-vue.d.ts

@@ -1,5 +1,5 @@
 declare module "*.vue" {
-  import { DefineComponent } from "vue";
+  import type { DefineComponent } from "vue";
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
@@ -9,6 +9,7 @@ declare module "*.scss" {
   export default scss;
 }
 
+declare module "vue3-puzzle-vcode";
 declare module "vue-virtual-scroller";
 declare module "vuedraggable/src/vuedraggable";
 declare module "element-plus/dist/locale/en.mjs";