import { ref, computed, watch } from 'vue'
|
import { useSettingStore } from '@/store/modules/setting'
|
import { storeToRefs } from 'pinia'
|
import { useBreakpoints } from '@vueuse/core'
|
import AppConfig from '@/config'
|
import { SystemThemeEnum, MenuTypeEnum } from '@/enums/appEnum'
|
import { mittBus } from '@/utils/sys'
|
import { StorageConfig } from '@/utils'
|
import { useTheme } from '@/hooks/core/useTheme'
|
import { useCeremony } from '@/hooks/core/useCeremony'
|
import { useSettingsState } from './useSettingsState'
|
import { useSettingsHandlers } from './useSettingsHandlers'
|
function useSettingsPanel() {
|
const settingStore = useSettingStore()
|
const { systemThemeType, systemThemeMode, menuType } = storeToRefs(settingStore)
|
const { openFestival, cleanup } = useCeremony()
|
const { setSystemTheme, setSystemAutoTheme } = useTheme()
|
const { initColorWeak } = useSettingsState()
|
const { domOperations } = useSettingsHandlers()
|
const showDrawer = ref(false)
|
const breakpoints = useBreakpoints({ tablet: 1e3 })
|
const isMobile = breakpoints.smaller('tablet')
|
const getStoredDesktopMenuType = () => {
|
const storedMenuType = localStorage.getItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY)
|
return Object.values(MenuTypeEnum).includes(storedMenuType) ? storedMenuType : void 0
|
}
|
const setStoredDesktopMenuType = (type) => {
|
localStorage.setItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY, type)
|
}
|
const clearStoredDesktopMenuType = () => {
|
localStorage.removeItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY)
|
}
|
const storedDesktopMenuType = getStoredDesktopMenuType()
|
const beforeMenuType = ref(storedDesktopMenuType)
|
const hasChangedMenu = ref(Boolean(storedDesktopMenuType))
|
const systemThemeColor = computed(() => settingStore.systemThemeColor)
|
const useThemeHandlers = () => {
|
const initSystemColor = () => {
|
if (!AppConfig.systemMainColor.includes(systemThemeColor.value)) {
|
settingStore.setElementTheme(AppConfig.systemMainColor[0])
|
settingStore.reload()
|
}
|
}
|
const initSystemTheme = () => {
|
if (systemThemeMode.value === SystemThemeEnum.AUTO) {
|
setSystemAutoTheme()
|
} else {
|
setSystemTheme(systemThemeType.value)
|
}
|
}
|
const listenerSystemTheme = () => {
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
mediaQuery.addEventListener('change', initSystemTheme)
|
return () => {
|
mediaQuery.removeEventListener('change', initSystemTheme)
|
}
|
}
|
return {
|
initSystemColor,
|
initSystemTheme,
|
listenerSystemTheme
|
}
|
}
|
const useResponsiveLayout = () => {
|
const stopWatch = watch(
|
isMobile,
|
(mobile) => {
|
if (mobile) {
|
if (!hasChangedMenu.value) {
|
beforeMenuType.value = menuType.value
|
if (menuType.value !== MenuTypeEnum.LEFT) {
|
setStoredDesktopMenuType(menuType.value)
|
useSettingsState().switchMenuLayouts(MenuTypeEnum.LEFT)
|
hasChangedMenu.value = true
|
}
|
}
|
settingStore.setMenuOpen(false)
|
} else {
|
if (hasChangedMenu.value && beforeMenuType.value) {
|
if (menuType.value === MenuTypeEnum.LEFT) {
|
useSettingsState().switchMenuLayouts(beforeMenuType.value)
|
}
|
clearStoredDesktopMenuType()
|
hasChangedMenu.value = false
|
}
|
settingStore.setMenuOpen(true)
|
}
|
},
|
{ immediate: true }
|
)
|
return { stopWatch }
|
}
|
const useDrawerControl = () => {
|
let themeChangeTimer = null
|
const handleOpen = () => {
|
if (themeChangeTimer) {
|
clearTimeout(themeChangeTimer)
|
}
|
themeChangeTimer = setTimeout(() => {
|
domOperations.setBodyClass('theme-change', true)
|
themeChangeTimer = null
|
}, 500)
|
}
|
const handleClose = () => {
|
if (themeChangeTimer) {
|
clearTimeout(themeChangeTimer)
|
themeChangeTimer = null
|
}
|
domOperations.setBodyClass('theme-change', false)
|
}
|
const openSetting = () => {
|
showDrawer.value = true
|
}
|
const closeDrawer = () => {
|
showDrawer.value = false
|
}
|
return {
|
handleOpen,
|
handleClose,
|
openSetting,
|
closeDrawer
|
}
|
}
|
const usePropsWatcher = (props) => {
|
watch(
|
() => props.open,
|
(val) => {
|
if (val !== void 0) {
|
showDrawer.value = val
|
}
|
}
|
)
|
}
|
const useSettingsInitializer = () => {
|
const themeHandlers = useThemeHandlers()
|
const { openSetting } = useDrawerControl()
|
const { stopWatch } = useResponsiveLayout()
|
let themeCleanup = null
|
const initializeSettings = () => {
|
mittBus.on('openSetting', openSetting)
|
themeHandlers.initSystemColor()
|
themeCleanup = themeHandlers.listenerSystemTheme()
|
initColorWeak()
|
const boxMode = settingStore.boxBorderMode ? 'border-mode' : 'shadow-mode'
|
domOperations.setRootAttribute('data-box-mode', boxMode)
|
themeHandlers.initSystemTheme()
|
openFestival()
|
}
|
const cleanupSettings = () => {
|
stopWatch()
|
themeCleanup?.()
|
cleanup()
|
}
|
return {
|
initializeSettings,
|
cleanupSettings
|
}
|
}
|
return {
|
// 状态
|
showDrawer,
|
// 方法组合
|
useThemeHandlers,
|
useResponsiveLayout,
|
useDrawerControl,
|
usePropsWatcher,
|
useSettingsInitializer
|
}
|
}
|
export { useSettingsPanel }
|
