From 1f00dfbc7fd4d3f8fd7a0256850c269324916178 Mon Sep 17 00:00:00 2001 From: woeoio Date: Wed, 30 Oct 2024 14:08:35 +0800 Subject: [PATCH] refactor(utils): Configure theme using .env environment variables --- .env | 4 + src/store/modules/theme/shared.ts | 3 +- src/theme/settings.ts | 141 ++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+), 1 deletion(-) diff --git a/.env b/.env index ace03e36..f04e9df7 100644 --- a/.env +++ b/.env @@ -49,3 +49,7 @@ VITE_STORAGE_PREFIX=SOY_ # used to control whether the program automatically detects updates VITE_AUTOMATICALLY_DETECT_UPDATE=Y + +# VITE_THEME_SCHEME=dark +VITE_THEME_LAYOUT_MODE=horizontal +VITE_THEME_TAB_VISIBLE=false \ No newline at end of file diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts index 448c6992..15d250cc 100644 --- a/src/store/modules/theme/shared.ts +++ b/src/store/modules/theme/shared.ts @@ -1,6 +1,6 @@ import type { GlobalThemeOverrides } from 'naive-ui'; import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color'; -import { overrideThemeSettings, themeSettings } from '@/theme/settings'; +import { envThemeSettings, overrideThemeSettings, themeSettings } from '@/theme/settings'; import { themeVars } from '@/theme/vars'; import { toggleHtmlClass } from '@/utils/common'; import { localStg } from '@/utils/storage'; @@ -11,6 +11,7 @@ const DARK_CLASS = 'dark'; export function initThemeSettings() { const isProd = import.meta.env.PROD; + Object.assign(themeSettings, envThemeSettings); // if it is development mode, the theme settings will not be cached, by update `themeSettings` in `src/theme/settings.ts` to update theme settings if (!isProd) return themeSettings; diff --git a/src/theme/settings.ts b/src/theme/settings.ts index c23f1fae..8989acca 100644 --- a/src/theme/settings.ts +++ b/src/theme/settings.ts @@ -90,3 +90,144 @@ export const overrideThemeSettings: Partial = { text: 'SoybeanAdmin' } }; + +/** + * Configure theme using .env environment variables + * + * Add by woeoio@qq.com + */ +export const envThemeSettings: Partial = { + // Theme Scheme + themeScheme: import.meta.env.VITE_THEME_SCHEME || themeSettings.themeScheme, + + // Grayscale + grayscale: import.meta.env.VITE_THEME_GRAYSCALE + ? import.meta.env.VITE_THEME_GRAYSCALE === 'true' + : themeSettings.grayscale, + + // Recommend Color + recommendColor: import.meta.env.VITE_THEME_RECOMMEND_COLOR + ? import.meta.env.VITE_THEME_RECOMMEND_COLOR === 'true' + : themeSettings.recommendColor, + + // Theme Color + themeColor: import.meta.env.VITE_THEME_COLOR || themeSettings.themeColor, + + // Other Colors + otherColor: { + info: import.meta.env.VITE_THEME_COLOR_INFO || themeSettings.otherColor.info, + success: import.meta.env.VITE_THEME_COLOR_SUCCESS || themeSettings.otherColor.success, + warning: import.meta.env.VITE_THEME_COLOR_WARNING || themeSettings.otherColor.warning, + error: import.meta.env.VITE_THEME_COLOR_ERROR || themeSettings.otherColor.error + }, + + // Info Follow Primary + isInfoFollowPrimary: import.meta.env.VITE_THEME_INFO_FOLLOW_PRIMARY + ? import.meta.env.VITE_THEME_INFO_FOLLOW_PRIMARY === 'true' + : themeSettings.isInfoFollowPrimary, + + // Layout + layout: { + mode: import.meta.env.VITE_THEME_LAYOUT_MODE || themeSettings.layout.mode, + scrollMode: import.meta.env.VITE_THEME_SCROLL_MODE || themeSettings.layout.scrollMode + }, + + // Page Animation + page: { + animate: import.meta.env.VITE_THEME_PAGE_ANIMATE + ? import.meta.env.VITE_THEME_PAGE_ANIMATE === 'true' + : themeSettings.page.animate, + animateMode: import.meta.env.VITE_THEME_PAGE_ANIMATE_MODE || themeSettings.page.animateMode + }, + + // Header + header: { + height: Number(import.meta.env.VITE_THEME_HEADER_HEIGHT) || themeSettings.header.height, + breadcrumb: { + visible: import.meta.env.VITE_THEME_BREADCRUMB_VISIBLE + ? import.meta.env.VITE_THEME_BREADCRUMB_VISIBLE === 'true' + : themeSettings.header.breadcrumb.visible, + showIcon: import.meta.env.VITE_THEME_BREADCRUMB_SHOW_ICON + ? import.meta.env.VITE_THEME_BREADCRUMB_SHOW_ICON === 'true' + : themeSettings.header.breadcrumb.showIcon + } + }, + + // Tab + tab: { + visible: import.meta.env.VITE_THEME_TAB_VISIBLE + ? import.meta.env.VITE_THEME_TAB_VISIBLE === 'true' + : themeSettings.tab.visible, + cache: import.meta.env.VITE_THEME_TAB_CACHE + ? import.meta.env.VITE_THEME_TAB_CACHE === 'true' + : themeSettings.tab.cache, + height: Number(import.meta.env.VITE_THEME_TAB_HEIGHT) || themeSettings.tab.height, + mode: import.meta.env.VITE_THEME_TAB_MODE || themeSettings.tab.mode + }, + + // Fixed Header and Tab + fixedHeaderAndTab: import.meta.env.VITE_THEME_FIXED_HEADER_AND_TAB + ? import.meta.env.VITE_THEME_FIXED_HEADER_AND_TAB === 'true' + : themeSettings.fixedHeaderAndTab, + + // Sider + sider: { + inverted: import.meta.env.VITE_THEME_SIDER_INVERTED + ? import.meta.env.VITE_THEME_SIDER_INVERTED === 'true' + : themeSettings.sider.inverted, + width: Number(import.meta.env.VITE_THEME_SIDER_WIDTH) || themeSettings.sider.width, + collapsedWidth: Number(import.meta.env.VITE_THEME_SIDER_COLLAPSED_WIDTH) || themeSettings.sider.collapsedWidth, + mixWidth: Number(import.meta.env.VITE_THEME_SIDER_MIX_WIDTH) || themeSettings.sider.mixWidth, + mixCollapsedWidth: + Number(import.meta.env.VITE_THEME_SIDER_MIX_COLLAPSED_WIDTH) || themeSettings.sider.mixCollapsedWidth, + mixChildMenuWidth: + Number(import.meta.env.VITE_THEME_SIDER_MIX_CHILD_MENU_WIDTH) || themeSettings.sider.mixChildMenuWidth + }, + + // Footer + footer: { + visible: import.meta.env.VITE_THEME_FOOTER_VISIBLE + ? import.meta.env.VITE_THEME_FOOTER_VISIBLE === 'true' + : themeSettings.footer.visible, + fixed: import.meta.env.VITE_THEME_FOOTER_FIXED + ? import.meta.env.VITE_THEME_FOOTER_FIXED === 'true' + : themeSettings.footer.fixed, + height: Number(import.meta.env.VITE_THEME_FOOTER_HEIGHT) || themeSettings.footer.height, + right: import.meta.env.VITE_THEME_FOOTER_RIGHT + ? import.meta.env.VITE_THEME_FOOTER_RIGHT === 'true' + : themeSettings.footer.right + } +}; + +/** .env variables */ +// VITE_THEME_SCHEME=dark +// VITE_THEME_GRAYSCALE=true +// VITE_THEME_RECOMMEND_COLOR=true +// VITE_THEME_COLOR=#409EFF +// VITE_THEME_COLOR_INFO=#2080f0 +// VITE_THEME_COLOR_SUCCESS=#52c41a +// VITE_THEME_COLOR_WARNING=#faad14 +// VITE_THEME_COLOR_ERROR=#f5222d +// VITE_THEME_INFO_FOLLOW_PRIMARY=true +// VITE_THEME_LAYOUT_MODE=vertical +// VITE_THEME_SCROLL_MODE=content +// VITE_THEME_PAGE_ANIMATE=true +// VITE_THEME_PAGE_ANIMATE_MODE=fade-slide +// VITE_THEME_HEADER_HEIGHT=60 +// VITE_THEME_BREADCRUMB_VISIBLE=true +// VITE_THEME_BREADCRUMB_SHOW_ICON=true +// VITE_THEME_TAB_VISIBLE=false +// VITE_THEME_TAB_CACHE=true +// VITE_THEME_TAB_HEIGHT=44 +// VITE_THEME_TAB_MODE=chrome +// VITE_THEME_FIXED_HEADER_AND_TAB=true +// VITE_THEME_SIDER_INVERTED=false +// VITE_THEME_SIDER_WIDTH=220 +// VITE_THEME_SIDER_COLLAPSED_WIDTH=64 +// VITE_THEME_SIDER_MIX_WIDTH=90 +// VITE_THEME_SIDER_MIX_COLLAPSED_WIDTH=64 +// VITE_THEME_SIDER_MIX_CHILD_MENU_WIDTH=200 +// VITE_THEME_FOOTER_VISIBLE=true +// VITE_THEME_FOOTER_FIXED=false +// VITE_THEME_FOOTER_HEIGHT=48 +// VITE_THEME_FOOTER_RIGHT=true