From 92246b21393454db383aff029b1544cc13488c8b Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Fri, 21 Nov 2025 17:38:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8E=E5=A2=9E=E5=BC=BA=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E4=B8=80=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 更新多个组件的样式以使用新的主题颜色变量，确保在不同模式下的视觉一致性。
* 优化滚动条样式，提升整体用户体验。
* 在 `SearchHeader.vue` 和 `VndbPanel.vue` 中调整背景和文本颜色，增强可读性。
* 增加对 `customApi` 的监听，确保设置变化时的实时更新。
---
 src/components/CommentsModal.vue   |  4 +--
 src/components/FloatingButtons.vue |  4 +--
 src/components/SearchHeader.vue    |  8 +++++
 src/components/SearchHistory.vue   |  4 +--
 src/components/SearchResults.vue   |  2 +-
 src/components/SettingsModal.vue   | 20 +++++++-----
 src/components/VndbPanel.vue       | 12 ++++----
 src/styles/theme.css               | 49 ++++++++++++++++++++++++++++++
 8 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/src/components/CommentsModal.vue b/src/components/CommentsModal.vue
index 7e844c1..dfc8732 100644
--- a/src/components/CommentsModal.vue
+++ b/src/components/CommentsModal.vue
@@ -28,7 +28,7 @@
           @click.stop
         >
           <!-- 标题栏 -->
-          <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-pink-100 dark:border-slate-700">
+          <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-theme-primary/20 dark:border-slate-700">
             <i class="fas fa-comments text-theme-primary dark:text-theme-accent text-xl sm:text-2xl" />
             <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-slate-100 flex-1">评论区</h2>
             <button
@@ -143,7 +143,7 @@ onUnmounted(() => {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgb(236, 72, 153), rgb(139, 92, 246));
+  background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
   border-radius: 10px;
   transition: background 0.3s ease;
 }
diff --git a/src/components/FloatingButtons.vue b/src/components/FloatingButtons.vue
index 2c00d66..cd642c5 100644
--- a/src/components/FloatingButtons.vue
+++ b/src/components/FloatingButtons.vue
@@ -220,7 +220,7 @@ onUnmounted(() => {
 }
 
 .comments-btn {
-  background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119));
+  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
   color: white;
 }
 
@@ -230,7 +230,7 @@ onUnmounted(() => {
 }
 
 .vndb-btn {
-  background: linear-gradient(135deg, rgb(139, 92, 246), rgb(124, 58, 237));
+  background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-dark));
   color: white;
 }
 
diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index 8d92adc..aa6f806 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -296,6 +296,14 @@ watch([searchQuery, searchMode, customApi], () => {
   }
 })
 
+// 监听 store 的 customApi 变化（从设置中更新）
+watch(() => searchStore.customApi, (newApi) => {
+  // 只在不是由本地更新触发时才同步
+  if (customApi.value !== newApi) {
+    customApi.value = newApi
+  }
+})
+
 // 处理历史记录选择
 function handleHistorySelect(history: SearchHistoryType) {
   searchQuery.value = history.query
diff --git a/src/components/SearchHistory.vue b/src/components/SearchHistory.vue
index b794c8d..528c855 100644
--- a/src/components/SearchHistory.vue
+++ b/src/components/SearchHistory.vue
@@ -31,7 +31,7 @@
           <button
             v-for="(item, index) in history"
             :key="index"
-            class="history-item px-3 py-1.5 rounded-lg bg-gray-50 hover:bg-theme-primary/10 border border-gray-200 hover:border-pink-300 transition-all text-sm flex items-center gap-2 group"
+            class="history-item px-3 py-1.5 rounded-lg bg-gray-50 hover:bg-theme-primary/10 border border-gray-200 hover:border-theme-primary/30 transition-all text-sm flex items-center gap-2 group"
             @click="selectHistory(item)"
           >
             <i
@@ -39,7 +39,7 @@
               class="text-xs text-gray-400 group-hover:text-theme-primary transition-colors"
             />
             <span class="text-gray-700 group-hover:text-theme-primary-dark font-medium">{{ item.query }}</span>
-            <span class="text-xs text-gray-400 group-hover:text-pink-400">{{ item.resultCount }}</span>
+            <span class="text-xs text-gray-400 group-hover:text-theme-primary/40">{{ item.resultCount }}</span>
           </button>
         </div>
       </div>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 8a30bd1..489d047 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -83,7 +83,7 @@
                 :class="[
                   'min-w-10 h-10 px-3 rounded-lg font-medium transition-all',
                   page === platformData.currentPage
-                    ? 'bg-pink-500 dark:bg-purple-600 text-white shadow-lg'
+                    ? 'bg-theme-primary dark:bg-theme-accent text-white shadow-lg'
                     : 'bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-600'
                 ]"
                 @click="goToPage(platformName, page)"
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index e6b88e3..3a5bfff 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -99,7 +99,7 @@
                   </div>
                   
                   <!-- 预览提示 -->
-                  <div class="bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-pink-950/20 dark:to-purple-950/20 border border-theme-primary/30 dark:border-theme-primary/50 rounded-xl p-4">
+                  <div class="bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-theme-primary/10 dark:to-theme-accent/10 border border-theme-primary/30 dark:border-theme-primary/50 rounded-xl p-4">
                     <div class="flex items-start gap-3">
                       <i class="fas fa-lightbulb" style="color: var(--theme-primary)" />
                       <div class="flex-1 text-sm text-gray-700 dark:text-slate-300">
@@ -230,10 +230,14 @@ function close() {
 }
 
 function save() {
-  // 保存主题
+  // 保存主题到 localStorage
   saveTheme(localTheme.value)
+  // 更新原始主题，避免关闭时恢复
+  originalTheme.value = localTheme.value
+  // 发出保存事件
   emit('save', localCustomApi.value, localTheme.value)
-  close()
+  // 关闭模态框（不会恢复主题，因为 originalTheme 已更新）
+  emit('close')
 }
 
 function reset() {
@@ -244,7 +248,7 @@ function reset() {
 </script>
 
 <style scoped>
-/* 自定义滚动条 - 粉色渐变 */
+/* 自定义滚动条 - 使用主题色 */
 .custom-scrollbar::-webkit-scrollbar {
   width: 10px;
 }
@@ -255,13 +259,13 @@ function reset() {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgb(236, 72, 153), rgb(139, 92, 246));
+  background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
   border-radius: 10px;
   transition: background 0.3s ease;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, rgb(219, 39, 119), rgb(124, 58, 237));
+  background: linear-gradient(180deg, var(--theme-primary-dark), var(--theme-accent-dark));
 }
 
 /* 暗色模式滚动条 */
@@ -270,11 +274,11 @@ function reset() {
 }
 
 .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgb(139, 92, 246), rgb(99, 102, 241));
+  background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-dark));
 }
 
 .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, rgb(124, 58, 237), rgb(79, 70, 229));
+  background: linear-gradient(180deg, var(--theme-accent-dark), var(--theme-accent));
 }
 
 /* 设置区块 */
diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index ec39288..3d13ecf 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -64,7 +64,7 @@
             <span
               v-for="(name, index) in searchStore.vndbInfo.names.slice(0, 5)"
               :key="index"
-              class="px-2 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs rounded-full"
+              class="px-2 py-1 bg-theme-accent/10 dark:bg-theme-accent/30 text-theme-accent dark:text-theme-accent/70 text-xs rounded-full"
             >
               {{ name }}
             </span>
@@ -108,9 +108,9 @@
         <!-- 游戏信息卡片 -->
         <div class="mb-4 grid grid-cols-1 gap-3">
           <!-- 游戏时长 -->
-          <div v-if="searchStore.vndbInfo.play_hours" class="flex items-center gap-3 p-3 bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-pink-900/20 dark:to-purple-900/20 rounded-xl border border-theme-primary/20 dark:border-theme-primary/30">
+          <div v-if="searchStore.vndbInfo.play_hours" class="flex items-center gap-3 p-3 bg-gradient-to-r from-theme-primary/5 to-theme-accent/5 dark:from-theme-primary/10 dark:to-theme-accent/10 rounded-xl border border-theme-primary/20 dark:border-theme-primary/30">
             <div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-slate-700 rounded-lg shadow-sm">
-              <i class="fas fa-clock text-theme-primary dark:text-pink-400 text-lg" />
+              <i class="fas fa-clock text-theme-primary dark:text-theme-primary text-lg" />
             </div>
             <div class="flex-1">
               <p class="text-xs text-gray-500 dark:text-slate-400 mb-0.5">游戏时长</p>
@@ -157,7 +157,7 @@
         <div v-if="searchStore.vndbInfo.description" class="mb-4">
           <div class="flex items-center justify-between mb-2">
             <p class="text-sm font-semibold text-gray-700 dark:text-slate-200">
-              <i class="fas fa-align-left text-theme-primary dark:text-pink-400 mr-1" />
+              <i class="fas fa-align-left text-theme-primary dark:text-theme-primary mr-1" />
               简介:
             </p>
             <button
@@ -381,7 +381,7 @@ function formatPlatform(platform: string): string {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgb(236, 72, 153), rgb(139, 92, 246));
+  background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
   border-radius: 10px;
   transition: background 0.3s ease;
 }
@@ -396,7 +396,7 @@ function formatPlatform(platform: string): string {
 }
 
 :global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgb(139, 92, 246), rgb(99, 102, 241));
+  background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-dark));
 }
 
 :global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 9dea64f..4d09d7f 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -96,6 +96,14 @@
   background-color: color-mix(in srgb, var(--theme-primary) 60%, transparent);
 }
 
+.bg-theme-primary\/10 {
+  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
+}
+
+.bg-theme-primary\/5 {
+  background-color: color-mix(in srgb, var(--theme-primary) 5%, transparent);
+}
+
 .bg-theme-accent\/80 {
   background-color: color-mix(in srgb, var(--theme-accent) 80%, transparent);
 }
@@ -104,14 +112,55 @@
   background-color: color-mix(in srgb, var(--theme-accent) 70%, transparent);
 }
 
+.bg-theme-accent\/30 {
+  background-color: color-mix(in srgb, var(--theme-accent) 30%, transparent);
+}
+
+.bg-theme-accent\/10 {
+  background-color: color-mix(in srgb, var(--theme-accent) 10%, transparent);
+}
+
 .text-theme-primary\/80 {
   color: color-mix(in srgb, var(--theme-primary) 80%, transparent);
 }
 
+.text-theme-accent\/70 {
+  color: color-mix(in srgb, var(--theme-accent) 70%, transparent);
+}
+
 .border-theme-primary\/60 {
   border-color: color-mix(in srgb, var(--theme-primary) 60%, transparent);
 }
 
+.border-theme-primary\/30 {
+  border-color: color-mix(in srgb, var(--theme-primary) 30%, transparent);
+}
+
+.border-theme-primary\/20 {
+  border-color: color-mix(in srgb, var(--theme-primary) 20%, transparent);
+}
+
+.border-theme-primary\/10 {
+  border-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
+}
+
+/* Hover 状态带透明度 */
+.hover\:bg-theme-primary\/10:hover {
+  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
+}
+
+.hover\:border-theme-primary\/30:hover {
+  border-color: color-mix(in srgb, var(--theme-primary) 30%, transparent);
+}
+
+.group:hover .group-hover\:text-theme-primary {
+  color: var(--theme-primary);
+}
+
+.group:hover .group-hover\:text-theme-primary\/40 {
+  color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
+}
+
 /* 渐变背景（带透明度） */
 .from-theme-primary\/70 {
   --tw-gradient-from: color-mix(in srgb, var(--theme-primary) 70%, transparent);