fix: 修复新版前端夜间模式

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider>
+  <n-config-provider :theme="naiveTheme">
     <n-message-provider>
       <n-dialog-provider>
         <AppShell />
@@ -9,6 +9,11 @@
 </template>
 
 <script setup lang="ts">
-import AppShell from './AppShell.vue';
-</script>
+import { computed } from 'vue';
+import { darkTheme } from 'naive-ui';
 
+import AppShell from './AppShell.vue';
+import { themeName } from './composables/theme';
+
+const naiveTheme = computed(() => (themeName.value === 'dark' ? darkTheme : undefined));
+</script>

frontend/src/AppShell.vue

@@ -98,6 +98,7 @@ import { apiPost, clearToken, getToken, setToken, setUnauthorizedHandler } from
 import type { LoginResponse } from './types';
 import LoginView from './components/LoginView.vue';
 import { pageHeader, resetPageHeader, resolveHeaderValue, type PageHeaderAction } from './composables/pageHeader';
+import { toggleAppTheme } from './composables/theme';
 
 const message = useMessage();
 const route = useRoute();
@@ -105,7 +106,6 @@ const router = useRouter();
 const token = ref(getToken());
 const loginLoading = ref(false);
 const sidebarCollapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true');
-const theme = ref(localStorage.getItem('theme') || 'light');
 const menuKeys = ['workflow', 'history', 'database', 'script', 'settings'] as const;
 type MenuKey = (typeof menuKeys)[number];
 
@@ -126,8 +126,6 @@ const currentTitle = computed(() => {
 });
 const pageSubtitle = computed(() => resolveHeaderValue(pageHeader.subtitle || '', ''));
 
-document.documentElement.setAttribute('data-theme', theme.value);
-
 onMounted(() => {
   window.addEventListener('dragover', preventWindowFileDrop, { capture: true });
   window.addEventListener('drop', preventWindowFileDrop, { capture: true });
@@ -173,9 +171,7 @@ function toggleSidebar() {
 }
 
 function toggleTheme() {
-  theme.value = theme.value === 'dark' ? 'light' : 'dark';
-  localStorage.setItem('theme', theme.value);
-  document.documentElement.setAttribute('data-theme', theme.value);
+  toggleAppTheme();
 }
 
 async function restartService() {

frontend/src/composables/theme.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+
+export type AppTheme = 'light' | 'dark';
+
+const THEME_KEY = 'theme';
+
+export const themeName = ref<AppTheme>(readStoredTheme());
+
+applyTheme(themeName.value);
+
+export function setAppTheme(nextTheme: AppTheme) {
+  themeName.value = nextTheme;
+  applyTheme(nextTheme);
+}
+
+export function toggleAppTheme() {
+  setAppTheme(themeName.value === 'dark' ? 'light' : 'dark');
+}
+
+function readStoredTheme(): AppTheme {
+  try {
+    const stored = typeof localStorage === 'undefined' ? null : localStorage.getItem(THEME_KEY);
+    return stored === 'dark' ? 'dark' : 'light';
+  } catch {
+    return 'light';
+  }
+}
+
+function applyTheme(nextTheme: AppTheme) {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', nextTheme);
+  }
+  try {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(THEME_KEY, nextTheme);
+    }
+  } catch {
+    // Ignore storage failures so theme switching never blocks the UI.
+  }
+}

frontend/src/styles.css

@@ -210,6 +210,11 @@ select {
   transition: all var(--td-transition);
 }
 
+.app-menu .n-menu-item-content-header,
+.app-menu .n-menu-item-content__icon {
+  color: inherit;
+}
+
 .app-menu .n-menu-item-content:hover {
   color: var(--td-text-color-primary);
   background: var(--td-bg-color-container-hover);
@@ -371,8 +376,14 @@ select {
   border-bottom: 1px solid var(--td-border-color-light);
 }
 
+.work-card > .n-card-header .n-card-header__main,
+.work-card > .n-card-header .n-card-header__extra {
+  color: var(--td-text-color-primary);
+}
+
 .work-card > .n-card__content {
   padding: 16px 20px;
+  color: var(--td-text-color-primary);
 }
 
 .work-card > .n-card__footer {
@@ -381,6 +392,11 @@ select {
   border-top: 1px solid var(--td-border-color-light);
 }
 
+.work-card .n-form-item-label,
+.work-card .n-form-item-label__text {
+  color: var(--td-text-color-secondary);
+}
+
 .login-page {
   display: grid;
   min-height: 100vh;