diff --git a/Merge/front/src/components/PerformanceLogs.js b/Merge/front/src/components/PerformanceLogs.js
new file mode 100644
index 0000000..bb1c244
--- /dev/null
+++ b/Merge/front/src/components/PerformanceLogs.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import {
+  ResponsiveContainer, LineChart, Line,
+  XAxis, YAxis, Tooltip, CartesianGrid, Legend
+} from 'recharts';
+import { fetchSysCost } from '../api/posts_trm';
+
+function PerformanceLogs({ userId }) {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    fetchSysCost(userId)
+      .then(list => setData(list))
+      .catch(err => console.error('fetchSysCost error:', err));
+  }, [userId]);
+
+  return (
+    <section className="dashboard-performance">
+      <ResponsiveContainer width="100%" height={400}>
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="record_time" />
+          <YAxis
+            domain={[0, 'auto']}
+            label={{ value: '时间 (s)', angle: -90, position: 'insideLeft' }}
+            tickFormatter={val => (val / 1000).toFixed(2)}
+          />
+          <Tooltip formatter={val => (typeof val === 'number' ? (val/1000).toFixed(2) + 's' : val)} />
+          <Legend />
+          <Line type="monotone" dataKey="elapsed_time" stroke="#8884d8" name="响应时间" />
+          <Line type="monotone" dataKey="cpu_user" stroke="#82ca9d" name="CPU 用户时间" />
+          <Line type="monotone" dataKey="cpu_system" stroke="#ffc658" name="CPU 系统时间" />
+          <Line type="monotone" dataKey="memory_rss" stroke="#ff7300" name="内存 RSS" />
+          {/* 如需更多指标，可再添其他 <Line /> */}
+        </LineChart>
+      </ResponsiveContainer>
+    </section>
+  );
+}
+
+export default PerformanceLogs;