前端简单界面
Change-Id: I7df9774daf4df8d92b13e659effe426ab0b6180b
diff --git a/pt--frontend/src/components/Comment.jsx b/pt--frontend/src/components/Comment.jsx
new file mode 100644
index 0000000..9708566
--- /dev/null
+++ b/pt--frontend/src/components/Comment.jsx
@@ -0,0 +1,94 @@
+// src/components/Comment.jsx
+import React, { useState, useEffect } from 'react';
+import {
+ getCommentsByPostId,
+ createComment,
+ deleteComment,
+ likeComment,
+ unlikeComment,
+} from '../api/comment';
+
+const Comment = ({ postId, currentUser }) => {
+ const [comments, setComments] = useState([]);
+ const [newContent, setNewContent] = useState('');
+
+ useEffect(() => {
+ loadComments();
+ }, [postId]);
+
+ const loadComments = async () => {
+ const data = await getCommentsByPostId(postId);
+ setComments(data);
+ };
+
+ const handleCreate = async () => {
+ if (!newContent.trim()) return;
+
+ const commentData = {
+ postid: postId,
+ userid: currentUser.id,
+ postCommentcontent: newContent,
+ commenttime: new Date().toISOString()
+ };
+
+ await createComment(commentData);
+ setNewContent('');
+ loadComments();
+ };
+
+ const handleDelete = async (commentid) => {
+ await deleteComment(commentid);
+ loadComments();
+ };
+
+ const handleLike = async (commentid) => {
+ await likeComment(commentid);
+ loadComments();
+ };
+
+ const handleUnlike = async (commentid) => {
+ await unlikeComment(commentid);
+ loadComments();
+ };
+
+ return (
+ <div>
+ <h4 className="font-semibold text-gray-700 mb-2">评论</h4>
+ <div className="mb-2">
+ <textarea
+ value={newContent}
+ onChange={(e) => setNewContent(e.target.value)}
+ placeholder="写下你的评论..."
+ className="w-full border rounded p-2"
+ />
+ <button
+ onClick={handleCreate}
+ className="mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
+ >
+ 发布评论
+ </button>
+ </div>
+
+ <div className="space-y-2 mt-4">
+ {comments.map((comment) => (
+ <div key={comment.commentid} className="border rounded p-2">
+ <div className="text-sm text-gray-800 font-medium">用户ID：{comment.userid}</div>
+ <div className="text-gray-700">{comment.postCommentcontent}</div>
+ <div className="text-xs text-gray-500 mt-1">
+ {comment.commenttime || '暂无时间'} | 👍 {comment.likes}
+ </div>
+ <div className="flex gap-2 mt-1 text-sm">
+ <button onClick={() => handleLike(comment.commentid)} className="text-blue-500 hover:underline">点赞</button>
+ <button onClick={() => handleUnlike(comment.commentid)} className="text-yellow-500 hover:underline">取消点赞</button>
+ {comment.userid === currentUser.id && (
+ <button onClick={() => handleDelete(comment.commentid)} className="text-red-500 hover:underline">删除</button>
+ )}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+};
+
+export default Comment;