优化主题切换功能:修正主题保存逻辑,确保保存原始主题设置而非计算后的值;更新错误处理,简化样式结构,提升代码可读性。

This commit is contained in:
jxxghp
2025-04-21 13:14:21 +08:00
parent ef32172359
commit c3379e9737
2 changed files with 6 additions and 9 deletions
+5 -8
View File
@@ -41,9 +41,10 @@ function updateTheme() {
const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light' const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
globalTheme.name.value = theme globalTheme.name.value = theme
savedTheme.value = theme // 保存原始主题设置,而不是计算后的值
savedTheme.value = currentThemeName.value
// 保存主题到本地 // 保存主题到本地
saveLocalTheme(theme, globalTheme) saveLocalTheme(currentThemeName.value, globalTheme)
// 刷新页面 // 刷新页面
location.reload() location.reload()
} }
@@ -59,7 +60,7 @@ function changeTheme(theme: string) {
theme: nextTheme, theme: nextTheme,
}) })
} catch (e) { } catch (e) {
console.error('保存主题到服务端失败') console.error(e)
} }
} }
@@ -135,11 +136,7 @@ onMounted(() => {
<VIcon :icon="getThemeIcon" /> <VIcon :icon="getThemeIcon" />
</IconBtn> </IconBtn>
</template> </template>
<VList class="pt-0"> <VList>
<VCardItem class="py-3">
<VCardTitle>主题选择</VCardTitle>
</VCardItem>
<VDivider class="mb-2" />
<div class="px-2"> <div class="px-2">
<VListItem <VListItem
v-for="theme in props.themes" v-for="theme in props.themes"
+1 -1
View File
@@ -70,7 +70,7 @@ onUnmounted(() => {
}) })
</script> </script>
<template> <template>
<div class="tab-header rounded-lg"> <div class="tab-header rounded-t-lg">
<div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }"> <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
<div <div
v-for="(item, index) in items" v-for="(item, index) in items"