// 这个文件主要用于加载Bootstrap的JavaScript功能 // 主要的排行榜逻辑在 src/playground/leaderboard.js 中实现 document.addEventListener('DOMContentLoaded', function() { // 检测是否是移动设备 const isMobile = window.innerWidth <= 576 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); // 在移动设备上禁用特定功能 if (isMobile) { const fullscreenBtn = document.getElementById('fullscreen-btn'); const autoRefreshSwitch = document.getElementById('auto-refresh-switch'); // 如果存在全屏按钮,禁用它 if (fullscreenBtn) { fullscreenBtn.style.display = 'none'; } // 如果存在自动刷新开关,禁用它 if (autoRefreshSwitch) { autoRefreshSwitch.disabled = true; const label = document.querySelector('label[for="auto-refresh-switch"]'); if (label) { label.parentElement.style.display = 'none'; } } } // 初始化所有Bootstrap组件 const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); // 添加平滑滚动效果 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // 检测是否是iPhone const isIPhone = /iPhone/i.test(navigator.userAgent); // 响应式调整 function adjustLayout() { const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const tableContainer = document.querySelector('.leaderboard-table-container'); const isFullscreen = document.body.classList.contains('fullscreen-mode'); // 设置安全区域边距 if (isIPhone) { document.body.style.paddingBottom = 'env(safe-area-inset-bottom)'; // 处理刘海屏和底部条 if (windowWidth < windowHeight) { // 竖屏 document.body.style.paddingTop = 'env(safe-area-inset-top)'; document.body.style.paddingLeft = 'env(safe-area-inset-left)'; document.body.style.paddingRight = 'env(safe-area-inset-right)'; } } if (windowWidth < 768 && !isFullscreen) { // 小屏幕适配 if (tableContainer) { tableContainer.classList.add('table-responsive-sm'); } } else { // 大屏幕或全屏模式适配 if (tableContainer) { tableContainer.classList.remove('table-responsive-sm'); } } // 全屏模式下的额外调整 if (isFullscreen && !isMobile) { const table = document.querySelector('.leaderboard-table'); if (table) { // 确保表格足够大以填充屏幕 const viewportHeight = window.innerHeight; const headerHeight = document.querySelector('.header').offsetHeight; const infoHeight = document.querySelector('.leaderboard-header').offsetHeight; const paginationHeight = document.querySelector('.pagination-container')?.offsetHeight || 0; // 为iPhone底部栏预留空间 const bottomInset = isIPhone ? 34 : 0; const availableHeight = viewportHeight - headerHeight - infoHeight - paginationHeight - 40 - bottomInset; if (availableHeight > 300) { tableContainer.style.maxHeight = `${availableHeight}px`; tableContainer.style.overflowY = 'auto'; } } } else { // 非全屏模式下重置样式 if (tableContainer) { tableContainer.style.maxHeight = ''; tableContainer.style.overflowY = ''; } } } // 初始调整和窗口大小变化时调整 adjustLayout(); window.addEventListener('resize', adjustLayout); // 处理屏幕方向变化 window.addEventListener('orientationchange', function() { setTimeout(adjustLayout, 300); // 延迟执行以确保浏览器完成方向变化 }); // 观察DOM变化以检测全屏模式切换 const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { if (mutation.target === document.body) { adjustLayout(); } } }); }); observer.observe(document.body, { attributes: true }); });