feat(frontend): 实现主题切换功能并优化全局样式

- 在 App.vue 中添加主题切换按钮和逻辑
- 新增 global.css 和 theme.css 文件，统一全局样式和主题样式
- 更新 LoginPage、RegisterPage 和 HomePage 的样式，适配新主题
- 实现暗黑模式下的样式调整

biji-qianduan/src/App.vue

@@ -3,21 +3,65 @@
 <template>
   <div id="app">
     <router-view></router-view>
+    <div class="theme-switcher" @click="toggleTheme" :title="`切换到${theme === 'light' ? '深色' : '浅色'}主题`">
+      <span v-if="theme === 'light'">🌙</span>
+      <span v-else>☀️</span>
+    </div>
   </div>
 </template>
 
 <script setup>
-// 这里可以添加全局逻辑
+import { ref, onMounted, watchEffect } from 'vue';
+
+const theme = ref('light');
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light';
+  localStorage.setItem('theme', theme.value);
+};
+
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    theme.value = savedTheme;
+  } else {
+    // 如果没有保存的主题，则根据系统设置初始化
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    theme.value = prefersDark ? 'dark' : 'light';
+  }
+});
+
+watchEffect(() => {
+  document.documentElement.className = theme.value === 'dark' ? 'dark-theme' : '';
+});
 </script>
 
 <style>
-/* 全局样式 */
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  margin: 0;
-  padding: 0;
+.theme-switcher {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: var(--bg-color-secondary);
+  box-shadow: var(--box-shadow);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 24px;
+  user-select: none;
+  transition: all var(--transition-duration) ease;
+  z-index: 1000;
+}
+
+.theme-switcher:hover {
+  transform: scale(1.1);
+  box-shadow: var(--box-shadow-dark);
+}
+
+.theme-switcher:active {
+  transform: scale(0.95);
 }
 </style>