reading

components/Loading.js

@@ -11,12 +11,14 @@ const Loading = (props) => {
   useEffect(() => {
     // 返回一个函数，在组件销毁时设置 onReading 为 false
     return () => {
-      setOnReading(false)
+      setTimeout(() => {
+        setOnReading(false)
+      }, 500)
     }
   }, [theme])
 
-  return <div className="w-screen h-screen flex justify-center items-center dark:bg-black text-black dark:text-white">
-        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' />Loading...</h1>
+  return <div className="w-screen h-screen flex justify-center items-center bg-black">
+        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' /></h1>
     </div>
 }
 export default Loading

lib/global.js

@@ -5,6 +5,7 @@ import BLOG from '@/blog.config'
 import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import NProgress from 'nprogress'
 import LoadingCover from '@/components/LoadingCover'
+import { isBrowser } from './utils'
 
 const GlobalContext = createContext()
 
@@ -19,14 +20,24 @@ export function GlobalContextProvider({ children }) {
   const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
   const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
-  const [onLoading, setOnLoading] = useState(false) // 加载文章数据
-  const [onReading, setOnReading] = useState(true) // 资源加载中
+  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
+  const [onReading, setOnReading] = useState(true) // 网页资源加载
   const router = useRouter()
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
     initDarkMode(isDarkMode, updateDarkMode)
     initTheme(theme, changeTheme)
+    if (isBrowser()) {
+      // 监听用户刷新页面
+      const handleBeforeUnload = (event) => {
+        setOnReading(true)
+      }
+      window.addEventListener('beforeunload', handleBeforeUnload)
+      return () => {
+        window.removeEventListener('beforeunload', handleBeforeUnload)
+      }
+    }
   }, [])
 
   useEffect(() => {

pages/[...slug].js

@@ -26,6 +26,19 @@ const Slug = memorize(props => {
   const [lock, setLock] = useState(post?.password && post?.password !== '')
   const LayoutSlug = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSlug }), { ssr: true, loading: () => <Loading /> })
 
+  /**
+     * 验证文章密码
+     * @param {*} result
+     */
+  const validPassword = passInput => {
+    const encrypt = md5(post.slug + passInput)
+    if (passInput && encrypt === post.password) {
+      setLock(false)
+      return true
+    }
+    return false
+  }
+
   useEffect(() => {
     setOnLoading(false)
     if (post?.password && post?.password !== '') {
@@ -35,7 +48,6 @@ const Slug = memorize(props => {
         post.content = Object.keys(post.blockMap.block).filter(key => post.blockMap.block[key]?.value?.parent_id === post.id)
         post.toc = getPageTableOfContents(post, post.blockMap)
       }
-
       setLock(false)
     }
     router.events.on('routeChangeComplete', () => {
@@ -59,20 +71,6 @@ const Slug = memorize(props => {
     return <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   }
 
-  /**
-     * 验证文章密码
-     * @param {*} result
-     */
-  const validPassword = passInput => {
-    const encrypt = md5(post.slug + passInput)
-
-    if (passInput && encrypt === post.password) {
-      setLock(false)
-      return true
-    }
-    return false
-  }
-
   props = { ...props, lock, setLock, validPassword }
 
   const meta = {