diff --git a/src/api/__tests__/comment.test.js b/src/api/__tests__/comment.test.js
new file mode 100644
index 0000000..a55dba7
--- /dev/null
+++ b/src/api/__tests__/comment.test.js
@@ -0,0 +1,83 @@
+// src/api/__tests__/comment.test.js
+const axios = require('axios');
+jest.mock('axios');
+
+const {
+    createComment,
+    deleteComment,
+    updateComment,
+    getCommentsByPostId,
+    likeComment,
+    unlikeComment
+} = require('../comment');
+
+describe('Comment API Tests', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('createComment should send POST request', async () => {
+        const mockData = { userid: 1, postid: 2, postCommentcontent: 'Test comment' };
+        axios.post.mockResolvedValue({ data: mockData });
+
+        const response = await createComment(mockData);
+
+        expect(axios.post).toHaveBeenCalledWith('http://localhost:8080/comment/create', mockData);
+        expect(response.data).toEqual(mockData);
+    });
+
+    test('deleteComment should send DELETE request', async () => {
+        axios.delete.mockResolvedValue({ data: true });
+
+        const response = await deleteComment(123);
+
+        expect(axios.delete).toHaveBeenCalledWith('http://localhost:8080/comment/delete/123');
+        expect(response.data).toBe(true);
+    });
+
+    test('updateComment should send PUT request', async () => {
+        const updatedData = { commentid: 1, postCommentcontent: 'Updated comment' };
+        axios.put.mockResolvedValue({ data: true });
+
+        const response = await updateComment(updatedData);
+
+        expect(axios.put).toHaveBeenCalledWith('http://localhost:8080/comment/update', updatedData);
+        expect(response.data).toBe(true);
+    });
+
+    test('getCommentsByPostId should fetch comments by post ID', async () => {
+        const mockResponse = { data: [{ commentid: 1, postCommentcontent: 'Nice!' }] };
+        axios.get.mockResolvedValue(mockResponse);
+
+        const response = await getCommentsByPostId(5);
+
+        expect(axios.get).toHaveBeenCalledWith('http://localhost:8080/comment/post/5');
+        expect(response).toEqual(mockResponse.data);
+    });
+
+    test('getCommentsByPostId should return empty array on error', async () => {
+        axios.get.mockRejectedValue(new Error('Network Error'));
+
+        const response = await getCommentsByPostId(99);
+
+        expect(response).toEqual([]);
+    });
+
+    test('likeComment should send POST request', async () => {
+        axios.post.mockResolvedValue({ data: true });
+
+        const response = await likeComment(10);
+
+        expect(axios.post).toHaveBeenCalledWith('http://localhost:8080/comment/like/10');
+        expect(response.data).toBe(true);
+    });
+
+    test('unlikeComment should send POST request', async () => {
+        axios.post.mockResolvedValue({ data: true });
+
+        const response = await unlikeComment(10);
+
+        expect(axios.post).toHaveBeenCalledWith('http://localhost:8080/comment/unlike/10');
+        expect(response.data).toBe(true);
+    });
+});
diff --git a/src/api/comment.js b/src/api/comment.js
new file mode 100644
index 0000000..28b2b4e
--- /dev/null
+++ b/src/api/comment.js
@@ -0,0 +1,40 @@
+import axios from 'axios';
+
+const BASE_URL = 'http://localhost:8080/comment';
+
+// 创建评论
+export const createComment = (commentData) => {
+    return axios.post(`${BASE_URL}/create`, commentData);
+};
+
+// 删除评论
+export const deleteComment = (commentId) => {
+    return axios.delete(`${BASE_URL}/delete/${commentId}`);
+};
+
+// 更新评论
+export const updateComment = (commentData) => {
+    return axios.put(`${BASE_URL}/update`, commentData);
+};
+
+// 获取某个帖子的所有评论
+// comment.js
+export async function getCommentsByPostId(postid) {
+    try {
+        const response = await axios.get(`${BASE_URL}/post/${postid}`);
+        return Array.isArray(response.data) ? response.data : []; // 确保返回数据是数组
+    } catch (error) {
+        console.error('获取评论失败', error);
+        return [];
+    }
+}
+
+// 点赞评论
+export const likeComment = (commentId) => {
+    return axios.post(`${BASE_URL}/like/${commentId}`);
+};
+
+// 取消点赞评论
+export const unlikeComment = (commentId) => {
+    return axios.post(`${BASE_URL}/unlike/${commentId}`);
+};
diff --git a/src/components/Comment.css b/src/components/Comment.css
new file mode 100644
index 0000000..e5529d3
--- /dev/null
+++ b/src/components/Comment.css
@@ -0,0 +1,128 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+.comment-card {
+    max-width: 700px;
+    margin: 20px auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+    background: #fff;
+    padding: 16px;
+}
+
+.comment-textarea {
+    border-radius: 6px;
+    resize: none;
+    font-size: 16px;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-6 {
+    margin-top: 1.5rem;
+}
+
+.comment-time {
+    font-size: 12px;
+    color: #888;
+    margin-left: 8px;
+    white-space: nowrap;
+}
+
+.comment-username {
+    font-weight: 600;
+    color: #1890ff;
+    user-select: none;
+}
+
+.comment-content {
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+    white-space: pre-wrap;
+}
+
+/* 头像带蓝色边框 */
+.avatar-with-border {
+    border: 2px solid #1890ff !important;
+    border-radius: 50% !important;
+}
+
+
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: #fffaf5;
+}
+
+/* 全局动画效果 */
+.transition {
+    transition: all 0.3s ease;
+}
+
+/* 卡片阴影效果 */
+.shadow-lg {
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-md {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* 圆角 */
+.rounded-xl {
+    border-radius: 1rem;
+}
+
+.rounded-lg {
+    border-radius: 0.75rem;
+}
+
+/* 渐变背景 */
+.bg-gradient-to-r {
+    background-size: 200% auto;
+    transition: background-position 0.5s ease;
+}
+
+.bg-gradient-to-r:hover {
+    background-position: right center;
+}
+
+/* 表单输入框动画 */
+input:focus,
+textarea:focus {
+    transform: translateY(-1px);
+}
+
+/* 卡片悬停效果 */
+.bg-white:hover {
+    transform: translateY(-3px);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .text-xl {
+        font-size: 1.25rem;
+    }
+
+    .text-2xl {
+        font-size: 1.5rem;
+    }
+
+    .p-6 {
+        padding: 1.25rem;
+    }
+
+    .p-12 {
+        padding: 2rem;
+    }
+
+    .grid-cols-2 {
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
new file mode 100644
index 0000000..704636e
--- /dev/null
+++ b/src/components/Comment.jsx
@@ -0,0 +1,290 @@
+import React, { useState, useEffect } from 'react';
+import {
+    getCommentsByPostId,
+    createComment,
+    deleteComment,
+    likeComment,
+    unlikeComment,
+} from '../api/comment';
+
+import {
+    Card,
+    Button,
+    Input,
+    List,
+    Avatar,
+    Popconfirm,
+    message,
+    Space,
+    Tooltip
+} from 'antd';
+
+import {
+    LikeOutlined,
+    LikeFilled,
+    DeleteOutlined
+} from '@ant-design/icons';
+
+import axios from 'axios';
+import './Comment.css';
+
+const { TextArea } = Input;
+
+const Comment = ({ postId, currentUser }) => {
+    const [comments, setComments] = useState([]);
+    const [newContent, setNewContent] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [userInfoMap, setUserInfoMap] = useState({});
+    const [isCommenting, setIsCommenting] = useState(false);
+
+    useEffect(() => {
+        loadComments();
+    }, [postId, currentUser]);
+
+    const loadComments = async () => {
+        try {
+            if (!postId) return;
+
+            const commentList = await getCommentsByPostId(postId);
+            setComments(commentList);
+
+            // 修复1: 统一使用 userid 而不是 id
+            const userIds = [
+                ...new Set(commentList.map(c => c.userid))
+            ];
+
+            // 如果当前用户存在，添加其 userid
+            if (currentUser && currentUser.userid) {
+                userIds.push(currentUser.userid);
+            }
+
+            // 批量获取用户信息
+            const userInfoPromises = userIds.map(async (id) => {
+                try {
+                    const res = await axios.get(`http://localhost:8080/user/getDecoration?userid=${id}`);
+                    if (res.data?.success) {
+                        return { id, data: res.data.data };
+                    }
+                    return { id, data: { username: `用户${id}`, image: '' } };
+                } catch (error) {
+                    return { id, data: { username: `用户${id}`, image: '' } };
+                }
+            });
+
+            const userInfoResults = await Promise.all(userInfoPromises);
+
+            // 构建用户信息映射
+            const newUserInfoMap = {};
+            userInfoResults.forEach(({ id, data }) => {
+                newUserInfoMap[id] = data;
+            });
+
+            setUserInfoMap(newUserInfoMap);
+
+        } catch (error) {
+            console.error('加载评论失败:', error);
+            message.error('加载评论失败');
+        }
+    };
+
+    const handleCreate = async () => {
+        // 检查用户是否登录
+        if (!currentUser) {
+            message.error('请先登录后再评论');
+            return;
+        }
+
+        // 修复2: 确保当前用户有 userid 属性
+        if (!currentUser.userid) {
+            message.error('用户信息异常，请重新登录');
+            return;
+        }
+
+        if (!newContent.trim()) {
+            message.warning('评论内容不能为空');
+            return;
+        }
+
+        setIsCommenting(true);
+        setLoading(true);
+
+        // 修复3: 使用 currentUser.userid 而非 currentUser.id
+        const commentData = {
+            postid: postId,
+            userid: Number(currentUser.userid),
+            postCommentcontent: newContent,
+            commenttime: new Date().toISOString()
+        };
+
+        try {
+            await createComment(commentData);
+            setNewContent('');
+            await loadComments(); // 重新加载评论，确保新评论显示
+            message.success('评论发布成功');
+        } catch (error) {
+            console.error('发布评论失败:', error);
+            message.error('发布评论失败');
+        } finally {
+            setLoading(false);
+            setIsCommenting(false);
+        }
+    };
+
+    const handleDelete = async (commentid) => {
+        try {
+            await deleteComment(commentid);
+            message.success('删除成功');
+            loadComments();
+        } catch (error) {
+            console.error('删除评论失败:', error);
+            message.error('删除失败');
+        }
+    };
+
+    const handleLike = async (commentid) => {
+        try {
+            await likeComment(commentid);
+            loadComments();
+        } catch (error) {
+            console.error('点赞失败:', error);
+            message.error('操作失败');
+        }
+    };
+
+    const handleUnlike = async (commentid) => {
+        try {
+            await unlikeComment(commentid);
+            loadComments();
+        } catch (error) {
+            console.error('取消点赞失败:', error);
+            message.error('操作失败');
+        }
+    };
+
+    // 获取用户信息（包括当前登录用户）
+    const getUserInfo = (userId) => {
+        // 修复4: 使用 currentUser.userid 而非 currentUser.id
+        if (currentUser && currentUser.userid && userId === currentUser.userid) {
+            return {
+                username: currentUser.username || `用户${userId}`,
+                image: currentUser.image || '',
+                decoration: currentUser.decoration || ''
+            };
+        }
+
+        // 对于其他用户，从userInfoMap中获取
+        return userInfoMap[userId] || {
+            username: `用户${userId}`,
+            image: '',
+            decoration: ''
+        };
+    };
+
+    return (
+        <Card title="评论区" bordered={false} className="comment-card">
+            {/* 评论输入框 - 根据用户登录状态调整 */}
+            {currentUser ? (
+                <>
+                    <TextArea
+                        rows={3}
+                        placeholder={`${currentUser.username}，留下你的评论...`}
+                        value={newContent}
+                        onChange={(e) => setNewContent(e.target.value)}
+                        className="comment-textarea"
+                        disabled={loading}
+                    />
+                    <div className="text-right mt-2">
+                        <Button
+                            type="primary"
+                            onClick={handleCreate}
+                            loading={loading || isCommenting}
+                            disabled={isCommenting}
+                        >
+                            {isCommenting ? '发布中...' : '发布评论'}
+                        </Button>
+                    </div>
+                </>
+            ) : (
+                <div className="login-prompt">
+                    请<a href="/login" className="login-link">登录</a>后发表评论
+                </div>
+            )}
+
+            {/* 评论列表 */}
+            <List
+                itemLayout="vertical"
+                dataSource={comments}
+                locale={{ emptyText: '暂无评论' }}
+                className="mt-6"
+                renderItem={(item) => {
+                    const user = getUserInfo(item.userid);
+                    // 修复5: 使用 userid 而非 id 比较当前用户
+                    const isCurrentUser = currentUser && currentUser.userid === item.userid;
+
+                    return (
+                        <List.Item
+                            key={item.commentid}
+                            className={isCurrentUser ? "current-user-comment" : ""}
+                            actions={[
+                                <Tooltip title="点赞" key="like">
+                                    <Space>
+                                        <Button
+                                            icon={<LikeOutlined />}
+                                            size="small"
+                                            onClick={() => handleLike(item.commentid)}
+                                        />
+                                        {item.likes}
+                                    </Space>
+                                </Tooltip>,
+                                <Tooltip title="取消点赞" key="unlike">
+                                    <Button
+                                        icon={<LikeFilled style={{ color: '#fadb14' }} />}
+                                        size="small"
+                                        onClick={() => handleUnlike(item.commentid)}
+                                    />
+                                </Tooltip>,
+                                isCurrentUser && (
+                                    <Popconfirm
+                                        title="确定要删除这条评论吗？"
+                                        onConfirm={() => handleDelete(item.commentid)}
+                                        okText="删除"
+                                        cancelText="取消"
+                                        key="delete"
+                                    >
+                                        <Button icon={<DeleteOutlined />} size="small" danger />
+                                    </Popconfirm>
+                                )
+                            ]}
+                            extra={
+                                <div className="comment-time">
+                                    {new Date(item.commenttime).toLocaleString()}
+                                </div>
+                            }
+                        >
+                            <List.Item.Meta
+                                avatar={
+                                    <Avatar
+                                        src={user.image || undefined}
+                                        alt={user.username}
+                                        className="comment-avatar"
+                                    >
+                                        {!user.image && user.username ? user.username.charAt(0).toUpperCase() : ''}
+                                    </Avatar>
+                                }
+                                title={
+                                    <span className="comment-username">
+                                        {user.username || `用户${item.userid}`}
+                                        {isCurrentUser && <span className="current-user-tag">(我)</span>}
+                                    </span>
+                                }
+                                description={<div className="comment-content">{item.postCommentcontent}</div>}
+                            />
+                        </List.Item>
+                    );
+                }}
+            />
+        </Card>
+    );
+};
+
+export default Comment;
\ No newline at end of file