n-admin
/
n-admin-ui-vitesse
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
增加顶栏深色开关
修改主题默认值
修改标签页样式
删除无用引用
菜单反色逻辑调整
main
NoahLan 1 year ago
parent e16214e2c6
commit 949db8a088
15 changed files with 272 additions and 312 deletions
Show Stats Download Patch File Download Diff File

2
locales/zh-chs.yml
Unescape Escape View File

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

3
src/auto-imports.d.ts vendored
Unescape Escape View File

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

2
src/composables/setting/header-setting.ts
Unescape Escape View File

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

136
src/composables/web/theme.ts
Unescape Escape View File

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

57
src/constants/design.ts
Unescape Escape View File

@ -1,3 +1,4 @@
// primary preset color
export const APP_PRESET_COLOR_LIST: string[] = [ export const APP_PRESET_COLOR_LIST: string[] = [
'#0960bd', '#0960bd',
'#0084f4', '#0084f4',
@ -10,49 +11,6 @@ export const APP_PRESET_COLOR_LIST: string[] = [
'#ff9800', '#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 // 设置事件Enum
export enum HandlerSettingEnum { export enum HandlerSettingEnum {
CHANGE_LAYOUT, CHANGE_LAYOUT,
@ -101,3 +59,16 @@ export enum HandlerSettingEnum {
OPEN_PAGE_LOADING, OPEN_PAGE_LOADING,
OPEN_ROUTE_TRANSITION, 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,
}

106
src/layouts/nlayout/components/header.vue
Unescape Escape View File

@ -14,6 +14,8 @@ const {
menu, menu,
} = useAppConfig() } = useAppConfig()
const { isHeaderDark } = useAppTheme()
const { const {
getShowHeader, getShowHeader,
getShowFullScreen, getShowFullScreen,
@ -62,57 +64,59 @@ const { isFullscreen } = useFullscreen()
<template> <template>
<NSpace :class="bem()" vertical> <NSpace :class="bem()" vertical>
<NSpace <NLayoutHeader :inverted="isHeaderDark">
v-if="getShowFullHeaderRef" <NSpace
class="h-48px shadow" v-if="getShowFullHeaderRef"
:class="[{ 'mb-8px': !getShowHeaderMultipleTab }]" class="h-48px shadow"
:style="{ '--un-shadow-color': 'var(--n-border-color)' }" :style="{ '--un-shadow-color': 'var(--n-border-color)' }"
justify="space-between" justify="space-between"
align="center" align="center"
> >
<slot name="logo"> <slot name="logo">
<NSpace align="center" class="items-center" :size="0"> <NSpace align="center" class="items-center" :size="0">
<Logo <Logo
v-if="showHeaderLogoRef" v-if="showHeaderLogoRef"
:style="{ :style="{
width: `${logoWidth}px`, width: `${logoWidth}px`,
maxWidth: `${logoWidth}px`, maxWidth: `${logoWidth}px`,
}" }"
/> />
<HeaderTrigger v-if="getShowHeaderTrigger" class="mx-2" /> <HeaderTrigger v-if="getShowHeaderTrigger" class="mx-2" />
<slot v-if="showHeaderBreadcrumb" name="breadcrumb"> <slot v-if="showHeaderBreadcrumb" name="breadcrumb">
<BreadCrumb /> <BreadCrumb />
</slot> </slot>
</NSpace> </NSpace>
</slot> </slot>
<slot v-if="!showHeaderBreadcrumb" name="menu" /> <slot v-if="!showHeaderBreadcrumb" name="menu" />
<div class="pl-8px" :class="bem('action')"> <div class="pl-8px" :class="bem('action')">
<NSpace :size="0" align="center" :wrap-item="false"> <NSpace :size="0" align="center" :wrap-item="false">
<!-- Search --> <!-- Search -->
<!-- Notify --> <!-- Notify -->
<NPopover trigger="hover"> <NPopover trigger="hover">
<template #trigger> <template #trigger>
<Fullscreen v-if="getShowFullScreen" :class="bem('action__item')" /> <Fullscreen v-if="getShowFullScreen" :class="bem('action__item')" />
</template> </template>
<span>{{ unref(isFullscreen) ? $t('layout.header.tooltipExitFull') : $t('layout.header.tooltipEntryFull') }}</span> <span>{{ unref(isFullscreen) ? $t('layout.header.tooltipExitFull') : $t('layout.header.tooltipEntryFull') }}</span>
</NPopover> </NPopover>
<NPopover trigger="hover"> <NPopover trigger="hover">
<template #trigger> <template #trigger>
<LLocalePicker v-if="getShowLocalePicker" :class="bem('action__item')" :reload="true" :show-text="false" /> <LLocalePicker v-if="getShowLocalePicker" :class="bem('action__item')" :reload="true" :show-text="false" />
</template> </template>
<span>{{ $t('layout.header.tooltipLanguage') }}</span> <span>{{ $t('layout.header.tooltipLanguage') }}</span>
</NPopover> </NPopover>
<!-- UserDropDown --> <!-- UserDropDown -->
<NPopover trigger="hover"> <NPopover trigger="hover">
<template #trigger> <template #trigger>
<SettingButton v-if="getShowSetting" :class="bem('action__item')" /> <SettingButton v-if="getShowSetting" :class="bem('action__item')" />
</template> </template>
<span>{{ $t('layout.header.tooltipSettings') }}</span> <span>{{ $t('layout.header.tooltipSettings') }}</span>
</NPopover> </NPopover>
</NSpace> </NSpace>
</div> </div>
</NSpace> </NSpace>
</NLayoutHeader>
<!-- Multiple tab --> <!-- Multiple tab -->
<template v-if="getShowHeaderMultipleTab"> <template v-if="getShowHeaderMultipleTab">
<slot name="tabs"> <slot name="tabs">

25
src/layouts/nlayout/components/menu/index.vue
Unescape Escape View File

@ -16,8 +16,6 @@ const props = withDefaults(defineProps<{
split: false, split: false,
}) })
const { isSidebarDark } = useAppTheme()
const { const {
menu, menu,
isMixSidebar, isMixSidebar,
@ -25,8 +23,13 @@ const {
sidebar, sidebar,
isSidebar, isSidebar,
isMix, isMix,
isTopMenu,
} = useAppConfig() } = useAppConfig()
const { isSidebarDark, isHeaderDark } = useAppTheme()
const inverted = computed(() => unref(isTopMenu) ? unref(isHeaderDark) : unref(isSidebarDark))
const { const {
getTopMenuAlign, getTopMenuAlign,
getShowFooterTrigger, getShowFooterTrigger,
@ -202,7 +205,7 @@ function clickMenu(key: any) {
:root-indent="18" :root-indent="18"
:mode="props.mode" :mode="props.mode"
:accordion="menu.accordion" :accordion="menu.accordion"
:inverted="mode === 'vertical' && isSidebarDark" :inverted="inverted"
@update:value="clickMenu" @update:value="clickMenu"
/> />
<NEmpty <NEmpty
@ -238,21 +241,5 @@ div:has(> div[class='layout-menu']) {
flex: 1; flex: 1;
flex-basis: auto; 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> </style>

16
src/layouts/nlayout/components/setting/components/theme-editor.vue
Unescape Escape View File

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

2
src/layouts/nlayout/components/tabs/index.vue
Unescape Escape View File

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

4
src/layouts/nlayout/left-menu.vue
Unescape Escape View File

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

10
src/setting/design.ts
Unescape Escape View File

@ -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,
}

2
src/setting/index.ts
Unescape Escape View File

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

107
src/setting/project.ts
Unescape Escape View File

@ -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,
},
}

110
src/stores/app-config.ts
Unescape Escape View File

@ -1,117 +1,13 @@
import { acceptHMRUpdate, defineStore } from 'pinia' import { acceptHMRUpdate, defineStore } from 'pinia'
import { import {
AlignEnum,
ContentLayoutEnum,
HEADER_PRESET_BG_COLOR_LIST,
MenuModeEnum, MenuModeEnum,
MixSidebarTriggerEnum,
NavBarModeEnum, NavBarModeEnum,
PermissionModeEnum,
PlacementEnum,
RouterTransitionEnum,
SIDE_BAR_BG_COLOR_LIST,
SessionTimeoutProcessingEnum,
SettingButtonPositionEnum,
ThemeEnum,
TriggerEnum,
} from '~/constants' } from '~/constants'
import { projectSetting } from '~/setting'
import { _assign, _merge } from '~/utils' 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', () => { export const useAppConfigStore = defineStore('APP_CONFIG', () => {
let state = $ref<DefineAppConfigOptions>(Object.assign({}, initState)) let state = $ref<DefineAppConfigOptions>(Object.assign({}, projectSetting))
// computed // computed
const isSidebar = computed(() => state.navBarMode === NavBarModeEnum.SIDEBAR) const isSidebar = computed(() => state.navBarMode === NavBarModeEnum.SIDEBAR)
@ -183,7 +79,7 @@ export const useAppConfigStore = defineStore('APP_CONFIG', () => {
} }
}, { }, {
persist: { persist: {
paths: Object.keys(initState), paths: Object.keys(projectSetting),
}, },
}) })

2
src/types/app-config.d.ts vendored
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save