perf: 摄像头扫码重构——动态 qrbox 聚焦框、720p、CODE_128/QR 白名单，提升平板扫码体验

inventory-web/src/components/QrScanner/index.vue

@@ -99,19 +99,21 @@ const startScanning = async () => {
     })
 
     const config = {
-      fps: 20,
+      fps: 15, // 15帧足够，给平板留出运算余地
       disableFlip: false,
+      // 动态计算的扫描框：屏幕宽度的 70%、高度的 40%（上限 800×400），扁长方形适配 CODE_128
+      qrbox: (viewfinderWidth: number, viewfinderHeight: number) => {
+        const boxWidth = Math.min(viewfinderWidth * 0.7, 800)
+        const boxHeight = Math.min(viewfinderHeight * 0.4, 400)
+        return { width: boxWidth, height: boxHeight }
+      },
       videoConstraints: {
         facingMode: "environment",
-        // ★★★ 核心修改：设置为 2K (QHD) 分辨率 ★★★
+        // 降级到 720p，保障高帧率和清晰度
-        // min: 1280x720 (保证低端机能启动)
+        width: { ideal: 1280 },
-        // ideal: 2560x1440 (2K QHD，清晰度与性能的平衡点)
+        height: { ideal: 720 },
-        width: { min: 1280, ideal: 2560, max: 3840 },
+        // 依赖设备原生自动对焦，去掉强行 zoom
-        height: { min: 720, ideal: 1440, max: 2160 },
+        focusMode: "continuous"
-        // 16:9 的比例
-        aspectRatio: { ideal: 1.7777777778 },
-        focusMode: "continuous",
-        advanced: [{ focusMode: "macro" }, { zoom: 2.0 }]
       }
     }
 

inventory-web/src/components/SmartScannerDialog.vue

@@ -70,7 +70,7 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick, onUnmounted } from 'vue'
-import { Html5Qrcode } from 'html5-qrcode'
+import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode'
 
 interface Props {
   modelValue: boolean
@@ -119,14 +119,25 @@ const startScanner = async () => {
   if (!qrReaderRef.value) return
 
   try {
-    html5QrCode = new Html5Qrcode('qr-reader')
+    html5QrCode = new Html5Qrcode('qr-reader', {
+      // 只识别 CODE_128 / QR_CODE，避免每帧解码二十几种格式浪费性能
+      formatsToSupport: [
+        Html5QrcodeSupportedFormats.CODE_128,
+        Html5QrcodeSupportedFormats.QR_CODE
+      ],
+      verbose: false
+    })
 
     await html5QrCode.start(
         { facingMode: 'environment' },
         {
-          fps: 10,
+          fps: 15,
-          qrbox: { width: 250, height: 250 },
+          // 动态扫码框：宽80%高50%（上限600×350），去掉强制 aspectRatio 防画面畸变
-          aspectRatio: 1.0
+          qrbox: (viewfinderWidth: number, viewfinderHeight: number) => {
+            const boxWidth = Math.min(viewfinderWidth * 0.8, 600)
+            const boxHeight = Math.min(viewfinderHeight * 0.5, 350)
+            return { width: boxWidth, height: boxHeight }
+          }
         },
         (decodedText) => {
           // 扫码成功