build(dependencies): 移除 vue3-puzzle-vcode 依赖
- 从 package.json 和 pnpm-lock.yaml 中移除了 vue3-puzzle-vcode - 在 zh-CN.json 中添加了验证成功和失败的提示信息
This commit is contained in:
xingyy
parent
36fab5a203
commit
da60cce5d2
@ -1,4 +1,112 @@
|
||||
<template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
//i18n
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const {t} =useI18n()
|
||||
const props = defineProps({
|
||||
options:Object,
|
||||
loading: Boolean,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['leave'])
|
||||
|
||||
const moveX = ref(0)
|
||||
|
||||
const loaded = ref(false)
|
||||
const isDragging = ref(false)
|
||||
const isVerifying = ref(false)
|
||||
const maxMoveX = ref(0)
|
||||
const bgImage = ref(null)
|
||||
|
||||
const verifyStatus = reactive({
|
||||
show: false,
|
||||
type: '',
|
||||
message: ''
|
||||
})
|
||||
|
||||
const dragState = reactive({
|
||||
startX: 0,
|
||||
oldMoveX: 0
|
||||
})
|
||||
|
||||
const onImageLoad = () => {
|
||||
if (!bgImage.value?.complete) return
|
||||
|
||||
const img = bgImage.value
|
||||
const scale = img.width / img.naturalWidth
|
||||
const blockSize = Math.round(50 * scale)
|
||||
maxMoveX.value = img.width - blockSize
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
const onImageError = () => {
|
||||
console.error('Image failed to load')
|
||||
maxMoveX.value = 270
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
// 拖动处理
|
||||
const startDrag = (e) => {
|
||||
isDragging.value = true
|
||||
dragState.startX = e.touches?.[0].clientX ?? e.clientX
|
||||
dragState.oldMoveX = moveX.value
|
||||
}
|
||||
|
||||
const onDrag = (e) => {
|
||||
if (!isDragging.value) return
|
||||
|
||||
const clientX = e.touches?.[0].clientX ?? e.clientX
|
||||
let newMoveX = dragState.oldMoveX + (clientX - dragState.startX)
|
||||
|
||||
moveX.value = Math.max(0, Math.min(newMoveX, maxMoveX.value))
|
||||
}
|
||||
|
||||
const endDrag = async () => {
|
||||
if (!isDragging.value) return
|
||||
|
||||
isDragging.value = false
|
||||
isVerifying.value = true
|
||||
|
||||
try {
|
||||
emit('leave', moveX.value, (success) => {
|
||||
showVerifyResult(success)
|
||||
})
|
||||
} catch (error) {
|
||||
showVerifyResult(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 验证结果展示
|
||||
const showVerifyResult = (success) => {
|
||||
verifyStatus.show = true
|
||||
verifyStatus.type = success ? 'success' : 'error'
|
||||
verifyStatus.message = success ? t('components.form.verifySuccess') : t('components.form.verifyFailed')
|
||||
isVerifying.value = false
|
||||
setTimeout(() => {
|
||||
verifyStatus.show = false
|
||||
verifyStatus.message = ''
|
||||
moveX.value = 0
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
// 事件监听
|
||||
onMounted(() => {
|
||||
window.addEventListener('mousemove', onDrag)
|
||||
window.addEventListener('mouseup', endDrag)
|
||||
window.addEventListener('touchmove', onDrag)
|
||||
window.addEventListener('touchend', endDrag)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('mousemove', onDrag)
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
window.removeEventListener('touchmove', onDrag)
|
||||
window.removeEventListener('touchend', endDrag)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="m-auto bg-white p-15px rd-10px touch-none select-none">
|
||||
<div class="relative w-full overflow-hidden bg-#f8f8f8 rd-10px" :style="{ width: `${options?.canvasWidth}px`, height: `${options?.canvasHeight}px` }">
|
||||
<!-- 加载状态 -->
|
||||
@ -69,115 +177,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
options:Object,
|
||||
loading: Boolean,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['leave'])
|
||||
|
||||
// 状态管理
|
||||
const moveX = ref(0)
|
||||
|
||||
const loaded = ref(false)
|
||||
const isDragging = ref(false)
|
||||
const isVerifying = ref(false)
|
||||
const maxMoveX = ref(0)
|
||||
const bgImage = ref(null)
|
||||
|
||||
const verifyStatus = reactive({
|
||||
show: false,
|
||||
type: '',
|
||||
message: ''
|
||||
})
|
||||
|
||||
const dragState = reactive({
|
||||
startX: 0,
|
||||
oldMoveX: 0
|
||||
})
|
||||
|
||||
// 图片加载处理
|
||||
const onImageLoad = () => {
|
||||
if (!bgImage.value?.complete) return
|
||||
|
||||
const img = bgImage.value
|
||||
const scale = img.width / img.naturalWidth
|
||||
const blockSize = Math.round(50 * scale)
|
||||
maxMoveX.value = img.width - blockSize
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
const onImageError = () => {
|
||||
console.error('Image failed to load')
|
||||
maxMoveX.value = 270
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
// 拖动处理
|
||||
const startDrag = (e) => {
|
||||
isDragging.value = true
|
||||
dragState.startX = e.touches?.[0].clientX ?? e.clientX
|
||||
dragState.oldMoveX = moveX.value
|
||||
}
|
||||
|
||||
const onDrag = (e) => {
|
||||
if (!isDragging.value) return
|
||||
|
||||
const clientX = e.touches?.[0].clientX ?? e.clientX
|
||||
let newMoveX = dragState.oldMoveX + (clientX - dragState.startX)
|
||||
|
||||
moveX.value = Math.max(0, Math.min(newMoveX, maxMoveX.value))
|
||||
}
|
||||
|
||||
const endDrag = async () => {
|
||||
if (!isDragging.value) return
|
||||
|
||||
isDragging.value = false
|
||||
isVerifying.value = true
|
||||
|
||||
try {
|
||||
emit('leave', moveX.value, (success) => {
|
||||
showVerifyResult(success)
|
||||
})
|
||||
} catch (error) {
|
||||
showVerifyResult(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 验证结果展示
|
||||
const showVerifyResult = (success) => {
|
||||
verifyStatus.show = true
|
||||
verifyStatus.type = success ? 'success' : 'error'
|
||||
verifyStatus.message = success ? '验证成功' : '验证失败'
|
||||
isVerifying.value = false
|
||||
setTimeout(() => {
|
||||
verifyStatus.show = false
|
||||
verifyStatus.message = ''
|
||||
moveX.value = 0
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
// 事件监听
|
||||
onMounted(() => {
|
||||
window.addEventListener('mousemove', onDrag)
|
||||
window.addEventListener('mouseup', endDrag)
|
||||
window.addEventListener('touchmove', onDrag)
|
||||
window.addEventListener('touchend', endDrag)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('mousemove', onDrag)
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
window.removeEventListener('touchmove', onDrag)
|
||||
window.removeEventListener('touchend', endDrag)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes loading {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
|
||||
@ -646,7 +646,9 @@
|
||||
"submit": "提交",
|
||||
"cancel": "取消",
|
||||
"pleaseInput": "请输入",
|
||||
"pleaseSelect": "请选择"
|
||||
"pleaseSelect": "请选择",
|
||||
"verifySuccess": "验证成功",
|
||||
"verifyFailed": "验证失败"
|
||||
},
|
||||
"upload": {
|
||||
"text": "点击上传",
|
||||
|
||||
@ -38,8 +38,7 @@
|
||||
"vue-demi": "^0.14.10",
|
||||
"vue-pdf-embed": "^2.1.2",
|
||||
"vue-router": "^4.5.0",
|
||||
"vue-signature-pad": "^3.0.2",
|
||||
"vue3-puzzle-vcode": "1.1.6-nuxt"
|
||||
"vue-signature-pad": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.2.5",
|
||||
|
||||
@ -77,9 +77,6 @@ importers:
|
||||
vue-signature-pad:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2(vue@3.5.13(typescript@5.7.3))
|
||||
vue3-puzzle-vcode:
|
||||
specifier: 1.1.6-nuxt
|
||||
version: 1.1.6-nuxt
|
||||
devDependencies:
|
||||
'@iconify-json/carbon':
|
||||
specifier: ^1.2.5
|
||||
@ -4621,9 +4618,6 @@ packages:
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
|
||||
vue3-puzzle-vcode@1.1.6-nuxt:
|
||||
resolution: {integrity: sha512-V3DrPIYznxko8jBAtZtmsNPw9QmkPnFicQ0p9B192vC3ncRv4IDazhLC7D/cY/OGq0OeqXmk2DiOcBR7dyt8GQ==}
|
||||
|
||||
vue@3.5.13:
|
||||
resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
|
||||
peerDependencies:
|
||||
@ -9902,8 +9896,6 @@ snapshots:
|
||||
signature_pad: 3.0.0-beta.4
|
||||
vue: 3.5.13(typescript@5.7.3)
|
||||
|
||||
vue3-puzzle-vcode@1.1.6-nuxt: {}
|
||||
|
||||
vue@3.5.13(typescript@5.7.3):
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.5.13
|
||||
|
||||
Loading…
Reference in New Issue
Block a user