Merge branch 'tangly1024:main' into main

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.7.0
+NEXT_PUBLIC_VERSION=4.7.2
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

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 |
 |--|--|--|--|

components/Coze.js

@@ -0,0 +1,40 @@
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * Coze-AI机器人
+ * @returns
+ */
+export default function Coze() {
+  const cozeSrc = siteConfig(
+    'COZE_SRC_URL',
+    'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/0.1.0-beta.6/libs/cn/index.js'
+  )
+  const title = siteConfig('COZE_TITLE', 'NotionNext助手')
+  const botId = siteConfig('COZE_BOT_ID')
+
+  const loadCoze = async () => {
+    await loadExternalResource(cozeSrc)
+    const CozeWebSDK = window?.CozeWebSDK
+    if (CozeWebSDK) {
+      const cozeClient = new CozeWebSDK.WebChatClient({
+        config: {
+          bot_id: botId
+        },
+        componentProps: {
+          title: title
+        }
+      })
+      console.log('coze', cozeClient)
+    }
+  }
+
+  useEffect(() => {
+    if (!botId) {
+      return
+    }
+    loadCoze()
+  }, [])
+  return <></>
+}

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

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>
   )

components/ExternalPlugins.js

@@ -9,6 +9,7 @@ import { convertInnerUrl } from '@/lib/notion/convertInnerUrl'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import Coze from './Coze'
 import { initGoogleAdsense } from './GoogleAdsense'
 
 /**
@@ -63,7 +64,9 @@ const ExternalPlugin = props => {
   const MOUSE_FOLLOW = siteConfig('MOUSE_FOLLOW')
   const CUSTOM_EXTERNAL_CSS = siteConfig('CUSTOM_EXTERNAL_CSS')
   const CUSTOM_EXTERNAL_JS = siteConfig('CUSTOM_EXTERNAL_JS')
-  const ENABLE_NPROGRSS = siteConfig('ENABLE_NPROGRSS', true)
+  // 默认关闭NProgress
+  const ENABLE_NPROGRSS = siteConfig('ENABLE_NPROGRSS', false)
+  const COZE_BOT_ID = siteConfig('COZE_BOT_ID')
 
   // 自定义样式css和js引入
   if (isBrowser) {
@@ -149,6 +152,7 @@ const ExternalPlugin = props => {
       {ENABLE_NPROGRSS && <LoadingProgress />}
       <AosAnimation />
       {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && <LA51 />}
+      {COZE_BOT_ID && <Coze />}
 
       {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && (
         <>

components/OpenWrite.js

@@ -73,16 +73,20 @@ const OpenWrite = () => {
       console.error('OpenWrite 加载异常', error)
     }
   }
-
   useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      console.log('开发环境:屏蔽OpenWrite')
+      return
+    }
     if (isBrowser && blogId) {
+      toggleTocItems(true) // 禁止目录项的点击
+
       // Check if the element with id 'read-more-wrap' already exists
       const readMoreWrap = document.getElementById('read-more-wrap')
 
       // Only load the script if the element doesn't exist
       if (!readMoreWrap) {
         loadOpenWrite()
-        toggleTocItems(true) // 禁止目录项的点击
       }
     }
   })

components/ShareBar.js

@@ -1,22 +1,30 @@
 import { siteConfig } from '@/lib/config'
 import dynamic from 'next/dynamic'
 
-const ShareButtons = dynamic(() => import('@/components/ShareButtons'), { ssr: false })
+const ShareButtons = dynamic(() => import('@/components/ShareButtons'), {
+  ssr: false
+})
 
 /**
  * 分享栏
  * @param {} param0
  * @returns
  */
 const ShareBar = ({ post }) => {
-  if (!JSON.parse(siteConfig('POST_SHARE_BAR_ENABLE')) || !post || post?.type !== 'Post') {
+  if (
+    !JSON.parse(siteConfig('POST_SHARE_BAR_ENABLE')) ||
+    !post ||
+    post?.type !== 'Post'
+  ) {
     return <></>
   }
 
-  return <div className='m-1 overflow-x-auto'>
-        <div className='flex w-full md:justify-end'>
-            <ShareButtons post={post} />
-        </div>
+  return (
+    <div className='m-1 overflow-x-auto'>
+      <div className='flex w-full md:justify-end'>
+        <ShareButtons post={post} />
+      </div>
     </div>
+  )
 }
 export default ShareBar