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 <vince292007@gmail.com> Co-authored-by: Vben <ann.vben@gmail.com>
vbenjs · Sep 21, 2024 · 000172e · 000172e
1 parent dbe5b33
commit 000172e
Show file tree

Hide file tree

Showing 39 changed files with 1,017 additions and 110 deletions.
diff --git a/README.ja-JP.md b/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>
 

diff --git a/README.md b/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>
 

diff --git a/README.zh-CN.md b/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>
 

diff --git a/docs/.vitepress/config/shared.mts b/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',
  },
  ],

diff --git a/docs/src/commercial/community.md b/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;"/>
diff --git a/docs/src/commercial/customized.md b/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;"/>
 
 我们会在第一时间回复您，定制费用根据需求而定。
diff --git a/docs/src/en/guide/essentials/settings.md b/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,

diff --git a/docs/src/en/index.md b/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

diff --git a/docs/src/friend-links/index.md b/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
 
 我们将定期的检查友情链接，如果发现您的网站已经删除了我们的友情链接以及链接地址是否正确。
diff --git a/docs/src/guide/essentials/settings.md b/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,

diff --git a/docs/src/index.md b/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

diff --git a/docs/src/sponsor/personal.md b/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)
 
 您的赞助将帮助我们：
 

diff --git a/internal/vite-config/src/options.ts b/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',
  },
  ],

diff --git a/packages/@core/base/icons/src/lucide.ts b/packages/@core/base/icons/src/lucide.ts
@@ -10,6 +10,7 @@ export {
  ArrowUpToLine,
  Bell,
  BookOpenText,
+ Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,

diff --git a/packages/@core/base/shared/src/constants/vben.ts b/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 首页地址

diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/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,

diff --git a/packages/@core/preferences/src/config.ts b/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,

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue b/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 {

diff --git a/packages/effects/common-ui/package.json b/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:",

diff --git a/packages/effects/common-ui/src/components/captcha/index.ts b/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';
diff --git a/...nents/captcha/point-selection-captcha.vue → ...captcha/point-selection-captcha/index.vue b/...nents/captcha/point-selection-captcha.vue → ...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>