From 7776df1268763ca8b201c121420e6f5ecb347674 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Tue, 25 Nov 2025 16:47:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(stats):=20=E9=87=8D=E6=9E=84=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用grid布局重构统计区域，替换原有的flex布局
- 添加响应式设计，适配PC、平板和移动端显示
- 为统计项添加悬停效果和过渡动画
- 集成verCount统计服务，替换不蒜子统计
- 添加数据格式化功能，支持K/W/M单位显示
- 增加访客数和访问量的国际化支持
- 优化统计数字的显示格式和可读性
---
 about.html    | 96 +++++++++++++++++++++++++++++++++++++-------------
 css/about.css | 97 +++++++++++++++++++++++++++++++++++++++++++--------
 js/about.js   | 17 ++++++++-
 3 files changed, 170 insertions(+), 40 deletions(-)

diff --git a/about.html b/about.html
index 39374d0..005300a 100644
--- a/about.html
+++ b/about.html
@@ -151,10 +151,12 @@
                     <span class="stat-key" data-i18n="stats.followers">Followers</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-val neon-font" id="visit-count">
-                        <span id="busuanzi_value_site_pv">--</span>
-                    </span>
-                    <span class="stat-key">Visitors</span>
+                    <span id="busuanzi_value_site_pv" style='display:none'>0</span>
+                    <span class="stat-key" data-i18n="stats.visitNum">Visit num</span>
+                </div>
+                <div class="stat-item">
+                    <span id="busuanzi_value_site_uv" style='display:none'>0</span>
+                    <span class="stat-key" data-i18n="stats.visitors">Visitors</span>
                 </div>
             </div>
 
@@ -324,11 +326,16 @@
 <script src="https://cdn.jsdelivr.net/npm/artalk@latest/dist/i18n/en.js"></script>
 <script src="js/about.js?version=20251125"></script>
 
-<!-- 不蒜子统计 -->
-<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+<!-- verCount统计 -->
+<script defer src="https://events.vercount.one/js"></script>
 
 <script>
-    !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"3OBGjwDdEIRS7XZ1",ck:"3OBGjwDdEIRS7XZ1"});
+    try {
+        !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"3OBGjwDdEIRS7XZ1",ck:"3OBGjwDdEIRS7XZ1"});
+    } catch (e) {
+        console.log("51.la统计错误", e);
+    }
+
 </script>
 <script>
     // 百度站点统计
@@ -346,29 +353,68 @@
     })();
 </script>
 
-<!-- 先定义 gtag 函数作为安全兜底 -->
-<script type="text/javascript">
-    try {
-        window.dataLayer = window.dataLayer || [];
-        function gtag() {
-            dataLayer.push(arguments);
+<!-- 自动格式化脚本 -->
+<script>
+    // 核心格式化函数：支持 K / W / M，保留最多两位小数，去除尾随零
+    function formatWithUnit(num) {
+        num = Number(num);
+        if (isNaN(num) || num < 0) return '0';
+
+        // 小于 1000：直接显示
+        if (num < 1_000) {
+            return Math.floor(num).toString();
         }
-        gtag('js', new Date());
-    } catch (e) {
-        console.log("Google Analytics Init 错误", e);
+
+        // 1K ~ 9.99K
+        if (num < 10_000) {
+            let val = (num / 1_000).toFixed(2);
+            return parseFloat(val) + 'K';
+        }
+
+        // 1W ~ 99.99W （1W = 10,000）
+        if (num < 1_000_000) {
+            let val = (num / 10_000).toFixed(2);
+            return parseFloat(val) + 'W';
+        }
+
+        // ≥ 1M
+        let val = (num / 1_000_000).toFixed(2);
+        return parseFloat(val) + 'M';
     }
 
-</script>
+    // 监听不蒜子数据更新并格式化
+    function initFormatter() {
+        const pvEl = document.getElementById('busuanzi_value_site_pv');
+        const uvEl = document.getElementById('busuanzi_value_site_uv');
 
-<!-- 再异步加载 Google 的 gtag.js -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
+        if (!pvEl && !uvEl) return;
 
-<!-- 可选：继续调用 config -->
-<script type="text/javascript">
-    try {
-        gtag('config', 'G-DYWDEVKDP0');
-    } catch (e) {
-        console.error("Google Analytics config 失败", e);
+        const observer = new MutationObserver(() => {
+            if (pvEl?.textContent) {
+                const raw = pvEl.textContent.trim().replace(/[,，]/g, '');
+                const num = parseFloat(raw);
+                if (!isNaN(num)) {
+                    pvEl.textContent = formatWithUnit(num);
+                }
+            }
+            if (uvEl?.textContent) {
+                const raw = uvEl.textContent.trim().replace(/[,，]/g, '');
+                const num = parseFloat(raw);
+                if (!isNaN(num)) {
+                    uvEl.textContent = formatWithUnit(num);
+                }
+            }
+        });
+
+        if (pvEl) observer.observe(pvEl, { childList: true, subtree: true });
+        if (uvEl) observer.observe(uvEl, { childList: true, subtree: true });
+    }
+
+    // 启动
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initFormatter);
+    } else {
+        initFormatter();
     }
 </script>
 </body>
diff --git a/css/about.css b/css/about.css
index be3dc08..7854b64 100644
--- a/css/about.css
+++ b/css/about.css
@@ -1769,37 +1769,105 @@ body {
 
 /* --- Stats --- */
 .area-stats {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: 20px 30px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+    padding: 20px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(128, 128, 128, 0.1);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .stat-item {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
-    padding: 10px 0;
+    padding: 12px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.9);
+    transition: all 0.3s ease;
+    min-width: 0;
+    text-align: center;
 }
 
-.stat-item:last-child {
-    border-bottom: none;
+.stat-item:hover {
+    background: rgba(108, 92, 231, 0.1);
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .stat-val {
     font-size: 1.5rem;
+    margin-bottom: 5px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: bold;
 }
 
 .stat-key {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     color: var(--text-tertiary);
     text-transform: uppercase;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-/* 访问人数统计样式 */
-#visit-count {
-    font-family: var(--font-mono);
+/* PC端统计区域响应式布局 */
+@media (min-width: 1025px) {
+    .area-stats {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+    }
+}
+
+/* 平板端统计区域布局 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .area-stats {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 6px;
+    }
+    
+    .stat-item {
+        padding: 10px 5px;
+    }
+    
+    .stat-val {
+        font-size: 1.3rem;
+    }
+    
+    .stat-key {
+        font-size: 0.7rem;
+    }
+}
+
+/* 移动端统计区域布局 */
+@media (max-width: 768px) {
+    .area-stats {
+        grid-template-columns: repeat(5, 1fr);
+        padding: 15px 10px;
+        gap: 4px;
+    }
+    
+    .stat-item {
+        padding: 8px 2px;
+    }
+    
+    .stat-val {
+        font-size: 1.1rem;
+        margin-bottom: 3px;
+    }
+    
+    .stat-key {
+        font-size: 0.6rem;
+    }
 }
 
 /* --- Mobile Social --- */
@@ -2138,10 +2206,11 @@ body {
 @media (min-width: 1025px) {
   .interest-list {
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: 1fr 1fr;
       gap: 15px;
       margin-top: 1rem;
   }
+  }
 
   .interest-item {
       background: rgba(128, 128, 128, 0.05);
diff --git a/js/about.js b/js/about.js
index c1f7138..808def6 100644
--- a/js/about.js
+++ b/js/about.js
@@ -79,6 +79,8 @@ class I18nManager {
                 "stats.exp": "编程年限",
                 "stats.repos": "开源项目",
                 "stats.followers": "关注者",
+                "stats.visitors": "访问量",
+                "stats.visitNum": "访客数",
                 "mbti.name": "提倡者",
                 "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
                 "mbti.tag1": "理想主义与道德感",
@@ -118,6 +120,8 @@ class I18nManager {
                 "stats.exp": "Years Exp",
                 "stats.repos": "Projects",
                 "stats.followers": "Followers",
+                "stats.visitors": "Visitors",
+                "stats.visitNum": "Visiting guests",
                 "mbti.name": "Advocate",
                 "mbti.desc": "Advocates of this personality type are very rare, with less than 1% of the population belonging to this type, but their contributions to the world cannot be ignored.",
                 "mbti.tag1": "Idealism & Morality",
@@ -324,7 +328,18 @@ class DataManager {
         });
     }
 
-
+    formatVisitors() {
+        const siteVisitorDom = window.document.getElementById('busuanzi_value_site_pv');
+        if (siteVisitorDom) {
+            let count = siteVisitorDom.innerText;
+            if (count && count.length > 3) {
+                // 格式化 k,w m等单位 支持两位小数点
+                count = count.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+                count = count.replace(/(\d+)(?=(\d{3})+(?:\.\d+)?$)/g, '$0 ');
+                siteVisitorDom.innerText = count;
+            }
+        }
+    }
     renderRepos(list) {
         if (!Array.isArray(list)) list = window.SiteConfig?.defaults?.repos;
         let html = '';