feat: 新增拼图切片平移的验证码 #6471
feat: 新增拼图切片平移的验证码 #6471
Conversation
cwr0401
requested review from
anncwb,
vince292007,
mynetfan and
jinmao88
as code owners
WalkthroughA slider-based puzzle captcha feature was introduced. This includes a new Vue component for the slider captcha, updates to component exports, type definitions for its props, localization entries in English and Chinese, a new example route, and a demonstration view integrating the new captcha. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SliderTranslateCaptcha
participant ParentComponent
User->>SliderTranslateCaptcha: Drag slider to move puzzle piece
SliderTranslateCaptcha->>SliderTranslateCaptcha: Verify piece position
alt Success
SliderTranslateCaptcha->>ParentComponent: Emit success event
else Failure
SliderTranslateCaptcha->>SliderTranslateCaptcha: Reset piece position
end
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue (4)
38-43: Remove unnecessary eslint-disable comments.TypeScript enums don't trigger unused variable warnings for their members, so these eslint-disable comments are not needed.
enum CanvasOpr { - // eslint-disable-next-line no-unused-vars Clip = 'clip', - // eslint-disable-next-line no-unused-vars Fill = 'fill', }
154-157: Translate Chinese comment to English.For consistency and international collaboration, comments should be in English.
const img = new Image(); - // 解决跨域 + // Solve cross-origin issues img.crossOrigin = 'Anonymous'; img.src = src;
126-135: Apply willReadFrequently optimization consistently.Both canvas contexts should use
willReadFrequently: truesince both perform readback operations, not just the pieceCanvas.pieceCanvas.width = canvasWidth; - const puzzleCanvasCtx = puzzleCanvas.getContext('2d'); + const puzzleCanvasCtx = puzzleCanvas.getContext('2d', { + willReadFrequently: true, + }); // Canvas2D: Multiple readback operations using getImageData // are faster with the willReadFrequently attribute set to true. // See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous) const pieceCanvasCtx = pieceCanvas.getContext('2d', { willReadFrequently: true, });The same change should be applied in the
initCanvasfunction as well.
222-230: Document the purpose of the magic number.The addition of 0.4 to the radius lacks explanation, making the code less maintainable.
ctx.arc( x + circleRadius - 2, y + squareLength / 2, - circleRadius + 0.4, + circleRadius + 0.4, // Slightly larger radius for the left notch to ensure proper fitting 2.76 * PI, 1.24 * PI, true, );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/effects/common-ui/src/components/captcha/index.ts(1 hunks)packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue(1 hunks)packages/effects/common-ui/src/components/captcha/types.ts(1 hunks)playground/src/locales/langs/en-US/examples.json(1 hunks)playground/src/locales/langs/zh-CN/examples.json(1 hunks)playground/src/router/routes/modules/examples.ts(1 hunks)playground/src/views/examples/captcha/slider-translate-captcha.vue(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5587
File: playground/src/views/examples/loading/index.vue:15-18
Timestamp: 2025-02-23T04:21:24.691Z
Learning: Chinese text in the description of the loading component example (`playground/src/views/examples/loading/index.vue`) is intentionally kept without i18n support.
packages/effects/common-ui/src/components/captcha/index.ts (1)
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5587
File: playground/src/views/examples/loading/index.vue:15-18
Timestamp: 2025-02-23T04:21:24.691Z
Learning: Chinese text in the description of the loading component example (`playground/src/views/examples/loading/index.vue`) is intentionally kept without i18n support.
playground/src/locales/langs/zh-CN/examples.json (2)
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5587
File: playground/src/views/examples/loading/index.vue:15-18
Timestamp: 2025-02-23T04:21:24.691Z
Learning: Chinese text in the description of the loading component example (`playground/src/views/examples/loading/index.vue`) is intentionally kept without i18n support.
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5013
File: docs/src/components/layout-ui/page.md:23-24
Timestamp: 2024-12-04T04:43:22.179Z
Learning: 在 `docs/src/components/layout-ui/page.md` 的 `Page` 组件中，`title` 和 `description` 属性有意使用 `string|slot` 类型表示法，表示它们可以接受字符串或插槽。
playground/src/router/routes/modules/examples.ts (1)
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5587
File: playground/src/views/examples/loading/index.vue:15-18
Timestamp: 2025-02-23T04:21:24.691Z
Learning: Chinese text in the description of the loading component example (`playground/src/views/examples/loading/index.vue`) is intentionally kept without i18n support.
playground/src/views/examples/captcha/slider-translate-captcha.vue (3)
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5587
File: playground/src/views/examples/loading/index.vue:15-18
Timestamp: 2025-02-23T04:21:24.691Z
Learning: Chinese text in the description of the loading component example (`playground/src/views/examples/loading/index.vue`) is intentionally kept without i18n support.
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5013
File: docs/src/components/layout-ui/page.md:23-24
Timestamp: 2024-12-04T04:43:22.179Z
Learning: 在 `docs/src/components/layout-ui/page.md` 的 `Page` 组件中，`title` 和 `description` 属性有意使用 `string|slot` 类型表示法，表示它们可以接受字符串或插槽。
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5013
File: docs/src/components/layout-ui/page.md:31-31
Timestamp: 2024-12-04T04:41:30.161Z
Learning: 在 Vben Admin 项目的 `Page` 组件中，`extra` 内容仅通过 slots 提供，没有对应的 prop 属性。
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue (1)
Learnt from: mynetfan
PR: vbenjs/vue-vben-admin#5587
File: playground/src/views/examples/loading/index.vue:15-18
Timestamp: 2025-02-23T04:21:24.691Z
Learning: Chinese text in the description of the loading component example (`playground/src/views/examples/loading/index.vue`) is intentionally kept without i18n support.
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (6)
packages/effects/common-ui/src/components/captcha/types.ts (1)
162-196: Well-structured interface for puzzle captcha component.The
SliderTranslateCaptchaPropsinterface is properly defined with appropriate types, comprehensive JSDoc documentation, and reasonable default values. The naming convention is consistent with other interfaces in the file.playground/src/locales/langs/en-US/examples.json (1)
44-44: Appropriate localization key added.The new localization entry follows the established naming pattern and provides a clear, descriptive translation for the slider puzzle captcha feature.
playground/src/locales/langs/zh-CN/examples.json (1)
47-47: Accurate Chinese localization added.The Chinese translation "拼图滑块验证" accurately describes the puzzle slider verification functionality and maintains consistency with the English localization key.
packages/effects/common-ui/src/components/captcha/index.ts (1)
6-6: Component export follows established pattern.The export statement for
SliderTranslateCaptchais correctly structured and maintains consistency with the existing captcha component exports.playground/src/router/routes/modules/examples.ts (1)
199-207: Route configuration follows established conventions.The new route entry for the slider translate captcha example is properly structured with consistent naming, appropriate path structure, and correct localization key usage.
playground/src/views/examples/captcha/slider-translate-captcha.vue (1)
1-27: LGTM! Well-structured example component.The implementation follows the established patterns for example components in this codebase. The hardcoded Chinese text is intentional (as per project conventions for example files), and the fixed values are appropriate for a demonstration.
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
Outdated
Show resolved
Hide resolved
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
Outdated
Show resolved
Hide resolved
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
Outdated
Show resolved
Hide resolved
| function handleDragEnd() { | ||
| const { pieceX } = state; | ||
| const { diffDistance } = props; | ||
|
|
||
| if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 10)) { | ||
| setLeft('0'); | ||
| state.moveDistance = 0; | ||
| } else { | ||
| checkPass(); | ||
| } |
There was a problem hiding this comment.
Fix inconsistent default value for diffDistance.
The fallback value (10) doesn't match the prop default (3), which could lead to unexpected behavior.
function handleDragEnd() {
const { pieceX } = state;
const { diffDistance } = props;
- if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 10)) {
+ if (Math.abs(pieceX - state.moveDistance) >= diffDistance) {
setLeft('0');
state.moveDistance = 0;
} else {
checkPass();
}Since diffDistance has a default value in props, the fallback is unnecessary.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function handleDragEnd() { | |
| const { pieceX } = state; | |
| const { diffDistance } = props; | |
| if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 10)) { | |
| setLeft('0'); | |
| state.moveDistance = 0; | |
| } else { | |
| checkPass(); | |
| } | |
| function handleDragEnd() { | |
| const { pieceX } = state; | |
| const { diffDistance } = props; | |
| if (Math.abs(pieceX - state.moveDistance) >= diffDistance) { | |
| setLeft('0'); | |
| state.moveDistance = 0; | |
| } else { | |
| checkPass(); | |
| } | |
| } |
🤖 Prompt for AI Agents
In
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
around lines 92 to 101, remove the fallback value (10) used with diffDistance in
the handleDragEnd function. Instead, rely directly on the diffDistance prop
since it already has a default value of 3 defined. This will ensure consistent
behavior and avoid unexpected discrepancies.
|
根据AI提示 有不少可以优化的地方 |
|
Description
随机选取图片中的一部分制作成拼图切片，复用 SliderCaptcha 组件平移该切片，使之与图片缺失匹配，获得验证通过。
验证码
验证成功
验证失败
Summary by CodeRabbit
New Features
Documentation