double
pfqgauxfb 2 months ago
parent da271a45ae
commit cb90fd41b0

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

@ -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;
} */

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

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

@ -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} />
</>
);
}
Loading…
Cancel
Save