From 7d5e789bb0a58ab4c4a5f557bc49bed086b42a6b Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 06:54:54 +0800
Subject: [PATCH 1/6] Add service worker update notification and countdown
 feature

- Implemented a toast notification to inform users of available service worker updates, enhancing user awareness of new versions.
- Added a countdown timer for automatic updates, allowing users to manually trigger the update if desired.
- Refactored service worker update handling in main.ts to integrate the new notification system, improving user experience during updates.
---
 src/api/search.ts            | 26 +++++++++----
 src/components/VndbPanel.vue |  1 +
 src/main.ts                  | 74 +++++++++++++++++++++++++++++++++++-
 3 files changed, 91 insertions(+), 10 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index feb2633..e980416 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -69,7 +69,9 @@ export interface VideoParseResult {
  * @param vndbId VNDB ID (如 "v12345")
  */
 export async function fetchGameVideoUrl(vndbId: string): Promise<string | null> {
-  if (!vndbId) return null
+  if (!vndbId) {
+    return null
+  }
 
   try {
     const response = await fetch(getVideoParseApiUrl(), {
@@ -790,15 +792,14 @@ const COMBINED_PROMPT = `你是一名专业的视觉小说（Galgame/AVG）本
 - 台词：保留情感色彩和语气，注意口语化
 
 【输出格式】
-严格按以下格式输出，使用相同的分隔符：
-===SECTION===
+严格按照输入的相同格式输出，使用 ===SECTION=== 分隔三部分：
 翻译后的简介
 ===SECTION===
 翻译后的标签（每行一个，与输入行数对应）
 ===SECTION===
 翻译后的台词（每行一条，与输入行数对应）
 
-仅输出翻译结果，无需任何说明`
+注意：输出不要以 ===SECTION=== 开头，直接输出翻译内容。仅输出翻译结果，无需任何说明。`
 
 /**
  * AI 翻译文本
@@ -962,7 +963,9 @@ export async function translateAllContent(
       })
 
       if (!response.ok) {
-        if (attempt === maxRetries) return result
+        if (attempt === maxRetries) {
+          return result
+        }
         await new Promise((r) => setTimeout(r, 1000 * (attempt + 1)))
         continue
       }
@@ -971,8 +974,13 @@ export async function translateAllContent(
       const content = data.choices?.[0]?.message?.content?.trim()
 
       if (content) {
-        // 解析返回结果 - 保留空字符串以维持索引对应关系
-        const parts = content.split(/===SECTION===/).map((s: string) => s.trim())
+        // 解析返回结果
+        let parts = content.split(/===SECTION===/).map((s: string) => s.trim())
+        
+        // 如果 AI 以 ===SECTION=== 开头，第一个元素会是空字符串，需要过滤掉
+        if (parts[0] === '') {
+          parts = parts.slice(1)
+        }
         
         // 索引 0 = 描述, 索引 1 = 标签, 索引 2 = 名言
         if (parts[0] && descText) {
@@ -997,7 +1005,9 @@ export async function translateAllContent(
 
       return result
     } catch {
-      if (attempt === maxRetries) return result
+      if (attempt === maxRetries) {
+        return result
+      }
       await new Promise((r) => setTimeout(r, 1000 * (attempt + 1)))
     }
   }
diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index d9e7f55..13b4248 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -623,6 +623,7 @@ const screenshotsReady = ref(false)
 // PV 视频状态
 const pvVideoUrl = ref<string | null>(null)
 const isPvLoading = ref(false)
+// eslint-disable-next-line no-undef
 const pvVideoRef = ref<HTMLVideoElement | null>(null)
 
 // 视频加载完成后暂停在第一帧
diff --git a/src/main.ts b/src/main.ts
index f8d991c..04db4a4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -59,6 +59,72 @@ app.mount('#app')
 // Service Worker 注册与更新
 // ============================================
 
+// 显示更新提示
+function showUpdateToast(onUpdate: () => void) {
+  // 创建 toast 元素
+  const toast = document.createElement('div')
+  toast.id = 'sw-update-toast'
+  toast.innerHTML = `
+    <div style="
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: linear-gradient(135deg, #ff1493, #d946ef);
+      color: white;
+      padding: 16px 24px;
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(255, 20, 147, 0.3);
+      z-index: 99999;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 14px;
+      animation: slideUp 0.3s ease-out;
+    ">
+      <span>🎉 发现新版本，<span id="sw-countdown">5</span> 秒后自动更新</span>
+      <button id="sw-update-now" style="
+        background: rgba(255,255,255,0.2);
+        border: none;
+        color: white;
+        padding: 6px 12px;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+      ">立即更新</button>
+    </div>
+    <style>
+      @keyframes slideUp {
+        from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+        to { opacity: 1; transform: translateX(-50%) translateY(0); }
+      }
+    </style>
+  `
+  document.body.appendChild(toast)
+
+  // 倒计时
+  let countdown = 5
+  const countdownEl = document.getElementById('sw-countdown')
+  const interval = setInterval(() => {
+    countdown--
+    if (countdownEl) {
+      countdownEl.textContent = String(countdown)
+    }
+    if (countdown <= 0) {
+      clearInterval(interval)
+      onUpdate()
+    }
+  }, 1000)
+
+  // 立即更新按钮
+  document.getElementById('sw-update-now')?.addEventListener('click', () => {
+    clearInterval(interval)
+    onUpdate()
+  })
+}
+
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', async () => {
     try {
@@ -75,8 +141,12 @@ if ('serviceWorker' in navigator) {
         worker.addEventListener('statechange', () => {
           // 新 SW 安装完成且有旧 SW 控制页面 = 有更新
           if (worker.state === 'installed' && navigator.serviceWorker.controller) {
-            console.log('[SW] Update available, activating...')
-            worker.postMessage({ type: 'SKIP_WAITING' })
+            console.log('[SW] Update available')
+            // 显示更新提示，5 秒后自动更新
+            showUpdateToast(() => {
+              console.log('[SW] Activating update...')
+              worker.postMessage({ type: 'SKIP_WAITING' })
+            })
           }
         })
       })

From ccd87d06be667cd45cc0a7e8fc9b195305b6da2d Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 07:00:22 +0800
Subject: [PATCH 2/6] Enhance image loading and refactor screenshot handling in
 VndbPanel.vue

- Added `referrerpolicy="no-referrer"` to image elements to improve privacy during image loading.
- Removed unused `screenshotsReady` state and related logic, simplifying the component's state management.
- Updated class names for consistency and improved styling of screenshot buttons.
- Cleaned up comments for better clarity regarding screenshot loading behavior.
---
 src/components/VndbPanel.vue | 39 +++++++-----------------------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index 13b4248..cb8ffc0 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -97,6 +97,7 @@
                     :alt="searchStore.vndbInfo.mainName"
                     class="w-full h-auto rounded-2xl shadow-lg cursor-pointer hover:opacity-90 hover:scale-[1.02] transition-all"
                     loading="lazy"
+                    referrerpolicy="no-referrer"
                     @error="handleImageError"
                   />
                 </button>
@@ -377,6 +378,7 @@
                         :alt="char.name"
                         class="absolute inset-0 w-full h-full object-cover"
                         loading="lazy"
+                        referrerpolicy="no-referrer"
                         @load="($event.target as HTMLElement).parentElement?.querySelector('.skeleton')?.classList.add('hidden')"
                       />
                     </template>
@@ -513,10 +515,9 @@
               </div>
             </div>
 
-            <!-- 游戏截图 (等待首张图片加载后显示) -->
+            <!-- 游戏截图 -->
             <div 
               v-if="searchStore.vndbInfo.screenshots && searchStore.vndbInfo.screenshots.length > 0" 
-              v-show="screenshotsReady"
               class="vndb-card"
             >
               <div class="flex items-center gap-2 mb-4">
@@ -527,14 +528,15 @@
                 <button
                   v-for="(screenshot, index) in searchStore.vndbInfo.screenshots"
                   :key="index"
-                  class="group block overflow-hidden rounded-xl hover:scale-[1.02] transition-transform"
+                  class="group block overflow-hidden rounded-xl hover:scale-[1.02] transition-transform bg-gray-100 dark:bg-slate-700"
                   @click="openGallery(index + 1)"
                 >
                   <img
                     :src="screenshot"
                     :alt="`${searchStore.vndbInfo.mainName} 截图 ${index + 1}`"
                     class="w-full h-auto cursor-pointer group-hover:scale-105 transition-transform duration-300"
-                    @load="screenshotsReady = true"
+                    loading="lazy"
+                    referrerpolicy="no-referrer"
                     @error="handleImageError"
                   />
                 </button>
@@ -548,7 +550,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useSearchStore, type VndbCharacter, type VndbQuote } from '@/stores/search'
 import { useUIStore } from '@/stores/ui'
 import { translateAllContent, fetchVndbCharacters, fetchVndbQuotes, fetchGameVideoUrl } from '@/api/search'
@@ -617,8 +619,6 @@ const hasAnyTranslation = computed(() =>
   translatedDescription.value || translatedTags.value.size > 0 || translatedQuotes.value.size > 0,
 )
 
-// 截图加载状态
-const screenshotsReady = ref(false)
 
 // PV 视频状态
 const pvVideoUrl = ref<string | null>(null)
@@ -680,8 +680,6 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
   translateQuotesError.value = false
   // 重置一键翻译状态
   isTranslatingAllRef.value = false
-  // 重置截图加载状态
-  screenshotsReady.value = false
   // 重置角色和名言
   characters.value = []
   quotes.value = []
@@ -698,7 +696,6 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
   
   // 先捕获游戏 ID，用于后续竞态检查
   const vnIdAtStart = newInfo?.id || null
-  const vnIdForScreenshots = newInfo?.id
   
   // 更新当前游戏 ID
   currentVnId.value = vnIdAtStart
@@ -713,28 +710,6 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
       }
     })
   }
-  
-  // 检查缓存的截图是否已加载
-  if (newInfo?.screenshots && newInfo.screenshots.length > 0) {
-    nextTick(() => {
-      requestAnimationFrame(() => {
-        // 竞态检查：如果用户已切换到其他游戏，跳过处理
-        if (vnIdForScreenshots && currentVnId.value !== vnIdForScreenshots) {
-          return
-        }
-        const screenshotImgs = modalRef.value?.querySelectorAll('img[alt*="截图"]')
-        if (screenshotImgs) {
-          for (let i = 0; i < screenshotImgs.length; i++) {
-            const img = screenshotImgs[i] as HTMLImageElement
-            if (img.complete && img.naturalHeight > 0) {
-              screenshotsReady.value = true
-              break
-            }
-          }
-        }
-      })
-    })
-  }
 }, { immediate: true })
 
 // 加载角色、名言和 PV 视频

From 9e45db827d082335df6ff9ea202f40d2132c24f9 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 07:10:49 +0800
Subject: [PATCH 3/6] Enhance component visuals and functionality across
 multiple files

- Updated CommentsModal.vue to include additional icons and improved title display for better user engagement.
- Enhanced KeyboardHelpPanel.vue by adding icons next to navigation and operation shortcuts for improved clarity.
- Refactored ResultItem.vue to include a copy link feature with visual feedback, enhancing user interaction.
- Improved SearchHistoryModal.vue by adding icons and additional text for better user guidance on search history.
- Updated StatsCorner.vue to replace the gamepad icon and add status indicators for online/offline status.
- Refactored icons management in icons.ts for better organization and maintainability.
---
 src/components/CommentsModal.vue      |  13 +-
 src/components/KeyboardHelpPanel.vue  |  82 +++-
 src/components/ResultItem.vue         |  55 ++-
 src/components/SearchHistoryModal.vue |  35 +-
 src/components/StatsCorner.vue        |  25 +-
 src/utils/icons.ts                    | 577 +++++++++++++++++++++++++-
 6 files changed, 736 insertions(+), 51 deletions(-)

diff --git a/src/components/CommentsModal.vue b/src/components/CommentsModal.vue
index a43b49b..82bf69b 100644
--- a/src/components/CommentsModal.vue
+++ b/src/components/CommentsModal.vue
@@ -29,10 +29,17 @@
 
           <!-- 标题 -->
           <div class="flex items-center gap-2 md:ml-0">
-            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#ff1493] to-[#d946ef] flex items-center justify-center shadow-lg shadow-pink-500/30">
+            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#ff1493] to-[#d946ef] flex items-center justify-center shadow-lg shadow-pink-500/30 relative">
               <MessageCircle :size="16" class="text-white" />
+              <Send :size="8" class="text-white/80 absolute -bottom-0.5 -right-0.5" />
+            </div>
+            <div>
+              <h1 class="text-base sm:text-lg font-bold text-gray-800 dark:text-white flex items-center gap-1.5">
+                评论区
+                <Sparkles :size="14" class="text-amber-400" />
+              </h1>
+              <p class="text-xs text-gray-500 dark:text-slate-400 hidden md:block">欢迎留下你的想法 💬</p>
             </div>
-            <h1 class="text-base sm:text-lg font-bold text-gray-800 dark:text-white">评论区</h1>
           </div>
 
           <!-- 右侧按钮组 -->
@@ -67,7 +74,7 @@ import { watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { useUIStore } from '@/stores/ui'
 import { playTransitionUp, playTransitionDown } from '@/composables/useSound'
 import Artalk from 'artalk/dist/Artalk.mjs'
-import { MessageCircle, ChevronLeft, X } from 'lucide-vue-next'
+import { MessageCircle, ChevronLeft, X, Sparkles, Send } from 'lucide-vue-next'
 
 interface ArtalkInstance {
   destroy(): void
diff --git a/src/components/KeyboardHelpPanel.vue b/src/components/KeyboardHelpPanel.vue
index 385ebe9..bca0a64 100644
--- a/src/components/KeyboardHelpPanel.vue
+++ b/src/components/KeyboardHelpPanel.vue
@@ -42,34 +42,58 @@
           <div class="px-5 py-4 max-h-[60vh] overflow-y-auto custom-scrollbar">
             <!-- 导航 -->
             <div class="mb-4">
-              <h3 class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider mb-2">导航</h3>
+              <h3 class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider mb-2 flex items-center gap-1.5">
+                <Navigation :size="12" />
+                导航
+              </h3>
               <div class="space-y-2">
                 <div class="shortcut-row">
-                  <span>关闭当前面板</span>
+                  <span class="flex items-center gap-2">
+                    <X :size="14" class="text-gray-400" />
+                    关闭当前面板
+                  </span>
                   <kbd>Esc</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>返回首页</span>
+                  <span class="flex items-center gap-2">
+                    <Home :size="14" class="text-blue-400" />
+                    返回首页
+                  </span>
                   <kbd>H</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>打开/关闭设置</span>
+                  <span class="flex items-center gap-2">
+                    <Settings :size="14" class="text-gray-400" />
+                    打开/关闭设置
+                  </span>
                   <kbd>,</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>打开/关闭评论</span>
+                  <span class="flex items-center gap-2">
+                    <MessageSquare :size="14" class="text-pink-400" />
+                    打开/关闭评论
+                  </span>
                   <kbd>C</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>打开/关闭作品介绍</span>
+                  <span class="flex items-center gap-2">
+                    <BookOpen :size="14" class="text-purple-400" />
+                    打开/关闭作品介绍
+                  </span>
                   <kbd>V</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>打开/关闭搜索历史</span>
+                  <span class="flex items-center gap-2">
+                    <History :size="14" class="text-amber-400" />
+                    打开/关闭搜索历史
+                  </span>
                   <kbd>Y</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>站点导航</span>
+                  <span class="flex items-center gap-2">
+                    <Grid3x3 :size="14" class="text-cyan-400" />
+                    站点导航
+                  </span>
                   <kbd>N</kbd>
                 </div>
               </div>
@@ -77,14 +101,23 @@
 
             <!-- 操作 -->
             <div class="mb-4">
-              <h3 class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider mb-2">操作</h3>
+              <h3 class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider mb-2 flex items-center gap-1.5">
+                <Zap :size="12" />
+                操作
+              </h3>
               <div class="space-y-2">
                 <div class="shortcut-row">
-                  <span>聚焦搜索框</span>
+                  <span class="flex items-center gap-2">
+                    <Search :size="14" class="text-green-400" />
+                    聚焦搜索框
+                  </span>
                   <kbd>/</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>显示/隐藏快捷键帮助</span>
+                  <span class="flex items-center gap-2">
+                    <HelpCircle :size="14" class="text-indigo-400" />
+                    显示/隐藏快捷键帮助
+                  </span>
                   <kbd>?</kbd>
                 </div>
               </div>
@@ -92,18 +125,30 @@
 
             <!-- 滚动 -->
             <div>
-              <h3 class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider mb-2">滚动</h3>
+              <h3 class="text-xs font-semibold text-gray-400 dark:text-slate-500 uppercase tracking-wider mb-2 flex items-center gap-1.5">
+                <Command :size="12" />
+                滚动
+              </h3>
               <div class="space-y-2">
                 <div class="shortcut-row">
-                  <span>回到顶部</span>
+                  <span class="flex items-center gap-2">
+                    <ArrowUp :size="14" class="text-rose-400" />
+                    回到顶部
+                  </span>
                   <kbd>T</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>上一个平台</span>
+                  <span class="flex items-center gap-2">
+                    <ChevronLeft :size="14" class="text-orange-400" />
+                    上一个平台
+                  </span>
                   <kbd>[</kbd>
                 </div>
                 <div class="shortcut-row">
-                  <span>下一个平台</span>
+                  <span class="flex items-center gap-2">
+                    <ChevronRight :size="14" class="text-orange-400" />
+                    下一个平台
+                  </span>
                   <kbd>]</kbd>
                 </div>
               </div>
@@ -119,7 +164,12 @@
 import { ref } from 'vue'
 import { useUIStore } from '@/stores/ui'
 import { playTransitionDown } from '@/composables/useSound'
-import { Keyboard, X } from 'lucide-vue-next'
+import { 
+  Keyboard, X, 
+  Home, Settings, MessageSquare, BookOpen, History, Grid3x3, Search, HelpCircle,
+  ArrowUp, ChevronLeft, ChevronRight,
+  Navigation, Command, Zap
+} from 'lucide-vue-next'
 
 const uiStore = useUIStore()
 const panelRef = ref<HTMLElement | null>(null)
diff --git a/src/components/ResultItem.vue b/src/components/ResultItem.vue
index 284bc6b..ba50b66 100644
--- a/src/components/ResultItem.vue
+++ b/src/components/ResultItem.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { Link as LinkIcon } from 'lucide-vue-next'
+import { Link as LinkIcon, ExternalLink, FileText, Copy, Check } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { playTap, playNotification } from '@/composables/useSound'
 
 defineProps<{
   index: number
@@ -9,6 +11,8 @@ defineProps<{
   }
 }>()
 
+const copied = ref(false)
+
 // 从URL中提取路径
 function extractPath(url: string): string {
   try {
@@ -18,6 +22,21 @@ function extractPath(url: string): string {
     return url
   }
 }
+
+// 复制链接
+async function copyLink(url: string) {
+  playTap()
+  try {
+    await navigator.clipboard.writeText(url)
+    playNotification()
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch {
+    // 静默处理
+  }
+}
 </script>
 
 <template>
@@ -30,22 +49,42 @@ function extractPath(url: string): string {
   >
     <!-- 标题行 -->
     <div class="flex items-start gap-2 sm:gap-3">
-      <span class="text-theme-primary dark:text-theme-accent text-sm font-bold mt-0.5 shrink-0 opacity-60 group-hover:opacity-100">
-        {{ index + 1 }}.
-      </span>
+      <!-- 序号 + 文件图标 -->
+      <div class="flex items-center gap-1.5 shrink-0 mt-0.5">
+        <FileText :size="14" class="text-theme-primary/60 dark:text-theme-accent/60 group-hover:text-theme-primary dark:group-hover:text-theme-accent transition-colors" />
+        <span class="text-theme-primary dark:text-theme-accent text-sm font-bold opacity-60 group-hover:opacity-100 transition-opacity">
+          {{ index + 1 }}
+        </span>
+      </div>
+      
+      <!-- 标题链接 -->
       <a
         :href="source.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-gray-800 dark:text-slate-200 group-hover:text-theme-primary dark:group-hover:text-theme-accent font-semibold flex-1 text-sm sm:text-base break-words leading-relaxed"
+        class="flex-1 flex items-start gap-1.5 text-gray-800 dark:text-slate-200 group-hover:text-theme-primary dark:group-hover:text-theme-accent font-semibold text-sm sm:text-base break-words leading-relaxed transition-colors"
       >
-        {{ source.title }}
+        <span class="flex-1">{{ source.title }}</span>
+        <ExternalLink :size="14" class="shrink-0 mt-1 opacity-0 group-hover:opacity-70 transition-opacity" />
       </a>
+      
+      <!-- 复制按钮 -->
+      <button
+        class="shrink-0 p-1.5 rounded-lg opacity-0 group-hover:opacity-100 
+               text-gray-400 hover:text-theme-primary dark:hover:text-theme-accent
+               hover:bg-theme-primary/10 dark:hover:bg-theme-accent/10
+               transition-all"
+        :class="{ '!opacity-100 !text-green-500': copied }"
+        :title="copied ? '已复制' : '复制链接'"
+        @click.stop="copyLink(source.url)"
+      >
+        <component :is="copied ? Check : Copy" :size="14" />
+      </button>
     </div>
     
     <!-- 资源相对路径（从URL中提取） -->
-    <div v-if="source.url" class="flex items-center gap-2 mt-2 ml-6 sm:ml-8">
-      <LinkIcon :size="12" class="text-theme-primary/50 dark:text-theme-accent/50" />
+    <div v-if="source.url" class="flex items-center gap-2 mt-2 ml-7 sm:ml-9">
+      <LinkIcon :size="12" class="text-theme-primary/50 dark:text-theme-accent/50 shrink-0" />
       <span class="text-xs text-gray-500 dark:text-slate-400 break-all font-mono bg-gray-100/80 dark:bg-slate-800/80 px-2 py-1 rounded">
         {{ extractPath(source.url) }}
       </span>
diff --git a/src/components/SearchHistoryModal.vue b/src/components/SearchHistoryModal.vue
index 0e9e374..da4f180 100644
--- a/src/components/SearchHistoryModal.vue
+++ b/src/components/SearchHistoryModal.vue
@@ -57,11 +57,14 @@
               class="flex flex-col items-center justify-center py-8 text-center"
             >
               <div class="w-12 h-12 rounded-xl bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center mb-3">
-                <History :size="24" class="text-amber-400/50" />
+                <Clock :size="24" class="text-amber-400/50" />
               </div>
               <p class="text-sm text-gray-500 dark:text-gray-400">
                 暂无搜索历史
               </p>
+              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                搜索后会自动记录
+              </p>
             </div>
 
             <!-- 历史记录列表 -->
@@ -86,29 +89,35 @@
                   @keydown.enter="handleSelectHistory(item)"
                   @keydown.space.prevent="handleSelectHistory(item)"
                 >
-                  <!-- 模式标签 -->
+                  <!-- 模式标签 + 图标 -->
                   <span
-                    class="text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wide flex-shrink-0"
+                    class="flex items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wide flex-shrink-0"
                     :class="item.mode === 'game' 
                       ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400' 
                       : 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400'"
                   >
+                    <component :is="item.mode === 'game' ? Gamepad2 : Wrench" :size="10" />
                     {{ item.mode === 'game' ? '游戏' : '补丁' }}
                   </span>
                   
-                  <!-- 搜索关键词 -->
-                  <span 
-                    v-text-scroll 
-                    class="flex-1 text-sm font-medium text-gray-700 dark:text-slate-200 text-left group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors"
-                  >
-                    {{ item.query }}
-                  </span>
+                  <!-- 搜索图标 + 关键词 -->
+                  <div class="flex-1 flex items-center gap-1.5 min-w-0">
+                    <Search :size="12" class="text-gray-400 dark:text-slate-500 shrink-0 group-hover:text-amber-500 transition-colors" />
+                    <span 
+                      v-text-scroll 
+                      class="flex-1 text-sm font-medium text-gray-700 dark:text-slate-200 text-left group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors"
+                    >
+                      {{ item.query }}
+                    </span>
+                  </div>
 
-                  <!-- 结果数 -->
+                  <!-- 结果数 + 图标 -->
                   <span 
                     v-if="item.resultCount" 
-                    class="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0"
+                    class="flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0"
+                    :title="`${item.resultCount} 条结果`"
                   >
+                    <Hash :size="10" />
                     {{ item.resultCount }}
                   </span>
 
@@ -135,7 +144,7 @@ import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useUIStore } from '@/stores/ui'
 import { loadSearchHistory, clearSearchHistory as clearHistoryStorage, type SearchHistory } from '@/utils/persistence'
 import { playSelect, playTap, playCaution, playTransitionUp, playTransitionDown } from '@/composables/useSound'
-import { History, Trash2, X } from 'lucide-vue-next'
+import { History, Trash2, X, Gamepad2, Wrench, Hash, Clock, Search } from 'lucide-vue-next'
 
 const uiStore = useUIStore()
 const history = ref<SearchHistory[]>([])
diff --git a/src/components/StatsCorner.vue b/src/components/StatsCorner.vue
index 8df889a..39bff83 100644
--- a/src/components/StatsCorner.vue
+++ b/src/components/StatsCorner.vue
@@ -3,7 +3,7 @@
   <div class="fixed top-4 left-4 z-40 flex items-center gap-2">
     <!-- Gamepad 图标 - 品牌标识 -->
     <div class="glassmorphism-card rounded-2xl shadow-lg p-2.5 flex items-center justify-center">
-      <GamepadDirectional 
+      <Gamepad2 
         :size="22" 
         class="text-theme-primary dark:text-theme-accent"
       />
@@ -23,6 +23,19 @@
             : 'text-red-600 dark:text-red-400'
       ]"
     >
+      <!-- 状态图标 -->
+      <component
+        :is="statusOnline === null ? Activity : statusOnline ? Wifi : WifiOff"
+        :size="14"
+        :class="[
+          statusOnline === null ? 'animate-pulse' : '',
+          statusOnline === null 
+            ? 'text-gray-400' 
+            : statusOnline
+              ? 'text-green-500'
+              : 'text-red-500'
+        ]"
+      />
       <span 
         class="w-2 h-2 rounded-full"
         :class="[
@@ -45,15 +58,17 @@
   >
     <div class="stats-card glassmorphism-card rounded-2xl shadow-lg px-4 py-3 flex flex-col gap-2">
       <!-- 访问量 -->
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2" title="总访问量">
         <Eye :size="16" class="text-theme-primary dark:text-theme-accent" />
+        <span class="text-xs text-gray-500 dark:text-slate-400">PV</span>
         <span id="busuanzi_value_site_pv" class="font-semibold text-gray-800 dark:text-slate-100">0</span>
       </div>
       <!-- 分隔线 -->
-      <div class="h-px bg-gray-300 dark:bg-slate-600" />
+      <div class="h-px bg-gray-300/50 dark:bg-slate-600/50" />
       <!-- 访客数 -->
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2" title="独立访客">
         <Users :size="16" class="text-theme-primary dark:text-theme-accent" />
+        <span class="text-xs text-gray-500 dark:text-slate-400">UV</span>
         <span id="busuanzi_value_site_uv" class="font-semibold text-gray-800 dark:text-slate-100">0</span>
       </div>
     </div>
@@ -62,7 +77,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { GamepadDirectional, Eye, Users } from 'lucide-vue-next'
+import { Gamepad2, Eye, Users, Activity, Wifi, WifiOff } from 'lucide-vue-next'
 
 const statusOnline = ref<boolean | null>(null)
 const showStats = ref(false)
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index a9386d7..f4d81a9 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -1,11 +1,13 @@
 /**
  * Lucide Icons 映射
- * 用于替代 Font Awesome
+ * 集中管理所有图标导出，方便维护和 tree-shaking
  */
 
 // 导出所有需要的 Lucide 图标
 export {
+  // ============================================
   // 通用图标
+  // ============================================
   Search,
   Settings,
   Moon,
@@ -22,7 +24,9 @@ export {
   Info,
   HelpCircle,
   
+  // ============================================
   // 操作图标
+  // ============================================
   Download,
   Upload,
   Share2,
@@ -32,100 +36,617 @@ export {
   Copy,
   ExternalLink,
   Link,
+  Link2,
   ArrowDown,
   ArrowUp,
+  ArrowLeft,
+  ArrowRight,
+  ArrowLeftRight,
+  RotateCw,
   RotateCcw,
+  RefreshCw,
+  RefreshCcw,
+  CornerDownLeft,
+  Undo,
+  Redo,
   
+  // ============================================
+  // 缩放/变换
+  // ============================================
+  ZoomIn,
+  ZoomOut,
+  Maximize,
+  Maximize2,
+  Minimize,
+  Minimize2,
+  FlipHorizontal,
+  FlipVertical,
+  Move,
+  
+  // ============================================
   // 社交/通信
+  // ============================================
   MessageCircle,
+  MessageSquare,
   Heart,
   Star,
   Crown,
   Github,
+  Quote,
+  Reply,
+  Send,
+  Mail,
+  AtSign,
   
+  // ============================================
   // 文件/文档
+  // ============================================
   File,
   FileText,
+  FileCode,
   Folder,
+  FolderOpen,
   Image,
+  Images,
   
+  // ============================================
   // 用户/账户
+  // ============================================
   User,
   Users,
   UserPlus,
+  UserMinus,
+  UserCheck,
   LogIn,
   LogOut,
   
+  // ============================================
   // 商业/支付
+  // ============================================
   DollarSign,
   CreditCard,
   ShoppingCart,
   Coins,
+  Wallet,
   
+  // ============================================
   // 媒体/内容
+  // ============================================
   Play,
   Pause,
+  Square, // 用作 Stop 图标
   SkipForward,
   SkipBack,
   FastForward,
   Rewind,
+  Volume,
+  Volume1,
   Volume2,
   VolumeX,
   
+  // ============================================
   // 状态/标记
+  // ============================================
   CheckCircle,
+  CheckCircle2,
   XCircle,
   Circle,
+  CircleDot,
   Loader,
+  Loader2,
   Zap,
   
+  // ============================================
   // 网络/数据
+  // ============================================
   Wifi,
   WifiOff,
   Server,
   Database,
   Cloud,
+  CloudDownload,
+  CloudUpload,
+  Globe,
   
+  // ============================================
   // 导航/地图
+  // ============================================
   MapPin,
   Navigation,
   Compass,
+  Home,
   
-  // 工具
+  // ============================================
+  // 工具/设置
+  // ============================================
   Wrench,
   Gauge,
   Package,
   Tag,
+  Tags,
   Hash,
   Filter,
+  SlidersHorizontal,
+  Cog,
+  Terminal,
+  Code,
+  Code2,
   
+  // ============================================
   // 速度/性能
+  // ============================================
   Rocket,
   Turtle,
   Layers,
+  Layers2,
   
-  // 磁力/特殊
+  // ============================================
+  // 特殊/魔法
+  // ============================================
   Magnet,
   Sparkles,
   Wand2,
-  Reply,
+  Bot,
+  
+  // ============================================
+  // 布局/视图
+  // ============================================
   List,
   LayoutGrid,
+  LayoutList,
+  Grid2x2,
+  Grid3x3,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  
+  // ============================================
+  // 眼睛/可见性
+  // ============================================
   Eye,
   EyeOff,
+  
+  // ============================================
+  // 安全/锁定
+  // ============================================
   Lock,
   Unlock,
   Shield,
-  Home,
+  ShieldCheck,
+  ShieldAlert,
+  ShieldOff,
+  Key,
+  
+  // ============================================
+  // 游戏/娱乐
+  // ============================================
+  Gamepad,
   Gamepad2,
-  MessageSquare,
+  
+  // ============================================
+  // 书籍/阅读
+  // ============================================
   Bookmark,
   BookOpen,
+  BookMarked,
+  Library,
+  
+  // ============================================
+  // 音乐/音频
+  // ============================================
   Music,
+  Music2,
+  Music3,
+  Music4,
   Headphones,
+  Mic,
+  Mic2,
+  MicOff,
+  
+  // ============================================
+  // 艺术/设计
+  // ============================================
   Palette,
   Paintbrush,
   Brush,
+  Pipette,
+  
+  // ============================================
+  // 时间/日历
+  // ============================================
+  Clock,
+  Clock2,
+  Clock3,
+  Clock4,
+  Timer,
+  TimerOff,
+  Calendar,
+  CalendarDays,
+  History,
+  Hourglass,
+  
+  // ============================================
+  // 建筑/办公
+  // ============================================
+  Building,
+  Building2,
+  Factory,
+  Store,
+  
+  // ============================================
+  // 显示器/设备
+  // ============================================
+  Monitor,
+  Laptop,
+  Tablet,
+  Smartphone,
+  Tv,
+  
+  // ============================================
+  // 语言/翻译
+  // ============================================
+  Languages,
+  
+  // ============================================
+  // Git/版本控制
+  // ============================================
+  GitBranch,
+  GitCommit,
+  GitMerge,
+  GitPullRequest,
+  GitPullRequestArrow,
+  
+  // ============================================
+  // 灯光/提示
+  // ============================================
+  Lightbulb,
+  LightbulbOff,
+  
+  // ============================================
+  // 键盘/输入
+  // ============================================
+  Keyboard,
+  Type,
+  
+  // ============================================
+  // 电源/开关
+  // ============================================
+  Power,
+  PowerOff,
+  ToggleLeft,
+  ToggleRight,
+  
+  // ============================================
+  // 其他常用
+  // ============================================
+  Plus,
+  Minus,
+  PlusCircle,
+  MinusCircle,
+  MoreHorizontal,
+  MoreVertical,
+  Grip,
+  GripVertical,
+  GripHorizontal,
+  SeparatorHorizontal,
+  SeparatorVertical,
+  Slash,
+  Activity,
+  TrendingUp,
+  TrendingDown,
+  BarChart,
+  BarChart2,
+  PieChart,
+  LineChart,
+  Target,
+  Crosshair,
+  Scan,
+  QrCode,
+  Printer,
+  Archive,
+  Box,
+  Boxes,
+  Gift,
+  Award,
+  Trophy,
+  Medal,
+  Bell,
+  BellOff,
+  BellRing,
+  Flag,
+  Bookmark as BookmarkIcon,
+  Pin,
+  PinOff,
+  Paperclip,
+  Scissors,
+  Eraser,
+  Pencil,
+  PenTool,
+  Highlighter,
+  Ruler,
+  Crop,
+  Frame,
+  FrameIcon,
+  Camera,
+  Aperture,
+  Focus,
+  SunMedium,
+  CloudSun,
+  CloudMoon,
+  Sunrise,
+  Sunset,
+  Wind,
+  Droplet,
+  Droplets,
+  Thermometer,
+  Umbrella,
+  Snowflake,
+  Flame,
+  Leaf,
+  TreeDeciduous,
+  Flower,
+  Flower2,
+  Bug,
+  Cat,
+  Dog,
+  Bird,
+  Fish,
+  Rabbit,
+  Squirrel,
+  Rat,
+  Snail,
+  PawPrint,
+  Footprints,
+  Accessibility,
+  Baby,
+  PersonStanding,
+  Contact,
+  Contact2,
+  Fingerprint,
+  ScanFace,
+  Skull,
+  Ghost,
+  Laugh,
+  Smile,
+  Frown,
+  Meh,
+  Angry,
+  Annoyed,
+  PartyPopper,
+  Gem,
+  Diamond,
+  Shapes,
+  Triangle,
+  Pentagon,
+  Hexagon,
+  Octagon,
+  CircleDashed,
+  SquareDashed,
+  BadgeCheck,
+  BadgeAlert,
+  BadgeX,
+  BadgePlus,
+  BadgeMinus,
+  BadgePercent,
+  BadgeDollarSign,
+  BadgeHelp,
+  BadgeInfo,
+  Verified,
+  ShieldQuestion,
+  FileQuestion,
+  HelpingHand,
+  HandMetal,
+  Hand,
+  ThumbsUp,
+  ThumbsDown,
+  MousePointer,
+  MousePointer2,
+  MousePointerClick,
+  Pointer,
+  Move3d,
+  Grab,
+  GalleryVertical,
+  GalleryHorizontal,
+  GalleryVerticalEnd,
+  GalleryHorizontalEnd,
+  Columns,
+  Columns2,
+  Columns3,
+  Rows,
+  Rows2,
+  Rows3,
+  LayoutDashboard,
+  LayoutPanelLeft,
+  LayoutPanelTop,
+  LayoutTemplate,
+  PanelLeft,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRight,
+  PanelRightClose,
+  PanelRightOpen,
+  PanelTop,
+  PanelTopClose,
+  PanelTopOpen,
+  PanelBottom,
+  PanelBottomClose,
+  PanelBottomOpen,
+  SidebarOpen,
+  SidebarClose,
+  Sidebar,
+  TableProperties,
+  Table,
+  Table2,
+  Sheet,
+  FileSpreadsheet,
+  FormInput,
+  TextCursor,
+  TextCursorInput,
+  Text,
+  CaseSensitive,
+  CaseUpper,
+  CaseLower,
+  Strikethrough,
+  Underline,
+  Italic,
+  Bold,
+  Subscript,
+  Superscript,
+  RemoveFormatting,
+  IndentIncrease,
+  IndentDecrease,
+  WrapText,
+  Pilcrow,
+  ListOrdered,
+  ListTodo,
+  ListChecks,
+  ListMinus,
+  ListPlus,
+  ListFilter,
+  ListRestart,
+  ListX,
+  ListTree,
+  ListCollapse,
+  ListVideo,
+  ListMusic,
+  ListEnd,
+  ListStart,
+  SortAsc,
+  SortDesc,
+  ArrowUpDown,
+  ArrowDownUp,
+  ArrowUpNarrowWide,
+  ArrowDownNarrowWide,
+  ArrowUpWideNarrow,
+  ArrowDownWideNarrow,
+  MoveUp,
+  MoveDown,
+  MoveLeft,
+  MoveRight,
+  ArrowBigUp,
+  ArrowBigDown,
+  ArrowBigLeft,
+  ArrowBigRight,
+  ChevronsUp,
+  ChevronsDown,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  ChevronsLeftRight,
+  ArrowUpRight,
+  ArrowUpLeft,
+  ArrowDownRight,
+  ArrowDownLeft,
+  CornerUpLeft,
+  CornerUpRight,
+  CornerDownRight,
+  CornerLeftUp,
+  CornerLeftDown,
+  CornerRightUp,
+  CornerRightDown,
+  Repeat,
+  Repeat1,
+  Repeat2,
+  Shuffle,
+  Infinity,
+  IterationCw,
+  IterationCcw,
+  Replace,
+  ReplaceAll,
+  Split,
+  Merge,
+  GitFork,
+  Network,
+  Workflow,
+  Waypoints,
+  Route,
+  Orbit,
+  Radar,
+  Radio,
+  RadioReceiver,
+  RadioTower,
+  Signal,
+  SignalHigh,
+  SignalLow,
+  SignalMedium,
+  SignalZero,
+  Rss,
+  Podcast,
+  Antenna,
+  Satellite,
+  SatelliteDish,
+  Bluetooth,
+  BluetoothConnected,
+  BluetoothOff,
+  BluetoothSearching,
+  Cable,
+  Plug,
+  PlugZap,
+  Unplug,
+  Usb,
+  Cpu,
+  HardDrive,
+  HardDriveDownload,
+  HardDriveUpload,
+  MemoryStick,
+  CircuitBoard,
+  Binary,
+  Braces,
+  BracesIcon,
+  Brackets,
+  ParenthesesIcon,
+  Regex,
+  Variable,
+  Component,
+  Webhook,
+  WebhookOff,
+  Blocks,
+  Puzzle,
+  AppWindow,
+  Globe2,
+  LocateFixed,
+  Locate,
+  MapPinned,
+  MapPinOff,
+  Map,
+  Milestone,
+  FlagTriangleLeft,
+  FlagTriangleRight,
+  Construction,
+  HardHat,
+  Axe,
+  Hammer,
+  Pickaxe,
+  Shovel,
+  Drill,
+  Scale,
+  Scale3d,
+  Scaling,
+  Expand,
+  Shrink,
+  FoldVertical,
+  FoldHorizontal,
+  UnfoldVertical,
+  UnfoldHorizontal,
+  ScanLine,
+  ScanSearch,
+  ScanText,
+  ScanEye,
+  ScanBarcode,
+  Barcode,
+  Receipt,
+  ReceiptText,
+  Ticket,
+  TicketCheck,
+  TicketMinus,
+  TicketPlus,
+  TicketSlash,
+  TicketX,
+  Tags as TagsIcon,
+  Bookmark as BookmarkFilled,
+  Heart as HeartFilled,
+  Star as StarFilled,
 } from 'lucide-vue-next'
 
 /**
@@ -155,3 +676,47 @@ export const tagIcons = {
   magic: 'Wand2',
 } as const
 
+/**
+ * 主题模式图标映射
+ */
+export const themeModeIcons = {
+  light: 'Sun',
+  dark: 'Moon',
+  system: 'Monitor',
+} as const
+
+/**
+ * 文件类型图标映射
+ */
+export const fileTypeIcons = {
+  image: 'Image',
+  document: 'FileText',
+  code: 'FileCode',
+  folder: 'Folder',
+  archive: 'Archive',
+  video: 'Play',
+  audio: 'Music',
+  default: 'File',
+} as const
+
+/**
+ * 状态图标映射
+ */
+export const statusIcons = {
+  success: 'CheckCircle',
+  error: 'XCircle',
+  warning: 'AlertTriangle',
+  info: 'Info',
+  loading: 'Loader2',
+  pending: 'Clock',
+} as const
+
+/**
+ * 社交平台图标映射
+ */
+export const socialIcons = {
+  github: 'Github',
+  message: 'MessageCircle',
+  mail: 'Mail',
+  share: 'Share2',
+} as const

From 745bbea6164624d056ff4531ccd026709b67d350 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 07:18:21 +0800
Subject: [PATCH 4/6] Enhance state management and statistics tracking across
 components

- Integrated new Pinia plugins for state persistence, snapshots, and tab synchronization in main.ts, improving state management capabilities.
- Updated SearchHeader.vue to utilize caching for VNDB data, enhancing performance and user experience by reducing unnecessary API calls.
- Refactored SearchHistoryModal.vue to leverage the history store for managing search history, improving data handling and user interaction.
- Enhanced StatsCorner.vue to display visitor statistics and search counts, providing users with better insights into application usage.
- Improved settings management in settings.ts by adding undo/redo functionality for setting changes, enhancing user control over preferences.
---
 src/components/SearchHeader.vue       |  49 +++-
 src/components/SearchHistoryModal.vue |  25 +-
 src/components/StatsCorner.vue        | 140 +++++----
 src/main.ts                           |  44 ++-
 src/stores/index.ts                   |   2 +
 src/stores/plugins.ts                 | 270 ++++++++++++++++--
 src/stores/settings.ts                | 100 +++++++
 src/stores/stats.ts                   | 391 ++++++++++++++++++++++++++
 8 files changed, 918 insertions(+), 103 deletions(-)
 create mode 100644 src/stores/stats.ts

diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index ab4d02c..03ca85b 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -461,6 +461,9 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useSearchStore } from '@/stores/search'
+import { useStatsStore } from '@/stores/stats'
+import { useCacheStore } from '@/stores/cache'
+import { useHistoryStore } from '@/stores/history'
 import { searchGameStream, fetchVndbData } from '@/api/search'
 import { playSwipe, playToggle, playCelebration, playCaution, playType } from '@/composables/useSound'
 import { useDebouncedClick } from '@/composables/useDebounce'
@@ -493,10 +496,15 @@ import { getSearchParamsFromURL, updateURLParams, onURLParamsChange } from '@/ut
 import { saveSearchHistory } from '@/utils/persistence'
 
 const searchStore = useSearchStore()
+const statsStore = useStatsStore()
+const cacheStore = useCacheStore()
+const historyStore = useHistoryStore()
+
 const searchQuery = ref('')
 const customApi = ref('')
 const searchMode = ref<'game' | 'patch'>('game')
 let cleanupURLListener: (() => void) | null = null
+let searchStartTime = 0
 
 // 友情链接
 import friendsData from '@/data/friends.json'
@@ -601,6 +609,7 @@ async function handleSearch() {
   searchStore.isSearching = true
   searchStore.errorMessage = ''
   hasScrolledToResults = false // 重置滚动标志
+  searchStartTime = performance.now() // 记录搜索开始时间
 
   const searchParams = new URLSearchParams()
   searchParams.set('game', searchQuery.value.trim())
@@ -612,14 +621,23 @@ async function handleSearch() {
   // 在 game 模式下，搜索开始时就并行发起 VNDB 请求
   const queryForVndb = searchQuery.value.trim()
   if (searchMode.value === 'game') {
-    fetchVndbData(queryForVndb).then((vndbData) => {
-      // 检查搜索词是否仍匹配（防止快速切换搜索时数据错乱）
-      if (vndbData && searchStore.searchQuery === queryForVndb) {
-        searchStore.vndbInfo = vndbData
-      }
-    }).catch(() => {
-      // VNDB 请求失败不影响主搜索
-    })
+    // 先检查缓存
+    const cachedVndb = cacheStore.getVndbInfo(queryForVndb)
+    if (cachedVndb) {
+      searchStore.vndbInfo = cachedVndb
+      statsStore.recordCacheHit('vndb')
+    } else {
+      fetchVndbData(queryForVndb).then((vndbData) => {
+        // 检查搜索词是否仍匹配（防止快速切换搜索时数据错乱）
+        if (vndbData && searchStore.searchQuery === queryForVndb) {
+          searchStore.vndbInfo = vndbData
+          // 缓存 VNDB 数据
+          cacheStore.cacheVndbInfo(queryForVndb, vndbData)
+        }
+      }).catch(() => {
+        // VNDB 请求失败不影响主搜索
+      })
+    }
   }
 
   try {
@@ -659,6 +677,11 @@ async function handleSearch() {
         searchStore.isSearching = false
         playCelebration() // 搜索完成音效
         
+        // 计算搜索耗时并记录统计
+        const searchDuration = Math.round(performance.now() - searchStartTime)
+        const resultCount = searchStore.totalResults
+        statsStore.recordSearch(searchMode.value, resultCount, searchDuration)
+        
         // 如果结果不足 3 个但有结果，且还没滚动过，则现在滚动
         if (!hasScrolledToResults && searchStore.platformResults.size > 0) {
           hasScrolledToResults = true
@@ -675,14 +698,20 @@ async function handleSearch() {
           })
         }
         
-        // 保存搜索历史
-        const resultCount = searchStore.totalResults
+        // 保存搜索历史到持久化存储
         saveSearchHistory({
           query: searchQuery.value.trim(),
           mode: searchMode.value,
           timestamp: Date.now(),
           resultCount,
         })
+        
+        // 同时添加到 historyStore
+        historyStore.addHistory({
+          query: searchQuery.value.trim(),
+          mode: searchMode.value,
+          resultCount,
+        })
       },
       onError: (error) => {
         searchStore.errorMessage = error
diff --git a/src/components/SearchHistoryModal.vue b/src/components/SearchHistoryModal.vue
index da4f180..d36e0b3 100644
--- a/src/components/SearchHistoryModal.vue
+++ b/src/components/SearchHistoryModal.vue
@@ -24,7 +24,7 @@
             </div>
             <div>
               <h1 class="text-sm font-bold text-gray-800 dark:text-white">搜索历史</h1>
-              <p v-if="history.length > 0" class="text-xs text-gray-500 dark:text-slate-400">{{ history.length }} 条记录</p>
+              <p v-if="historyStore.historyCount > 0" class="text-xs text-gray-500 dark:text-slate-400">{{ historyStore.historyCount }} 条记录</p>
             </div>
           </div>
 
@@ -140,14 +140,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { computed, watch, onMounted, onUnmounted } from 'vue'
 import { useUIStore } from '@/stores/ui'
-import { loadSearchHistory, clearSearchHistory as clearHistoryStorage, type SearchHistory } from '@/utils/persistence'
+import { useHistoryStore } from '@/stores/history'
+import type { SearchHistory } from '@/utils/persistence'
 import { playSelect, playTap, playCaution, playTransitionUp, playTransitionDown } from '@/composables/useSound'
 import { History, Trash2, X, Gamepad2, Wrench, Hash, Clock, Search } from 'lucide-vue-next'
 
 const uiStore = useUIStore()
-const history = ref<SearchHistory[]>([])
+const historyStore = useHistoryStore()
+
+// 使用 historyStore 的响应式数据
+const history = computed(() => historyStore.searchHistory)
 
 const emit = defineEmits<{
   select: [history: SearchHistory]
@@ -155,7 +159,7 @@ const emit = defineEmits<{
 
 // 加载历史记录
 function loadHistory() {
-  history.value = loadSearchHistory()
+  historyStore.loadHistory()
 }
 
 // 选择历史记录
@@ -173,21 +177,14 @@ function handleSelectHistory(item: SearchHistory) {
 function handleClearHistory() {
   playCaution()
   if (confirm('确定要清空所有搜索历史吗？')) {
-    clearHistoryStorage()
-    history.value = []
+    historyStore.clearHistory()
   }
 }
 
 // 删除单条记录
 function handleRemoveItem(index: number) {
   playTap()
-  history.value.splice(index, 1)
-  if (history.value.length > 0) {
-    // 使用与 persistence.ts 一致的 key
-    window.localStorage.setItem('searchgal_history', JSON.stringify(history.value))
-  } else {
-    clearHistoryStorage()
-  }
+  historyStore.removeHistory(index)
 }
 
 // 关闭模态框
diff --git a/src/components/StatsCorner.vue b/src/components/StatsCorner.vue
index 39bff83..e83f4cc 100644
--- a/src/components/StatsCorner.vue
+++ b/src/components/StatsCorner.vue
@@ -16,41 +16,35 @@
       rel="noopener noreferrer"
       :class="[
         'status-link glassmorphism-card rounded-2xl shadow-lg px-3 py-2 flex items-center gap-2 text-sm font-medium transition-all duration-300 hover:scale-105',
-        statusOnline === null 
-          ? 'text-gray-600 dark:text-gray-400' 
-          : statusOnline
-            ? 'text-green-600 dark:text-green-400'
-            : 'text-red-600 dark:text-red-400'
+        statusClass
       ]"
     >
       <!-- 状态图标 -->
       <component
-        :is="statusOnline === null ? Activity : statusOnline ? Wifi : WifiOff"
+        :is="statusIcon"
         :size="14"
         :class="[
-          statusOnline === null ? 'animate-pulse' : '',
-          statusOnline === null 
-            ? 'text-gray-400' 
-            : statusOnline
-              ? 'text-green-500'
-              : 'text-red-500'
+          isChecking ? 'animate-pulse' : '',
+          statusIconClass
         ]"
       />
       <span 
         class="w-2 h-2 rounded-full"
-        :class="[
-          statusOnline === null 
-            ? 'bg-gray-400 animate-pulse' 
-            : statusOnline
-              ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]'
-              : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]'
-        ]"
+        :class="statusDotClass"
       />
-      <span>{{ statusOnline === null ? '检测中' : statusOnline ? '正常' : '异常' }}</span>
+      <span>{{ statusText }}</span>
+      
+      <!-- 响应时间（可选显示） -->
+      <span 
+        v-if="responseTime && isOnline" 
+        class="text-[10px] opacity-60 ml-1"
+      >
+        {{ responseTime }}ms
+      </span>
     </a>
   </div>
 
-  <!-- 左下角不蒜子统计 -->
+  <!-- 左下角统计 -->
   <div
     id="busuanzi_container_site_pv"
     class="fixed bottom-4 left-4 z-40 transition-all duration-300"
@@ -61,7 +55,7 @@
       <div class="flex items-center gap-2" title="总访问量">
         <Eye :size="16" class="text-theme-primary dark:text-theme-accent" />
         <span class="text-xs text-gray-500 dark:text-slate-400">PV</span>
-        <span id="busuanzi_value_site_pv" class="font-semibold text-gray-800 dark:text-slate-100">0</span>
+        <span id="busuanzi_value_site_pv" class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.formattedPV }}</span>
       </div>
       <!-- 分隔线 -->
       <div class="h-px bg-gray-300/50 dark:bg-slate-600/50" />
@@ -69,40 +63,72 @@
       <div class="flex items-center gap-2" title="独立访客">
         <Users :size="16" class="text-theme-primary dark:text-theme-accent" />
         <span class="text-xs text-gray-500 dark:text-slate-400">UV</span>
-        <span id="busuanzi_value_site_uv" class="font-semibold text-gray-800 dark:text-slate-100">0</span>
+        <span id="busuanzi_value_site_uv" class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.formattedUV }}</span>
       </div>
+      
+      <!-- 搜索统计（有搜索记录时显示） -->
+      <template v-if="statsStore.appStats.totalSearches > 0">
+        <div class="h-px bg-gray-300/50 dark:bg-slate-600/50" />
+        <div class="flex items-center gap-2" title="本次会话搜索次数">
+          <Search :size="16" class="text-theme-primary dark:text-theme-accent" />
+          <span class="text-xs text-gray-500 dark:text-slate-400">搜索</span>
+          <span class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.appStats.totalSearches }}</span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { Gamepad2, Eye, Users, Activity, Wifi, WifiOff } from 'lucide-vue-next'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { Gamepad2, Eye, Users, Activity, Wifi, WifiOff, Search } from 'lucide-vue-next'
+import { useStatsStore } from '@/stores/stats'
 
-const statusOnline = ref<boolean | null>(null)
+const statsStore = useStatsStore()
 const showStats = ref(false)
-let statusCheckInterval: number | null = null
 let checkInterval: number | null = null
 let observer: MutationObserver | null = null
 
-// 检查状态页面是否在线
-async function checkStatus() {
-  try {
-    const controller = new window.AbortController()
-    const timeoutId = setTimeout(() => controller.abort(), 5000)
-    
-    await fetch('https://status.searchgal.homes', {
-      method: 'HEAD',
-      mode: 'no-cors',
-      signal: controller.signal,
-    })
-    
-    clearTimeout(timeoutId)
-    statusOnline.value = true
-  } catch (_error) {
-    statusOnline.value = false
-  }
-}
+// 计算属性 - 从 statsStore 获取状态
+const apiService = computed(() => statsStore.serviceStatuses.get('api'))
+const isChecking = computed(() => apiService.value?.status === 'checking')
+const isOnline = computed(() => apiService.value?.status === 'online')
+const isOffline = computed(() => apiService.value?.status === 'offline')
+const responseTime = computed(() => apiService.value?.responseTime)
+
+// 状态文本
+const statusText = computed(() => {
+  if (isChecking.value) return '检测中'
+  if (isOnline.value) return '正常'
+  if (isOffline.value) return '异常'
+  return '未知'
+})
+
+// 状态图标
+const statusIcon = computed(() => {
+  if (isChecking.value) return Activity
+  if (isOnline.value) return Wifi
+  return WifiOff
+})
+
+// 状态样式类
+const statusClass = computed(() => {
+  if (isChecking.value) return 'text-gray-600 dark:text-gray-400'
+  if (isOnline.value) return 'text-green-600 dark:text-green-400'
+  return 'text-red-600 dark:text-red-400'
+})
+
+const statusIconClass = computed(() => {
+  if (isChecking.value) return 'text-gray-400'
+  if (isOnline.value) return 'text-green-500'
+  return 'text-red-500'
+})
+
+const statusDotClass = computed(() => {
+  if (isChecking.value) return 'bg-gray-400 animate-pulse'
+  if (isOnline.value) return 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]'
+  return 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]'
+})
 
 // 检查不蒜子数据是否加载
 function checkBusuanziData() {
@@ -114,6 +140,8 @@ function checkBusuanziData() {
     const uvValue = parseInt(uvElement.textContent || '0', 10)
     
     if (pvValue > 0 && uvValue > 0) {
+      // 更新 statsStore
+      statsStore.updateVisitorStats(pvValue, uvValue)
       showStats.value = true
       
       if (checkInterval !== null) {
@@ -134,7 +162,7 @@ function setupObserver() {
   const pvElement = document.getElementById('busuanzi_value_site_pv')
   const uvElement = document.getElementById('busuanzi_value_site_uv')
   
-  if (!pvElement || !uvElement) {return}
+  if (!pvElement || !uvElement) return
   
   observer = new MutationObserver(() => {
     checkBusuanziData()
@@ -144,12 +172,16 @@ function setupObserver() {
   observer.observe(uvElement, { childList: true, characterData: true, subtree: true })
 }
 
+// 监听 visitorStats 变化，自动显示统计
+watch(() => statsStore.visitorStats.pv, (pv) => {
+  if (pv > 0) {
+    showStats.value = true
+  }
+})
+
 onMounted(() => {
-  // 状态检测
-  checkStatus()
-  statusCheckInterval = window.setInterval(() => {
-    checkStatus()
-  }, 30000)
+  // 使用 statsStore 进行状态检测
+  statsStore.startStatusCheck(30000)
 
   // 不蒜子统计
   setupObserver()
@@ -172,10 +204,8 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  if (statusCheckInterval !== null) {
-    clearInterval(statusCheckInterval)
-    statusCheckInterval = null
-  }
+  // 停止状态检测
+  statsStore.stopStatusCheck()
   
   if (checkInterval !== null) {
     clearInterval(checkInterval)
diff --git a/src/main.ts b/src/main.ts
index 04db4a4..a0ee679 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,16 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
-import { piniaLogger, piniaPerformance, piniaErrorHandler } from './stores/plugins'
+import { 
+  piniaLogger, 
+  piniaPerformance, 
+  piniaErrorHandler, 
+  piniaPersistedState,
+  piniaSnapshot,
+  piniaSyncTabs,
+} from './stores/plugins'
+import { useUIStore } from './stores/ui'
+import { useStatsStore } from './stores/stats'
 
 // Noto Sans SC 字体（本地安装）
 import '@fontsource/noto-sans-sc/300.css'
@@ -42,11 +51,15 @@ app.directive('text-scroll', vTextScroll)
 const pinia = createPinia()
 
 // 配置 Pinia 插件
+pinia.use(piniaPersistedState) // 自动持久化
+pinia.use(piniaPerformance)    // 性能监控
+pinia.use(piniaErrorHandler)   // 错误处理
+pinia.use(piniaSnapshot)       // 状态快照
+pinia.use(piniaSyncTabs)       // 跨标签页同步
+
 if (import.meta.env.DEV) {
-  pinia.use(piniaLogger) // 开发环境日志
+  pinia.use(piniaLogger)       // 开发环境日志
 }
-pinia.use(piniaPerformance) // 性能监控
-pinia.use(piniaErrorHandler) // 错误处理
 
 app.use(pinia)
 
@@ -55,13 +68,30 @@ createProgressFetch()
 
 app.mount('#app')
 
+// ============================================
+// Pinia Stores 初始化
+// ============================================
+
+// 获取 UI Store 用于 SW 更新通知
+const uiStore = useUIStore()
+const statsStore = useStatsStore()
+
+// 初始化 UI Store
+uiStore.init()
+
+// 记录页面浏览
+statsStore.incrementPageView()
+
 // ============================================
 // Service Worker 注册与更新
 // ============================================
 
-// 显示更新提示
+// 显示更新提示 - 使用 UIStore 管理
 function showUpdateToast(onUpdate: () => void) {
-  // 创建 toast 元素
+  // 通过 UIStore 显示更新通知
+  uiStore.setShowUpdateToast(true)
+  
+  // 也创建 DOM toast 作为备份（如果 Vue 组件未加载）
   const toast = document.createElement('div')
   toast.id = 'sw-update-toast'
   toast.innerHTML = `
@@ -114,6 +144,7 @@ function showUpdateToast(onUpdate: () => void) {
     }
     if (countdown <= 0) {
       clearInterval(interval)
+      uiStore.setShowUpdateToast(false)
       onUpdate()
     }
   }, 1000)
@@ -121,6 +152,7 @@ function showUpdateToast(onUpdate: () => void) {
   // 立即更新按钮
   document.getElementById('sw-update-now')?.addEventListener('click', () => {
     clearInterval(interval)
+    uiStore.setShowUpdateToast(false)
     onUpdate()
   })
 }
diff --git a/src/stores/index.ts b/src/stores/index.ts
index a21d4f2..201ee7c 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -5,7 +5,9 @@ export { useSettingsStore } from './settings'
 export { useHistoryStore } from './history'
 export { useCacheStore } from './cache'
 export { useLazyLoadStore } from './lazyLoad'
+export { useStatsStore } from './stats'
 
 export type { VndbInfo, SearchResult, PlatformData } from './search'
 export type { UserSettings } from './settings'
+export type { ServiceStatus, VisitorStats, AppStats } from './stats'
 
diff --git a/src/stores/plugins.ts b/src/stores/plugins.ts
index 384eba7..30dce57 100644
--- a/src/stores/plugins.ts
+++ b/src/stores/plugins.ts
@@ -1,33 +1,148 @@
-import type { PiniaPluginContext } from 'pinia'
+import type { PiniaPluginContext, StateTree, Store, StoreDefinition } from 'pinia'
+
+// ============================================
+// 类型定义
+// ============================================
+
+export interface PersistOptions {
+  /** 是否启用持久化 */
+  enabled: boolean
+  /** 存储 key 前缀 */
+  prefix?: string
+  /** 需要持久化的状态路径 */
+  paths?: string[]
+  /** 使用 sessionStorage 而不是 localStorage */
+  session?: boolean
+  /** 自定义序列化函数 */
+  serialize?: (state: StateTree) => string
+  /** 自定义反序列化函数 */
+  deserialize?: (value: string) => StateTree
+}
+
+// 扩展 DefineStoreOptionsBase 类型
+declare module 'pinia' {
+  export interface DefineStoreOptionsBase<S extends StateTree, Store> {
+    persist?: boolean | PersistOptions
+  }
+  
+  export interface PiniaCustomProperties {
+    getPerformanceStats?: () => Record<string, {
+      calls: number
+      avgDuration: string
+      totalDuration: string
+    }>
+    $persisted?: boolean
+  }
+}
+
+// ============================================
+// 辅助函数
+// ============================================
 
 /**
- * Pinia 插件：自动持久化 store 状态到 localStorage
+ * 从嵌套对象中获取指定路径的值
+ */
+function getValueByPath(obj: Record<string, unknown>, path: string): unknown {
+  return path.split('.').reduce((acc: unknown, key) => {
+    if (acc && typeof acc === 'object') {
+      return (acc as Record<string, unknown>)[key]
+    }
+    return undefined
+  }, obj)
+}
+
+/**
+ * 在嵌套对象中设置指定路径的值
+ */
+function setValueByPath(obj: Record<string, unknown>, path: string, value: unknown): void {
+  const keys = path.split('.')
+  const lastKey = keys.pop()
+  if (!lastKey) return
+  
+  let current = obj
+  for (const key of keys) {
+    if (!(key in current) || typeof current[key] !== 'object') {
+      current[key] = {}
+    }
+    current = current[key] as Record<string, unknown>
+  }
+  current[lastKey] = value
+}
+
+/**
+ * 提取指定路径的状态
+ */
+function pickStatePaths(state: StateTree, paths: string[]): StateTree {
+  const result: Record<string, unknown> = {}
+  for (const path of paths) {
+    const value = getValueByPath(state as Record<string, unknown>, path)
+    if (value !== undefined) {
+      setValueByPath(result, path, value)
+    }
+  }
+  return result
+}
+
+// ============================================
+// Pinia 插件
+// ============================================
+
+/**
+ * Pinia 插件：自动持久化 store 状态
+ * 
+ * 用法：
+ * ```ts
+ * defineStore('example', () => {...}, {
+ *   persist: true // 简单启用
+ *   // 或
+ *   persist: {
+ *     enabled: true,
+ *     paths: ['user', 'settings'], // 只持久化部分状态
+ *     session: true, // 使用 sessionStorage
+ *   }
+ * })
+ * ```
  */
 export function piniaPersistedState(context: PiniaPluginContext) {
   const { store, options } = context
   
-  // 只对配置了 persist 选项的 store 进行持久化
-  if (!options.persist) {return}
+  // 获取持久化配置
+  const persistOption = options.persist
+  if (!persistOption) return
   
-  const storageKey = `pinia-${store.$id}`
+  const config: PersistOptions = typeof persistOption === 'boolean'
+    ? { enabled: persistOption }
+    : persistOption
   
-  // 从 localStorage 恢复状态
-  const savedState = localStorage.getItem(storageKey)
-  if (savedState) {
-    try {
-      const parsed = JSON.parse(savedState)
+  if (!config.enabled) return
+  
+  const prefix = config.prefix ?? 'pinia'
+  const storageKey = `${prefix}-${store.$id}`
+  const storage = config.session ? sessionStorage : localStorage
+  const serialize = config.serialize ?? JSON.stringify
+  const deserialize = config.deserialize ?? JSON.parse
+  
+  // 从 storage 恢复状态
+  try {
+    const savedState = storage.getItem(storageKey)
+    if (savedState) {
+      const parsed = deserialize(savedState)
       store.$patch(parsed)
-    } catch (error) {
-      console.error(`Failed to restore state for store "${store.$id}":`, error)
+      store.$persisted = true
     }
+  } catch (error) {
+    console.error(`[Pinia Persist] Failed to restore state for "${store.$id}":`, error)
   }
   
   // 监听状态变化并保存
-  store.$subscribe((_, state) => {
+  store.$subscribe((_mutation, state) => {
     try {
-      localStorage.setItem(storageKey, JSON.stringify(state))
+      const stateToPersist = config.paths 
+        ? pickStatePaths(state, config.paths)
+        : state
+      storage.setItem(storageKey, serialize(stateToPersist))
     } catch (error) {
-      console.error(`Failed to persist state for store "${store.$id}":`, error)
+      console.error(`[Pinia Persist] Failed to persist state for "${store.$id}":`, error)
     }
   })
 }
@@ -37,7 +152,7 @@ export function piniaPersistedState(context: PiniaPluginContext) {
  */
 export function piniaLogger(context: PiniaPluginContext) {
   // 仅在开发环境启用
-  if (import.meta.env.PROD) {return}
+  if (import.meta.env.PROD) return
   
   const { store } = context
   
@@ -63,7 +178,7 @@ export function piniaLogger(context: PiniaPluginContext) {
     console.log(`📝 [${store.$id}] State changed:`, {
       type: mutation.type,
       storeId: mutation.storeId,
-      payload: mutation.payload,
+      events: mutation.events,
       state: { ...state },
     })
   })
@@ -136,7 +251,7 @@ export function piniaErrorHandler(context: PiniaPluginContext) {
   store.$onAction(({ name, onError }) => {
     onError((error) => {
       // 可以在这里集成错误上报服务
-      console.error(`Error in action "${name}" of store "${store.$id}":`, error)
+      console.error(`[Pinia Error] Action "${name}" in store "${store.$id}":`, error)
       
       // 可以触发全局错误通知
       // 例如：通过 UIStore 显示 toast
@@ -144,3 +259,122 @@ export function piniaErrorHandler(context: PiniaPluginContext) {
   })
 }
 
+/**
+ * Pinia 插件：撤销/重做功能
+ */
+export function piniaUndoRedo(context: PiniaPluginContext) {
+  const { store, options } = context
+  
+  // 只对配置了 undoRedo 的 store 启用
+  if (!(options as { undoRedo?: boolean }).undoRedo) return
+  
+  const history: StateTree[] = []
+  let currentIndex = -1
+  const maxHistory = 50
+  
+  // 记录状态变化
+  store.$subscribe((_mutation, state) => {
+    // 如果当前不在最新状态，清除后面的历史
+    if (currentIndex < history.length - 1) {
+      history.splice(currentIndex + 1)
+    }
+    
+    // 添加新状态
+    history.push(JSON.parse(JSON.stringify(state)))
+    currentIndex = history.length - 1
+    
+    // 限制历史记录数量
+    if (history.length > maxHistory) {
+      history.shift()
+      currentIndex--
+    }
+  })
+  
+  // 添加撤销方法
+  ;(store as Store & { $undo?: () => boolean }).$undo = () => {
+    if (currentIndex > 0) {
+      currentIndex--
+      store.$patch(history[currentIndex])
+      return true
+    }
+    return false
+  }
+  
+  // 添加重做方法
+  ;(store as Store & { $redo?: () => boolean }).$redo = () => {
+    if (currentIndex < history.length - 1) {
+      currentIndex++
+      store.$patch(history[currentIndex])
+      return true
+    }
+    return false
+  }
+  
+  // 添加检查方法
+  ;(store as Store & { $canUndo?: () => boolean }).$canUndo = () => currentIndex > 0
+  ;(store as Store & { $canRedo?: () => boolean }).$canRedo = () => currentIndex < history.length - 1
+}
+
+/**
+ * Pinia 插件：状态快照
+ */
+export function piniaSnapshot(context: PiniaPluginContext) {
+  const { store } = context
+  
+  const snapshots = new Map<string, StateTree>()
+  
+  // 创建快照
+  ;(store as Store & { $snapshot?: (name: string) => void }).$snapshot = (name: string) => {
+    snapshots.set(name, JSON.parse(JSON.stringify(store.$state)))
+  }
+  
+  // 恢复快照
+  ;(store as Store & { $restore?: (name: string) => boolean }).$restore = (name: string) => {
+    const snapshot = snapshots.get(name)
+    if (snapshot) {
+      store.$patch(snapshot)
+      return true
+    }
+    return false
+  }
+  
+  // 列出所有快照
+  ;(store as Store & { $listSnapshots?: () => string[] }).$listSnapshots = () => {
+    return Array.from(snapshots.keys())
+  }
+  
+  // 删除快照
+  ;(store as Store & { $deleteSnapshot?: (name: string) => boolean }).$deleteSnapshot = (name: string) => {
+    return snapshots.delete(name)
+  }
+}
+
+/**
+ * Pinia 插件：状态同步（跨标签页）
+ */
+export function piniaSyncTabs(context: PiniaPluginContext) {
+  const { store, options } = context
+  
+  // 只对配置了 syncTabs 的 store 启用
+  if (!(options as { syncTabs?: boolean }).syncTabs) return
+  
+  const channelName = `pinia-sync-${store.$id}`
+  
+  // 创建广播频道
+  const channel = new BroadcastChannel(channelName)
+  
+  // 监听其他标签页的状态变化
+  channel.onmessage = (event) => {
+    if (event.data.type === 'state-update') {
+      store.$patch(event.data.state)
+    }
+  }
+  
+  // 当前标签页状态变化时广播
+  store.$subscribe((_mutation, state) => {
+    channel.postMessage({
+      type: 'state-update',
+      state: JSON.parse(JSON.stringify(state)),
+    })
+  })
+}
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 7e12802..f82a9dd 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -59,6 +59,11 @@ export const useSettingsStore = defineStore('settings', () => {
   const settings = ref<UserSettings>({ ...DEFAULT_SETTINGS })
   const isInitialized = ref(false)
   
+  // 设置变更历史（用于撤销）
+  const settingsHistory = ref<UserSettings[]>([])
+  const historyIndex = ref(-1)
+  const maxHistoryLength = 20
+  
   // 从 localStorage 加载设置
   function loadSettings() {
     try {
@@ -71,6 +76,10 @@ export const useSettingsStore = defineStore('settings', () => {
       console.error('Failed to load settings:', error)
     }
     isInitialized.value = true
+    
+    // 初始化历史记录
+    settingsHistory.value = [{ ...settings.value }]
+    historyIndex.value = 0
   }
   
   // 保存设置到 localStorage
@@ -82,6 +91,24 @@ export const useSettingsStore = defineStore('settings', () => {
     }
   }
   
+  // 记录设置变更历史
+  function recordHistory() {
+    // 如果不在最新位置，删除后面的历史
+    if (historyIndex.value < settingsHistory.value.length - 1) {
+      settingsHistory.value = settingsHistory.value.slice(0, historyIndex.value + 1)
+    }
+    
+    // 添加新记录
+    settingsHistory.value.push({ ...settings.value })
+    historyIndex.value = settingsHistory.value.length - 1
+    
+    // 限制历史记录数量
+    if (settingsHistory.value.length > maxHistoryLength) {
+      settingsHistory.value.shift()
+      historyIndex.value--
+    }
+  }
+  
   // 更新单个设置
   function updateSetting<K extends keyof UserSettings>(
     key: K,
@@ -89,18 +116,59 @@ export const useSettingsStore = defineStore('settings', () => {
   ) {
     settings.value[key] = value
     saveSettings()
+    recordHistory()
   }
   
   // 批量更新设置
   function updateSettings(newSettings: Partial<UserSettings>) {
     settings.value = { ...settings.value, ...newSettings }
     saveSettings()
+    recordHistory()
   }
   
   // 重置设置
   function resetSettings() {
     settings.value = { ...DEFAULT_SETTINGS }
     saveSettings()
+    recordHistory()
+  }
+  
+  // 重置单个设置
+  function resetSetting<K extends keyof UserSettings>(key: K) {
+    settings.value[key] = DEFAULT_SETTINGS[key]
+    saveSettings()
+    recordHistory()
+  }
+  
+  // 撤销设置变更
+  function undoSettings(): boolean {
+    if (historyIndex.value > 0) {
+      historyIndex.value--
+      settings.value = { ...settingsHistory.value[historyIndex.value] }
+      saveSettings()
+      return true
+    }
+    return false
+  }
+  
+  // 重做设置变更
+  function redoSettings(): boolean {
+    if (historyIndex.value < settingsHistory.value.length - 1) {
+      historyIndex.value++
+      settings.value = { ...settingsHistory.value[historyIndex.value] }
+      saveSettings()
+      return true
+    }
+    return false
+  }
+  
+  // 检查是否可以撤销/重做
+  function canUndo(): boolean {
+    return historyIndex.value > 0
+  }
+  
+  function canRedo(): boolean {
+    return historyIndex.value < settingsHistory.value.length - 1
   }
   
   // 导出设置
@@ -114,6 +182,7 @@ export const useSettingsStore = defineStore('settings', () => {
       const imported = JSON.parse(jsonString)
       settings.value = { ...DEFAULT_SETTINGS, ...imported }
       saveSettings()
+      recordHistory()
       return true
     } catch (error) {
       console.error('Failed to import settings:', error)
@@ -121,6 +190,27 @@ export const useSettingsStore = defineStore('settings', () => {
     }
   }
   
+  // 获取设置差异（与默认值比较）
+  function getSettingsDiff(): Partial<UserSettings> {
+    const diff: Partial<UserSettings> = {}
+    for (const key of Object.keys(DEFAULT_SETTINGS) as (keyof UserSettings)[]) {
+      if (JSON.stringify(settings.value[key]) !== JSON.stringify(DEFAULT_SETTINGS[key])) {
+        (diff as Record<string, unknown>)[key] = settings.value[key]
+      }
+    }
+    return diff
+  }
+  
+  // 检查设置是否为默认值
+  function isDefault<K extends keyof UserSettings>(key: K): boolean {
+    return JSON.stringify(settings.value[key]) === JSON.stringify(DEFAULT_SETTINGS[key])
+  }
+  
+  // 检查是否所有设置都是默认值
+  function isAllDefault(): boolean {
+    return Object.keys(getSettingsDiff()).length === 0
+  }
+  
   // 监听设置变化，自动保存
   watch(
     settings,
@@ -139,6 +229,8 @@ export const useSettingsStore = defineStore('settings', () => {
     // 状态
     settings,
     isInitialized,
+    settingsHistory,
+    historyIndex,
     
     // 方法
     loadSettings,
@@ -146,8 +238,16 @@ export const useSettingsStore = defineStore('settings', () => {
     updateSetting,
     updateSettings,
     resetSettings,
+    resetSetting,
+    undoSettings,
+    redoSettings,
+    canUndo,
+    canRedo,
     exportSettings,
     importSettings,
+    getSettingsDiff,
+    isDefault,
+    isAllDefault,
   }
 })
 
diff --git a/src/stores/stats.ts b/src/stores/stats.ts
new file mode 100644
index 0000000..9e69700
--- /dev/null
+++ b/src/stores/stats.ts
@@ -0,0 +1,391 @@
+import { defineStore } from 'pinia'
+import { ref, computed, watch } from 'vue'
+import { useHistoryStore } from './history'
+import { useCacheStore } from './cache'
+import { useSearchStore } from './search'
+
+export interface ServiceStatus {
+  name: string
+  status: 'online' | 'offline' | 'checking' | 'unknown'
+  lastChecked: number
+  responseTime?: number
+  url?: string
+}
+
+export interface VisitorStats {
+  pv: number
+  uv: number
+  lastUpdated: number
+}
+
+export interface AppStats {
+  // 搜索统计
+  totalSearches: number
+  gameSearches: number
+  patchSearches: number
+  avgResultCount: number
+  
+  // 缓存统计
+  vndbCacheHits: number
+  searchCacheHits: number
+  imageCacheHits: number
+  
+  // 性能统计
+  avgSearchTime: number
+  lastSearchTime: number
+  
+  // 会话统计
+  sessionStartTime: number
+  pageViews: number
+}
+
+export const useStatsStore = defineStore('stats', () => {
+  // ============================================
+  // 状态
+  // ============================================
+  
+  // 服务状态
+  const serviceStatuses = ref<Map<string, ServiceStatus>>(new Map([
+    ['api', { name: 'API 服务', status: 'unknown', lastChecked: 0, url: 'https://status.searchgal.homes' }],
+    ['vndb', { name: 'VNDB', status: 'unknown', lastChecked: 0, url: 'https://api.vndb.org' }],
+  ]))
+  
+  // 访客统计（不蒜子）
+  const visitorStats = ref<VisitorStats>({
+    pv: 0,
+    uv: 0,
+    lastUpdated: 0,
+  })
+  
+  // 应用统计
+  const appStats = ref<AppStats>({
+    totalSearches: 0,
+    gameSearches: 0,
+    patchSearches: 0,
+    avgResultCount: 0,
+    vndbCacheHits: 0,
+    searchCacheHits: 0,
+    imageCacheHits: 0,
+    avgSearchTime: 0,
+    lastSearchTime: 0,
+    sessionStartTime: Date.now(),
+    pageViews: 1,
+  })
+  
+  // 搜索时间记录
+  const searchTimes = ref<number[]>([])
+  
+  // 检测间隔
+  let statusCheckInterval: number | null = null
+  
+  // ============================================
+  // 计算属性
+  // ============================================
+  
+  // 主 API 状态
+  const apiStatus = computed(() => serviceStatuses.value.get('api')?.status ?? 'unknown')
+  
+  // 是否所有服务在线
+  const allServicesOnline = computed(() => {
+    for (const [, service] of serviceStatuses.value) {
+      if (service.status !== 'online') {
+        return false
+      }
+    }
+    return true
+  })
+  
+  // 离线服务数量
+  const offlineServicesCount = computed(() => {
+    let count = 0
+    for (const [, service] of serviceStatuses.value) {
+      if (service.status === 'offline') {
+        count++
+      }
+    }
+    return count
+  })
+  
+  // 格式化的访客数
+  const formattedPV = computed(() => formatNumber(visitorStats.value.pv))
+  const formattedUV = computed(() => formatNumber(visitorStats.value.uv))
+  
+  // 会话时长（分钟）
+  const sessionDuration = computed(() => {
+    return Math.floor((Date.now() - appStats.value.sessionStartTime) / 60000)
+  })
+  
+  // 搜索效率评分
+  const searchEfficiencyScore = computed(() => {
+    if (appStats.value.totalSearches === 0) return 0
+    
+    const cacheHitRate = (appStats.value.vndbCacheHits + appStats.value.searchCacheHits) / 
+                         (appStats.value.totalSearches * 2)
+    const speedScore = appStats.value.avgSearchTime > 0 
+      ? Math.max(0, 100 - appStats.value.avgSearchTime / 100)
+      : 50
+    
+    return Math.round((cacheHitRate * 50) + (speedScore * 0.5))
+  })
+  
+  // ============================================
+  // 方法
+  // ============================================
+  
+  // 格式化数字（添加千分位）
+  function formatNumber(num: number): string {
+    if (num >= 1000000) {
+      return (num / 1000000).toFixed(1) + 'M'
+    }
+    if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'K'
+    }
+    return String(num)
+  }
+  
+  // 检查单个服务状态
+  async function checkServiceStatus(serviceKey: string) {
+    const service = serviceStatuses.value.get(serviceKey)
+    if (!service || !service.url) return
+    
+    // 设置为检测中
+    serviceStatuses.value.set(serviceKey, {
+      ...service,
+      status: 'checking',
+    })
+    
+    const startTime = performance.now()
+    
+    try {
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), 5000)
+      
+      await fetch(service.url, {
+        method: 'HEAD',
+        mode: 'no-cors',
+        signal: controller.signal,
+      })
+      
+      clearTimeout(timeoutId)
+      
+      const responseTime = Math.round(performance.now() - startTime)
+      
+      serviceStatuses.value.set(serviceKey, {
+        ...service,
+        status: 'online',
+        lastChecked: Date.now(),
+        responseTime,
+      })
+    } catch {
+      serviceStatuses.value.set(serviceKey, {
+        ...service,
+        status: 'offline',
+        lastChecked: Date.now(),
+      })
+    }
+  }
+  
+  // 检查所有服务状态
+  async function checkAllServices() {
+    const promises = Array.from(serviceStatuses.value.keys()).map(
+      key => checkServiceStatus(key),
+    )
+    await Promise.allSettled(promises)
+  }
+  
+  // 开始定期检测
+  function startStatusCheck(intervalMs = 30000) {
+    // 立即检测一次
+    checkAllServices()
+    
+    // 设置定期检测
+    if (statusCheckInterval) {
+      clearInterval(statusCheckInterval)
+    }
+    statusCheckInterval = window.setInterval(() => {
+      checkAllServices()
+    }, intervalMs)
+  }
+  
+  // 停止定期检测
+  function stopStatusCheck() {
+    if (statusCheckInterval) {
+      clearInterval(statusCheckInterval)
+      statusCheckInterval = null
+    }
+  }
+  
+  // 更新访客统计
+  function updateVisitorStats(pv: number, uv: number) {
+    visitorStats.value = {
+      pv,
+      uv,
+      lastUpdated: Date.now(),
+    }
+  }
+  
+  // 记录搜索
+  function recordSearch(mode: 'game' | 'patch', resultCount: number, duration: number) {
+    appStats.value.totalSearches++
+    if (mode === 'game') {
+      appStats.value.gameSearches++
+    } else {
+      appStats.value.patchSearches++
+    }
+    
+    // 更新平均结果数
+    const total = appStats.value.totalSearches
+    appStats.value.avgResultCount = Math.round(
+      ((appStats.value.avgResultCount * (total - 1)) + resultCount) / total,
+    )
+    
+    // 记录搜索时间
+    searchTimes.value.push(duration)
+    if (searchTimes.value.length > 50) {
+      searchTimes.value.shift()
+    }
+    
+    // 更新平均搜索时间
+    appStats.value.avgSearchTime = Math.round(
+      searchTimes.value.reduce((a, b) => a + b, 0) / searchTimes.value.length,
+    )
+    appStats.value.lastSearchTime = Date.now()
+  }
+  
+  // 记录缓存命中
+  function recordCacheHit(type: 'vndb' | 'search' | 'image') {
+    if (type === 'vndb') {
+      appStats.value.vndbCacheHits++
+    } else if (type === 'search') {
+      appStats.value.searchCacheHits++
+    } else {
+      appStats.value.imageCacheHits++
+    }
+  }
+  
+  // 增加页面浏览
+  function incrementPageView() {
+    appStats.value.pageViews++
+  }
+  
+  // 获取综合统计
+  function getComprehensiveStats() {
+    const historyStore = useHistoryStore()
+    const cacheStore = useCacheStore()
+    const searchStore = useSearchStore()
+    
+    return {
+      // 服务状态
+      services: Object.fromEntries(serviceStatuses.value),
+      allOnline: allServicesOnline.value,
+      offlineCount: offlineServicesCount.value,
+      
+      // 访客统计
+      visitors: {
+        pv: visitorStats.value.pv,
+        uv: visitorStats.value.uv,
+        formattedPV: formattedPV.value,
+        formattedUV: formattedUV.value,
+      },
+      
+      // 搜索统计
+      search: {
+        total: appStats.value.totalSearches,
+        game: appStats.value.gameSearches,
+        patch: appStats.value.patchSearches,
+        avgResults: appStats.value.avgResultCount,
+        avgTime: appStats.value.avgSearchTime,
+        currentResults: searchStore.totalResults,
+      },
+      
+      // 历史统计
+      history: historyStore.getHistoryStats(),
+      
+      // 缓存统计
+      cache: {
+        ...cacheStore.getCacheStats(),
+        hits: {
+          vndb: appStats.value.vndbCacheHits,
+          search: appStats.value.searchCacheHits,
+          image: appStats.value.imageCacheHits,
+        },
+      },
+      
+      // 会话统计
+      session: {
+        duration: sessionDuration.value,
+        pageViews: appStats.value.pageViews,
+        startTime: appStats.value.sessionStartTime,
+      },
+      
+      // 效率评分
+      efficiency: searchEfficiencyScore.value,
+    }
+  }
+  
+  // 重置统计
+  function resetStats() {
+    appStats.value = {
+      totalSearches: 0,
+      gameSearches: 0,
+      patchSearches: 0,
+      avgResultCount: 0,
+      vndbCacheHits: 0,
+      searchCacheHits: 0,
+      imageCacheHits: 0,
+      avgSearchTime: 0,
+      lastSearchTime: 0,
+      sessionStartTime: Date.now(),
+      pageViews: 1,
+    }
+    searchTimes.value = []
+  }
+  
+  // 添加自定义服务监控
+  function addService(key: string, name: string, url: string) {
+    serviceStatuses.value.set(key, {
+      name,
+      status: 'unknown',
+      lastChecked: 0,
+      url,
+    })
+  }
+  
+  // 移除服务监控
+  function removeService(key: string) {
+    serviceStatuses.value.delete(key)
+  }
+  
+  return {
+    // 状态
+    serviceStatuses,
+    visitorStats,
+    appStats,
+    searchTimes,
+    
+    // 计算属性
+    apiStatus,
+    allServicesOnline,
+    offlineServicesCount,
+    formattedPV,
+    formattedUV,
+    sessionDuration,
+    searchEfficiencyScore,
+    
+    // 方法
+    formatNumber,
+    checkServiceStatus,
+    checkAllServices,
+    startStatusCheck,
+    stopStatusCheck,
+    updateVisitorStats,
+    recordSearch,
+    recordCacheHit,
+    incrementPageView,
+    getComprehensiveStats,
+    resetStats,
+    addService,
+    removeService,
+  }
+})
+

From 0357dbe6ade309cf3142b92515f5d292a83ce1ab Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 07:19:24 +0800
Subject: [PATCH 5/6] Refactor component logic and improve performance tracking

- Updated KeyboardHelpPanel.vue to include an additional icon for better navigation clarity.
- Modified SearchHeader.vue to utilize window.performance for more accurate search timing metrics.
- Enhanced StatsCorner.vue by refining status text and icon logic for improved readability and maintainability.
- Cleaned up conditional returns in plugins.ts and stats.ts for better code consistency and clarity.
---
 src/components/KeyboardHelpPanel.vue |  2 +-
 src/components/SearchHeader.vue      |  4 ++--
 src/components/StatsCorner.vue       | 24 ++++++++++++------------
 src/stores/plugins.ts                | 16 ++++++++--------
 src/stores/stats.ts                  |  6 +++---
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/KeyboardHelpPanel.vue b/src/components/KeyboardHelpPanel.vue
index bca0a64..a2661b7 100644
--- a/src/components/KeyboardHelpPanel.vue
+++ b/src/components/KeyboardHelpPanel.vue
@@ -168,7 +168,7 @@ import {
   Keyboard, X, 
   Home, Settings, MessageSquare, BookOpen, History, Grid3x3, Search, HelpCircle,
   ArrowUp, ChevronLeft, ChevronRight,
-  Navigation, Command, Zap
+  Navigation, Command, Zap,
 } from 'lucide-vue-next'
 
 const uiStore = useUIStore()
diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index 03ca85b..c53f938 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -609,7 +609,7 @@ async function handleSearch() {
   searchStore.isSearching = true
   searchStore.errorMessage = ''
   hasScrolledToResults = false // 重置滚动标志
-  searchStartTime = performance.now() // 记录搜索开始时间
+  searchStartTime = window.performance.now() // 记录搜索开始时间
 
   const searchParams = new URLSearchParams()
   searchParams.set('game', searchQuery.value.trim())
@@ -678,7 +678,7 @@ async function handleSearch() {
         playCelebration() // 搜索完成音效
         
         // 计算搜索耗时并记录统计
-        const searchDuration = Math.round(performance.now() - searchStartTime)
+        const searchDuration = Math.round(window.performance.now() - searchStartTime)
         const resultCount = searchStore.totalResults
         statsStore.recordSearch(searchMode.value, resultCount, searchDuration)
         
diff --git a/src/components/StatsCorner.vue b/src/components/StatsCorner.vue
index e83f4cc..6506816 100644
--- a/src/components/StatsCorner.vue
+++ b/src/components/StatsCorner.vue
@@ -98,35 +98,35 @@ const responseTime = computed(() => apiService.value?.responseTime)
 
 // 状态文本
 const statusText = computed(() => {
-  if (isChecking.value) return '检测中'
-  if (isOnline.value) return '正常'
-  if (isOffline.value) return '异常'
+  if (isChecking.value) {return '检测中'}
+  if (isOnline.value) {return '正常'}
+  if (isOffline.value) {return '异常'}
   return '未知'
 })
 
 // 状态图标
 const statusIcon = computed(() => {
-  if (isChecking.value) return Activity
-  if (isOnline.value) return Wifi
+  if (isChecking.value) {return Activity}
+  if (isOnline.value) {return Wifi}
   return WifiOff
 })
 
 // 状态样式类
 const statusClass = computed(() => {
-  if (isChecking.value) return 'text-gray-600 dark:text-gray-400'
-  if (isOnline.value) return 'text-green-600 dark:text-green-400'
+  if (isChecking.value) {return 'text-gray-600 dark:text-gray-400'}
+  if (isOnline.value) {return 'text-green-600 dark:text-green-400'}
   return 'text-red-600 dark:text-red-400'
 })
 
 const statusIconClass = computed(() => {
-  if (isChecking.value) return 'text-gray-400'
-  if (isOnline.value) return 'text-green-500'
+  if (isChecking.value) {return 'text-gray-400'}
+  if (isOnline.value) {return 'text-green-500'}
   return 'text-red-500'
 })
 
 const statusDotClass = computed(() => {
-  if (isChecking.value) return 'bg-gray-400 animate-pulse'
-  if (isOnline.value) return 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]'
+  if (isChecking.value) {return 'bg-gray-400 animate-pulse'}
+  if (isOnline.value) {return 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]'}
   return 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]'
 })
 
@@ -162,7 +162,7 @@ function setupObserver() {
   const pvElement = document.getElementById('busuanzi_value_site_pv')
   const uvElement = document.getElementById('busuanzi_value_site_uv')
   
-  if (!pvElement || !uvElement) return
+  if (!pvElement || !uvElement) {return}
   
   observer = new MutationObserver(() => {
     checkBusuanziData()
diff --git a/src/stores/plugins.ts b/src/stores/plugins.ts
index 30dce57..4ef8842 100644
--- a/src/stores/plugins.ts
+++ b/src/stores/plugins.ts
@@ -1,4 +1,4 @@
-import type { PiniaPluginContext, StateTree, Store, StoreDefinition } from 'pinia'
+import type { PiniaPluginContext, StateTree, Store } from 'pinia'
 
 // ============================================
 // 类型定义
@@ -21,7 +21,7 @@ export interface PersistOptions {
 
 // 扩展 DefineStoreOptionsBase 类型
 declare module 'pinia' {
-  export interface DefineStoreOptionsBase<S extends StateTree, Store> {
+  export interface DefineStoreOptionsBase<_S extends StateTree, _Store> {
     persist?: boolean | PersistOptions
   }
   
@@ -57,7 +57,7 @@ function getValueByPath(obj: Record<string, unknown>, path: string): unknown {
 function setValueByPath(obj: Record<string, unknown>, path: string, value: unknown): void {
   const keys = path.split('.')
   const lastKey = keys.pop()
-  if (!lastKey) return
+  if (!lastKey) {return}
   
   let current = obj
   for (const key of keys) {
@@ -108,13 +108,13 @@ export function piniaPersistedState(context: PiniaPluginContext) {
   
   // 获取持久化配置
   const persistOption = options.persist
-  if (!persistOption) return
+  if (!persistOption) {return}
   
   const config: PersistOptions = typeof persistOption === 'boolean'
     ? { enabled: persistOption }
     : persistOption
   
-  if (!config.enabled) return
+  if (!config.enabled) {return}
   
   const prefix = config.prefix ?? 'pinia'
   const storageKey = `${prefix}-${store.$id}`
@@ -152,7 +152,7 @@ export function piniaPersistedState(context: PiniaPluginContext) {
  */
 export function piniaLogger(context: PiniaPluginContext) {
   // 仅在开发环境启用
-  if (import.meta.env.PROD) return
+  if (import.meta.env.PROD) {return}
   
   const { store } = context
   
@@ -266,7 +266,7 @@ export function piniaUndoRedo(context: PiniaPluginContext) {
   const { store, options } = context
   
   // 只对配置了 undoRedo 的 store 启用
-  if (!(options as { undoRedo?: boolean }).undoRedo) return
+  if (!(options as { undoRedo?: boolean }).undoRedo) {return}
   
   const history: StateTree[] = []
   let currentIndex = -1
@@ -356,7 +356,7 @@ export function piniaSyncTabs(context: PiniaPluginContext) {
   const { store, options } = context
   
   // 只对配置了 syncTabs 的 store 启用
-  if (!(options as { syncTabs?: boolean }).syncTabs) return
+  if (!(options as { syncTabs?: boolean }).syncTabs) {return}
   
   const channelName = `pinia-sync-${store.$id}`
   
diff --git a/src/stores/stats.ts b/src/stores/stats.ts
index 9e69700..0ced8b6 100644
--- a/src/stores/stats.ts
+++ b/src/stores/stats.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { useHistoryStore } from './history'
 import { useCacheStore } from './cache'
 import { useSearchStore } from './search'
@@ -117,7 +117,7 @@ export const useStatsStore = defineStore('stats', () => {
   
   // 搜索效率评分
   const searchEfficiencyScore = computed(() => {
-    if (appStats.value.totalSearches === 0) return 0
+    if (appStats.value.totalSearches === 0) {return 0}
     
     const cacheHitRate = (appStats.value.vndbCacheHits + appStats.value.searchCacheHits) / 
                          (appStats.value.totalSearches * 2)
@@ -146,7 +146,7 @@ export const useStatsStore = defineStore('stats', () => {
   // 检查单个服务状态
   async function checkServiceStatus(serviceKey: string) {
     const service = serviceStatuses.value.get(serviceKey)
-    if (!service || !service.url) return
+    if (!service || !service.url) {return}
     
     // 设置为检测中
     serviceStatuses.value.set(serviceKey, {

From 9cb75fc9f031a0cc67efe0176e05d983407005ad Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Sat, 27 Dec 2025 07:30:38 +0800
Subject: [PATCH 6/6] Refactor StatsCorner.vue for improved readability and
 functionality

- Simplified the status indicator section by removing unnecessary elements and enhancing the display of response time.
- Updated visitor statistics display to use more descriptive titles and improved data binding for clarity.
- Removed unused gamepad icon and related logic, streamlining the component's structure.
---
 src/components/StatsCorner.vue | 61 +++++++++++-----------------------
 1 file changed, 20 insertions(+), 41 deletions(-)

diff --git a/src/components/StatsCorner.vue b/src/components/StatsCorner.vue
index 6506816..a9283ba 100644
--- a/src/components/StatsCorner.vue
+++ b/src/components/StatsCorner.vue
@@ -1,69 +1,55 @@
 <template>
-  <!-- 左上角品牌标识和状态 -->
-  <div class="fixed top-4 left-4 z-40 flex items-center gap-2">
-    <!-- Gamepad 图标 - 品牌标识 -->
-    <div class="glassmorphism-card rounded-2xl shadow-lg p-2.5 flex items-center justify-center">
-      <Gamepad2 
-        :size="22" 
-        class="text-theme-primary dark:text-theme-accent"
-      />
-    </div>
-    
-    <!-- 状态指示器 -->
+  <!-- 左上角状态指示器 -->
+  <div class="fixed top-4 left-4 z-40">
     <a
       href="https://status.searchgal.homes"
       target="_blank"
       rel="noopener noreferrer"
       :class="[
-        'status-link glassmorphism-card rounded-2xl shadow-lg px-3 py-2 flex items-center gap-2 text-sm font-medium transition-all duration-300 hover:scale-105',
+        'status-link glassmorphism-card rounded-2xl shadow-lg px-3 py-2 flex items-center gap-2 transition-all duration-300 hover:scale-105',
         statusClass
       ]"
+      :title="statusText"
     >
       <!-- 状态图标 -->
       <component
         :is="statusIcon"
-        :size="14"
+        :size="16"
         :class="[
           isChecking ? 'animate-pulse' : '',
           statusIconClass
         ]"
       />
-      <span 
-        class="w-2 h-2 rounded-full"
-        :class="statusDotClass"
-      />
-      <span>{{ statusText }}</span>
-      
-      <!-- 响应时间（可选显示） -->
-      <span 
-        v-if="responseTime && isOnline" 
-        class="text-[10px] opacity-60 ml-1"
-      >
-        {{ responseTime }}ms
+      <!-- 延迟显示 -->
+      <span class="text-sm font-medium tabular-nums">
+        {{ isChecking ? '...' : (responseTime ? `${responseTime}ms` : '--') }}
       </span>
     </a>
   </div>
 
-  <!-- 左下角统计 -->
+  <!-- 隐藏的 busuanzi 元素（让 busuanzi 脚本更新） -->
+  <div id="busuanzi_container_site_pv" class="hidden">
+    <span id="busuanzi_value_site_pv" />
+    <span id="busuanzi_value_site_uv" />
+  </div>
+
+  <!-- 左下角统计（Vue 控制显示） -->
   <div
-    id="busuanzi_container_site_pv"
     class="fixed bottom-4 left-4 z-40 transition-all duration-300"
     :class="showStats ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'"
   >
     <div class="stats-card glassmorphism-card rounded-2xl shadow-lg px-4 py-3 flex flex-col gap-2">
       <!-- 访问量 -->
-      <div class="flex items-center gap-2" title="总访问量">
+      <div class="flex items-center gap-2" title="总访问量 (PV)">
         <Eye :size="16" class="text-theme-primary dark:text-theme-accent" />
-        <span class="text-xs text-gray-500 dark:text-slate-400">PV</span>
-        <span id="busuanzi_value_site_pv" class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.formattedPV }}</span>
+        <span class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.visitorStats.pv }}</span>
       </div>
       <!-- 分隔线 -->
       <div class="h-px bg-gray-300/50 dark:bg-slate-600/50" />
       <!-- 访客数 -->
-      <div class="flex items-center gap-2" title="独立访客">
+      <div class="flex items-center gap-2" title="独立访客 (UV)">
         <Users :size="16" class="text-theme-primary dark:text-theme-accent" />
-        <span class="text-xs text-gray-500 dark:text-slate-400">UV</span>
-        <span id="busuanzi_value_site_uv" class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.formattedUV }}</span>
+        <span class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.visitorStats.uv }}</span>
       </div>
       
       <!-- 搜索统计（有搜索记录时显示） -->
@@ -71,7 +57,6 @@
         <div class="h-px bg-gray-300/50 dark:bg-slate-600/50" />
         <div class="flex items-center gap-2" title="本次会话搜索次数">
           <Search :size="16" class="text-theme-primary dark:text-theme-accent" />
-          <span class="text-xs text-gray-500 dark:text-slate-400">搜索</span>
           <span class="font-semibold text-gray-800 dark:text-slate-100">{{ statsStore.appStats.totalSearches }}</span>
         </div>
       </template>
@@ -81,7 +66,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { Gamepad2, Eye, Users, Activity, Wifi, WifiOff, Search } from 'lucide-vue-next'
+import { Eye, Users, Activity, Wifi, WifiOff, Search } from 'lucide-vue-next'
 import { useStatsStore } from '@/stores/stats'
 
 const statsStore = useStatsStore()
@@ -124,12 +109,6 @@ const statusIconClass = computed(() => {
   return 'text-red-500'
 })
 
-const statusDotClass = computed(() => {
-  if (isChecking.value) {return 'bg-gray-400 animate-pulse'}
-  if (isOnline.value) {return 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]'}
-  return 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]'
-})
-
 // 检查不蒜子数据是否加载
 function checkBusuanziData() {
   const pvElement = document.getElementById('busuanzi_value_site_pv')