123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- /* 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<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;
|