Merge pull request #121 from hotlcc/develop-20240428-页面优化

主题配置保存到服务端，使各端主题一致

src/@core/components/ThemeSwitcher.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import { useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
+import api from '@/api'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
 const props = defineProps<{
   themes: ThemeSwitcherTheme[]
@@ -21,7 +23,7 @@ const {
 )
 
 function updateTheme() {
-  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
   const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
   globalTheme.name.value = theme
   savedTheme.value = theme
@@ -31,7 +33,11 @@ function updateTheme() {
 }
 
 // 监听系统主题变化
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+try {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+} catch(e) {
+  console.error('当前设备不支持监听系统主题变化')
+}
 
 watch(
   () => currentThemeName.value,
@@ -42,6 +48,12 @@ function changeTheme() {
   const nextTheme = getNextThemeName()
   currentThemeName.value = nextTheme
   localStorage.setItem('theme', nextTheme)
+  // 保存主题到服务端
+  api.post('/user/config/theme', nextTheme, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  })
 }
 
 // Apply saved theme on page load

src/@core/utils/index.ts

@@ -118,3 +118,12 @@ export function isNullOrEmptyObject(obj: any): boolean {
   // 然后判断是否为空对象
   return !!(typeof obj === 'object' && Object.keys(obj).length === 0)
 }
+
+// 判断系统配置色是否是黑暗的
+export function checkPrefersColorSchemeIsDark(): boolean {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  } catch (e) {
+    return false
+  }
+}

src/App.vue

@@ -3,18 +3,30 @@ import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
 import api from '@/api'
 import store from './store'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
+const { global: globalTheme } = useTheme()
 
 // 提示框
 const $toast = useToast()
 
+// 获取用户主题配置
+async function fetchThemeConfig() {
+  const response = await api.get('/user/config/theme')
+  if (response && response.data && response.data.value) {
+    return response.data.value
+  }
+  return null
+}
+
 // 设置主题
-function setTheme() {
+async function setTheme() {
-  const { global: globalTheme } = useTheme()
+  let themeValue = await fetchThemeConfig() || localStorage.getItem('theme') || 'light'
-  let theme = localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
-  if (theme === 'auto')
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
-    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  // 修改载入时背景色
-  globalTheme.name.value = theme
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+  localStorage.setItem('theme', themeValue)
 }
 
 // SSE持续接收消息

src/components/cards/MediaCard.vue

@@ -431,10 +431,10 @@ function getYear(airDate: string) {
           {{ props.media?.type }}
         </VChip>
         <!-- 本地存在标识 -->
-        <ExistIcon v-if="isExists" />
+        <ExistIcon v-if="isExists && !hover.isHovering" />
         <!-- 评分角标 -->
         <VChip
-          v-if="isImageLoaded && props.media?.vote_average && !isExists"
+          v-if="isImageLoaded && props.media?.vote_average && !(isExists && !hover.isHovering)"
           variant="elevated"
           size="small"
           :class="getChipColor('rating')"

src/pages/login.vue

@@ -6,6 +6,10 @@ import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
+import { useTheme } from 'vuetify'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
+
+const { global: globalTheme } = useTheme()
 
 // Vuex Store
 const store = useStore()
@@ -85,7 +89,28 @@ async function tryLoadDashboardConfig() {
   await loadDashboardConfig()
 }
 
+// 获取用户主题配置
+async function fetchThemeConfig() {
+  const response = await api.get('/user/config/theme')
+  if (response && response.data && response.data.value) {
+    return response.data.value
+  }
+  return null
+}
+
+// 设置主题
+async function setTheme() {
+  let themeValue = await fetchThemeConfig() || localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+  // 修改载入时背景色
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+  localStorage.setItem('theme', themeValue)
+}
+
 async function afterLogin() {
+  // 主题配置
+  await setTheme()
   // 尝试加载用户监控面板配置（本地无配置时才加载）
   await tryLoadDashboardConfig()
   // 跳转到首页或回原始页面