From 6d2cd1c2951fecadc91160d9e9c3a0b78ae9adb1 Mon Sep 17 00:00:00 2001
From: pfqgauxfb <3521106529@qq.com>
Date: Mon, 2 Jun 2025 21:09:18 +0800
Subject: [PATCH] feng

---
 src/components/DocBookmark/index.js        |  6 ++++++
 src/css/custom.css                         |  6 +++---
 src/theme/DocSidebarItem/index.js          | 20 ++++++++++++++----
 src/theme/DocSidebarItem/styles.module.css | 24 ++++++++++++++++++++++
 4 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/theme/DocSidebarItem/styles.module.css

diff --git a/src/components/DocBookmark/index.js b/src/components/DocBookmark/index.js
index c3765ea..f73393b 100644
--- a/src/components/DocBookmark/index.js
+++ b/src/components/DocBookmark/index.js
@@ -16,6 +16,12 @@ export default function DocBookmark({ docId }) {
     bookmarks[docId] = newState;
     localStorage.setItem('docBookmarks', JSON.stringify(bookmarks));
     setIsBookmarked(newState);
+
+    // 触发自定义事件，通知侧边栏更新
+    const event = new CustomEvent('bookmarkChanged', {
+      detail: { docId, isBookmarked: newState }
+    });
+    window.dispatchEvent(event);
   };
 
   return (
diff --git a/src/css/custom.css b/src/css/custom.css
index 7192007..adffbd5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -165,13 +165,13 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 /* 标记按钮的动画效果 */
 @keyframes bookmarkPulse {
   0% {
-    transform: translateY(-50%) scale(1);
+    transform: scale(1);
   }
   50% {
-    transform: translateY(-50%) scale(1.1);
+    transform: scale(1.05);
   }
   100% {
-    transform: translateY(-50%) scale(1);
+    transform: scale(1);
   }
 }
 
diff --git a/src/theme/DocSidebarItem/index.js b/src/theme/DocSidebarItem/index.js
index 803bb95..43fd1c6 100644
--- a/src/theme/DocSidebarItem/index.js
+++ b/src/theme/DocSidebarItem/index.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import DocSidebarItem from '@theme-original/DocSidebarItem';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemWrapper(props) {
   const { item } = props;
@@ -9,15 +10,26 @@ export default function DocSidebarItemWrapper(props) {
     if (item.type === 'doc') {
       const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
       setIsBookmarked(bookmarks[item.docId] || false);
+
+      // 监听标记变化事件
+      const handleBookmarkChange = (event) => {
+        const { docId, isBookmarked: newState } = event.detail;
+        if (docId === item.docId) {
+          setIsBookmarked(newState);
+        }
+      };
+
+      window.addEventListener('bookmarkChanged', handleBookmarkChange);
+      return () => {
+        window.removeEventListener('bookmarkChanged', handleBookmarkChange);
+      };
     }
   }, [item]);
 
   if (item.type === 'doc') {
     return (
-      <li className="menu__list-item">
-        <div 
-          className={`menu__link-wrapper ${isBookmarked ? 'menu__link--bookmarked' : ''}`}
-        >
+      <li className={`menu__list-item ${isBookmarked ? styles.bookmarkedItem : ''}`}>
+        <div className={styles.menuLinkWrapper}>
           <DocSidebarItem {...props} />
         </div>
       </li>
diff --git a/src/theme/DocSidebarItem/styles.module.css b/src/theme/DocSidebarItem/styles.module.css
new file mode 100644
index 0000000..ea09cda
--- /dev/null
+++ b/src/theme/DocSidebarItem/styles.module.css
@@ -0,0 +1,24 @@
+.menuLinkWrapper {
+  position: relative;
+}
+
+.bookmarkedItem :global(.menu__link) {
+  color: var(--ifm-color-primary) !important;
+  font-weight: 500 !important;
+  background-color: var(--ifm-color-emphasis-100) !important;
+  border-left: 3px solid var(--ifm-color-primary) !important;
+  padding-left: calc(1rem - 3px) !important;
+}
+
+.bookmarkedItem :global(.menu__link:hover) {
+  background-color: var(--ifm-color-emphasis-200) !important;
+}
+
+/* 确保样式在深色模式下也生效 */
+[data-theme='dark'] .bookmarkedItem :global(.menu__link) {
+  background-color: var(--ifm-color-emphasis-200) !important;
+}
+
+[data-theme='dark'] .bookmarkedItem :global(.menu__link:hover) {
+  background-color: var(--ifm-color-emphasis-300) !important;
+} 
\ No newline at end of file