feng

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 (

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);
   }
 }
 

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>

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;
+}