From db00afbb1e82e68bb03ad454ef60ef6d436ffca0 Mon Sep 17 00:00:00 2001 From: Zylan Date: Thu, 27 Mar 2025 18:10:24 +0800 Subject: [PATCH] visits --- static/js/ui.js | 81 ++++++++++++++++++++++++++++++++++++++++++++ static/style.css | 29 ++++++++++++++++ templates/index.html | 9 +++-- 3 files changed, 114 insertions(+), 5 deletions(-) diff --git a/static/js/ui.js b/static/js/ui.js index 301a307..2e29bb8 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -6,12 +6,16 @@ class UIManager { this.closeSettings = document.getElementById('closeSettings'); this.themeToggle = document.getElementById('themeToggle'); this.toastContainer = document.getElementById('toastContainer'); + this.visitorCountElement = document.getElementById('visitorCount'); // Check for preferred color scheme this.checkPreferredColorScheme(); // Initialize event listeners this.setupEventListeners(); + + // Initialize visitor counter + this.initVisitorCounter(); } checkPreferredColorScheme() { @@ -92,6 +96,83 @@ class UIManager { } }); } + + initVisitorCounter() { + try { + // 获取本地存储的计数 + let localCount = parseInt(localStorage.getItem('visitorCount') || '0'); + + // 检查是否是今天第一次访问 + const lastVisitDate = localStorage.getItem('lastVisitDate'); + const today = new Date().toDateString(); + + if (lastVisitDate !== today) { + // 今天第一次访问,增加计数 + localCount++; + localStorage.setItem('visitorCount', localCount.toString()); + localStorage.setItem('lastVisitDate', today); + + // 尝试向CountAPI发送计数增加请求 + this.incrementCountAPI(); + } + + // 显示计数 + this.updateVisitorCountDisplay(localCount); + + // 从CountAPI获取全局计数 + this.fetchGlobalCount(); + } catch (error) { + console.error('访问计数器初始化失败:', error); + this.visitorCountElement.textContent = '0'; + } + } + + incrementCountAPI() { + // 使用免费的CountAPI服务来增加计数 + // 注意:这个免费API有使用限制,生产环境可能需要更可靠的服务 + fetch('https://api.countapi.xyz/hit/snap-solver-app/visits') + .catch(error => console.error('无法更新全局计数:', error)); + } + + fetchGlobalCount() { + // 获取全局计数 + fetch('https://api.countapi.xyz/get/snap-solver-app/visits') + .then(response => response.json()) + .then(data => { + // 将全局计数与本地计数取较大值显示 + const localCount = parseInt(localStorage.getItem('visitorCount') || '0'); + const globalCount = data.value || 0; + const displayCount = Math.max(localCount, globalCount); + + this.updateVisitorCountDisplay(displayCount); + + // 如果全局计数更大,则更新本地存储 + if (globalCount > localCount) { + localStorage.setItem('visitorCount', globalCount.toString()); + } + }) + .catch(error => { + console.error('无法获取全局计数:', error); + // 如果全局计数获取失败,至少显示本地计数 + const localCount = parseInt(localStorage.getItem('visitorCount') || '0'); + this.updateVisitorCountDisplay(localCount); + }); + } + + updateVisitorCountDisplay(count) { + if (this.visitorCountElement) { + // 低调显示,超过1000显示为1k+,超过10000显示为10k+等 + if (count >= 10000) { + const kCount = Math.floor(count / 1000); + this.visitorCountElement.textContent = `${kCount}k+`; + } else if (count >= 1000) { + const kCount = Math.floor(count / 100) / 10; + this.visitorCountElement.textContent = `${kCount}k+`; + } else { + this.visitorCountElement.textContent = count.toString(); + } + } + } } // Export for use in other modules diff --git a/static/style.css b/static/style.css index 1dae8ee..3ad6ca1 100644 --- a/static/style.css +++ b/static/style.css @@ -1417,6 +1417,9 @@ button:disabled { .footer-text { color: var(--text-secondary); font-size: 0.9rem; + display: flex; + align-items: center; + gap: 1rem; } .footer-links { @@ -1450,6 +1453,32 @@ button:disabled { .user-counter { display: flex; align-items: center; + gap: 0.25rem; + opacity: 0.7; + font-size: 0.75rem; + color: var(--text-tertiary); +} + +.counter-badge { + display: flex; + align-items: center; + background: transparent; + border-radius: 4px; + overflow: hidden; + font-size: 0.75rem; + color: var(--text-tertiary); +} + +.counter-title { + display: none; +} + +.counter-number { + background-color: transparent; + color: var(--text-tertiary); + padding: 2px 4px; + font-size: 0.75rem; + font-weight: normal; } .user-counter img { diff --git a/templates/index.html b/templates/index.html index f5b93bd..80aa863 100644 --- a/templates/index.html +++ b/templates/index.html @@ -262,6 +262,10 @@