feat(projects): 1.0 beta

src/store/modules/app/index.ts

@@ -1,110 +1,144 @@
-import { nextTick } from 'vue';
+import { ref, watch, effectScope, onScopeDispose } from 'vue';
 import { defineStore } from 'pinia';
-import type { Socket } from 'socket.io-client';
-import { LAYOUT_SCROLL_EL_ID } from '@soybeanjs/vue-materials';
+import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
+import { useBoolean } from '@sa/hooks';
+import { SetupStoreId } from '@/enum';
+import { router } from '@/router';
+import { $t, setLocale } from '@/locales';
+import { setDayjsLocale } from '@/locales/dayjs';
+import { localStg } from '@/utils/storage';
+import { useRouteStore } from '../route';
+import { useTabStore } from '../tab';
+import { useThemeStore } from '../theme';
 
-interface AppState {
-  /** 滚动元素的id */
-  scrollElId: string;
-  /** 主体内容全屏 */
-  contentFull: boolean;
-  /** 禁用主体内容的水平方向的滚动 */
-  disableMainXScroll: boolean;
-  /** 重载页面(控制页面的显示) */
-  reloadFlag: boolean;
-  /** 项目配置的抽屉可见状态 */
-  settingDrawerVisible: boolean;
-  /** 侧边栏折叠状态 */
-  siderCollapse: boolean;
-  /** vertical-mix模式下 侧边栏的固定状态 */
-  mixSiderFixed: boolean;
-  /** socket.io 实例 */
-  socket: Socket | null;
-}
+export const useAppStore = defineStore(SetupStoreId.App, () => {
+  const themeStore = useThemeStore();
+  const routeStore = useRouteStore();
+  const tabStore = useTabStore();
+  const scope = effectScope();
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const { bool: themeDrawerVisible, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean();
+  const { bool: reloadFlag, setBool: setReloadFlag } = useBoolean(true);
+  const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
+  const { bool: contentXScrollable, setBool: setContentXScrollable } = useBoolean();
+  const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
+  const { bool: mixSiderFixed, setBool: setMixSiderFixed, toggle: toggleMixSiderFixed } = useBoolean();
 
-export const useAppStore = defineStore('app-store', {
-  state: (): AppState => ({
-    scrollElId: LAYOUT_SCROLL_EL_ID,
-    contentFull: false,
-    disableMainXScroll: false,
-    reloadFlag: true,
-    settingDrawerVisible: false,
-    siderCollapse: false,
-    mixSiderFixed: false,
-    socket: null
-  }),
-  actions: {
-    /**
-     * 获取滚动配置
-     */
-    getScrollConfig() {
-      const scrollEl = document.querySelector(`#${this.scrollElId}`);
+  /**
+   * is mobile layout
+   */
+  const isMobile = breakpoints.smaller('sm');
 
-      const { scrollLeft = 0, scrollTop = 0 } = scrollEl || {};
+  /**
+   * reload page
+   * @param duration duration time
+   */
+  async function reloadPage(duration = 0) {
+    setReloadFlag(false);
 
-      return {
-        scrollEl,
-        scrollLeft,
-        scrollTop
-      };
-    },
-    /**
-     * 重载页面
-     * @param duration - 重载的延迟时间(ms)
-     */
-    async reloadPage(duration = 0) {
-      this.reloadFlag = false;
-      await nextTick();
-      if (duration) {
-        setTimeout(() => {
-          this.reloadFlag = true;
-        }, duration);
-      } else {
-        this.reloadFlag = true;
-      }
-      setTimeout(() => {
-        document.documentElement.scrollTo({ left: 0, top: 0 });
-      }, 100);
-    },
-    /** 打开设置抽屉 */
-    openSettingDrawer() {
-      this.settingDrawerVisible = true;
-    },
-    /** 关闭设置抽屉 */
-    closeSettingDrawer() {
-      this.settingDrawerVisible = false;
-    },
-    /** 切换抽屉可见状态 */
-    toggleSettingDrawerVisible() {
-      this.settingDrawerVisible = !this.settingDrawerVisible;
-    },
-    /** 设置侧边栏折叠状态 */
-    setSiderCollapse(collapse: boolean) {
-      this.siderCollapse = collapse;
-    },
-    /** 折叠/展开 侧边栏折叠状态 */
-    toggleSiderCollapse() {
-      this.siderCollapse = !this.siderCollapse;
-    },
-    /** 设置 vertical-mix模式下 侧边栏的固定状态 */
-    setMixSiderIsFixed(isFixed: boolean) {
-      this.mixSiderFixed = isFixed;
-    },
-    /** 设置 vertical-mix模式下 侧边栏的固定状态 */
-    toggleMixSiderFixed() {
-      this.mixSiderFixed = !this.mixSiderFixed;
-    },
-    /** 设置主体是否禁用滚动 */
-    setDisableMainXScroll(disable: boolean) {
-      this.disableMainXScroll = disable;
-    },
-    /** 设置主体内容全屏 */
-    setContentFull(full: boolean) {
-      this.contentFull = full;
-    },
-    /** 设置socket实例 */
-    setSocket<T extends Socket = Socket>(socket: T) {
-      this.socket = socket;
+    if (duration > 0) {
+      await new Promise(resolve => {
+        setTimeout(resolve, duration);
+      });
     }
+
+    setReloadFlag(true);
   }
+
+  const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');
+
+  const localeOptions: App.I18n.LangOption[] = [
+    {
+      label: '中文',
+      key: 'zh-CN'
+    },
+    {
+      label: 'English',
+      key: 'en-US'
+    }
+  ];
+
+  function changeLocale(lang: App.I18n.LangType) {
+    locale.value = lang;
+    setLocale(lang);
+    localStg.set('lang', lang);
+  }
+
+  /**
+   * update document title by locale
+   */
+  function updateDocumentTitleByLocale() {
+    const { i18nKey, title } = router.currentRoute.value.meta;
+
+    const documentTitle = i18nKey ? $t(i18nKey) : title;
+
+    useTitle(documentTitle);
+  }
+
+  function init() {
+    setDayjsLocale(locale.value);
+  }
+
+  // watch store
+  scope.run(() => {
+    // watch isMobile, if is mobile, collapse sider
+    watch(
+      isMobile,
+      newValue => {
+        if (newValue) {
+          setSiderCollapse(true);
+
+          themeStore.setThemeLayout('vertical');
+        }
+      },
+      { immediate: true }
+    );
+
+    // watch locale
+    watch(locale, () => {
+      // update document title by locale
+      updateDocumentTitleByLocale();
+
+      // update global menus by locale
+      routeStore.updateGlobalMenusByLocale();
+
+      // update tabs by locale
+      tabStore.updateTabsByLocale();
+
+      // sey dayjs locale
+      setDayjsLocale(locale.value);
+    });
+  });
+
+  /**
+   * on scope dispose
+   */
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
+  // init
+  init();
+
+  return {
+    isMobile,
+    reloadFlag,
+    reloadPage,
+    fullContent,
+    locale,
+    localeOptions,
+    changeLocale,
+    themeDrawerVisible,
+    openThemeDrawer,
+    closeThemeDrawer,
+    toggleFullContent,
+    contentXScrollable,
+    setContentXScrollable,
+    siderCollapse,
+    setSiderCollapse,
+    toggleSiderCollapse,
+    mixSiderFixed,
+    setMixSiderFixed,
+    toggleMixSiderFixed
+  };
 });