fix: 修复移动端主题切换问题 📱

- 添加 z-index: 100 确保按钮在最上层
- 增加 touchstart/touchend 事件支持
- 添加 touch-action 优化触摸操作
- 增加 -webkit-tap-highlight 去除高亮
- 添加防抖机制避免重复触发
- 支持键盘操作(无障碍)
This commit is contained in:
root
2026-03-11 21:51:31 +08:00
parent 00a33bc424
commit f55891f1cd
2 changed files with 56 additions and 4 deletions

View File

@@ -203,6 +203,12 @@ h1 {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 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 { .theme-toggle:hover {
@@ -210,6 +216,10 @@ h1 {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
} }
.theme-toggle:active {
transform: scale(0.95);
}
/* 表单样式 */ /* 表单样式 */
.auth-container { .auth-container {
max-width: 400px; max-width: 400px;

View File

@@ -4,16 +4,26 @@
*/ */
(function() { (function() {
'use strict';
const themeKey = 'my_one_web_theme'; const themeKey = 'my_one_web_theme';
// 获取保存的主题 // 获取保存的主题
function getSavedTheme() { function getSavedTheme() {
try {
return localStorage.getItem(themeKey) || 'light'; return localStorage.getItem(themeKey) || 'light';
} catch (e) {
return 'light';
}
} }
// 保存主题 // 保存主题
function saveTheme(theme) { function saveTheme(theme) {
try {
localStorage.setItem(themeKey, theme); 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 currentTheme = getSavedTheme();
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
saveTheme(newTheme); saveTheme(newTheme);
applyTheme(newTheme); applyTheme(newTheme);
// 300ms 后重置
setTimeout(function() {
isToggling = false;
}, 300);
} }
// 初始化主题 // 初始化主题
@@ -47,7 +73,23 @@
// 绑定切换按钮事件 // 绑定切换按钮事件
const btn = document.querySelector('.theme-toggle'); const btn = document.querySelector('.theme-toggle');
if (btn) { if (btn) {
// 点击事件
btn.addEventListener('click', toggleTheme); 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);
}
});
} }
} }