diff --git a/src/pages/Forum/posts-create/CreatePost.css b/src/pages/Forum/posts-create/CreatePost.css
new file mode 100644
index 0000000..7707a0c
--- /dev/null
+++ b/src/pages/Forum/posts-create/CreatePost.css
@@ -0,0 +1,64 @@
+.create-post-page {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    gap: 20px;
+  }
+  
+  .title-and-button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .title-input {
+    flex: 1;
+    height: 40px;
+    padding: 0 10px;
+    font-size: 16px;
+  }
+  
+  .submit-button {
+    height: 40px;
+    padding: 0 20px;
+    font-size: 16px;
+    background-color: #409eff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+  }
+  
+  .layout {
+    display: flex;
+    gap: 20px;
+  }
+  
+  .main-content {
+    flex: 3;
+  }
+  
+  .content-editor {
+    width: 100%;
+    height: 650px;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+  }
+  
+  .sidebar-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .sidebar-section {
+    background: #f9f9f9;
+    padding: 10px;
+    border-radius: 6px;
+  }
+  
+  .sidebar-section p {
+    margin: 0 0 10px 0;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/Forum/posts-create/CreatePost.jsx b/src/pages/Forum/posts-create/CreatePost.jsx
new file mode 100644
index 0000000..a03a836
--- /dev/null
+++ b/src/pages/Forum/posts-create/CreatePost.jsx
@@ -0,0 +1,91 @@
+// src/pages/Forum/CreatePost.jsx
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const CreatePost = ({ userId }) => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [imgUrl, setImageUrl] = useState('');
+  const [isAnonymous, setIsAnonymous] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const postData = {
+        title,
+        postContent: content,
+        postType: isAnonymous,
+      };
+
+      if (imgUrl.trim()) {
+        postData.imgUrl = imgUrl;
+      }
+
+      const response = await axios.post(
+        `${API_BASE}/echo/forum/posts/${userId}/createPost`,
+        postData
+      );
+      
+
+      if (response.status === 201) {
+        alert('帖子创建成功！');
+        setTitle('');
+        setContent('');
+        setImageUrl('');
+        setIsAnonymous(false);
+      }
+    } catch (error) {
+      console.error('帖子创建失败：', error.response?.data || error.message);
+      alert('创建失败，请重试');
+    }    
+  };
+
+  return (
+    <div className="create-post">
+      <h2>创建新帖子</h2>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>标题：</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+          />
+        </div>
+        <div>
+          <label>内容：</label>
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            required
+          />
+        </div>
+        <div>
+          <label>图片 URL（可选）：</label>
+          <input
+            type="text"
+            value={imgUrl}
+            onChange={(e) => setImageUrl(e.target.value)}
+          />
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={isAnonymous}
+              onChange={(e) => setIsAnonymous(e.target.checked)}
+            />
+            匿名发布
+          </label>
+        </div>
+        <button type="submit">发布</button>
+      </form>
+    </div>
+  );
+};
+
+export default CreatePost;
\ No newline at end of file
diff --git a/src/pages/Forum/posts-create/CreatePostPage.jsx b/src/pages/Forum/posts-create/CreatePostPage.jsx
new file mode 100644
index 0000000..ea2505c
--- /dev/null
+++ b/src/pages/Forum/posts-create/CreatePostPage.jsx
@@ -0,0 +1,11 @@
+// src/pages/Forum/posts-create/CreatePostPage.jsx
+import React from 'react';
+import { useUserStore } from '../../store/user';
+import CreatePost from './CreatePost';
+
+const CreatePostPage = () => {
+  const { user } = useUserStore(); // 拿到 user
+  return <CreatePost userId={user?.id} />;
+};
+
+export default CreatePostPage;