From ea4dacad18a4917c7216b3839cefc05d23f31fa4 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 18 Sep 2024 09:45:49 +0800
Subject: [PATCH] =?UTF-8?q?magzine=20-=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95OpenWrite=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/OpenWrite.js               |  3 ++-
 themes/magzine/components/Catalog.js  |  6 +++---
 themes/magzine/components/Progress.js | 14 +++++++-------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/components/OpenWrite.js b/components/OpenWrite.js
index 5caf5d7b..92d8c1ef 100644
--- a/components/OpenWrite.js
+++ b/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) // 禁止目录项的点击
       }
     }
   })
diff --git a/themes/magzine/components/Catalog.js b/themes/magzine/components/Catalog.js
index 630cf031..a03e1d80 100644
--- a/themes/magzine/components/Catalog.js
+++ b/themes/magzine/components/Catalog.js
@@ -70,7 +70,7 @@ 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)
@@ -78,14 +78,14 @@ const Catalog = ({ toc, className }) => {
               <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>
diff --git a/themes/magzine/components/Progress.js b/themes/magzine/components/Progress.js
index f6fa94a6..8a3db8b5 100644
--- a/themes/magzine/components/Progress.js
+++ b/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>