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