diff --git a/Merge/front/src/components/TransactionLogs.js b/Merge/front/src/components/TransactionLogs.js
new file mode 100644
index 0000000..9df8f67
--- /dev/null
+++ b/Merge/front/src/components/TransactionLogs.js
@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { fetchRecordLog } from '../api/posts_trm';
+
+function TransactionLogs({ userId }) {
+  const [records, setRecords] = useState([]);
+
+  useEffect(() => {
+    fetchRecordLog(userId)
+      .then(data => setRecords(data))
+      .catch(err => console.error('fetchRecordLog error:', err));
+  }, [userId]);
+
+  return (
+    <section className="dashboard-logs">
+      <table className="admin-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>用户ID</th>
+            <th>类型</th>
+            <th>内容</th>
+            <th>IP</th>
+            <th>创建时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          {records.length > 0
+            ? records.map((r, i) => (
+                <tr key={i}>
+                  <td>{r.id}</td>
+                  <td>{r.user_id}</td>
+                  <td>{r.type}</td>
+                  <td>{r.content}</td>
+                  <td>{r.ip}</td>
+                  <td>{new Date(r.created_at).toLocaleString()}</td>
+                </tr>
+              ))
+            : (
+              <tr>
+                <td colSpan="6" style={{ textAlign: 'center' }}>暂无数据</td>
+              </tr>
+            )
+          }
+        </tbody>
+      </table>
+    </section>
+  );
+}
+
+export default TransactionLogs;