From 6f36a564b94c7fd7e30ef055b60f7feb62ff7ee9 Mon Sep 17 00:00:00 2001
From: Zylan <zihan.jian@outlook.com>
Date: Fri, 25 Apr 2025 13:57:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=BF=E9=97=AE=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BD=BF=E7=94=A8=20Script?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E8=84=9A=E6=9C=AC=EF=BC=8C=E5=B9=B6=E5=9C=A8?=
 =?UTF-8?q?=E9=A1=B5=E8=84=9A=E4=B8=AD=E6=98=BE=E7=A4=BA=E6=80=BB=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E9=87=8F=E5=92=8C=E6=80=BB=E8=AE=BF=E5=AE=A2=E6=95=B0?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E5=AF=B9=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E7=9A=84=E4=BA=92=E5=8A=A8=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 58 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f958a62..9eb30c2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,6 +4,7 @@ import React, { useState, useRef, ChangeEvent, DragEvent, TouchEvent, useEffect,
 // Image component from next/image might not be strictly needed if you only use canvas and basic elements,
 // but keep it if you plan to add other images later or use the SVG icon below.
 // Removed unused Image import
+import Script from 'next/script'; // ++ 导入 Script 组件 ++
 
 import beadPaletteData from './beadPaletteData.json';
 
@@ -982,6 +983,51 @@ export default function Home() {
   };
 
   return (
+    <>
+    {/* ++ 修改：添加 onLoad 回调函数 ++ */}
+    <Script
+      async
+      src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
+      strategy="lazyOnload"
+      onLoad={() => {
+        const basePV = 378536; // ++ 预设 PV 基数 ++
+        const baseUV = 257864; // ++ 预设 UV 基数 ++
+
+        const updateCount = (spanId: string, baseValue: number) => {
+          const targetNode = document.getElementById(spanId);
+          if (!targetNode) return;
+
+          const observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+              if (mutation.type === 'childList' || mutation.type === 'characterData') {
+                const currentValueText = targetNode.textContent?.trim() || '0';
+                if (currentValueText !== '...') {
+                  const currentValue = parseInt(currentValueText.replace(/,/g, ''), 10) || 0;
+                  targetNode.textContent = (currentValue + baseValue).toLocaleString();
+                  observer.disconnect(); // ++ 更新后停止观察 ++ 
+                  // console.log(`Updated ${spanId} from ${currentValueText} to ${targetNode.textContent}`);
+                  break; // 处理完第一个有效更新即可
+                }
+              }
+            }
+          });
+
+          observer.observe(targetNode, { childList: true, characterData: true, subtree: true });
+
+          // ++ 处理初始值已经是数字的情况 (如果脚本加载很快) ++
+          const initialValueText = targetNode.textContent?.trim() || '0';
+          if (initialValueText !== '...') {
+             const initialValue = parseInt(initialValueText.replace(/,/g, ''), 10) || 0;
+             targetNode.textContent = (initialValue + baseValue).toLocaleString();
+             observer.disconnect(); // 已更新，无需再观察
+          }
+        };
+
+        updateCount('busuanzi_value_site_pv', basePV);
+        updateCount('busuanzi_value_site_uv', baseUV);
+      }}
+    />
+
     <div className="min-h-screen p-4 sm:p-6 flex flex-col items-center bg-gray-50 font-[family-name:var(--font-geist-sans)]">
       <header className="w-full max-w-4xl text-center mt-6 mb-5 sm:mt-8 sm:mb-6">
         <h1 className="text-2xl sm:text-3xl font-bold text-gray-800">拼豆底稿生成器</h1>
@@ -1180,11 +1226,21 @@ export default function Home() {
       </main>
 
       <footer className="w-full max-w-4xl mt-10 mb-6 py-4 text-center text-xs sm:text-sm text-gray-500 border-t border-gray-200">
-        <p>拼豆底稿生成器 &copy; {new Date().getFullYear()}</p>
+        {/* ++ 修改：访问统计分行显示 ++ */}
+        <p>
+          拼豆底稿生成器 &copy; {new Date().getFullYear()}
+        </p>
+        <p id="busuanzi_container_site_pv" className="hidden sm:block mt-1"> {/* 使用 block 替代 inline, 移除 style */}
+          总浏览量 <span id="busuanzi_value_site_pv">...</span >次
+        </p>
+        <p id="busuanzi_container_site_uv" className="hidden sm:block mt-1"> {/* 使用 block 替代 inline, 移除 style */}
+          总访客数 <span id="busuanzi_value_site_uv">...</span >人
+        </p>
         <p className="mt-1">
           <a href="https://github.com/Zippland/perler-beads.git" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline ml-2">有用可以给github项目一个Star</a>
         </p>
       </footer>
     </div>
+   </>
   );
 }
\ No newline at end of file