import { useSettingStore } from '@/store/modules/setting'
|
import { storeToRefs } from 'pinia'
|
function useSettingsHandlers() {
|
const settingStore = useSettingStore()
|
const domOperations = {
|
// 设置HTML类名
|
setHtmlClass: (className, add) => {
|
const el = document.getElementsByTagName('html')[0]
|
if (add) {
|
el.classList.add(className)
|
} else {
|
el.classList.remove(className)
|
}
|
},
|
// 设置根元素属性
|
setRootAttribute: (attribute, value) => {
|
const el = document.documentElement
|
el.setAttribute(attribute, value)
|
},
|
// 设置body类名
|
setBodyClass: (className, add) => {
|
const el = document.getElementsByTagName('body')[0]
|
if (add) {
|
el.classList.add(className)
|
} else {
|
el.classList.remove(className)
|
}
|
}
|
}
|
const createToggleHandler = (storeMethod, callback) => {
|
return () => {
|
storeMethod()
|
callback?.()
|
}
|
}
|
const createValueHandler = (storeMethod, callback) => {
|
return (value) => {
|
if (value !== void 0 && value !== null) {
|
storeMethod(value)
|
callback?.(value)
|
}
|
}
|
}
|
const basicHandlers = {
|
// 工作台标签页
|
workTab: createToggleHandler(() => settingStore.setWorkTab(!settingStore.showWorkTab)),
|
// 菜单手风琴
|
uniqueOpened: createToggleHandler(() => settingStore.setUniqueOpened()),
|
// 显示菜单按钮
|
menuButton: createToggleHandler(() => settingStore.setButton()),
|
// 显示快速入口
|
fastEnter: createToggleHandler(() => settingStore.setFastEnter()),
|
// 显示刷新按钮
|
refreshButton: createToggleHandler(() => settingStore.setShowRefreshButton()),
|
// 显示面包屑
|
crumbs: createToggleHandler(() => settingStore.setCrumbs()),
|
// 显示语言切换
|
language: createToggleHandler(() => settingStore.setLanguage()),
|
// 显示进度条
|
nprogress: createToggleHandler(() => settingStore.setNprogress()),
|
// 色弱模式
|
colorWeak: createToggleHandler(
|
() => settingStore.setColorWeak(),
|
() => {
|
domOperations.setHtmlClass('color-weak', settingStore.colorWeak)
|
}
|
),
|
// 水印显示
|
watermark: createToggleHandler(() =>
|
settingStore.setWatermarkVisible(!settingStore.watermarkVisible)
|
),
|
// 菜单展开宽度
|
menuOpenWidth: createValueHandler((width) => settingStore.setMenuOpenWidth(width)),
|
// 标签页风格
|
tabStyle: createValueHandler((style) => settingStore.setTabStyle(style)),
|
// 页面切换动画
|
pageTransition: createValueHandler((transition) => settingStore.setPageTransition(transition)),
|
// 圆角大小
|
customRadius: createValueHandler((radius) => settingStore.setCustomRadius(radius))
|
}
|
const boxStyleHandlers = {
|
// 设置盒子模式
|
setBoxMode: (type) => {
|
const { boxBorderMode } = storeToRefs(settingStore)
|
if (
|
(type === 'shadow-mode' && boxBorderMode.value === false) ||
|
(type === 'border-mode' && boxBorderMode.value === true)
|
) {
|
return
|
}
|
setTimeout(() => {
|
domOperations.setRootAttribute('data-box-mode', type)
|
settingStore.setBorderMode()
|
}, 50)
|
}
|
}
|
const colorHandlers = {
|
// 选择主题色
|
selectColor: (theme) => {
|
settingStore.setElementTheme(theme)
|
settingStore.reload()
|
}
|
}
|
const containerHandlers = {
|
// 设置容器宽度
|
setWidth: (type) => {
|
settingStore.setContainerWidth(type)
|
settingStore.reload()
|
}
|
}
|
return {
|
domOperations,
|
basicHandlers,
|
boxStyleHandlers,
|
colorHandlers,
|
containerHandlers,
|
createToggleHandler,
|
createValueHandler
|
}
|
}
|
export { useSettingsHandlers }
|
