整理项目结构
Change-Id: I14b059f2c462100581d2acfef6efbee130bed861
diff --git a/TRM/front/src/Admin.js b/TRM/front/src/Admin.js
new file mode 100644
index 0000000..1547706
--- /dev/null
+++ b/TRM/front/src/Admin.js
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import './Admin.css';
+
+function AdminPage() {
+ const [posts, setPosts] = useState([]);
+
+ useEffect(() => {
+ // TODO: 替换成你后端真正的接口
+ fetch('/apostlist')
+ .then(res => res.json())
+ .then(data => setPosts(data))
+ .catch(console.error);
+ }, []);
+
+ const handleAction = (id, action) => {
+ // action: 'approve' | 'ban' | ...
+ fetch(`/api/posts/${id}/${action}`, { method: 'POST' })
+ .then(res => {
+ if (res.ok) {
+ // 简单地把该条移除或根据返回值更新状态
+ setPosts(ps => ps.filter(p => p.id !== id));
+ }
+ })
+ .catch(console.error);
+ };
+
+ return (
+ <div className="admin-container">
+ <h1 className="admin-title">小红书 · 管理员审核</h1>
+ <table className="admin-table">
+ <thead>
+ <tr>
+ <th>标题</th>
+ <th>发布时间</th>
+ <th>内容摘要</th>
+ <th>状态</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ <tbody>
+ {posts.map(p => {
+ const brief =
+ p.content.length > 80
+ ? p.content.slice(0, 80) + '...'
+ : p.content;
+ return (
+ <tr key={p.id}>
+ <td>{p.title}</td>
+ <td>{new Date(p.createdAt).toLocaleString()}</td>
+ <td>{brief}</td>
+ <td className={`status ${p.status}`}>{p.status}</td>
+ <td>
+ <button
+ className="btn btn-approve"
+ onClick={() => handleAction(p.id, 'approve')}
+ >
+ 审核
+ </button>
+ <button
+ className="btn btn-ban"
+ onClick={() => handleAction(p.id, 'ban')}
+ >
+ 封禁
+ </button>
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ </div>
+ );
+}
+
+export default AdminPage;
\ No newline at end of file