Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
dap
1 year ago
commit
5a8dbc11c2
@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import type { CaptchaCardProps } from './types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
import { parseValue } from './utils';
|
||||
|
||||
const props = withDefaults(defineProps<CaptchaCardProps>(), {
|
||||
height: '220px',
|
||||
paddingX: '12px',
|
||||
paddingY: '16px',
|
||||
title: '',
|
||||
width: '300px',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [MouseEvent];
|
||||
}>();
|
||||
|
||||
const rootStyles = computed(() => ({
|
||||
padding: `${parseValue(props.paddingY)}px ${parseValue(props.paddingX)}px`,
|
||||
width: `${parseValue(props.width) + parseValue(props.paddingX) * 2}px`,
|
||||
}));
|
||||
|
||||
const captchaStyles = computed(() => {
|
||||
return {
|
||||
height: `${parseValue(props.height)}px`,
|
||||
width: `${parseValue(props.width)}px`,
|
||||
};
|
||||
});
|
||||
|
||||
function handleClick(e: MouseEvent) {
|
||||
emit('click', e);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Card :style="rootStyles" aria-labelledby="captcha-title" role="region">
|
||||
<CardHeader class="p-0">
|
||||
<CardTitle id="captcha-title" class="flex items-center justify-between">
|
||||
<template v-if="$slots.title">
|
||||
<slot name="title">{{ $t('captcha.title') }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ title }}</span>
|
||||
</template>
|
||||
<div class="flex items-center justify-end">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="relative mt-2 flex w-full overflow-hidden rounded p-0">
|
||||
<img
|
||||
v-show="captchaImage"
|
||||
:alt="$t('captcha.alt')"
|
||||
:src="captchaImage"
|
||||
:style="captchaStyles"
|
||||
class="relative z-10"
|
||||
@click="handleClick"
|
||||
/>
|
||||
<div class="absolute inset-0">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter class="mt-2 flex justify-between p-0">
|
||||
<slot name="footer"></slot>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
// }
|
||||
|
||||
@ -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;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue