diff --git a/pt--frontend/src/components/Post.jsx b/pt--frontend/src/components/Post.jsx
new file mode 100644
index 0000000..10a4840
--- /dev/null
+++ b/pt--frontend/src/components/Post.jsx
@@ -0,0 +1,200 @@
+import React, { useState, useEffect } from 'react';
+import {
+    createPost,
+    findPinnedPosts,
+    likePost,
+    unlikePost,
+    searchPosts,
+    getAllPostsSorted,
+    findPostsByUserId,
+} from '../api/post';
+import Comment from './Comment';
+
+const Post = () => {
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
+    const [tags, setTags] = useState('');
+    const [photo, setPhoto] = useState(null);
+    const [posts, setPosts] = useState([]);
+    const [searchKeyword, setSearchKeyword] = useState('');
+
+    const currentUser = { id: 1, username: '测试用户' };
+
+    useEffect(() => {
+        loadPinnedPosts();  // 初始加载置顶帖子
+    }, []);
+
+    const loadPinnedPosts = async () => {
+        const data = await findPinnedPosts();
+        setPosts(data);
+    };
+
+    const loadAllPosts = async () => {
+        const data = await getAllPostsSorted();
+        setPosts(data);
+    };
+
+    const loadMyPosts = async () => {
+        const data = await findPostsByUserId(currentUser.id);
+        setPosts(data);
+    };
+
+    const handleCreate = async () => {
+        const formData = new FormData();
+        formData.append('userid', currentUser.id);
+        formData.append('post_title', title);
+        formData.append('post_content', content);
+        formData.append('is_pinned', true);
+        formData.append('tags', tags);
+        formData.append('rannge', 'public');
+        if (photo) {
+            formData.append('photo', photo);
+        }
+
+        const success = await createPost(formData);
+        if (success) {
+            alert('帖子创建成功');
+            loadPinnedPosts();
+            setTitle('');
+            setContent('');
+            setTags('');
+            setPhoto(null);
+        } else {
+            alert('创建失败');
+        }
+    };
+
+    const handleLike = async (postid) => {
+        await likePost(postid);
+        loadPinnedPosts();
+    };
+
+    const handleUnlike = async (postid) => {
+        await unlikePost(postid);
+        loadPinnedPosts();
+    };
+
+    const handleSearch = async () => {
+        const result = await searchPosts(searchKeyword);
+        setPosts(result);
+    };
+
+    return (
+        <div className="p-4 max-w-3xl mx-auto">
+            <h1 className="text-2xl font-bold mb-4">创建帖子</h1>
+            <div className="space-y-3 mb-6">
+                <input
+                    type="text"
+                    placeholder="标题"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    className="w-full border p-2 rounded"
+                />
+                <textarea
+                    placeholder="内容"
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                    className="w-full border p-2 rounded"
+                />
+                <input
+                    type="text"
+                    placeholder="标签（用逗号分隔，如 学习,编程）"
+                    value={tags}
+                    onChange={(e) => setTags(e.target.value)}
+                    className="w-full border p-2 rounded"
+                />
+                <input
+                    type="file"
+                    onChange={(e) => setPhoto(e.target.files[0])}
+                />
+                <button
+                    onClick={handleCreate}
+                    className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                >
+                    发布
+                </button>
+            </div>
+
+            <div className="mb-6 flex gap-3">
+                <input
+                    type="text"
+                    placeholder="搜索关键词"
+                    value={searchKeyword}
+                    onChange={(e) => setSearchKeyword(e.target.value)}
+                    className="border p-2 rounded flex-grow"
+                />
+                <button
+                    onClick={handleSearch}
+                    className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
+                >
+                    搜索
+                </button>
+            </div>
+
+            {/* 新增三个展示按钮 */}
+            <div className="mb-6 flex gap-3">
+                <button
+                    onClick={loadPinnedPosts}
+                    className="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600"
+                >
+                    置顶帖子
+                </button>
+                <button
+                    onClick={loadAllPosts}
+                    className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600"
+                >
+                    所有帖子
+                </button>
+                <button
+                    onClick={loadMyPosts}
+                    className="bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600"
+                >
+                    我的帖子
+                </button>
+            </div>
+
+            <h2 className="text-xl font-semibold mb-3">帖子列表</h2>
+            <div className="space-y-6">
+                {posts.map((post) => (
+                    <div key={post.postid} className="border rounded p-4 shadow bg-white">
+                        <h3 className="text-lg font-bold">{post.postTitle}</h3>
+                        <p className="text-gray-700">{post.postContent}</p>
+                        {post.photo && (
+                            <img
+                                src={`http://localhost:8080${post.photo}`}
+                                alt="post"
+                                className="w-64 h-auto mt-2"
+                            />
+                        )}
+                        <div className="mt-2 text-sm text-gray-500">
+                            发布时间：{post.postCreatedTime}
+                        </div>
+                        <div className="mt-2 text-sm text-gray-500">
+                            标签：{post.tags || '无'}
+                        </div>
+                        <div className="mt-2 flex items-center gap-4">
+                            <span>👍 {post.likes}</span>
+                            <button
+                                onClick={() => handleLike(post.postid)}
+                                className="text-blue-500 hover:underline"
+                            >
+                                点赞
+                            </button>
+                            <button
+                                onClick={() => handleUnlike(post.postid)}
+                                className="text-red-500 hover:underline"
+                            >
+                                取消点赞
+                            </button>
+                        </div>
+                        <div className="mt-4 border-t pt-4">
+                            <Comment postId={post.postid} currentUser={currentUser} />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Post;