magzine - 移动端菜单OpenWrite限制

Author: tangly1024

components/OpenWrite.js

@@ -79,13 +79,14 @@ const 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) // 禁止目录项的点击
       }
     }
   })

themes/magzine/components/Catalog.js

@@ -70,22 +70,22 @@ const Catalog = ({ toc, className }) => {
       <div
         className='overflow-y-auto scroll-hidden lg:max-h-dvh max-h-44'
         ref={tRef}>
-        <nav className='h-full  text-black'>
+        <nav className='h-full text-black'>
           {toc.map(tocItem => {
             const id = uuidToId(tocItem.id)
             tocIds.push(id)
             return (
               <a
                 key={id}
                 href={`#${id}`}
-                className={`notion-table-of-contents-item duration-300 transform  dark:text-gray-300
+                className={`notion-table-of-contents-item duration-300 transform  dark:text-gray-400
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
                 <span
                   style={{
                     display: 'inline-block',
                     marginLeft: tocItem.indentLevel * 16
                   }}
-                  className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}>
+                  className={`truncate ${activeSection === id ? 'font-bold text-gray-500 dark:text-white underline' : ''}`}>
                   {tocItem.text}
                 </span>
               </a>

themes/magzine/components/Progress.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
+import { useEffect, useState } from 'react'
 
 /**
  * 顶部页面阅读进度条
@@ -10,7 +10,8 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const currentRef = targetRef?.current || targetRef
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
-    const target = currentRef || (isBrowser && document.getElementById('article-wrapper'))
+    const target =
+      currentRef || (isBrowser && document.getElementById('article-wrapper'))
     if (target) {
       const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset
@@ -28,13 +29,12 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [])
 
   return (
-    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black">
+    <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black'>
       <div
-        className="h-4 bg-gray-600 duration-200"
-        style={{ width: `${percent}%` }}
-      >
+        className='h-4 bg-gray-600 dark:bg-hexo-black-gray duration-200'
+        style={{ width: `${percent}%` }}>
         {showPercent && (
-          <div className="text-right text-white text-xs">{percent}%</div>
+          <div className='text-right text-white text-xs'>{percent}%</div>
         )}
       </div>
     </div>