diff --git a/.env.local b/.env.local index 4d4824d5..3a71b8f1 100644 --- a/.env.local +++ b/.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 # 可在此添加环境变量，去掉最左边的（# ）注释即可 diff --git a/README.md b/README.md index e857ab54..203ef0cd 100644 --- 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/Collapse.js b/components/Collapse.js index 69ef59eb..dd36f14f 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -26,9 +26,9 @@ const Collapse = props => { }) /** - * 折叠 - * @param {*} element - */ + * 折叠 + * @param {*} element + */ const collapseSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -51,9 +51,9 @@ const Collapse = props => { } /** - * 展开 - * @param {*} element - */ + * 展开 + * @param {*} element + */ const expandSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -82,13 +82,24 @@ const Collapse = props => { collapseSection(ref.current) } // 通知父组件高度变化 - props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen }) + props?.onHeightChange && + props.onHeightChange({ + height: ref.current.scrollHeight, + increase: props.isOpen + }) }, [props.isOpen]) return ( -
- {props.children} -
+
+ {props.children} +
) } Collapse.defaultProps = { isOpen: false } diff --git a/components/Coze.js b/components/Coze.js new file mode 100644 index 00000000..7b806ae7 --- /dev/null +++ b/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 <> +} 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/ExternalPlugins.js b/components/ExternalPlugins.js index ce0b5e63..772f8b00 100644 --- a/components/ExternalPlugins.js +++ b/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 && } {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && } + {COZE_BOT_ID && } {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && ( <> diff --git a/components/OpenWrite.js b/components/OpenWrite.js index 973931a8..92d8c1ef 100644 --- a/components/OpenWrite.js +++ b/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) // 禁止目录项的点击 } } }) diff --git a/components/ShareBar.js b/components/ShareBar.js index 334a5f12..1acbef4e 100644 --- a/components/ShareBar.js +++ b/components/ShareBar.js @@ -1,7 +1,9 @@ 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 +}) /** * 分享栏 @@ -9,14 +11,20 @@ const ShareButtons = dynamic(() => import('@/components/ShareButtons'), { ssr: f * @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
-
- -
+ return ( +
+
+ +
+ ) } export default ShareBar 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