mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +08:00 
			
		
		
		
	perf: 主题初始化放在 onBeforeMount 避免初始化页面闪烁
				
					
				
			This commit is contained in:
		
							parent
							
								
									fa5c97ffa4
								
							
						
					
					
						commit
						9ab3fd19ef
					
				@ -1,4 +1,13 @@
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {
 | 
			
		||||
  ref,
 | 
			
		||||
  unref,
 | 
			
		||||
  watch,
 | 
			
		||||
  reactive,
 | 
			
		||||
  computed,
 | 
			
		||||
  nextTick,
 | 
			
		||||
  onBeforeMount
 | 
			
		||||
} from "vue";
 | 
			
		||||
import {
 | 
			
		||||
  useDark,
 | 
			
		||||
  debounce,
 | 
			
		||||
@ -17,7 +26,6 @@ import { useNav } from "@/layout/hooks/useNav";
 | 
			
		||||
import { useAppStoreHook } from "@/store/modules/app";
 | 
			
		||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 | 
			
		||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 | 
			
		||||
import { ref, unref, watch, reactive, computed, nextTick } from "vue";
 | 
			
		||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 | 
			
		||||
 | 
			
		||||
import dayIcon from "@/assets/svg/day.svg?component";
 | 
			
		||||
@ -189,16 +197,6 @@ function setLayoutModel(layout: string) {
 | 
			
		||||
  useAppStoreHook().setLayout(layout);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 初始化项目配置 */
 | 
			
		||||
nextTick(() => {
 | 
			
		||||
  settings.greyVal &&
 | 
			
		||||
    document.querySelector("html")?.setAttribute("class", "html-grey");
 | 
			
		||||
  settings.weakVal &&
 | 
			
		||||
    document.querySelector("html")?.setAttribute("class", "html-weakness");
 | 
			
		||||
  settings.tabsVal && tagsChange();
 | 
			
		||||
  dataThemeChange();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
watch($storage, ({ layout }) => {
 | 
			
		||||
  switch (layout["layout"]) {
 | 
			
		||||
    case "vertical":
 | 
			
		||||
@ -218,6 +216,18 @@ watch($storage, ({ layout }) => {
 | 
			
		||||
      break;
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
onBeforeMount(() => {
 | 
			
		||||
  dataThemeChange();
 | 
			
		||||
  /* 初始化项目配置 */
 | 
			
		||||
  nextTick(() => {
 | 
			
		||||
    settings.greyVal &&
 | 
			
		||||
      document.querySelector("html")?.setAttribute("class", "html-grey");
 | 
			
		||||
    settings.weakVal &&
 | 
			
		||||
      document.querySelector("html")?.setAttribute("class", "html-weakness");
 | 
			
		||||
    settings.tabsVal && tagsChange();
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user