index.ts 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /* import { defineStore } from 'pinia';
  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. export const useAppStore = defineStore('app', {
  10. state: () => ({
  11. isDarkMode: false,
  12. mainLayout: 'app',
  13. theme: 'light',
  14. menu: 'horizontal',
  15. layout: 'full',
  16. rtlClass: 'ltr',
  17. animation: '',
  18. navbar: 'navbar-sticky',
  19. locale: 'zh',
  20. sidebar: false,
  21. languageList: [
  22. { code: 'zh', name: 'Chinese' },
  23. { code: 'en', name: 'English' },
  24. ],
  25. isShowMainLoader: true,
  26. semidark: false,
  27. app,
  28. permission,
  29. tagsView,
  30. user
  31. }),
  32. actions: {
  33. setMainLayout(payload: any = null) {
  34. this.mainLayout = payload; //app , auth
  35. },
  36. toggleTheme(payload: any = null) {
  37. payload = payload || this.theme; // light|dark|system
  38. localStorage.setItem('theme', payload);
  39. this.theme = payload;
  40. if (payload == 'light') {
  41. this.isDarkMode = false;
  42. }
  43. else if (payload == 'dark') {
  44. this.isDarkMode = true;
  45. } else if (payload == 'system') {
  46. if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  47. this.isDarkMode = true;
  48. } else {
  49. this.isDarkMode = false;
  50. }
  51. }
  52. if (this.isDarkMode) {
  53. document.querySelector('body')?.classList.add('dark');
  54. } else {
  55. document.querySelector('body')?.classList.remove('dark');
  56. }
  57. },
  58. toggleMenu(payload: any = null) {
  59. payload = payload || this.menu; // vertical, collapsible-vertical, horizontal
  60. this.sidebar = false; // reset sidebar state
  61. localStorage.setItem('menu', payload);
  62. this.menu = payload;
  63. },
  64. toggleLayout(payload: any = null) {
  65. payload = payload || this.layout; // full, boxed-layout
  66. localStorage.setItem('layout', payload);
  67. this.layout = payload;
  68. },
  69. toggleRTL(payload: any = null) {
  70. payload = payload || this.rtlClass; // rtl, ltr
  71. localStorage.setItem('rtlClass', payload);
  72. this.rtlClass = payload;
  73. document.querySelector('html')?.setAttribute('dir', this.rtlClass || 'ltr');
  74. },
  75. toggleAnimation(payload: any = null) {
  76. payload = payload || this.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
  77. payload = payload?.trim();
  78. localStorage.setItem('animation', payload);
  79. this.animation = payload;
  80. appSetting.changeAnimation();
  81. },
  82. toggleNavbar(payload: any = null) {
  83. payload = payload || this.navbar; // navbar-sticky, navbar-floating, navbar-static
  84. localStorage.setItem('navbar', payload);
  85. this.navbar = payload;
  86. },
  87. toggleSemidark(payload: any = null) {
  88. payload = payload || false;
  89. localStorage.setItem('semidark', payload);
  90. this.semidark = payload;
  91. },
  92. toggleLocale(payload: any = null) {
  93. payload = payload || this.locale;
  94. i18n.global.locale.value = payload;
  95. localStorage.setItem('i18n_locale', payload);
  96. this.locale = payload;
  97. if (this.locale?.toLowerCase() === 'ae') {
  98. this.toggleRTL('rtl');
  99. } else {
  100. this.toggleRTL('ltr');
  101. }
  102. },
  103. toggleSidebar(state: boolean = false) {
  104. this.sidebar = !this.sidebar;
  105. },
  106. toggleMainLoader(state: boolean = false) {
  107. this.isShowMainLoader = true;
  108. setTimeout(() => {
  109. this.isShowMainLoader = false;
  110. }, 500);
  111. },
  112. },
  113. getters,
  114. });
  115. */
  116. import { defineStore } from 'pinia';
  117. import i18n from '@/i18n';
  118. import appSetting from '@/app-setting';
  119. import app from './modules/app';
  120. import permission from './modules/permission';
  121. import tagsView from './modules/tagsView';
  122. import * as user from './modules/user';
  123. import getters from './getters';
  124. export const useAppStore = defineStore('app', {
  125. state: () => ({
  126. isDarkMode: false,
  127. mainLayout: 'app',
  128. theme: 'light',
  129. menu: 'horizontal',
  130. layout: 'full',
  131. rtlClass: 'ltr',
  132. animation: '',
  133. navbar: 'navbar-sticky',
  134. locale: 'zh',
  135. sidebar: false,
  136. languageList: [
  137. { code: 'zh', name: 'Chinese' },
  138. { code: 'en', name: 'English' },
  139. ],
  140. isShowMainLoader: true,
  141. semidark: false,
  142. app,
  143. permission,
  144. tagsView,
  145. user
  146. }),
  147. actions: {
  148. setMainLayout(payload: any = null) {
  149. this.mainLayout = payload; // app , auth
  150. },
  151. toggleTheme(payload: any = null) {
  152. payload = payload || this.theme; // light|dark|system
  153. localStorage.setItem('theme', payload);
  154. this.theme = payload;
  155. if (payload == 'light') {
  156. this.isDarkMode = false;
  157. } else if (payload == 'dark') {
  158. this.isDarkMode = true;
  159. } else if (payload == 'system') {
  160. if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  161. this.isDarkMode = true;
  162. } else {
  163. this.isDarkMode = false;
  164. }
  165. }
  166. if (this.isDarkMode) {
  167. document.querySelector('body')?.classList.add('dark');
  168. } else {
  169. document.querySelector('body')?.classList.remove('dark');
  170. }
  171. },
  172. toggleMenu(payload: any = null) {
  173. payload = payload || this.menu; // vertical, collapsible-vertical, horizontal
  174. //this.sidebar = false; // reset sidebar state
  175. localStorage.setItem('menu', payload);
  176. this.menu = payload;
  177. },
  178. toggleLayout(payload: any = null) {
  179. payload = payload || this.layout; // full, boxed-layout
  180. localStorage.setItem('layout', payload);
  181. this.layout = payload;
  182. },
  183. toggleRTL(payload: any = null) {
  184. payload = payload || this.rtlClass; // rtl, ltr
  185. localStorage.setItem('rtlClass', payload);
  186. this.rtlClass = payload;
  187. document.querySelector('html')?.setAttribute('dir', this.rtlClass || 'ltr');
  188. },
  189. toggleAnimation(payload: any = null) {
  190. payload = payload || this.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
  191. payload = payload?.trim();
  192. localStorage.setItem('animation', payload);
  193. this.animation = payload;
  194. appSetting.changeAnimation();
  195. },
  196. toggleNavbar(payload: any = null) {
  197. payload = payload || this.navbar; // navbar-sticky, navbar-floating, navbar-static
  198. localStorage.setItem('navbar', payload);
  199. this.navbar = payload;
  200. },
  201. toggleSemidark(payload: any = null) {
  202. payload = payload || false;
  203. localStorage.setItem('semidark', payload);
  204. this.semidark = payload;
  205. },
  206. toggleLocale(payload: any = null) {
  207. console.log(payload);
  208. payload = payload || this.locale;
  209. i18n.global.locale.value = payload;
  210. localStorage.setItem('i18n_locale', payload);
  211. this.locale = payload;
  212. if (this.locale?.toLowerCase() === 'ae') {
  213. this.toggleRTL('rtl');
  214. } else {
  215. this.toggleRTL('ltr');
  216. }
  217. },
  218. toggleSidebar(state: boolean = false) {
  219. this.sidebar = !this.sidebar;
  220. },
  221. toggleMainLoader(state: boolean = false) {
  222. this.isShowMainLoader = true;
  223. setTimeout(() => {
  224. this.isShowMainLoader = false;
  225. }, 500);
  226. },
  227. },
  228. getters,
  229. });