diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js index 0d875fa7..f27e3899 100644 --- a/components/DarkModeButton.js +++ b/components/DarkModeButton.js @@ -1,11 +1,11 @@ import { useGlobal } from '@/lib/global' -import { Moon, Sun } from './HeroIcons' import { useImperativeHandle } from 'react' +import { Moon, Sun } from './HeroIcons' /** * 深色模式按钮 */ -const DarkModeButton = (props) => { +const DarkModeButton = props => { const { cRef, className } = props const { isDarkMode, toggleDarkMode } = useGlobal() @@ -20,8 +20,17 @@ const DarkModeButton = (props) => { } }) - return
-
{isDarkMode ? : }
+ return ( +
+
+ {' '} + {isDarkMode ? : } +
+ ) } export default DarkModeButton diff --git a/components/Draggable.js b/components/Draggable.js index cf7be63a..5cbe3dde 100644 --- a/components/Draggable.js +++ b/components/Draggable.js @@ -2,9 +2,11 @@ import { useEffect, useRef, useState } from 'react' /** * 可拖拽组件 + * @param {children} 渲染的子元素 + * @param {stick} 是否要吸附 + * @returns */ -export const Draggable = props => { - const { children, stick } = props +export const Draggable = ({ children, stick }) => { const draggableRef = useRef(null) const rafRef = useRef(null) const [moving, setMoving] = useState(false) @@ -13,75 +15,70 @@ export const Draggable = props => { useEffect(() => { const draggableElements = document.getElementsByClassName('draggable') - // 标准化鼠标事件对象 function e(event) { - // 定义事件对象标准化函数 if (!event) { - // 兼容IE浏览器 event = window.event event.target = event.srcElement event.layerX = event.offsetX event.layerY = event.offsetY } - // 移动端 if (event.type === 'touchstart' || event.type === 'touchmove') { event.clientX = event.touches[0].clientX event.clientY = event.touches[0].clientY } - event.mx = event.pageX || event.clientX + document.body.scrollLeft - // 计算鼠标指针的x轴距离 event.my = event.pageY || event.clientY + document.body.scrollTop - // 计算鼠标指针的y轴距离 - - return event // 返回标准化的事件对象 + return event } - // 定义鼠标事件处理函数 - // document.pointerdown = start document.onmousedown = start document.ontouchstart = start function start(event) { - // 按下鼠标时，初始化处理 if (!draggableElements) return - event = e(event) // 获取标准事件对象 + event = e(event) for (const drag of draggableElements) { - // 判断鼠标点击的区域是否是拖拽框内 if (inDragBox(event, drag)) { currentObj = drag.firstElementChild } } if (currentObj) { if (event.type === 'touchstart') { - event.preventDefault() // 阻止默认的滚动行为 - document.documentElement.style.overflow = 'hidden' // 防止页面一起滚动 + event.preventDefault() + document.documentElement.style.overflow = 'hidden' } setMoving(true) offsetX = event.mx - currentObj.offsetLeft offsetY = event.my - currentObj.offsetTop - document.onmousemove = move // 注册鼠标移动事件处理函数 + document.onmousemove = move document.ontouchmove = move - document.onmouseup = stop // 注册松开鼠标事件处理函数 + document.onmouseup = stop document.ontouchend = stop } } function move(event) { - // 鼠标移动处理函数 event = e(event) rafRef.current = requestAnimationFrame(() => updatePosition(event)) } const stop = event => { event = e(event) - document.documentElement.style.overflow = 'auto' // 恢复默认的滚动行为 + document.documentElement.style.overflow = 'auto' cancelAnimationFrame(rafRef.current) setMoving(false) - currentObj = document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null + if (stick) { + checkInWindow() // 吸附逻辑 + } + currentObj = + document.ontouchmove = + document.ontouchend = + document.onmousemove = + document.onmouseup = + null } const updatePosition = event => { @@ -90,51 +87,41 @@ export const Draggable = props => { const top = event.my - offsetY currentObj.style.left = left + 'px' currentObj.style.top = top + 'px' - checkInWindow() } } - /** - * 鼠标是否在可拖拽区域内 - * @param {*} event - * @returns - */ function inDragBox(event, drag) { - const { clientX, clientY } = event // 鼠标位置 - const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = drag.firstElementChild // 窗口位置 - const horizontal = clientX > offsetLeft && clientX < offsetLeft + offsetWidth + const { clientX, clientY } = event + const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = + drag.firstElementChild + const horizontal = + clientX > offsetLeft && clientX < offsetLeft + offsetWidth const vertical = clientY > offsetTop && clientY < offsetTop + offsetHeight - if (horizontal && vertical) { - return true - } - - return false + return horizontal && vertical } - /** - * 若超出窗口则吸附。 - */ function checkInWindow() { - // 检查是否悬浮在窗口内 for (const drag of draggableElements) { - // 判断鼠标点击的区域是否是拖拽框内 - const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = drag.firstElementChild + const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = + drag.firstElementChild const { clientHeight, clientWidth } = document.documentElement if (offsetTop < 0) { - drag.firstElementChild.style.top = 0 + drag.firstElementChild.style.top = '0px' } if (offsetTop > clientHeight - offsetHeight) { drag.firstElementChild.style.top = clientHeight - offsetHeight + 'px' } if (offsetLeft < 0) { - drag.firstElementChild.style.left = 0 + drag.firstElementChild.style.left = '0px' } if (offsetLeft > clientWidth - offsetWidth) { drag.firstElementChild.style.left = clientWidth - offsetWidth + 'px' } if (stick === 'left') { - drag.firstElementChild.style.left = 0 + 'px' + drag.firstElementChild.style.left = '0px' + } else if (stick === 'right') { + drag.firstElementChild.style.left = clientWidth - offsetWidth + 'px' } } } @@ -142,15 +129,15 @@ export const Draggable = props => { window.addEventListener('resize', checkInWindow) return () => { - return () => { - window.removeEventListener('resize', checkInWindow) - cancelAnimationFrame(rafRef.current) - } + window.removeEventListener('resize', checkInWindow) + cancelAnimationFrame(rafRef.current) } - }, []) + }, [stick]) return ( -
+
{children}
) diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js index 31a29396..4d5108cd 100644 --- a/components/SideBarDrawer.js +++ b/components/SideBarDrawer.js @@ -6,7 +6,14 @@ import { useEffect } from 'react' * @returns {JSX.Element} * @constructor */ -const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => { +const SideBarDrawer = ({ + children, + isOpen, + onOpen, + onClose, + className, + showOnPC = false +}) => { const router = useRouter() useEffect(() => { const sideBarDrawerRouteListener = () => { @@ -19,32 +26,45 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => { }, [router.events]) // 点击按钮更改侧边抽屉状态 - const switchSideDrawerVisible = (showStatus) => { + const switchSideDrawerVisible = showStatus => { if (showStatus) { onOpen && onOpen() } else { onClose && onClose() } const sideBarDrawer = window.document.getElementById('sidebar-drawer') - const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background') + const sideBarDrawerBackground = window.document.getElementById( + 'sidebar-drawer-background' + ) if (showStatus) { - sideBarDrawer?.classList.replace('-ml-60', 'ml-0') + sideBarDrawer?.classList.replace('-ml-96', 'ml-0') sideBarDrawerBackground?.classList.replace('hidden', 'block') } else { - sideBarDrawer?.classList.replace('ml-0', '-ml-60') + sideBarDrawer?.classList.replace('ml-0', '-ml-96') sideBarDrawerBackground?.classList.replace('block', 'hidden') } } - return