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); + } + }); } }