GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-08 01:06:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：重构主题存储逻辑，优化加载背景和颜色设置

Browse Source
This commit is contained in:
jxxghp
2025-02-06 16:00:32 +08:00
parent 2511acfea1
commit 92a0a9fe2f
6 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -8
View File
@@ -30,6 +30,15 @@
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" /> <meta name="MobileOptimized" content="320" />
<link rel="stylesheet" type="text/css" href="/loader.css" /> <link rel="stylesheet" type="text/css" href="/loader.css" />
<script>
const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
if (loaderColor)
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
if (primaryColor)
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
document.documentElement.style.setProperty('background', 'var(--initial-loader-bg, #fff)')
</script>
</head> </head>
<body style="margin: 0;"> <body style="margin: 0;">
@@ -146,14 +155,6 @@
</div> </div>
</div> </div>
<div id="app"></div> <div id="app"></div>
<script>
const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
if (loaderColor)
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
if (primaryColor)
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
</script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
public/loader.css
-4
View File
@@ -1,7 +1,3 @@
html {
background: var(--initial-loader-bg, #fff);
}
#loading-bg { #loading-bg {
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
src/@core/components/ThemeSwitcher.vue
+2 -2
View File
@@ -5,6 +5,7 @@ import type { ThemeSwitcherTheme } from '@layouts/types'
import api from '@/api' import api from '@/api'
import { checkPrefersColorSchemeIsDark } from '@/@core/utils' import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
import { useToast } from 'vue-toast-notification' import { useToast } from 'vue-toast-notification'
import { saveLocalTheme } from '../utils/theme'
// 显示器宽度 // 显示器宽度
const display = useDisplay() const display = useDisplay()
@@ -102,8 +103,7 @@ function updateTheme() {
savedTheme.value = theme savedTheme.value = theme
themeTransition() themeTransition()
// 保存主题到本地 // 保存主题到本地
localStorage.setItem('theme', theme) saveLocalTheme(theme, globalTheme)
localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
} }
// 切换主题 // 切换主题
src/@core/utils/theme.ts
+6
View File
@@ -0,0 +1,6 @@
export function saveLocalTheme(name: string, theme: any) {
// 存储主题到本地
localStorage.setItem('theme', name)
localStorage.setItem('materio-initial-loader-bg', theme.current.value.colors.background)
localStorage.setItem('materio-initial-loader-color', theme.current.value.colors.primary)
}
src/App.vue
+4
View File
@@ -46,7 +46,11 @@ onMounted(() => {
ensureRenderComplete(() => { ensureRenderComplete(() => {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
// 移除加载动画
removeEl('#loading-bg') removeEl('#loading-bg')
// 将background属性从html的style中移除
document.documentElement.style.removeProperty('background')
// 显示页面
show.value = true show.value = true
}, 1500) }, 1500)
}) })
src/pages/login.vue
+2 -2
View File
@@ -9,6 +9,7 @@ import logo from '@images/logo.png'
import { useTheme } from 'vuetify' import { useTheme } from 'vuetify'
import { checkPrefersColorSchemeIsDark } from '@/@core/utils' import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
import { urlBase64ToUint8Array } from '@/@core/utils/navigator' import { urlBase64ToUint8Array } from '@/@core/utils/navigator'
import { saveLocalTheme } from '@/@core/utils/theme'
const { global: globalTheme } = useTheme() const { global: globalTheme } = useTheme()
@@ -85,8 +86,7 @@ async function setTheme() {
const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light' const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
// 存储主题到本地 // 存储主题到本地
localStorage.setItem('theme', themeValue) saveLocalTheme(themeValue, globalTheme)
localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
} }
// 订阅推送通知 // 订阅推送通知