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

* 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 <[email protected]>
Co-authored-by: Vben <[email protected]>

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/[email protected].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/[email protected].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/[email protected].6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/[email protected].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/[email protected].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/[email protected].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/[email protected].6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/[email protected].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/[email protected].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/[email protected].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/[email protected].6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp',
+    logo: 'https://unpkg.com/@vbenjs/[email protected].7/source/logo-v1.webp',
     search: {
       options: {
         locales: {
@@ -138,12 +138,12 @@ function pwa(): PwaOptions {
       icons: [
         {
           sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-192.png',
+          src: 'https://unpkg.com/@vbenjs/[email protected].7/source/pwa-icon-192.png',
           type: 'image/png',
         },
         {
           sizes: '512x512',
-          src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-512.png',
+          src: 'https://unpkg.com/@vbenjs/[email protected].7/source/pwa-icon-512.png',
           type: 'image/png',
         },
       ],

docs/src/commercial/community.md

@@ -24,4 +24,4 @@
 
 :::
 
-<img src="https://unpkg.com/@vbenjs/[email protected].6/source/wechat.jpg" style="width: 300px;"/>
+<img src="https://unpkg.com/@vbenjs/[email protected].7/source/wechat.jpg" style="width: 300px;"/>

docs/src/commercial/customized.md

@@ -7,6 +7,6 @@
 - 通过邮箱联系开发者： [[email protected]](mailto:[email protected])
 - 通过微信联系开发者：
 
- <img src="https://unpkg.com/@vbenjs/[email protected].6/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/[email protected].7/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/friend-links/index.md

@@ -9,7 +9,7 @@
 - 通过邮箱联系作者： [[email protected]](mailto:[email protected])
 - 通过微信联系作者：
 
- <img src="https://unpkg.com/@vbenjs/[email protected].6/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/[email protected].7/source/wechat.jpg" style="width: 300px;"/>
 
 ### 提供资料
 
@@ -22,6 +22,6 @@
   - 名称：Vben Admin
   - 链接：https://www.vben.pro
   - 描述：Vben Admin 企业级开箱即用的中后台前端解决方案
-  - Logo：https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp
+  - Logo：https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/[email protected].7/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/sponsor/personal.md

@@ -2,7 +2,7 @@
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![](https://unpkg.com/@vbenjs/[email protected].6/source/sponsor.png)
+![](https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/pwa-icon-192.png',
+        src: 'https://unpkg.com/@vbenjs/[email protected].7/source/pwa-icon-192.png',
         type: 'image/png',
       },
       {
         sizes: '512x512',
-        src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-512.png',
+        src: 'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp';
+  'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/avatar-v1.webp",
+    "defaultAvatar": "https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp",
+    "source": "https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/[email protected].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/[email protected].6/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/[email protected].7/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue

@@ -1,5 +1,22 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const { animationDuration = 2, animationIterationCount = 'infinite' } =
+  defineProps<{
+    // 动画持续时间，单位秒
+    animationDuration?: number;
+    // 动画是否只执行一次
+    animationIterationCount?: 'infinite' | number;
+  }>();
+
+const style = computed(() => {
+  return {
+    animation: `shine ${animationDuration}s linear ${animationIterationCount}`,
+  };
+});
+</script>
 <template>
-  <div class="vben-spine-text !bg-clip-text text-transparent">
+  <div :style="style" class="vben-spine-text !bg-clip-text text-transparent">
     <slot></slot>
   </div>
 </template>
@@ -9,7 +26,8 @@
     radial-gradient(circle at center, rgb(255 255 255 / 80%), #f000) -200% 50% /
       200% 100% no-repeat,
     #000;
-  animation: shine 3s linear infinite;
+
+  /* animation: shine 3s linear infinite; */
 }
 
 .dark .vben-spine-text {

packages/effects/common-ui/package.json

@@ -23,10 +23,12 @@
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben/constants": "workspace:*",
     "@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,6 @@
-export { default as CaptchaCard } from './captcha-card.vue';
-export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
+export { default as PointSelectionCaptcha } from './point-selection-captcha/index.vue';
+export { default as PointSelectionCaptchaCard } from './point-selection-captcha/index.vue';
+
+export { default as SliderCaptcha } from './slider-captcha/index.vue';
+export { default as SliderRotateCaptcha } from './slider-rotate-captcha/index.vue';
 export type * from './types';

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { CaptchaPoint, PointSelectionCaptchaProps } from './types';
+import type { CaptchaPoint, PointSelectionCaptchaProps } from '../types';
 
 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 { useCaptchaPoints } from '../hooks/useCaptchaPoints';
+import CaptchaCard from './point-selection-captcha-card.vue';
 
 const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
   height: '220px',
@@ -121,32 +121,32 @@ function handleConfirm() {
     @click="handleClick"
   >
     <template #title>
-      <slot name="title">{{ $t('captcha.title') }}</slot>
+      <slot name="title">{{ $t('ui.captcha.title') }}</slot>
     </template>
 
     <template #extra>
       <VbenIconButton
-        :aria-label="$t('captcha.refreshAriaLabel')"
+        :aria-label="$t('ui.captcha.refreshAriaLabel')"
         class="ml-1"
         @click="handleRefresh"
       >
         <RotateCw class="size-5" />
       </VbenIconButton>
       <VbenButton
         v-if="showConfirm"
-        :aria-label="$t('captcha.confirmAriaLabel')"
+        :aria-label="$t('ui.captcha.confirmAriaLabel')"
         class="ml-2"
         size="sm"
         @click="handleConfirm"
       >
-        {{ $t('captcha.confirm') }}
+        {{ $t('ui.captcha.confirm') }}
       </VbenButton>
     </template>
 
     <div
       v-for="(point, index) in points"
       :key="index"
-      :aria-label="$t('captcha.pointAriaLabel') + (index + 1)"
+      :aria-label="$t('ui.captcha.pointAriaLabel') + (index + 1)"
       :style="{
         top: `${point.y - POINT_OFFSET}px`,
         left: `${point.x - POINT_OFFSET}px`,
@@ -160,15 +160,15 @@ function handleConfirm() {
     <template #footer>
       <img
         v-if="hintImage"
-        :alt="$t('captcha.alt')"
+        :alt="$t('ui.captcha.alt')"
         :src="hintImage"
         class="h-10 w-full rounded border border-solid border-slate-200"
       />
       <div
         v-else-if="hintText"
         class="flex h-10 w-full items-center justify-center rounded border border-solid border-slate-200"
       >
-        {{ `${$t('captcha.clickInOrder')}` + `【${hintText}】` }}
+        {{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
       </div>
     </template>
   </CaptchaCard>