refactor(theme): 将主题逻辑提取到可复用组合式函数

- 从 App.vue 中移除内联主题管理代码
- 创建 useTheme 组合式函数集中处理主题状态、切换和系统主题监听
- 在 TopNav 组件中集成主题切换按钮和样式
- 保持原有功能不变，仅重构代码结构以提高可维护性

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>