float按钮统一

layouts/BaseLayout.js

@@ -10,7 +10,9 @@ import SideAreaRight from '@/components/SideAreaRight'
 import TopNav from '@/components/TopNav'
 import { useGlobal } from '@/lib/global'
 import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import smoothscroll from 'smoothscroll-polyfill'
+
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param children
@@ -38,6 +40,7 @@ const BaseLayout = ({
   post,
   postCount,
   sideBarSlot,
+  floatSlot,
   rightAreaSlot,
   currentSearch,
   currentCategory,
@@ -48,6 +51,28 @@ const BaseLayout = ({
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
 
+  const [show, switchShow] = useState(false)
+  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  const scrollListener = () => {
+    const targetRef = document.getElementById('wrapper')
+    const clientHeight = targetRef?.clientHeight
+    const scrollY = window.pageYOffset
+    const fullHeight = clientHeight - window.outerHeight
+    let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
+    if (per > 100) per = 100
+    const shouldShow = scrollY > 100 && per > 0
+
+    if (shouldShow !== show) {
+      switchShow(shouldShow)
+    }
+    changePercent(per)
+  }
+  useEffect(() => {
+    smoothscroll.polyfill()
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [show])
+
   return (<>
 
       <CommonHead meta={meta} />
@@ -58,9 +83,9 @@ const BaseLayout = ({
 
       <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'></div>
 
-      <main id='wrapper' className='flex justify-center flex-1 mx-auto pb-12'>
+      <main id='wrapper' className='flex justify-center flex-1 pb-12'>
           <SideAreaLeft targetRef={targetRef} post={post} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
-          <section id='center' className={`${BLOG.topNavType !== 'normal' ? 'mt-14' : ''} flex-grow md:mt-0 max-w-5xl min-h-screen w-full`} ref={targetRef}>
+          <section id='center' className={`${BLOG.topNavType !== 'normal' ? 'mt-14' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
             {onLoading
               ? <LoadingCover/>
               : <>
@@ -71,10 +96,16 @@ const BaseLayout = ({
           <SideAreaRight targetRef={targetRef} post={post} slot={rightAreaSlot} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
       </main>
 
+      <div className='right-4 bottom-2 fixed justify-end z-20 glassmorphism rounded font-sans'>
+      <div className={(show ? 'animate__animated ' : 'hidden') + ' m-3 animate__fadeInUp justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
+        <JumpToTopButton percent={percent}/>
+        <JumpToBottomButton />
+        <FloatDarkModeButton/>
+        {floatSlot}
+      </div>
+
+      </div>
       <Footer title={meta.title}/>
-      <JumpToTopButton showPercent={false} />
-      <JumpToBottomButton showPercent={false}/>
-      <FloatDarkModeButton/>
       </>
   )
 }