new-zx-front-admin/src/store/modules/app.ts

import { defineStore } from 'pinia'
import { store } from '../index'
import { setCssVar, humpToUnderline } from '@/utils'
import { ElMessage } from 'element-plus'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { ElementPlusSize } from '@/types/elementPlus'
import { LayoutType } from '@/types/layout'
import { ThemeTypes } from '@/types/theme'

const { wsCache } = useCache()

interface AppState {
	breadcrumb : boolean
	breadcrumbIcon : boolean
	collapse : boolean
	uniqueOpened : boolean
	hamburger : boolean
	screenfull : boolean
	search : boolean
	size : boolean
	locale : boolean
	message : boolean
	tagsView : boolean
	tagsViewIcon : boolean
	logo : boolean
	fixedHeader : boolean
	greyMode : boolean
	pageLoading : boolean
	layout : LayoutType
	title : string
	userInfo : string
	isDark : boolean
	currentSize : ElementPlusSize
	sizeMap : ElementPlusSize[]
	mobile : boolean
	footer : boolean
	theme : ThemeTypes
	fixedMenu : boolean
}

export const useAppStore = defineStore('app', {
	state: () : AppState => {
		return {
			userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
			sizeMap: ['default', 'large', 'small'],
			mobile: false, // 是否是移动端
			title: import.meta.env.VITE_APP_TITLE, // 标题
			pageLoading: false, // 路由跳转loading

			breadcrumb: true, // 面包屑
			breadcrumbIcon: true, // 面包屑图标
			collapse: false, // 折叠菜单
			uniqueOpened: true, // 是否只保持一个子菜单的展开
			hamburger: true, // 折叠图标
			screenfull: true, // 全屏图标
			search: true, // 搜索图标
			size: true, // 尺寸图标
			locale: true, // 多语言图标
			message: true, // 消息图标
			tagsView: false, // 标签页
			tagsViewIcon: true, // 是否显示标签图标
			logo: true, // logo
			fixedHeader: true, // 固定toolheader
			footer: true, // 显示页脚
			greyMode: false, // 是否开始灰色模式，用于特殊悼念日
			fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单

			layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局
			isDark: wsCache.get(CACHE_KEY.IS_DARK) || false, // 是否是暗黑模式
			currentSize: wsCache.get('default') || 'default', // 组件尺寸
			theme: wsCache.get(CACHE_KEY.THEME) || {
				// 主题色
				elColorPrimary: '#409eff',
				// 左侧菜单边框颜色
				leftMenuBorderColor: 'inherit',
				// 左侧菜单背景颜色
				leftMenuBgColor: '#001529',
				// 左侧菜单浅色背景颜色
				leftMenuBgLightColor: '#0f2438',
				// 左侧菜单选中背景颜色
				leftMenuBgActiveColor: 'var(--el-color-primary)',
				// 左侧菜单收起选中背景颜色
				leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
				// 左侧菜单字体颜色
				leftMenuTextColor: '#bfcbd9',
				// 左侧菜单选中字体颜色
				leftMenuTextActiveColor: '#fff',
				// logo字体颜色
				logoTitleTextColor: '#fff',
				// logo边框颜色
				logoBorderColor: 'inherit',
				// 头部背景颜色
				topHeaderBgColor: '#fff',
				// 头部字体颜色
				topHeaderTextColor: 'inherit',
				// 头部悬停颜色
				topHeaderHoverColor: '#f6f6f6',
				// 头部边框颜色
				topToolBorderColor: '#eee'
			}
		}
	},
	getters: {
		getBreadcrumb() : boolean {
			return this.breadcrumb
		},
		getBreadcrumbIcon() : boolean {
			return this.breadcrumbIcon
		},
		getCollapse() : boolean {
			return this.collapse
		},
		getUniqueOpened() : boolean {
			return this.uniqueOpened
		},
		getHamburger() : boolean {
			return this.hamburger
		},
		getScreenfull() : boolean {
			return this.screenfull
		},
		getSize() : boolean {
			return this.size
		},
		getLocale() : boolean {
			return this.locale
		},
		getMessage() : boolean {
			return this.message
		},
		getTagsView() : boolean {
			return this.tagsView
		},
		getTagsViewIcon() : boolean {
			return this.tagsViewIcon
		},
		getLogo() : boolean {
			return this.logo
		},
		getFixedHeader() : boolean {
			return this.fixedHeader
		},
		getGreyMode() : boolean {
			return this.greyMode
		},
		getFixedMenu() : boolean {
			return this.fixedMenu
		},
		getPageLoading() : boolean {
			return this.pageLoading
		},
		getLayout() : LayoutType {
			return this.layout
		},
		getTitle() : string {
			return this.title
		},
		getUserInfo() : string {
			return this.userInfo
		},
		getIsDark() : boolean {
			return this.isDark
		},
		getCurrentSize() : ElementPlusSize {
			return this.currentSize
		},
		getSizeMap() : ElementPlusSize[] {
			return this.sizeMap
		},
		getMobile() : boolean {
			return this.mobile
		},
		getTheme() : ThemeTypes {
			return this.theme
		},
		getFooter() : boolean {
			return this.footer
		}
	},
	actions: {
		setBreadcrumb(breadcrumb : boolean) {
			this.breadcrumb = breadcrumb
		},
		setBreadcrumbIcon(breadcrumbIcon : boolean) {
			this.breadcrumbIcon = breadcrumbIcon
		},
		setCollapse(collapse : boolean) {
			this.collapse = collapse
		},
		setUniqueOpened(uniqueOpened : boolean) {
			this.uniqueOpened = uniqueOpened
		},
		setHamburger(hamburger : boolean) {
			this.hamburger = hamburger
		},
		setScreenfull(screenfull : boolean) {
			this.screenfull = screenfull
		},
		setSize(size : boolean) {
			this.size = size
		},
		setLocale(locale : boolean) {
			this.locale = locale
		},
		setMessage(message : boolean) {
			this.message = message
		},
		setTagsView(tagsView : boolean) {
			this.tagsView = tagsView
		},
		setTagsViewIcon(tagsViewIcon : boolean) {
			this.tagsViewIcon = tagsViewIcon
		},
		setLogo(logo : boolean) {
			this.logo = logo
		},
		setFixedHeader(fixedHeader : boolean) {
			this.fixedHeader = fixedHeader
		},
		setGreyMode(greyMode : boolean) {
			this.greyMode = greyMode
		},
		setFixedMenu(fixedMenu : boolean) {
			wsCache.set('fixedMenu', fixedMenu)
			this.fixedMenu = fixedMenu
		},
		setPageLoading(pageLoading : boolean) {
			this.pageLoading = pageLoading
		},
		setLayout(layout : LayoutType) {
			if (this.mobile && layout !== 'classic') {
				ElMessage.warning('移动端模式下不支持切换其他布局')
				return
			}
			this.layout = layout
			wsCache.set(CACHE_KEY.LAYOUT, this.layout)
		},
		setTitle(title : string) {
			this.title = title
		},
		setIsDark(isDark : boolean) {
			this.isDark = isDark
			if (this.isDark) {
				document.documentElement.classList.add('dark')
				document.documentElement.classList.remove('light')
			} else {
				document.documentElement.classList.add('light')
				document.documentElement.classList.remove('dark')
			}
			wsCache.set(CACHE_KEY.IS_DARK, this.isDark)
		},
		setCurrentSize(currentSize : ElementPlusSize) {
			this.currentSize = currentSize
			wsCache.set('currentSize', this.currentSize)
		},
		setMobile(mobile : boolean) {
			this.mobile = mobile
		},
		setTheme(theme : ThemeTypes) {
			this.theme = Object.assign(this.theme, theme)
			wsCache.set(CACHE_KEY.THEME, this.theme)
		},
		setCssVarTheme() {
			for (const key in this.theme) {
				setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
			}
		},
		setFooter(footer : boolean) {
			this.footer = footer
		}
	}
})

export const useAppStoreWithOut = () => {
	return useAppStore(store)
}