1169 lines
46 KiB
Plaintext
1169 lines
46 KiB
Plaintext
---
|
||
interface Props {
|
||
height?: number;
|
||
width?: number;
|
||
fill?: string;
|
||
className?: string;
|
||
// 更新主题过渡动画模式配置
|
||
transitionMode?: "expand" | "shrink" | "auto" | "reverse-auto";
|
||
// 新增自定义主题切换动画时间
|
||
transitionDuration?: number;
|
||
}
|
||
|
||
const {
|
||
height = 16,
|
||
width = 16,
|
||
fill = "currentColor",
|
||
className = "",
|
||
transitionMode = "auto", // 默认为自动模式
|
||
transitionDuration = 700, // 默认动画时间(毫秒)
|
||
} = Astro.props;
|
||
|
||
---
|
||
|
||
<button
|
||
id="theme-toggle-button"
|
||
class={`inline-flex items-center justify-center h-8 w-8 cursor-pointer rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 ${className} overflow-hidden relative`}
|
||
aria-label="切换主题"
|
||
role="button"
|
||
tabindex="0"
|
||
data-transition-mode={transitionMode}
|
||
data-transition-duration={transitionDuration}
|
||
>
|
||
<!-- 月亮图标 (暗色模式) -->
|
||
<svg
|
||
id="dark-icon"
|
||
style={`height: ${height}px; width: ${width}px;`}
|
||
fill={fill}
|
||
viewBox="0 0 16 16"
|
||
class="hover:scale-110 hidden dark:block relative z-10"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||
></path>
|
||
</svg>
|
||
|
||
<!-- 太阳图标 (亮色模式) -->
|
||
<svg
|
||
id="light-icon"
|
||
style={`height: ${height}px; width: ${width}px;`}
|
||
fill={fill}
|
||
viewBox="0 0 16 16"
|
||
class="hover:scale-110 block dark:hidden relative z-10"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||
></path>
|
||
</svg>
|
||
|
||
<!-- 波纹效果容器 -->
|
||
<span id="ripple-container" class="absolute inset-0 pointer-events-none z-0"></span>
|
||
</button>
|
||
|
||
<style is:global>
|
||
/* 波纹效果相关样式 */
|
||
@keyframes ripple-effect {
|
||
from {
|
||
transform: scale(0);
|
||
opacity: 0.8;
|
||
}
|
||
to {
|
||
transform: scale(10);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.theme-ripple {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background-color: rgba(var(--theme-ripple-color, 100, 100, 100), 0.15);
|
||
width: 10px;
|
||
height: 10px;
|
||
pointer-events: none;
|
||
transform-origin: center;
|
||
animation: ripple-effect 800ms ease-out forwards;
|
||
}
|
||
|
||
/* 暗色模式下使用不同颜色变量 */
|
||
.dark .theme-ripple {
|
||
background-color: rgba(var(--theme-ripple-color, 200, 200, 200), 0.15);
|
||
}
|
||
|
||
/* View Transitions 样式控制 */
|
||
::view-transition-old(root),
|
||
::view-transition-new(root) {
|
||
animation: none !important;
|
||
mix-blend-mode: normal !important;
|
||
isolation: auto !important;
|
||
}
|
||
|
||
/* 新增特殊模式样式 */
|
||
html.theme-transition-active {
|
||
transition: none !important;
|
||
}
|
||
|
||
::view-transition-old(root) {
|
||
z-index: 999 !important;
|
||
}
|
||
|
||
::view-transition-new(root) {
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
/* 设置主题容器在移动设备上的样式 */
|
||
#theme-toggle-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
|
||
<script is:inline>
|
||
// 主题切换逻辑 - 自销毁模式
|
||
(function() {
|
||
|
||
// 集中管理所有事件监听器
|
||
const allListeners = [];
|
||
|
||
// 单独保存清理事件的监听器引用
|
||
const cleanupListeners = [];
|
||
|
||
// 定时器引用
|
||
let transitionTimeout = null;
|
||
let rippleTimeout = null;
|
||
|
||
// 主题过渡模式
|
||
const TRANSITION_MODES = {
|
||
EXPAND: 'expand', // 扩散模式
|
||
SHRINK: 'shrink', // 收缩模式
|
||
AUTO: 'auto', // 自动模式（根据切换方向选择）
|
||
REVERSE_AUTO: 'reverse-auto' // 反向自动模式
|
||
};
|
||
|
||
// 获取用户自定义的动画持续时间
|
||
let ANIMATION_DURATION = 700; // 默认动画持续时间
|
||
const customDuration = document.querySelector('#theme-toggle-button')?.dataset?.transitionDuration;
|
||
if (customDuration && !isNaN(parseInt(customDuration))) {
|
||
ANIMATION_DURATION = parseInt(customDuration);
|
||
}
|
||
|
||
// 动画配置（毫秒）
|
||
const ANIMATION_BUFFER = 100; // 动画缓冲时间
|
||
const TOTAL_TRANSITION_TIME = ANIMATION_DURATION + ANIMATION_BUFFER; // 总过渡时间
|
||
// 防抖时间动态计算，始终比动画时间略长一些
|
||
const DEBOUNCE_TIME = TOTAL_TRANSITION_TIME + 200; // 防抖时间比总过渡时间多200ms
|
||
|
||
// 从本地存储获取主题过渡模式
|
||
function getThemeTransitionMode() {
|
||
const savedMode = localStorage.getItem('theme-transition-mode');
|
||
return Object.values(TRANSITION_MODES).includes(savedMode)
|
||
? savedMode
|
||
: TRANSITION_MODES.AUTO;
|
||
}
|
||
|
||
// 添加事件监听器并记录，方便后续统一清理
|
||
function addListener(element, eventType, handler, options) {
|
||
if (!element) {
|
||
console.warn(`主题切换尝试为不存在的元素添加事件:`, eventType);
|
||
return null;
|
||
}
|
||
|
||
element.addEventListener(eventType, handler, options);
|
||
allListeners.push({ element, eventType, handler, options });
|
||
return handler;
|
||
}
|
||
|
||
// 统一的清理函数，执行完整清理并自销毁
|
||
function selfDestruct() {
|
||
// 0. 取消正在进行的transition
|
||
if (window._themeTransition && typeof window._themeTransition.skipTransition === 'function') {
|
||
try {
|
||
window._themeTransition.skipTransition();
|
||
console.debug(`主题切换清理阶段取消transition成功`);
|
||
} catch (err) {
|
||
// 降级为debug日志
|
||
if (err.name === 'AbortError') {
|
||
console.debug(`主题切换清理阶段: 过渡已被跳过，这是正常现象`);
|
||
} else {
|
||
console.debug(`主题切换清理阶段取消transition出错:`, err);
|
||
}
|
||
} finally {
|
||
window._themeTransition = null;
|
||
}
|
||
}
|
||
|
||
// 1. 清理所有计时器
|
||
if (transitionTimeout) {
|
||
clearTimeout(transitionTimeout);
|
||
transitionTimeout = null;
|
||
}
|
||
|
||
if (rippleTimeout) {
|
||
clearTimeout(rippleTimeout);
|
||
rippleTimeout = null;
|
||
}
|
||
|
||
// 2. 清理临时样式元素
|
||
const tempStyle = document.getElementById('theme-transition-temp-style');
|
||
if (tempStyle) {
|
||
tempStyle.remove();
|
||
}
|
||
|
||
// 3. 移除过渡动画标记
|
||
document.documentElement.classList.remove('theme-transition-active');
|
||
|
||
// 4. 移除所有波纹效果元素
|
||
document.querySelectorAll(".theme-ripple").forEach(ripple => {
|
||
if (ripple.parentNode) {
|
||
ripple.parentNode.removeChild(ripple);
|
||
}
|
||
});
|
||
|
||
// 5. 移除普通事件监听器
|
||
allListeners.forEach(({ element, eventType, handler, options }) => {
|
||
try {
|
||
element.removeEventListener(eventType, handler, options);
|
||
} catch (err) {
|
||
console.error(`主题切换移除事件监听器出错:`, err);
|
||
}
|
||
});
|
||
|
||
// 清空监听器数组
|
||
allListeners.length = 0;
|
||
|
||
// 6. 最后移除清理事件监听器自身
|
||
cleanupListeners.forEach(({ element, eventType, handler, options }) => {
|
||
try {
|
||
element.removeEventListener(eventType, handler, options);
|
||
} catch (err) {
|
||
console.error(`主题切换移除清理监听器出错:`, err);
|
||
}
|
||
});
|
||
|
||
// 清空清理监听器数组
|
||
cleanupListeners.length = 0;
|
||
}
|
||
|
||
// 注册清理事件，并保存引用
|
||
function registerCleanupEvents() {
|
||
// 创建一次性事件处理函数
|
||
const beforeSwapHandler = () => {
|
||
selfDestruct();
|
||
};
|
||
|
||
const beforeUnloadHandler = () => {
|
||
selfDestruct();
|
||
};
|
||
|
||
// 添加清理事件监听器并保存引用
|
||
document.addEventListener("astro:before-swap", beforeSwapHandler, { once: true });
|
||
window.addEventListener("beforeunload", beforeUnloadHandler, { once: true });
|
||
|
||
// 保存清理事件引用，用于完全销毁
|
||
cleanupListeners.push(
|
||
{ element: document, eventType: "astro:before-swap", handler: beforeSwapHandler, options: { once: true } },
|
||
{ element: window, eventType: "beforeunload", handler: beforeUnloadHandler, options: { once: true } }
|
||
);
|
||
}
|
||
|
||
// 创建波纹动画元素
|
||
function createRippleEffect(x, y, element) {
|
||
// 清理旧的波纹元素
|
||
const container = element.querySelector("#ripple-container") || element;
|
||
const oldRipples = container.querySelectorAll(".theme-ripple");
|
||
oldRipples.forEach(ripple => ripple.remove());
|
||
|
||
// 创建新的波纹元素
|
||
const ripple = document.createElement("span");
|
||
ripple.classList.add("theme-ripple");
|
||
|
||
// 设置波纹位置
|
||
const rect = element.getBoundingClientRect();
|
||
const relativeX = x - rect.left;
|
||
const relativeY = y - rect.top;
|
||
|
||
ripple.style.left = `${relativeX}px`;
|
||
ripple.style.top = `${relativeY}px`;
|
||
|
||
// 添加波纹到容器
|
||
container.appendChild(ripple);
|
||
|
||
// 自动清理波纹元素
|
||
rippleTimeout = setTimeout(() => {
|
||
if (ripple.parentNode) {
|
||
ripple.parentNode.removeChild(ripple);
|
||
}
|
||
}, 1000);
|
||
|
||
return ripple;
|
||
}
|
||
|
||
// 确定应该使用的动画类型
|
||
function determineAnimationType(transitionMode, fromTheme, toTheme) {
|
||
// 如果是固定模式，直接返回
|
||
if (transitionMode === TRANSITION_MODES.EXPAND ||
|
||
transitionMode === TRANSITION_MODES.SHRINK) {
|
||
return transitionMode;
|
||
}
|
||
|
||
// 如果是自动模式，根据切换方向决定
|
||
if (transitionMode === TRANSITION_MODES.AUTO) {
|
||
// 默认自动模式：亮色->暗色用扩散，暗色->亮色用收缩
|
||
return (fromTheme === 'light' && toTheme === 'dark')
|
||
? TRANSITION_MODES.EXPAND
|
||
: TRANSITION_MODES.SHRINK;
|
||
}
|
||
|
||
// 如果是反向自动模式，反向选择
|
||
if (transitionMode === TRANSITION_MODES.REVERSE_AUTO) {
|
||
// 反向自动模式：亮色->暗色用收缩，暗色->亮色用扩散
|
||
return (fromTheme === 'light' && toTheme === 'dark')
|
||
? TRANSITION_MODES.SHRINK
|
||
: TRANSITION_MODES.EXPAND;
|
||
}
|
||
|
||
// 默认返回扩散模式
|
||
return TRANSITION_MODES.EXPAND;
|
||
}
|
||
|
||
// 使用View Transitions API创建全屏过渡效果
|
||
function createViewTransition(callback, x, y, fromTheme, toTheme, transitionMode) {
|
||
// 如果已有正在进行的过渡，先取消它
|
||
if (window._themeTransition) {
|
||
try {
|
||
if (typeof window._themeTransition.skipTransition === 'function') {
|
||
window._themeTransition.skipTransition();
|
||
}
|
||
} catch (e) {
|
||
// 降级为debug日志，不需要显示警告
|
||
console.debug(`主题切换取消先前过渡失败:`, e);
|
||
} finally {
|
||
// 无论成功与否，都清除引用
|
||
window._themeTransition = null;
|
||
}
|
||
}
|
||
|
||
// 检查浏览器是否支持View Transitions API
|
||
if (!document.startViewTransition) {
|
||
// 尝试使用简单的回退动画
|
||
try {
|
||
// 创建一个圆形蒙版元素
|
||
const mask = document.createElement('div');
|
||
mask.style.position = 'fixed';
|
||
mask.style.zIndex = '9999';
|
||
mask.style.top = '0';
|
||
mask.style.left = '0';
|
||
mask.style.width = '100vw';
|
||
mask.style.height = '100vh';
|
||
mask.style.pointerEvents = 'none';
|
||
|
||
// 设置当前主题的背景颜色
|
||
if (fromTheme === 'dark') {
|
||
mask.style.backgroundColor = '#1a1a1a'; // 暗色主题背景色
|
||
} else {
|
||
mask.style.backgroundColor = '#ffffff'; // 亮色主题背景色
|
||
}
|
||
|
||
// 创建圆形过渡裁剪区域
|
||
const clipType = determineAnimationType(transitionMode, fromTheme, toTheme);
|
||
|
||
if (clipType === TRANSITION_MODES.EXPAND) {
|
||
// 扩散效果 - 从点击位置向外扩散
|
||
mask.style.clipPath = `circle(0px at ${x}px ${y}px)`;
|
||
document.body.appendChild(mask);
|
||
|
||
// 先执行回调改变主题
|
||
callback();
|
||
|
||
// 然后执行动画
|
||
setTimeout(() => {
|
||
mask.style.transition = `clip-path ${ANIMATION_DURATION/1000}s ease-out`;
|
||
mask.style.clipPath = `circle(150vmax at ${x}px ${y}px)`;
|
||
|
||
// 动画结束后删除遮罩
|
||
setTimeout(() => {
|
||
if (mask.parentNode) {
|
||
mask.parentNode.removeChild(mask);
|
||
}
|
||
}, ANIMATION_DURATION);
|
||
}, 20);
|
||
} else {
|
||
// 收缩效果 - 从全屏向点击位置收缩
|
||
mask.style.clipPath = `circle(150vmax at ${x}px ${y}px)`;
|
||
document.body.appendChild(mask);
|
||
|
||
// 添加过渡样式
|
||
mask.style.transition = `clip-path ${ANIMATION_DURATION/1000}s ease-in`;
|
||
|
||
// 强制回流
|
||
void mask.offsetWidth;
|
||
|
||
// 设置目标状态
|
||
mask.style.clipPath = `circle(0px at ${x}px ${y}px)`;
|
||
|
||
// 等待动画结束后切换主题并移除遮罩
|
||
setTimeout(() => {
|
||
callback();
|
||
if (mask.parentNode) {
|
||
mask.parentNode.removeChild(mask);
|
||
}
|
||
}, ANIMATION_DURATION);
|
||
}
|
||
|
||
return new Promise(resolve => setTimeout(resolve, TOTAL_TRANSITION_TIME));
|
||
} catch (e) {
|
||
// 如果回退方案也失败，直接执行回调
|
||
callback();
|
||
return Promise.resolve();
|
||
}
|
||
}
|
||
|
||
try {
|
||
// 清除状态标记，为下一次过渡做准备
|
||
document.documentElement.classList.remove('theme-transition-active');
|
||
|
||
// 清除可能存在的临时样式
|
||
const oldStyle = document.getElementById('theme-transition-temp-style');
|
||
if (oldStyle) {
|
||
oldStyle.remove();
|
||
}
|
||
|
||
// 计算从点击位置到页面四个角的最大距离
|
||
const w = window.innerWidth;
|
||
const h = window.innerHeight;
|
||
|
||
// 计算最大半径，确保覆盖整个屏幕
|
||
const maxDistance = Math.max(
|
||
Math.hypot(x, y), // 左上角
|
||
Math.hypot(w - x, y), // 右上角
|
||
Math.hypot(x, h - y), // 左下角
|
||
Math.hypot(w - x, h - y) // 右下角
|
||
);
|
||
|
||
// 设置CSS变量用于波纹颜色
|
||
document.documentElement.style.setProperty(
|
||
'--theme-ripple-color',
|
||
toTheme === 'dark' ? '230, 230, 230' : '20, 20, 20'
|
||
);
|
||
|
||
// 添加主题过渡标记类
|
||
document.documentElement.classList.add('theme-transition-active');
|
||
|
||
// 确定动画类型
|
||
const animationType = determineAnimationType(transitionMode, fromTheme, toTheme);
|
||
|
||
// 创建一个简单回调函数，避免复杂操作导致transition跳过
|
||
const safeCallback = () => {
|
||
try {
|
||
// 更新HTML属性
|
||
document.documentElement.dataset.theme = toTheme;
|
||
|
||
// 更新本地存储
|
||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||
if (toTheme === systemTheme) {
|
||
localStorage.removeItem("theme");
|
||
} else {
|
||
localStorage.setItem("theme", toTheme);
|
||
}
|
||
|
||
// 最后执行用户回调
|
||
callback();
|
||
} catch (err) {
|
||
console.error(`主题切换 回调执行出错:`, err);
|
||
}
|
||
};
|
||
|
||
// 启动视图过渡
|
||
const transition = document.startViewTransition(safeCallback);
|
||
|
||
// 存储transition引用以便清理
|
||
window._themeTransition = transition;
|
||
|
||
// 生成动画需要的SVG资源
|
||
const gradientOffset = 0.75;
|
||
const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs><radialGradient id="toggle-theme-gradient"><stop offset="${gradientOffset}"/><stop offset="1" stop-opacity="0"/></radialGradient></defs><circle cx="4" cy="4" r="4" fill="url(#toggle-theme-gradient)"/></svg>`;
|
||
const maskUrl = `data:image/svg+xml;base64,${btoa(maskSvg)}`;
|
||
|
||
// 计算动画需要多大才能覆盖整个屏幕
|
||
const maxRadius = Math.ceil(maxDistance / gradientOffset);
|
||
|
||
// 准备应用自定义动画的操作
|
||
const applyCustomAnimation = async () => {
|
||
try {
|
||
// 使用race和超时Promise，改进超时策略
|
||
const readyPromise = Promise.race([
|
||
transition.ready,
|
||
new Promise((_, reject) => {
|
||
// 增加超时时间到50ms，提高收缩模式的成功率
|
||
setTimeout(() => reject(new Error('Ready timeout')), 50);
|
||
})
|
||
]);
|
||
|
||
try {
|
||
// 等待过渡准备完成
|
||
await readyPromise;
|
||
} catch (err) {
|
||
// 超时处理 - 只记录警告日志，继续执行动画
|
||
if (err.message === 'Ready timeout') {
|
||
console.debug(`主题切换过渡准备超时，使用备用策略`);
|
||
// 收缩模式时此处超时更常见，立即使用备用方案
|
||
if (animationType === TRANSITION_MODES.SHRINK) {
|
||
applyFallbackAnimation();
|
||
return; // 跳过后续代码，使用备用方案
|
||
}
|
||
} else if (err.name === 'AbortError') {
|
||
// 如果是AbortError，我们也立即使用备用方案
|
||
applyFallbackAnimation();
|
||
return; // 跳过后续代码，使用备用方案
|
||
} else {
|
||
console.debug(`主题切换过渡准备错误:`, err);
|
||
}
|
||
}
|
||
|
||
// 应用基础样式到document
|
||
const style = document.createElement('style');
|
||
style.id = 'theme-transition-temp-style';
|
||
|
||
if (animationType === TRANSITION_MODES.EXPAND) {
|
||
// 扩散效果 - 新主题从点击位置向外扩散
|
||
style.textContent = `
|
||
::view-transition-new(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x}px ${y}px !important;
|
||
mask-position: ${x}px ${y}px !important;
|
||
-webkit-mask-size: 0 !important;
|
||
mask-size: 0 !important;
|
||
z-index: 1000 !important;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 强制重新计算样式
|
||
window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
|
||
|
||
// 立即设置最终状态
|
||
requestAnimationFrame(() => {
|
||
if (style.parentNode) {
|
||
style.textContent = `
|
||
::view-transition-new(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
-webkit-mask-size: ${maxRadius * 2}px !important;
|
||
mask-size: ${maxRadius * 2}px !important;
|
||
z-index: 1000 !important;
|
||
transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-out, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-out,
|
||
mask-position ${ANIMATION_DURATION/1000}s ease-out, mask-size ${ANIMATION_DURATION/1000}s ease-out !important;
|
||
}
|
||
`;
|
||
}
|
||
});
|
||
|
||
// 清理临时样式
|
||
setTimeout(() => {
|
||
if (document.getElementById('theme-transition-temp-style')) {
|
||
document.getElementById('theme-transition-temp-style').remove();
|
||
}
|
||
}, TOTAL_TRANSITION_TIME);
|
||
|
||
} else {
|
||
// 改进收缩效果实现
|
||
style.textContent = `
|
||
::view-transition-old(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
-webkit-mask-size: ${maxRadius * 2}px !important;
|
||
mask-size: ${maxRadius * 2}px !important;
|
||
z-index: 999 !important;
|
||
}
|
||
::view-transition-new(root) {
|
||
z-index: 998 !important;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 强制重新计算样式
|
||
window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
|
||
|
||
// 使用双重requestAnimationFrame确保样式先被应用
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
if (style.parentNode) {
|
||
style.textContent = `
|
||
::view-transition-old(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x}px ${y}px !important;
|
||
mask-position: ${x}px ${y}px !important;
|
||
-webkit-mask-size: 0 !important;
|
||
mask-size: 0 !important;
|
||
z-index: 999 !important;
|
||
transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-in, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-in,
|
||
mask-position ${ANIMATION_DURATION/1000}s ease-in, mask-size ${ANIMATION_DURATION/1000}s ease-in !important;
|
||
}
|
||
::view-transition-new(root) {
|
||
z-index: 998 !important;
|
||
}
|
||
`;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 清理临时样式
|
||
setTimeout(() => {
|
||
if (document.getElementById('theme-transition-temp-style')) {
|
||
document.getElementById('theme-transition-temp-style').remove();
|
||
}
|
||
}, TOTAL_TRANSITION_TIME);
|
||
} catch (error) {
|
||
// AbortError是正常的，我们完全可以忽略它，但仍保留调试日志
|
||
if (error.name === 'AbortError') {
|
||
// 降级为debug级别日志，不要吓到用户
|
||
console.debug(`主题切换过渡被跳过，这是正常现象`);
|
||
// 使用备用动画方案
|
||
applyFallbackAnimation();
|
||
} else if (error.message === 'Ready timeout') {
|
||
// 超时是我们主动抛出的，只需要降级处理
|
||
console.debug(`主题切换过渡准备超时，继续执行动画`);
|
||
|
||
// 即使ready超时，我们仍然可以应用样式
|
||
// 这里可以直接调用备用方案应用动画
|
||
applyFallbackAnimation();
|
||
} else {
|
||
// 只有真正意外的错误才输出error级别日志
|
||
console.error(`主题切换应用自定义动画出错:`, error);
|
||
// 尝试使用备用方案
|
||
applyFallbackAnimation();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加备用动画方案
|
||
const applyFallbackAnimation = () => {
|
||
try {
|
||
// 创建并应用样式但不等待transition.ready
|
||
const style = document.createElement('style');
|
||
style.id = 'theme-transition-temp-style';
|
||
|
||
if (animationType === TRANSITION_MODES.EXPAND) {
|
||
// 扩散效果样式 - 保持不变
|
||
style.textContent = `
|
||
::view-transition-new(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x}px ${y}px !important;
|
||
mask-position: ${x}px ${y}px !important;
|
||
-webkit-mask-size: 0 !important;
|
||
mask-size: 0 !important;
|
||
z-index: 1000 !important;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 强制重新计算样式
|
||
window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
|
||
|
||
// 使用双重requestAnimationFrame确保样式先被应用
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
if (style.parentNode) {
|
||
style.textContent = `
|
||
::view-transition-new(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
-webkit-mask-size: ${maxRadius * 2}px !important;
|
||
mask-size: ${maxRadius * 2}px !important;
|
||
z-index: 1000 !important;
|
||
transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-out, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-out,
|
||
mask-position ${ANIMATION_DURATION/1000}s ease-out, mask-size ${ANIMATION_DURATION/1000}s ease-out !important;
|
||
}
|
||
`;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
// 改进收缩效果实现
|
||
style.textContent = `
|
||
::view-transition-old(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
|
||
-webkit-mask-size: ${maxRadius * 2}px !important;
|
||
mask-size: ${maxRadius * 2}px !important;
|
||
z-index: 999 !important;
|
||
}
|
||
::view-transition-new(root) {
|
||
z-index: 998 !important;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 强制重新计算样式
|
||
window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
|
||
|
||
// 使用双重requestAnimationFrame确保样式先被应用
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
if (style.parentNode) {
|
||
style.textContent = `
|
||
::view-transition-old(root) {
|
||
animation: none !important;
|
||
-webkit-mask-image: url('${maskUrl}') !important;
|
||
mask-image: url('${maskUrl}') !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: ${x}px ${y}px !important;
|
||
mask-position: ${x}px ${y}px !important;
|
||
-webkit-mask-size: 0 !important;
|
||
mask-size: 0 !important;
|
||
z-index: 999 !important;
|
||
transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-in, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-in,
|
||
mask-position ${ANIMATION_DURATION/1000}s ease-in, mask-size ${ANIMATION_DURATION/1000}s ease-in !important;
|
||
}
|
||
::view-transition-new(root) {
|
||
z-index: 998 !important;
|
||
}
|
||
`;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 清理临时样式
|
||
setTimeout(() => {
|
||
if (document.getElementById('theme-transition-temp-style')) {
|
||
document.getElementById('theme-transition-temp-style').remove();
|
||
}
|
||
}, TOTAL_TRANSITION_TIME);
|
||
} catch (err) {
|
||
console.debug(`主题切换应用备用动画方案出错:`, err);
|
||
}
|
||
};
|
||
|
||
// 非阻塞执行自定义动画应用
|
||
applyCustomAnimation().catch(error => {
|
||
console.error(`主题切换应用动画过程出错:`, error);
|
||
});
|
||
|
||
// 返回过渡完成的Promise
|
||
return transition.finished
|
||
.then(() => {
|
||
// 移除主题过渡标记类
|
||
document.documentElement.classList.remove('theme-transition-active');
|
||
window._themeTransition = null;
|
||
})
|
||
.catch(error => {
|
||
if (error.name === 'AbortError') {
|
||
console.debug(`主题切换过渡被中断: 这是正常现象，可能是新的过渡开始或页面导航变化`);
|
||
} else {
|
||
console.error(`主题切换过渡动画错误:`, error);
|
||
}
|
||
// 确保标记类被移除
|
||
document.documentElement.classList.remove('theme-transition-active');
|
||
|
||
// 清除引用
|
||
window._themeTransition = null;
|
||
});
|
||
} catch (error) {
|
||
console.error(`主题切换错误:`, error);
|
||
// 在出错时也要执行回调
|
||
callback();
|
||
// 确保标记类被移除
|
||
document.documentElement.classList.remove('theme-transition-active');
|
||
return Promise.resolve();
|
||
}
|
||
}
|
||
|
||
// 设置主题切换功能
|
||
function setupThemeToggle() {
|
||
// 获取所有主题切换按钮
|
||
const themeToggleButtons = document.querySelectorAll("#theme-toggle-button");
|
||
|
||
if (!themeToggleButtons.length) {
|
||
console.warn(`主题切换未找到主题切换按钮`);
|
||
return;
|
||
}
|
||
|
||
// 防抖配置 - 使用前面定义的动态计算值
|
||
let lastClickTime = 0;
|
||
let transitioning = false;
|
||
|
||
// 将transitioning状态暴露给全局，便于其他脚本检查
|
||
window._themeTransitioning = false;
|
||
window._lastThemeToggleClickTime = 0;
|
||
|
||
// 状态清理函数 - 在页面切换、错误和超时情况下调用
|
||
const resetThemeToggleState = () => {
|
||
if (transitionTimeout) {
|
||
clearTimeout(transitionTimeout);
|
||
transitionTimeout = null;
|
||
}
|
||
|
||
transitioning = false;
|
||
window._themeTransitioning = false;
|
||
|
||
// 移除所有残留的波纹效果
|
||
document.querySelectorAll(".theme-ripple").forEach(ripple => {
|
||
if (ripple.parentNode) {
|
||
ripple.parentNode.removeChild(ripple);
|
||
}
|
||
});
|
||
|
||
console.debug('主题切换: 状态已重置');
|
||
};
|
||
|
||
// 监听Astro的页面切换事件
|
||
document.addEventListener('astro:before-swap', resetThemeToggleState, { once: false });
|
||
document.addEventListener('astro:after-swap', resetThemeToggleState, { once: false });
|
||
allListeners.push(
|
||
{ element: document, eventType: 'astro:before-swap', handler: resetThemeToggleState, options: { once: false } },
|
||
{ element: document, eventType: 'astro:after-swap', handler: resetThemeToggleState, options: { once: false } }
|
||
);
|
||
|
||
// 监听视图过渡事件
|
||
if (typeof document.startViewTransition === 'function') {
|
||
document.addEventListener('view-transition-start', resetThemeToggleState, { once: false });
|
||
document.addEventListener('view-transition-end', resetThemeToggleState, { once: false });
|
||
allListeners.push(
|
||
{ element: document, eventType: 'view-transition-start', handler: resetThemeToggleState, options: { once: false } },
|
||
{ element: document, eventType: 'view-transition-end', handler: resetThemeToggleState, options: { once: false } }
|
||
);
|
||
}
|
||
|
||
// 全局事件拦截器 - 拦截所有冒泡阶段的点击事件，防止重复触发
|
||
const globalClickHandler = (e) => {
|
||
// 不处理未冒泡到document的事件
|
||
if (!e || !e.target) return;
|
||
|
||
// 如果点击事件来自于主题切换相关元素，且正在过渡中，拦截所有后续处理
|
||
if (window._themeTransitioning &&
|
||
(e.target.closest('#theme-toggle-button') ||
|
||
e.target.closest('#theme-toggle-container'))) {
|
||
console.debug('全局拦截: 主题切换正在进行中，忽略额外点击');
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
}
|
||
};
|
||
|
||
// 在document级别添加事件捕获，确保所有相关点击都能被拦截
|
||
document.addEventListener('click', globalClickHandler, { capture: true });
|
||
// 清理时记得移除
|
||
allListeners.push({
|
||
element: document,
|
||
eventType: 'click',
|
||
handler: globalClickHandler,
|
||
options: { capture: true }
|
||
});
|
||
|
||
// 获取系统首选主题
|
||
const getSystemTheme = () => {
|
||
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||
? "dark"
|
||
: "light";
|
||
};
|
||
|
||
// 初始化主题
|
||
const initializeTheme = () => {
|
||
const storedTheme = localStorage.getItem("theme");
|
||
const systemTheme = getSystemTheme();
|
||
|
||
// 按照逻辑优先级应用主题
|
||
if (storedTheme) {
|
||
document.documentElement.dataset.theme = storedTheme;
|
||
} else if (systemTheme) {
|
||
document.documentElement.dataset.theme = systemTheme;
|
||
} else {
|
||
document.documentElement.dataset.theme = "light";
|
||
}
|
||
};
|
||
|
||
// 防抖函数 - 确保在指定时间内只执行一次
|
||
const isThrottled = () => {
|
||
const now = Date.now();
|
||
if (transitioning || now - lastClickTime < DEBOUNCE_TIME) {
|
||
return true;
|
||
}
|
||
lastClickTime = now;
|
||
window._lastThemeToggleClickTime = now;
|
||
return false;
|
||
};
|
||
|
||
// 为所有触发点提供统一的处理函数
|
||
const handleThemeToggle = (e, targetButton) => {
|
||
// 防止事件默认行为和冒泡，无论如何都要先阻止
|
||
if (e && typeof e.preventDefault === 'function') {
|
||
e.preventDefault();
|
||
}
|
||
if (e && typeof e.stopPropagation === 'function') {
|
||
e.stopPropagation();
|
||
}
|
||
|
||
// 第1层保护：全局事件防抖
|
||
if (isThrottled()) {
|
||
console.debug('主题切换: 防抖拦截，忽略点击');
|
||
return;
|
||
}
|
||
|
||
// 第2层保护：transitioning状态检查
|
||
if (window._themeTransitioning) {
|
||
console.debug('主题切换: 已有过渡进行中，忽略点击');
|
||
return;
|
||
}
|
||
|
||
// 第3层保护：视图过渡检查
|
||
if (window._themeTransition) {
|
||
console.debug('主题切换: 视图过渡已存在，忽略点击');
|
||
return;
|
||
}
|
||
|
||
// 所有检查通过后，开始处理主题切换
|
||
console.debug('主题切换: 开始处理');
|
||
|
||
// 立即设置transitioning状态，阻止后续点击
|
||
window._themeTransitioning = true;
|
||
|
||
try {
|
||
// 计算点击坐标或使用按钮中心坐标
|
||
let clickX, clickY;
|
||
|
||
if (e instanceof Event && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
|
||
clickX = e.clientX;
|
||
clickY = e.clientY;
|
||
} else if (e && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
|
||
clickX = e.clientX;
|
||
clickY = e.clientY;
|
||
} else {
|
||
const rect = targetButton.getBoundingClientRect();
|
||
clickX = rect.left + rect.width / 2;
|
||
clickY = rect.top + rect.height / 2;
|
||
}
|
||
|
||
// 确保坐标有效（防止NaN或无限值）
|
||
clickX = isFinite(clickX) ? clickX : window.innerWidth / 2;
|
||
clickY = isFinite(clickY) ? clickY : window.innerHeight / 2;
|
||
|
||
// 在按钮上创建小波纹效果
|
||
createRippleEffect(clickX, clickY, targetButton);
|
||
|
||
// 获取当前主题
|
||
const currentTheme = document.documentElement.dataset.theme;
|
||
const newTheme = currentTheme === "light" ? "dark" : "light";
|
||
|
||
// 获取过渡模式
|
||
let transitionMode = TRANSITION_MODES.AUTO; // 默认自动模式
|
||
|
||
if (targetButton && targetButton.dataset && targetButton.dataset.transitionMode) {
|
||
transitionMode = targetButton.dataset.transitionMode;
|
||
} else {
|
||
// 如果无法从按钮获取，从本地存储获取
|
||
transitionMode = getThemeTransitionMode();
|
||
}
|
||
|
||
// 在开始新的过渡前，先重置transitioning的延时清除
|
||
if (transitionTimeout) {
|
||
clearTimeout(transitionTimeout);
|
||
transitionTimeout = null;
|
||
}
|
||
|
||
// 创建一个安全的主题切换回调
|
||
const safeThemeChangeCallback = () => {
|
||
try {
|
||
// 直接在这里执行主题切换的核心逻辑
|
||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||
if (newTheme === systemTheme) {
|
||
localStorage.removeItem("theme");
|
||
} else {
|
||
localStorage.setItem("theme", newTheme);
|
||
}
|
||
} catch (err) {
|
||
console.error(`主题切换回调执行出错:`, err);
|
||
}
|
||
};
|
||
|
||
// 调用视图过渡
|
||
createViewTransition(
|
||
safeThemeChangeCallback,
|
||
clickX,
|
||
clickY,
|
||
currentTheme,
|
||
newTheme,
|
||
transitionMode
|
||
).then(() => {
|
||
// 过渡完成后恢复状态
|
||
setTimeout(() => {
|
||
window._themeTransitioning = false;
|
||
console.debug('主题切换: 过渡完成，恢复状态');
|
||
}, ANIMATION_BUFFER); // 添加缓冲时间
|
||
}).catch(error => {
|
||
// 出现错误时强制执行主题切换以确保功能可用
|
||
if (error.name !== 'AbortError') {
|
||
console.error(`主题切换过渡动画错误:`, error);
|
||
// 如果不是因为过渡被跳过而是真正的错误，直接执行主题切换
|
||
safeThemeChangeCallback();
|
||
} else {
|
||
console.debug(`主题切换过渡被跳过，这是正常现象`);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
window._themeTransitioning = false;
|
||
console.debug('主题切换: 过渡被取消，恢复状态');
|
||
}, ANIMATION_BUFFER);
|
||
});
|
||
|
||
// 设置防抖保底 - 防止transition.finished不触发导致状态卡死
|
||
transitionTimeout = setTimeout(() => {
|
||
window._themeTransitioning = false;
|
||
console.debug('主题切换: 过渡超时，强制恢复状态');
|
||
}, TOTAL_TRANSITION_TIME + 200); // 总过渡时间加额外缓冲
|
||
} catch (err) {
|
||
// 即使发生错误，也要确保主题能切换
|
||
console.error(`主题切换处理过程出错:`, err);
|
||
|
||
// 尝试直接切换主题
|
||
try {
|
||
const currentTheme = document.documentElement.dataset.theme || 'light';
|
||
const newTheme = currentTheme === "light" ? "dark" : "light";
|
||
|
||
// 更新HTML属性
|
||
document.documentElement.dataset.theme = newTheme;
|
||
|
||
// 更新本地存储
|
||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||
if (newTheme === systemTheme) {
|
||
localStorage.removeItem("theme");
|
||
} else {
|
||
localStorage.setItem("theme", newTheme);
|
||
}
|
||
} catch (fallbackErr) {
|
||
console.error(`主题切换降级处理失败:`, fallbackErr);
|
||
}
|
||
|
||
// 确保状态被重置
|
||
window._themeTransitioning = false;
|
||
console.debug('主题切换: 发生错误，恢复状态');
|
||
}
|
||
};
|
||
|
||
// 监听系统主题变化
|
||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||
const handleMediaChange = (e) => {
|
||
if (!localStorage.getItem("theme")) {
|
||
const newTheme = e.matches ? "dark" : "light";
|
||
document.documentElement.dataset.theme = newTheme;
|
||
}
|
||
};
|
||
|
||
// 添加系统主题变化监听
|
||
addListener(mediaQuery, "change", handleMediaChange);
|
||
|
||
// 为每个按钮添加事件
|
||
themeToggleButtons.forEach(button => {
|
||
// 点击事件 - 使用捕获模式
|
||
addListener(button, "click", (e) => handleThemeToggle(e, button), { capture: true });
|
||
|
||
// 键盘事件
|
||
const keydownHandler = (e) => {
|
||
if (e.key === "Enter" || e.key === " ") {
|
||
e.preventDefault();
|
||
handleThemeToggle(e, button);
|
||
}
|
||
};
|
||
addListener(button, "keydown", keydownHandler);
|
||
});
|
||
|
||
// 处理移动端主题切换容器 - 使用同样的逻辑处理
|
||
const themeToggleContainer = document.getElementById("theme-toggle-container");
|
||
if (themeToggleContainer) {
|
||
const containerClickHandler = (e) => {
|
||
// 如果点击的是按钮内部，让按钮自己处理
|
||
if (e.target.closest("#theme-toggle-button")) {
|
||
return;
|
||
}
|
||
|
||
// 找到容器内的主题切换按钮
|
||
const button = themeToggleContainer.querySelector("#theme-toggle-button");
|
||
if (button) {
|
||
// 调用统一的处理函数
|
||
handleThemeToggle(e, button);
|
||
}
|
||
};
|
||
|
||
// 使用capture模式确保事件在捕获阶段就被处理
|
||
addListener(themeToggleContainer, "click", containerClickHandler, { capture: true });
|
||
|
||
// 为移动端容器添加关闭移动端菜单的功能
|
||
const closeMenuHandler = (e) => {
|
||
// 检查是否有closeMobileMenu全局函数（来自Header.astro）
|
||
if (typeof window.closeMobileMenu === 'function') {
|
||
// 这个函数会在点击主题切换容器后被调用，无论是否真正触发主题切换
|
||
window.closeMobileMenu();
|
||
}
|
||
};
|
||
|
||
// 使用冒泡阶段，确保在主题切换处理后执行
|
||
addListener(themeToggleContainer, "click", closeMenuHandler, { capture: false });
|
||
}
|
||
|
||
// 初始化主题
|
||
initializeTheme();
|
||
}
|
||
|
||
// 初始化函数
|
||
function init() {
|
||
// 注册清理事件
|
||
registerCleanupEvents();
|
||
|
||
// 设置主题切换功能
|
||
setupThemeToggle();
|
||
|
||
// 设置防止内存泄漏的自动清理 - 最多30秒后自毁
|
||
setTimeout(() => {
|
||
// 如果页面没有被卸载，检查是否已经清理过
|
||
if (document.body && !document._themeToggleCleanedUp) {
|
||
// 为避免重复清理，设置一个标记
|
||
document._themeToggleCleanedUp = true;
|
||
// 执行清理
|
||
selfDestruct();
|
||
console.debug('主题切换: 自动清理已执行');
|
||
}
|
||
}, 30000);
|
||
}
|
||
|
||
// 判断DOM是否已加载
|
||
if (document.readyState === "loading") {
|
||
document.addEventListener("DOMContentLoaded", init, { once: true });
|
||
} else {
|
||
init();
|
||
}
|
||
})();
|
||
</script> |