feng

src/components/Bookmark/index.js

@@ -10,7 +10,8 @@ export default function Bookmark({ docId }) {
     setIsBookmarked(bookmarks[docId] || false);
   }, [docId]);
 
-  const toggleBookmark = () => {
+  const toggleBookmark = (e) => {
+    e.stopPropagation(); // 阻止事件冒泡
     const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
     const newState = !isBookmarked;
     bookmarks[docId] = newState;
@@ -23,6 +24,7 @@ export default function Bookmark({ docId }) {
       onClick={toggleBookmark}
       className={`${styles.bookmarkButton} ${isBookmarked ? styles.bookmarked : ''}`}
       aria-label={isBookmarked ? '取消标记' : '添加标记'}
+      type="button"
     >
       <svg
         viewBox="0 0 24 24"

src/components/Bookmark/styles.module.css

@@ -1,6 +1,6 @@
 .bookmarkButton {
   position: absolute;
-  left: -25px;
+  left: -20px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
@@ -14,6 +14,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
 }
 
 .bookmarkButton:hover {
@@ -41,3 +43,8 @@
   padding-left: 25px !important;
   position: relative !important;
 }
+
+/* 调整列表项样式 */
+:global(.menu__list-item) {
+  position: relative !important;
+} 

src/css/custom.css

@@ -190,3 +190,17 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 .menu {
   padding-left: 20px !important;
 }
+
+/* 调整列表项样式 */
+.menu__list-item {
+  position: relative !important;
+}
+
+/* 确保标记按钮在正确的层级 */
+.menu__link-wrapper {
+  z-index: 1;
+}
+
+.bookmarkButton {
+  z-index: 2;
+}

src/theme/DocSidebarItem/index.js

@@ -8,10 +8,12 @@ export default function DocSidebarItemWrapper(props) {
   // 只为文档类型的项目添加标记功能
   if (item.type === 'doc') {
     return (
+      <li className="menu__list-item">
         <div className="menu__link-wrapper" style={{ position: 'relative' }}>
           <DocSidebarItem {...props} />
           <Bookmark docId={item.docId} />
         </div>
+      </li>
     );
   }