123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- 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<State, State> = {
- 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<State>({
- 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;
|