wip: 修改修复一些问题,见下方详情

增加顶栏深色开关
修改主题默认值
修改标签页样式
删除无用引用
菜单反色逻辑调整
main
NoahLan 1 year ago
parent e16214e2c6
commit 949db8a088

@ -107,7 +107,7 @@ layout:
warningColor: 警告色
errorColor: 错误色
infoColor: 信息色
headerTheme: 顶栏主题
headerDark: 顶栏深色
sidebarDark: 侧边栏深色
menuDrag: 侧边菜单拖拽

@ -26,6 +26,7 @@ declare global {
const createApp: typeof import('vue')['createApp']
const createEventHook: typeof import('@vueuse/core')['createEventHook']
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
const createGridLayoutListen: typeof import('./composables/web/theme')['createGridLayoutListen']
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
const createMediaPrefersColorSchemeListen: typeof import('./composables/web/theme')['createMediaPrefersColorSchemeListen']
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
@ -382,6 +383,7 @@ declare module 'vue' {
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
readonly createGridLayoutListen: UnwrapRef<typeof import('./composables/web/theme')['createGridLayoutListen']>
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
readonly createMediaPrefersColorSchemeListen: UnwrapRef<typeof import('./composables/web/theme')['createMediaPrefersColorSchemeListen']>
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
@ -721,6 +723,7 @@ declare module '@vue/runtime-core' {
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
readonly createGridLayoutListen: UnwrapRef<typeof import('./composables/web/theme')['createGridLayoutListen']>
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
readonly createMediaPrefersColorSchemeListen: UnwrapRef<typeof import('./composables/web/theme')['createMediaPrefersColorSchemeListen']>
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>

@ -18,7 +18,6 @@ export function useHeaderSetting() {
const getHeaderTheme = computed(() => appConfig.header.value.theme)
const getShowHeader = computed(() => appConfig.header.value.show)
const getFixed = computed(() => appConfig.header.value.fixed)
const getHeaderBgColor = computed(() => appConfig.header.value.bgColor)
const getShowSearch = computed(() => appConfig.header.value.showSearch)
const getUseLockPage = computed(() => false)
const getShowFullScreen = computed(() => appConfig.header.value.showFullScreen)
@ -80,7 +79,6 @@ export function useHeaderSetting() {
getShowFullHeaderRef,
getShowInsetHeaderRef,
getUnFixedAndFull,
getHeaderBgColor,
getShowLocalePicker,
}
}

@ -1,25 +1,25 @@
import { storeToRefs } from 'pinia'
import { ThemeEnum } from '~/constants'
import type { MaybeElementRef } from '~/utils'
import { darken, generateColors, lighten, pickTextColorBasedOnBgColor, setCssVar, toggleClass } from '~/utils'
import { generateColors, setCssVar, toggleClass } from '~/utils'
const HEADER_HEIGHT = '--header-height'
const HEADER_BG_COLOR_VAR = '--header-background-color'
const HEADER_TEXT_COLOR_VAR = '--header-text-color'
const HEADER_ACTION_HOVER_BG_COLOR_VAR = '--header-action-hover-bg-color'
// const HEADER_BG_COLOR_VAR = '--header-background-color'
// const HEADER_TEXT_COLOR_VAR = '--header-text-color'
// const HEADER_ACTION_HOVER_BG_COLOR_VAR = '--header-action-hover-bg-color'
const ASIDE_WIDTH = '--aside-width'
const ASIDE_DARK_BG_COLOR = '--aside-background-color'
const ASIDE_TEXT_COLOR_VAR = '--aside-text-color'
// const ASIDE_DARK_BG_COLOR = '--aside-background-color'
// const ASIDE_TEXT_COLOR_VAR = '--aside-text-color'
const TRIGGER_BG_COLOR_VAR = '--trigger-background-color'
// const TRIGGER_BG_COLOR_VAR = '--trigger-background-color'
const TAB_BAR_HEIGHT = '--tab-bar-height'
const FOOTER_HEIGHT = '--footer-height'
const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
const DARK_TEXT_COLOR = '#fff'
// const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
// const DARK_TEXT_COLOR = '#fff'
export function createMediaPrefersColorSchemeListen() {
const { setAppConfig } = useAppConfig()
@ -107,81 +107,65 @@ export function createGridLayoutListen(el: MaybeElementRef | null) {
export function createThemeColorListen() {
const {
sidebar,
header,
grayMode,
colorWeak,
setAppConfig,
} = useAppConfig()
const headerBgColor = useCssVar(HEADER_BG_COLOR_VAR, null, {
initialValue: `${unref(header).bgColor}px`,
})
const headerTextColor = useCssVar(
HEADER_TEXT_COLOR_VAR,
null,
{
initialValue: LIGHT_TEXT_COLOR,
},
)
const headerActionHoverBgColor = useCssVar(
HEADER_ACTION_HOVER_BG_COLOR_VAR,
null,
)
const sidebarBgColor = useCssVar(
ASIDE_DARK_BG_COLOR,
null,
{
initialValue: `${unref(sidebar).bgColor}px`,
},
)
// const headerTextColor = useCssVar(
// HEADER_TEXT_COLOR_VAR,
// null,
// {
// initialValue: LIGHT_TEXT_COLOR,
// },
// )
// const headerActionHoverBgColor = useCssVar(
// HEADER_ACTION_HOVER_BG_COLOR_VAR,
// null,
// )
const asideTextColor = useCssVar(
ASIDE_TEXT_COLOR_VAR,
null,
{
initialValue: LIGHT_TEXT_COLOR,
},
)
const triggerBackgroundColor = useCssVar(
TRIGGER_BG_COLOR_VAR,
null,
)
// const asideTextColor = useCssVar(
// ASIDE_TEXT_COLOR_VAR,
// null,
// {
// initialValue: LIGHT_TEXT_COLOR,
// },
// )
// const triggerBackgroundColor = useCssVar(
// TRIGGER_BG_COLOR_VAR,
// null,
// )
watchEffect(() => {
headerBgColor.value = unref(header).bgColor
headerTextColor.value = pickTextColorBasedOnBgColor(
unref(header).bgColor,
LIGHT_TEXT_COLOR,
DARK_TEXT_COLOR,
)
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 } })
}
// headerTextColor.value = pickTextColorBasedOnBgColor(
// unref(header).bgColor,
// LIGHT_TEXT_COLOR,
// DARK_TEXT_COLOR,
// )
sidebarBgColor.value = unref(sidebar).bgColor
asideTextColor.value = pickTextColorBasedOnBgColor(
unref(sidebar).bgColor,
LIGHT_TEXT_COLOR,
DARK_TEXT_COLOR,
)
// 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(
// unref(sidebar).bgColor,
// LIGHT_TEXT_COLOR,
// DARK_TEXT_COLOR,
// )
if (['#fff', '#ffffff'].includes(unref(sidebar).bgColor.toLowerCase())) {
triggerBackgroundColor.value = darken(unref(sidebar).bgColor, 6)
setAppConfig({ sidebar: { theme: ThemeEnum.LIGHT } })
}
else {
triggerBackgroundColor.value = lighten(unref(sidebar).bgColor, 6)
setAppConfig({ sidebar: { theme: ThemeEnum.DARK } })
}
// if (['#fff', '#ffffff'].includes(unref(sidebar).bgColor.toLowerCase())) {
// triggerBackgroundColor.value = darken(unref(sidebar).bgColor, 6)
// setAppConfig({ sidebar: { theme: ThemeEnum.LIGHT } })
// }
// else {
// triggerBackgroundColor.value = lighten(unref(sidebar).bgColor, 6)
// setAppConfig({ sidebar: { theme: ThemeEnum.DARK } })
// }
toggleGrayMode(unref(grayMode))
toggleColorWeak(unref(colorWeak))

@ -1,3 +1,4 @@
// primary preset color
export const APP_PRESET_COLOR_LIST: string[] = [
'#0960bd',
'#0084f4',
@ -10,49 +11,6 @@ export const APP_PRESET_COLOR_LIST: string[] = [
'#ff9800',
]
// header preset color
export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
'#ffffff',
'#151515',
'#009688',
'#5172DC',
'#018ffb',
'#409eff',
'#e74c3c',
'#24292e',
'#394664',
'#001529',
'#383f45',
]
// sider preset color
export const SIDE_BAR_BG_COLOR_LIST: string[] = [
'#001529',
'#212121',
'#273352',
'#ffffff',
'#191b24',
'#191a23',
'#304156',
'#001628',
'#28333E',
'#344058',
'#383f45',
]
export enum ThemeChangeEnum {
THEME_CHANGE,
THEME_PRIMARY_COLOR_CHANGE,
THEME_INFO_COLOR_CHANGE,
THEME_SUCCESS_COLOR_CHANGE,
THEME_WARNING_COLOR_CHANGE,
THEME_ERROR_COLOR_CHANGE,
THEME_HEADER_BG_COLOR_CHANGE,
THEME_SIDEBAR_BG_COLOR_CHANGE,
}
// 设置事件Enum
export enum HandlerSettingEnum {
CHANGE_LAYOUT,
@ -101,3 +59,16 @@ export enum HandlerSettingEnum {
OPEN_PAGE_LOADING,
OPEN_ROUTE_TRANSITION,
}
export enum ThemeChangeEnum {
THEME_CHANGE,
THEME_PRIMARY_COLOR_CHANGE,
THEME_INFO_COLOR_CHANGE,
THEME_SUCCESS_COLOR_CHANGE,
THEME_WARNING_COLOR_CHANGE,
THEME_ERROR_COLOR_CHANGE,
THEME_HEADER_BG_COLOR_CHANGE,
THEME_SIDEBAR_BG_COLOR_CHANGE,
}

@ -14,6 +14,8 @@ const {
menu,
} = useAppConfig()
const { isHeaderDark } = useAppTheme()
const {
getShowHeader,
getShowFullScreen,
@ -62,10 +64,10 @@ const { isFullscreen } = useFullscreen()
<template>
<NSpace :class="bem()" vertical>
<NLayoutHeader :inverted="isHeaderDark">
<NSpace
v-if="getShowFullHeaderRef"
class="h-48px shadow"
:class="[{ 'mb-8px': !getShowHeaderMultipleTab }]"
:style="{ '--un-shadow-color': 'var(--n-border-color)' }"
justify="space-between"
align="center"
@ -113,6 +115,8 @@ const { isFullscreen } = useFullscreen()
</NSpace>
</div>
</NSpace>
</NLayoutHeader>
<!-- Multiple tab -->
<template v-if="getShowHeaderMultipleTab">
<slot name="tabs">

@ -16,8 +16,6 @@ const props = withDefaults(defineProps<{
split: false,
})
const { isSidebarDark } = useAppTheme()
const {
menu,
isMixSidebar,
@ -25,8 +23,13 @@ const {
sidebar,
isSidebar,
isMix,
isTopMenu,
} = useAppConfig()
const { isSidebarDark, isHeaderDark } = useAppTheme()
const inverted = computed(() => unref(isTopMenu) ? unref(isHeaderDark) : unref(isSidebarDark))
const {
getTopMenuAlign,
getShowFooterTrigger,
@ -202,7 +205,7 @@ function clickMenu(key: any) {
:root-indent="18"
:mode="props.mode"
:accordion="menu.accordion"
:inverted="mode === 'vertical' && isSidebarDark"
:inverted="inverted"
@update:value="clickMenu"
/>
<NEmpty
@ -238,21 +241,5 @@ div:has(> div[class='layout-menu']) {
flex: 1;
flex-basis: auto;
}
// &__menu:not(.n-menu--collapsed) {
// .n-menu-item-content {
// &::before {
// left: 5px;
// right: 5px;
// }
// &.n-menu-item-content--selected,
// &:hover {
// &::before {
// border-left: 4px solid var(--primary-color);
// }
// }
// }
// }
}
</style>

@ -1,9 +1,8 @@
<script setup lang="ts">
import ThemeColorPicker from './theme-color-picker.vue'
import SwitchItem from './switch-item.vue'
import { APP_PRESET_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST, ThemeChangeEnum } from '~/constants'
import { APP_PRESET_COLOR_LIST, ThemeChangeEnum } from '~/constants'
const { getHeaderBgColor } = useHeaderSetting()
const {
primaryColor,
infoColor,
@ -11,7 +10,9 @@ const {
warningColor,
errorColor,
isSidebarDark,
isHeaderDark,
toggleSidebarTheme,
toggleHeaderTheme,
} = useAppTheme()
</script>
@ -43,16 +44,15 @@ const {
:def="errorColor"
:event="ThemeChangeEnum.THEME_ERROR_COLOR_CHANGE"
/>
<ThemeColorPicker
:title="$t('layout.setting.headerTheme')"
:def="getHeaderBgColor"
:event="ThemeChangeEnum.THEME_HEADER_BG_COLOR_CHANGE"
:color-list="HEADER_PRESET_BG_COLOR_LIST"
/>
<SwitchItem
:title="$t('layout.setting.sidebarDark')"
:value="isSidebarDark"
:callback="toggleSidebarTheme"
/>
<SwitchItem
:title="$t('layout.setting.headerDark')"
:value="isHeaderDark"
:callback="toggleHeaderTheme"
/>
</NSpace>
</template>

@ -72,7 +72,7 @@ function handleClose(e: MouseEvent, route: RouteLocationNormalized) {
</script>
<template>
<div>
<div class="mt-2">
<NTabs
id="drag"
v-model:value="activeTabName"

@ -63,11 +63,11 @@ const { isSidebarDark } = useAppTheme()
</slot>
</NLayoutSider>
<NLayout>
<NLayoutHeader ref="headerRef">
<NLayout ref="headerRef">
<slot name="header">
<LayoutHeader />
</slot>
</NLayoutHeader>
</NLayout>
<NLayout :content-style="contentStyle">
<NLayoutContent ref="contentRef" :content-style="mainStyle">
<LayoutMain>

@ -0,0 +1,10 @@
import { APP_PRESET_COLOR_LIST, ThemeEnum } from '~/constants'
export const namespace = 'nl'
export const primaryColor = '#0960bd'
export const darkMode = ThemeEnum.LIGHT
export {
// app theme preset color
APP_PRESET_COLOR_LIST,
}

@ -0,0 +1,2 @@
export * from './design'
export * from './project'

@ -0,0 +1,107 @@
import { primaryColor } from './'
import {
AlignEnum,
ContentLayoutEnum,
MenuModeEnum,
MixSidebarTriggerEnum,
NavBarModeEnum,
PermissionModeEnum,
PlacementEnum,
RouterTransitionEnum,
SessionTimeoutProcessingEnum,
SettingButtonPositionEnum,
ThemeEnum,
TriggerEnum,
} from '~/constants'
// ! You need to clear the browser cache after the change
export const projectSetting: DefineAppConfigOptions = {
theme: ThemeEnum.LIGHT,
navBarMode: NavBarModeEnum.SIDEBAR,
themeColor: primaryColor,
showThemeModeToggle: true,
openKeepAlive: true,
useOpenBackTop: true,
closeMessageOnSwitch: false,
removeAllHttpPending: true,
// permissionCacheType: CacheTypeEnum.LOCAL,
settingButtonPosition: SettingButtonPositionEnum.AUTO,
openSettingDrawer: false,
permissionMode: PermissionModeEnum.PERM,
sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
grayMode: false,
colorWeak: false,
lockTime: 0,
useLockPage: false,
canEmbedIFramePage: true,
closeMixSidebarOnChange: false,
sidebar: {
theme: ThemeEnum.DARK,
show: true,
visible: true,
fixed: false,
width: 210,
mixSidebarWidth: 80,
collapsedWidth: 48,
collapsed: false,
trigger: TriggerEnum.CENTER,
},
menu: {
show: true,
canDrag: false,
split: false,
mode: MenuModeEnum.VERTICAL,
accordion: false,
collapsedShowTitle: false,
mixSideTrigger: MixSidebarTriggerEnum.CLICK,
mixSideFixed: false,
topMenuAlign: AlignEnum.START,
dropdownPlacement: PlacementEnum.TOP_START,
subMenuWidth: 0,
},
header: {
theme: ThemeEnum.DARK,
show: true,
visible: true,
fixed: false,
height: 48,
showDoc: true,
showBreadCrumb: true,
showBreadCrumbIcon: true,
showFullScreen: true,
showNotice: true,
showSearch: true,
showLocalePicker: true,
showSetting: true,
},
logo: {
show: true,
visible: true,
showTitle: true,
},
tabTar: {
show: true,
visible: true,
height: 36,
cache: true,
canDrag: false,
showFold: true,
showQuick: true,
showRedo: true,
},
content: {
fullScreen: false,
mode: ContentLayoutEnum.FULL,
},
footer: {
height: 60,
show: false,
visible: false,
},
transition: {
enable: true,
basicTransition: RouterTransitionEnum.FADE_SIDE,
openPageLoading: true,
openNProgress: false,
},
}

@ -1,117 +1,13 @@
import { acceptHMRUpdate, defineStore } from 'pinia'
import {
AlignEnum,
ContentLayoutEnum,
HEADER_PRESET_BG_COLOR_LIST,
MenuModeEnum,
MixSidebarTriggerEnum,
NavBarModeEnum,
PermissionModeEnum,
PlacementEnum,
RouterTransitionEnum,
SIDE_BAR_BG_COLOR_LIST,
SessionTimeoutProcessingEnum,
SettingButtonPositionEnum,
ThemeEnum,
TriggerEnum,
} from '~/constants'
import { projectSetting } from '~/setting'
import { _assign, _merge } from '~/utils'
const initState: DefineAppConfigOptions = {
theme: ThemeEnum.LIGHT,
navBarMode: NavBarModeEnum.SIDEBAR,
themeColor: '',
showThemeModeToggle: true,
openKeepAlive: true,
useOpenBackTop: true,
closeMessageOnSwitch: false,
removeAllHttpPending: true,
// permissionCacheType: CacheTypeEnum.LOCAL,
settingButtonPosition: SettingButtonPositionEnum.AUTO,
openSettingDrawer: false,
permissionMode: PermissionModeEnum.PERM,
sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
grayMode: false,
colorWeak: false,
lockTime: 0,
useLockPage: false,
canEmbedIFramePage: true,
closeMixSidebarOnChange: false,
sidebar: {
theme: ThemeEnum.LIGHT,
show: true,
visible: true,
bgColor: SIDE_BAR_BG_COLOR_LIST[0],
fixed: false,
width: 210,
mixSidebarWidth: 80,
collapsedWidth: 48,
collapsed: false,
trigger: TriggerEnum.CENTER,
},
menu: {
show: true,
canDrag: false,
split: false,
mode: MenuModeEnum.VERTICAL,
accordion: false,
collapsedShowTitle: false,
mixSideTrigger: MixSidebarTriggerEnum.CLICK,
mixSideFixed: false,
topMenuAlign: AlignEnum.START,
dropdownPlacement: PlacementEnum.TOP_START,
subMenuWidth: 0,
},
header: {
theme: ThemeEnum.DARK,
show: true,
visible: true,
bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
fixed: false,
height: 48,
showDoc: true,
showBreadCrumb: true,
showBreadCrumbIcon: true,
showFullScreen: true,
showNotice: true,
showSearch: true,
showLocalePicker: true,
showSetting: true,
},
logo: {
show: true,
visible: true,
showTitle: true,
},
tabTar: {
show: true,
visible: true,
height: 36,
cache: true,
canDrag: false,
showFold: true,
showQuick: true,
showRedo: true,
},
content: {
fullScreen: false,
mode: ContentLayoutEnum.FULL,
},
footer: {
height: 60,
show: false,
visible: false,
},
transition: {
enable: true,
basicTransition: RouterTransitionEnum.FADE_SIDE,
openPageLoading: true,
openNProgress: false,
},
}
export const useAppConfigStore = defineStore('APP_CONFIG', () => {
let state = $ref<DefineAppConfigOptions>(Object.assign({}, initState))
let state = $ref<DefineAppConfigOptions>(Object.assign({}, projectSetting))
// computed
const isSidebar = computed(() => state.navBarMode === NavBarModeEnum.SIDEBAR)
@ -183,7 +79,7 @@ export const useAppConfigStore = defineStore('APP_CONFIG', () => {
}
}, {
persist: {
paths: Object.keys(initState),
paths: Object.keys(projectSetting),
},
})

@ -69,7 +69,6 @@ declare global {
show: boolean
visible: boolean
fixed: boolean
bgColor: string
collapsed: boolean
width: number
trigger: TriggerEnum
@ -98,7 +97,6 @@ declare global {
theme: ThemeEnum
show: boolean
visible: boolean
bgColor: string
fixed: boolean
showFullScreen: boolean
showDoc: boolean

Loading…
Cancel
Save