Merge branch 'main' of https://github.com/tangly1024/NotionNext

feihuobuzhun · Sep 15, 2024 · 725130e · 725130e
2 parents 2d3322b + a7945be
commit 725130e
Show file tree

Hide file tree

Showing 43 changed files with 409 additions and 310 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ Notion是一个能让效率暴涨的生产力引擎，可以帮你书写文档
 
 ## 预览效果
 
-在线演示：[https://preview.tangly1024.com/](https://preview.tangly1024.com/) ，项目支持多主题切换，没找到喜欢的主题？[贡献](/CONTRIBUTING.md)一个吧~
+在线演示：[https://preview.tangly1024.com/](https://preview.tangly1024.com/) ，点击左下角挂件可以切换主题，没找到喜欢的主题？[贡献](/CONTRIBUTING.md)一个吧~
 
 | Next | Medium | Hexo | Fukasawa |
 |--|--|--|--|

diff --git 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 <div onClick={toggleDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
-        <div id='darkModeButton' className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'> {isDarkMode ? <Sun /> : <Moon />}</div>
+  return (
+    <div
+      onClick={toggleDarkMode}
+      className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
+      <div
+        id='darkModeButton'
+        className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'>
+        {' '}
+        {isDarkMode ? <Sun /> : <Moon />}
+      </div>
     </div>
+  )
 }
 export default DarkModeButton
diff --git 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,67 +87,57 @@ 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'
         }
       }
     }
 
     window.addEventListener('resize', checkInWindow)
 
     return () => {
-      return () => {
-        window.removeEventListener('resize', checkInWindow)
-        cancelAnimationFrame(rafRef.current)
-      }
+      window.removeEventListener('resize', checkInWindow)
+      cancelAnimationFrame(rafRef.current)
     }
-  }, [])
+  }, [stick])
 
   return (
-    <div className={`draggable ${moving ? 'cursor-grabbing' : 'cursor-grab'} select-none`} ref={draggableRef}>
+    <div
+      className={`draggable ${moving ? 'cursor-grabbing' : 'cursor-grab'} select-none`}
+      ref={draggableRef}>
       {children}
     </div>
   )

diff --git 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 <div id='sidebar-wrapper' className={' block lg:hidden top-0 ' + className }>
-    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
-      {children}
-    </div>
+  return (
+    <div
+      id='sidebar-wrapper'
+      className={` block ${showOnPC ? '' : 'lg:hidden'} top-0`}>
+      <div
+        id='sidebar-drawer'
+        className={`${className} ${isOpen ? 'ml-0 w-96 visible' : '-ml-96 max-w-side invisible'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+        {children}
+      </div>
 
-    {/* 背景蒙版 */}
-    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
-      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
-  </div>
+      {/* 背景蒙版 */}
+      <div
+        id='sidebar-drawer-background'
+        onClick={() => {
+          switchSideDrawerVisible(false)
+        }}
+        className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}
+      />
+    </div>
+  )
 }
 export default SideBarDrawer