feat(@vben/common-ui): add verify component

README.ja-JP.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -129,7 +129,7 @@ pnpm build
 
 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

README.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -128,7 +128,7 @@ Support modern browsers, not IE
 
 If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -124,7 +124,7 @@ pnpm build
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

docs/.vitepress/config/shared.mts

@@ -32,7 +32,7 @@ export const shared = defineConfig({
  srcDir: 'src',
  themeConfig: {
  i18nRouting: true,
- logo: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+ logo: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
  search: {
  options: {
  locales: {
@@ -138,12 +138,12 @@ function pwa(): PwaOptions {
  icons: [
  {
  sizes: '192x192',
- src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
+ src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-192.png',
  type: 'image/png',
  },
  {
  sizes: '512x512',
- src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
+ src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-512.png',
  type: 'image/png',
  },
  ],

docs/src/commercial/community.md

@@ -24,4 +24,4 @@
 
 :::
 
-<img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
+<img src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/wechat.jpg" style="width: 300px;"/>

docs/src/commercial/customized.md

@@ -7,6 +7,6 @@
 - 通过邮箱联系开发者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系开发者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/wechat.jpg" style="width: 300px;"/>
 
 我们会在第一时间回复您，定制费用根据需求而定。

docs/src/en/guide/essentials/settings.md

@@ -163,7 +163,7 @@ const defaultPreferences: Preferences = {
  compact: false,
  contentCompact: 'wide',
  defaultAvatar:
- 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
+ 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
  dynamicTitle: true,
  enableCheckUpdates: true,
  enablePreferences: true,
@@ -202,7 +202,7 @@ const defaultPreferences: Preferences = {
  },
  logo: {
  enable: true,
- source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+ source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
  },
  navigation: {
  accordion: true,

docs/src/en/index.md

@@ -8,7 +8,7 @@ hero:
  text: Enterprise-Level Management System Framework
  tagline: Fully Upgraded, Ready to Use, Simple and Efficient
  image:
- src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
+ src: https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp
  alt: Vben Admin
  actions:
  - theme: brand

docs/src/friend-links/index.md

@@ -9,7 +9,7 @@
 - 通过邮箱联系作者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系作者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/wechat.jpg" style="width: 300px;"/>
 
 ### 提供资料
 
@@ -22,6 +22,6 @@
  - 名称：Vben Admin
  - 链接：https://www.vben.pro
  - 描述：Vben Admin 企业级开箱即用的中后台前端解决方案
- - Logo：https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
+ - Logo：https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp
 
 我们将定期的检查友情链接，如果发现您的网站已经删除了我们的友情链接以及链接地址是否正确。

docs/src/guide/essentials/settings.md

@@ -185,7 +185,7 @@ const defaultPreferences: Preferences = {
  compact: false,
  contentCompact: 'wide',
  defaultAvatar:
- 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
+ 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
  dynamicTitle: true,
  enableCheckUpdates: true,
  enablePreferences: true,
@@ -224,7 +224,7 @@ const defaultPreferences: Preferences = {
  },
  logo: {
  enable: true,
- source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+ source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
  },
  navigation: {
  accordion: true,

docs/src/index.md

@@ -8,7 +8,7 @@ hero:
  text: 企业级管理系统框架
  tagline: 全新升级，开箱即用，简单高效
  image:
- src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
+ src: https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp
  alt: Vben Admin
  actions:
  - theme: brand

docs/src/sponsor/personal.md

@@ -2,7 +2,7 @@
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 您的赞助将帮助我们：
 

internal/vite-config/src/options.ts

@@ -11,12 +11,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
  icons: [
  {
  sizes: '192x192',
- src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
+ src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-192.png',
  type: 'image/png',
  },
  {
  sizes: '512x512',
- src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
+ src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-512.png',
  type: 'image/png',
  },
  ],

packages/@core/base/icons/src/lucide.ts

@@ -10,6 +10,7 @@ export {
  ArrowUpToLine,
  Bell,
  BookOpenText,
+ Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,

packages/@core/base/shared/src/constants/vben.ts

@@ -12,7 +12,7 @@ export const VBEN_DOC_URL = 'https://doc.vben.pro';
  * @zh_CN Vben Logo
  */
 export const VBEN_LOGO_URL =
- 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp';
+ 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp';
 
 /**
  * @zh_CN Vben Admin 首页地址

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -10,7 +10,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
  "colorWeakMode": false,
  "compact": false,
  "contentCompact": "wide",
- "defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp",
+ "defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
  "dynamicTitle": true,
  "enableCheckUpdates": true,
  "enablePreferences": true,
@@ -49,7 +49,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
  },
  "logo": {
  "enable": true,
- "source": "https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp",
+ "source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
  },
  "navigation": {
  "accordion": true,

packages/@core/preferences/src/config.ts

@@ -10,7 +10,7 @@ const defaultPreferences: Preferences = {
  compact: false,
  contentCompact: 'wide',
  defaultAvatar:
- 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
+ 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
  dynamicTitle: true,
  enableCheckUpdates: true,
  enablePreferences: true,
@@ -49,7 +49,7 @@ const defaultPreferences: Preferences = {
  },
  logo: {
  enable: true,
- source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+ source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
  },
  navigation: {
  accordion: true,

packages/effects/common-ui/package.json

@@ -27,6 +27,7 @@
  "@vben/icons": "workspace:*",
  "@vben/locales": "workspace:*",
  "@vben/types": "workspace:*",
+ "@vueuse/core": "catalog:",
  "@vueuse/integrations": "catalog:",
  "qrcode": "catalog:",
  "vue": "catalog:",

packages/effects/common-ui/src/components/captcha/index.ts

@@ -1,3 +1,3 @@
-export { default as CaptchaCard } from './captcha-card.vue';
 export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
+export { default as PointSelectionCaptchaCard } from './point-selection-captcha-card.vue';
 export type * from './types';

packages/effects/common-ui/src/components/captcha/captcha-card.vue → packages/effects/common-ui/src/components/captcha/point-selection-captcha-card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CaptchaCardProps } from './types';
+import type { PointSelectionCaptchaCardProps } from './types';
 
 import { computed } from 'vue';
 
@@ -14,7 +14,7 @@ import {
 
 import { parseValue } from './utils';
 
-const props = withDefaults(defineProps<CaptchaCardProps>(), {
+const props = withDefaults(defineProps<PointSelectionCaptchaCardProps>(), {
  height: '220px',
  paddingX: '12px',
  paddingY: '16px',

packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue

@@ -5,8 +5,8 @@ import { RotateCw } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { VbenButton, VbenIconButton } from '@vben-core/shadcn-ui';
 
-import CaptchaCard from './captcha-card.vue';
 import { useCaptchaPoints } from './hooks/useCaptchaPoints';
+import CaptchaCard from './point-selection-captcha-card.vue';
 
 const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
  height: '220px',

packages/effects/common-ui/src/components/captcha/types.ts

@@ -18,7 +18,7 @@ export interface CaptchaPoint extends CaptchaData {
  */
  i: number;
 }
-export interface CaptchaCardProps {
+export interface PointSelectionCaptchaCardProps {
  /**
  * 验证码图片
  */
@@ -50,7 +50,8 @@ export interface CaptchaCardProps {
  width?: number | string;
 }
 
-export interface PointSelectionCaptchaProps extends CaptchaCardProps {
+export interface PointSelectionCaptchaProps
+ extends PointSelectionCaptchaCardProps {
  /**
  * 是否展示确定按钮
  * @default false
@@ -71,7 +72,7 @@ export interface PointSelectionCaptchaProps extends CaptchaCardProps {
 /**
  * TODO: 滑动验证码
  */
-// export interface SlideCaptchaProps extends CaptchaCardProps {
+// export interface SlideCaptchaProps extends PointSelectionCaptchaCardProps {
 // /**
 // * 瓦片图片高度
 // * @default '40px'

packages/effects/common-ui/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './captcha';
 export * from './ellipsis-text';
 export * from './page';
+export * from './verify';
 export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';
 

packages/effects/common-ui/src/components/verify/drag-verify/action.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, type CSSProperties, ref } from 'vue';
+
+import { Check, ChevronsRight } from '@vben/icons';
+
+const props = defineProps<{
+ actionStyle: CSSProperties;
+ height: number | string;
+ isPassing: boolean;
+ toLeft: boolean;
+}>();
+const divRef = ref<HTMLDivElement>();
+
+const left = ref('0px');
+const style = computed(() => {
+ const { actionStyle, height } = props;
+ const h = `${Number.parseInt(height as string)}px`;
+ return {
+ background: 'hsl(var(--background))',
+ height: h,
+ left: left.value,
+ width: h,
+ ...actionStyle,
+ };
+});
+
+defineExpose({
+ getEl: () => {
+ return divRef.value;
+ },
+ getStyle: () => {
+ return divRef.value && divRef.value && divRef.value.style;
+ },
+ setLeft: (val: string) => {
+ left.value = val;
+ },
+});
+</script>
+
+<template>
+ <div
+ ref="divRef"
+ :class="toLeft ? 'transition-width !left-0 duration-300' : ''"
+ :style="style"
+ class="absolute left-0 top-0 flex cursor-move items-center justify-center rounded-md"
+ >
+ <slot v-if="$slots.icon" name="icon"></slot>
+
+ <template v-else>
+ <ChevronsRight v-if="!isPassing" />
+ <Check v-else />
+ </template>
+ </div>
+</template>