From d95633ad7f8eca11db341184928b2293fe9966c2 Mon Sep 17 00:00:00 2001
From: Squall2017 <252766926@qq.com>
Date: Fri, 13 Sep 2024 13:55:46 +0800
Subject: [PATCH] refactor: refactor code structure and improve captcha demo
page
---
.../src/components/captcha/captcha-card.vue | 71 ++++++
.../common-ui/src/components/captcha/index.ts | 1 +
.../captcha/point-selection-captcha.vue | 209 +++++++-----------
.../common-ui/src/components/captcha/types.ts | 87 +++++++-
.../common-ui/src/components/captcha/utils.ts | 7 +
.../src/views/examples/captcha/index.vue | 135 ++++++++++-
6 files changed, 364 insertions(+), 146 deletions(-)
create mode 100644 packages/effects/common-ui/src/components/captcha/captcha-card.vue
create mode 100644 packages/effects/common-ui/src/components/captcha/utils.ts
diff --git a/packages/effects/common-ui/src/components/captcha/captcha-card.vue b/packages/effects/common-ui/src/components/captcha/captcha-card.vue
new file mode 100644
index 00000000000..9e57dc3d6eb
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/captcha-card.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/effects/common-ui/src/components/captcha/index.ts b/packages/effects/common-ui/src/components/captcha/index.ts
index 59cbc827686..6aab0d16e64 100644
--- a/packages/effects/common-ui/src/components/captcha/index.ts
+++ b/packages/effects/common-ui/src/components/captcha/index.ts
@@ -1,2 +1,3 @@
+export { default as CaptchaCard } from './captcha-card.vue';
export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
export type * from './types';
diff --git a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
index 7bc40847acc..2c49743baac 100644
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
@@ -1,107 +1,36 @@
-
-
-
- {{ title }}
-
-
-
-
-
-
-
-
-
+
+
+
-
+
确认
-
-
+
+
+
+ {{ index + 1 }}
+
+
+
+
+ {{ `请依次点击` + `【${hintText}】` }}
+
+
+
diff --git a/packages/effects/common-ui/src/components/captcha/types.ts b/packages/effects/common-ui/src/components/captcha/types.ts
index 4e3901ba056..b9d35537278 100644
--- a/packages/effects/common-ui/src/components/captcha/types.ts
+++ b/packages/effects/common-ui/src/components/captcha/types.ts
@@ -1,6 +1,89 @@
-export interface CaptchaPoint {
- i: number;
+export interface CaptchaData {
+ /**
+ * x
+ */
x: number;
+ /**
+ * y
+ */
y: number;
+ /**
+ * 时间戳
+ */
t: number;
}
+export interface CaptchaPoint extends CaptchaData {
+ /**
+ * 数据索引
+ */
+ i: number;
+}
+export interface CaptchaCardProps {
+ /**
+ * 验证码图片
+ */
+ 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 CaptchaCardProps {
+ /**
+ * 是否展示确定按钮
+ * @default false
+ */
+ showConfirm?: boolean;
+ /**
+ * 提示图片
+ * @default ''
+ */
+ hintImage?: string;
+ /**
+ * 提示文本
+ * @default ''
+ */
+ hintText?: string;
+}
+
+/**
+ * TODO: 滑动验证码
+ */
+// export interface SlideCaptchaProps extends CaptchaCardProps {
+// /**
+// * 瓦片图片高度
+// * @default '40px'
+// */
+// tileHeight?: number | string;
+// /**
+// * 瓦片图片宽度
+// * @default '150px'
+// */
+// tileWidth?: number | string;
+// /**
+// * 瓦片图片
+// */
+// tileImage: string;
+// }
diff --git a/packages/effects/common-ui/src/components/captcha/utils.ts b/packages/effects/common-ui/src/components/captcha/utils.ts
new file mode 100644
index 00000000000..4deb272ce25
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/utils.ts
@@ -0,0 +1,7 @@
+export const parseValue = (value: number | string) => {
+ if (typeof value === 'number') {
+ return value;
+ }
+ const parsed = Number.parseFloat(value);
+ return Number.isNaN(parsed) ? 0 : parsed;
+};
diff --git a/playground/src/views/examples/captcha/index.vue b/playground/src/views/examples/captcha/index.vue
index f5fae2f146f..dca3a496b37 100644
--- a/playground/src/views/examples/captcha/index.vue
+++ b/playground/src/views/examples/captcha/index.vue
@@ -1,22 +1,41 @@
@@ -25,21 +44,119 @@ const handleRefresh = () => {
title="验证码组件示例"
>
+
+
+
+
+ px
+
+
+
+
+ px
+
+
+
+
+ px
+
+
+
+
+ px
+
+
+
+
-
-
+
+ -
索引:{{ point.i }}
时间戳:{{ point.t }}
x:{{ point.x }}
y:{{ point.y }}
-
-
+
+