整合主题管理器，优化主题切换逻辑

src/App.vue

@@ -11,6 +11,7 @@ import { preloadImage } from './@core/utils/image'
 import { globalLoadingStateManager } from '@/utils/loadingStateManager'
 import { addBackgroundTimer, removeBackgroundTimer } from '@/utils/backgroundManager'
 import PWAInstallPrompt from '@/components/PWAInstallPrompt.vue'
+import { themeManager } from '@/utils/themeManager'
 
 // 生效主题
 const { global: globalTheme } = useTheme()
@@ -212,6 +213,9 @@ onMounted(async () => {
   // 初始化data-theme属性
   updateHtmlThemeAttribute(globalTheme.name.value)
 
+  // 初始化主题管理器 - 统一处理主题初始化
+  await themeManager.setTheme(themeValue)
+
   // 监听主题变化
   watch(
     () => globalTheme.name.value,

src/layouts/components/UserProfile.vue

@@ -14,6 +14,7 @@ import { getCurrentLocale, setI18nLanguage } from '@/plugins/i18n'
 import { saveLocalTheme } from '@/@core/utils/theme'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 import { useConfirm } from '@/composables/useConfirm'
+import { themeManager } from '@/utils/themeManager'
 
 // 认证 Store
 const authStore = useAuthStore()
@@ -226,22 +227,30 @@ const themes: ThemeSwitcherTheme[] = [
 const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))
 
 // 更新主题
-function updateTheme() {
+async function updateTheme() {
   const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
   const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
+
+  // 设置Vuetify主题
   globalTheme.name.value = theme
+
+  // 统一处理主题切换 - 主题管理器会自动处理CSS加载和错误
+  await themeManager.setTheme(currentThemeName.value)
+
   // 保存原始主题设置，而不是计算后的值
   savedTheme.value = currentThemeName.value
   // 保存主题到本地
   saveLocalTheme(currentThemeName.value, globalTheme)
-  // 刷新页面
-  location.reload()
 }
 
 // 切换主题
-function changeTheme(theme: string) {
+async function changeTheme(theme: string) {
   currentThemeName.value = theme
   showThemeMenu.value = false
+
+  // 立即更新主题（不再刷新页面）
+  await updateTheme()
+
   // 保存主题到服务端
   try {
     api.post('/user/config/Layout', {
@@ -288,12 +297,16 @@ async function saveCustomCSS() {
 // 监听主题变化
 watch(
   () => currentThemeName.value,
-  () => updateTheme(),
+  async () => {
+    await updateTheme()
+  },
 )
 
 // 监听系统主题变化
 try {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
+    await updateTheme()
+  })
 } catch (e) {
   console.error(t('theme.deviceNotSupport'))
 }

src/styles/common.scss

@@ -1,9 +1,9 @@
-// Write your overrides
+// 公共样式 - 所有主题都需要
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
+// 基础样式
 html.v-overlay-scroll-blocked {
   position: fixed;
   position: relative;
@@ -30,6 +30,7 @@ body {
   }
 }
 
+// 进度条样式
 #nprogress .bar {
   background: rgb(var(--v-theme-primary)) !important;
   inset-block-start: env(safe-area-inset-top) !important;
@@ -38,15 +39,17 @@ body {
 #nprogress .peg {
   box-shadow: 0 0 10px rgb(var(--v-theme-primary)), 0 0 5px rgb(var(--v-theme-primary)) !important;
   inline-size: 5px;
-      transform: rotate(0deg) translate(0, 0);
+  transform: rotate(0deg) translate(0, 0);
 }
 
+// 卡片高度匹配
 .match-height.v-row {
   .v-card {
     block-size: 100%;
   }
 }
 
+// Toast通知样式
 .Vue-Toastification__container {
   z-index: 2500;
   margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
@@ -64,11 +67,12 @@ body {
   }
 }
 
+// 对话框样式
 .v-dialog > .v-overlay__content > .v-card > .v-card-item {
   padding: 16px;
 }
 
-/* router view transition fade-slide */
+// 路由过渡动画
 .fade-slide-leave-active,
 .fade-slide-enter-active {
   transition: all 0.6s;
@@ -84,99 +88,13 @@ body {
   transform: translateY(45px);
 }
 
+// 网格布局样式
 .grid-info-card {
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   padding-block-end: 1rem;
 }
 
-.text-moviepilot {
+.grid-site-card {
-  background-clip: text;
-  background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
-  color: transparent;
-
-  --tw-gradient-from: #818cf8;
-  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
-  --tw-gradient-to: #c084fc;
-}
-
-.slider-header {
-  position: relative;
-  display: flex;
-}
-
-.slider-title {
-  display: inline-flex;
-  align-items: center;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.75rem;
-}
-
-@media (width >= 640px){
-  .slider-title {
-      overflow: hidden;
-      font-size: 1.5rem;
-      line-height: 2.25rem;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-  }
-}
-
-// 美化滚动条
-::-webkit-scrollbar {
-  block-size: 4px;
-  inline-size: 4px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background: rgb(var(--v-theme-perfect-scrollbar-thumb));
-  box-shadow: inset 0 0 10px rgba(0,0,0,20%);
-
-  @media(hover){
-    &:hover{
-      background: #a1a1a1;
-    }
-  }
-}
-
-// 当鼠标悬停在可滚动元素上时显示滚动条
-*:hover::-webkit-scrollbar {
-  opacity: 1;
-}
-
-// 当元素正在滚动时显示滚动条
-*:active::-webkit-scrollbar {
-  opacity: 1;
-}
-
-.v-alert--variant-elevated, .v-alert--variant-flat {
-  background: rgb(var(--v-table-header-background));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-
-.backdrop-blur {
-  --tw-backdrop-blur: blur(8px)!important;
-
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
-}
-
-.v-toolbar{
-  background: rgb(var(--v-table-header-background));
-}
-
- .v-divider {
-  border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
-  opacity:0.75;
- }
-
- .apexcharts-title-text {
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
- }
-
- .grid-site-card {
   grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
   padding-block-end: 1rem;
 }
@@ -233,6 +151,98 @@ body {
   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
 
+// 文本样式
+.text-moviepilot {
+  background-clip: text;
+  background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
+  color: transparent;
+
+  --tw-gradient-from: #818cf8;
+  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
+  --tw-gradient-to: #c084fc;
+}
+
+.text-shadow {
+  text-shadow: 1px 1px #777;
+}
+
+// 滑块标题样式
+.slider-header {
+  position: relative;
+  display: flex;
+}
+
+.slider-title {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+}
+
+@media (width >= 640px){
+  .slider-title {
+    overflow: hidden;
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  block-size: 4px;
+  inline-size: 4px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: rgb(var(--v-theme-perfect-scrollbar-thumb));
+  box-shadow: inset 0 0 10px rgba(0,0,0,20%);
+
+  @media(hover){
+    &:hover{
+      background: #a1a1a1;
+    }
+  }
+}
+
+*:hover::-webkit-scrollbar {
+  opacity: 1;
+}
+
+*:active::-webkit-scrollbar {
+  opacity: 1;
+}
+
+// 组件样式
+.v-alert--variant-elevated, .v-alert--variant-flat {
+  background: rgb(var(--v-table-header-background));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px)!important;
+
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
+}
+
+.v-toolbar{
+  background: rgb(var(--v-table-header-background));
+}
+
+.v-divider {
+  border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
+  opacity:0.75;
+}
+
+.apexcharts-title-text {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+}
+
 .v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
   border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
@@ -241,10 +251,6 @@ body {
   padding-block-end: env(safe-area-inset-bottom);
 }
 
-.text-shadow {
-  text-shadow: 1px 1px #777;
-}
-
 .card-cover-blurred::before {
   position: absolute;
   backdrop-filter: blur(2px);
@@ -253,6 +259,7 @@ body {
   inset: 0;
 }
 
+// 弹出层样式
 .v-overlay__content .v-list{
   backdrop-filter: blur(6px);
   background-color: rgb(var(--v-theme-surface), 0.9) !important;
@@ -308,121 +315,10 @@ body {
   min-inline-size: auto;
 }
 
-
 .v-infinite-scroll__side {
   padding: 0;
 }
 
 .v-menu .v-overlay__content {
   box-shadow: none !important;
-}
+} 
-
-// 透明主题下的弹出窗口样式
-html[data-theme="transparent"] {
-  // 先将所有全局组件定义放在前面，避免CSS优先级问题
-  .v-application, .v-layout, .v-main, .layout-page-content {
-    background: transparent;
-  }
-  
-  // 侧边导航栏
-  .layout-vertical-nav {
-    backdrop-filter: blur(16px);
-    background-color: rgba(var(--v-theme-surface), 0.2);
-    border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
-  }
-
-  // 列表
-  .v-list {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-  
-  // 卡片
-  .v-card:not(.no-blur) {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-
-    .v-list {
-      backdrop-filter: none;
-      background-color: transparent;
-    }
-  }
-
-  // 工具栏
-  .v-toolbar {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-  
-  // 表格
-  .v-table {
-    border-radius: 0;
-    background-color: rgba(var(--v-theme-surface), 0);
-
-    .v-table__wrapper > table > thead {
-      background-color: rgba(var(--v-theme-surface), 0.3);
-    }
-  }
-  
-  // 页脚
-  .v-footer {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-
-  // Sheet
-  .v-sheet {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-  
-  // 页面容器
-  .layout-content-wrapper {
-    background: transparent;
-  }
-  
-  // 无内容区域的背景设为透明
-  .page-content-container {
-    background: transparent;
-  }
-  
-  // 对话框和菜单蒙层样式
-  .v-overlay__scrim {
-    background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
-  }
-
-  // 折叠面板
-  .v-expansion-panel {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-
-  // 加载占位
-  .v-skeleton-loader {
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-
-  // 输入框和搜索框
-  .v-field {
-    background-color: rgba(var(--v-theme-surface), 0);
-  }
-  
-  .v-overlay__content {
-    border-radius: 12px !important;
-    backdrop-filter: blur(10px) !important;
-
-    .v-list {
-      backdrop-filter: blur(10px);
-      background-color: rgb(var(--v-theme-surface), 0.5) !important;
-    }
-
-    .v-card:not(.bg-primary) {
-      backdrop-filter: blur(10px);
-      background-color: rgb(var(--v-theme-surface), 0.5) !important;
-    }
-
-    .v-table__wrapper table thead {
-      background-color: rgba(var(--v-theme-surface), 0.3);
-    }
-  }
-}

src/styles/main.scss

@@ -5,7 +5,7 @@
 @use '@core/scss/index' as template;
 @use '@layouts/styles/index' as layouts;
 @use 'vuetify/styles' as vuetify;
-@use '@styles/custom' as custom;
+@use '@styles/common' as common;
 
 /* 第三方库纯CSS样式 */
 @import 'vue-toastification/dist/index.css';

src/styles/themes/transparent.scss

@@ -0,0 +1,110 @@
+// 透明主题专用样式
+html[data-theme="transparent"] {
+  // 应用、布局、主内容区域
+  .v-application, .v-layout, .v-main, .layout-page-content {
+    background: transparent;
+  }
+  
+  // 侧边导航栏
+  .layout-vertical-nav {
+    backdrop-filter: blur(16px);
+    background-color: rgba(var(--v-theme-surface), 0.2);
+    border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  }
+
+  // 列表
+  .v-list {
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--v-theme-surface), 0.3);
+  }
+  
+  // 卡片
+  .v-card:not(.no-blur) {
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--v-theme-surface), 0.3);
+
+    .v-list {
+      backdrop-filter: none;
+      background-color: transparent;
+    }
+  }
+
+  // 工具栏
+  .v-toolbar {
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--v-theme-surface), 0.3);
+  }
+  
+  // 表格
+  .v-table {
+    border-radius: 0;
+    background-color: rgba(var(--v-theme-surface), 0);
+
+    .v-table__wrapper > table > thead {
+      background-color: rgba(var(--v-theme-surface), 0.3);
+    }
+  }
+  
+  // 页脚
+  .v-footer {
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--v-theme-surface), 0.3);
+  }
+
+  // Sheet
+  .v-sheet {
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--v-theme-surface), 0.3);
+  }
+  
+  // 页面容器
+  .layout-content-wrapper {
+    background: transparent;
+  }
+  
+  // 无内容区域的背景设为透明
+  .page-content-container {
+    background: transparent;
+  }
+  
+  // 对话框和菜单蒙层样式
+  .v-overlay__scrim {
+    background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
+  }
+
+  // 折叠面板
+  .v-expansion-panel {
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--v-theme-surface), 0.3);
+  }
+
+  // 加载占位
+  .v-skeleton-loader {
+    background-color: rgba(var(--v-theme-surface), 0.3);
+  }
+
+  // 输入框和搜索框
+  .v-field {
+    background-color: rgba(var(--v-theme-surface), 0);
+  }
+  
+  // 弹出层内容
+  .v-overlay__content {
+    border-radius: 12px !important;
+    backdrop-filter: blur(10px) !important;
+
+    .v-list {
+      backdrop-filter: blur(10px);
+      background-color: rgb(var(--v-theme-surface), 0.5) !important;
+    }
+
+    .v-card:not(.bg-primary) {
+      backdrop-filter: blur(10px);
+      background-color: rgb(var(--v-theme-surface), 0.5) !important;
+    }
+
+    .v-table__wrapper table thead {
+      background-color: rgba(var(--v-theme-surface), 0.3);
+    }
+  }
+} 

src/utils/themeManager.ts

@@ -0,0 +1,212 @@
+// 主题管理器 - 动态加载主题CSS
+export interface ThemeConfig {
+  name: string
+  cssPath: string
+  isLoaded: boolean
+}
+
+class ThemeManager {
+  private themes: Map<string, ThemeConfig> = new Map()
+  private currentTheme: string = 'default'
+  private loadedLinks: Map<string, HTMLLinkElement> = new Map()
+
+  constructor() {
+    // 注册所有可用主题
+    this.registerTheme('default', '')
+    this.registerTheme('light', '')
+    this.registerTheme('dark', '')
+    this.registerTheme('purple', '')
+    this.registerTheme('auto', '')
+    // 只有透明主题有特定的CSS文件
+    this.registerTheme('transparent', './src/styles/themes/transparent.css')
+  }
+
+  /**
+   * 注册主题
+   */
+  registerTheme(name: string, cssPath: string): void {
+    this.themes.set(name, {
+      name,
+      cssPath,
+      isLoaded: false,
+    })
+  }
+
+  /**
+   * 获取当前主题
+   */
+  getCurrentTheme(): string {
+    return this.currentTheme
+  }
+
+  /**
+   * 设置主题
+   */
+  async setTheme(themeName: string): Promise<void> {
+    if (!this.themes.has(themeName)) {
+      console.warn(`Theme "${themeName}" not found`)
+      return
+    }
+
+    const theme = this.themes.get(themeName)!
+
+    // 清理其他主题的CSS（除了当前要设置的主题）
+    this.unloadOtherThemes()
+
+    // 如果主题有CSS文件，则加载CSS
+    if (theme.cssPath) {
+      try {
+        await this.loadThemeCSS(themeName, theme.cssPath)
+      } catch (error) {
+        console.error(`Failed to load CSS for theme "${themeName}":`, error)
+        // 即使CSS加载失败，也继续应用主题（使用默认样式）
+      }
+    }
+
+    // 应用主题（无论是否有CSS文件）
+    this.applyTheme(themeName)
+  }
+
+  /**
+   * 加载主题CSS文件
+   */
+  private async loadThemeCSS(themeName: string, cssPath: string): Promise<void> {
+    // 如果已经加载过，直接返回
+    if (this.loadedLinks.has(themeName)) {
+      return
+    }
+
+    try {
+      // 动态导入CSS模块
+      if (themeName === 'transparent') {
+        await import('@/styles/themes/transparent.scss')
+        this.themes.get(themeName)!.isLoaded = true
+        return
+      }
+
+      // 对于其他主题，使用传统的link方式
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.type = 'text/css'
+      link.href = cssPath
+      link.id = `theme-${themeName}`
+
+      // 等待CSS加载完成
+      await new Promise<void>((resolve, reject) => {
+        link.onload = () => {
+          this.loadedLinks.set(themeName, link)
+          this.themes.get(themeName)!.isLoaded = true
+          resolve()
+        }
+        link.onerror = () => {
+          reject(new Error(`Failed to load theme CSS: ${cssPath}`))
+        }
+      })
+
+      // 添加到head
+      document.head.appendChild(link)
+    } catch (error) {
+      console.error(`Error loading theme "${themeName}":`, error)
+      throw error
+    }
+  }
+
+  /**
+   * 应用主题到DOM
+   */
+  private applyTheme(themeName: string): void {
+    // 移除之前的主题属性
+    document.documentElement.removeAttribute('data-theme')
+
+    // 设置新主题（除了default主题）
+    if (themeName !== 'default') {
+      document.documentElement.setAttribute('data-theme', themeName)
+    }
+
+    this.currentTheme = themeName
+
+    // 触发主题变更事件
+    this.dispatchThemeChangeEvent(themeName)
+  }
+
+  /**
+   * 卸载主题CSS
+   */
+  unloadTheme(themeName: string): void {
+    const theme = this.themes.get(themeName)
+    if (!theme) return
+
+    // 对于动态导入的CSS，我们无法直接卸载，但可以标记为未加载
+    if (themeName === 'transparent') {
+      theme.isLoaded = false
+      return
+    }
+
+    // 对于传统link方式加载的CSS
+    const link = this.loadedLinks.get(themeName)
+    if (link) {
+      link.remove()
+      this.loadedLinks.delete(themeName)
+      theme.isLoaded = false
+    }
+  }
+
+  /**
+   * 卸载所有主题CSS（除了当前主题）
+   */
+  unloadOtherThemes(): void {
+    for (const [themeName] of this.themes) {
+      if (themeName !== this.currentTheme && this.themes.get(themeName)?.isLoaded) {
+        this.unloadTheme(themeName)
+      }
+    }
+  }
+
+  /**
+   * 获取已注册的主题列表
+   */
+  getAvailableThemes(): string[] {
+    return Array.from(this.themes.keys())
+  }
+
+  /**
+   * 检查主题是否已加载
+   */
+  isThemeLoaded(themeName: string): boolean {
+    return this.themes.get(themeName)?.isLoaded || false
+  }
+
+  /**
+   * 触发主题变更事件
+   */
+  private dispatchThemeChangeEvent(themeName: string): void {
+    const event = new CustomEvent('themechange', {
+      detail: { theme: themeName },
+    })
+    document.dispatchEvent(event)
+  }
+
+  /**
+   * 监听主题变更事件
+   */
+  onThemeChange(callback: (theme: string) => void): void {
+    document.addEventListener('themechange', (event: any) => {
+      callback(event.detail.theme)
+    })
+  }
+
+  /**
+   * 移除主题变更监听器
+   */
+  offThemeChange(callback: (theme: string) => void): void {
+    document.removeEventListener('themechange', (event: any) => {
+      callback(event.detail.theme)
+    })
+  }
+}
+
+// 创建单例实例
+export const themeManager = new ThemeManager()
+
+// 导出类型
+export type { ThemeManager }