Add React frontend and Django backend code

- React components: Dashboard, MemoryCalendar, SearchBox, ToolList
- Django backend structure
- Package configuration files
This commit is contained in:
2026-04-01 20:43:25 +08:00
parent d80dc01bca
commit 1cbbf11fcf
6 changed files with 307 additions and 0 deletions

View 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;