refactor(projects): 代码优化

ISSUES CLOSED: \
This commit is contained in:
Soybean 2022-05-18 23:43:41 +08:00
parent 4b80a66114
commit 44ab55d594
8 changed files with 5 additions and 108 deletions

View File

@ -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 };

View File

@ -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
};
}

View File

@ -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
};
}

View File

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

View File

@ -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;
}

View File

@ -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();
});
}

View File

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

View File

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