vconsole添加

app/components/SignaturePad.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="signature-pad-container">
+      <canvas 
+        ref="canvasRef"
+        class="signature-pad"
+        :style="{
+        width: '100%',
+        height: '100%',
+          backgroundColor: '#fff',
+          border: '1px solid #e5e5e5',
+          borderRadius: '4px'
+        }"
+        @touchstart="handleStart"
+        @touchmove="handleMove"
+        @touchend="handleEnd"
+        @mousedown="handleStart"
+        @mousemove="handleMove"
+        @mouseup="handleEnd"
+        @mouseleave="handleEnd"
+      ></canvas>
+      <div class="signature-controls">
+        <van-button 
+          type="default" 
+          size="small" 
+          @click="clearCanvas"
+        >清除</van-button>
+        <van-button 
+          type="primary" 
+          size="small" 
+          @click="handleConfirm"
+        >确认</van-button>
+      </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const canvasRef = ref(null)
+const ctx = ref(null)
+const isDrawing = ref(false)
+const lastX = ref(0)
+const lastY = ref(0)
+const LINE_WIDTH = 2 // 固定画笔粗细
+
+// 初始化画布
+const initCanvas = () => {
+  const canvas = canvasRef.value
+  const dpr = window.devicePixelRatio || 1
+  const rect = canvas.getBoundingClientRect()
+  
+  // 设置画布的实际大小
+  canvas.width = rect.width * dpr
+  canvas.height = rect.height * dpr
+  
+  ctx.value = canvas.getContext('2d')
+  
+  // 缩放画布以匹配设备像素比
+    ctx.value.scale(dpr, dpr)
+  ctx.value.lineCap = 'round'
+  ctx.value.lineJoin = 'round'
+  ctx.value.strokeStyle = '#000'
+  ctx.value.lineWidth = LINE_WIDTH
+}
+
+// 开始绘制
+const handleStart = (e) => {
+  e.preventDefault() // 防止页面滚动
+  isDrawing.value = true
+  const point = getPoint(e)
+  lastX.value = point.x
+  lastY.value = point.y
+}
+
+// 绘制中
+const handleMove = (e) => {
+  if (!isDrawing.value) return
+  e.preventDefault() // 防止页面滚动
+  
+  const point = getPoint(e)
+  ctx.value.beginPath()
+  ctx.value.moveTo(lastX.value, lastY.value)
+  ctx.value.lineTo(point.x, point.y)
+  ctx.value.stroke()
+  
+  lastX.value = point.x
+  lastY.value = point.y
+}
+
+// 结束绘制
+const handleEnd = () => {
+  isDrawing.value = false
+}
+
+// 获取触点坐标
+const getPoint = (e) => {
+  const canvas = canvasRef.value
+  const rect = canvas.getBoundingClientRect()
+  const dpr = window.devicePixelRatio || 1
+  const event = e.touches ? e.touches[0] : e
+  
+  // 计算实际的触点位置
+  const x = (event.clientX - rect.left)
+  const y = (event.clientY - rect.top)
+  
+  return {
+    x: x,
+    y: y
+  }
+}
+
+// 清除画布
+const clearCanvas = () => {
+  const canvas = canvasRef.value
+  ctx.value.clearRect(0, 0, canvas.width, canvas.height)
+  emit('update:modelValue', '')
+  emit('change', '')
+}
+
+// 确认并生成图片
+const handleConfirm = () => {
+  const canvas = canvasRef.value
+  const imageData = canvas.toDataURL('image/png')
+  emit('update:modelValue', imageData)
+  emit('change', imageData)
+}
+
+// 监听屏幕旋转
+const handleResize = () => {
+  const canvas = canvasRef.value
+  const imageData = canvas.toDataURL('image/png')
+  initCanvas()
+  // 恢复之前的内容
+  const img = new Image()
+  img.onload = () => {
+    ctx.value.drawImage(img, 0, 0, canvas.width, canvas.height)
+  }
+  img.src = imageData
+}
+
+onMounted(() => {
+  initCanvas()
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.signature-pad-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.signature-pad {
+  flex: 1;
+  touch-action: none;
+}
+
+.signature-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 8px;
+}
+</style> 

app/pages/keepalive/index.vue

@@ -1,21 +1,17 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'Keepalive',
-})
-
-definePageMeta({
-  name: 'Keepalive',
-  keepalive: true,
-  title: '🧡 KeepAlive',
-  i18n: 'menu.keepAlive',
-})
-
-const value = ref(1)
-</script>
-
 <template>
-  <div>
-    <p> {{ $t('keepalive_page.label') }} </p>
-    <van-stepper v-model="value" class="mt-10" />
+  <div  class="h-[100vh] w-[100vw]">
+    <SignaturePad v-model="signature" @change="handleSignatureChange"/>
   </div>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+import SignaturePad from '~/components/SignaturePad.vue'
+
+const signature = ref('')
+
+const handleSignatureChange = (imageData) => {
+  // imageData 是 base64 格式的图片数据
+  console.log('签名已更新:', imageData)
+}
+</script>

app/plugins/vconsole.client.ts

@@ -0,0 +1,8 @@
+import VConsole from 'vconsole'
+
+export default defineNuxtPlugin(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    const vConsole = new VConsole()
+    console.log('VConsole is enabled')
+  }
+}) 

package.json

@@ -26,6 +26,7 @@
     "nuxt": "^3.15.0",
     "pinyin": "4.0.0-alpha.2",
     "segmentit": "^2.0.3",
+    "vconsole": "^3.15.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       segmentit:
         specifier: ^2.0.3
         version: 2.0.3
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
@@ -1884,6 +1887,13 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
+  copy-text-to-clipboard@3.2.0:
+    resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
+    engines: {node: '>=12'}
+
+  core-js@3.40.0:
+    resolution: {integrity: sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -2899,6 +2909,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -3964,6 +3977,9 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
   vite-hot-client@0.2.4:
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
@@ -6272,6 +6288,10 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
+  copy-text-to-clipboard@3.2.0: {}
+
+  core-js@3.40.0: {}
+
   core-util-is@1.0.3: {}
 
   cosmiconfig@6.0.0:
@@ -7310,6 +7330,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  mutation-observer@1.0.3: {}
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -8563,6 +8585,13 @@ snapshots:
       '@vue/shared': 3.5.13
       vue: 3.5.13(typescript@5.7.2)
 
+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.26.0
+      copy-text-to-clipboard: 3.2.0
+      core-js: 3.40.0
+      mutation-observer: 1.0.3
+
   vite-hot-client@0.2.4(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)):
     dependencies:
       vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)