新增管理帖子的组件
Change-Id: I7299ad6f735064dd112f92bab7c87daa952e6dc2
diff --git a/Merge/front/src/components/NotebookPage.jsx b/Merge/front/src/components/NotebookPage.jsx
new file mode 100644
index 0000000..25264ec
--- /dev/null
+++ b/Merge/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_wzy'
+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 = 2
+
+ 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>
+ )
+}