From a19de9187a3c301eb7bda8427d4179880dfa51f2 Mon Sep 17 00:00:00 2001
From: hayu <1604366271@qq.com>
Date: Thu, 31 Jul 2025 17:57:04 +0800
Subject: [PATCH] ocr

---
 src/pages/devicesSearch/ocrSearch.nvue | 689 +++++++++++++++++++------
 1 file changed, 525 insertions(+), 164 deletions(-)

diff --git a/src/pages/devicesSearch/ocrSearch.nvue b/src/pages/devicesSearch/ocrSearch.nvue
index 55e79f6..54982e2 100644
--- a/src/pages/devicesSearch/ocrSearch.nvue
+++ b/src/pages/devicesSearch/ocrSearch.nvue
@@ -75,36 +75,65 @@
         </uni-forms>
       </view>
     </view>
+
     <!-- 相机预览页面 -->
     <view v-if="showCamera" class="camera-container">
-      <!-- 相机预览容器 -->
-      <view class="camera-preview-container" id="cameraPreview"></view>
+      <!-- 遮罩层，中间透明 -->
+      <view class="camera-overlay">
+        <!-- 顶部遮罩 -->
+        <view class="overlay-top"></view>
+        <!-- 中间行：左遮罩 + 透明区域 + 右遮罩 -->
+        <view class="overlay-middle">
+          <view class="overlay-left"></view>
+          <view class="overlay-transparent"></view>
+          <view class="overlay-right"></view>
+        </view>
+        <!-- 底部遮罩 -->
+        <view class="overlay-bottom"></view>
+      </view>
 
       <!-- 顶部提示 -->
       <view class="top-tip">
         <text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
       </view>
+
+      <!-- 聚焦状态提示 -->
+      <view v-if="isFocusing" class="focus-tip">
+        <text class="focus-text">正在聚焦...</text>
+      </view>
+
       <!-- 取景框 -->
       <view class="viewfinder-container">
-        <view class="viewfinder">
+        <view class="viewfinder" @click="handleTapToFocus">
+          <!-- 四个角的装饰 -->
           <view class="corner corner-top-left"></view>
           <view class="corner corner-top-right"></view>
           <view class="corner corner-bottom-left"></view>
           <view class="corner corner-bottom-right"></view>
+
+          <!-- 扫描线动画 -->
+          <view class="scan-line"></view>
+
+          <!-- 聚焦指示器 -->
+          <view v-if="showFocusIndicator" class="focus-indicator" :style="focusIndicatorStyle">
+            <view class="focus-ring" :class="{ 'focusing': isFocusing, 'focused': focusSuccess }"></view>
+          </view>
         </view>
       </view>
+
       <!-- 底部控制区 -->
       <view class="bottom-controls">
         <view class="control-btn" @click="closeCamera">
           <text class="control-icon">✕</text>
         </view>
-        <view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking }">
+        <view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
           <view class="photo-btn-inner"></view>
         </view>
         <view class="control-btn" @click="openGallery">
           <text class="control-icon">📷</text>
         </view>
       </view>
+
       <!-- 加载提示 -->
       <view v-if="isProcessing" class="loading-overlay">
         <view class="loading-content">
@@ -113,10 +142,17 @@
         </view>
       </view>
     </view>
+
+    <!-- 隐藏的canvas用于图片处理 -->
+    <canvas
+        canvas-id="imageCanvas"
+        style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
+    ></canvas>
   </view>
 </template>
 
 <script>
+import ImageUtils from "../../services/utils/imageUtils";
 
 export default {
   data() {
@@ -135,7 +171,14 @@ export default {
       cameraReady: false,
       deviceReadyTimeout: null,
       pluginCheckRetries: 0,
-      maxRetries: 10
+      maxRetries: 10,
+      // 聚焦相关状态
+      isFocusing: false,
+      focusSuccess: false,
+      showFocusIndicator: false,
+      focusIndicatorStyle: {},
+      autoFocusEnabled: true,
+      focusTimeout: null
     }
   },
   onShow() {
@@ -152,21 +195,17 @@ export default {
     initializeCordova() {
       console.log('开始初始化Cordova...');
       this.pluginCheckRetries = 0;
-
       // 清除之前的超时
       if (this.deviceReadyTimeout) {
         clearTimeout(this.deviceReadyTimeout);
       }
-
       // 如果Cordova已经准备好，直接检查插件
       if (this.isCordovaReady()) {
         this.onDeviceReady();
         return;
       }
-
       // 监听deviceready事件
       document.addEventListener('deviceready', this.onDeviceReady, false);
-
       // 设置超时，防止无限等待
       this.deviceReadyTimeout = setTimeout(() => {
         console.warn('Cordova初始化超时，尝试直接检查插件');
@@ -185,16 +224,13 @@ export default {
     // 设备准备就绪
     onDeviceReady() {
       console.log('Cordova设备准备就绪');
-
       // 清除超时
       if (this.deviceReadyTimeout) {
         clearTimeout(this.deviceReadyTimeout);
         this.deviceReadyTimeout = null;
       }
-
       // 移除事件监听器，避免重复调用
       document.removeEventListener('deviceready', this.onDeviceReady);
-
       // 检查相机插件
       this.checkCameraPlugin();
     },
@@ -202,18 +238,14 @@ export default {
     // 检查相机插件 - 改进版本
     checkCameraPlugin() {
       console.log(`检查相机插件... (尝试 ${this.pluginCheckRetries + 1}/${this.maxRetries})`);
-
       // 按优先级检查插件可用性
       const pluginAvailable = this.getCameraPlugin();
-
       if (pluginAvailable) {
         console.log('相机插件可用:', pluginAvailable);
         this.cameraReady = true;
         return;
       }
-
       this.pluginCheckRetries++;
-
       if (this.pluginCheckRetries < this.maxRetries) {
         // 递增延迟重试
         const delay = Math.min(1000 * this.pluginCheckRetries, 5000);
@@ -241,7 +273,6 @@ export default {
         () => window.plugins?.CameraPreview,
         () => cordova?.plugins?.CameraPreview
       ];
-
       for (let getPlugin of possiblePaths) {
         try {
           const plugin = getPlugin();
@@ -253,18 +284,15 @@ export default {
           // 忽略访问错误，继续尝试下一个路径
         }
       }
-
       return null;
     },
 
     // 打开相机 - 改进版本
     async openCamera() {
       console.log('尝试打开相机...');
-
       if (!this.cameraReady) {
         // 再次尝试检查插件
         this.checkCameraPlugin();
-
         if (!this.cameraReady) {
           uni.showModal({
             title: '提示',
@@ -274,17 +302,13 @@ export default {
           return;
         }
       }
-
       try {
         // 显示相机界面
         this.showCamera = true;
-
         // 等待UI更新
         await this.$nextTick();
-
         // 初始化相机
         await this.initCamera();
-
       } catch (error) {
         console.error('打开相机失败:', error);
         this.showCamera = false;
@@ -296,79 +320,200 @@ export default {
       }
     },
 
-    // 初始化相机 - 改进版本
+    // 初始化相机 - 改进版本，添加聚焦支持
     async initCamera() {
       return new Promise((resolve, reject) => {
+        console.log('初始化相机预览...');
         const CameraPreview = this.getCameraPlugin();
         if (!CameraPreview) {
           reject(new Error('相机插件不可用'));
           return;
         }
 
-        // 使用setTimeout确保DOM更新完成
-        setTimeout(() => {
-          const query = uni.createSelectorQuery().in(this);
-          query.select('.camera-preview-container').boundingClientRect(data => {
-            if (!data) {
-              reject(new Error('无法获取相机容器尺寸'));
-              return;
+        // 获取屏幕尺寸
+        const screenWidth = uni.getSystemInfoSync().screenWidth;
+        const screenHeight = uni.getSystemInfoSync().screenHeight;
+        const options = {
+          x: 0,
+          y: 0,
+          width: window.innerWidth || 375,
+          height: window.innerHeight || 667,
+          camera: CameraPreview.CAMERA_DIRECTION?.BACK || 'back',
+          tapPhoto: false,
+          previewDrag: false,
+          toBack: true,  // 设置为 true，让相机显示在背景
+          alpha: 1,
+          tapFocus: true,  // 启用点击聚焦
+          disableExifHeaderStripping: false
+        };
+
+        console.log('相机配置:', options);
+        CameraPreview.startCamera(
+            options,
+            (result) => {
+              console.log('相机启动成功:', result);
+              this.cameraStarted = true;
+              // 启动后进行一次自动聚焦
+              this.performAutoFocus();
+              resolve();
+            },
+            (error) => {
+              console.error('相机启动失败:', error);
+              this.cameraStarted = false;
+              reject(new Error(`相机启动失败: ${error}`));
             }
-
-            // 计算实际像素值（某些平台需要px而非rpx）
-            const pixelRatio = uni.getSystemInfoSync().pixelRatio || 1;
-            const width = data.width * pixelRatio;
-            const height = data.height * pixelRatio;
-
-            const options = {
-              x: data.left,
-              y: data.top,
-              width: data.width,
-              height: data.height,
-              camera: CameraPreview.CAMERA_DIRECTION?.BACK || 'back',
-              tapPhoto: false,
-              previewDrag: false,
-              toBack: true,
-              alpha: 1,
-              tapFocus: true
-            };
-
-            console.log('相机配置:', options);
-
-            // 先停止已有相机（如果有）
-            CameraPreview.stopCamera(() => {
-              // 启动新相机
-              CameraPreview.startCamera(
-                  options,
-                  () => {
-                    console.log('相机启动成功');
-                    this.cameraStarted = true;
-                    resolve();
-                  },
-                  (error) => {
-                    console.error('相机启动失败:', error);
-                    reject(new Error('相机启动失败'));
-                  }
-              );
-            }, () => {
-              // 即使停止失败也继续启动
-              CameraPreview.startCamera(
-                  options,
-                  () => {
-                    console.log('相机启动成功');
-                    this.cameraStarted = true;
-                    resolve();
-                  },
-                  (error) => {
-                    console.error('相机启动失败:', error);
-                    reject(new Error('相机启动失败'));
-                  }
-              );
-            });
-          }).exec();
-        }, 300); // 适当延迟确保DOM更新
+        );
       });
     },
 
+    // 执行自动聚焦
+    async performAutoFocus() {
+      if (!this.cameraStarted || !this.autoFocusEnabled) {
+        return;
+      }
+
+      const CameraPreview = this.getCameraPlugin();
+      if (!CameraPreview || typeof CameraPreview.setFocus !== 'function') {
+        console.log('相机插件不支持聚焦功能');
+        return;
+      }
+
+      try {
+        this.isFocusing = true;
+        this.focusSuccess = false;
+
+        // 清除之前的聚焦超时
+        if (this.focusTimeout) {
+          clearTimeout(this.focusTimeout);
+        }
+
+        console.log('开始自动聚焦...');
+
+        await new Promise((resolve, reject) => {
+          // 设置聚焦超时
+          this.focusTimeout = setTimeout(() => {
+            console.log('聚焦超时');
+            this.isFocusing = false;
+            resolve();
+          }, 3000);
+
+          CameraPreview.setFocus(
+              (result) => {
+                console.log('自动聚焦成功:', result);
+                if (this.focusTimeout) {
+                  clearTimeout(this.focusTimeout);
+                  this.focusTimeout = null;
+                }
+                this.isFocusing = false;
+                this.focusSuccess = true;
+                // 显示聚焦成功状态一段时间
+                setTimeout(() => {
+                  this.focusSuccess = false;
+                }, 1000);
+                resolve();
+              },
+              (error) => {
+                console.error('自动聚焦失败:', error);
+                if (this.focusTimeout) {
+                  clearTimeout(this.focusTimeout);
+                  this.focusTimeout = null;
+                }
+                this.isFocusing = false;
+                resolve(); // 即使聚焦失败也继续
+              }
+          );
+        });
+      } catch (error) {
+        console.error('聚焦过程出错:', error);
+        this.isFocusing = false;
+      }
+    },
+
+    // 处理点击聚焦
+    async handleTapToFocus(event) {
+      if (!this.cameraStarted || this.isFocusing) {
+        return;
+      }
+
+      const CameraPreview = this.getCameraPlugin();
+      if (!CameraPreview || typeof CameraPreview.tapToFocus !== 'function') {
+        console.log('相机插件不支持点击聚焦功能');
+        return;
+      }
+
+      try {
+        // 获取点击位置
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.detail.x - rect.left;
+        const y = event.detail.y - rect.top;
+
+        // 转换为相对坐标 (0-1)
+        const relativeX = x / rect.width;
+        const relativeY = y / rect.height;
+
+        console.log('点击聚焦位置:', { x: relativeX, y: relativeY });
+
+        // 显示聚焦指示器
+        this.showFocusIndicator = true;
+        this.focusIndicatorStyle = {
+          left: `${x - 30}rpx`,
+          top: `${y - 30}rpx`
+        };
+
+        this.isFocusing = true;
+        this.focusSuccess = false;
+
+        // 清除之前的聚焦超时
+        if (this.focusTimeout) {
+          clearTimeout(this.focusTimeout);
+        }
+
+        await new Promise((resolve, reject) => {
+          // 设置聚焦超时
+          this.focusTimeout = setTimeout(() => {
+            console.log('点击聚焦超时');
+            this.isFocusing = false;
+            this.showFocusIndicator = false;
+            resolve();
+          }, 3000);
+
+          CameraPreview.tapToFocus(
+              relativeX,
+              relativeY,
+              (result) => {
+                console.log('点击聚焦成功:', result);
+                if (this.focusTimeout) {
+                  clearTimeout(this.focusTimeout);
+                  this.focusTimeout = null;
+                }
+                this.isFocusing = false;
+                this.focusSuccess = true;
+                // 显示聚焦成功状态
+                setTimeout(() => {
+                  this.focusSuccess = false;
+                  this.showFocusIndicator = false;
+                }, 1000);
+                resolve();
+              },
+              (error) => {
+                console.error('点击聚焦失败:', error);
+                if (this.focusTimeout) {
+                  clearTimeout(this.focusTimeout);
+                  this.focusTimeout = null;
+                }
+                this.isFocusing = false;
+                this.showFocusIndicator = false;
+                resolve(); // 即使聚焦失败也继续
+              }
+          );
+        });
+      } catch (error) {
+        console.error('点击聚焦过程出错:', error);
+        this.isFocusing = false;
+        this.showFocusIndicator = false;
+      }
+    },
+
     // 关闭相机
     async closeCamera() {
       console.log('关闭相机...');
@@ -379,6 +524,18 @@ export default {
       } finally {
         this.showCamera = false;
         this.cameraStarted = false;
+        this.resetFocusState();
+      }
+    },
+
+    // 重置聚焦状态
+    resetFocusState() {
+      this.isFocusing = false;
+      this.focusSuccess = false;
+      this.showFocusIndicator = false;
+      if (this.focusTimeout) {
+        clearTimeout(this.focusTimeout);
+        this.focusTimeout = null;
       }
     },
 
@@ -387,55 +544,40 @@ export default {
       if (!this.cameraStarted) {
         return Promise.resolve();
       }
-
       const CameraPreview = this.getCameraPlugin();
       if (!CameraPreview) {
         return Promise.resolve();
       }
-
       return new Promise((resolve) => {
-        // 先隐藏相机预览
-        CameraPreview.hideCamera(() => {
-          console.log('相机已隐藏');
-          // 然后停止相机
-          CameraPreview.stopCamera(
-              () => {
-                console.log('相机已停止');
-                this.cameraStarted = false;
-                resolve();
-              },
-              (error) => {
-                console.error('停止相机失败:', error);
-                this.cameraStarted = false;
-                resolve();
-              }
-          );
-        }, (error) => {
-          console.error('隐藏相机失败:', error);
-          // 即使隐藏失败也继续停止
-          CameraPreview.stopCamera(
-              () => {
-                console.log('相机已停止');
-                this.cameraStarted = false;
-                resolve();
-              },
-              (error) => {
-                console.error('停止相机失败:', error);
-                this.cameraStarted = false;
-                resolve();
-              }
-          );
-        });
+        CameraPreview.stopCamera(
+            () => {
+              console.log('相机已停止');
+              this.cameraStarted = false;
+              resolve();
+            },
+            (error) => {
+              console.error('停止相机失败:', error);
+              this.cameraStarted = false;
+              resolve(); // 即使失败也继续
+            }
+        );
       });
     },
 
-    // 拍照
+    // 拍照 - 添加聚焦逻辑
     async takePicture() {
-      if (!this.cameraStarted || this.isTaking) {
+      if (!this.cameraStarted || this.isTaking || this.isFocusing) {
+        if (this.isFocusing) {
+          uni.showToast({
+            title: '正在聚焦，请稍候...',
+            icon: 'none',
+            duration: 1000
+          });
+        }
         return;
       }
 
-      console.log('开始拍照...');
+      console.log('开始拍照流程...');
       this.isTaking = true;
 
       try {
@@ -444,6 +586,11 @@ export default {
           throw new Error('相机插件不可用');
         }
 
+        // 拍照前先进行聚焦
+        console.log('拍照前聚焦...');
+        await this.performFocusBeforeCapture();
+
+        console.log('开始拍照...');
         const imageData = await new Promise((resolve, reject) => {
           const options = {
             quality: 85,
@@ -465,7 +612,6 @@ export default {
         });
 
         await this.processImage(imageData);
-
       } catch (error) {
         console.error('拍照过程出错:', error);
         uni.showToast({
@@ -477,17 +623,69 @@ export default {
       }
     },
 
-    // 处理图片
+    // 拍照前聚焦
+    async performFocusBeforeCapture() {
+      const CameraPreview = this.getCameraPlugin();
+      if (!CameraPreview || typeof CameraPreview.setFocus !== 'function') {
+        console.log('相机插件不支持聚焦，直接拍照');
+        return;
+      }
+
+      try {
+        this.isFocusing = true;
+
+        console.log('拍照前执行聚焦...');
+
+        await new Promise((resolve, reject) => {
+          // 设置聚焦超时
+          const focusTimeout = setTimeout(() => {
+            console.log('拍照前聚焦超时，继续拍照');
+            this.isFocusing = false;
+            resolve();
+          }, 2000); // 拍照前聚焦时间稍短
+
+          CameraPreview.setFocus(
+              (result) => {
+                console.log('拍照前聚焦成功:', result);
+                clearTimeout(focusTimeout);
+                this.isFocusing = false;
+                // 聚焦成功后稍等一下再拍照，确保聚焦稳定
+                setTimeout(resolve, 200);
+              },
+              (error) => {
+                console.error('拍照前聚焦失败:', error);
+                clearTimeout(focusTimeout);
+                this.isFocusing = false;
+                resolve(); // 即使聚焦失败也继续拍照
+              }
+          );
+        });
+      } catch (error) {
+        console.error('拍照前聚焦过程出错:', error);
+        this.isFocusing = false;
+      }
+    },
+
+    // 处理图片 - 使用ImageUtils
     async processImage(imageData) {
       this.isProcessing = true;
       try {
-        console.log('开始OCR识别...');
+        console.log('开始处理图片...');
+        // 使用ImageUtils处理图片
+        const processedBase64 = await ImageUtils.processImage(imageData, {
+          maxWidth: 1024,
+          maxHeight: 1024,
+          quality: 50,
+          outputFormat: 'base64'
+        });
+
+        console.log('图片处理完成，开始OCR识别...');
         const response = await new Promise((resolve, reject) => {
           uni.request({
             url: '/material/app/ocr/getOcrCode',
             method: 'POST',
             data: {
-              image: imageData,
+              image: processedBase64,
               jiju_type: '',
               auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4='
             },
@@ -512,7 +710,7 @@ export default {
           });
         }
       } catch (error) {
-        console.error('OCR识别失败:', error);
+        console.error('图片处理或OCR识别失败:', error);
         uni.showToast({
           title: '识别失败，请重试',
           icon: 'none'
@@ -542,22 +740,58 @@ export default {
       });
     },
 
-    // 将图片转换为base64
-    convertImageToBase64(filePath) {
-      // #ifdef APP-PLUS
-      plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
-        entry.file((file) => {
-          const reader = new plus.io.FileReader();
-          reader.onloadend = (e) => {
-            this.processImage(e.target.result);
-          };
-          reader.readAsDataURL(file);
+    // 将图片转换为base64 - 使用ImageUtils处理
+    async convertImageToBase64(filePath) {
+      this.isProcessing = true;
+      try {
+        console.log('开始处理相册图片...');
+        // 使用ImageUtils处理相册图片
+        const processedBase64 = await ImageUtils.processImage(filePath, {
+          maxWidth: 1024,
+          maxHeight: 1024,
+          quality: 50,
+          outputFormat: 'base64'
         });
-      });
-      // #endif
-      // #ifndef APP-PLUS
-      this.processImage(filePath);
-      // #endif
+
+        console.log('相册图片处理完成，开始OCR识别...');
+        const response = await new Promise((resolve, reject) => {
+          uni.request({
+            url: '/material/app/ocr/getOcrCode',
+            method: 'POST',
+            data: {
+              image: processedBase64,
+              jiju_type: '',
+              auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4='
+            },
+            timeout: 30000,
+            success: resolve,
+            fail: reject
+          });
+        });
+
+        if (response.data?.data?.result) {
+          this.queryCodeParams.maCode = response.data.data.result;
+          await this.closeCamera();
+          this.getCode();
+          uni.showToast({
+            title: '识别成功',
+            icon: 'success'
+          });
+        } else {
+          uni.showToast({
+            title: '未识别到有效编码',
+            icon: 'none'
+          });
+        }
+      } catch (error) {
+        console.error('相册图片处理或OCR识别失败:', error);
+        uni.showToast({
+          title: '识别失败，请重试',
+          icon: 'none'
+        });
+      } finally {
+        this.isProcessing = false;
+      }
     },
 
     // 编码检索
@@ -569,7 +803,6 @@ export default {
         });
         return;
       }
-
       try {
         const response = await new Promise((resolve, reject) => {
           uni.request({
@@ -586,7 +819,6 @@ export default {
             value: option.maId,
             text: option.maCode
           }));
-
           if (response.data.data.length === 1) {
             this.codeData = response.data.data[0];
           }
@@ -608,7 +840,6 @@ export default {
     // 标签改变
     async changeTag() {
       if (!this.queryCodeParams.maId) return;
-
       try {
         const response = await new Promise((resolve, reject) => {
           uni.request({
@@ -640,39 +871,29 @@ export default {
     // 清理资源
     cleanup() {
       console.log('清理资源...');
-
       // 清除超时
       if (this.deviceReadyTimeout) {
         clearTimeout(this.deviceReadyTimeout);
         this.deviceReadyTimeout = null;
       }
-
+      if (this.focusTimeout) {
+        clearTimeout(this.focusTimeout);
+        this.focusTimeout = null;
+      }
       // 移除事件监听
       document.removeEventListener('deviceready', this.onDeviceReady);
-
       // 停止相机
       if (this.cameraStarted) {
         this.stopCamera().catch(console.error);
       }
+      // 重置聚焦状态
+      this.resetFocusState();
     }
   }
 }
 </script>
 
 <style>
-.camera-preview-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1; /* 低于其他UI元素 */
-}
-
-/* 确保其他UI元素的z-index高于相机预览 */
-.top-tip, .viewfinder-container, .bottom-controls {
-  z-index: 10;
-}
 .page-container {
   display: flex;
   height: auto;
@@ -719,8 +940,54 @@ export default {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 0.8); /* 添加半透明背景 */
-  z-index: 99999; /* 提高 z-index */
+  background-color: transparent; /* 改为透明，让相机预览显示 */
+  z-index: 99999;
+}
+
+/* 遮罩层样式 */
+.camera-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.overlay-top {
+  width: 100%;
+  height: calc(50% - 300rpx); /* 取景框上方的遮罩 */
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.overlay-middle {
+  display: flex;
+  width: 100%;
+  height: 600rpx; /* 取景框的高度 */
+}
+
+.overlay-left {
+  width: calc(50% - 250rpx); /* 取景框左侧的遮罩 */
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.overlay-transparent {
+  width: 500rpx; /* 取景框的宽度 */
+  height: 100%;
+  background-color: transparent; /* 透明区域，显示相机预览 */
+}
+
+.overlay-right {
+  width: calc(50% - 250rpx); /* 取景框右侧的遮罩 */
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.overlay-bottom {
+  width: 100%;
+  height: calc(50% - 300rpx); /* 取景框下方的遮罩 */
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .top-tip {
@@ -742,6 +1009,25 @@ export default {
   border-radius: 10rpx;
 }
 
+/* 聚焦状态提示 */
+.focus-tip {
+  position: absolute;
+  top: 160rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  text-align: center;
+}
+
+.focus-text {
+  background-color: rgba(75, 142, 255, 0.9);
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: bold;
+  padding: 15rpx 25rpx;
+  border-radius: 8rpx;
+}
+
 .viewfinder-container {
   position: absolute;
   top: 50%;
@@ -754,15 +1040,43 @@ export default {
   position: relative;
   width: 500rpx;
   height: 600rpx;
-  border: 4rpx solid rgba(255, 255, 255, 0.5);
+  background-color: transparent; /* 透明背景 */
+  border: none; /* 移除边框 */
   border-radius: 20rpx;
 }
 
+/* 扫描线动画 */
+.scan-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4rpx;
+  background: linear-gradient(90deg, transparent, #4b8eff, transparent);
+  animation: scan 2s linear infinite;
+  border-radius: 2rpx;
+}
+
+@keyframes scan {
+  0% {
+    top: 0;
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    top: calc(100% - 4rpx);
+    opacity: 0;
+  }
+}
+
 .corner {
   position: absolute;
   width: 60rpx;
   height: 60rpx;
   border: 6rpx solid #4b8eff;
+  background-color: transparent;
 }
 
 .corner-top-left {
@@ -797,6 +1111,44 @@ export default {
   border-bottom-right-radius: 20rpx;
 }
 
+/* 聚焦指示器 */
+.focus-indicator {
+  position: absolute;
+  width: 60rpx;
+  height: 60rpx;
+  z-index: 15;
+}
+
+.focus-ring {
+  width: 100%;
+  height: 100%;
+  border: 3rpx solid #4b8eff;
+  border-radius: 50%;
+  background-color: transparent;
+  transition: all 0.3s ease;
+}
+
+.focus-ring.focusing {
+  border-color: #ff9500;
+  animation: focusPulse 1s ease-in-out infinite;
+}
+
+.focus-ring.focused {
+  border-color: #00ff00;
+  transform: scale(1.2);
+}
+
+@keyframes focusPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 0.7;
+  }
+}
+
 .bottom-controls {
   position: absolute;
   bottom: 100rpx;
@@ -844,6 +1196,11 @@ export default {
   background-color: rgba(75, 142, 255, 0.8);
 }
 
+.photo-btn.disabled {
+  opacity: 0.5;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .photo-btn-inner {
   width: 100rpx;
   height: 100rpx;
@@ -856,6 +1213,10 @@ export default {
   background-color: #4b8eff;
 }
 
+.photo-btn.disabled .photo-btn-inner {
+  background-color: #ccc;
+}
+
 .loading-overlay {
   position: absolute;
   top: 0;