修复完成主题切换删除日志

This commit is contained in:
lsy 2025-04-20 16:37:23 +08:00
parent d796e5dc5b
commit 474c777bbd

View File

@ -49,23 +49,10 @@ const {
<script is:inline> <script is:inline>
// 主题切换逻辑 // 主题切换逻辑
(function() { (function() {
const DEBUG = true; // 调试模式开关
// 调试日志
function logDebug(...args) {
if (DEBUG) {
console.log('[ThemeToggle]', ...args);
}
}
logDebug('主题切换脚本初始化');
// 页面导航计数器(跟踪页面跳转次数) // 页面导航计数器(跟踪页面跳转次数)
let pageNavigationCount = 0; let pageNavigationCount = 0;
// 存储所有主题切换按钮的引用和它们的处理函数,帮助直接清理
const buttonHandlers = new WeakMap();
// 存储事件监听器,便于统一清理 // 存储事件监听器,便于统一清理
const listeners = []; const listeners = [];
@ -182,14 +169,11 @@ const {
element.addEventListener(eventType, handler, options); element.addEventListener(eventType, handler, options);
listeners.push({ element, eventType, handler, options }); listeners.push({ element, eventType, handler, options });
logDebug(`添加事件监听器: ${eventType}`);
return handler; return handler;
} }
// 清理函数 - 移除所有事件监听器 // 清理函数 - 移除所有事件监听器
function cleanup() { function cleanup() {
logDebug(`清理前事件监听器数量: ${listeners.length}`);
// 先直接从按钮清理事件 // 先直接从按钮清理事件
cleanupButtonListeners(); cleanupButtonListeners();
@ -198,7 +182,7 @@ const {
try { try {
element.removeEventListener(eventType, handler, options); element.removeEventListener(eventType, handler, options);
} catch (err) { } catch (err) {
console.error(`移除主题切换事件监听器出错:`, err); // 忽略错误
} }
}); });
@ -210,22 +194,16 @@ const {
clearTimeout(transitionTimeout); clearTimeout(transitionTimeout);
transitionTimeout = null; transitionTimeout = null;
} }
logDebug('所有事件监听器已清理');
} }
// 初始化主题切换功能 // 初始化主题切换功能
function setupThemeToggle() { function setupThemeToggle() {
logDebug(`设置主题切换,页面导航计数: ${pageNavigationCount}`);
// 确保当前没有活动的主题切换按钮事件 // 确保当前没有活动的主题切换按钮事件
cleanup(); cleanup();
// 获取所有主题切换按钮 // 获取所有主题切换按钮
const themeToggleButtons = document.querySelectorAll('#theme-toggle-button'); const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
logDebug(`找到 ${themeToggleButtons.length} 个主题切换按钮`);
if (!themeToggleButtons.length) { if (!themeToggleButtons.length) {
return; return;
} }
@ -242,8 +220,6 @@ const {
const storedTheme = localStorage.getItem('theme'); const storedTheme = localStorage.getItem('theme');
const systemTheme = getSystemTheme(); const systemTheme = getSystemTheme();
logDebug(`初始化主题: 存储主题=${storedTheme}, 系统主题=${systemTheme}`);
// 按照逻辑优先级应用主题 // 按照逻辑优先级应用主题
if (storedTheme) { if (storedTheme) {
document.documentElement.dataset.theme = storedTheme; document.documentElement.dataset.theme = storedTheme;
@ -252,16 +228,11 @@ const {
} else { } else {
document.documentElement.dataset.theme = 'light'; document.documentElement.dataset.theme = 'light';
} }
logDebug(`应用主题: ${document.documentElement.dataset.theme}`);
}; };
// 切换主题 // 切换主题
const toggleTheme = () => { const toggleTheme = () => {
logDebug('尝试切换主题, 状态:', { transitioning });
if (transitioning) { if (transitioning) {
logDebug('主题正在切换中,忽略请求');
return; return;
} }
@ -271,8 +242,6 @@ const {
const currentTheme = document.documentElement.dataset.theme; const currentTheme = document.documentElement.dataset.theme;
const newTheme = currentTheme === 'light' ? 'dark' : 'light'; const newTheme = currentTheme === 'light' ? 'dark' : 'light';
logDebug(`切换主题: ${currentTheme} => ${newTheme}`);
// 更新 HTML 属性 // 更新 HTML 属性
document.documentElement.dataset.theme = newTheme; document.documentElement.dataset.theme = newTheme;
@ -281,10 +250,8 @@ const {
if (newTheme === systemTheme) { if (newTheme === systemTheme) {
localStorage.removeItem('theme'); localStorage.removeItem('theme');
logDebug('移除本地存储的主题(使用系统主题)');
} else { } else {
localStorage.setItem('theme', newTheme); localStorage.setItem('theme', newTheme);
logDebug(`保存主题到本地存储: ${newTheme}`);
} }
// 添加防抖 // 添加防抖
@ -294,7 +261,6 @@ const {
transitionTimeout = setTimeout(() => { transitionTimeout = setTimeout(() => {
transitioning = false; transitioning = false;
logDebug('主题切换冷却结束');
}, 300); }, 300);
}; };
@ -302,11 +268,9 @@ const {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleMediaChange = (e) => { const handleMediaChange = (e) => {
logDebug(`系统主题变化: ${e.matches ? 'dark' : 'light'}`);
if (!localStorage.getItem('theme')) { if (!localStorage.getItem('theme')) {
const newTheme = e.matches ? 'dark' : 'light'; const newTheme = e.matches ? 'dark' : 'light';
document.documentElement.dataset.theme = newTheme; document.documentElement.dataset.theme = newTheme;
logDebug(`应用系统主题: ${newTheme}`);
} }
}; };
@ -329,11 +293,8 @@ const {
// 忽略样式错误 // 忽略样式错误
} }
logDebug(`设置按钮 #${index} 事件`);
// 创建点击处理函数 // 创建点击处理函数
const clickHandler = (e) => { const clickHandler = (e) => {
logDebug(`按钮 #${index} 被点击`, e);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggleTheme(); toggleTheme();
@ -345,7 +306,6 @@ const {
// 键盘事件 // 键盘事件
const keydownHandler = (e) => { const keydownHandler = (e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
logDebug(`按钮 #${index} 键盘触发: ${e.key}`);
e.preventDefault(); e.preventDefault();
toggleTheme(); toggleTheme();
} }
@ -361,12 +321,9 @@ const {
themeToggleContainer.removeEventListener('click', themeToggleContainer._clickHandler); themeToggleContainer.removeEventListener('click', themeToggleContainer._clickHandler);
} }
logDebug('设置主题切换容器事件');
const containerClickHandler = (e) => { const containerClickHandler = (e) => {
const target = e.target; const target = e.target;
if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) { if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
logDebug('主题切换容器被点击');
e.stopPropagation(); e.stopPropagation();
toggleTheme(); toggleTheme();
} }
@ -381,8 +338,6 @@ const {
// 注册清理函数 - 确保在每次页面转换前清理事件 // 注册清理函数 - 确保在每次页面转换前清理事件
function registerCleanup() { function registerCleanup() {
logDebug('注册清理函数');
const cleanupEvents = [ const cleanupEvents = [
'astro:before-preparation', 'astro:before-preparation',
'astro:before-swap', 'astro:before-swap',
@ -392,7 +347,6 @@ const {
// 为每个事件注册一次性清理函数 // 为每个事件注册一次性清理函数
cleanupEvents.forEach(eventName => { cleanupEvents.forEach(eventName => {
const handler = () => { const handler = () => {
logDebug(`触发 ${eventName} - 执行清理`);
cleanup(); cleanup();
}; };
@ -401,7 +355,6 @@ const {
// 页面卸载时清理 // 页面卸载时清理
window.addEventListener('beforeunload', () => { window.addEventListener('beforeunload', () => {
logDebug('触发 beforeunload');
cleanup(); cleanup();
}, { once: true }); }, { once: true });
} }
@ -409,8 +362,6 @@ const {
// 初始化函数 // 初始化函数
function init() { function init() {
pageNavigationCount++; pageNavigationCount++;
logDebug(`初始化主题切换 (页面导航 #${pageNavigationCount})`);
setupThemeToggle(); setupThemeToggle();
registerCleanup(); registerCleanup();
} }
@ -441,7 +392,6 @@ const {
// 设置每个页面转换事件 // 设置每个页面转换事件
pageTransitionEvents.forEach(({ name, delay }) => { pageTransitionEvents.forEach(({ name, delay }) => {
setupUniqueEvent(name, () => { setupUniqueEvent(name, () => {
logDebug(`${name} 事件触发`);
cleanupButtonListeners(); // 立即清理按钮上的事件 cleanupButtonListeners(); // 立即清理按钮上的事件
// 延迟初始化确保DOM完全更新 // 延迟初始化确保DOM完全更新
@ -454,12 +404,8 @@ const {
// 特别处理 swup:pageView 事件 // 特别处理 swup:pageView 事件
setupUniqueEvent('swup:pageView', () => { setupUniqueEvent('swup:pageView', () => {
logDebug('swup:pageView 事件触发');
// 对于偶数次页面跳转,特别确保事件被正确重新绑定 // 对于偶数次页面跳转,特别确保事件被正确重新绑定
if (pageNavigationCount % 2 === 0) { if (pageNavigationCount % 2 === 0) {
logDebug('偶数次页面跳转,强制重新初始化');
setTimeout(() => { setTimeout(() => {
const buttons = document.querySelectorAll('#theme-toggle-button'); const buttons = document.querySelectorAll('#theme-toggle-button');
if (buttons.length > 0) { if (buttons.length > 0) {
@ -469,13 +415,6 @@ const {
}, 50); }, 50);
} }
}); });
// 监控其他Swup事件仅调试用
if (DEBUG) {
['swup:animationInStart', 'swup:animationInDone', 'swup:animationOutStart', 'swup:animationOutDone'].forEach(event => {
setupUniqueEvent(event, () => logDebug(`${event} 事件触发`));
});
}
} }
// 设置页面转换事件监听 // 设置页面转换事件监听
@ -484,12 +423,10 @@ const {
// 在页面加载后初始化 // 在页面加载后初始化
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
logDebug('DOMContentLoaded 事件触发');
init(); init();
}, { once: true }); }, { once: true });
} else { } else {
setTimeout(() => { setTimeout(() => {
logDebug('延迟初始化');
init(); init();
}, 0); }, 0);
} }