|
@@ -1,13 +1,20 @@
|
|
|
/* 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'
|
|
|
+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',
|
|
@@ -21,9 +28,7 @@ export const useAppStore = defineStore('app', {
|
|
|
sidebar: false,
|
|
|
languageList: [
|
|
|
{ code: 'zh', name: 'Chinese' },
|
|
|
-
|
|
|
{ code: 'en', name: 'English' },
|
|
|
-
|
|
|
],
|
|
|
isShowMainLoader: true,
|
|
|
semidark: false,
|
|
@@ -35,7 +40,7 @@ export const useAppStore = defineStore('app', {
|
|
|
|
|
|
actions: {
|
|
|
setMainLayout(payload: any = null) {
|
|
|
- this.mainLayout = payload; //app , auth
|
|
|
+ this.mainLayout = payload; // app , auth
|
|
|
},
|
|
|
toggleTheme(payload: any = null) {
|
|
|
payload = payload || this.theme; // light|dark|system
|
|
@@ -43,8 +48,7 @@ export const useAppStore = defineStore('app', {
|
|
|
this.theme = payload;
|
|
|
if (payload == 'light') {
|
|
|
this.isDarkMode = false;
|
|
|
- }
|
|
|
- else if (payload == 'dark') {
|
|
|
+ } else if (payload == 'dark') {
|
|
|
this.isDarkMode = true;
|
|
|
} else if (payload == 'system') {
|
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
@@ -62,7 +66,7 @@ export const useAppStore = defineStore('app', {
|
|
|
},
|
|
|
toggleMenu(payload: any = null) {
|
|
|
payload = payload || this.menu; // vertical, collapsible-vertical, horizontal
|
|
|
- this.sidebar = false; // reset sidebar state
|
|
|
+ //this.sidebar = false; // reset sidebar state
|
|
|
localStorage.setItem('menu', payload);
|
|
|
this.menu = payload;
|
|
|
},
|
|
@@ -95,6 +99,7 @@ export const useAppStore = defineStore('app', {
|
|
|
this.semidark = payload;
|
|
|
},
|
|
|
toggleLocale(payload: any = null) {
|
|
|
+ console.log(payload);
|
|
|
payload = payload || this.locale;
|
|
|
i18n.global.locale.value = payload;
|
|
|
localStorage.setItem('i18n_locale', payload);
|
|
@@ -116,9 +121,9 @@ export const useAppStore = defineStore('app', {
|
|
|
},
|
|
|
},
|
|
|
getters,
|
|
|
-});
|
|
|
- */
|
|
|
-import { defineStore } from 'pinia';
|
|
|
+}); */
|
|
|
+
|
|
|
+import { createStore } from 'vuex';
|
|
|
import i18n from '@/i18n';
|
|
|
import appSetting from '@/app-setting';
|
|
|
import app from './modules/app';
|
|
@@ -127,8 +132,36 @@ import tagsView from './modules/tagsView';
|
|
|
import * as user from './modules/user';
|
|
|
import getters from './getters';
|
|
|
|
|
|
-export const useAppStore = defineStore('app', {
|
|
|
- state: () => ({
|
|
|
+// 定义 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;
|
|
|
+ app: typeof app;
|
|
|
+ permission: typeof permission;
|
|
|
+ tagsView: typeof tagsView;
|
|
|
+ user: typeof user;
|
|
|
+}
|
|
|
+
|
|
|
+// 创建 store
|
|
|
+const store = createStore<State>({
|
|
|
+ modules: {
|
|
|
+ app,
|
|
|
+ permission,
|
|
|
+ tagsView,
|
|
|
+ user
|
|
|
+ },
|
|
|
+ state: {
|
|
|
isDarkMode: false,
|
|
|
mainLayout: 'app',
|
|
|
theme: 'light',
|
|
@@ -149,89 +182,109 @@ export const useAppStore = defineStore('app', {
|
|
|
permission,
|
|
|
tagsView,
|
|
|
user
|
|
|
- }),
|
|
|
-
|
|
|
- actions: {
|
|
|
- setMainLayout(payload: any = null) {
|
|
|
- this.mainLayout = payload; // app , auth
|
|
|
+ },
|
|
|
+ mutations: {
|
|
|
+ setMainLayout(state, payload) {
|
|
|
+ state.mainLayout = payload;
|
|
|
},
|
|
|
- toggleTheme(payload: any = null) {
|
|
|
- payload = payload || this.theme; // light|dark|system
|
|
|
+ toggleTheme(state, payload) {
|
|
|
+ payload = payload || state.theme;
|
|
|
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');
|
|
|
- }
|
|
|
+ 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(payload: any = null) {
|
|
|
- payload = payload || this.menu; // vertical, collapsible-vertical, horizontal
|
|
|
- //this.sidebar = false; // reset sidebar state
|
|
|
+ toggleMenu(state, payload) {
|
|
|
+ payload = payload || state.menu;
|
|
|
localStorage.setItem('menu', payload);
|
|
|
- this.menu = payload;
|
|
|
+ state.menu = payload;
|
|
|
},
|
|
|
- toggleLayout(payload: any = null) {
|
|
|
- payload = payload || this.layout; // full, boxed-layout
|
|
|
+ toggleLayout(state, payload) {
|
|
|
+ payload = payload || state.layout;
|
|
|
localStorage.setItem('layout', payload);
|
|
|
- this.layout = payload;
|
|
|
+ state.layout = payload;
|
|
|
},
|
|
|
- toggleRTL(payload: any = null) {
|
|
|
- payload = payload || this.rtlClass; // rtl, ltr
|
|
|
+ toggleRTL(state, payload) {
|
|
|
+ payload = payload || state.rtlClass;
|
|
|
localStorage.setItem('rtlClass', payload);
|
|
|
- this.rtlClass = payload;
|
|
|
- document.querySelector('html')?.setAttribute('dir', this.rtlClass || 'ltr');
|
|
|
+ state.rtlClass = payload;
|
|
|
+ document.querySelector('html')?.setAttribute('dir', state.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();
|
|
|
+ toggleAnimation(state, payload) {
|
|
|
+ payload = payload?.trim() || state.animation;
|
|
|
localStorage.setItem('animation', payload);
|
|
|
- this.animation = payload;
|
|
|
+ state.animation = payload;
|
|
|
appSetting.changeAnimation();
|
|
|
},
|
|
|
- toggleNavbar(payload: any = null) {
|
|
|
- payload = payload || this.navbar; // navbar-sticky, navbar-floating, navbar-static
|
|
|
+ toggleNavbar(state, payload) {
|
|
|
+ payload = payload || state.navbar;
|
|
|
localStorage.setItem('navbar', payload);
|
|
|
- this.navbar = payload;
|
|
|
+ state.navbar = payload;
|
|
|
},
|
|
|
- toggleSemidark(payload: any = null) {
|
|
|
+ toggleSemidark(state, payload) {
|
|
|
payload = payload || false;
|
|
|
localStorage.setItem('semidark', payload);
|
|
|
- this.semidark = payload;
|
|
|
+ state.semidark = payload;
|
|
|
},
|
|
|
- toggleLocale(payload: any = null) {
|
|
|
- console.log(payload);
|
|
|
- payload = payload || this.locale;
|
|
|
+ toggleLocale(state, payload) {
|
|
|
+ payload = payload || state.locale;
|
|
|
i18n.global.locale.value = payload;
|
|
|
localStorage.setItem('i18n_locale', payload);
|
|
|
- this.locale = payload;
|
|
|
- if (this.locale?.toLowerCase() === 'ae') {
|
|
|
- this.toggleRTL('rtl');
|
|
|
+ state.locale = payload;
|
|
|
+ if (state.locale?.toLowerCase() === 'ae') {
|
|
|
+ state.rtlClass = 'rtl';
|
|
|
} else {
|
|
|
- this.toggleRTL('ltr');
|
|
|
+ state.rtlClass = 'ltr';
|
|
|
}
|
|
|
+ document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
|
|
|
},
|
|
|
- toggleSidebar(state: boolean = false) {
|
|
|
- this.sidebar = !this.sidebar;
|
|
|
+ toggleSidebar(state) {
|
|
|
+ console.log(state.sidebar);
|
|
|
+ state.sidebar = !state.sidebar;
|
|
|
},
|
|
|
- toggleMainLoader(state: boolean = false) {
|
|
|
- this.isShowMainLoader = true;
|
|
|
+ toggleMainLoader(state) {
|
|
|
+ state.isShowMainLoader = true;
|
|
|
setTimeout(() => {
|
|
|
- this.isShowMainLoader = false;
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ toggleLocale({ commit }, payload) {
|
|
|
+ commit('toggleLocale', payload);
|
|
|
+ },
|
|
|
+ toggleSidebar({ commit }) {
|
|
|
+ commit('toggleSidebar');
|
|
|
+ },
|
|
|
+ toggleMainLoader({ commit }) {
|
|
|
+ commit('toggleMainLoader');
|
|
|
+ }
|
|
|
},
|
|
|
- getters,
|
|
|
-});
|
|
|
+ getters
|
|
|
+});
|
|
|
+
|
|
|
+export default store;
|