From c55375d45bf1eecd79b7e2d11269fa2443ff0c25 Mon Sep 17 00:00:00 2001 From: Squall2017 <252766926@qq.com> Date: Fri, 13 Sep 2024 22:15:01 +0800 Subject: [PATCH] feat: add captcha internationalization --- .../src/components/captcha/captcha-card.vue | 10 +++- .../captcha/point-selection-captcha.vue | 21 ++++--- packages/locales/src/langs/en-US.json | 9 +++ packages/locales/src/langs/zh-CN.json | 9 +++ playground/src/locales/langs/en-US.json | 22 ++++++- playground/src/locales/langs/zh-CN.json | 22 ++++++- .../src/views/examples/captcha/index.vue | 59 ++++++++++++------- 7 files changed, 118 insertions(+), 34 deletions(-) diff --git a/packages/effects/common-ui/src/components/captcha/captcha-card.vue b/packages/effects/common-ui/src/components/captcha/captcha-card.vue index 9e57dc3d6eb..c4eb8cfd63a 100644 --- a/packages/effects/common-ui/src/components/captcha/captcha-card.vue +++ b/packages/effects/common-ui/src/components/captcha/captcha-card.vue @@ -3,6 +3,7 @@ import type { CaptchaCardProps } from './types'; import { computed } from 'vue'; +import { $t } from '@vben/locales'; import { Card, CardContent, @@ -45,7 +46,12 @@ function handleClick(e: MouseEvent) { - {{ title }} + +
@@ -54,9 +60,9 @@ function handleClick(e: MouseEvent) { 验证码图片(支持img标签src属性值) diff --git a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue index 2c49743baac..3b1ac90729a 100644 --- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue +++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue @@ -4,6 +4,7 @@ import type { CaptchaPoint, PointSelectionCaptchaProps } from './types'; import { ref } from 'vue'; import { RotateCw } from '@vben/icons'; +import { $t } from '@vben/locales'; import { VbenButton, VbenIconButton } from '@vben-core/shadcn-ui'; import { CaptchaCard } from '.'; @@ -15,7 +16,7 @@ const props = withDefaults(defineProps(), { paddingX: '12px', paddingY: '16px', showConfirm: false, - title: '请完成安全验证', + title: '', width: '300px', }); @@ -26,7 +27,7 @@ const emit = defineEmits<{ }>(); if (!props.hintImage && !props.hintText) { - throw new Error('必须提供提示图片或提示文本中的至少一个'); + throw new Error('At least one of hint image or hint text must be provided'); } const points = ref([]); @@ -130,9 +131,13 @@ function handleConfirm() { :width="width" @click="handleClick" > + +
@@ -165,15 +170,15 @@ function handleConfirm() { diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json index 789fc6f20ba..4f2d3c48c7e 100644 --- a/packages/locales/src/langs/en-US.json +++ b/packages/locales/src/langs/en-US.json @@ -311,5 +311,14 @@ "sidebarToggle": "Enable Sidebar Toggle", "lockScreen": "Enable Lock Screen" } + }, + "captcha": { + "alt": "Supports img tag src attribute value", + "title": "Please complete the security verification", + "refreshAriaLabel": "Refresh captcha", + "confirmAriaLabel": "Confirm selection", + "confirm": "Confirm", + "pointAriaLabel": "Click point", + "clickInOrder": "Please click in order" } } diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json index 61d39c964fb..81937f1ae30 100644 --- a/packages/locales/src/langs/zh-CN.json +++ b/packages/locales/src/langs/zh-CN.json @@ -311,5 +311,14 @@ "sidebarToggle": "启用侧边栏切换", "lockScreen": "启用锁屏" } + }, + "captcha": { + "alt": "支持img标签src属性值", + "title": "请完成安全验证", + "refreshAriaLabel": "刷新验证码", + "confirmAriaLabel": "确认选择", + "confirm": "确认", + "pointAriaLabel": "点击点", + "clickInOrder": "请依次点击" } } diff --git a/playground/src/locales/langs/en-US.json b/playground/src/locales/langs/en-US.json index 1577eb37ca7..95f3c8831b6 100644 --- a/playground/src/locales/langs/en-US.json +++ b/playground/src/locales/langs/en-US.json @@ -81,7 +81,27 @@ "custom": "Custom Component" }, "captcha": { - "title": "Captcha" + "title": "Captcha", + "captchaCardTitle": "Please complete the security verification", + "pageDescription": "Verify user identity by clicking on specific locations in the image.", + "pageTitle": "Captcha Component Example", + "basic": "Basic Usage", + "titlePlaceholder": "Captcha Title Text", + "captchaImageUrlPlaceholder": "Captcha Image (supports img tag src attribute value)", + "hintImage": "Hint Image", + "hintText": "Hint Text", + "hintImagePlaceholder": "Hint Image (supports img tag src attribute value)", + "hintTextPlaceholder": "Hint Text", + "showConfirm": "Show Confirm", + "hideConfirm": "Hide Confirm", + "widthPlaceholder": "Captcha Image Width Default 300px", + "heightPlaceholder": "Captcha Image Height Default 220px", + "paddingXPlaceholder": "Horizontal Padding Default 12px", + "paddingYPlaceholder": "Vertical Padding Default 16px", + "index": "Index:", + "timestamp": "Timestamp:", + "x": "x:", + "y": "y:" } } } diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json index 8bcac9632b1..91d4962c2b0 100644 --- a/playground/src/locales/langs/zh-CN.json +++ b/playground/src/locales/langs/zh-CN.json @@ -81,7 +81,27 @@ "custom": "自定义组件" }, "captcha": { - "title": "验证码" + "title": "验证码", + "captchaCardTitle": "请完成安全验证", + "pageDescription": "通过点击图片中的特定位置来验证用户身份。", + "pageTitle": "验证码组件示例", + "basic": "基本使用", + "titlePlaceholder": "验证码标题文案", + "captchaImageUrlPlaceholder": "验证码图片(支持img标签src属性值)", + "hintImage": "提示图片", + "hintText": "提示文本", + "hintImagePlaceholder": "提示图片(支持img标签src属性值)", + "hintTextPlaceholder": "提示文本", + "showConfirm": "展示确认", + "hideConfirm": "隐藏确认", + "widthPlaceholder": "验证码图片宽度 默认300px", + "heightPlaceholder": "验证码图片高度 默认220px", + "paddingXPlaceholder": "水平内边距 默认12px", + "paddingYPlaceholder": "垂直内边距 默认16px", + "index": "索引:", + "timestamp": "时间戳:", + "x": "x:", + "y": "y:" } } } diff --git a/playground/src/views/examples/captcha/index.vue b/playground/src/views/examples/captcha/index.vue index dca3a496b37..7c737f77e57 100644 --- a/playground/src/views/examples/captcha/index.vue +++ b/playground/src/views/examples/captcha/index.vue @@ -7,6 +7,8 @@ import { Page, PointSelectionCaptcha } from '@vben/common-ui'; import { Card, Input, InputNumber, message, Switch } from 'ant-design-vue'; +import { $t } from '#/locales'; + import { captchaImage, hintImage } from './base64'; const selectedPoints = ref([]); @@ -21,7 +23,7 @@ const params = reactive({ paddingY: undefined, showConfirm: true, showHintImage: true, - title: '请完成安全验证', + title: '', width: undefined, }); const handleConfirm = (points: CaptchaPoint[], clear: () => void) => { @@ -29,6 +31,7 @@ const handleConfirm = (points: CaptchaPoint[], clear: () => void) => { content: `captcha points: ${JSON.stringify(points)}`, }); clear(); + selectedPoints.value = []; }; const handleRefresh = () => { selectedPoints.value = []; @@ -40,45 +43,45 @@ const handleClick = (point: CaptchaPoint) => {