index.ts 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. /* import { defineStore } from 'pinia';
  2. import { createStore } from 'vuex';
  3. import i18n from '@/i18n';
  4. import appSetting from '@/app-setting';
  5. import app from './modules/app';
  6. import permission from './modules/permission';
  7. import tagsView from './modules/tagsView';
  8. import * as user from './modules/user';
  9. import getters from './getters';
  10. export const useAppStore = defineStore('app', {
  11. modules: {
  12. app,
  13. permission,
  14. tagsView,
  15. user
  16. },
  17. state: () => ({
  18. isDarkMode: false,
  19. mainLayout: 'app',
  20. theme: 'light',
  21. menu: 'horizontal',
  22. layout: 'full',
  23. rtlClass: 'ltr',
  24. animation: '',
  25. navbar: 'navbar-sticky',
  26. locale: 'zh',
  27. sidebar: false,
  28. languageList: [
  29. { code: 'zh', name: 'Chinese' },
  30. { code: 'en', name: 'English' },
  31. ],
  32. isShowMainLoader: true,
  33. semidark: false,
  34. app,
  35. permission,
  36. tagsView,
  37. user
  38. }),
  39. actions: {
  40. setMainLayout(payload: any = null) {
  41. this.mainLayout = payload; // app , auth
  42. },
  43. toggleTheme(payload: any = null) {
  44. payload = payload || this.theme; // light|dark|system
  45. localStorage.setItem('theme', payload);
  46. this.theme = payload;
  47. if (payload == 'light') {
  48. this.isDarkMode = false;
  49. } else if (payload == 'dark') {
  50. this.isDarkMode = true;
  51. } else if (payload == 'system') {
  52. if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  53. this.isDarkMode = true;
  54. } else {
  55. this.isDarkMode = false;
  56. }
  57. }
  58. if (this.isDarkMode) {
  59. document.querySelector('body')?.classList.add('dark');
  60. } else {
  61. document.querySelector('body')?.classList.remove('dark');
  62. }
  63. },
  64. toggleMenu(payload: any = null) {
  65. payload = payload || this.menu; // vertical, collapsible-vertical, horizontal
  66. //this.sidebar = false; // reset sidebar state
  67. localStorage.setItem('menu', payload);
  68. this.menu = payload;
  69. },
  70. toggleLayout(payload: any = null) {
  71. payload = payload || this.layout; // full, boxed-layout
  72. localStorage.setItem('layout', payload);
  73. this.layout = payload;
  74. },
  75. toggleRTL(payload: any = null) {
  76. payload = payload || this.rtlClass; // rtl, ltr
  77. localStorage.setItem('rtlClass', payload);
  78. this.rtlClass = payload;
  79. document.querySelector('html')?.setAttribute('dir', this.rtlClass || 'ltr');
  80. },
  81. toggleAnimation(payload: any = null) {
  82. payload = payload || this.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
  83. payload = payload?.trim();
  84. localStorage.setItem('animation', payload);
  85. this.animation = payload;
  86. appSetting.changeAnimation();
  87. },
  88. toggleNavbar(payload: any = null) {
  89. payload = payload || this.navbar; // navbar-sticky, navbar-floating, navbar-static
  90. localStorage.setItem('navbar', payload);
  91. this.navbar = payload;
  92. },
  93. toggleSemidark(payload: any = null) {
  94. payload = payload || false;
  95. localStorage.setItem('semidark', payload);
  96. this.semidark = payload;
  97. },
  98. toggleLocale(payload: any = null) {
  99. console.log(payload);
  100. payload = payload || this.locale;
  101. i18n.global.locale.value = payload;
  102. localStorage.setItem('i18n_locale', payload);
  103. this.locale = payload;
  104. if (this.locale?.toLowerCase() === 'ae') {
  105. this.toggleRTL('rtl');
  106. } else {
  107. this.toggleRTL('ltr');
  108. }
  109. },
  110. toggleSidebar(state: boolean = false) {
  111. this.sidebar = !this.sidebar;
  112. },
  113. toggleMainLoader(state: boolean = false) {
  114. this.isShowMainLoader = true;
  115. setTimeout(() => {
  116. this.isShowMainLoader = false;
  117. }, 500);
  118. },
  119. },
  120. getters,
  121. }); */
  122. import { createStore } from 'vuex';
  123. import i18n from '@/i18n';
  124. import appSetting from '@/app-setting';
  125. import app from './modules/app';
  126. import permission from './modules/permission';
  127. import tagsView from './modules/tagsView';
  128. import * as user from './modules/user';
  129. import getters from './getters';
  130. // 定义 State 类型
  131. export interface State {
  132. isDarkMode: boolean;
  133. mainLayout: string;
  134. theme: string;
  135. menu: string;
  136. layout: string;
  137. rtlClass: string;
  138. animation: string;
  139. navbar: string;
  140. locale: string;
  141. sidebar: boolean;
  142. languageList: Array<{ code: string; name: string }>;
  143. isShowMainLoader: boolean;
  144. semidark: boolean;
  145. superMenu:string;
  146. companId:string
  147. }
  148. // 创建 store
  149. const store = createStore<State>({
  150. modules: {
  151. app,
  152. permission,
  153. tagsView,
  154. user
  155. },
  156. state: {
  157. isDarkMode: false,
  158. mainLayout: 'app',
  159. theme: 'light',
  160. menu: 'vertical',
  161. layout: 'full',
  162. rtlClass: 'ltr',
  163. animation: '',
  164. navbar: 'navbar-sticky',
  165. locale: 'zh',
  166. sidebar: false,
  167. languageList: [
  168. { code: 'zh', name: 'Chinese' },
  169. { code: 'en', name: 'English' },
  170. ],
  171. isShowMainLoader: true,
  172. semidark: false,
  173. superMenu:'super',
  174. companId:""
  175. },
  176. mutations: {
  177. setMainLayout(state, payload) {
  178. state.mainLayout = payload;
  179. },
  180. toggleTheme(state, payload) {
  181. payload = payload || state.theme;
  182. localStorage.setItem('theme', payload);
  183. state.theme = payload;
  184. state.isDarkMode = payload === 'dark' || (payload === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
  185. document.querySelector('body')?.classList.toggle('dark', state.isDarkMode);
  186. },
  187. toggleMenu(state, payload) {
  188. payload = payload || state.menu;
  189. state.sidebar = false; // reset sidebar state
  190. localStorage.setItem('menu', payload);
  191. state.menu = payload;
  192. },
  193. toggleLayout(state, payload) {
  194. payload = payload || state.layout;
  195. localStorage.setItem('layout', payload);
  196. state.layout = payload;
  197. },
  198. toggleRTL(state, payload) {
  199. payload = payload || state.rtlClass;
  200. localStorage.setItem('rtlClass', payload);
  201. state.rtlClass = payload;
  202. document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
  203. },
  204. toggleAnimation(state, payload) {
  205. payload = payload?.trim() || state.animation;
  206. localStorage.setItem('animation', payload);
  207. state.animation = payload;
  208. appSetting.changeAnimation();
  209. },
  210. toggleNavbar(state, payload) {
  211. payload = payload || state.navbar;
  212. localStorage.setItem('navbar', payload);
  213. state.navbar = payload;
  214. },
  215. toggleSemidark(state, payload) {
  216. payload = payload || false;
  217. localStorage.setItem('semidark', payload);
  218. state.semidark = payload;
  219. },
  220. /* 菜单控制 */
  221. toggleSuperMenu(state,payload) {
  222. payload = payload || state.superMenu;
  223. localStorage.setItem('superMenu', payload);
  224. state.superMenu = payload;
  225. },
  226. /* 公司ID */
  227. toggleCompanId(state,payload) {
  228. payload = payload || state.companId;
  229. localStorage.setItem('companId', payload);
  230. state.companId = payload;
  231. },
  232. toggleLocale(state, payload) {
  233. payload = payload || state.locale;
  234. i18n.global.locale.value = payload;
  235. localStorage.setItem('i18n_locale', payload);
  236. state.locale = payload;
  237. if (state.locale?.toLowerCase() === 'ae') {
  238. state.rtlClass = 'rtl';
  239. } else {
  240. state.rtlClass = 'ltr';
  241. }
  242. document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
  243. },
  244. toggleSidebar(state) {
  245. state.sidebar = !state.sidebar;
  246. },
  247. toggleMainLoader(state) {
  248. state.isShowMainLoader = true;
  249. setTimeout(() => {
  250. state.isShowMainLoader = false;
  251. }, 500);
  252. }
  253. },
  254. actions: {
  255. setMainLayout({ commit }, payload) {
  256. commit('setMainLayout', payload);
  257. },
  258. toggleTheme({ commit }, payload) {
  259. commit('toggleTheme', payload);
  260. },
  261. toggleMenu({ commit }, payload) {
  262. commit('toggleMenu', payload);
  263. },
  264. toggleLayout({ commit }, payload) {
  265. commit('toggleLayout', payload);
  266. },
  267. toggleRTL({ commit }, payload) {
  268. commit('toggleRTL', payload);
  269. },
  270. toggleAnimation({ commit }, payload) {
  271. commit('toggleAnimation', payload);
  272. },
  273. toggleNavbar({ commit }, payload) {
  274. commit('toggleNavbar', payload);
  275. },
  276. toggleSemidark({ commit }, payload) {
  277. commit('toggleSemidark', payload);
  278. },
  279. toggleSuperMenu({ commit }, payload) {
  280. commit('toggleSuperMenu', payload);
  281. },
  282. toggleCompanId({ commit }, payload) {
  283. commit('toggleCompanId', payload);
  284. },
  285. toggleLocale({ commit }, payload) {
  286. commit('toggleLocale', payload);
  287. },
  288. toggleSidebar({ commit }) {
  289. commit('toggleSidebar');
  290. },
  291. toggleMainLoader({ commit }) {
  292. commit('toggleMainLoader');
  293. }
  294. },
  295. getters
  296. });
  297. export default store;