From 696a347b61f0c4b8995ef15e1ee13e0423ceebd8 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 21 Mar 2024 00:10:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE=E5=BD=A2?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml            |  1 +
 locales/zh-CN.yaml         |  1 +
 package.json               |  1 +
 pnpm-lock.yaml             |  7 +++++++
 src/router/modules/able.ts |  9 +++++++++
 src/views/able/verify.vue  | 35 +++++++++++++++++++++++++++++++++++
 types/shims-vue.d.ts       |  3 ++-
 7 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/views/able/verify.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index c0be38d89..88c6bd37e 100644
--- a/locales/en.yaml
+++ b/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
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index eb50927fa..71c748507 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -94,6 +94,7 @@ menus:
   hsWavesurfer: 音频可视化
   hsRipple: 波纹(Ripple)
   hsOptimize: 防抖、截流、复制、长按指令
+  hsVerify: 图形验证码
   hsWatermark: 水印
   hsPrint: 打印
   hsDownload: 下载
diff --git a/package.json b/package.json
index f825622de..dff2b7926 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa586b38c..ef66d973e 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index fa5021b20..1a61e1955 100644
--- a/src/router/modules/able.ts
+++ b/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",
diff --git a/src/views/able/verify.vue b/src/views/able/verify.vue
new file mode 100644
index 000000000..39b0ac50c
--- /dev/null
+++ b/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>
diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts
index 07e615518..9b435b0a2 100644
--- a/types/shims-vue.d.ts
+++ b/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";