feat: 增加主题设置功能 (#235)

* feat(ui): 增加主题设置功能

* feat(ui): footer文字颜色跟随项目主题

---------

Co-authored-by: pengpeng <[email protected]>

Author: shelly-pp

web/src/assets/style.css

@@ -18,6 +18,22 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
+  /* 主题颜色变量 - 白天模式 */
+  --bg-color: #f5f7fa;
+  --bg-color-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  --card-bg-color: rgba(255, 255, 255, 0.95);
+  --card-border-color: rgba(255, 255, 255, 0.2);
+  --text-color-primary: #1e293b;
+  --text-color-secondary: #475569;
+  --text-color-tertiary: #94a3b8;
+  --border-color: #e2e8f0;
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.05);
+  --selection-bg-color: rgba(102, 126, 234, 0.2);
+  --focus-outline-color: rgba(102, 126, 234, 0.5);
+  --loading-overlay-bg: rgba(255, 255, 255, 0.8);
+  --glass-effect-bg: rgba(255, 255, 255, 0.25);
+  --glass-effect-border: rgba(255, 255, 255, 0.18);
+
   /* 现代化颜色方案 */
   --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
@@ -39,6 +55,24 @@
   --border-radius-xl: 24px;
 }
 
+html.dark {
+  /* 主题颜色变量 - 暗夜模式 */
+  --bg-color: #1a202c;
+  --bg-color-gradient: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
+  --card-bg-color: rgba(45, 55, 72, 0.85);
+  --card-border-color: rgba(255, 255, 255, 0.1);
+  --text-color-primary: #e2e8f0;
+  --text-color-secondary: #a0aec0;
+  --text-color-tertiary: #718096;
+  --border-color: #4a5568;
+  --scrollbar-track-bg: rgba(255, 255, 255, 0.1);
+  --selection-bg-color: rgba(102, 126, 234, 0.3);
+  --focus-outline-color: rgba(102, 126, 234, 0.6);
+  --loading-overlay-bg: rgba(26, 32, 44, 0.8);
+  --glass-effect-bg: rgba(45, 55, 72, 0.25);
+  --glass-effect-border: rgba(255, 255, 255, 0.1);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -48,7 +82,8 @@
 html,
 body {
   height: 100%;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  color: var(--text-color-primary);
+  background: var(--bg-color-gradient);
   background-attachment: fixed;
 }
 
@@ -148,7 +183,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--scrollbar-track-bg);
   border-radius: 1px;
 }
 
@@ -163,11 +198,11 @@ body {
 
 /* 通用卡片样式 */
 .modern-card {
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--card-bg-color);
   backdrop-filter: blur(10px);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-lg);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--card-border-color);
   transition: all 0.2s ease;
 }
 
@@ -196,18 +231,18 @@ body {
 }
 
 .modern-input:focus {
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  box-shadow: 0 0 0 3px var(--selection-bg-color);
 }
 
 /* 选择文本样式 */
 ::selection {
-  background: rgba(102, 126, 234, 0.2);
-  color: #1e293b;
+  background: var(--selection-bg-color);
+  color: var(--text-color-primary);
 }
 
 ::-moz-selection {
-  background: rgba(102, 126, 234, 0.2);
-  color: #1e293b;
+  background: var(--selection-bg-color);
+  color: var(--text-color-primary);
 }
 
 /* Focus样式增强 */
@@ -216,7 +251,7 @@ body {
 }
 
 *:focus-visible {
-  outline: 2px solid rgba(102, 126, 234, 0.5);
+  outline: 2px solid var(--focus-outline-color);
   outline-offset: 2px;
 }
 
@@ -227,7 +262,7 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--loading-overlay-bg);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -259,9 +294,9 @@ body {
 
 /* 玻璃态效果 */
 .glass-effect {
-  background: rgba(255, 255, 255, 0.25);
+  background: var(--glass-effect-bg);
   backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid var(--glass-effect-border);
 }
 
 /* 悬停效果增强 */

web/src/components/AppFooter.vue

@@ -229,9 +229,9 @@ onMounted(() => {
 
 <style scoped>
 .app-footer {
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--bg-color);
   backdrop-filter: blur(20px);
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid var(--border-color);
   padding: 12px 24px;
   font-size: 14px;
   min-height: 52px;
@@ -251,7 +251,7 @@ onMounted(() => {
 }
 
 .project-info {
-  color: #666;
+  color: var(--text-color-secondary);
   font-weight: 500;
 }
 
@@ -283,7 +283,7 @@ onMounted(() => {
 .version-text {
   font-weight: 500;
   font-size: 13px;
-  color: #666;
+  color: var(--text-color-secondary);
   white-space: nowrap;
 }
 
@@ -311,7 +311,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #666;
+  color: var(--text-color-secondary);
   text-decoration: none;
   padding: 4px 6px;
   border-radius: 4px;
@@ -338,13 +338,8 @@ onMounted(() => {
   gap: 8px;
 }
 
-.copyright-text {
-  color: #888;
-  font-size: 12px;
-}
-
-.license-text {
-  color: #888;
+.copyright-text, .license-text {
+  color: var(--text-color-tertiary);
   font-size: 12px;
 }
 

web/src/components/GlobalProviders.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { appState } from "@/utils/app-state";
+import { currentTheme } from "@/utils/theme";
 import {
   NConfigProvider,
   NDialogProvider,
   NLoadingBarProvider,
   NMessageProvider,
+  darkTheme,
   useLoadingBar,
   useMessage,
   type GlobalThemeOverrides,
 } from "naive-ui";
-import { defineComponent, watch } from "vue";
+import { computed, defineComponent, watch } from "vue";
 
 // 自定义主题配置
 const themeOverrides: GlobalThemeOverrides = {
@@ -39,6 +41,8 @@ const themeOverrides: GlobalThemeOverrides = {
   },
 };
 
+const naiveTheme = computed(() => (currentTheme.value === "dark" ? darkTheme : null));
+
 function useGlobalMessage() {
   window.$message = useMessage();
 }
@@ -69,7 +73,7 @@ const Message = defineComponent({
 </script>
 
 <template>
-  <n-config-provider :theme-overrides="themeOverrides">
+  <n-config-provider :theme="naiveTheme" :theme-overrides="themeOverrides">
     <n-loading-bar-provider>
       <n-message-provider placement="top-right">
         <n-dialog-provider>

web/src/components/Layout.vue

@@ -3,6 +3,7 @@ import AppFooter from "@/components/AppFooter.vue";
 import GlobalTaskProgressBar from "@/components/GlobalTaskProgressBar.vue";
 import Logout from "@/components/Logout.vue";
 import NavBar from "@/components/NavBar.vue";
+import ThemeToggleButton from "@/components/ThemeToggleButton.vue";
 import { useMediaQuery } from "@vueuse/core";
 import { ref, watch } from "vue";
 
@@ -36,6 +37,7 @@ const toggleMenu = () => {
         </nav>
 
         <div class="header-actions">
+          <theme-toggle-button />
           <logout v-if="!isMobile" />
           <n-button v-else text @click="toggleMenu">
             <svg viewBox="0 0 24 24" width="24" height="24">
@@ -80,7 +82,7 @@ const toggleMenu = () => {
 }
 
 .layout-header {
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--bg-color);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: var(--shadow-sm);
@@ -134,6 +136,7 @@ const toggleMenu = () => {
   flex-shrink: 0;
   display: flex;
   align-items: center;
+  gap: 8px;
 }
 
 .mobile-actions {

web/src/components/ThemeToggleButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { currentTheme, toggleTheme } from "@/utils/theme";
+import { NButton } from "naive-ui";
+</script>
+
+<template>
+  <n-button @click="toggleTheme" class="theme-toggle-btn" quaternary>
+    <template #icon>
+      <span v-if="currentTheme === 'light'">🌙</span>
+      <span v-else>☀️</span>
+    </template>
+  </n-button>
+</template>
+
+<style scoped>
+.theme-toggle-btn {
+  font-size: 1.2rem;
+  padding: 0 8px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: color 0.2s ease-in-out;
+}
+</style>

web/src/utils/theme.ts

@@ -0,0 +1,32 @@
+import { ref, watchEffect } from "vue";
+
+type Theme = "light" | "dark";
+
+const THEME_KEY = "app_theme";
+
+// 优先从 localStorage 读取主题，否则根据系统偏好设置
+const initialTheme = (): Theme => {
+  const storedTheme = localStorage.getItem(THEME_KEY) as Theme | null;
+  if (storedTheme) {
+    return storedTheme;
+  }
+  return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+export const currentTheme = ref<Theme>(initialTheme());
+
+export const toggleTheme = () => {
+  currentTheme.value = currentTheme.value === "light" ? "dark" : "light";
+};
+
+// 监听主题变化，并更新 localStorage 和 <html> class
+watchEffect(() => {
+  localStorage.setItem(THEME_KEY, currentTheme.value);
+  if (currentTheme.value === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+});