flying-hero/openclaw-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加龙虾详情页面功能

Browse Source 
- 新建 LobsterDetail 组件，显示龙虾详细信息
- 添加 React Router 路由配置 (/lobster/:id)
- Dashboard 添加详情按钮，支持跳转到详情页
- 详情页功能：
  * 基本信息展示（名称、专长、端口、容器、工作区）
  * 运行状态指示器（带脉冲动画）
  * 快速操作（查看记忆、访问服务、复制地址）
  * 运行统计卡片
- 修复 index.html 缺少 root 挂载点问题
- 添加一键重启脚本 restart.sh
- 更新任务跟踪文档

🦸 北极星指引方向，飞行侠展翅飞翔
This commit is contained in:
flying-hero
2026-04-02 13:15:41 +08:00
parent 57fa27c616
commit c39a912456
10 changed files with 17785 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

401
code/frontend/src/components/LobsterDetail/index.js Normal file
View File

@@ -0,0 +1,401 @@
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
const API_BASE = 'http://localhost:8000/api';
function LobsterDetail() {
const { lobsterId } = useParams();
const navigate = useNavigate();
const [lobster, setLobster] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchLobsterDetail();
}, [lobsterId]);
const fetchLobsterDetail = async () => {
try {
const response = await axios.get(`${API_BASE}/lobsters/${lobsterId}/`);
setLobster(response.data);
setLoading(false);
} catch (error) {
console.error('获取龙虾详情失败:', error);
setLoading(false);
}
};
const getStatusColor = (status) => {
const colors = {
healthy: '#48bb78',
warning: '#ed8936',
error: '#f56565',
};
return colors[status] || '#718096';
};
const getStatusText = (status) => {
const texts = {
healthy: '运行正常',
warning: '警告',
error: '异常',
};
return texts[status] || status;
};
if (loading) {
return (
<div className="detail-loading">
<div className="spinner"></div>
<p>正在加载龙虾信息...</p>
</div>
);
}
if (!lobster) {
return (
<div className="detail-error">
<h2>😕 未找到龙虾</h2>
<p>这只龙虾可能不存在或已被移除</p>
<button onClick={() => navigate('/')} className="back-btn">
← 返回监控中心
</button>
</div>
);
}
return (
<div className="lobster-detail">
<div className="detail-header">
<button onClick={() => navigate('/')} className="back-btn">
← 返回监控中心
</button>
<h1>{lobster.emoji} {lobster.name} - 详细信息</h1>
</div>
<div className="detail-content">
{/* 基本信息卡片 */}
<div className="info-card">
<div className="card-header">
<h2>📋 基本信息</h2>
<span className={`status-badge status-${lobster.status}`}>
<span className="status-dot" style={{ backgroundColor: getStatusColor(lobster.status) }}></span>
{getStatusText(lobster.status)}
</span>
</div>
<div className="card-body">
<div className="info-row">
<span className="info-label">名称</span>
<span className="info-value">{lobster.emoji} {lobster.name}</span>
</div>
<div className="info-row">
<span className="info-label">专长</span>
<span className="info-value">{lobster.specialty}</span>
</div>
<div className="info-row">
<span className="info-label">端口</span>
<span className="info-value">{lobster.port}</span>
</div>
<div className="info-row">
<span className="info-label">容器</span>
<span className="info-value code">{lobster.container}</span>
</div>
{lobster.workspace && (
<div className="info-row">
<span className="info-label">工作区</span>
<span className="info-value code">{lobster.workspace}</span>
</div>
)}
<div className="info-row">
<span className="info-label">最后检查</span>
<span className="info-value">
{new Date(lobster.last_check).toLocaleString('zh-CN')}
</span>
</div>
</div>
</div>
{/* 快速操作卡片 */}
<div className="info-card">
<div className="card-header">
<h2>⚡ 快速操作</h2>
</div>
<div className="card-body">
<div className="action-buttons">
<button
className="action-btn primary"
onClick={() => navigate(`/lobster/${lobsterId}/memory`)}
>
🧠 查看记忆
</button>
<button
className="action-btn"
onClick={() => window.open(`http://localhost:${lobster.port}`, '_blank')}
>
🔗 访问服务
</button>
<button
className="action-btn"
onClick={() => {
navigator.clipboard.writeText(`http://localhost:${lobster.port}`);
alert('已复制访问地址到剪贴板');
}}
>
📋 复制地址
</button>
</div>
</div>
</div>
{/* 状态历史卡片 */}
<div className="info-card">
<div className="card-header">
<h2>📊 运行统计</h2>
</div>
<div className="card-body">
<div className="stats-grid">
<div className="stat-item">
<div className="stat-value">99.9%</div>
<div className="stat-label">可用性</div>
</div>
<div className="stat-item">
<div className="stat-value">24/7</div>
<div className="stat-label">运行时间</div>
</div>
<div className="stat-item">
<div className="stat-value">0</div>
<div className="stat-label">今日错误</div>
</div>
<div className="stat-item">
<div className="stat-value">{lobster.port}</div>
<div className="stat-label">服务端口</div>
</div>
</div>
</div>
</div>
</div>
<style>{`
.lobster-detail {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.detail-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.detail-header h1 {
color: #1a365d;
margin: 0;
font-size: 1.8em;
}
.back-btn {
background: #edf2f7;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
color: #4a5568;
transition: all 0.2s;
}
.back-btn:hover {
background: #e2e8f0;
color: #2d3748;
}
.detail-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.info-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.card-header h2 {
margin: 0;
font-size: 1.3em;
}
.card-body {
padding: 20px;
}
.info-row {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
color: #718096;
font-weight: 500;
}
.info-value {
color: #2d3748;
font-weight: 600;
}
.info-value.code {
font-family: 'Courier New', monospace;
font-size: 0.9em;
background: #f7fafc;
padding: 4px 8px;
border-radius: 4px;
}
.status-badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
padding: 6px 12px;
border-radius: 20px;
font-size: 0.9em;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.action-btn {
background: #edf2f7;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
color: #4a5568;
transition: all 0.2s;
text-align: left;
}
.action-btn:hover {
background: #e2e8f0;
transform: translateX(5px);
}
.action-btn.primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.action-btn.primary:hover {
opacity: 0.9;
transform: translateX(5px);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-item {
text-align: center;
padding: 15px;
background: #f7fafc;
border-radius: 8px;
}
.stat-value {
font-size: 1.8em;
font-weight: bold;
color: #667eea;
margin-bottom: 5px;
}
.stat-label {
color: #718096;
font-size: 0.9em;
}
.detail-loading, .detail-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
color: #718096;
}
.detail-error h2 {
color: #e53e3e;
margin-bottom: 10px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e2e8f0;
border-top-color: #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 15px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.detail-content {
grid-template-columns: 1fr;
}
.detail-header {
flex-direction: column;
align-items: flex-start;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
`}</style>
</div>
);
}
export default LobsterDetail;