canrd-outside / order-erp-front · Commits

Commit 3d1681ee9ae2b8e8a8f9d7afeaef3b059aa20b48

Authored by vben
1 parent 85729f0f

feat: theme color switch

Inline Side-by-side
Showing 27 changed files with 468 additions and 252 deletions
CHANGELOG.zh_CN.md
  View file @3d1681e
... ... @@ -3,6 +3,7 @@
3 3 ### ✨ Features
4 4  
5 5 - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string`
  6 +- 新增主题色切换
6 7  
7 8 ### ⚡ Performance Improvements
8 9  
... ...
build/config/lessModifyVars.ts deleted 100644 → 0
  View file @85729f0
1   -/**
2   - * less global variable
3   - */
4   -const primaryColor = '#0084f4';
5   -// const primaryColor = '#018ffb';
6   -// const primaryColor = '#0065cc';
7   -//{
8   -const modifyVars = {
9   - 'primary-color': primaryColor, // Global dominant color
10   - 'success-color': '#55D187', // Success color
11   - 'error-color': '#ED6F6F', // False color
12   - 'warning-color': '#EFBD47', // Warning color
13   - 'link-color': primaryColor, // Link color
14   - 'disabled-color': 'rgba(0, 0, 0, 0.25)', // Failure color
15   - 'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
16   - 'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
17   - 'text-color-secondary ': 'rgba(0, 0, 0, 0.45)', // Subtext color
18   - 'font-size-base': '14px', // Main font size
19   - 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow
20   - 'border-color-base': '#d9d9d9', // Border color,
21   - 'border-radius-base': '2px', // Component/float fillet
22   -};
23   -//}
24   -
25   -export { modifyVars, primaryColor };
build/config/themeConfig.ts 0 → 100644
  View file @3d1681e
  1 +import { generate } from '@ant-design/colors';
  2 +export const primaryColor = '#0084f4';
  3 +
  4 +export const themeMode = 'light';
  5 +
  6 +export type ThemeMode = 'dark' | 'light';
  7 +
  8 +type Fn = (...arg: any) => any;
  9 +
  10 +export interface GenerateColorsParams {
  11 + mixLighten: Fn;
  12 + mixDarken: Fn;
  13 + tinycolor: any;
  14 + color?: string;
  15 +}
  16 +
  17 +export function generateAntColors(color: string, mode: ThemeMode) {
  18 + return generate(color, {
  19 + theme: mode == 'dark' ? 'dark' : 'default',
  20 + });
  21 +}
  22 +
  23 +export function getThemeColors(color?: string, theme?: ThemeMode) {
  24 + const tc = color || primaryColor;
  25 + const tm = theme || themeMode;
  26 + const colors = generateAntColors(tc, tm);
  27 + const primary = colors[5];
  28 + const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
  29 +
  30 + return [...colors, ...modeColors];
  31 +}
  32 +
  33 +export function generateColors({
  34 + color = primaryColor,
  35 + mixLighten,
  36 + mixDarken,
  37 + tinycolor,
  38 +}: GenerateColorsParams) {
  39 + const lightens = new Array(19).fill(0).map((t, i) => {
  40 + return mixLighten(color, i / 5);
  41 + });
  42 +
  43 + const darkens = new Array(19).fill(0).map((t, i) => {
  44 + return mixDarken(color, i / 5);
  45 + });
  46 +
  47 + const alphaColors = new Array(19).fill(0).map((t, i) => {
  48 + return tinycolor(color)
  49 + .setAlpha(i / 20)
  50 + .toRgbString();
  51 + });
  52 +
  53 + const tinycolorLightens = new Array(19)
  54 + .fill(0)
  55 + .map((t, i) => {
  56 + return tinycolor(color)
  57 + .lighten(i * 5)
  58 + .toHexString();
  59 + })
  60 + .filter((item) => item !== '#ffffff');
  61 +
  62 + const tinycolorDarkens = new Array(19)
  63 + .fill(0)
  64 + .map((t, i) => {
  65 + return tinycolor(color)
  66 + .darken(i * 5)
  67 + .toHexString();
  68 + })
  69 + .filter((item) => item !== '#000000');
  70 + return [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens];
  71 +}
  72 +
  73 +/**
  74 + * less global variable
  75 + */
  76 +export function generateModifyVars() {
  77 + const palettes = generateAntColors(primaryColor, themeMode);
  78 + const primary = palettes[5];
  79 +
  80 + const primaryColorObj: Record<string, string> = {};
  81 +
  82 + for (let index = 0; index < 10; index++) {
  83 + primaryColorObj[`primary-${index}`] = palettes[index];
  84 + }
  85 +
  86 + return {
  87 + 'primary-color': primary,
  88 + ...primaryColorObj,
  89 + 'info-color': primary,
  90 + 'alert-info-bg-color': palettes[0],
  91 + 'alert-info-border-color': palettes[2],
  92 + 'processing-color': primary,
  93 + 'success-color': '#55D187', // Success color
  94 + 'error-color': '#ED6F6F', // False color
  95 + 'warning-color': '#EFBD47', // Warning color
  96 + 'disabled-color': 'rgba(0, 0, 0, 0.25)', // Failure color
  97 + 'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
  98 + 'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
  99 + 'text-color-secondary ': 'rgba(0, 0, 0, 0.45)', // Subtext color
  100 + 'font-size-base': '14px', // Main font size
  101 + 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow
  102 + 'border-color-base': '#d9d9d9', // Border color,
  103 + 'border-radius-base': '2px', // Component/float fillet
  104 + 'link-color': primary, // Link color
  105 + };
  106 +}
... ...
build/vite/plugin/index.ts
  View file @3d1681e
... ... @@ -9,8 +9,9 @@ import { configHtmlPlugin } from &#39;./html&#39;;
9 9 import { configPwaConfig } from './pwa';
10 10 import { configMockPlugin } from './mock';
11 11 import { configGzipPlugin } from './gzip';
12   -import { configStyleImportConfig } from './styleImport';
  12 +import { configStyleImportPlugin } from './styleImport';
13 13 import { configVisualizerConfig } from './visualizer';
  14 +import { configThemePlugin } from './theme';
14 15  
15 16 // gen vite plugins
16 17 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
... ... @@ -29,7 +30,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
29 30 vitePlugins.push(PurgeIcons());
30 31  
31 32 // vite-plugin-style-import
32   - vitePlugins.push(configStyleImportConfig());
  33 + vitePlugins.push(configStyleImportPlugin());
33 34  
34 35 // rollup-plugin-gzip
35 36 vitePlugins.push(configGzipPlugin(isBuild));
... ... @@ -37,5 +38,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
37 38 // rollup-plugin-visualizer
38 39 vitePlugins.push(configVisualizerConfig());
39 40  
  41 + //vite-plugin-theme
  42 + vitePlugins.push(configThemePlugin());
  43 +
40 44 return vitePlugins;
41 45 }
... ...
build/vite/plugin/styleImport.ts
  View file @3d1681e
1 1 import styleImport from 'vite-plugin-style-import';
2 2  
3   -export function configStyleImportConfig() {
  3 +export function configStyleImportPlugin() {
4 4 const pwaPlugin = styleImport({
5 5 libs: [
6 6 {
... ...
build/vite/plugin/theme.ts 0 → 100644
  View file @3d1681e
  1 +import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
  2 +import { getThemeColors, generateColors } from '../../config/themeConfig';
  3 +
  4 +export function configThemePlugin() {
  5 + const colors = generateColors({
  6 + mixDarken,
  7 + mixLighten,
  8 + tinycolor,
  9 + });
  10 +
  11 + const plugin = viteThemePlugin({
  12 + colorVariables: [...getThemeColors(), ...colors],
  13 + });
  14 + return plugin;
  15 +}
... ...
package.json
  View file @3d1681e
... ... @@ -21,9 +21,9 @@
21 21 },
22 22 "dependencies": {
23 23 "@iconify/iconify": "^2.0.0-rc.6",
24   - "@vueuse/core": "^4.0.11",
  24 + "@vueuse/core": "^4.0.12",
25 25 "ant-design-vue": "2.0.0-rc.9",
26   - "apexcharts": "^3.23.1",
  26 + "apexcharts": "^3.24.0",
27 27 "axios": "^0.21.1",
28 28 "crypto-es": "^1.2.6",
29 29 "echarts": "^4.9.0",
... ... @@ -33,12 +33,12 @@
33 33 "path-to-regexp": "^6.2.0",
34 34 "qrcode": "^1.4.4",
35 35 "sortablejs": "^1.13.0",
36   - "vditor": "^3.7.7",
  36 + "vditor": "^3.8.0",
37 37 "vue": "^3.0.5",
38 38 "vue-i18n": "9.0.0-rc.2",
39 39 "vue-router": "^4.0.3",
40   - "vue-types": "^3.0.1",
41   - "vuex": "^4.0.0-rc.2",
  40 + "vue-types": "^3.0.2",
  41 + "vuex": "^4.0.0",
42 42 "vuex-module-decorators": "^1.0.1",
43 43 "xlsx": "^0.16.9",
44 44 "zxcvbn": "^4.4.2"
... ... @@ -46,7 +46,7 @@
46 46 "devDependencies": {
47 47 "@commitlint/cli": "^11.0.0",
48 48 "@commitlint/config-conventional": "^11.0.0",
49   - "@iconify/json": "^1.1.294",
  49 + "@iconify/json": "^1.1.296",
50 50 "@ls-lint/ls-lint": "^1.9.2",
51 51 "@purge-icons/generated": "^0.6.0",
52 52 "@types/echarts": "^4.9.3",
... ... @@ -61,10 +61,10 @@
61 61 "@types/sortablejs": "^1.10.6",
62 62 "@types/yargs": "^16.0.0",
63 63 "@types/zxcvbn": "^4.4.0",
64   - "@typescript-eslint/eslint-plugin": "^4.14.1",
65   - "@typescript-eslint/parser": "^4.14.1",
66   - "@vitejs/plugin-legacy": "^1.2.2",
67   - "@vitejs/plugin-vue": "^1.1.3",
  64 + "@typescript-eslint/eslint-plugin": "^4.14.2",
  65 + "@typescript-eslint/parser": "^4.14.2",
  66 + "@vitejs/plugin-legacy": "^1.2.3",
  67 + "@vitejs/plugin-vue": "^1.1.4",
68 68 "@vitejs/plugin-vue-jsx": "^1.0.2",
69 69 "@vue/compiler-sfc": "^3.0.5",
70 70 "@vuedx/typecheck": "^0.6.3",
... ... @@ -74,14 +74,14 @@
74 74 "conventional-changelog-cli": "^2.1.1",
75 75 "cross-env": "^7.0.3",
76 76 "dotenv": "^8.2.0",
77   - "eslint": "^7.18.0",
  77 + "eslint": "^7.19.0",
78 78 "eslint-config-prettier": "^7.2.0",
79 79 "eslint-plugin-prettier": "^3.3.1",
80 80 "eslint-plugin-vue": "^7.5.0",
81   - "esno": "^0.4.0",
  81 + "esno": "^0.4.3",
82 82 "fs-extra": "^9.1.0",
83 83 "husky": "^4.3.8",
84   - "less": "^4.1.0",
  84 + "less": "^4.1.1",
85 85 "lint-staged": "^10.5.3",
86 86 "prettier": "^2.2.1",
87 87 "rimraf": "^3.0.2",
... ... @@ -93,12 +93,13 @@
93 93 "stylelint-order": "^4.1.0",
94 94 "ts-node": "^9.1.1",
95 95 "typescript": "^4.1.3",
96   - "vite": "2.0.0-beta.59",
  96 + "vite": "2.0.0-beta.62",
97 97 "vite-plugin-html": "^2.0.0-rc.3",
98 98 "vite-plugin-mock": "^2.0.0-rc.2",
99 99 "vite-plugin-purge-icons": "^0.6.0",
100   - "vite-plugin-pwa": "^0.4.1",
  100 + "vite-plugin-pwa": "^0.4.2",
101 101 "vite-plugin-style-import": "^0.5.5",
  102 + "vite-plugin-theme": "0.3.2",
102 103 "vue-eslint-parser": "^7.4.1",
103 104 "yargs": "^16.2.0"
104 105 },
... ... @@ -118,6 +119,6 @@
118 119 }
119 120 },
120 121 "engines": {
121   - "node": ">=10.16.1"
  122 + "node": "^12 || ^14"
122 123 }
123 124 }
... ...
src/design/ant/btn.less
  View file @3d1681e
... ... @@ -22,7 +22,7 @@
22 22  
23 23 &:hover,
24 24 &:focus {
25   - color: @white;
  25 + color: @white !important;
26 26 background-color: @button-primary-hover-color;
27 27 }
28 28  
... ...
src/hooks/setting/useRootSetting.ts
  View file @3d1681e
... ... @@ -34,6 +34,8 @@ const getShowFooter = computed(() =&gt; unref(getRootSetting).showFooter);
34 34  
35 35 const getShowBreadCrumb = computed(() => unref(getRootSetting).showBreadCrumb);
36 36  
  37 +const getThemeColor = computed(() => unref(getRootSetting).themeColor);
  38 +
37 39 const getShowBreadCrumbIcon = computed(() => unref(getRootSetting).showBreadCrumbIcon);
38 40  
39 41 const getFullContent = computed(() => unref(getRootSetting).fullContent);
... ... @@ -74,5 +76,6 @@ export function useRootSetting() {
74 76 getShowFooter,
75 77 getContentMode,
76 78 getLockTime,
  79 + getThemeColor,
77 80 };
78 81 }
... ...
src/layouts/default/setting/SettingDrawer.tsx
  View file @3d1681e
... ... @@ -31,7 +31,11 @@ import {
31 31 mixSidebarTriggerOptions,
32 32 } from './enum';
33 33  
34   -import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
  34 +import {
  35 + HEADER_PRESET_BG_COLOR_LIST,
  36 + SIDE_BAR_BG_COLOR_LIST,
  37 + APP_PRESET_COLOR_LIST,
  38 +} from '/@/settings/designSetting';
35 39  
36 40 const { t } = useI18n();
37 41  
... ... @@ -48,6 +52,7 @@ export default defineComponent({
48 52 getColorWeak,
49 53 getGrayMode,
50 54 getLockTime,
  55 + getThemeColor,
51 56 } = useRootSetting();
52 57  
53 58 const {
... ... @@ -129,6 +134,16 @@ export default defineComponent({
129 134 );
130 135 }
131 136  
  137 + function renderMainTheme() {
  138 + return (
  139 + <ThemePicker
  140 + colorList={APP_PRESET_COLOR_LIST}
  141 + def={unref(getThemeColor)}
  142 + event={HandlerEnum.CHANGE_THEME_COLOR}
  143 + />
  144 + );
  145 + }
  146 +
132 147 /**
133 148 * @description:
134 149 */
... ... @@ -391,6 +406,8 @@ export default defineComponent({
391 406 >
392 407 <Divider>{() => t('layout.setting.navMode')}</Divider>
393 408 {renderSidebar()}
  409 + <Divider>{() => t('layout.setting.sysTheme')}</Divider>
  410 + {renderMainTheme()}
394 411 <Divider>{() => t('layout.setting.headerTheme')}</Divider>
395 412 {renderHeaderTheme()}
396 413 <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
... ...
src/layouts/default/setting/components/SettingFooter.vue
  View file @3d1681e
... ... @@ -27,7 +27,8 @@
27 27 import { useMessage } from '/@/hooks/web/useMessage';
28 28 import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
29 29 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
30   - import { updateColorWeak, updateGrayMode } from '/@/logics/theme';
  30 + import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
  31 + import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
31 32  
32 33 export default defineComponent({
33 34 name: 'SettingFooter',
... ...
src/layouts/default/setting/enum.ts
  View file @3d1681e
... ... @@ -13,6 +13,7 @@ const { t } = useI18n();
13 13  
14 14 export enum HandlerEnum {
15 15 CHANGE_LAYOUT,
  16 + CHANGE_THEME_COLOR,
16 17 // menu
17 18 MENU_HAS_DRAG,
18 19 MENU_ACCORDION,
... ...
src/layouts/default/setting/handler.ts
  View file @3d1681e
1 1 import { HandlerEnum } from './enum';
2   -import {
3   - updateColorWeak,
4   - updateGrayMode,
5   - updateHeaderBgColor,
6   - updateSidebarBgColor,
7   -} from '/@/logics/theme';
  2 +import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
  3 +import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
  4 +import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
  5 +
8 6 import { appStore } from '/@/store/modules/app';
9 7 import { ProjectConfig } from '/@/types/config';
  8 +import { changeTheme } from '/@/logics/theme';
  9 +import { useRootSetting } from '/@/hooks/setting/useRootSetting';
10 10  
11 11 export function baseHandler(event: HandlerEnum, value: any) {
12 12 const config = handler(event, value);
... ... @@ -14,6 +14,7 @@ export function baseHandler(event: HandlerEnum, value: any) {
14 14 }
15 15  
16 16 export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
  17 + const { getThemeColor } = useRootSetting();
17 18 switch (event) {
18 19 case HandlerEnum.CHANGE_LAYOUT:
19 20 const { mode, type, split } = value;
... ... @@ -30,6 +31,13 @@ export function handler(event: HandlerEnum, value: any): DeepPartial&lt;ProjectConf
30 31 },
31 32 };
32 33  
  34 + case HandlerEnum.CHANGE_THEME_COLOR:
  35 + if (getThemeColor.value === value) {
  36 + return {};
  37 + }
  38 + changeTheme(value);
  39 + return { themeColor: value };
  40 +
33 41 case HandlerEnum.MENU_HAS_DRAG:
34 42 return { menuSetting: { canDrag: value } };
35 43  
... ...
src/locales/lang/en/layout/setting.ts
  View file @3d1681e
... ... @@ -37,6 +37,7 @@ export default {
37 37 splitMenu: 'Split menu',
38 38 closeMixSidebarOnChange: 'Switch page to close menu',
39 39  
  40 + sysTheme: 'System theme',
40 41 headerTheme: 'Header theme',
41 42 sidebarTheme: 'Menu theme',
42 43  
... ...
src/locales/lang/zh_CN/layout/setting.ts
  View file @3d1681e
... ... @@ -36,6 +36,7 @@ export default {
36 36 splitMenu: '分割菜单',
37 37 closeMixSidebarOnChange: '切换页面关闭菜单',
38 38  
  39 + sysTheme: '系统主题',
39 40 headerTheme: '顶栏主题',
40 41 sidebarTheme: '菜单主题',
41 42  
... ...
src/logics/initAppConfig.ts
  View file @3d1681e
... ... @@ -8,15 +8,14 @@ import { PROJ_CFG_KEY } from &#39;/@/enums/cacheEnum&#39;;
8 8  
9 9 import projectSetting from '/@/settings/projectSetting';
10 10 import { getLocal } from '/@/utils/helper/persistent';
11   -import {
12   - updateGrayMode,
13   - updateColorWeak,
14   - updateHeaderBgColor,
15   - updateSidebarBgColor,
16   -} from '/@/logics/theme';
  11 +import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
  12 +import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
  13 +import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
  14 +import { changeTheme } from '/@/logics/theme';
17 15  
18 16 import { appStore } from '/@/store/modules/app';
19 17 import { deepMerge } from '/@/utils';
  18 +import { primaryColor } from '../../build/config/themeConfig';
20 19  
21 20 // Initial project configuration
22 21 export function initAppConfigStore() {
... ... @@ -26,16 +25,13 @@ export function initAppConfigStore() {
26 25 const {
27 26 colorWeak,
28 27 grayMode,
  28 + themeColor,
29 29 headerSetting: { bgColor: headerBgColor } = {},
30 30 menuSetting: { bgColor } = {},
31 31 } = projCfg;
32   - // if (
33   - // themeColor !== primaryColor &&
34   - // themeColor &&
35   - // process.env.VUE_APP_USE_THEME_REPLACER !== 'TRUE'
36   - // ) {
37   - // updateTheme(themeColor);
38   - // }
  32 + if (themeColor && themeColor !== primaryColor) {
  33 + changeTheme(themeColor);
  34 + }
39 35 headerBgColor && updateHeaderBgColor(headerBgColor);
40 36 bgColor && updateSidebarBgColor(bgColor);
41 37 grayMode && updateGrayMode(grayMode);
... ...
src/logics/theme/index.ts
  View file @3d1681e
1   -import { isHexColor, colorIsDark, lighten, darken } from '/@/utils/color';
2   -import { appStore } from '/@/store/modules/app';
3   -import { ThemeEnum } from '/@/enums/appEnum';
  1 +import { getThemeColors, ThemeMode, generateColors } from '../../../build/config/themeConfig';
4 2  
5   -const HEADER_BG_COLOR_VAR = '--header-bg-color';
6   -const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
7   -const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
  3 +import { replaceStyleVariables } from 'vite-plugin-theme/es/client';
  4 +import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme/es/colorUtils';
8 5  
9   -const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
10   -const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
11   -const SIDER_LIGHTEN_1_BG_COLOR = '--sider-dark-lighten-1-bg-color';
12   -const SIDER_LIGHTEN_2_BG_COLOR = '--sider-dark-lighten-2-bg-color';
13   -
14   -export function setCssVar(prop: string, val: any, dom = document.documentElement) {
15   - dom.style.setProperty(prop, val);
16   -}
17   -
18   -function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
19   - const targetEl = target || document.body;
20   - let { className } = targetEl;
21   - className = className.replace(clsName, '');
22   - targetEl.className = flag ? `${className} ${clsName} ` : className;
23   -}
24   -
25   -/**
26   - * Change the status of the project's color weakness mode
27   - * @param colorWeak
28   - */
29   -export const updateColorWeak = (colorWeak: boolean) => {
30   - toggleClass(colorWeak, 'color-weak', document.documentElement);
31   -};
32   -
33   -/**
34   - * Change project gray mode status
35   - * @param gray
36   - */
37   -export const updateGrayMode = (gray: boolean) => {
38   - toggleClass(gray, 'gray-mode', document.documentElement);
39   -};
40   -
41   -/**
42   - * Change the background color of the top header
43   - * @param color
44   - */
45   -export function updateHeaderBgColor(color: string) {
46   - if (!isHexColor(color)) return;
47   - // bg color
48   - setCssVar(HEADER_BG_COLOR_VAR, color);
49   -
50   - // hover color
51   - const hoverColor = lighten(color, 6);
52   - setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
53   - setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
54   -
55   - // Determine the depth of the color value and automatically switch the theme
56   - const isDark = colorIsDark(color);
57   -
58   - appStore.commitProjectConfigState({
59   - headerSetting: {
60   - theme: isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT,
61   - },
  6 +export async function changeTheme(color: string, theme?: ThemeMode) {
  7 + const colors = generateColors({
  8 + mixDarken,
  9 + mixLighten,
  10 + tinycolor,
  11 + color,
62 12 });
63   -}
64   -
65   -/**
66   - * Change the background color of the left menu
67   - * @param color bg color
68   - */
69   -export function updateSidebarBgColor(color: string) {
70   - if (!isHexColor(color)) return;
71   -
72   - setCssVar(SIDER_DARK_BG_COLOR, color);
73   - setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color, 6));
74   - setCssVar(SIDER_LIGHTEN_1_BG_COLOR, lighten(color, 5));
75   - setCssVar(SIDER_LIGHTEN_2_BG_COLOR, lighten(color, 8));
76   -
77   - // only #ffffff is light
78   - // Only when the background color is #fff, the theme of the menu will be changed to light
79   - const isLight = ['#fff', '#ffffff'].includes(color.toLowerCase());
80 13  
81   - appStore.commitProjectConfigState({
82   - menuSetting: {
83   - theme: isLight ? ThemeEnum.LIGHT : ThemeEnum.DARK,
84   - },
  14 + return await replaceStyleVariables({
  15 + colorVariables: [...getThemeColors(color, theme), ...colors],
85 16 });
86 17 }
... ...
src/logics/theme/updateBackground.ts 0 → 100644
  View file @3d1681e
  1 +import { isHexColor, colorIsDark, lighten, darken } from '/@/utils/color';
  2 +import { appStore } from '/@/store/modules/app';
  3 +import { ThemeEnum } from '/@/enums/appEnum';
  4 +import { setCssVar } from './util';
  5 +
  6 +const HEADER_BG_COLOR_VAR = '--header-bg-color';
  7 +const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
  8 +const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
  9 +
  10 +const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
  11 +const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
  12 +const SIDER_LIGHTEN_1_BG_COLOR = '--sider-dark-lighten-1-bg-color';
  13 +const SIDER_LIGHTEN_2_BG_COLOR = '--sider-dark-lighten-2-bg-color';
  14 +
  15 +/**
  16 + * Change the background color of the top header
  17 + * @param color
  18 + */
  19 +export function updateHeaderBgColor(color: string) {
  20 + if (!isHexColor(color)) return;
  21 + // bg color
  22 + setCssVar(HEADER_BG_COLOR_VAR, color);
  23 +
  24 + // hover color
  25 + const hoverColor = lighten(color, 6);
  26 + setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
  27 + setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
  28 +
  29 + // Determine the depth of the color value and automatically switch the theme
  30 + const isDark = colorIsDark(color);
  31 +
  32 + appStore.commitProjectConfigState({
  33 + headerSetting: {
  34 + theme: isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT,
  35 + },
  36 + });
  37 +}
  38 +
  39 +/**
  40 + * Change the background color of the left menu
  41 + * @param color bg color
  42 + */
  43 +export function updateSidebarBgColor(color: string) {
  44 + if (!isHexColor(color)) return;
  45 +
  46 + setCssVar(SIDER_DARK_BG_COLOR, color);
  47 + setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color, 6));
  48 + setCssVar(SIDER_LIGHTEN_1_BG_COLOR, lighten(color, 5));
  49 + setCssVar(SIDER_LIGHTEN_2_BG_COLOR, lighten(color, 8));
  50 +
  51 + // only #ffffff is light
  52 + // Only when the background color is #fff, the theme of the menu will be changed to light
  53 + const isLight = ['#fff', '#ffffff'].includes(color.toLowerCase());
  54 +
  55 + appStore.commitProjectConfigState({
  56 + menuSetting: {
  57 + theme: isLight ? ThemeEnum.LIGHT : ThemeEnum.DARK,
  58 + },
  59 + });
  60 +}
... ...
src/logics/theme/updateColorWeak.ts 0 → 100644
  View file @3d1681e
  1 +import { toggleClass } from './util';
  2 +
  3 +/**
  4 + * Change the status of the project's color weakness mode
  5 + * @param colorWeak
  6 + */
  7 +export function updateColorWeak(colorWeak: boolean) {
  8 + toggleClass(colorWeak, 'color-weak', document.documentElement);
  9 +}
... ...
src/logics/theme/updateGrayMode.ts 0 → 100644
  View file @3d1681e
  1 +import { toggleClass } from './util';
  2 +
  3 +/**
  4 + * Change project gray mode status
  5 + * @param gray
  6 + */
  7 +export function updateGrayMode(gray: boolean) {
  8 + toggleClass(gray, 'gray-mode', document.documentElement);
  9 +}
... ...
src/logics/theme/util.ts 0 → 100644
  View file @3d1681e
  1 +const docEle = document.documentElement;
  2 +export function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
  3 + const targetEl = target || document.body;
  4 + let { className } = targetEl;
  5 + className = className.replace(clsName, '');
  6 + targetEl.className = flag ? `${className} ${clsName} ` : className;
  7 +}
  8 +
  9 +export function setCssVar(prop: string, val: any, dom = docEle) {
  10 + dom.style.setProperty(prop, val);
  11 +}
... ...
src/settings/designSetting.ts
  View file @3d1681e
... ... @@ -3,14 +3,24 @@ export default {
3 3 };
4 4  
5 5 // header preset color
  6 +export const APP_PRESET_COLOR_LIST: string[] = [
  7 + '#0084f4',
  8 + '#009688',
  9 + '#536dfe',
  10 + '#ff5c93',
  11 + '#ee4f12',
  12 + '#0096c7',
  13 + '#9c27b0',
  14 + '#ff9800',
  15 +];
  16 +
  17 +// header preset color
6 18 export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
7 19 '#ffffff',
8 20 '#009688',
9 21 '#5172DC',
10   - '#1E9FFF',
11 22 '#018ffb',
12 23 '#409eff',
13   - '#4e73df',
14 24 '#e74c3c',
15 25 '#24292e',
16 26 '#394664',
... ...
src/settings/projectSetting.ts
  View file @3d1681e
... ... @@ -3,7 +3,7 @@ import type { ProjectConfig } from &#39;/@/types/config&#39;;
3 3 import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
4 4 import { CacheTypeEnum } from '/@/enums/cacheEnum';
5 5 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
6   -import { primaryColor } from '../../build/config/lessModifyVars';
  6 +import { primaryColor, themeMode } from '../../build/config/themeConfig';
7 7 import { isProdMode } from '/@/utils/env';
8 8  
9 9 // ! You need to clear the browser cache after the change
... ... @@ -20,6 +20,8 @@ const setting: ProjectConfig = {
20 20 // color
21 21 // TODO Theme color
22 22 themeColor: primaryColor,
  23 + // TODO dark theme
  24 + themeMode: themeMode,
23 25  
24 26 // Website gray mode, open for possible mourning dates
25 27 grayMode: false,
... ...
src/types/config.d.ts
  View file @3d1681e
... ... @@ -2,6 +2,7 @@ import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from &#39;
2 2 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
3 3 import { CacheTypeEnum } from '/@/enums/cacheEnum';
4 4 import type { LocaleType } from '/@/locales/types';
  5 +import { ThemeMode } from '../../build/config/lessModifyVars';
5 6  
6 7 export interface MenuSetting {
7 8 bgColor: string;
... ... @@ -95,6 +96,7 @@ export interface ProjectConfig {
95 96 colorWeak: boolean;
96 97 // 主题色
97 98 themeColor: string;
  99 + themeMode: ThemeMode;
98 100 // 全屏显示主界面,不显示菜单,及顶部
99 101 fullContent: boolean;
100 102 // 区域宽度
... ...
src/types/vue-app-env.d.ts
  View file @3d1681e
... ... @@ -3,3 +3,23 @@ declare module &#39;*.vue&#39; {
3 3 const Component: ReturnType<typeof defineComponent>;
4 4 export default Component;
5 5 }
  6 +
  7 +import type { ComponentRenderProxy, VNode } from 'vue';
  8 +
  9 +declare global {
  10 + namespace JSX {
  11 + // tslint:disable no-empty-interface
  12 + type Element = VNode;
  13 + // tslint:disable no-empty-interface
  14 + type ElementClass = ComponentRenderProxy;
  15 + interface ElementAttributesProperty {
  16 + $props: any;
  17 + }
  18 + interface IntrinsicElements {
  19 + [elem: string]: any;
  20 + }
  21 + interface IntrinsicAttributes {
  22 + [elem: string]: any;
  23 + }
  24 + }
  25 +}
... ...
vite.config.ts
  View file @3d1681e
... ... @@ -6,7 +6,7 @@ import legacy from &#39;@vitejs/plugin-legacy&#39;;
6 6  
7 7 import { loadEnv } from 'vite';
8 8  
9   -import { modifyVars } from './build/config/lessModifyVars';
  9 +import { generateModifyVars } from './build/config/themeConfig';
10 10 import { createProxy } from './build/vite/proxy';
11 11  
12 12 import { wrapperEnv } from './build/utils';
... ... @@ -67,7 +67,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
67 67 modifyVars: {
68 68 // reference: Avoid repeated references
69 69 hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
70   - ...modifyVars,
  70 + ...generateModifyVars(),
71 71 },
72 72 javascriptEnabled: true,
73 73 },
... ...
yarn.lock
  View file @3d1681e
... ... @@ -1112,10 +1112,10 @@
1112 1112 dependencies:
1113 1113 cross-fetch "^3.0.6"
1114 1114  
1115   -"@iconify/json@^1.1.294":
1116   - version "1.1.294"
1117   - resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.294.tgz#2696352e8548c3cec9084213633b008ae0941702"
1118   - integrity sha512-4h+jUC2ZAtUHScR3XzbhtCyo1wExQsnokILHWqvzeTogUk/8c1jdINQHYBMq8tWdGBokvoAuPttsR1Ldaw50bg==
  1115 +"@iconify/json@^1.1.296":
  1116 + version "1.1.296"
  1117 + resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.296.tgz#470ec5ecae6467abc68c20ebf6d20e47e9f87e9b"
  1118 + integrity sha512-xvvph36NsOmKgoZCQcLfzImTBuUJyyzIsDJUMEdP6TpD6UnI2/kaSj8/C4epq060xxMLeL0SG64yFEnR1HZdxw==
1119 1119  
1120 1120 "@intlify/core-base@9.0.0-beta.16":
1121 1121 version "9.0.0-beta.16"
... ... @@ -1649,6 +1649,11 @@
1649 1649 resolved "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.6.tgz#98725ae08f1dfe28b8da0fdf302c417f5ff043c0"
1650 1650 integrity sha512-QRz8Z+uw2Y4Gwrtxw8hD782zzuxxugdcq8X/FkPsXUa1kfslhGzy13+4HugO9FXNo+jlWVcE6DYmmegniIQ30A==
1651 1651  
  1652 +"@types/tinycolor2@^1.4.2":
  1653 + version "1.4.2"
  1654 + resolved "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
  1655 + integrity sha512-PeHg/AtdW6aaIO2a+98Xj7rWY4KC1E6yOy7AFknJQ7VXUGNrMlyxDFxJo7HqLtjQms/ZhhQX52mLVW/EX3JGOw==
  1656 +
1652 1657 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
1653 1658 version "2.0.3"
1654 1659 resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
... ... @@ -1676,13 +1681,13 @@
1676 1681 resolved "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609"
1677 1682 integrity sha512-GQLOT+SN20a+AI51y3fAimhyTF4Y0RG+YP3gf91OibIZ7CJmPFgoZi+ZR5a+vRbS01LbQosITWum4ATmJ1Z6Pg==
1678 1683  
1679   -"@typescript-eslint/eslint-plugin@^4.14.1":
1680   - version "4.14.1"
1681   - resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.14.1.tgz#22dd301ce228aaab3416b14ead10b1db3e7d3180"
1682   - integrity sha512-5JriGbYhtqMS1kRcZTQxndz1lKMwwEXKbwZbkUZNnp6MJX0+OVXnG0kOlBZP4LUAxEyzu3cs+EXd/97MJXsGfw==
  1684 +"@typescript-eslint/eslint-plugin@^4.14.2":
  1685 + version "4.14.2"
  1686 + resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.14.2.tgz#47a15803cfab89580b96933d348c2721f3d2f6fe"
  1687 + integrity sha512-uMGfG7GFYK/nYutK/iqYJv6K/Xuog/vrRRZX9aEP4Zv1jsYXuvFUMDFLhUnc8WFv3D2R5QhNQL3VYKmvLS5zsQ==
1683 1688 dependencies:
1684   - "@typescript-eslint/experimental-utils" "4.14.1"
1685   - "@typescript-eslint/scope-manager" "4.14.1"
  1689 + "@typescript-eslint/experimental-utils" "4.14.2"
  1690 + "@typescript-eslint/scope-manager" "4.14.2"
1686 1691 debug "^4.1.1"
1687 1692 functional-red-black-tree "^1.0.1"
1688 1693 lodash "^4.17.15"
... ... @@ -1690,48 +1695,48 @@
1690 1695 semver "^7.3.2"
1691 1696 tsutils "^3.17.1"
1692 1697  
1693   -"@typescript-eslint/experimental-utils@4.14.1":
1694   - version "4.14.1"
1695   - resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.14.1.tgz#a5c945cb24dabb96747180e1cfc8487f8066f471"
1696   - integrity sha512-2CuHWOJwvpw0LofbyG5gvYjEyoJeSvVH2PnfUQSn0KQr4v8Dql2pr43ohmx4fdPQ/eVoTSFjTi/bsGEXl/zUUQ==
  1698 +"@typescript-eslint/experimental-utils@4.14.2":
  1699 + version "4.14.2"
  1700 + resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.14.2.tgz#9df35049d1d36b6cbaba534d703648b9e1f05cbb"
  1701 + integrity sha512-mV9pmET4C2y2WlyHmD+Iun8SAEqkLahHGBkGqDVslHkmoj3VnxnGP4ANlwuxxfq1BsKdl/MPieDbohCEQgKrwA==
1697 1702 dependencies:
1698 1703 "@types/json-schema" "^7.0.3"
1699   - "@typescript-eslint/scope-manager" "4.14.1"
1700   - "@typescript-eslint/types" "4.14.1"
1701   - "@typescript-eslint/typescript-estree" "4.14.1"
  1704 + "@typescript-eslint/scope-manager" "4.14.2"
  1705 + "@typescript-eslint/types" "4.14.2"
  1706 + "@typescript-eslint/typescript-estree" "4.14.2"
1702 1707 eslint-scope "^5.0.0"
1703 1708 eslint-utils "^2.0.0"
1704 1709  
1705   -"@typescript-eslint/parser@^4.14.1":
1706   - version "4.14.1"
1707   - resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.14.1.tgz#3bd6c24710cd557d8446625284bcc9c6d52817c6"
1708   - integrity sha512-mL3+gU18g9JPsHZuKMZ8Z0Ss9YP1S5xYZ7n68Z98GnPq02pYNQuRXL85b9GYhl6jpdvUc45Km7hAl71vybjUmw==
  1710 +"@typescript-eslint/parser@^4.14.2":
  1711 + version "4.14.2"
  1712 + resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.14.2.tgz#31e216e4baab678a56e539f9db9862e2542c98d0"
  1713 + integrity sha512-ipqSP6EuUsMu3E10EZIApOJgWSpcNXeKZaFeNKQyzqxnQl8eQCbV+TSNsl+s2GViX2d18m1rq3CWgnpOxDPgHg==
1709 1714 dependencies:
1710   - "@typescript-eslint/scope-manager" "4.14.1"
1711   - "@typescript-eslint/types" "4.14.1"
1712   - "@typescript-eslint/typescript-estree" "4.14.1"
  1715 + "@typescript-eslint/scope-manager" "4.14.2"
  1716 + "@typescript-eslint/types" "4.14.2"
  1717 + "@typescript-eslint/typescript-estree" "4.14.2"
1713 1718 debug "^4.1.1"
1714 1719  
1715   -"@typescript-eslint/scope-manager@4.14.1":
1716   - version "4.14.1"
1717   - resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.14.1.tgz#8444534254c6f370e9aa974f035ced7fe713ce02"
1718   - integrity sha512-F4bjJcSqXqHnC9JGUlnqSa3fC2YH5zTtmACS1Hk+WX/nFB0guuynVK5ev35D4XZbdKjulXBAQMyRr216kmxghw==
  1720 +"@typescript-eslint/scope-manager@4.14.2":
  1721 + version "4.14.2"
  1722 + resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.14.2.tgz#64cbc9ca64b60069aae0c060b2bf81163243b266"
  1723 + integrity sha512-cuV9wMrzKm6yIuV48aTPfIeqErt5xceTheAgk70N1V4/2Ecj+fhl34iro/vIssJlb7XtzcaD07hWk7Jk0nKghg==
1719 1724 dependencies:
1720   - "@typescript-eslint/types" "4.14.1"
1721   - "@typescript-eslint/visitor-keys" "4.14.1"
  1725 + "@typescript-eslint/types" "4.14.2"
  1726 + "@typescript-eslint/visitor-keys" "4.14.2"
1722 1727  
1723   -"@typescript-eslint/types@4.14.1":
1724   - version "4.14.1"
1725   - resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.14.1.tgz#b3d2eb91dafd0fd8b3fce7c61512ac66bd0364aa"
1726   - integrity sha512-SkhzHdI/AllAgQSxXM89XwS1Tkic7csPdndUuTKabEwRcEfR8uQ/iPA3Dgio1rqsV3jtqZhY0QQni8rLswJM2w==
  1728 +"@typescript-eslint/types@4.14.2":
  1729 + version "4.14.2"
  1730 + resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.14.2.tgz#d96da62be22dc9dc6a06647f3633815350fb3174"
  1731 + integrity sha512-LltxawRW6wXy4Gck6ZKlBD05tCHQUj4KLn4iR69IyRiDHX3d3NCAhO+ix5OR2Q+q9bjCrHE/HKt+riZkd1At8Q==
1727 1732  
1728   -"@typescript-eslint/typescript-estree@4.14.1":
1729   - version "4.14.1"
1730   - resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.14.1.tgz#20d3b8c8e3cdc8f764bdd5e5b0606dd83da6075b"
1731   - integrity sha512-M8+7MbzKC1PvJIA8kR2sSBnex8bsR5auatLCnVlNTJczmJgqRn8M+sAlQfkEq7M4IY3WmaNJ+LJjPVRrREVSHQ==
  1733 +"@typescript-eslint/typescript-estree@4.14.2":
  1734 + version "4.14.2"
  1735 + resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.14.2.tgz#9c5ebd8cae4d7b014f890acd81e8e17f309c9df9"
  1736 + integrity sha512-ESiFl8afXxt1dNj8ENEZT12p+jl9PqRur+Y19m0Z/SPikGL6rqq4e7Me60SU9a2M28uz48/8yct97VQYaGl0Vg==
1732 1737 dependencies:
1733   - "@typescript-eslint/types" "4.14.1"
1734   - "@typescript-eslint/visitor-keys" "4.14.1"
  1738 + "@typescript-eslint/types" "4.14.2"
  1739 + "@typescript-eslint/visitor-keys" "4.14.2"
1735 1740 debug "^4.1.1"
1736 1741 globby "^11.0.1"
1737 1742 is-glob "^4.0.1"
... ... @@ -1739,18 +1744,18 @@
1739 1744 semver "^7.3.2"
1740 1745 tsutils "^3.17.1"
1741 1746  
1742   -"@typescript-eslint/visitor-keys@4.14.1":
1743   - version "4.14.1"
1744   - resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.14.1.tgz#e93c2ff27f47ee477a929b970ca89d60a117da91"
1745   - integrity sha512-TAblbDXOI7bd0C/9PE1G+AFo7R5uc+ty1ArDoxmrC1ah61Hn6shURKy7gLdRb1qKJmjHkqu5Oq+e4Kt0jwf1IA==
  1747 +"@typescript-eslint/visitor-keys@4.14.2":
  1748 + version "4.14.2"
  1749 + resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.14.2.tgz#997cbe2cb0690e1f384a833f64794e98727c70c6"
  1750 + integrity sha512-KBB+xLBxnBdTENs/rUgeUKO0UkPBRs2vD09oMRRIkj5BEN8PX1ToXV532desXfpQnZsYTyLLviS7JrPhdL154w==
1746 1751 dependencies:
1747   - "@typescript-eslint/types" "4.14.1"
  1752 + "@typescript-eslint/types" "4.14.2"
1748 1753 eslint-visitor-keys "^2.0.0"
1749 1754  
1750   -"@vitejs/plugin-legacy@^1.2.2":
1751   - version "1.2.2"
1752   - resolved "https://registry.npmjs.org/@vitejs/plugin-legacy/-/plugin-legacy-1.2.2.tgz#65039ca35be1542b5ad612b54641da5a89d7687f"
1753   - integrity sha512-ec3hvD4OrQusH42ERrTtjOmeBoGmVWtwg7mVMvvlWkR7wUwZSnr8J6HYYynmGUaBcC95+3xm6bRks7sh2DKq+w==
  1755 +"@vitejs/plugin-legacy@^1.2.3":
  1756 + version "1.2.3"
  1757 + resolved "https://registry.npmjs.org/@vitejs/plugin-legacy/-/plugin-legacy-1.2.3.tgz#1007033b0a328e5c0d8d21683383dc40d8fed6a3"
  1758 + integrity sha512-DOceNUiGkN/Iv3dFJGDwJMdIFv4N+5vDt96MdBFOFMlktt1fumOuNJvyCBE8TKc0qC0K5YSxUXpfKeKZhkkyLQ==
1754 1759 dependencies:
1755 1760 "@babel/standalone" "^7.12.12"
1756 1761 core-js "^3.8.2"
... ... @@ -1768,10 +1773,10 @@
1768 1773 "@vue/babel-plugin-jsx" "^1.0.1"
1769 1774 hash-sum "^2.0.0"
1770 1775  
1771   -"@vitejs/plugin-vue@^1.1.3":
1772   - version "1.1.3"
1773   - resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.3.tgz#94c3822d3c2425ca240b86437b8a8c92f29e22b1"
1774   - integrity sha512-RjqnMVIGoo+4dyjm8/5sAHkcbPNhFuFyQWO8OeaJMq6HBGqULHphf6J2UvnEi8TOmjfSFHJl1mzls3DtBvvz9w==
  1776 +"@vitejs/plugin-vue@^1.1.4":
  1777 + version "1.1.4"
  1778 + resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.4.tgz#1dd388519b75439b7733601b55238ca691864796"
  1779 + integrity sha512-cUDILd++9jdhdjpuhgJofQqOabOKe+kTWTE2HQY2PBHEUO2fgwTurLE0cJg9UcIo1x4lHfsp+59S9TBCHgTZkw==
1775 1780  
1776 1781 "@vue/babel-helper-vue-transform-on@^1.0.2":
1777 1782 version "1.0.2"
... ... @@ -1985,18 +1990,18 @@
1985 1990 vscode-languageserver-textdocument "^1.0.1"
1986 1991 vscode-uri "^2.1.2"
1987 1992  
1988   -"@vueuse/core@^4.0.11":
1989   - version "4.0.11"
1990   - resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.0.11.tgz#783c824d18296f82a2c28756e67b129b22a3e9f3"
1991   - integrity sha512-wvfcSqMZLo0568T2rIIS4QtCAQsNz+vuoqCLgwuVxoBMr9WrMJWJEkdIxoH5+hj/YXSWYFvwTQdBto4a5S1Iuw==
  1993 +"@vueuse/core@^4.0.12":
  1994 + version "4.0.12"
  1995 + resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.0.12.tgz#e6273feee1373c16d408b94be9382fa945c494a8"
  1996 + integrity sha512-0pAEWyUP6HAqJ6Qzbybfpa8fNVdERMizrgjQI8vRe8+Fu5Ge5a8M2aLYCrdrLNxV6DsEZJ0bUFeTWb3aUnbxUA==
1992 1997 dependencies:
1993   - "@vueuse/shared" "4.0.11"
  1998 + "@vueuse/shared" "4.0.12"
1994 1999 vue-demi latest
1995 2000  
1996   -"@vueuse/shared@4.0.11":
1997   - version "4.0.11"
1998   - resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.0.11.tgz#3188b6a9854b7db68c53a8eb3fcbb9a8adbf087b"
1999   - integrity sha512-r6Hm35lsByliKtIr6/fuqo+kpbb6324nGEgu0KLMApeLfOutQKXYEAuGD81cnXAPKTHunRO0dNH8+GGRp5uPxg==
  2001 +"@vueuse/shared@4.0.12":
  2002 + version "4.0.12"
  2003 + resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.0.12.tgz#fe42215a0cc60afcda2dcbfbdd73a4dd780647ec"
  2004 + integrity sha512-t5Amxc3BIwi+M2mI0iy9yHKe5plYJUMbxpIBuMDR953J5s12ewRe3s8MLvQdlhAiNN8FTh9CBKU+mfdNgbWauw==
2000 2005 dependencies:
2001 2006 vue-demi latest
2002 2007  
... ... @@ -2148,10 +2153,10 @@ anymatch@~3.1.1:
2148 2153 normalize-path "^3.0.0"
2149 2154 picomatch "^2.0.4"
2150 2155  
2151   -apexcharts@^3.23.1:
2152   - version "3.23.1"
2153   - resolved "https://registry.npmjs.org/apexcharts/-/apexcharts-3.23.1.tgz#6d63ae2a0b5cbb54644fc0147a228ece57afa8dc"
2154   - integrity sha512-7fRpquXp725BUew5OO1mJWk16/IJPCUl0l8SjhISnAhAtbTaM9PnXPSmN2BvKO4RcT457CzMM7MCG5UokiTwcA==
  2156 +apexcharts@^3.24.0:
  2157 + version "3.24.0"
  2158 + resolved "https://registry.npmjs.org/apexcharts/-/apexcharts-3.24.0.tgz#0fc513e940448524ae9702d39ec287567522d1eb"
  2159 + integrity sha512-iT6czJCIVrmAtrcO90MZTQCvC+xi6R6Acf0jNH/d40FVTtCfcqECuKIh5iAMyOTtgUb7+fQ8rbadH2bm1kbL9Q==
2155 2160 dependencies:
2156 2161 svg.draggable.js "^2.2.2"
2157 2162 svg.easing.js "^2.0.0"
... ... @@ -3460,10 +3465,10 @@ es-module-lexer@^0.3.26:
3460 3465 resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b"
3461 3466 integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==
3462 3467  
3463   -esbuild-register@^1.2.1:
3464   - version "1.2.1"
3465   - resolved "https://registry.npmjs.org/esbuild-register/-/esbuild-register-1.2.1.tgz#a430decedd7cb83ecf05141c7a7050b990724d41"
3466   - integrity sha512-Pg00Woeg+2hpRyZkxSjvBUIabQ6DZIdCUgeBCzWgYfiFCnetQF8Cmrr5/+M/rMJCP/trhNlV0Kc4KnbYssIrFg==
  3468 +esbuild-register@^2.0.0:
  3469 + version "2.0.0"
  3470 + resolved "https://registry.npmjs.org/esbuild-register/-/esbuild-register-2.0.0.tgz#579a6eff4e5713a318602b4d305bcb6f8c5b08f9"
  3471 + integrity sha512-98i1+7OnCURCbKaWw5wnY05e4v7uknFEER7LtVxi/lCs8U+sl6/LnITvfeoDLrsqxlA3O6BjxK8QqsirfYULfA==
3467 3472 dependencies:
3468 3473 joycon "^2.2.5"
3469 3474 pirates "^4.0.1"
... ... @@ -3475,6 +3480,11 @@ esbuild@^0.8.29, esbuild@^0.8.34:
3475 3480 resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.34.tgz#16b4ac58f74c821d2c5a8c2f0585ca96a38ab4e6"
3476 3481 integrity sha512-tnr0V1ooakYr1aRLXQLzCn2GVG1kBTW3FWpRyC+NgrR3ntsouVpJOlTOV0BS4YLATx3/c+x3h/uBq9lWJlUAtQ==
3477 3482  
  3483 +esbuild@^0.8.37:
  3484 + version "0.8.38"
  3485 + resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.38.tgz#04dc395e15c77bbc9d6798e9b31275546bcf7b9a"
  3486 + integrity sha512-wSunJl8ujgBs9eVGubc8Y6fn/DkDjNyfQBVOFTY1E7sRxr8KTjmqyLIiE0M3Z4CjMnCu/rttCugwnOzY+HiwIw==
  3487 +
3478 3488 escalade@^3.1.1:
3479 3489 version "3.1.1"
3480 3490 resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
... ... @@ -3537,10 +3547,10 @@ eslint-visitor-keys@^2.0.0:
3537 3547 resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
3538 3548 integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
3539 3549  
3540   -eslint@^7.18.0:
3541   - version "7.18.0"
3542   - resolved "https://registry.npmjs.org/eslint/-/eslint-7.18.0.tgz#7fdcd2f3715a41fe6295a16234bd69aed2c75e67"
3543   - integrity sha512-fbgTiE8BfUJZuBeq2Yi7J3RB3WGUQ9PNuNbmgi6jt9Iv8qrkxfy19Ds3OpL1Pm7zg3BtTVhvcUZbIRQ0wmSjAQ==
  3550 +eslint@^7.19.0:
  3551 + version "7.19.0"
  3552 + resolved "https://registry.npmjs.org/eslint/-/eslint-7.19.0.tgz#6719621b196b5fad72e43387981314e5d0dc3f41"
  3553 + integrity sha512-CGlMgJY56JZ9ZSYhJuhow61lMPPjUzWmChFya71Z/jilVos7mR/jPgaEfVGgMBY5DshbKdG8Ezb8FDCHcoMEMg==
3544 3554 dependencies:
3545 3555 "@babel/code-frame" "^7.0.0"
3546 3556 "@eslint/eslintrc" "^0.3.0"
... ... @@ -3580,13 +3590,13 @@ eslint@^7.18.0:
3580 3590 text-table "^0.2.0"
3581 3591 v8-compile-cache "^2.0.3"
3582 3592  
3583   -esno@^0.4.0:
3584   - version "0.4.0"
3585   - resolved "https://registry.npmjs.org/esno/-/esno-0.4.0.tgz#3d5473e65895f3e917818b4b8e1a9465a4ce72a7"
3586   - integrity sha512-YBT1akVDWC+jIYgwwb2LjOQT0OuMU1ejWr1ygcO0FCqUfRjRSAIKgDEp9io7tnpbaedXIpGjgA9yFOuqvwEjAw==
  3593 +esno@^0.4.3:
  3594 + version "0.4.3"
  3595 + resolved "https://registry.npmjs.org/esno/-/esno-0.4.3.tgz#65b6c3a5bfd59b8bc75a910d370eae63fe60f3b6"
  3596 + integrity sha512-s8ZafYl7sK1nlwo5UROb0Q0kc28ou3ebcEgtfMNUEibPeqj4u6e9bkLCZf8Tbopg65vGhojEt7nI4lCWZTZpkw==
3587 3597 dependencies:
3588   - esbuild "^0.8.29"
3589   - esbuild-register "^1.2.1"
  3598 + esbuild "^0.8.37"
  3599 + esbuild-register "^2.0.0"
3590 3600  
3591 3601 espree@^6.2.1:
3592 3602 version "6.2.1"
... ... @@ -4928,10 +4938,10 @@ known-css-properties@^0.20.0:
4928 4938 resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.20.0.tgz#0570831661b47dd835293218381166090ff60e96"
4929 4939 integrity sha512-URvsjaA9ypfreqJ2/ylDr5MUERhJZ+DhguoWRr2xgS5C7aGCalXo+ewL+GixgKBfhT2vuL02nbIgNGqVWgTOYw==
4930 4940  
4931   -less@^4.1.0:
4932   - version "4.1.0"
4933   - resolved "https://registry.npmjs.org/less/-/less-4.1.0.tgz#a12708d1951239db1c9d7eaa405f1ebac9a75b8d"
4934   - integrity sha512-w1Ag/f34g7LwtQ/sMVSGWIyZx+gG9ZOAEtyxeX1fG75is6BMyC2lD5kG+1RueX7PkAvlQBm2Lf2aN2j0JbVr2A==
  4941 +less@^4.1.1:
  4942 + version "4.1.1"
  4943 + resolved "https://registry.npmjs.org/less/-/less-4.1.1.tgz#15bf253a9939791dc690888c3ff424f3e6c7edba"
  4944 + integrity sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==
4935 4945 dependencies:
4936 4946 copy-anything "^2.0.1"
4937 4947 parse-node-version "^1.0.1"
... ... @@ -7350,6 +7360,11 @@ through@2, &quot;through@&gt;=2.2.7 &lt;3&quot;, through@^2.3.6, through@^2.3.8:
7350 7360 resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
7351 7361 integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
7352 7362  
  7363 +tinycolor2@^1.4.2:
  7364 + version "1.4.2"
  7365 + resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
  7366 + integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
  7367 +
7353 7368 tmp@^0.0.33:
7354 7369 version "0.0.33"
7355 7370 resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
... ... @@ -7673,10 +7688,10 @@ validate-npm-package-license@^3.0.1:
7673 7688 spdx-correct "^3.0.0"
7674 7689 spdx-expression-parse "^3.0.0"
7675 7690  
7676   -vditor@^3.7.7:
7677   - version "3.7.7"
7678   - resolved "https://registry.npmjs.org/vditor/-/vditor-3.7.7.tgz#2baf65f3fb3a0743072dc880010cf2fd1a0b864a"
7679   - integrity sha512-Nk0I8PpGHpQe0Wb7odf63Www9GXC0fCR1Mw8PP1tNIJcv6O9OJ9FE2xIGjAwvOIqUoOtdSprzLS6HuCpgd7n2g==
  7691 +vditor@^3.8.0:
  7692 + version "3.8.0"
  7693 + resolved "https://registry.npmjs.org/vditor/-/vditor-3.8.0.tgz#1953172e38b7cc368406a5025f8ebb5a3fe7cf09"
  7694 + integrity sha512-H5/jhizdl05wDUYxqmOMwIbHKIAMf1bVLRz0FUyGRkZaQpmEyqN8P+BTtXijHaGDi19TM9nSVTLBBLfCq0QidA==
7680 7695 dependencies:
7681 7696 diff-match-patch "^1.0.5"
7682 7697  
... ... @@ -7733,10 +7748,10 @@ vite-plugin-purge-icons@^0.6.0:
7733 7748 "@purge-icons/generated" "^0.6.0"
7734 7749 rollup-plugin-purge-icons "^0.6.0"
7735 7750  
7736   -vite-plugin-pwa@^0.4.1:
7737   - version "0.4.1"
7738   - resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.1.tgz#eae03c4dd10cd51600c08fd1aaa179a92577c456"
7739   - integrity sha512-UvcdW93FT0+2dRSLasQtvJepBwXj+UTcvzBekca6YuVdn/MTdEX01J/QqPL+v3KUZBnNM2MAOFpLIkZ3wi9t8g==
  7751 +vite-plugin-pwa@^0.4.2:
  7752 + version "0.4.2"
  7753 + resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.2.tgz#b2e988147beb7bd2f42e88a98cb280a7d3739918"
  7754 + integrity sha512-zlKK45jBa7hxrVQlEIbdiIU3Eds2NEd6XT8noYPZha8GFRdB6Y6Izpnp7JYRHc+H6I4JHI3bmlwifOtjSFRrbA==
7740 7755 dependencies:
7741 7756 debug "^4.3.2"
7742 7757 fast-glob "^3.2.5"
... ... @@ -7753,10 +7768,20 @@ vite-plugin-style-import@^0.5.5:
7753 7768 es-module-lexer "^0.3.26"
7754 7769 magic-string "^0.25.7"
7755 7770  
7756   -vite@2.0.0-beta.59:
7757   - version "2.0.0-beta.59"
7758   - resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.59.tgz#e01a795aebedc0cb44d653c33b72ab7b831057ae"
7759   - integrity sha512-tlxEPFpVI1wV+vk+t/ypwBZfNmxKcorok8YF82MrQIqCDeRXnHvp33oWPIsRrO0V7UdnnlkKQOJJiIi3AIUFOA==
  7771 +vite-plugin-theme@0.3.2:
  7772 + version "0.3.2"
  7773 + resolved "https://registry.npmjs.org/vite-plugin-theme/-/vite-plugin-theme-0.3.2.tgz#6f101c0a5342aa29804b2b4c85a01b051b6b319b"
  7774 + integrity sha512-twEGKyddnsqRQVHHdvfc2AJVO+CZK3rmuqHIyzdJS5tEd1n8JxXlpGL4sH4hYwkwZVY8e+rN1ycUctEkG0Srqw==
  7775 + dependencies:
  7776 + "@types/tinycolor2" "^1.4.2"
  7777 + clean-css "^4.2.3"
  7778 + es-module-lexer "^0.3.26"
  7779 + tinycolor2 "^1.4.2"
  7780 +
  7781 +vite@2.0.0-beta.62:
  7782 + version "2.0.0-beta.62"
  7783 + resolved "https://registry.npmjs.org/vite/-/vite-2.0.0-beta.62.tgz#3227fc63ecd3d6fc67b1b95add68cdcde09844b2"
  7784 + integrity sha512-75RF5H/8Ta2UvTSjiK5EslyTkUTgRMgkeVRDHqlfDNAJUI8+gvXzhEdTpq2bsASjvnlSytBk+odtCxikEoibbg==
7760 7785 dependencies:
7761 7786 esbuild "^0.8.34"
7762 7787 postcss "^8.2.1"
... ... @@ -7811,13 +7836,20 @@ vue-router@^4.0.3:
7811 7836 resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
7812 7837 integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
7813 7838  
7814   -vue-types@^3.0.0, vue-types@^3.0.1:
  7839 +vue-types@^3.0.0:
7815 7840 version "3.0.1"
7816 7841 resolved "https://registry.npmjs.org/vue-types/-/vue-types-3.0.1.tgz#20e9baae8673de8093d0a989234695d08d544be0"
7817 7842 integrity sha512-UbvbzPu8DNzZRfMB1RDTFKBB6seMm80scMFdP+GkKaw00EugC3cjq9AtlS4y258vDkpAe9HfqbRO4cp63qVHXQ==
7818 7843 dependencies:
7819 7844 is-plain-object "3.0.1"
7820 7845  
  7846 +vue-types@^3.0.2:
  7847 + version "3.0.2"
  7848 + resolved "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz#ec16e05d412c038262fc1efa4ceb9647e7fb601d"
  7849 + integrity sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==
  7850 + dependencies:
  7851 + is-plain-object "3.0.1"
  7852 +
7821 7853 vue@^3.0.0, vue@^3.0.5:
7822 7854 version "3.0.5"
7823 7855 resolved "https://registry.npmjs.org/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"
... ... @@ -7832,10 +7864,10 @@ vuex-module-decorators@^1.0.1:
7832 7864 resolved "https://registry.npmjs.org/vuex-module-decorators/-/vuex-module-decorators-1.0.1.tgz#d34dafb5428a3636f1c26d3d014c15fc9659ccd0"
7833 7865 integrity sha512-FLWZsXV5XAtl/bcKUyQFpnSBtpc3wK/7zSdy9oKbyp71mZd4ut5y2zSd219wWW9OG7WUOlVwac4rXFFDVnq7ug==
7834 7866  
7835   -vuex@^4.0.0-rc.2:
7836   - version "4.0.0-rc.2"
7837   - resolved "https://registry.npmjs.org/vuex/-/vuex-4.0.0-rc.2.tgz#3681c84eb6f5171b039edaa17cc78105e20724f3"
7838   - integrity sha512-HCPzYGea1xL7fMpDoMiHKujC1Bi/HM9LS5ML0Kv55zQtZJvOl0Lq7eWvJoen+SI4Lf7p9V5AqcVsoLPXNBywjg==
  7867 +vuex@^4.0.0:
  7868 + version "4.0.0"
  7869 + resolved "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz#ac877aa76a9c45368c979471e461b520d38e6cf5"
  7870 + integrity sha512-56VPujlHscP5q/e7Jlpqc40sja4vOhC4uJD1llBCWolVI8ND4+VzisDVkUMl+z5y0MpIImW6HjhNc+ZvuizgOw==
7839 7871  
7840 7872 warning@^4.0.0:
7841 7873 version "4.0.3"
... ...