From fd55b7adfe04217314555df135928e256896ad28 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Mon, 7 Sep 2026 15:53:11 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=91=84=E5=83=8F=E5=A4=B4=E6=89=AB?=
 =?UTF-8?q?=E7=A0=81=E9=87=8D=E6=9E=84=E2=80=94=E2=80=94=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=20qrbox=20=E8=81=9A=E7=84=A6=E6=A1=86=E3=80=81720p=E3=80=81COD?=
 =?UTF-8?q?E=5F128/QR=20=E7=99=BD=E5=90=8D=E5=8D=95=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E5=B9=B3=E6=9D=BF=E6=89=AB=E7=A0=81=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/QrScanner/index.vue        | 22 ++++++++++---------
 .../src/components/SmartScannerDialog.vue     | 21 +++++++++++++-----
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/inventory-web/src/components/QrScanner/index.vue b/inventory-web/src/components/QrScanner/index.vue
index 0f8b633..96e12de 100644
--- a/inventory-web/src/components/QrScanner/index.vue
+++ b/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) 分辨率 ★★★
-        // min: 1280x720 (保证低端机能启动)
-        // ideal: 2560x1440 (2K QHD，清晰度与性能的平衡点)
-        width: { min: 1280, ideal: 2560, max: 3840 },
-        height: { min: 720, ideal: 1440, max: 2160 },
-        // 16:9 的比例
-        aspectRatio: { ideal: 1.7777777778 },
-        focusMode: "continuous",
-        advanced: [{ focusMode: "macro" }, { zoom: 2.0 }]
+        // 降级到 720p，保障高帧率和清晰度
+        width: { ideal: 1280 },
+        height: { ideal: 720 },
+        // 依赖设备原生自动对焦，去掉强行 zoom
+        focusMode: "continuous"
       }
     }
 
diff --git a/inventory-web/src/components/SmartScannerDialog.vue b/inventory-web/src/components/SmartScannerDialog.vue
index 34df529..c357869 100644
--- a/inventory-web/src/components/SmartScannerDialog.vue
+++ b/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,
-          qrbox: { width: 250, height: 250 },
-          aspectRatio: 1.0
+          fps: 15,
+          // 动态扫码框：宽80%高50%（上限600×350），去掉强制 aspectRatio 防画面畸变
+          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) => {
           // 扫码成功