refactor(projects): 代码优化

ISSUES CLOSED: \

src/hooks/common/index.ts

@@ -3,7 +3,5 @@ import useBoolean from './useBoolean';
 import useLoading from './useLoading';
 import useLoadingEmpty from './useLoadingEmpty';
 import useReload from './useReload';
-import useBodyScroll from './useBodyScroll';
-import useModalVisible from './useModalVisible';
 
-export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload, useBodyScroll, useModalVisible };
+export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload };

src/hooks/common/useBodyScroll.ts

@@ -1,47 +0,0 @@
-interface ScrollBodyStyle {
-  overflow: string;
-  paddingRight: string;
-}
-
-/**
- * body标签滚动
- * @param duration - 显示滚动条的延迟时间
- */
-export default function useBodyScroll(duration = 300) {
-  const defaultStyle: ScrollBodyStyle = {
-    overflow: '',
-    paddingRight: ''
-  };
-  function getInitBodyStyle() {
-    const { overflow, paddingRight } = document.body.style;
-    Object.assign(defaultStyle, { overflow, paddingRight });
-  }
-  function setScrollBodyStyle() {
-    document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
-    document.body.style.overflow = 'hidden';
-  }
-  function resetScrollBodyStyle() {
-    document.body.style.overflow = defaultStyle.overflow;
-    document.body.style.paddingRight = defaultStyle.paddingRight;
-  }
-
-  /**
-   * 处理body的滚动条
-   * @param hideScroll - 禁止滚动
-   */
-  function scrollBodyHandler(hideScroll: boolean) {
-    if (hideScroll) {
-      setScrollBodyStyle();
-    } else {
-      setTimeout(() => {
-        resetScrollBodyStyle();
-      }, duration);
-    }
-  }
-
-  getInitBodyStyle();
-
-  return {
-    scrollBodyHandler
-  };
-}

src/hooks/common/useModalVisible.ts

@@ -1,33 +0,0 @@
-import { watch, onUnmounted } from 'vue';
-import useBoolean from './useBoolean';
-import useBodyScroll from './useBodyScroll';
-
-/**
- * 使用弹窗
- * @param hideScroll - 关闭html滚动条
- */
-export default function useModalVisible(hideScroll = true) {
-  const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
-  const { scrollBodyHandler } = useBodyScroll();
-
-  function modalVisibleWatcher() {
-    const stopHandle = watch(visible, async newValue => {
-      scrollBodyHandler(newValue);
-    });
-
-    onUnmounted(() => {
-      stopHandle();
-    });
-  }
-
-  if (hideScroll) {
-    modalVisibleWatcher();
-  }
-
-  return {
-    visible,
-    openModal,
-    closeModal,
-    toggleModal
-  };
-}

src/store/modules/route/index.ts

@@ -43,6 +43,7 @@ export const useRouteStore = defineStore('route-store', {
     cacheRoutes: []
   }),
   actions: {
+    /** 重置路由的store */
     resetRouteStore() {
       this.resetRoutes();
       this.$reset();

src/store/modules/theme/index.ts

@@ -16,6 +16,7 @@ export const useThemeStore = defineStore('theme-store', {
     naiveTheme(state) {
       return state.darkMode ? darkTheme : undefined;
     },
+    /** 页面动画模式 */
     pageAnimateMode(state) {
       return state.page.animate ? state.page.animateMode : undefined;
     }
@@ -34,7 +35,7 @@ export const useThemeStore = defineStore('theme-store', {
       this.followSystemTheme = visible;
     },
     /** 自动跟随系统主题 */
-    autoFollowSystemMode(darkMode: boolean) {
+    setAutoFollowSystemMode(darkMode: boolean) {
       if (this.followSystemTheme) {
         this.darkMode = darkMode;
       }

src/store/subscribe/app.ts

@@ -1,21 +0,0 @@
-import { watch, onUnmounted } from 'vue';
-import { useBodyScroll } from '@/hooks';
-import { useAppStore } from '../modules';
-
-/** 订阅app store */
-export default function subscribeAppStore() {
-  const app = useAppStore();
-  const { scrollBodyHandler } = useBodyScroll();
-
-  // 弹窗打开时禁止滚动条
-  const stopHandle = watch(
-    () => app.settingDrawerVisible,
-    newValue => {
-      scrollBodyHandler(newValue);
-    }
-  );
-
-  onUnmounted(() => {
-    stopHandle();
-  });
-}

src/store/subscribe/index.ts

@@ -1,8 +1,6 @@
-// import subscribeAppStore from './app';
 import subscribeThemeStore from './theme';
 
 /** 订阅状态 */
 export function subscribeStore() {
-  // subscribeAppStore();
   subscribeThemeStore();
 }

src/store/subscribe/theme.ts

@@ -53,7 +53,7 @@ export default function subscribeThemeStore() {
     osTheme,
     newValue => {
       const isDark = newValue === 'dark';
-      theme.autoFollowSystemMode(isDark);
+      theme.setAutoFollowSystemMode(isDark);
     },
     { immediate: true }
   );