perf: login

src/layout/components/setting/index.vue

@@ -6,33 +6,25 @@ import {
   reactive,
   computed,
   nextTick,
-  useCssModule,
-  getCurrentInstance
+  useCssModule
 } from "vue";
-import { find } from "lodash-unified";
 import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
-import { TinyColor } from "@ctrl/tinycolor";
-import { themeColorsType } from "../../types";
 import { routerArrays } from "/@/layout/types";
-import type { StorageConfigs } from "/#/index";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
+import useDataThemeChange from "/@/layout/hooks/useDataThemeChange";
 import {
   useDark,
   debounce,
   storageLocal,
   storageSession
 } from "@pureadmin/utils";
-import {
-  darken,
-  lighten,
-  toggleTheme
-} from "@pureadmin/theme/dist/browser-utils";
+import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 
 import dayIcon from "/@/assets/svg/day.svg?component";
 import darkIcon from "/@/assets/svg/dark.svg?component";
@@ -40,44 +32,20 @@ import darkIcon from "/@/assets/svg/dark.svg?component";
 const router = useRouter();
 const { isDark } = useDark();
 const { isSelect } = useCssModule();
-const body = document.documentElement as HTMLElement;
-const instance =
-  getCurrentInstance().appContext.app.config.globalProperties.$storage;
-
-const instanceConfig =
-  getCurrentInstance().appContext.app.config.globalProperties.$config;
-
-let themeColors = ref<Array<themeColorsType>>([
-  /* 道奇蓝（默认） */
-  { color: "#1b2a47", themeColor: "default" },
-  /* 亮白色 */
-  { color: "#ffffff", themeColor: "light" },
-  /* 猩红色 */
-  { color: "#f5222d", themeColor: "dusk" },
-  /* 橙红色 */
-  { color: "#fa541c", themeColor: "volcano" },
-  /* 金色 */
-  { color: "#fadb14", themeColor: "yellow" },
-  /* 绿宝石 */
-  { color: "#13c2c2", themeColor: "mingQing" },
-  /* 酸橙绿 */
-  { color: "#52c41a", themeColor: "auroraGreen" },
-  /* 深粉色 */
-  { color: "#eb2f96", themeColor: "pink" },
-  /* 深紫罗兰色 */
-  { color: "#722ed1", themeColor: "saucePurple" }
-]);
 
 const mixRef = templateRef<HTMLElement | null>("mixRef", null);
 const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
 const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
 
-let layoutTheme =
-  ref(storageLocal.getItem<StorageConfigs>("responsive-layout")) ||
-  ref({
-    layout: instanceConfig?.Layout ?? "vertical",
-    theme: instanceConfig?.Theme ?? "default"
-  });
+const {
+  body,
+  instance,
+  dataTheme,
+  layoutTheme,
+  themeColors,
+  dataThemeChange,
+  setLayoutThemeColor
+} = useDataThemeChange();
 
 /* body添加layout属性，作用于src/style/sidebar.scss */
 if (unref(layoutTheme)) {
@@ -245,75 +213,6 @@ function setLayoutModel(layout: string) {
   useAppStoreHook().setLayout(layout);
 }
 
-/** 设置导航主题色 */
-function setLayoutThemeColor(theme: string) {
-  layoutTheme.value.theme = theme;
-  toggleTheme({
-    scopeName: `layout-theme-${theme}`
-  });
-  instance.layout = {
-    layout: useAppStoreHook().layout,
-    theme,
-    darkMode: dataTheme.value,
-    sidebarStatus: instance.layout.sidebarStatus,
-    epThemeColor: instance.layout.epThemeColor
-  };
-
-  if (theme === "default" || theme === "light") {
-    setEpThemeColor(getConfig().EpThemeColor);
-  } else {
-    const colors = find(themeColors.value, { themeColor: theme });
-    setEpThemeColor(colors.color);
-  }
-}
-
-/**
- * @description 自动计算hover和active颜色
- * @see {@link https://element-plus.org/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2}
- */
-const shadeBgColor = (color: string): string => {
-  return new TinyColor(color).shade(10).toString();
-};
-
-/** 设置ep主题色 */
-const setEpThemeColor = (color: string) => {
-  useEpThemeStoreHook().setEpThemeColor(color);
-  body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
-  document.documentElement.style.setProperty("--el-color-primary", color);
-  for (let i = 1; i <= 9; i++) {
-    document.documentElement.style.setProperty(
-      `--el-color-primary-light-${i}`,
-      lighten(color, i / 10)
-    );
-  }
-  for (let i = 1; i <= 2; i++) {
-    document.documentElement.style.setProperty(
-      `--el-color-primary-dark-${i}`,
-      darken(color, i / 10)
-    );
-  }
-};
-
-let dataTheme = ref<boolean>(instance.layout.darkMode);
-
-/** 日间、夜间主题切换 */
-function dataThemeChange() {
-  /* 如果当前是light夜间主题，默认切换到default主题 */
-  if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
-    setLayoutThemeColor("default");
-  } else {
-    setLayoutThemeColor(useEpThemeStoreHook().epTheme);
-  }
-
-  if (dataTheme.value) {
-    instance.layout.darkMode = true;
-    document.documentElement.classList.add("dark");
-  } else {
-    instance.layout.darkMode = false;
-    document.documentElement.classList.remove("dark");
-  }
-}
-
 /* 初始化项目配置 */
 nextTick(() => {
   settings.greyVal &&