Add React frontend and Django backend code
- React components: Dashboard, MemoryCalendar, SearchBox, ToolList - Django backend structure - Package configuration files
This commit is contained in:
60
code/frontend/src/pages/Dashboard/index.js
Normal file
60
code/frontend/src/pages/Dashboard/index.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
const API_BASE = 'http://localhost:8000/api';
|
||||
|
||||
function Dashboard() {
|
||||
const [lobsters, setLobsters] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchLobsters();
|
||||
const interval = setInterval(fetchLobsters, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const fetchLobsters = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_BASE}/lobsters/`);
|
||||
setLobsters(response.data);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('获取龙虾状态失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading">加载中...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
<h1>🦞 龙虾舰队监控中心</h1>
|
||||
<div className="lobster-grid">
|
||||
{lobsters.map(lobster => (
|
||||
<div key={lobster.id} className="lobster-card">
|
||||
<div className="lobster-header">
|
||||
<span className="lobster-name">{lobster.emoji} {lobster.name}</span>
|
||||
<span className={`status status-${lobster.status}`}>{lobster.status}</span>
|
||||
</div>
|
||||
<div className="lobster-info">
|
||||
<p>专长:{lobster.specialty}</p>
|
||||
<p>端口:{lobster.port}</p>
|
||||
<p>容器:{lobster.container}</p>
|
||||
</div>
|
||||
<div className="lobster-actions">
|
||||
<button onClick={() => window.location.href = `/lobster/${lobster.id}`}>
|
||||
📊 详情
|
||||
</button>
|
||||
<button onClick={() => window.location.href = `/lobster/${lobster.id}/memory`}>
|
||||
🧠 记忆
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
Reference in New Issue
Block a user