diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts index 540bc1e8c..1d1b78adf 100644 --- a/src/hooks/common/index.ts +++ b/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 }; diff --git a/src/hooks/common/useBodyScroll.ts b/src/hooks/common/useBodyScroll.ts deleted file mode 100644 index 64a0adbf8..000000000 --- a/src/hooks/common/useBodyScroll.ts +++ /dev/null @@ -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 - }; -} diff --git a/src/hooks/common/useModalVisible.ts b/src/hooks/common/useModalVisible.ts deleted file mode 100644 index 66b76e88a..000000000 --- a/src/hooks/common/useModalVisible.ts +++ /dev/null @@ -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 - }; -} diff --git a/src/store/modules/route/index.ts b/src/store/modules/route/index.ts index 686402558..326fe1452 100644 --- a/src/store/modules/route/index.ts +++ b/src/store/modules/route/index.ts @@ -43,6 +43,7 @@ export const useRouteStore = defineStore('route-store', { cacheRoutes: [] }), actions: { + /** 重置路由的store */ resetRouteStore() { this.resetRoutes(); this.$reset(); diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index ea286b698..98849056d 100644 --- a/src/store/modules/theme/index.ts +++ b/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; } diff --git a/src/store/subscribe/app.ts b/src/store/subscribe/app.ts deleted file mode 100644 index 8897984fc..000000000 --- a/src/store/subscribe/app.ts +++ /dev/null @@ -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(); - }); -} diff --git a/src/store/subscribe/index.ts b/src/store/subscribe/index.ts index 2ab17b36c..4301fe9a9 100644 --- a/src/store/subscribe/index.ts +++ b/src/store/subscribe/index.ts @@ -1,8 +1,6 @@ -// import subscribeAppStore from './app'; import subscribeThemeStore from './theme'; /** 订阅状态 */ export function subscribeStore() { - // subscribeAppStore(); subscribeThemeStore(); } diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts index 412c30c4c..a89050d18 100644 --- a/src/store/subscribe/theme.ts +++ b/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 } );