import { createStore, GetterTree } from 'vuex'; import i18n from '@/i18n'; import appSetting from '@/app-setting'; import app from './modules/app'; import permission from './modules/permission'; import tagsView from './modules/tagsView'; import * as user from './modules/user'; import getters from './getters'; // 定义 State 类型 export interface State { isDarkMode: boolean; mainLayout: string; theme: string; menu: string; layout: string; rtlClass: string; animation: string; navbar: string; locale: string; sidebar: boolean; languageList: Array<{ code: string; name: string }>; isShowMainLoader: boolean; semidark: boolean; superMenu: string; companId: string; } // 定义 Getters 类型 /* const getters: GetterTree = { sidebar: state => state.sidebar, language: state => state.locale, device: state => state.layout, visitedViews: state => state.tagsView.visitedViews, cachedViews: state => state.tagsView.cachedViews, // ... other getters }; */ // 创建 store const store = createStore({ modules: { app, permission, tagsView, user }, state: { isDarkMode: false, mainLayout: 'app', theme: 'light', menu: 'vertical', layout: 'full', rtlClass: 'ltr', animation: '', navbar: 'navbar-sticky', locale: 'zh', sidebar: false, languageList: [ { code: 'zh', name: 'Chinese' }, { code: 'en', name: 'English' }, ], isShowMainLoader: true, semidark: false, superMenu: 'super', companId: "" }, mutations: { setMainLayout(state, payload) { state.mainLayout = payload; }, toggleTheme(state, payload) { payload = payload || state.theme; localStorage.setItem('theme', payload); state.theme = payload; state.isDarkMode = payload === 'dark' || (payload === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); document.querySelector('body')?.classList.toggle('dark', state.isDarkMode); }, toggleMenu(state, payload) { payload = payload || state.menu; state.sidebar = false; // reset sidebar state localStorage.setItem('menu', payload); state.menu = payload; }, toggleLayout(state, payload) { payload = payload || state.layout; localStorage.setItem('layout', payload); state.layout = payload; }, toggleRTL(state, payload) { payload = payload || state.rtlClass; localStorage.setItem('rtlClass', payload); state.rtlClass = payload; document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr'); }, toggleAnimation(state, payload) { payload = payload?.trim() || state.animation; localStorage.setItem('animation', payload); state.animation = payload; appSetting.changeAnimation(); }, toggleNavbar(state, payload) { payload = payload || state.navbar; localStorage.setItem('navbar', payload); state.navbar = payload; }, toggleSemidark(state, payload) { payload = payload || false; localStorage.setItem('semidark', payload); state.semidark = payload; }, /* 菜单控制 */ toggleSuperMenu(state, payload) { payload = payload || state.superMenu; localStorage.setItem('superMenu', payload); state.superMenu = payload; }, /* 公司ID */ toggleCompanId(state, payload) { payload = payload || state.companId; localStorage.setItem('companId', payload); state.companId = payload; }, toggleLocale(state, payload) { payload = payload || state.locale; i18n.global.locale.value = payload; localStorage.setItem('i18n_locale', payload); state.locale = payload; if (state.locale?.toLowerCase() === 'ae') { state.rtlClass = 'rtl'; } else { state.rtlClass = 'ltr'; } document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr'); }, toggleSidebar(state) { state.sidebar = !state.sidebar; }, toggleMainLoader(state) { state.isShowMainLoader = true; setTimeout(() => { state.isShowMainLoader = false; }, 500); } }, actions: { setMainLayout({ commit }, payload) { commit('setMainLayout', payload); }, toggleTheme({ commit }, payload) { commit('toggleTheme', payload); }, toggleMenu({ commit }, payload) { commit('toggleMenu', payload); }, toggleLayout({ commit }, payload) { commit('toggleLayout', payload); }, toggleRTL({ commit }, payload) { commit('toggleRTL', payload); }, toggleAnimation({ commit }, payload) { commit('toggleAnimation', payload); }, toggleNavbar({ commit }, payload) { commit('toggleNavbar', payload); }, toggleSemidark({ commit }, payload) { commit('toggleSemidark', payload); }, toggleSuperMenu({ commit }, payload) { commit('toggleSuperMenu', payload); }, toggleCompanId({ commit }, payload) { commit('toggleCompanId', payload); }, toggleLocale({ commit }, payload) { commit('toggleLocale', payload); }, toggleSidebar({ commit }) { commit('toggleSidebar'); }, toggleMainLoader({ commit }) { commit('toggleMainLoader'); } }, getters }); export default store;