From 37092974d37b2e661d4cbf9d27c89b5e99119cd7 Mon Sep 17 00:00:00 2001 From: Soybean Date: Sat, 22 Jan 2022 00:48:17 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E7=BC=93?= =?UTF-8?q?=E5=AD=98=E4=B8=BB=E9=A2=98=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/api/route.ts | 4 +-- public/resource/loading.js | 4 +-- src/interface/theme.ts | 2 ++ src/layouts/BasicLayout/index.vue | 1 + .../components/ThemeColorSelect/index.vue | 10 ++++-- .../src/components/LayoutContent.vue | 1 + src/package/SoybeanLayout/src/index.vue | 2 ++ src/settings/color.ts | 7 ++++ src/settings/theme.ts | 34 ++++++++++--------- src/store/modules/theme/helpers.ts | 21 +++++++++--- src/store/modules/theme/index.ts | 6 ++-- src/store/subscribe/theme.ts | 4 +-- src/utils/common/color.ts | 8 +++++ src/utils/common/index.ts | 1 + src/utils/common/theme.ts | 16 +++++++++ 15 files changed, 87 insertions(+), 34 deletions(-) create mode 100644 src/utils/common/theme.ts diff --git a/mock/api/route.ts b/mock/api/route.ts index 97650dd3c..925653f63 100644 --- a/mock/api/route.ts +++ b/mock/api/route.ts @@ -12,8 +12,7 @@ const routes: AuthRoute.Route[] = [ component: 'self', meta: { title: '分析页', - requiresAuth: true, - keepAlive: true + requiresAuth: true } }, { @@ -98,7 +97,6 @@ const routes: AuthRoute.Route[] = [ title: '关于', requiresAuth: true, singleLayout: 'basic', - keepAlive: true, permissions: ['super', 'admin', 'test'], icon: 'fluent:book-information-24-regular', order: 7 diff --git a/public/resource/loading.js b/public/resource/loading.js index 6530ba415..156f9dab4 100644 --- a/public/resource/loading.js +++ b/public/resource/loading.js @@ -34,8 +34,8 @@ function initSvgLogo(id) { function addThemeColorCssVars() { const key = '__THEME_COLOR__'; - const themeColor = '#1890ff'; - const cssVars = window.localStorage.getItem(key) || `--primary-color: ${themeColor}`; + const themeColor = window.localStorage.getItem(key) || '#1890ff'; + const cssVars = `--primary-color: ${themeColor}`; document.documentElement.style.cssText = cssVars; } diff --git a/src/interface/theme.ts b/src/interface/theme.ts index dc319a42f..2a40aa04e 100644 --- a/src/interface/theme.ts +++ b/src/interface/theme.ts @@ -13,6 +13,8 @@ export interface ThemeSetting { themeColorList: string[]; /** 其他颜色 */ otherColor: ThemeOtherColor; + /** 是否自定义info的颜色(默认取比主题色深一级的颜色) */ + isCustomizeInfoColor: boolean; /** 固定头部和多页签 */ fixedHeaderAndTab: boolean; /** 显示重载按钮 */ diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index bb851459c..49075b957 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -1,6 +1,7 @@ diff --git a/src/package/SoybeanLayout/src/components/LayoutContent.vue b/src/package/SoybeanLayout/src/components/LayoutContent.vue index 711a038a0..bd8978ef9 100644 --- a/src/package/SoybeanLayout/src/components/LayoutContent.vue +++ b/src/package/SoybeanLayout/src/components/LayoutContent.vue @@ -36,6 +36,7 @@ const style = computed(() => { diff --git a/src/package/SoybeanLayout/src/index.vue b/src/package/SoybeanLayout/src/index.vue index dec0c3a7b..76efc6dc6 100644 --- a/src/package/SoybeanLayout/src/index.vue +++ b/src/package/SoybeanLayout/src/index.vue @@ -17,6 +17,7 @@ v-bind="commonProps" :fixed="fixedHeaderAndTab" :z-index="tabZIndex" + :min-width="minWidth" :top="headerHeight" :height="tabHeight" :padding-left="siderWidth" @@ -46,6 +47,7 @@ v-bind="commonProps" :fixed="fixedFooter" :z-index="footerZIndex" + :min-width="minWidth" :height="footerHeight" :padding-left="siderWidth" :style="footerTransform" diff --git a/src/settings/color.ts b/src/settings/color.ts index 256e6dcf9..b14fbb7be 100644 --- a/src/settings/color.ts +++ b/src/settings/color.ts @@ -11,3 +11,10 @@ interface TraditionColor { /** 中国传统颜色 */ export const traditionColors = colorJson as TraditionColor[]; + +export function isInTraditionColors(color: string) { + return traditionColors.some(item => { + const flag = item.data.some(v => v.color === color); + return flag; + }); +} diff --git a/src/settings/theme.ts b/src/settings/theme.ts index b47b04373..a10583a84 100644 --- a/src/settings/theme.ts +++ b/src/settings/theme.ts @@ -3,28 +3,29 @@ import type { ThemeSetting } from '@/interface'; const themeColorList = [ '#1890ff', - '#007AFF', - '#2d8cf0', '#409EFF', - '#536dfe', + '#2d8cf0', + '#007AFF', + '#5ac8fa', '#5856D6', + '#536dfe', + '#9c27b0', + '#AF52DE', '#0096c7', '#00C1D4', - '#009688', - '#5AC8FA', '#34C759', - '#71EFA3', + '#43a047', + '#7cb342', + '#c0ca33', '#78DEC7', - '#FC5404', - '#ee4f12', - '#FF9500', - '#fadb14', - '#FFCC00', - '#FF3B30', - '#FF2D55', - '#ff5c93', - '#9c27b0', - '#AF52DE' + '#e53935', + '#d81b60', + '#f4511e', + '#fb8c00', + '#ffb300', + '#fdd835', + '#6d4c41', + '#546e7a' ]; const defaultThemeSetting: ThemeSetting = { @@ -47,6 +48,7 @@ const defaultThemeSetting: ThemeSetting = { warning: '#faad14', error: '#f5222d' }, + isCustomizeInfoColor: false, fixedHeaderAndTab: true, showReload: true, header: { diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts index 41180ec65..f0549d79c 100644 --- a/src/store/modules/theme/helpers.ts +++ b/src/store/modules/theme/helpers.ts @@ -1,6 +1,16 @@ import type { GlobalThemeOverrides } from 'naive-ui'; -import { kebabCase } from 'lodash-es'; -import { getColorPalette, addColorAlpha } from '@/utils'; +import { cloneDeep, kebabCase } from 'lodash-es'; +import { themeSetting } from '@/settings'; +import { getThemeColor, getColorPalette, addColorAlpha } from '@/utils'; + +/** 获取主题配置 */ +export function getThemeSettings() { + const themeColor = getThemeColor() || themeSetting.themeColor; + const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7); + const otherColor = { ...themeSetting.otherColor, info }; + const setting = cloneDeep({ ...themeSetting, themeColor, otherColor }); + return setting; +} type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error'; type ColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active'; @@ -38,7 +48,10 @@ function getThemeColors(colors: [ColorType, string][]) { /** 获取naive的主题颜色 */ export function getNaiveThemeOverrides(colors: Record): GlobalThemeOverrides { - const { primary, info, success, warning, error } = colors; + const { primary, success, warning, error } = colors; + + const info = themeSetting.isCustomizeInfoColor ? colors.info : getColorPalette(primary, 7); + const themeColors = getThemeColors([ ['primary', primary], ['info', info], @@ -70,7 +83,7 @@ export function addThemeCssVarsToHtml(themeVars: ThemeVars) { style.push(`--${kebabCase(key)}: ${themeVars[key]}`); }); const styleStr = style.join(';'); - document.documentElement.style.cssText = styleStr; + document.documentElement.style.cssText += styleStr; } /** windicss 暗黑模式 */ diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 4828095f7..085dea05f 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -1,7 +1,5 @@ import { defineStore } from 'pinia'; import { darkTheme } from 'naive-ui'; -import { cloneDeep } from 'lodash-es'; -import { themeSetting } from '@/settings'; import type { ThemeSetting, ThemeLayoutMode, @@ -9,12 +7,12 @@ import type { ThemeHorizontalMenuPosition, ThemeAnimateMode } from '@/interface'; -import { getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers'; +import { getThemeSettings, getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers'; type ThemeState = ThemeSetting; export const useThemeStore = defineStore('theme-store', { - state: (): ThemeState => cloneDeep(themeSetting), + state: (): ThemeState => getThemeSettings(), getters: { /** naiveUI的主题配置 */ naiveThemeOverrides(state) { diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts index 3b0afeac8..c802cbb6a 100644 --- a/src/store/subscribe/theme.ts +++ b/src/store/subscribe/theme.ts @@ -1,7 +1,7 @@ import { watch, onUnmounted } from 'vue'; import { useOsTheme } from 'naive-ui'; import { useElementSize } from '@vueuse/core'; -import { EnumStorageKey } from '@/enum'; +import { setThemeColor } from '@/utils'; import { useThemeStore } from '../modules'; /** 订阅theme store */ @@ -14,7 +14,7 @@ export default function subscribeThemeStore() { const stopThemeColor = watch( () => theme.themeColor, newValue => { - window.localStorage.setItem(EnumStorageKey['theme-color'], `--primary-color: ${newValue};`); + setThemeColor(newValue); }, { immediate: true } ); diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts index ca3b003b4..a249367bf 100644 --- a/src/utils/common/color.ts +++ b/src/utils/common/color.ts @@ -136,3 +136,11 @@ export function addColorAlpha(color: string, alpha: number) { export function mixColor(firstColor: string, secondColor: string, ratio: number) { return colord(firstColor).mix(secondColor, ratio).toHex(); } + +/** + * 是否是白颜色 + * @param color - 颜色 + */ +export function isWhiteColor(color: string) { + return colord(color).isEqual('#ffffff'); +} diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts index 144642a2f..5050e9062 100644 --- a/src/utils/common/index.ts +++ b/src/utils/common/index.ts @@ -5,3 +5,4 @@ export * from './number'; export * from './object'; export * from './icon'; export * from './design-pattern'; +export * from './theme'; diff --git a/src/utils/common/theme.ts b/src/utils/common/theme.ts new file mode 100644 index 000000000..fe1bd20c2 --- /dev/null +++ b/src/utils/common/theme.ts @@ -0,0 +1,16 @@ +import { EnumStorageKey } from '@/enum'; + +/** + * 缓存主题颜色 + * @param color + */ +export function setThemeColor(color: string) { + window.localStorage.setItem(EnumStorageKey['theme-color'], color); +} + +/** + * 获取缓存的主题颜色 + */ +export function getThemeColor() { + return window.localStorage.getItem(EnumStorageKey['theme-color']); +}