diff --git a/WZY/xhs_front/src/components/NotebookPage.jsx b/WZY/xhs_front/src/components/NotebookPage.jsx
new file mode 100644
index 0000000..80abc3f
--- /dev/null
+++ b/WZY/xhs_front/src/components/NotebookPage.jsx
@@ -0,0 +1,85 @@
+// src/components/NotebookPage.jsx
+
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { fetchPosts, deletePost } from '../api/posts'
+import '../style/NotebookPage.css'
+
+export default function NotebookPage() {
+  const navigate = useNavigate()
+  const [posts, setPosts]     = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError]     = useState(null)
+
+  // TODO: 替换成真实用户 ID
+  const currentUserId = 1
+
+  useEffect(() => {
+    async function load() {
+      try {
+        // GET /posts?user_id=1
+        const list = await fetchPosts(currentUserId)
+        setPosts(list)
+      } catch (e) {
+        setError(e.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  async function handleDelete(id) {
+    if (!window.confirm('确定要删除该帖子吗？')) return
+    try {
+      await deletePost(id)
+      setPosts(posts.filter(p => p.id !== id))
+      alert('删除成功')
+    } catch (e) {
+      alert('删除失败：' + e.message)
+    }
+  }
+
+  function handleEdit(id) {
+    // 假设你在路由里挂载了 /posts/edit/:postId
+    navigate(`/posts/edit/${id}`)
+  }
+
+  if (loading) return <p>加载中…</p>
+  if (error)   return <p className="error">加载失败：{error}</p>
+
+  return (
+    <div className="notebook-page">
+      <h2>我的帖子管理</h2>
+      {posts.length === 0 ? (
+        <p>暂无帖子</p>
+      ) : (
+        <table className="post-table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>标题</th>
+              <th>状态</th>
+              <th>创建时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {posts.map(p => (
+              <tr key={p.id}>
+                <td>{p.id}</td>
+                <td>{p.title}</td>
+                <td>{p.status}</td>
+                <td>{new Date(p.created_at).toLocaleString()}</td>
+                <td>
+                  <button onClick={() => handleEdit(p.id)}>编辑</button>
+                  <button onClick={() => handleDelete(p.id)}>删除</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}