A:增加样式转换

src/front/argus-front/CLAUDE.md

@@ -0,0 +1,3 @@
+这是一个Vue3项目，使用了TS和NaiveUI。
+
+我的项目是照片管理项目的前端，使用HTTP请求来请求展示内容

src/front/argus-front/src/App.vue

@@ -1,17 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { NConfigProvider, NMessageProvider, NGlobalStyle, lightTheme } from 'naive-ui'
+import { computed, onMounted } from 'vue'
+import { NConfigProvider, NMessageProvider, NGlobalStyle, lightTheme, darkTheme } from 'naive-ui'
 import AppLayout from '@/components/Layout/AppLayout.vue'
+import { useThemeStore } from '@/stores/theme'
 
-const theme = ref(lightTheme)
+const themeStore = useThemeStore()
+
+// Naive UI 主题跟随我们的主题状态
+const naiveTheme = computed(() => {
+  return themeStore.isDark ? darkTheme : lightTheme
+})
+
+// 初始化主题
+onMounted(() => {
+  themeStore.initTheme()
+})
 </script>
 
 <template>
-  <n-config-provider :theme="theme">
+  <n-config-provider :theme="naiveTheme">
     <n-global-style />
     <n-message-provider>
-      <AppLayout />
+      <div class="app-container">
+        <AppLayout />
+      </div>
     </n-message-provider>
   </n-config-provider>
 </template>
 
+<style scoped>
+.app-container {
+  min-height: 100vh;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+</style>
+

src/front/argus-front/src/assets/base.css

@@ -0,0 +1,87 @@
+/* ú@7ÍnŒ;˜M */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--text-color);
+  background: var(--bg-color);
+  transition: color 0.3s, background-color 0.3s;
+  line-height: 1.6;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+#app {
+  font-weight: normal;
+  color: var(--text-color);
+  background: var(--bg-color);
+}
+
+a {
+  color: var(--text-color);
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
+/* nÝ@	¹hý(;˜ØÏ */
+.n-layout,
+.n-layout-header,
+.n-layout-sider,
+.n-layout-content,
+.n-layout-footer {
+  background-color: var(--bg-color) !important;
+  color: var(--text-color) !important;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+/* ñr!„Ú¨a7 */
+html.dark ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+html.dark ::-webkit-scrollbar-track {
+  background: var(--bg-color-secondary);
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+html.dark ::-webkit-scrollbar-thumb:hover {
+  background: var(--text-color-secondary);
+}
+
+/* Er!„Ú¨a7 */
+html.light ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+html.light ::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+html.light ::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+html.light ::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}

src/front/argus-front/src/assets/main.css

@@ -1,11 +1,7 @@
-@import "base.css";
 @import "var.css";
-* {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-decoration: none;
-}
+@import "base.css";
+@import "theme-override.css";
+
 /* 禁止选中 */
 .no-select {
   user-select: none;
@@ -13,3 +9,31 @@
   -moz-user-select: none;     /* Firefox */
   -ms-user-select: none;      /* IE10+/Edge */
 }
+
+/* 全局容器样式，确保主题一致性 */
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* 确保所有文本元素都使用主题颜色 */
+h1, h2, h3, h4, h5, h6, p, span, div {
+  color: inherit;
+}
+
+/* 输入框样式适配 */
+input, textarea, select {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+/* 按钮基础样式适配 */
+button {
+  background-color: var(--bg-color-secondary);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}

src/front/argus-front/src/assets/theme-override.css

@@ -0,0 +1,138 @@
+/* Naive UI 全局主题覆盖 */
+
+/* 基础组件样式覆盖 */
+.n-card {
+  background-color: var(--card-bg) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.n-button {
+  color: var(--text-color) !important;
+}
+
+.n-button--quaternary {
+  color: var(--text-color) !important;
+}
+
+.n-button--quaternary:hover {
+  background-color: var(--hover-bg) !important;
+}
+
+.n-input {
+  background-color: var(--bg-color-secondary) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.n-input__input-el {
+  background-color: transparent !important;
+  color: var(--text-color) !important;
+}
+
+.n-input__placeholder {
+  color: var(--text-color-tertiary) !important;
+}
+
+/* 菜单组件样式覆盖 */
+.n-menu {
+  background-color: transparent !important;
+  color: var(--text-color) !important;
+}
+
+.n-menu-item {
+  color: var(--text-color) !important;
+}
+
+.n-menu-item:hover {
+  background-color: var(--hover-bg) !important;
+}
+
+.n-menu-item.n-menu-item--selected {
+  background-color: var(--hover-bg) !important;
+  color: var(--text-color) !important;
+}
+
+.n-menu-item-content {
+  color: inherit !important;
+}
+
+.n-menu-item-content__icon {
+  color: inherit !important;
+}
+
+/* 布局组件样式覆盖 */
+.n-layout {
+  background-color: var(--bg-color) !important;
+  color: var(--text-color) !important;
+}
+
+.n-layout-header {
+  background-color: var(--header-bg) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.n-layout-sider {
+  background-color: var(--sidebar-bg) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.n-layout-content {
+  background-color: var(--content-bg) !important;
+  color: var(--text-color) !important;
+}
+
+.n-layout-footer {
+  background-color: var(--bg-color) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+/* 图标样式覆盖 */
+.n-icon {
+  color: inherit !important;
+}
+
+/* 滚动条样式覆盖 */
+.n-scrollbar-rail {
+  background-color: var(--bg-color-secondary) !important;
+}
+
+.n-scrollbar-rail__scrollbar {
+  background-color: var(--border-color) !important;
+}
+
+.n-scrollbar-rail__scrollbar:hover {
+  background-color: var(--text-color-secondary) !important;
+}
+
+/* 其他全局覆盖 */
+html.dark .n-base-selection,
+html.dark .n-base-selection-input {
+  background-color: var(--bg-color-secondary) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+html.dark .n-base-selection__border {
+  border-color: var(--border-color) !important;
+}
+
+html.dark .n-base-selection__state-border {
+  border-color: var(--border-color) !important;
+}
+
+/* 确保所有文本元素都继承主题颜色 */
+html.dark * {
+  border-color: var(--border-color);
+}
+
+html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
+  color: var(--text-color) !important;
+}
+
+html.dark p, html.dark span, html.dark div:not([class*="n-"]) {
+  color: var(--text-color);
+}

src/front/argus-front/src/assets/var.css

@@ -1,3 +1,42 @@
 :root {
   --header-height: 64px;
 }
+
+/* 浅色主题变量 */
+:root,
+html.light {
+  --bg-color: #ffffff;
+  --bg-color-secondary: #f5f5f5;
+  --bg-color-tertiary: #fafafa;
+  --text-color: #333333;
+  --text-color-secondary: #666666;
+  --text-color-tertiary: #999999;
+  --border-color: #e0e0e6;
+  --border-color-light: #f0f0f0;
+  --shadow-color: rgba(0, 0, 0, 0.08);
+  --shadow-color-light: rgba(0, 0, 0, 0.04);
+  --header-bg: #ffffff;
+  --sidebar-bg: #ffffff;
+  --content-bg: #f5f5f5;
+  --card-bg: #ffffff;
+  --hover-bg: rgba(0, 0, 0, 0.04);
+}
+
+/* 深色主题变量 */
+html.dark {
+  --bg-color: #1a1a1a;
+  --bg-color-secondary: #2d2d2d;
+  --bg-color-tertiary: #3a3a3a;
+  --text-color: #ffffff;
+  --text-color-secondary: #cccccc;
+  --text-color-tertiary: #999999;
+  --border-color: #3d3d3d;
+  --border-color-light: #4a4a4a;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --shadow-color-light: rgba(0, 0, 0, 0.2);
+  --header-bg: #1a1a1a;
+  --sidebar-bg: #1a1a1a;
+  --content-bg: #2d2d2d;
+  --card-bg: #2d2d2d;
+  --hover-bg: rgba(255, 255, 255, 0.08);
+}

src/front/argus-front/src/components/Layout/AppLayout.vue

@@ -27,9 +27,9 @@
           </n-input>
         </div>
 
-        <!-- 右侧预留空间（可放用户信息等） -->
+        <!-- 右侧工具栏 -->
         <div class="header-right">
-          <!-- 可以添加用户头像、设置按钮等 -->
+          <ThemeToggle />
         </div>
       </div>
     </n-layout-header>
@@ -71,9 +71,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, h } from 'vue'
+import { ref, watch, computed, h, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { NMenu, NIcon } from 'naive-ui'
+import ThemeToggle from '@/components/ThemeToggle.vue'
+import { useThemeStore } from '@/stores/theme'
 import {
   ImageOutline,
   SearchOutline,
@@ -91,6 +93,12 @@ import { menuOptions, type MenuOption, type MenuItem, type MenuGroup } from '@/t
 
 const router = useRouter()
 const route = useRoute()
+const themeStore = useThemeStore()
+
+// 初始化主题
+onMounted(() => {
+  themeStore.initTheme()
+})
 
 // 图标映射
 const iconMap = {
@@ -203,8 +211,9 @@ const handleMenuSelect = (key: string) => {
 .layout-header {
   height: var(--header-height);
   padding: 0;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 4px var(--shadow-color);
   z-index: 10;
+  background-color: var(--header-bg);
 }
 
 .header-content {
@@ -242,7 +251,7 @@ const handleMenuSelect = (key: string) => {
 .site-title {
   font-size: 20px;
   font-weight: 600;
-  color: #333;
+  color: var(--text-color);
   white-space: nowrap;
 }
 
@@ -265,6 +274,7 @@ const handleMenuSelect = (key: string) => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  gap: 12px;
 }
 
 .layout-body {
@@ -274,8 +284,9 @@ const handleMenuSelect = (key: string) => {
 
 .layout-sider {
   height: 100%;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
+  box-shadow: 2px 0 8px var(--shadow-color);
   margin-left: 7px;
+  background-color: var(--sidebar-bg);
 }
 
 .sidebar-menu {
@@ -287,7 +298,7 @@ const handleMenuSelect = (key: string) => {
   height: 100%;
   overflow: auto;
   flex: 1;
-  background-color: #f5f5f5;
+  background-color: var(--content-bg);
 }
 
 .content-wrapper {
@@ -299,11 +310,11 @@ const handleMenuSelect = (key: string) => {
 
 .content-wrapper h1 {
   margin: 0 0 16px 0;
-  color: #333;
+  color: var(--text-color);
 }
 
 .content-wrapper p {
-  color: #666;
+  color: var(--text-color-secondary);
   line-height: 1.6;
 }
 
@@ -335,4 +346,57 @@ const handleMenuSelect = (key: string) => {
     max-width: 200px;
   }
 }
+
+/* Naive UI 组件主题深度适配 */
+:deep(.n-layout) {
+  background-color: var(--bg-color) !important;
+  color: var(--text-color) !important;
+}
+
+:deep(.n-layout-header) {
+  background-color: var(--header-bg) !important;
+  color: var(--text-color) !important;
+}
+
+:deep(.n-layout-sider) {
+  background-color: var(--sidebar-bg) !important;
+  color: var(--text-color) !important;
+}
+
+:deep(.n-layout-content) {
+  background-color: var(--content-bg) !important;
+  color: var(--text-color) !important;
+}
+
+:deep(.n-menu) {
+  background-color: transparent !important;
+}
+
+:deep(.n-menu-item) {
+  color: var(--text-color) !important;
+}
+
+:deep(.n-menu-item:hover) {
+  background-color: var(--hover-bg) !important;
+}
+
+:deep(.n-menu-item.n-menu-item--selected) {
+  background-color: var(--hover-bg) !important;
+  color: var(--text-color) !important;
+}
+
+:deep(.n-input) {
+  background-color: var(--bg-color-secondary) !important;
+  color: var(--text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+:deep(.n-input__input-el) {
+  background-color: transparent !important;
+  color: var(--text-color) !important;
+}
+
+:deep(.n-input__placeholder) {
+  color: var(--text-color-tertiary) !important;
+}
 </style>

src/front/argus-front/src/views/LibraryView.vue

@@ -267,7 +267,7 @@ onMounted(() => {
 
 .close-icon {
   cursor: pointer;
-  color: #666;
+  color: var(--text-color-secondary);
   transition: all 0.2s ease;
 }
 

src/front/argus-front/src/views/PhotosView.vue

@@ -21,7 +21,7 @@
 .page-title {
   font-size: 24px;
   font-weight: 600;
-  color: #333;
+  color: var(--text-color);
   margin: 0;
 }