From bcfe39b32cddc02dfab47eceb31831ed45fe3fba Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Wed, 18 Mar 2026 22:35:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor(theme):=20=E5=B0=86=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E6=8F=90=E5=8F=96=E5=88=B0=E5=8F=AF=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8=E7=BB=84=E5=90=88=E5=BC=8F=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 从 App.vue 中移除内联主题管理代码
- 创建 useTheme 组合式函数集中处理主题状态、切换和系统主题监听
- 在 TopNav 组件中集成主题切换按钮和样式
- 保持原有功能不变，仅重构代码结构以提高可维护性
---
 frontend/app/web-gold/src/App.vue             | 58 +++----------------
 .../app/web-gold/src/components/TopNav.vue    | 53 ++++++++++++++++-
 .../app/web-gold/src/composables/useTheme.js  | 52 +++++++++++++++++
 3 files changed, 111 insertions(+), 52 deletions(-)
 create mode 100644 frontend/app/web-gold/src/composables/useTheme.js

diff --git a/frontend/app/web-gold/src/App.vue b/frontend/app/web-gold/src/App.vue
index b91a7e823c..32224d014a 100644
--- a/frontend/app/web-gold/src/App.vue
+++ b/frontend/app/web-gold/src/App.vue
@@ -1,9 +1,13 @@
 <script setup>
 import { RouterView } from 'vue-router'
-import { ref, watchEffect, provide } from 'vue'
-import { Toaster, toast } from 'vue-sonner'
+import { ref, provide } from 'vue'
+import { Toaster } from 'vue-sonner'
 import SvgSprite from '@/components/icons/SvgSprite.vue'
-import { DEFAULT_LOCALE, getStoredLocale, setStoredLocale, initDayjsLocale } from '@/config/locale'
+import { getStoredLocale, setStoredLocale, initDayjsLocale } from '@/config/locale'
+import { useTheme } from '@/composables/useTheme'
+
+// 初始化主题（composable 会自动处理）
+useTheme()
 
 // ========================================
 // 国际化配置
@@ -23,54 +27,8 @@ const changeLocale = (newLocale) => {
   initDayjsLocale(newLocale)
 }
 
-// ========================================
-// 主题配置 - 使用 CSS 变量，无需 Ant Design
-// ========================================
-const isDark = ref(false)
-
-// 初始化主题
-const initTheme = () => {
-  const stored = localStorage.getItem('theme')
-  if (stored) {
-    isDark.value = stored === 'dark'
-  } else {
-    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
-  }
-  document.documentElement.classList.toggle('dark', isDark.value)
-  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
-}
-
-// 主题切换
-const toggleTheme = () => {
-  isDark.value = !isDark.value
-  document.documentElement.classList.toggle('dark', isDark.value)
-  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
-  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
-}
-
-// 初始化
-initTheme()
-
-// 监听系统主题变化
-watchEffect((onCleanup) => {
-  const media = window.matchMedia('(prefers-color-scheme: dark)')
-  const handler = (e) => {
-    if (!localStorage.getItem('theme')) {
-      isDark.value = e.matches
-      document.documentElement.classList.toggle('dark', e.matches)
-      document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
-    }
-  }
-  media.addEventListener('change', handler)
-  onCleanup(() => media.removeEventListener('change', handler))
-})
-
-// 注意：token 刷新逻辑需要通过后端 API 实现
-// TokenManager 只是本地存储管理器，不具备刷新能力
-// 如需自动刷新，应在 axios 拦截器中处理 401 响应
-
 // 暴露给模板使用
-defineExpose({ toggleTheme, isDark, changeLocale, locale })
+defineExpose({ changeLocale, locale })
 </script>
 
 <template>
diff --git a/frontend/app/web-gold/src/components/TopNav.vue b/frontend/app/web-gold/src/components/TopNav.vue
index b4a24b0950..6684df0c60 100644
--- a/frontend/app/web-gold/src/components/TopNav.vue
+++ b/frontend/app/web-gold/src/components/TopNav.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
 import { useUserStore } from '@/stores/user'
+import { useTheme } from '@/composables/useTheme'
 import UserDropdown from '@/components/UserDropdown.vue'
 import BrandLogo from '@/components/BrandLogo.vue'
 
 const userStore = useUserStore()
+const { isDark, toggleTheme } = useTheme()
 
 // 计算是否应该显示用户组件
 const shouldShowUser = computed(() => {
@@ -20,9 +23,55 @@ const shouldShowUser = computed(() => {
     <div class="flex items-center gap-4 flex-1">
       <BrandLogo :size="36" />
     </div>
-    
-    <div class="flex items-center gap-4">
+
+    <div class="flex items-center gap-3">
+      <!-- 主题切换按钮 -->
+      <button
+        @click="toggleTheme"
+        class="theme-toggle"
+        :title="isDark ? '切换到亮色模式' : '切换到深色模式'"
+      >
+        <Icon :icon="isDark ? 'lucide:sun' : 'lucide:moon'" class="theme-icon" />
+      </button>
+
       <UserDropdown v-if="shouldShowUser" />
     </div>
   </header>
 </template>
+
+<style scoped>
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.theme-toggle:hover {
+  background: var(--color-gray-100);
+}
+
+:global(.dark) .theme-toggle:hover {
+  background: var(--color-gray-800);
+}
+
+.theme-icon {
+  font-size: 18px;
+  color: var(--color-gray-600);
+  transition: transform 0.3s ease;
+}
+
+.theme-toggle:hover .theme-icon {
+  transform: rotate(15deg);
+}
+
+:global(.dark) .theme-icon {
+  color: var(--color-gray-400);
+}
+</style>
diff --git a/frontend/app/web-gold/src/composables/useTheme.js b/frontend/app/web-gold/src/composables/useTheme.js
new file mode 100644
index 0000000000..be4240a942
--- /dev/null
+++ b/frontend/app/web-gold/src/composables/useTheme.js
@@ -0,0 +1,52 @@
+import { ref, watchEffect } from 'vue'
+
+const isDark = ref(false)
+
+// 初始化主题
+const initTheme = () => {
+  const stored = localStorage.getItem('theme')
+  if (stored) {
+    isDark.value = stored === 'dark'
+  } else {
+    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+  applyTheme()
+}
+
+// 应用主题到 DOM
+const applyTheme = () => {
+  document.documentElement.classList.toggle('dark', isDark.value)
+  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
+}
+
+// 切换主题
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+  applyTheme()
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+}
+
+// 监听系统主题变化
+if (typeof window !== 'undefined') {
+  watchEffect((onCleanup) => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = (e) => {
+      if (!localStorage.getItem('theme')) {
+        isDark.value = e.matches
+        applyTheme()
+      }
+    }
+    media.addEventListener('change', handler)
+    onCleanup(() => media.removeEventListener('change', handler))
+  })
+}
+
+// 自动初始化
+initTheme()
+
+export function useTheme() {
+  return {
+    isDark,
+    toggleTheme
+  }
+}