feat: 主题

Author: Taois

dashboard/src/components/CategoryNavigation.vue

@@ -269,6 +269,16 @@ onBeforeUnmount(() => {
   border-bottom: none;
 }
 
+.category-tabs :deep(.arco-tabs-nav::before),
+.category-tabs :deep(.arco-tabs-nav-tab::before),
+.category-tabs :deep(.arco-tabs-tab::before) {
+  display: none !important;
+}
+
+.category-tabs :deep(.arco-tabs-content) {
+  border-top: none !important;
+}
+
 .category-tabs :deep(.arco-tabs-nav-tab) {
   padding: 0;
   margin-right: 8px;

dashboard/src/components/Header.vue

@@ -78,6 +78,11 @@
     </div>
 
     <div class="header-right">
+      <a-button class="theme-toggle-btn" shape="circle" @click="toggleTheme" :title="themeToggleTitle">
+        <template #icon>
+          <span class="theme-toggle-icon">{{ resolvedTheme === THEME_MODE.DARK ? '浅' : '深' }}</span>
+        </template>
+      </a-button>
       <a-button shape="circle" @click="minimize" title="退出全屏">
         <template #icon>
           <icon-shrink />
@@ -125,6 +130,7 @@ import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Message } from '@arco-design/web-vue';
 import SearchSettingsModal from './SearchSettingsModal.vue';
+import { getStoredThemeMode, resolveThemeMode, setStoredThemeMode, THEME_MODE } from '@/utils/theme';
 
 export default defineComponent({
   components: {
@@ -144,6 +150,13 @@ export default defineComponent({
     const searchValue = ref('');
     const showSearchSettings = ref(false);
     const forceUpdate = ref(0);
+    const resolvedTheme = ref(resolveThemeMode(getStoredThemeMode()));
+
+    const themeToggleTitle = computed(() => resolvedTheme.value === THEME_MODE.DARK ? '切换到浅色模式' : '切换到深色模式');
+
+    const updateThemeState = (event) => {
+      resolvedTheme.value = event?.detail?.resolvedTheme || resolveThemeMode(getStoredThemeMode());
+    };
 
     const isSearchAggregationPage = computed(() => route.name === 'SearchAggregation');
 
@@ -191,6 +204,7 @@ export default defineComponent({
     };
 
     window.addEventListener('storage', updateSearchAggregationStatus);
+    window.addEventListener('themeChanged', updateThemeState);
     const checkInterval = setInterval(updateSearchAggregationStatus, 1000);
 
     watch(() => route.query.keyword, (keyword) => {
@@ -207,6 +221,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       window.removeEventListener('storage', updateSearchAggregationStatus);
+      window.removeEventListener('themeChanged', updateThemeState);
       clearInterval(checkInterval);
     });
 
@@ -217,10 +232,17 @@ export default defineComponent({
       showSearchSettings,
       isSearchAggregationPage,
       hasSearchResults,
+      resolvedTheme,
+      themeToggleTitle,
+      THEME_MODE,
       router
     };
   },
   methods: {
+    toggleTheme() {
+      const nextMode = this.resolvedTheme === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK;
+      this.resolvedTheme = setStoredThemeMode(nextMode);
+    },
     goBack() {
       Message.info('后退按钮');
     },
@@ -457,6 +479,12 @@ export default defineComponent({
   color: #fff;
 }
 
+.theme-toggle-icon {
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 800;
+}
+
 .search-container {
   display: flex;
   align-items: center;

dashboard/src/components/Layout.vue

@@ -9,7 +9,7 @@
   >
     <div class="fixed-header">
       <Header v-if="!isMobile" />
-      <div v-else class="mobile-top-bar">
+      <div v-else class="mobile-top-bar" :class="{ 'home-theme-visible': showHomeThemeToggle }">
         <button v-if="showMobileBack" class="mobile-icon-btn" type="button" title="返回" @click="goBack">
           <span class="mobile-back-icon">‹</span>
         </button>
@@ -22,6 +22,9 @@
           <div v-if="mobileSubtitle" class="mobile-subtitle">{{ mobileSubtitle }}</div>
         </div>
 
+        <button v-if="showHomeThemeToggle" class="mobile-icon-btn mobile-theme-toggle" type="button" :title="themeToggleTitle" @click="toggleTheme">
+          <span class="mobile-theme-text">{{ resolvedTheme === THEME_MODE.DARK ? '浅' : '深' }}</span>
+        </button>
         <button class="mobile-search-pill" type="button" title="搜索" @click="goSearch">
           <svg class="mobile-action-icon"><use href="#icon-sousuo"></use></svg>
           <span>搜索</span>
@@ -183,6 +186,7 @@ import { desktopMenuItems, mobilePrimaryItems, mobileMoreGroups } from '@/config
 import logoPc from '@/assets/logo-pc.png';
 import logoMobile from '@/assets/logo-mobile.png';
 import '@/assets/icon_font/iconfont.js';
+import { getStoredThemeMode, resolveThemeMode, setStoredThemeMode, THEME_MODE } from '@/utils/theme';
 
 export default defineComponent({
   components: {
@@ -202,6 +206,7 @@ export default defineComponent({
     const isImmersivePage = computed(() => Boolean(route.meta?.immersive));
     const showMobileBottomNav = computed(() => route.meta?.showBottomNav !== false && !isImmersivePage.value);
     const showMobileBack = computed(() => isImmersivePage.value || route.name === 'SearchAggregation');
+    const showHomeThemeToggle = computed(() => route.name === 'Home');
     const mobileTitle = computed(() => route.meta?.title || 'DrPlayer');
     const mobileSubtitle = computed(() => {
       if (route.name === 'Home') return '影视、直播、阅读与工具';
@@ -214,6 +219,13 @@ export default defineComponent({
     const siderCollapsed = ref(JSON.parse(localStorage.getItem('sidebar-collapsed') || 'false'));
     const mobileMoreOpen = ref(false);
     const isMobile = ref(false);
+    const resolvedTheme = ref(resolveThemeMode(getStoredThemeMode()));
+
+    const themeToggleTitle = computed(() => resolvedTheme.value === THEME_MODE.DARK ? '切换到浅色模式' : '切换到深色模式');
+
+    const updateThemeState = (event) => {
+      resolvedTheme.value = event?.detail?.resolvedTheme || resolveThemeMode(getStoredThemeMode());
+    };
 
     const menuItems = ref(desktopMenuItems);
     const logoSrc = computed(() => isMobile.value ? logoMobile : logoPc);
@@ -242,6 +254,11 @@ export default defineComponent({
       mobileMoreOpen.value = !mobileMoreOpen.value;
     };
 
+    const toggleTheme = () => {
+      const nextMode = resolvedTheme.value === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK;
+      resolvedTheme.value = setStoredThemeMode(nextMode);
+    };
+
     const isRouteActive = (routeName) => route.name === routeName;
 
     const goBack = () => {
@@ -284,11 +301,14 @@ export default defineComponent({
 
     onMounted(() => {
       updateIsMobile();
+      updateThemeState();
       window.addEventListener('resize', updateIsMobile);
+      window.addEventListener('themeChanged', updateThemeState);
     });
 
     onBeforeUnmount(() => {
       window.removeEventListener('resize', updateIsMobile);
+      window.removeEventListener('themeChanged', updateThemeState);
     });
 
     return {
@@ -299,6 +319,7 @@ export default defineComponent({
       isImmersivePage,
       showMobileBottomNav,
       showMobileBack,
+      showHomeThemeToggle,
       mobileTitle,
       mobileSubtitle,
       menuItems,
@@ -308,6 +329,10 @@ export default defineComponent({
       isMoreRouteActive,
       logoSrc,
       logoDesc,
+      resolvedTheme,
+      themeToggleTitle,
+      THEME_MODE,
+      toggleTheme,
       onClickMenuItem,
       onSiderCollapse,
       closeMobileMore,
@@ -538,6 +563,10 @@ export default defineComponent({
   background: var(--dp-bg-shell);
 }
 
+.mobile-top-bar.home-theme-visible {
+  grid-template-columns: 40px minmax(0, 1fr) 36px minmax(76px, auto) 40px;
+}
+
 .mobile-brand,
 .mobile-icon-btn {
   width: 36px;
@@ -571,6 +600,17 @@ export default defineComponent({
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
 }
 
+.mobile-theme-toggle {
+  border: 1px solid var(--dp-border-subtle);
+  color: var(--dp-primary-readable);
+  font-weight: 800;
+}
+
+.mobile-theme-text {
+  font-size: 13px;
+  line-height: 1;
+}
+
 .mobile-brand-logo {
   width: 24px;
   height: 24px;

dashboard/src/components/actions/styles.css

@@ -84,7 +84,30 @@
   --action-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
 }
 
-/* 基础重置 */
+body[arco-theme='dark'] {
+  --action-primary: var(--color-primary-6);
+  --action-primary-hover: var(--color-primary-5);
+  --action-primary-active: var(--color-primary-7);
+  --action-success: var(--color-success-6);
+  --action-warning: var(--color-warning-6);
+  --action-error: var(--color-danger-6);
+  --action-text: var(--color-text-1);
+  --action-text-secondary: var(--color-text-2);
+  --action-text-disabled: var(--color-text-4);
+  --action-border: var(--color-border-2);
+  --action-border-hover: var(--color-primary-5);
+  --action-background: var(--color-bg-2);
+  --action-background-light: var(--color-fill-2);
+  --action-background-disabled: var(--color-fill-1);
+  --action-color-secondary: var(--color-text-2);
+  --action-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --action-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --action-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.28);
+  --action-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.32);
+  --action-shadow-large: 0 10px 25px rgba(0, 0, 0, 0.42);
+  --action-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.48);
+}
+
 .action-component * {
   box-sizing: border-box;
 }

dashboard/src/components/players/PlayerHeader.vue

@@ -569,7 +569,7 @@ onUnmounted(() => {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--dp-text-primary);
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -587,10 +587,10 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: #f8f9fa;
+  background: var(--dp-bg-surface-muted);
   border-radius: 6px;
   padding: 2px;
-  border: 1px solid #e9ecef;
+  border: 1px solid var(--dp-border-subtle);
 }
 
 .compact-btn {
@@ -605,14 +605,14 @@ onUnmounted(() => {
   border: none;
   font-size: 12px;
   font-weight: 500;
-  color: #495057;
+  color: var(--dp-text-secondary);
   min-height: 28px;
   position: relative;
 }
 
 .compact-btn:hover {
-  background: #e9ecef;
-  color: #212529;
+  background: var(--dp-bg-hover);
+  color: var(--dp-text-primary);
   transform: translateY(-1px);
 }
 
@@ -627,21 +627,21 @@ onUnmounted(() => {
 }
 
 .compact-btn.close-btn {
-  color: #dc3545;
+  color: var(--dp-danger-readable);
 }
 
 .compact-btn.close-btn:hover {
-  background: #f8d7da;
-  color: #721c24;
+  background: color-mix(in srgb, var(--dp-danger-readable) 14%, transparent);
+  color: var(--dp-danger-readable);
 }
 
 .compact-btn.debug-btn {
-  color: #6f42c1;
+  color: var(--dp-primary-readable);
 }
 
 .compact-btn.debug-btn:hover {
-  background: #e2d9f3;
-  color: #5a2d91;
+  background: color-mix(in srgb, var(--dp-primary-readable) 12%, transparent);
+  color: var(--dp-primary-readable);
 }
 
 .btn-icon {
@@ -671,11 +671,17 @@ onUnmounted(() => {
 .compact-select :deep(.arco-select-view) {
   border: none !important;
   background: transparent !important;
+  color: var(--dp-text-secondary) !important;
   padding: 6px 10px;
   font-size: 11px;
   font-weight: 500;
 }
 
+.compact-select :deep(.arco-select-view:hover),
+.selector-btn:hover .compact-select :deep(.arco-select-view) {
+  color: var(--dp-text-primary) !important;
+}
+
 .compact-select :deep(.arco-select-view-suffix) {
   color: currentColor;
 }

dashboard/src/main.js

@@ -1,5 +1,6 @@
 import {createApp} from 'vue'
 import './style.css'
+import { initTheme } from '@/utils/theme'
 import App from './App.vue'
 import router from './router'  // 引入路由
 import ArcoVue from '@arco-design/web-vue'
@@ -38,6 +39,8 @@ use([
   TitleComponent
 ])
 
+initTheme()
+
 const app = createApp(App)
 app.use(router)
 app.use(ArcoVue);

dashboard/src/services/backupService.js

@@ -5,6 +5,7 @@
 
 import { Message } from '@arco-design/web-vue'
 import siteService from '@/api/services/site'
+import { applyTheme, normalizeThemeMode } from '@/utils/theme'
 
 // 备份数据版本号，用于兼容性检查
 const BACKUP_VERSION = '1.0.0'
@@ -303,9 +304,11 @@ export const restoreBackupData = (backupData) => {
     let restoredCount = 0
     let failedCount = 0
     const errors = []
-    
+    let restoredThemeMode = null
+
     // 还原设置数据
     if (backupData.settings) {
+      restoredThemeMode = normalizeThemeMode(backupData.settings.appSettings?.themeMode)
       for (const [key, value] of Object.entries(backupData.settings)) {
         if (key === 'parsers') {
           // 特殊处理解析器数据
@@ -458,6 +461,10 @@ export const restoreBackupData = (backupData) => {
       }
     }
 
+    if (restoredThemeMode) {
+      applyTheme(restoredThemeMode)
+    }
+
     // 显示还原结果
     if (failedCount === 0) {
       Message.success(`数据还原成功！共还原 ${restoredCount} 项数据`)