/* import { defineStore } from 'pinia'; import { createStore } 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'; export const useAppStore = defineStore('app', { modules: { app, permission, tagsView, user }, state: () => ({ isDarkMode: false, mainLayout: 'app', theme: 'light', menu: 'horizontal', 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, app, permission, tagsView, user }), actions: { setMainLayout(payload: any = null) { this.mainLayout = payload; // app , auth }, toggleTheme(payload: any = null) { payload = payload || this.theme; // light|dark|system localStorage.setItem('theme', payload); this.theme = payload; if (payload == 'light') { this.isDarkMode = false; } else if (payload == 'dark') { this.isDarkMode = true; } else if (payload == 'system') { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { this.isDarkMode = true; } else { this.isDarkMode = false; } } if (this.isDarkMode) { document.querySelector('body')?.classList.add('dark'); } else { document.querySelector('body')?.classList.remove('dark'); } }, toggleMenu(payload: any = null) { payload = payload || this.menu; // vertical, collapsible-vertical, horizontal //this.sidebar = false; // reset sidebar state localStorage.setItem('menu', payload); this.menu = payload; }, toggleLayout(payload: any = null) { payload = payload || this.layout; // full, boxed-layout localStorage.setItem('layout', payload); this.layout = payload; }, toggleRTL(payload: any = null) { payload = payload || this.rtlClass; // rtl, ltr localStorage.setItem('rtlClass', payload); this.rtlClass = payload; document.querySelector('html')?.setAttribute('dir', this.rtlClass || 'ltr'); }, toggleAnimation(payload: any = null) { payload = payload || this.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn payload = payload?.trim(); localStorage.setItem('animation', payload); this.animation = payload; appSetting.changeAnimation(); }, toggleNavbar(payload: any = null) { payload = payload || this.navbar; // navbar-sticky, navbar-floating, navbar-static localStorage.setItem('navbar', payload); this.navbar = payload; }, toggleSemidark(payload: any = null) { payload = payload || false; localStorage.setItem('semidark', payload); this.semidark = payload; }, toggleLocale(payload: any = null) { console.log(payload); payload = payload || this.locale; i18n.global.locale.value = payload; localStorage.setItem('i18n_locale', payload); this.locale = payload; if (this.locale?.toLowerCase() === 'ae') { this.toggleRTL('rtl'); } else { this.toggleRTL('ltr'); } }, toggleSidebar(state: boolean = false) { this.sidebar = !this.sidebar; }, toggleMainLoader(state: boolean = false) { this.isShowMainLoader = true; setTimeout(() => { this.isShowMainLoader = false; }, 500); }, }, getters, }); */ import { createStore } 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 } // 创建 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;