From 17bb9ec3632dfcd187f6d633609cf67b454d5c00 Mon Sep 17 00:00:00 2001 From: h_mo <596417202@qq.com> Date: Fri, 10 Feb 2023 23:23:58 +0800 Subject: [PATCH 01/13] feat: grid-layout theme color --- .../grid-layouts/src/components/Layout.vue | 1 + packages/grid-layouts/src/components/Main.vue | 11 +++++----- .../components/composables/LayoutFooter.vue | 2 +- .../components/composables/LayoutHeader.vue | 2 +- .../components/composables/LayoutSidebar.vue | 2 +- .../src/components/composables/LayoutTab.vue | 2 +- .../src/components/widgets/HeaderTrigger.vue | 1 - .../components/widgets/SiderCenterTrigger.vue | 9 +++++--- packages/hooks/src/web/useLayout.ts | 22 ++++++++++++++++--- packages/styles/src/variables.css | 18 ++++++++------- packages/utils/src/theme.ts | 22 +++++++++++++------ 11 files changed, 60 insertions(+), 32 deletions(-) diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue index 65e9cd9d..dff74c8a 100644 --- a/packages/grid-layouts/src/components/Layout.vue +++ b/packages/grid-layouts/src/components/Layout.vue @@ -47,6 +47,7 @@ nextTick(()=>{ grid-template-rows: var(--header-height) var(--tab-bar-height) 1fr; transition: grid-template-columns 0.3s, grid-template-rows 0.3s; transition-timing-function: var(--transition-bezier); + background-color: var(--layout-container-background-color); &.sidebar, &.mix-sidebar { grid-template-areas: diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue index 7ca3398d..814a9a8f 100644 --- a/packages/grid-layouts/src/components/Main.vue +++ b/packages/grid-layouts/src/components/Main.vue @@ -1,6 +1,6 @@ diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue index 6889813f..f3a2b348 100644 --- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue +++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue @@ -6,7 +6,7 @@ const { footer } = useAppConfig() diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue index 4198b098..1fb4b535 100644 --- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue +++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue @@ -37,6 +37,6 @@ const showSidebarLogo = computed(()=>{ - + diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue index 63a847f5..bb0a1e3c 100644 --- a/packages/grid-layouts/src/components/composables/LayoutTab.vue +++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue @@ -9,7 +9,7 @@ const { tabTar } = useAppConfig() diff --git a/packages/grid-layouts/src/components/menu/SubMenu.vue b/packages/grid-layouts/src/components/menu/SubMenu.vue new file mode 100644 index 00000000..fd28ba29 --- /dev/null +++ b/packages/grid-layouts/src/components/menu/SubMenu.vue @@ -0,0 +1,88 @@ + + + diff --git a/packages/grid-layouts/src/components/menu/index.vue b/packages/grid-layouts/src/components/menu/index.vue new file mode 100644 index 00000000..9790570b --- /dev/null +++ b/packages/grid-layouts/src/components/menu/index.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/grid-layouts/src/components/render.ts b/packages/grid-layouts/src/components/render.ts index 4e287e53..4ff9b3cc 100644 --- a/packages/grid-layouts/src/components/render.ts +++ b/packages/grid-layouts/src/components/render.ts @@ -1,7 +1,12 @@ import { h } from 'vue' import { VbenIconify } from '@vben/vbencomponents' -export const renderIcon = (icon: string) => { +export function renderIcon(icon: string) { if (!icon) return undefined return () => h(VbenIconify, { icon }) } + +export function renderMenuIcon(icon: string, label?: string) { + if (!icon) return undefined + return renderIcon(icon) +} diff --git a/packages/grid-layouts/src/components/widgets/Locale.vue b/packages/grid-layouts/src/components/widgets/Locale.vue deleted file mode 100644 index 18aecf29..00000000 --- a/packages/grid-layouts/src/components/widgets/Locale.vue +++ /dev/null @@ -1,8 +0,0 @@ - - diff --git a/packages/grid-layouts/src/components/widgets/LocalePicker.vue b/packages/grid-layouts/src/components/widgets/LocalePicker.vue new file mode 100644 index 00000000..fa63bc45 --- /dev/null +++ b/packages/grid-layouts/src/components/widgets/LocalePicker.vue @@ -0,0 +1,64 @@ + + diff --git a/packages/hooks/src/web/useLayout.ts b/packages/hooks/src/web/useLayout.ts index ee468077..b3c6d3cc 100644 --- a/packages/hooks/src/web/useLayout.ts +++ b/packages/hooks/src/web/useLayout.ts @@ -38,6 +38,7 @@ export function createThemeColorListen(el?: MaybeElementRef | null) { theme, toggleGrayMode, toggleColorWeak, + setAppConfig, } = useAppConfig() const { sidebarRef } = useLayoutSidebar() @@ -90,11 +91,14 @@ export function createThemeColorListen(el?: MaybeElementRef | null) { LIGHT_TEXT_COLOR, DARK_TEXT_COLOR, ) - headerActionHoverBgColor.value = ['#fff', '#ffffff'].includes( - unref(header).bgColor.toLowerCase(), - ) - ? darken(unref(header).bgColor, 6) - : lighten(unref(header).bgColor, 6) + + if (['#fff', '#ffffff'].includes(unref(header).bgColor.toLowerCase())) { + headerActionHoverBgColor.value = darken(unref(header).bgColor, 6) + setAppConfig({ header: { theme: ThemeEnum.LIGHT } }) + } else { + headerActionHoverBgColor.value = lighten(unref(header).bgColor, 6) + setAppConfig({ header: { theme: ThemeEnum.DARK } }) + } sidebarBgColor.value = unref(sidebar).bgColor asideTextColor.value = pickTextColorBasedOnBgColor( @@ -102,11 +106,14 @@ export function createThemeColorListen(el?: MaybeElementRef | null) { LIGHT_TEXT_COLOR, DARK_TEXT_COLOR, ) - triggerBackgroundColor.value = ['#fff', '#ffffff'].includes( - unref(sidebar).bgColor.toLowerCase(), - ) - ? darken(unref(sidebar).bgColor, 6) - : lighten(unref(sidebar).bgColor, 6) + + if (['#fff', '#ffffff'].includes(unref(sidebar).bgColor.toLowerCase())) { + setAppConfig({ sidebar: { theme: ThemeEnum.LIGHT } }) + triggerBackgroundColor.value = darken(unref(sidebar).bgColor, 6) + } else { + triggerBackgroundColor.value = lighten(unref(sidebar).bgColor, 6) + setAppConfig({ sidebar: { theme: ThemeEnum.DARK } }) + } toggleGrayMode(unref(grayMode)) toggleColorWeak(unref(colorWeak)) toggleClass( diff --git a/packages/locale/index.ts b/packages/locale/index.ts index 41ac8be4..4a65daa4 100644 --- a/packages/locale/index.ts +++ b/packages/locale/index.ts @@ -1,3 +1,4 @@ export { setupI18n } from './src/setup-i18n' export { useI18n, t } from './src/use-i18n' export { useLocale } from './src/use-locale' +export * from './src/config' diff --git a/packages/stores/src/modules/appConfig.ts b/packages/stores/src/modules/appConfig.ts index 878b6621..bf8fed2e 100644 --- a/packages/stores/src/modules/appConfig.ts +++ b/packages/stores/src/modules/appConfig.ts @@ -50,6 +50,7 @@ export const useAppConfig = defineStore({ canEmbedIFramePage: true, closeMixSidebarOnChange: false, sidebar: { + theme: ThemeEnum.LIGHT, show: true, visible: true, bgColor: SIDE_BAR_BG_COLOR_LIST[0], @@ -72,6 +73,7 @@ export const useAppConfig = defineStore({ dropdownPlacement: 'top-start', }, header: { + theme: ThemeEnum.DARK, show: true, visible: true, bgColor: HEADER_PRESET_BG_COLOR_LIST[0], diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts index df796429..e5b0bed2 100644 --- a/packages/types/src/config.ts +++ b/packages/types/src/config.ts @@ -106,6 +106,7 @@ export interface DefineAppConfigOptions { } export interface SidebarConfigOptions { + theme: ThemeEnum show: boolean visible: boolean fixed: boolean @@ -141,6 +142,7 @@ export interface MenuConfigOptions { } export interface HeaderConfigOptions { + theme: ThemeEnum show: boolean visible: boolean bgColor: string diff --git a/packages/vbenComponents/src/config/src/Config.vue b/packages/vbenComponents/src/config/src/Config.vue index fc004ad0..aee0f069 100644 --- a/packages/vbenComponents/src/config/src/Config.vue +++ b/packages/vbenComponents/src/config/src/Config.vue @@ -2,11 +2,29 @@ import { maps } from '#/index' import { computed, unref } from 'vue' import { useAppTheme } from '@vben/hooks' +import { ThemeEnum } from '@vben/constants' const Config = maps.get('Config') const darkTheme = maps.get('DarkTheme') +const props = defineProps({ + // Customize the configuration theme mode + themeMode: { + type: String, + default: 'dark' + }, + // Whether to inherit the theme + inherit: { + type: Boolean, + default: true + } +}) const { isDark } = useAppTheme() -const appTheme = computed(() => (unref(isDark) ? darkTheme : null)) +const appTheme = computed(() => { + if (!props.inherit){ + return props.themeMode === ThemeEnum.DARK ? darkTheme : null + } + return unref(isDark) ? darkTheme : null +})