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

---
 src/components/DocBookmark/index.js          | 47 ++++++++++++++++++++
 src/components/DocBookmark/styles.module.css | 42 +++++++++++++++++
 src/css/custom.css                           | 24 ++++++++++
 src/theme/DocPage/index.js                   | 17 +++++++
 src/theme/DocSidebarItem/index.js            | 19 +++++---
 5 files changed, 143 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DocBookmark/index.js
 create mode 100644 src/components/DocBookmark/styles.module.css
 create mode 100644 src/theme/DocPage/index.js

diff --git a/src/components/DocBookmark/index.js b/src/components/DocBookmark/index.js
new file mode 100644
index 0000000..c3765ea
--- /dev/null
+++ b/src/components/DocBookmark/index.js
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import styles from './styles.module.css';
+
+export default function DocBookmark({ docId }) {
+  const [isBookmarked, setIsBookmarked] = useState(false);
+
+  useEffect(() => {
+    // 从localStorage中读取标记状态
+    const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
+    setIsBookmarked(bookmarks[docId] || false);
+  }, [docId]);
+
+  const toggleBookmark = () => {
+    const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
+    const newState = !isBookmarked;
+    bookmarks[docId] = newState;
+    localStorage.setItem('docBookmarks', JSON.stringify(bookmarks));
+    setIsBookmarked(newState);
+  };
+
+  return (
+    <div className={styles.bookmarkContainer}>
+      <button
+        onClick={toggleBookmark}
+        className={`${styles.bookmarkButton} ${isBookmarked ? styles.bookmarked : ''}`}
+        aria-label={isBookmarked ? '取消标记' : '添加标记'}
+        type="button"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          stroke="currentColor"
+          strokeWidth="2"
+          fill={isBookmarked ? 'currentColor' : 'none'}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+        </svg>
+        <span className={styles.bookmarkText}>
+          {isBookmarked ? '取消标记' : '添加标记'}
+        </span>
+      </button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/DocBookmark/styles.module.css b/src/components/DocBookmark/styles.module.css
new file mode 100644
index 0000000..3463646
--- /dev/null
+++ b/src/components/DocBookmark/styles.module.css
@@ -0,0 +1,42 @@
+.bookmarkContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.bookmarkButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 4px;
+  background: var(--ifm-background-color);
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.bookmarkButton:hover {
+  background: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.bookmarked {
+  background: var(--ifm-color-primary);
+  color: white;
+  border-color: var(--ifm-color-primary);
+}
+
+.bookmarked:hover {
+  background: var(--ifm-color-primary-darker);
+  color: white;
+}
+
+.bookmarkText {
+  font-size: 0.9rem;
+  font-weight: 500;
+} 
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 6966a29..7192007 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -203,4 +203,28 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 
 .bookmarkButton {
   z-index: 2;
+}
+
+/* 标记项目的样式 */
+.menu__link--bookmarked {
+  color: var(--ifm-color-primary) !important;
+  font-weight: 500 !important;
+  background-color: var(--ifm-color-emphasis-100) !important;
+}
+
+/* 标记按钮的动画效果 */
+@keyframes bookmarkPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.bookmarkButton.bookmarked {
+  animation: bookmarkPulse 0.3s ease;
 }
\ No newline at end of file
diff --git a/src/theme/DocPage/index.js b/src/theme/DocPage/index.js
new file mode 100644
index 0000000..003d38d
--- /dev/null
+++ b/src/theme/DocPage/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import DocPage from '@theme-original/DocPage';
+import DocBookmark from '@site/src/components/DocBookmark';
+import {useLocation} from '@docusaurus/router';
+
+export default function DocPageWrapper(props) {
+  const {content} = props;
+  const location = useLocation();
+  const docId = location.pathname;
+
+  return (
+    <>
+      <DocBookmark docId={docId} />
+      <DocPage {...props} />
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/src/theme/DocSidebarItem/index.js b/src/theme/DocSidebarItem/index.js
index 800fe93..803bb95 100644
--- a/src/theme/DocSidebarItem/index.js
+++ b/src/theme/DocSidebarItem/index.js
@@ -1,17 +1,24 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import DocSidebarItem from '@theme-original/DocSidebarItem';
-import Bookmark from '@site/src/components/Bookmark';
 
 export default function DocSidebarItemWrapper(props) {
   const { item } = props;
-  
-  // 只为文档类型的项目添加标记功能
+  const [isBookmarked, setIsBookmarked] = useState(false);
+
+  useEffect(() => {
+    if (item.type === 'doc') {
+      const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
+      setIsBookmarked(bookmarks[item.docId] || false);
+    }
+  }, [item]);
+
   if (item.type === 'doc') {
     return (
       <li className="menu__list-item">
-        <div className="menu__link-wrapper" style={{ position: 'relative' }}>
+        <div 
+          className={`menu__link-wrapper ${isBookmarked ? 'menu__link--bookmarked' : ''}`}
+        >
           <DocSidebarItem {...props} />
-          <Bookmark docId={item.docId} />
         </div>
       </li>
     );