public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-25 07:24:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(@vben/common-ui): add verify component (#4390)

Browse Source 
* chore(@vben/common-ui): 增加拖拽校验组件

* chore: 增加样式

* Merge branch 'main' into wangjue-verify-comp

* chore: 封装action组件

* chore: 拆分完成拖拽功能

* chore: 样式调整为tailwindcss语法

* chore: 导出check图标

* chore: 拖动的图标变为@vben/icons的

* chore: 完成插槽功能迁移

* fix: ci error

* chore: 适配暗黑主题

* chore: 国际化

* chore: resolve conflict

* chore: 迁移v2的图片旋转校验组件

* chore: 完善选择校验demo

* chore: 转换为tailwindcss

* chore: 替换为系统的颜色变量

* chore: 使用interface代替组件的props声明

* chore: 调整props

* chore: 优化demo背景

* chore: follow suggest

* chore: rm unnecessary style tag

* chore: update demo

* perf: improve the experience of Captcha components

---------

Co-authored-by: vince <vince292007@gmail.com>
Co-authored-by: Vben <ann.vben@gmail.com>
This commit is contained in:
invalid w
2024-09-21 20:52:36 +08:00
committed by GitHub
parent dbe5b33db6
commit 000172e482
39 changed files with 1017 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
playground/src/views/examples/captcha/point-selection-captcha.vue Normal file
View File

@@ -0,0 +1,184 @@
<script lang="ts" setup>
import type { CaptchaPoint } from '@vben/common-ui';
import { reactive, ref } from 'vue';
import { Page, PointSelectionCaptcha } from '@vben/common-ui';
import { Card, Input, InputNumber, message, Switch } from 'ant-design-vue';
import { $t } from '#/locales';
const DEFAULT_CAPTCHA_IMAGE =
'https://unpkg.com/@vbenjs/static-source@0.1.7/source/default-captcha-image.jpeg';
const DEFAULT_HINT_IMAGE =
'https://unpkg.com/@vbenjs/static-source@0.1.7/source/default-hint-image.png';
const selectedPoints = ref<CaptchaPoint[]>([]);
const params = reactive({
captchaImage: '',
captchaImageUrl: DEFAULT_CAPTCHA_IMAGE,
height: undefined,
hintImage: '',
hintImageUrl: DEFAULT_HINT_IMAGE,
hintText: '唇，燕，碴，找',
paddingX: undefined,
paddingY: undefined,
showConfirm: true,
showHintImage: false,
title: '',
width: undefined,
});
const handleConfirm = (points: CaptchaPoint[], clear: () => void) => {
message.success({
content: `captcha points: ${JSON.stringify(points)}`,
});
clear();
selectedPoints.value = [];
};
const handleRefresh = () => {
selectedPoints.value = [];
};
const handleClick = (point: CaptchaPoint) => {
selectedPoints.value.push(point);
};
</script>
<template>
<Page
:description="$t('page.examples.captcha.pageDescription')"
:title="$t('page.examples.captcha.pageTitle')"
>
<Card
:title="$t('page.examples.captcha.basic')"
class="mb-4 overflow-x-auto"
>
<div class="mb-3 flex items-center justify-start">
<Input
v-model:value="params.title"
:placeholder="$t('page.examples.captcha.titlePlaceholder')"
class="w-64"
/>
<Input
v-model:value="params.captchaImageUrl"
:placeholder="$t('page.examples.captcha.captchaImageUrlPlaceholder')"
class="ml-8 w-64"
/>
<div class="ml-8 flex w-96 items-center">
<Switch
v-model:checked="params.showHintImage"
:checked-children="$t('page.examples.captcha.hintImage')"
:un-checked-children="$t('page.examples.captcha.hintText')"
class="mr-4 w-40"
/>
<Input
v-show="params.showHintImage"
v-model:value="params.hintImageUrl"
:placeholder="$t('page.examples.captcha.hintImagePlaceholder')"
/>
<Input
v-show="!params.showHintImage"
v-model:value="params.hintText"
:placeholder="$t('page.examples.captcha.hintTextPlaceholder')"
/>
</div>
<Switch
v-model:checked="params.showConfirm"
:checked-children="$t('page.examples.captcha.showConfirm')"
:un-checked-children="$t('page.examples.captcha.hideConfirm')"
class="ml-8 w-28"
/>
</div>
<div class="mb-3 flex items-center justify-start">
<div>
<InputNumber
v-model:value="params.width"
:min="1"
:placeholder="$t('page.examples.captcha.widthPlaceholder')"
:precision="0"
:step="1"
class="w-64"
>
<template #addonAfter>px</template>
</InputNumber>
</div>
<div class="ml-8">
<InputNumber
v-model:value="params.height"
:min="1"
:placeholder="$t('page.examples.captcha.heightPlaceholder')"
:precision="0"
:step="1"
class="w-64"
>
<template #addonAfter>px</template>
</InputNumber>
</div>
<div class="ml-8">
<InputNumber
v-model:value="params.paddingX"
:min="1"
:placeholder="$t('page.examples.captcha.paddingXPlaceholder')"
:precision="0"
:step="1"
class="w-64"
>
<template #addonAfter>px</template>
</InputNumber>
</div>
<div class="ml-8">
<InputNumber
v-model:value="params.paddingY"
:min="1"
:placeholder="$t('page.examples.captcha.paddingYPlaceholder')"
:precision="0"
:step="1"
class="w-64"
>
<template #addonAfter>px</template>
</InputNumber>
</div>
</div>
<PointSelectionCaptcha
:captcha-image="params.captchaImageUrl || params.captchaImage"
:height="params.height || 220"
:hint-image="
params.showHintImage ? params.hintImageUrl || params.hintImage : ''
"
:hint-text="params.hintText"
:padding-x="params.paddingX"
:padding-y="params.paddingY"
:show-confirm="params.showConfirm"
:width="params.width || 300"
class="float-left"
@click="handleClick"
@confirm="handleConfirm"
@refresh="handleRefresh"
>
<template #title>
{{ params.title || $t('page.examples.captcha.captchaCardTitle') }}
</template>
</PointSelectionCaptcha>
<ol class="float-left p-5">
<li v-for="point in selectedPoints" :key="point.i" class="flex">
<span class="mr-3 w-16">{{
$t('page.examples.captcha.index') + point.i
}}</span>
<span class="mr-3 w-52">{{
$t('page.examples.captcha.timestamp') + point.t
}}</span>
<span class="mr-3 w-16">{{
$t('page.examples.captcha.x') + point.x
}}</span>
<span class="mr-3 w-16">{{
$t('page.examples.captcha.y') + point.y
}}</span>
</li>
</ol>
</Card>
</Page>
</template>