From dac607472fd641a549c6598233c69c5cfae482e8 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Sat, 13 Dec 2025 01:15:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E6=8E=A7=E5=88=B6=E5=92=8C=E6=8F=90=E7=A4=BA=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将音频控制按钮改为固定定位并增强悬停效果
- 重新设计提示文字样式，支持响应式和居中显示
- 添加提示文字点击事件以切换控制面板
- 设置 canvas 元素不拦截鼠标事件
- 更新提示文字内容，增强用户引导
- 增加控制面板显示状态的日志输出
---
 christmas.html | 88 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 76 insertions(+), 12 deletions(-)

diff --git a/christmas.html b/christmas.html
index 7aad23c..6fbc620 100644
--- a/christmas.html
+++ b/christmas.html
@@ -61,6 +61,7 @@
             top: 0;
             left: 0;
             z-index: 1;
+            pointer-events: none;
         }
 
         /* --- UI Layer and Permanent Title --- */
@@ -176,15 +177,54 @@
             font-family: 'Noto Sans SC', sans-serif;
         }
 
-        /* --- Audio Control (保持不变) --- */
+        /* --- Audio Control --- */
         #audio-control {
-            position: absolute; bottom: 30px; left: 30px; width: 40px; height: 40px;
-            background: rgba(20, 20, 20, 0.6); border: 1px solid rgba(252, 238, 167, 0.4);
-            border-radius: 50%; color: #fceea7;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 16px; cursor: pointer; z-index: 15; transition: all 0.3s; pointer-events: auto;
+            position: fixed;
+            bottom: 30px;
+            left: 30px;
+            width: 40px;
+            height: 40px;
+            background: rgba(20, 20, 20, 0.6);
+            border: 1px solid rgba(252, 238, 167, 0.4);
+            border-radius: 50%;
+            color: #fceea7;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            cursor: pointer;
+            z-index: 15;
+            transition: all 0.3s;
+            pointer-events: auto;
+        }
+        #audio-control:hover {
+            background: #fceea7;
+            color: #03050B;
+            transform: scale(1.1);
+        }
+
+        /* --- Controls Hint --- */
+        .controls-hint {
+            position: fixed;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 3%;
+            color: rgba(252, 238, 167, 0.7);
+            font-size: 12px;
+            z-index: 20;
+            pointer-events: auto;
+            text-align: center;
+            width: fit-content;
+            max-width: 90%;
+            padding: 6px 12px;
+            background: rgba(10, 10, 10, 0.4);
+            border-radius: 20px;
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(252, 238, 167, 0.2);
+            opacity: 0.9;
+            transition: opacity 0.3s ease;
+            cursor: pointer;
         }
-        #audio-control:hover { background: #fceea7; color: #03050B; }
 
         /* --- 响应式设计优化 (针对不同设备尺寸) --- */
 
@@ -234,8 +274,9 @@
 
             .controls-hint {
                 font-size: 10px;
-                left: 10%;
-                bottom: 3%;
+                bottom: 2%;
+                padding: 4px 10px;
+                border-radius: 15px;
             }
         }
 
@@ -265,7 +306,7 @@
 
             .controls-hint {
                 font-size: 11px;
-                left: 12%;
+                bottom: 2.5%;
             }
         }
 
@@ -297,6 +338,10 @@
             .gesture-guide ul {
                 font-size: 11px;
             }
+
+            .controls-hint {
+                font-size: 12px;
+            }
         }
 
         /* 大屏幕设备 (大于 1024px) */
@@ -316,6 +361,11 @@
                 font-size: 14px;
                 padding: 12px 30px;
             }
+
+            .controls-hint {
+                font-size: 13px;
+                bottom: 2%;
+            }
         }
 
         /* 添加手势操作说明样式 */
@@ -329,12 +379,23 @@
         /* 添加左侧提示文字样式 */
         .controls-hint {
             position: fixed;
-            left: 15%;
+            left: 50%;
+            transform: translateX(-50%);
             bottom: 3%;
             color: rgba(252, 238, 167, 0.7);
             font-size: 12px;
             z-index: 11;
             pointer-events: none;
+            text-align: center;
+            width: fit-content;
+            max-width: 90%;
+            padding: 6px 12px;
+            background: rgba(10, 10, 10, 0.4);
+            border-radius: 20px;
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(252, 238, 167, 0.2);
+            opacity: 0.9;
+            transition: opacity 0.3s ease;
         }
     </style>
 
@@ -396,7 +457,7 @@
     <span id="audio-icon">🔇</span>
 </div>
 <!-- 添加左侧提示文字 -->
-<div class="controls-hint" id="controls-hint">按 H 键/点击唤起操作台</div>
+<div class="controls-hint" id="controls-hint">按 H 键或点击屏幕唤起操作台</div>
 
 <div id="webcam-wrapper">
     <video id="webcam" autoplay playsinline style="display:none;"></video>
@@ -736,6 +797,7 @@
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
         renderer.toneMapping = THREE.ReinhardToneMapping;
         renderer.toneMappingExposure = 2.5; // 略微增加曝光，配合Bloom提升亮度
+        renderer.domElement.style.pointerEvents = 'none'; // 添加这一行，确保canvas元素不拦截事件
         container.appendChild(renderer.domElement);
 
         mainGroup = new THREE.Group();
@@ -1187,6 +1249,7 @@
         // 为提示文字添加点击事件
         if (controlsHint) {
             controlsHint.addEventListener('click', toggleControls);
+            console.log('H 键已绑定到控制台显示/隐藏');
         }
 
         // 页面加载完成后，默认隐藏控制面板
@@ -1205,6 +1268,7 @@
             controlsContainer.classList.toggle('ui-hidden');
             STATE.uiVisible = !controlsContainer.classList.contains('ui-hidden');
         }
+        console.log(`控制面板已${STATE.uiVisible ? '显示' : '隐藏'}`);
     }
 
     function animate() {