feng

src/components/Comment/index.js

@@ -1,93 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styles from './styles.module.css';
-
-export default function Comment({ docId }) {
-  const [comments, setComments] = useState([]);
-  const [newComment, setNewComment] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    // 从localStorage中读取评论
-    const savedComments = JSON.parse(localStorage.getItem(`docComments_${docId}`) || '[]');
-    setComments(savedComments);
-  }, [docId]);
-
-  const handleAddComment = () => {
-    if (!newComment.trim()) return;
-
-    const comment = {
-      id: Date.now(),
-      text: newComment,
-      timestamp: new Date().toLocaleString(),
-      author: '用户' // 这里可以替换为实际的用户名
-    };
-
-    const updatedComments = [...comments, comment];
-    setComments(updatedComments);
-    localStorage.setItem(`docComments_${docId}`, JSON.stringify(updatedComments));
-    setNewComment('');
-  };
-
-  const handleDeleteComment = (commentId) => {
-    const updatedComments = comments.filter(comment => comment.id !== commentId);
-    setComments(updatedComments);
-    localStorage.setItem(`docComments_${docId}`, JSON.stringify(updatedComments));
-  };
-
-  return (
-    <div className={styles.commentContainer}>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={styles.commentButton}
-        aria-label="评论"
-        type="button"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          width="16"
-          height="16"
-          stroke="currentColor"
-          strokeWidth="2"
-          fill="none"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-        </svg>
-      </button>
-
-      {isOpen && (
-        <div className={styles.commentPanel}>
-          <div className={styles.commentList}>
-            {comments.map(comment => (
-              <div key={comment.id} className={styles.commentItem}>
-                <div className={styles.commentHeader}>
-                  <span className={styles.commentAuthor}>{comment.author}</span>
-                  <span className={styles.commentTime}>{comment.timestamp}</span>
-                  <button
-                    onClick={() => handleDeleteComment(comment.id)}
-                    className={styles.deleteButton}
-                  >
-                    ×
-                  </button>
-                </div>
-                <div className={styles.commentText}>{comment.text}</div>
-              </div>
-            ))}
-          </div>
-          <div className={styles.commentInput}>
-            <textarea
-              value={newComment}
-              onChange={(e) => setNewComment(e.target.value)}
-              placeholder="添加评论..."
-              rows={3}
-            />
-            <button onClick={handleAddComment} className={styles.submitButton}>
-              发表评论
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-} 

src/components/Comment/styles.module.css

@@ -1,132 +0,0 @@
-.commentContainer {
-  position: relative;
-  display: inline-block;
-}
-
-.commentButton {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  color: var(--ifm-color-emphasis-600);
-  transition: all 0.2s ease;
-  opacity: 1;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-.commentButton:hover {
-  color: var(--ifm-color-primary);
-  transform: scale(1.1);
-}
-
-.commentPanel {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  width: 300px;
-  background: var(--ifm-background-color);
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  margin-top: 8px;
-  padding: 16px;
-}
-
-.commentList {
-  max-height: 300px;
-  overflow-y: auto;
-  margin-bottom: 16px;
-}
-
-.commentItem {
-  padding: 8px;
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.commentItem:last-child {
-  border-bottom: none;
-}
-
-.commentHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.commentAuthor {
-  font-weight: 500;
-  color: var(--ifm-color-primary);
-}
-
-.commentTime {
-  font-size: 12px;
-  color: var(--ifm-color-emphasis-600);
-}
-
-.deleteButton {
-  background: none;
-  border: none;
-  color: var(--ifm-color-emphasis-600);
-  cursor: pointer;
-  padding: 0 4px;
-  font-size: 16px;
-}
-
-.deleteButton:hover {
-  color: var(--ifm-color-danger);
-}
-
-.commentText {
-  font-size: 14px;
-  line-height: 1.4;
-  color: var(--ifm-color-emphasis-800);
-}
-
-.commentInput {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.commentInput textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 4px;
-  resize: vertical;
-  font-family: inherit;
-  font-size: 14px;
-}
-
-.commentInput textarea:focus {
-  outline: none;
-  border-color: var(--ifm-color-primary);
-}
-
-.submitButton {
-  align-self: flex-end;
-  padding: 6px 12px;
-  background-color: var(--ifm-color-primary);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s ease;
-}
-
-.submitButton:hover {
-  background-color: var(--ifm-color-primary-darker);
-}
-
-/* 删除鼠标悬停显示按钮的样式 */
-/* :global(.menu__link-wrapper:hover) .commentButton {
-  opacity: 1;
-} */ 

src/components/DocComment/index.js

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import styles from './styles.module.css';
+
+export default function DocComment({ docId }) {
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState('');
+
+  useEffect(() => {
+    // 从localStorage中读取评论
+    const savedComments = JSON.parse(localStorage.getItem(`docComments_${docId}`) || '[]');
+    setComments(savedComments);
+  }, [docId]);
+
+  const handleAddComment = () => {
+    if (!newComment.trim()) return;
+
+    const comment = {
+      id: Date.now(),
+      text: newComment,
+      timestamp: new Date().toLocaleString(),
+      author: '用户' // 这里可以替换为实际的用户名
+    };
+
+    const updatedComments = [...comments, comment];
+    setComments(updatedComments);
+    localStorage.setItem(`docComments_${docId}`, JSON.stringify(updatedComments));
+    setNewComment('');
+  };
+
+  const handleDeleteComment = (commentId) => {
+    const updatedComments = comments.filter(comment => comment.id !== commentId);
+    setComments(updatedComments);
+    localStorage.setItem(`docComments_${docId}`, JSON.stringify(updatedComments));
+  };
+
+  return (
+    <div className={styles.commentSection}>
+      <h2 className={styles.commentTitle}>评论</h2>
+      <div className={styles.commentList}>
+        {comments.map(comment => (
+          <div key={comment.id} className={styles.commentItem}>
+            <div className={styles.commentHeader}>
+              <span className={styles.commentAuthor}>{comment.author}</span>
+              <span className={styles.commentTime}>{comment.timestamp}</span>
+              <button
+                onClick={() => handleDeleteComment(comment.id)}
+                className={styles.deleteButton}
+              >
+                ×
+              </button>
+            </div>
+            <div className={styles.commentText}>{comment.text}</div>
+          </div>
+        ))}
+      </div>
+      <div className={styles.commentInput}>
+        <textarea
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          placeholder="添加评论..."
+          rows={3}
+        />
+        <button onClick={handleAddComment} className={styles.submitButton}>
+          发表评论
+        </button>
+      </div>
+    </div>
+  );
+} 

src/components/DocComment/styles.module.css

@@ -0,0 +1,97 @@
+YYYY.commentSection {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.commentTitle {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--ifm-color-emphasis-800);
+}
+
+.commentList {
+  margin-bottom: 2rem;
+}
+
+.commentItem {
+  padding: 1rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  background-color: var(--ifm-background-color);
+}
+
+.commentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.commentAuthor {
+  font-weight: 500;
+  color: var(--ifm-color-primary);
+}
+
+.commentTime {
+  font-size: 0.875rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.deleteButton {
+  background: none;
+  border: none;
+  color: var(--ifm-color-emphasis-600);
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 1.25rem;
+}
+
+.deleteButton:hover {
+  color: var(--ifm-color-danger);
+}
+
+.commentText {
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--ifm-color-emphasis-800);
+}
+
+.commentInput {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.commentInput textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 1rem;
+  min-height: 100px;
+}
+
+.commentInput textarea:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.submitButton {
+  align-self: flex-end;
+  padding: 0.5rem 1.5rem;
+  background-color: var(--ifm-color-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s ease;
+}
+
+.submitButton:hover {
+  background-color: var(--ifm-color-primary-darker);
+} 

src/theme/DocItem/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import DocItem from '@theme-original/DocItem';
+import DocComment from '@site/src/components/DocComment';
+
+export default function DocItemWrapper(props) {
+  return (
+    <>
+      <DocItem {...props} />
+      <DocComment docId={props.content.metadata.id} />
+    </>
+  );
+}