import { defineStore } from 'pinia'
|
import { ref, computed } from 'vue'
|
import AppConfig from '@/config'
|
import { SystemThemeEnum } from '@/enums/appEnum'
|
import { setElementThemeColor } from '@/utils/ui'
|
import { useCeremony } from '@/hooks/core/useCeremony'
|
import { StorageConfig } from '@/utils'
|
import { SETTING_DEFAULT_CONFIG } from '@/config/setting'
|
const useSettingStore = defineStore(
|
'settingStore',
|
() => {
|
const menuType = ref(SETTING_DEFAULT_CONFIG.menuType)
|
const menuOpenWidth = ref(SETTING_DEFAULT_CONFIG.menuOpenWidth)
|
const menuOpen = ref(SETTING_DEFAULT_CONFIG.menuOpen)
|
const dualMenuShowText = ref(SETTING_DEFAULT_CONFIG.dualMenuShowText)
|
const systemThemeType = ref(SETTING_DEFAULT_CONFIG.systemThemeType)
|
const systemThemeMode = ref(SETTING_DEFAULT_CONFIG.systemThemeMode)
|
const menuThemeType = ref(SETTING_DEFAULT_CONFIG.menuThemeType)
|
const systemThemeColor = ref(SETTING_DEFAULT_CONFIG.systemThemeColor)
|
const showMenuButton = ref(SETTING_DEFAULT_CONFIG.showMenuButton)
|
const showFastEnter = ref(SETTING_DEFAULT_CONFIG.showFastEnter)
|
const showRefreshButton = ref(SETTING_DEFAULT_CONFIG.showRefreshButton)
|
const showCrumbs = ref(SETTING_DEFAULT_CONFIG.showCrumbs)
|
const showWorkTab = ref(SETTING_DEFAULT_CONFIG.showWorkTab)
|
const showLanguage = ref(SETTING_DEFAULT_CONFIG.showLanguage)
|
const showNprogress = ref(SETTING_DEFAULT_CONFIG.showNprogress)
|
const showSettingGuide = ref(SETTING_DEFAULT_CONFIG.showSettingGuide)
|
const showFestivalText = ref(SETTING_DEFAULT_CONFIG.showFestivalText)
|
const watermarkVisible = ref(SETTING_DEFAULT_CONFIG.watermarkVisible)
|
const autoClose = ref(SETTING_DEFAULT_CONFIG.autoClose)
|
const uniqueOpened = ref(SETTING_DEFAULT_CONFIG.uniqueOpened)
|
const colorWeak = ref(SETTING_DEFAULT_CONFIG.colorWeak)
|
const refresh = ref(SETTING_DEFAULT_CONFIG.refresh)
|
const holidayFireworksLoaded = ref(SETTING_DEFAULT_CONFIG.holidayFireworksLoaded)
|
const boxBorderMode = ref(SETTING_DEFAULT_CONFIG.boxBorderMode)
|
const pageTransition = ref(SETTING_DEFAULT_CONFIG.pageTransition)
|
const tabStyle = ref(SETTING_DEFAULT_CONFIG.tabStyle)
|
const customRadius = ref(SETTING_DEFAULT_CONFIG.customRadius)
|
const containerWidth = ref(SETTING_DEFAULT_CONFIG.containerWidth)
|
const festivalDate = ref('')
|
const getMenuTheme = computed(() => {
|
const list = AppConfig.themeList.filter((item) => item.theme === menuThemeType.value)
|
if (isDark.value) {
|
return AppConfig.darkMenuStyles[0]
|
} else {
|
return list[0]
|
}
|
})
|
const isDark = computed(() => {
|
return systemThemeType.value === SystemThemeEnum.DARK
|
})
|
const getMenuOpenWidth = computed(() => {
|
return menuOpenWidth.value + 'px' || SETTING_DEFAULT_CONFIG.menuOpenWidth + 'px'
|
})
|
const getCustomRadius = computed(() => {
|
return customRadius.value + 'rem' || SETTING_DEFAULT_CONFIG.customRadius + 'rem'
|
})
|
const isShowFireworks = computed(() => {
|
return festivalDate.value === useCeremony().currentFestivalData.value?.date ? false : true
|
})
|
const switchMenuLayouts = (type) => {
|
menuType.value = type
|
}
|
const setMenuOpenWidth = (width) => {
|
menuOpenWidth.value = width
|
}
|
const setGlopTheme = (theme, themeMode) => {
|
systemThemeType.value = theme
|
systemThemeMode.value = themeMode
|
localStorage.setItem(StorageConfig.THEME_KEY, theme)
|
}
|
const switchMenuStyles = (theme) => {
|
menuThemeType.value = theme
|
}
|
const setElementTheme = (theme) => {
|
systemThemeColor.value = theme
|
setElementThemeColor(theme)
|
}
|
const setBorderMode = () => {
|
boxBorderMode.value = !boxBorderMode.value
|
}
|
const setContainerWidth = (width) => {
|
containerWidth.value = width
|
}
|
const setUniqueOpened = () => {
|
uniqueOpened.value = !uniqueOpened.value
|
}
|
const setButton = () => {
|
showMenuButton.value = !showMenuButton.value
|
}
|
const setFastEnter = () => {
|
showFastEnter.value = !showFastEnter.value
|
}
|
const setAutoClose = () => {
|
autoClose.value = !autoClose.value
|
}
|
const setShowRefreshButton = () => {
|
showRefreshButton.value = !showRefreshButton.value
|
}
|
const setCrumbs = () => {
|
showCrumbs.value = !showCrumbs.value
|
}
|
const setWorkTab = (show) => {
|
showWorkTab.value = show
|
}
|
const setLanguage = () => {
|
showLanguage.value = !showLanguage.value
|
}
|
const setNprogress = () => {
|
showNprogress.value = !showNprogress.value
|
}
|
const setColorWeak = () => {
|
colorWeak.value = !colorWeak.value
|
}
|
const hideSettingGuide = () => {
|
showSettingGuide.value = false
|
}
|
const openSettingGuide = () => {
|
showSettingGuide.value = true
|
}
|
const setPageTransition = (transition) => {
|
pageTransition.value = transition
|
}
|
const setTabStyle = (style) => {
|
tabStyle.value = style
|
}
|
const setMenuOpen = (open) => {
|
menuOpen.value = open
|
}
|
const reload = () => {
|
refresh.value = !refresh.value
|
}
|
const setWatermarkVisible = (visible) => {
|
watermarkVisible.value = visible
|
}
|
const setCustomRadius = (radius) => {
|
customRadius.value = radius
|
document.documentElement.style.setProperty('--custom-radius', `${radius}rem`)
|
}
|
const setholidayFireworksLoaded = (isLoad) => {
|
holidayFireworksLoaded.value = isLoad
|
}
|
const setShowFestivalText = (show) => {
|
showFestivalText.value = show
|
}
|
const setFestivalDate = (date) => {
|
festivalDate.value = date
|
}
|
const setDualMenuShowText = (show) => {
|
dualMenuShowText.value = show
|
}
|
return {
|
menuType,
|
menuOpenWidth,
|
systemThemeType,
|
systemThemeMode,
|
menuThemeType,
|
systemThemeColor,
|
boxBorderMode,
|
uniqueOpened,
|
showMenuButton,
|
showFastEnter,
|
showRefreshButton,
|
showCrumbs,
|
autoClose,
|
showWorkTab,
|
showLanguage,
|
showNprogress,
|
colorWeak,
|
showSettingGuide,
|
pageTransition,
|
tabStyle,
|
menuOpen,
|
refresh,
|
watermarkVisible,
|
customRadius,
|
holidayFireworksLoaded,
|
showFestivalText,
|
festivalDate,
|
dualMenuShowText,
|
containerWidth,
|
getMenuTheme,
|
isDark,
|
getMenuOpenWidth,
|
getCustomRadius,
|
isShowFireworks,
|
switchMenuLayouts,
|
setMenuOpenWidth,
|
setGlopTheme,
|
switchMenuStyles,
|
setElementTheme,
|
setBorderMode,
|
setContainerWidth,
|
setUniqueOpened,
|
setButton,
|
setFastEnter,
|
setAutoClose,
|
setShowRefreshButton,
|
setCrumbs,
|
setWorkTab,
|
setLanguage,
|
setNprogress,
|
setColorWeak,
|
hideSettingGuide,
|
openSettingGuide,
|
setPageTransition,
|
setTabStyle,
|
setMenuOpen,
|
reload,
|
setWatermarkVisible,
|
setCustomRadius,
|
setholidayFireworksLoaded,
|
setShowFestivalText,
|
setFestivalDate,
|
setDualMenuShowText
|
}
|
},
|
{
|
persist: {
|
key: 'setting',
|
storage: localStorage
|
}
|
}
|
)
|
export { useSettingStore }
|
