New:非本站链接跳转确认弹窗

Author: Allen2030Coder

src/layouts/Layout.astro

@@ -207,6 +207,40 @@ const backgroundStyle = pageBackgroundConfig.enable
 		<ConfigCarrier></ConfigCarrier>
 		<slot />
 
+		<!-- 安全跳转提示弹窗 -->
+		<div id="safe-redirect-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm hidden">
+			<div class="bg-[var(--card-bg)] rounded-lg shadow-lg p-6 max-w-md w-full mx-4 border border-[var(--line-divider)] relative">
+				<!-- 关闭按钮 -->
+				<button id="redirect-close" class="absolute top-3 right-3 text-[var(--text-75)] hover:text-[var(--text-90)] transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<line x1="18" y1="6" x2="6" y2="18"></line>
+						<line x1="6" y1="6" x2="18" y2="18"></line>
+					</svg>
+				</button>
+				<div class="flex items-center gap-2 mb-4">
+					<div class="text-green-500">
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<polyline points="20 6 9 17 4 12"></polyline>
+						</svg>
+					</div>
+					<h3 class="text-lg font-bold text-[var(--text-90)]">安全跳转提示</h3>
+				</div>
+				<p class="text-[var(--text-75)] mb-4">您即将访问外部链接：</p>
+				<div class="bg-[var(--btn-card-bg-hover)] rounded-md p-3 mb-4 break-all">
+					<span id="external-link-url" class="text-sm"></span>
+				</div>
+				<div class="bg-green-50 border border-green-200 text-green-800 rounded-md p-3 mb-4 flex items-center gap-2">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<polyline points="20 6 9 17 4 12"></polyline>
+					</svg>
+					<span class="text-sm">外部链接使用 HTTPS 加密连接</span>
+				</div>
+				<button id="redirect-confirm" class="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
+					立即前往
+				</button>
+			</div>
+		</div>
+
 		<!-- increase the page height during page transition to prevent the scrolling animation from jumping -->
 		<div id="page-height-extend" class="hidden h-[300vh]"></div>
 	</body>
@@ -598,6 +632,110 @@ window.onresize = () => {
 	document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
 }
 
+// 安全跳转提示功能
+function initSafeRedirect() {
+	const modal = document.getElementById('safe-redirect-modal');
+	const urlDisplay = document.getElementById('external-link-url');
+	const confirmBtn = document.getElementById('redirect-confirm');
+	let redirectUrl = '';
+
+	// 关闭弹窗
+	function closeModal() {
+		if (modal) {
+			modal.classList.add('hidden');
+		}
+		redirectUrl = '';
+	}
+
+	// 确认跳转
+	function confirmRedirect() {
+		if (redirectUrl) {
+			window.open(redirectUrl, '_blank');
+			closeModal();
+		}
+	}
+
+	// 点击确认按钮
+	if (confirmBtn) {
+		confirmBtn.addEventListener('click', confirmRedirect);
+	}
+
+	// 关闭按钮点击
+	const closeBtn = document.getElementById('redirect-close');
+	if (closeBtn) {
+		closeBtn.addEventListener('click', closeModal);
+	}
+
+	// 点击弹窗外部关闭
+	if (modal) {
+		modal.addEventListener('click', (e) => {
+			if (e.target === modal) {
+				closeModal();
+			}
+		});
+	}
+
+	// 处理链接点击 - 使用捕获阶段确保最先执行
+	function handleLinkClick(e: Event) {
+		const target = e.target as HTMLElement;
+		const anchor = target.closest('a');
+		if (!anchor) return;
+
+		const href = anchor.getAttribute('href');
+		if (!href || href.startsWith('#') || href.startsWith('javascript:')) return;
+
+		// 相对路径是内部链接
+		if (href.startsWith('/')) {
+			return;
+		}
+
+		// 检查是否为外部链接
+		try {
+			const url = new URL(href, window.location.origin);
+			const hostname = url.hostname;
+			const isInternal = hostname === 'allen2030.com' || hostname.endsWith('.allen2030.com');
+
+			if (!isInternal && url.protocol.startsWith('http')) {
+				// 立即阻止默认行为和传播
+				e.preventDefault();
+				e.stopPropagation();
+				e.stopImmediatePropagation();
+				
+				redirectUrl = href;
+
+				if (urlDisplay) {
+					urlDisplay.textContent = href;
+				}
+
+				if (modal) {
+					modal.classList.remove('hidden');
+				}
+			}
+		} catch (error) {
+			console.error('Invalid URL:', error);
+		}
+	}
+
+	// 使用捕获阶段监听，确保在其他监听器之前执行
+	document.addEventListener('click', handleLinkClick, true);
+}
+
+// 确保DOM加载完成后初始化
+if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', initSafeRedirect);
+} else {
+	initSafeRedirect();
+}
+
+// 页面切换时重新初始化
+if (window?.swup?.hooks) {
+	window.swup.hooks.on('page:view', initSafeRedirect);
+} else {
+	document.addEventListener('swup:enable', () => {
+		window.swup.hooks.on('page:view', initSafeRedirect);
+	});
+}
+
 </script>
 
 <script>