build(dependencies): 移除 vue3-puzzle-vcode 依赖

- 从 package.json 和 pnpm-lock.yaml 中移除了 vue3-puzzle-vcode
- 在 zh-CN.json 中添加了验证成功和失败的提示信息

app/components/puzzleComponent/index.vue

@@ -1,3 +1,111 @@
+
+  
+  <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); }

i18n/locales/zh-CN.json

@@ -646,7 +646,9 @@
       "submit": "提交",
       "cancel": "取消",
       "pleaseInput": "请输入",
-      "pleaseSelect": "请选择"
+      "pleaseSelect": "请选择",
+      "verifySuccess": "验证成功",
+      "verifyFailed": "验证失败"
     },
     "upload": {
       "text": "点击上传",

package.json

@@ -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",
+    "vue-signature-pad": "^3.0.2"
-    "vue3-puzzle-vcode": "1.1.6-nuxt"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.5",

pnpm-lock.yaml

@@ -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