diff --git a/Merge/front/src/components/PerformanceLogs.js b/Merge/front/src/components/PerformanceLogs.js
index f87ef7a..67518de 100644
--- a/Merge/front/src/components/PerformanceLogs.js
+++ b/Merge/front/src/components/PerformanceLogs.js
@@ -3,16 +3,19 @@
   ResponsiveContainer, LineChart, Line,
   XAxis, YAxis, Tooltip, CartesianGrid, Legend
 } from 'recharts';
-import { fetchSysCost } from '../api/posts_trm';
+import { fetchSysCost, fetchGpuUsage } from '../api/posts_trm';
 
 function PerformanceLogs({ userId }) {
   const [data, setData] = useState([]);
+  const [gpuData, setGpuData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [unauthorized, setUnauthorized] = useState(false);
 
   useEffect(() => {
     setLoading(true);
-    fetchSysCost(userId)
+    
+    // 获取系统性能数据
+    const fetchSystemData = fetchSysCost(userId)
       .then(result => {
         // 检查是否是权限错误
         if (result && result.status === 'error' && result.message === 'Unauthorized') {
@@ -49,10 +52,59 @@
           setUnauthorized(true);
           setData([]);
         }
+      });
+
+    // 获取GPU数据
+    const fetchGpuData = fetchGpuUsage(100)
+      .then(result => {
+        console.log('GPU data:', result);
+        const processedData = processGpuData(result);
+        setGpuData(processedData);
       })
+      .catch(err => {
+        console.error('fetchGpuUsage error:', err);
+      });
+
+    Promise.all([fetchSystemData, fetchGpuData])
       .finally(() => setLoading(false));
   }, [userId]);
 
+  // 处理GPU数据，按时间戳分组
+  const processGpuData = (rawData) => {
+    const timeMap = new Map();
+    
+    rawData.forEach(record => {
+      const timestamp = new Date(record.timestamp).getTime();
+      if (!timeMap.has(timestamp)) {
+        timeMap.set(timestamp, { timestamp });
+      }
+      const timeEntry = timeMap.get(timestamp);
+      timeEntry[`gpu${record.gpu_id}_usage`] = record.gpu_usage;
+      timeEntry[`gpu${record.gpu_id}_memory`] = record.gpu_memory_usage;
+    });
+    
+    return Array.from(timeMap.values()).sort((a, b) => a.timestamp - b.timestamp);
+  };
+
+  // 获取GPU颜色
+  const getGpuColors = () => {
+    return ['#8884d8', '#82ca9d', '#ffc658', '#ff7300', '#8dd1e1', '#d084d0', '#ffb347', '#87ceeb'];
+  };
+
+  // 获取唯一的GPU ID列表
+  const getGpuIds = () => {
+    const ids = new Set();
+    gpuData.forEach(entry => {
+      Object.keys(entry).forEach(key => {
+        if (key.includes('gpu') && key.includes('_usage')) {
+          const gpuId = key.replace('_usage', '').replace('gpu', '');
+          ids.add(gpuId);
+        }
+      });
+    });
+    return Array.from(ids).sort((a, b) => parseInt(a) - parseInt(b));
+  };
+
   if (loading) {
     return (
       <section className="dashboard-performance">
@@ -114,6 +166,70 @@
 
   return (
     <section className="dashboard-performance">
+      {/* GPU使用率图表 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h3>GPU 使用率</h3>
+        <ResponsiveContainer width="100%" height={300}>
+          <LineChart data={gpuData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              dataKey="timestamp"
+              type="number"
+              domain={['dataMin', 'dataMax']}
+              tickFormatter={ts => new Date(ts).toLocaleTimeString()}
+            />
+            <YAxis domain={[0, 100]} label={{ value: '使用率 (%)', angle: -90, position: 'insideLeft' }} />
+            <Tooltip 
+              formatter={(val, name) => [`${val?.toFixed(2)}%`, name]}
+              labelFormatter={ts => new Date(ts).toLocaleString()}
+            />
+            <Legend />
+            {getGpuIds().map((gpuId, index) => (
+              <Line
+                key={`gpu${gpuId}_usage`}
+                type="monotone"
+                dataKey={`gpu${gpuId}_usage`}
+                stroke={getGpuColors()[index % getGpuColors().length]}
+                name={`GPU ${gpuId} 使用率`}
+                connectNulls={false}
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      {/* GPU内存占用图表 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h3>GPU 内存占用</h3>
+        <ResponsiveContainer width="100%" height={300}>
+          <LineChart data={gpuData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              dataKey="timestamp"
+              type="number"
+              domain={['dataMin', 'dataMax']}
+              tickFormatter={ts => new Date(ts).toLocaleTimeString()}
+            />
+            <YAxis domain={[0, 'auto']} label={{ value: '内存 (MB)', angle: -90, position: 'insideLeft' }} />
+            <Tooltip 
+              formatter={(val, name) => [`${val?.toFixed(2)} MB`, name]}
+              labelFormatter={ts => new Date(ts).toLocaleString()}
+            />
+            <Legend />
+            {getGpuIds().map((gpuId, index) => (
+              <Line
+                key={`gpu${gpuId}_memory`}
+                type="monotone"
+                dataKey={`gpu${gpuId}_memory`}
+                stroke={getGpuColors()[index % getGpuColors().length]}
+                name={`GPU ${gpuId} 内存`}
+                connectNulls={false}
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
       {/* 响应时间图表 */}
       <div style={{ marginBottom: '30px' }}>
         <h3>响应时间</h3>