app-setting.ts 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import { $themeConfig } from '../theme.config';
  2. import store from '@/stores';
  3. export default {
  4. init() {
  5. // set default styles
  6. let val: any = localStorage.getItem('theme'); // light, dark, system
  7. val = val || $themeConfig.theme;
  8. store.dispatch('toggleTheme', val);
  9. val = localStorage.getItem('menu'); // vertical, collapsible-vertical, horizontal
  10. val = val || $themeConfig.menu;
  11. store.dispatch('toggleMenu', val);
  12. val = localStorage.getItem('superMenu'); // vertical, collapsible-vertical, horizontal
  13. val = val || $themeConfig.superMenu;
  14. store.dispatch('toggleSuperMenu', val);
  15. val = localStorage.getItem('layout'); // full, boxed-layout
  16. val = val || $themeConfig.layout;
  17. store.dispatch('toggleLayout', val);
  18. val = localStorage.getItem('i18n_locale'); // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
  19. val = val || $themeConfig.locale;
  20. const list = store.getters.languageList;
  21. const item = list.find((item: any) => item.code === val);
  22. if (item) {
  23. this.toggleLanguage(item);
  24. }
  25. val = localStorage.getItem('rtlClass'); // rtl, ltr
  26. val = val || $themeConfig.rtlClass;
  27. store.dispatch('toggleRTL', val);
  28. val = localStorage.getItem('animation'); // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
  29. val = val || $themeConfig.animation;
  30. store.dispatch('toggleAnimation', val);
  31. val = localStorage.getItem('navbar'); // navbar-sticky, navbar-floating, navbar-static
  32. val = val || $themeConfig.navbar;
  33. store.dispatch('toggleNavbar', val);
  34. val = localStorage.getItem('semidark');
  35. val = val === 'true' ? true : $themeConfig.semidark;
  36. store.dispatch('toggleSemidark', val);
  37. },
  38. toggleLanguage(item: any) {
  39. /* const store = useStore(); */
  40. let lang: any = null;
  41. if (item) {
  42. lang = item;
  43. } else {
  44. let code = store.state.locale || null;
  45. if (!code) {
  46. code = localStorage.getItem('i18n_locale');
  47. }
  48. item = store.getters.languageList.find((d: any) => d.code === code);
  49. if (item) {
  50. lang = item;
  51. }
  52. }
  53. if (!lang) {
  54. lang = store.getters.languageList.find((d: any) => d.code === 'zh');
  55. }
  56. store.dispatch('toggleLocale', lang.code);
  57. return lang;
  58. },
  59. changeAnimation(type = 'add') {
  60. /* const store = useStore(); */
  61. if (store.state.animation) {
  62. const eleanimation: any = document.querySelector('.animation');
  63. if (type === 'add') {
  64. eleanimation?.classList.add('animate__animated');
  65. eleanimation?.classList.add(store.state.animation);
  66. } else {
  67. eleanimation?.classList.remove('animate__animated');
  68. eleanimation?.classList.remove(store.state.animation);
  69. }
  70. }
  71. },
  72. };