新增前端vue

web-vue/packages/core/logics/theme/dark.ts

@@ -0,0 +1,25 @@
+import { darkCssIsReady, loadDarkThemeCss } from 'vite-plugin-theme-vite3/es/client';
+import { addClass, hasClass, removeClass } from '@jeesite/core/utils/domUtils';
+import { isProdMode } from '@jeesite/core/utils/env';
+
+export async function updateDarkTheme(mode: string | null = 'light') {
+  const htmlRoot = document.getElementById('htmlRoot');
+  if (!htmlRoot) {
+    return;
+  }
+  const hasDarkClass = hasClass(htmlRoot, 'dark');
+  if (mode === 'dark') {
+    if (isProdMode() && !darkCssIsReady) {
+      await loadDarkThemeCss();
+    }
+    htmlRoot.setAttribute('data-theme', 'dark');
+    if (!hasDarkClass) {
+      addClass(htmlRoot, 'dark');
+    }
+  } else {
+    htmlRoot.setAttribute('data-theme', 'light');
+    if (hasDarkClass) {
+      removeClass(htmlRoot, 'dark');
+    }
+  }
+}

web-vue/packages/core/logics/theme/index.ts

@@ -0,0 +1,17 @@
+import { getThemeColors, generateColors } from '@jeesite/vite/theme/themeConfig';
+
+import { replaceStyleVariables } from 'vite-plugin-theme-vite3/es/client';
+import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme-vite3/es/colorUtils';
+
+export async function changeTheme(color: string) {
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+    color,
+  });
+
+  return await replaceStyleVariables({
+    colorVariables: [...getThemeColors(color), ...colors],
+  });
+}

web-vue/packages/core/logics/theme/updateBackground.ts

@@ -0,0 +1,75 @@
+import { colorIsDark, lighten, darken } from '@jeesite/core/utils/color';
+import { useAppStore } from '@jeesite/core/store/modules/app';
+import { ThemeEnum } from '@jeesite/core/enums/appEnum';
+import { setCssVar } from './util';
+
+const HEADER_BG_COLOR_VAR = '--header-bg-color';
+const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
+const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
+
+const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
+const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
+const SIDER_LIGHTEN_BG_COLOR = '--sider-dark-lighten-bg-color';
+
+/**
+ * Change the background color of the top header
+ * @param color
+ */
+export function updateHeaderBgColor(color?: string) {
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#151515';
+    } else {
+      color = appStore.getHeaderSetting.bgColor;
+    }
+  }
+  // bg color
+  setCssVar(HEADER_BG_COLOR_VAR, color);
+
+  // hover color
+  const hoverColor = darken(color!, 5);
+  setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
+  setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
+
+  // Determine the depth of the color value and automatically switch the theme
+  const isDark = colorIsDark(color!);
+
+  appStore.setProjectConfig({
+    headerSetting: {
+      theme: isDark || darkMode ? ThemeEnum.DARK : ThemeEnum.LIGHT,
+    },
+  });
+}
+
+/**
+ * Change the background color of the left menu
+ * @param color  bg color
+ */
+export function updateSidebarBgColor(color?: string) {
+  const appStore = useAppStore();
+
+  // if (!isHexColor(color)) return;
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#151515';
+    } else {
+      color = appStore.getMenuSetting.bgColor;
+    }
+  }
+  setCssVar(SIDER_DARK_BG_COLOR, color);
+  setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color!, 6));
+  setCssVar(SIDER_LIGHTEN_BG_COLOR, lighten(color!, 5));
+
+  // only #ffffff is light
+  // Only when the background color is #fff, the theme of the menu will be changed to light
+  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
+
+  appStore.setProjectConfig({
+    menuSetting: {
+      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
+    },
+  });
+}

web-vue/packages/core/logics/theme/updateColorWeak.ts

@@ -0,0 +1,9 @@
+import { toggleClass } from './util';
+
+/**
+ * Change the status of the project's color weakness mode
+ * @param colorWeak
+ */
+export function updateColorWeak(colorWeak: boolean) {
+  toggleClass(colorWeak, 'color-weak', document.documentElement);
+}

web-vue/packages/core/logics/theme/updateGrayMode.ts

@@ -0,0 +1,9 @@
+import { toggleClass } from './util';
+
+/**
+ * Change project gray mode status
+ * @param gray
+ */
+export function updateGrayMode(gray: boolean) {
+  toggleClass(gray, 'gray-mode', document.documentElement);
+}

web-vue/packages/core/logics/theme/util.ts

@@ -0,0 +1,11 @@
+const docEle = document.documentElement;
+export function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+  const targetEl = target || document.body;
+  let { className } = targetEl;
+  className = className.replace(clsName, '');
+  targetEl.className = flag ? `${className} ${clsName} ` : className;
+}
+
+export function setCssVar(prop: string, val: any, dom = docEle) {
+  dom.style.setProperty(prop, val);
+}