From f55891f1cde0d44862d09ceb4bf044ba38436a27 Mon Sep 17 00:00:00 2001
From: root <root@localhost.localdomain>
Date: Wed, 11 Mar 2026 21:51:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20=F0=9F=93=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 z-index: 100 确保按钮在最上层
- 增加 touchstart/touchend 事件支持
- 添加 touch-action 优化触摸操作
- 增加 -webkit-tap-highlight 去除高亮
- 添加防抖机制避免重复触发
- 支持键盘操作（无障碍）
---
 static/css/style.css | 10 +++++++++
 static/js/theme.js   | 50 ++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index d5df241..56b717a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -203,6 +203,12 @@ h1 {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    z-index: 100;
+    /* 移动端触摸优化 */
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
 }
 
 .theme-toggle:hover {
@@ -210,6 +216,10 @@ h1 {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }
 
+.theme-toggle:active {
+    transform: scale(0.95);
+}
+
 /* 表单样式 */
 .auth-container {
     max-width: 400px;
diff --git a/static/js/theme.js b/static/js/theme.js
index 3c86ba2..3468222 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -4,16 +4,26 @@
  */
 
 (function() {
+    'use strict';
+    
     const themeKey = 'my_one_web_theme';
     
     // 获取保存的主题
     function getSavedTheme() {
-        return localStorage.getItem(themeKey) || 'light';
+        try {
+            return localStorage.getItem(themeKey) || 'light';
+        } catch (e) {
+            return 'light';
+        }
     }
     
     // 保存主题
     function saveTheme(theme) {
-        localStorage.setItem(themeKey, theme);
+        try {
+            localStorage.setItem(themeKey, theme);
+        } catch (e) {
+            // localStorage 不可用时忽略
+        }
     }
     
     // 应用主题
@@ -31,12 +41,28 @@
         }
     }
     
-    // 切换主题
-    function toggleTheme() {
+    // 切换主题（防抖）
+    let isToggling = false;
+    function toggleTheme(e) {
+        // 阻止默认行为和冒泡
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        // 防抖：300ms 内只响应一次
+        if (isToggling) return;
+        isToggling = true;
+        
         const currentTheme = getSavedTheme();
         const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
         saveTheme(newTheme);
         applyTheme(newTheme);
+        
+        // 300ms 后重置
+        setTimeout(function() {
+            isToggling = false;
+        }, 300);
     }
     
     // 初始化主题
@@ -47,7 +73,23 @@
         // 绑定切换按钮事件
         const btn = document.querySelector('.theme-toggle');
         if (btn) {
+            // 点击事件
             btn.addEventListener('click', toggleTheme);
+            
+            // 触摸事件（移动端）
+            btn.addEventListener('touchstart', function(e) {
+                e.preventDefault();
+            }, { passive: false });
+            
+            btn.addEventListener('touchend', toggleTheme, { passive: true });
+            
+            // 键盘支持（无障碍）
+            btn.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleTheme(e);
+                }
+            });
         }
     }