index.ts 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. import { createStore, GetterTree } from 'vuex';
  2. import i18n from '@/i18n';
  3. import appSetting from '@/app-setting';
  4. import app from './modules/app';
  5. import permission from './modules/permission';
  6. import tagsView from './modules/tagsView';
  7. import * as user from './modules/user';
  8. import getters from './getters';
  9. // 定义 State 类型
  10. export interface State {
  11. isDarkMode: boolean;
  12. mainLayout: string;
  13. theme: string;
  14. menu: string;
  15. layout: string;
  16. rtlClass: string;
  17. animation: string;
  18. navbar: string;
  19. locale: string;
  20. sidebar: boolean;
  21. languageList: Array<{ code: string; name: string }>;
  22. isShowMainLoader: boolean;
  23. semidark: boolean;
  24. superMenu: string;
  25. companId: string;
  26. }
  27. // 定义 Getters 类型
  28. /* const getters: GetterTree<State, State> = {
  29. sidebar: state => state.sidebar,
  30. language: state => state.locale,
  31. device: state => state.layout,
  32. visitedViews: state => state.tagsView.visitedViews,
  33. cachedViews: state => state.tagsView.cachedViews,
  34. // ... other getters
  35. }; */
  36. // 创建 store
  37. const store = createStore<State>({
  38. modules: {
  39. app,
  40. permission,
  41. tagsView,
  42. user
  43. },
  44. state: {
  45. isDarkMode: false,
  46. mainLayout: 'app',
  47. theme: 'light',
  48. menu: 'vertical',
  49. layout: 'full',
  50. rtlClass: 'ltr',
  51. animation: '',
  52. navbar: 'navbar-sticky',
  53. locale: 'zh',
  54. sidebar: false,
  55. languageList: [
  56. { code: 'zh', name: 'Chinese' },
  57. { code: 'en', name: 'English' },
  58. ],
  59. isShowMainLoader: true,
  60. semidark: false,
  61. superMenu: 'super',
  62. companId: ""
  63. },
  64. mutations: {
  65. setMainLayout(state, payload) {
  66. state.mainLayout = payload;
  67. },
  68. toggleTheme(state, payload) {
  69. payload = payload || state.theme;
  70. localStorage.setItem('theme', payload);
  71. state.theme = payload;
  72. state.isDarkMode = payload === 'dark' || (payload === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
  73. document.querySelector('body')?.classList.toggle('dark', state.isDarkMode);
  74. },
  75. toggleMenu(state, payload) {
  76. payload = payload || state.menu;
  77. state.sidebar = false; // reset sidebar state
  78. localStorage.setItem('menu', payload);
  79. state.menu = payload;
  80. },
  81. toggleLayout(state, payload) {
  82. payload = payload || state.layout;
  83. localStorage.setItem('layout', payload);
  84. state.layout = payload;
  85. },
  86. toggleRTL(state, payload) {
  87. payload = payload || state.rtlClass;
  88. localStorage.setItem('rtlClass', payload);
  89. state.rtlClass = payload;
  90. document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
  91. },
  92. toggleAnimation(state, payload) {
  93. payload = payload?.trim() || state.animation;
  94. localStorage.setItem('animation', payload);
  95. state.animation = payload;
  96. appSetting.changeAnimation();
  97. },
  98. toggleNavbar(state, payload) {
  99. payload = payload || state.navbar;
  100. localStorage.setItem('navbar', payload);
  101. state.navbar = payload;
  102. },
  103. toggleSemidark(state, payload) {
  104. payload = payload || false;
  105. localStorage.setItem('semidark', payload);
  106. state.semidark = payload;
  107. },
  108. /* 菜单控制 */
  109. toggleSuperMenu(state, payload) {
  110. payload = payload || state.superMenu;
  111. localStorage.setItem('superMenu', payload);
  112. state.superMenu = payload;
  113. },
  114. /* 公司ID */
  115. toggleCompanId(state, payload) {
  116. payload = payload || state.companId;
  117. localStorage.setItem('companId', payload);
  118. state.companId = payload;
  119. },
  120. toggleLocale(state, payload) {
  121. payload = payload || state.locale;
  122. i18n.global.locale.value = payload;
  123. localStorage.setItem('i18n_locale', payload);
  124. state.locale = payload;
  125. if (state.locale?.toLowerCase() === 'ae') {
  126. state.rtlClass = 'rtl';
  127. } else {
  128. state.rtlClass = 'ltr';
  129. }
  130. document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
  131. },
  132. toggleSidebar(state) {
  133. state.sidebar = !state.sidebar;
  134. },
  135. toggleMainLoader(state) {
  136. state.isShowMainLoader = true;
  137. setTimeout(() => {
  138. state.isShowMainLoader = false;
  139. }, 500);
  140. }
  141. },
  142. actions: {
  143. setMainLayout({ commit }, payload) {
  144. commit('setMainLayout', payload);
  145. },
  146. toggleTheme({ commit }, payload) {
  147. commit('toggleTheme', payload);
  148. },
  149. toggleMenu({ commit }, payload) {
  150. commit('toggleMenu', payload);
  151. },
  152. toggleLayout({ commit }, payload) {
  153. commit('toggleLayout', payload);
  154. },
  155. toggleRTL({ commit }, payload) {
  156. commit('toggleRTL', payload);
  157. },
  158. toggleAnimation({ commit }, payload) {
  159. commit('toggleAnimation', payload);
  160. },
  161. toggleNavbar({ commit }, payload) {
  162. commit('toggleNavbar', payload);
  163. },
  164. toggleSemidark({ commit }, payload) {
  165. commit('toggleSemidark', payload);
  166. },
  167. toggleSuperMenu({ commit }, payload) {
  168. commit('toggleSuperMenu', payload);
  169. },
  170. toggleCompanId({ commit }, payload) {
  171. commit('toggleCompanId', payload);
  172. },
  173. toggleLocale({ commit }, payload) {
  174. commit('toggleLocale', payload);
  175. },
  176. toggleSidebar({ commit }) {
  177. commit('toggleSidebar');
  178. },
  179. toggleMainLoader({ commit }) {
  180. commit('toggleMainLoader');
  181. }
  182. },
  183. getters
  184. });
  185. export default store;