fix: 系统设置主题切换问题修复
This commit is contained in:
@@ -9,6 +9,7 @@
|
|||||||
import {computed, onMounted, ref, watch} from "vue";
|
import {computed, onMounted, ref, watch} from "vue";
|
||||||
import {useAppStoreHook} from "@/store/modules/app";
|
import {useAppStoreHook} from "@/store/modules/app";
|
||||||
import {ElConfigProvider} from 'element-plus'
|
import {ElConfigProvider} from 'element-plus'
|
||||||
|
import {localStorage} from "@/utils/storage";
|
||||||
|
|
||||||
//官方文档: https://element-plus.gitee.io/zh-CN/guide/i18n.html
|
//官方文档: https://element-plus.gitee.io/zh-CN/guide/i18n.html
|
||||||
|
|
||||||
@@ -30,7 +31,7 @@ watch(language, (value) => {
|
|||||||
immediate: true
|
immediate: true
|
||||||
})
|
})
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
const style = localStorage.getItem("style");
|
const style = localStorage.get("style");
|
||||||
document.documentElement.style.cssText = style as string;
|
document.documentElement.style.cssText = style as string;
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -35,7 +35,6 @@ const theme = computed(() => useSettingStoreHook().theme)
|
|||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
|
|
||||||
watch(show, (value) => {
|
watch(show, (value) => {
|
||||||
console.log('show', value)
|
|
||||||
if (value) {
|
if (value) {
|
||||||
addEventClick()
|
addEventClick()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import {computed, nextTick, watch} from "vue";
|
|||||||
import {useSettingStoreHook} from "@/store/modules/settings";
|
import {useSettingStoreHook} from "@/store/modules/settings";
|
||||||
import {useTagsViewStoreHook} from "@/store/modules/tagsView";
|
import {useTagsViewStoreHook} from "@/store/modules/tagsView";
|
||||||
import {useRoute, useRouter} from "vue-router";
|
import {useRoute, useRouter} from "vue-router";
|
||||||
|
import {localStorage} from "@/utils/storage";
|
||||||
|
|
||||||
// 参考连接:https://juejin.cn/post/7024025899813044232#heading-1
|
// 参考连接:https://juejin.cn/post/7024025899813044232#heading-1
|
||||||
import {mix} from "@/utils";
|
import {mix} from "@/utils";
|
||||||
@@ -26,14 +27,14 @@ const theme = computed(() => useSettingStoreHook().theme)
|
|||||||
|
|
||||||
watch(theme, (color: string) => {
|
watch(theme, (color: string) => {
|
||||||
node.style.setProperty("--el-color-primary", color);
|
node.style.setProperty("--el-color-primary", color);
|
||||||
localStorage.setItem("theme", color)
|
localStorage.set("theme", color)
|
||||||
|
|
||||||
for (let i = 1; i < 10; i += 1) {
|
for (let i = 1; i < 10; i += 1) {
|
||||||
node.style.setProperty(`--el-color-primary-light-${i}`, mix(color, mixWhite, i * 0.1));
|
node.style.setProperty(`--el-color-primary-light-${i}`, mix(color, mixWhite, i * 0.1));
|
||||||
}
|
}
|
||||||
node.style.setProperty("--el-color-primary-dark", mix(color, mixBlack, 0.1));
|
node.style.setProperty("--el-color-primary-dark", mix(color, mixBlack, 0.1));
|
||||||
|
|
||||||
localStorage.setItem("style", node.style.cssText);
|
localStorage.set("style", node.style.cssText);
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import {defineStore} from "pinia";
|
|||||||
import {store} from "@/store";
|
import {store} from "@/store";
|
||||||
import {SettingState} from "@/store/interface";
|
import {SettingState} from "@/store/interface";
|
||||||
import defaultSettings from '../../settings'
|
import defaultSettings from '../../settings'
|
||||||
|
import {localStorage} from "@/utils/storage";
|
||||||
|
|
||||||
const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
|
const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
|
||||||
import variables from '@/styles/element-variables.module.scss'
|
import variables from '@/styles/element-variables.module.scss'
|
||||||
|
|||||||
Reference in New Issue
Block a user