From fa9809bee1a9b18b80e518f1980227893267ab08 Mon Sep 17 00:00:00 2001 From: lww155 <756794909@qq.com> Date: Wed, 11 Feb 2026 17:41:52 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main/xiaozhi-server/test/css/test_page.css | 23 ++++++++++++++++---- main/xiaozhi-server/test/js/app.js | 3 +++ main/xiaozhi-server/test/js/ui/controller.js | 10 ++++++--- main/xiaozhi-server/test/test_page.html | 16 +++++++------- 4 files changed, 37 insertions(+), 15 deletions(-) diff --git a/main/xiaozhi-server/test/css/test_page.css b/main/xiaozhi-server/test/css/test_page.css index fb51457f..157df9a4 100644 --- a/main/xiaozhi-server/test/css/test_page.css +++ b/main/xiaozhi-server/test/css/test_page.css @@ -1280,15 +1280,30 @@ body { transform: scaleX(-1); } +.camera-switch-mask { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.camera-switch-container { + position: absolute; + bottom: 10px; + right: 10px; +} + .camera-switch { display: none; - position: fixed; - bottom: 23px; - right: 20px; - z-index: 999; + height: 20px; color: #fff; } +.camera-switch .btn-icon { + margin-bottom: 0; +} + .camera-switch.active { display: block; } diff --git a/main/xiaozhi-server/test/js/app.js b/main/xiaozhi-server/test/js/app.js index 91f60bf6..b16f539d 100644 --- a/main/xiaozhi-server/test/js/app.js +++ b/main/xiaozhi-server/test/js/app.js @@ -129,6 +129,7 @@ class App { const cameraContainer = document.getElementById('cameraContainer'); const cameraVideo = document.getElementById('cameraVideo'); const cameraSwitch = document.getElementById('cameraSwitch'); + const cameraSwitchMask = document.getElementById('cameraSwitchMask'); const dialBtn = document.getElementById('dialBtn'); if (!cameraContainer || !cameraVideo) { @@ -240,6 +241,7 @@ class App { const originalTransform = currentTransform === 'none' ? 'translate(0px, 0px)' : currentTransform; cameraContainer.style.setProperty('--original-transform', originalTransform); cameraContainer.classList.add('flip'); + if (cameraSwitchMask) cameraSwitchMask.style.opacity = 0; this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user'; window.stopCamera(); window.startCamera(); @@ -253,6 +255,7 @@ class App { window.switchCameraTimer = null; cameraContainer.classList.remove('flip'); cameraContainer.style.removeProperty('--original-transform'); + if (cameraSwitchMask) cameraSwitchMask.style.opacity = 1; }, 500); } }; diff --git a/main/xiaozhi-server/test/js/ui/controller.js b/main/xiaozhi-server/test/js/ui/controller.js index 947783a3..81265b1f 100644 --- a/main/xiaozhi-server/test/js/ui/controller.js +++ b/main/xiaozhi-server/test/js/ui/controller.js @@ -100,9 +100,13 @@ class UIController { // Camera switch button const cameraSwitch = document.getElementById('cameraSwitch'); - if (cameraSwitch) { - cameraSwitch.addEventListener('click', () => { - window.switchCamera(); + const cameraSwitchMask = document.getElementById('cameraSwitchMask'); + if (cameraSwitchMask) { + cameraSwitchMask.addEventListener('click', () => { + const isCameraActive = cameraSwitch.classList.contains('active'); + if (isCameraActive) { + window.switchCamera(); + } }) } diff --git a/main/xiaozhi-server/test/test_page.html b/main/xiaozhi-server/test/test_page.html index 7f85a127..30d68073 100644 --- a/main/xiaozhi-server/test/test_page.html +++ b/main/xiaozhi-server/test/test_page.html @@ -45,17 +45,17 @@
- -
- - - -
-
+
+
+ +
+ +
+
+