修复完成主题切换删除日志
This commit is contained in:
parent
d796e5dc5b
commit
474c777bbd
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user