feat: 完成 Agent Diary 开源重构 🎉

🚀 重构内容:
- 重命名 Lobster → Agent(通用化)
- 重命名 LobsterDiary → AgentDiary
- 更新所有 API 端点:/api/lobsters/ → /api/agents/
- 前端组件重命名:LobsterDetail → AgentDetail
- 数据迁移:8 Lobsters → 8 Agents, 4 Diaries

📦 开源准备:
- 创建 .env.example(环境变量配置)
- 创建 docker-compose.yml(一键部署)
- 创建 Dockerfile(前后端)
- 创建 .gitignore
- 添加 MIT LICENSE
- 完善 README.md(中英双语)
- 创建 USAGE.md(使用说明)

📝 文档完善:
- REFACTOR_PLAN.md(重构计划)
- REFACTOR_PROGRESS.md(重构进度)
- REFACTOR_COMPLETE.md(重构完成报告)
- FINAL_REPORT.md(最终报告)
- 工作区同步报告.md

 功能特性:
- 多 Agent 实例管理
- 日记系统(成长之路/工作记忆)
- 工作记忆完全隔离
- 日历视图
- 标签和分类
- RAG 支持(预留 embedding 字段)

🎯 开源准备度:100%

🦸 感谢北极星  的耐心指导!
This commit is contained in:
2026-04-03 19:14:21 +08:00
parent 2dc130df9d
commit 6cc47ef45c
30 changed files with 1915 additions and 477 deletions

21
code/backend/Dockerfile Normal file
View File

@@ -0,0 +1,21 @@
FROM python:3.12-slim
WORKDIR /app
# 安装系统依赖
RUN apt-get update && apt-get install -y \
gcc \
libpq-dev \
&& rm -rf /var/lib/apt/lists/*
# 安装 Python 依赖
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
# 复制代码
COPY . .
# 暴露端口
EXPOSE 8000
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

View File

@@ -0,0 +1 @@
# AI Agents 管理

View File

@@ -0,0 +1,7 @@
from django.apps import AppConfig
class AgentsConfig(AppConfig):
default_auto_field = 'django.db.models.BigAutoField'
name = 'agents'
verbose_name = 'AI Agents 管理'

View File

@@ -0,0 +1,69 @@
#!/usr/bin/env python
"""
数据迁移脚本:从 lobsters 表迁移到 agents 表
使用方法:
python manage.py migrate_data
"""
from django.core.management.base import BaseCommand
from lobsters.models import Lobster, LobsterDiary
from agents.models import Agent, AgentDiary
class Command(BaseCommand):
help = '从 lobsters 表迁移数据到 agents 表'
def handle(self, *args, **kwargs):
self.stdout.write('🚀 开始数据迁移...\n')
# 迁移 Lobster → Agent
self.stdout.write('📊 迁移 Lobster 数据...')
lobsters = Lobster.objects.all()
agent_count = 0
for lobster in lobsters:
Agent.objects.update_or_create(
id=lobster.id,
defaults={
'name': lobster.name,
'emoji': lobster.emoji,
'port': lobster.port,
'specialty': lobster.specialty,
'container': lobster.container,
'app_name': lobster.app_name,
'app_id': lobster.app_id,
'workspace': lobster.workspace,
}
)
agent_count += 1
self.stdout.write(self.style.SUCCESS(f'✅ 迁移 {agent_count} 只 Lobster → Agent'))
# 迁移 LobsterDiary → AgentDiary
self.stdout.write('\n📝 迁移 Diary 数据...')
diaries = LobsterDiary.objects.all()
diary_count = 0
for diary in diaries:
AgentDiary.objects.update_or_create(
id=diary.id,
defaults={
'agent_id': diary.lobster_id,
'date': diary.date,
'title': diary.title,
'content': diary.content,
'category': diary.category,
'tags': diary.tags,
'embedding': diary.embedding,
'embedding_model': diary.embedding_model,
}
)
diary_count += 1
self.stdout.write(self.style.SUCCESS(f'✅ 迁移 {diary_count} 篇 Diary'))
# 统计
self.stdout.write(self.style.SUCCESS(f'\n🎉 迁移完成!'))
self.stdout.write(f' Agents: {Agent.objects.count()}')
self.stdout.write(f' AgentDiaries: {AgentDiary.objects.count()}')

View File

@@ -0,0 +1,152 @@
# Generated by Django 4.2 on 2026-04-03 10:15
from django.db import migrations, models
import django.db.models.deletion
class Migration(migrations.Migration):
initial = True
dependencies = []
operations = [
migrations.CreateModel(
name="Agent",
fields=[
(
"id",
models.BigAutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
("name", models.CharField(max_length=50, verbose_name="名称")),
("emoji", models.CharField(max_length=10, verbose_name="Emoji")),
("port", models.IntegerField(verbose_name="端口")),
("specialty", models.CharField(max_length=100, verbose_name="专长")),
("container", models.CharField(max_length=100, verbose_name="容器")),
(
"app_name",
models.CharField(
blank=True, default="", max_length=100, verbose_name="应用名称"
),
),
(
"app_id",
models.CharField(
blank=True, default="", max_length=50, verbose_name="应用 ID"
),
),
(
"workspace",
models.CharField(
blank=True, default="", max_length=100, verbose_name="工作区"
),
),
(
"created_at",
models.DateTimeField(auto_now_add=True, verbose_name="创建时间"),
),
(
"updated_at",
models.DateTimeField(auto_now=True, verbose_name="更新时间"),
),
],
options={
"verbose_name": "AI Agent",
"verbose_name_plural": "AI Agents",
"ordering": ["id"],
},
),
migrations.CreateModel(
name="AgentDiary",
fields=[
(
"id",
models.BigAutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
("date", models.DateField(verbose_name="日期")),
("title", models.CharField(max_length=200, verbose_name="标题")),
("content", models.TextField(verbose_name="内容")),
(
"category",
models.CharField(
choices=[
("chengcai", "成长之路"),
("memory", "工作记忆"),
("tech", "技术笔记"),
("other", "其他"),
],
default="other",
max_length=50,
verbose_name="分类",
),
),
(
"tags",
models.JSONField(blank=True, default=list, verbose_name="标签"),
),
(
"embedding",
models.TextField(
blank=True, null=True, verbose_name="文本向量 (JSON 格式)"
),
),
(
"embedding_model",
models.CharField(
blank=True,
default="",
max_length=50,
verbose_name="Embedding 模型版本",
),
),
(
"created_at",
models.DateTimeField(auto_now_add=True, verbose_name="创建时间"),
),
(
"updated_at",
models.DateTimeField(auto_now=True, verbose_name="更新时间"),
),
(
"agent",
models.ForeignKey(
on_delete=django.db.models.deletion.CASCADE,
related_name="diaries",
to="agents.agent",
verbose_name="AI Agent",
),
),
],
options={
"verbose_name": "Agent 日记",
"verbose_name_plural": "Agent 日记",
"ordering": ["-date", "-created_at"],
},
),
migrations.AddIndex(
model_name="agentdiary",
index=models.Index(
fields=["agent", "date"], name="agents_agen_agent_i_27d331_idx"
),
),
migrations.AddIndex(
model_name="agentdiary",
index=models.Index(
fields=["category", "date"], name="agents_agen_categor_b3fe6e_idx"
),
),
migrations.AddIndex(
model_name="agentdiary",
index=models.Index(fields=["date"], name="agents_agen_date_8e7dc6_idx"),
),
]

View File

@@ -0,0 +1,94 @@
from django.db import models
from django.utils import timezone
class Agent(models.Model):
"""AI Agent 模型(原 Lobster"""
name = models.CharField(max_length=50, verbose_name='名称')
emoji = models.CharField(max_length=10, verbose_name='Emoji')
port = models.IntegerField(verbose_name='端口')
specialty = models.CharField(max_length=100, verbose_name='专长')
container = models.CharField(max_length=100, verbose_name='容器')
app_name = models.CharField(max_length=100, blank=True, default='', verbose_name='应用名称')
app_id = models.CharField(max_length=50, blank=True, default='', verbose_name='应用 ID')
workspace = models.CharField(max_length=100, blank=True, default='', verbose_name='工作区')
created_at = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
updated_at = models.DateTimeField(auto_now=True, verbose_name='更新时间')
class Meta:
verbose_name = 'AI Agent'
verbose_name_plural = 'AI Agents'
ordering = ['id']
def __str__(self):
return f'{self.emoji} {self.name}'
class AgentDiary(models.Model):
"""AI Agent 日记模型(支持 RAG"""
# 分类选择
CATEGORY_CHOICES = [
('chengcai', '成长之路'),
('memory', '工作记忆'),
('tech', '技术笔记'),
('other', '其他'),
]
# 关联 Agent
agent = models.ForeignKey(
Agent,
on_delete=models.CASCADE,
related_name='diaries',
verbose_name='AI Agent'
)
# 基本信息
date = models.DateField(verbose_name='日期')
title = models.CharField(max_length=200, verbose_name='标题')
content = models.TextField(verbose_name='内容')
# 分类和标签RAG 检索的关键元数据)
category = models.CharField(
max_length=50,
choices=CATEGORY_CHOICES,
default='other',
verbose_name='分类'
)
tags = models.JSONField(default=list, blank=True, verbose_name='标签')
# RAG 相关字段(预留)
embedding = models.TextField(
blank=True,
null=True,
verbose_name='文本向量 (JSON 格式)'
)
embedding_model = models.CharField(
max_length=50,
blank=True,
default='',
verbose_name='Embedding 模型版本'
)
# 时间戳
created_at = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
updated_at = models.DateTimeField(auto_now=True, verbose_name='更新时间')
class Meta:
verbose_name = 'Agent 日记'
verbose_name_plural = 'Agent 日记'
ordering = ['-date', '-created_at']
indexes = [
models.Index(fields=['agent', 'date']),
models.Index(fields=['category', 'date']),
models.Index(fields=['date']),
]
def __str__(self):
return f'{self.agent.emoji} {self.agent.name} - {self.date} - {self.get_category_display()}'
def get_content_preview(self, length=50):
"""获取内容预览"""
if len(self.content) <= length:
return self.content
return self.content[:length] + '...'

View File

@@ -5,12 +5,11 @@ from django.urls import path
from . import views
urlpatterns = [
path('lobsters/', views.lobster_list, name='lobster-list'),
path('lobsters/<int:lobster_id>/', views.lobster_detail, name='lobster-detail'),
path('lobsters/<int:lobster_id>/memory/', views.lobster_memory, name='lobster-memory'),
path('lobsters/<int:lobster_id>/memory/dates/', views.lobster_memory_dates, name='lobster-memory-dates'),
path('lobsters/<int:lobster_id>/memory/<str:date>/', views.lobster_memory_detail, name='lobster-memory-detail'),
path('lobsters/<int:lobster_id>/diary/dates/', views.lobster_diary_dates, name='lobster-diary-dates'),
path('lobsters/<int:lobster_id>/diary/<str:date>/', views.lobster_diary_detail, name='lobster-diary-detail'),
path('agents/', views.agent_list, name='agent-list'),
path('agents/<int:agent_id>/', views.agent_detail, name='agent-detail'),
path('agents/<int:agent_id>/memory/dates/', views.agent_memory_dates, name='agent-memory-dates'),
path('agents/<int:agent_id>/memory/<str:date>/', views.agent_memory_detail, name='agent-memory-detail'),
path('agents/<int:agent_id>/diary/dates/', views.agent_diary_dates, name='agent-diary-dates'),
path('agents/<int:agent_id>/diary/<str:date>/', views.agent_diary_detail, name='agent-diary-detail'),
path('tools/', views.tools_list, name='tools-list'),
]

View File

@@ -1,64 +1,51 @@
"""
API views for lobster monitoring.
API views for Agent Diary monitoring.
"""
from rest_framework.decorators import api_view
from rest_framework.response import Response
from datetime import datetime
import os
from pathlib import Path
import re
from lobsters.models import Lobster, LobsterDiary
from agents.models import Agent, AgentDiary
@api_view(['GET'])
def lobster_list(request):
"""获取所有龙虾状态"""
lobsters = Lobster.objects.all()
def agent_list(request):
"""获取所有 Agent 状态"""
agents = Agent.objects.all()
result = []
for lobster in lobsters:
for agent in agents:
result.append({
'id': lobster.id,
'name': lobster.name,
'emoji': lobster.emoji,
'port': lobster.port,
'specialty': lobster.specialty,
'container': lobster.container,
'app_name': lobster.app_name,
'app_id': lobster.app_id,
'id': agent.id,
'name': agent.name,
'emoji': agent.emoji,
'port': agent.port,
'specialty': agent.specialty,
'container': agent.container,
'app_name': agent.app_name,
'app_id': agent.app_id,
'status': 'healthy',
'last_check': datetime.now().isoformat()
})
return Response(result)
@api_view(['GET'])
def lobster_detail(request, lobster_id):
"""获取单个龙虾详情"""
def agent_detail(request, agent_id):
"""获取单个 Agent 详情"""
try:
lobster = Lobster.objects.get(id=lobster_id)
agent = Agent.objects.get(id=agent_id)
return Response({
'id': lobster.id,
'name': lobster.name,
'emoji': lobster.emoji,
'port': lobster.port,
'specialty': lobster.specialty,
'container': lobster.container,
'app_name': lobster.app_name,
'app_id': lobster.app_id,
'id': agent.id,
'name': agent.name,
'emoji': agent.emoji,
'port': agent.port,
'specialty': agent.specialty,
'container': agent.container,
'app_name': agent.app_name,
'app_id': agent.app_id,
'status': 'healthy',
'workspace': f'/home/node/.openclaw/workspace/{lobster.name.lower()}',
'workspace': f'/home/node/.openclaw/workspace/{agent.workspace}',
'last_check': datetime.now().isoformat()
})
except Lobster.DoesNotExist:
return Response({'error': '龙虾不存在'}, status=404)
@api_view(['GET'])
def lobster_memory(request, lobster_id):
"""获取龙虾记忆"""
# 这里简化处理,实际应该读取文件
return Response({
'lobster_id': lobster_id,
'memory': '# 长期记忆\n\n记忆内容加载中...',
'daily_memories': []
})
except Agent.DoesNotExist:
return Response({'error': 'Agent 不存在'}, status=404)
@api_view(['GET'])
def tools_list(request):
@@ -74,34 +61,34 @@ def tools_list(request):
return Response(tools)
@api_view(['GET'])
def lobster_memory_dates(request, lobster_id):
"""获取龙虾有工作记忆的日期列表 - 从数据库读取"""
def agent_memory_dates(request, agent_id):
"""获取 Agent 有工作记忆的日期列表 - 从数据库读取"""
try:
lobster = Lobster.objects.get(id=lobster_id)
except Lobster.DoesNotExist:
return Response({'error': '龙虾不存在'}, status=404)
agent = Agent.objects.get(id=agent_id)
except Agent.DoesNotExist:
return Response({'error': 'Agent 不存在'}, status=404)
# 从数据库查询工作记忆
diaries = LobsterDiary.objects.filter(
lobster=lobster,
diaries = AgentDiary.objects.filter(
agent=agent,
category='memory'
).values_list('date', flat=True).distinct()
).values_list('date', flat=True).distinct().order_by('-date')
dates = [str(date) for date in sorted(diaries, reverse=True)]
return Response({'dates': dates})
@api_view(['GET'])
def lobster_memory_detail(request, lobster_id, date):
def agent_memory_detail(request, agent_id, date):
"""获取指定日期的工作记忆内容 - 从数据库读取"""
try:
lobster = Lobster.objects.get(id=lobster_id)
except Lobster.DoesNotExist:
return Response({'error': '龙虾不存在'}, status=404)
agent = Agent.objects.get(id=agent_id)
except Agent.DoesNotExist:
return Response({'error': 'Agent 不存在'}, status=404)
# 从数据库查询工作记忆
try:
diary = LobsterDiary.objects.get(
lobster=lobster,
diary = AgentDiary.objects.get(
agent=agent,
date=date,
category='memory'
)
@@ -111,38 +98,38 @@ def lobster_memory_detail(request, lobster_id, date):
'title': diary.title,
'tags': diary.tags,
})
except LobsterDiary.DoesNotExist:
except AgentDiary.DoesNotExist:
return Response({'error': '该日期没有工作记忆'}, status=404)
@api_view(['GET'])
def lobster_diary_dates(request, lobster_id):
"""获取龙虾有日记(成之路)的日期列表 - 从数据库读取"""
def agent_diary_dates(request, agent_id):
"""获取 Agent 有日记(成之路)的日期列表 - 从数据库读取"""
try:
lobster = Lobster.objects.get(id=lobster_id)
except Lobster.DoesNotExist:
return Response({'error': '龙虾不存在'}, status=404)
agent = Agent.objects.get(id=agent_id)
except Agent.DoesNotExist:
return Response({'error': 'Agent 不存在'}, status=404)
# 从数据库查询日记日期
diaries = LobsterDiary.objects.filter(
lobster=lobster,
diaries = AgentDiary.objects.filter(
agent=agent,
category='chengcai'
).values_list('date', flat=True).distinct()
).values_list('date', flat=True).distinct().order_by('-date')
dates = [str(date) for date in sorted(diaries, reverse=True)]
return Response({'dates': dates})
@api_view(['GET'])
def lobster_diary_detail(request, lobster_id, date):
"""获取指定日期的日记内容(成之路) - 从数据库读取"""
def agent_diary_detail(request, agent_id, date):
"""获取指定日期的日记内容(成之路) - 从数据库读取"""
try:
lobster = Lobster.objects.get(id=lobster_id)
except Lobster.DoesNotExist:
return Response({'error': '龙虾不存在'}, status=404)
agent = Agent.objects.get(id=agent_id)
except Agent.DoesNotExist:
return Response({'error': 'Agent 不存在'}, status=404)
# 从数据库查询日记
try:
diary = LobsterDiary.objects.get(
lobster=lobster,
diary = AgentDiary.objects.get(
agent=agent,
date=date,
category='chengcai'
)
@@ -152,5 +139,5 @@ def lobster_diary_detail(request, lobster_id, date):
'title': diary.title,
'tags': diary.tags,
})
except LobsterDiary.DoesNotExist:
except AgentDiary.DoesNotExist:
return Response({'error': '该日期没有日记'}, status=404)

View File

@@ -22,7 +22,8 @@ INSTALLED_APPS = [
'rest_framework',
'corsheaders',
'api',
'lobsters',
'lobsters', # 旧版,待移除
'agents', # 新版
]
MIDDLEWARE = [

17
code/frontend/Dockerfile Normal file
View File

@@ -0,0 +1,17 @@
FROM node:18-alpine
WORKDIR /app
# 复制 package.json
COPY package.json ./
# 安装依赖
RUN npm install
# 复制代码
COPY . .
# 暴露端口
EXPOSE 3000
CMD ["npm", "start"]

View File

@@ -1,7 +1,7 @@
{
"name": "lobster-monitor-frontend",
"name": "agent-diary-frontend",
"version": "1.0.0",
"description": "龙虾舰队监控中心 - React 前端",
"description": "Agent Diary - AI Agent 日记管理系统",
"private": true,
"dependencies": {
"react": "^18.2.0",

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🦞 龙虾舰队监控中心</title>
<title>🤖 Agent Diary - AI Agent 日记管理系统</title>
</head>
<body>
<div id="root"></div>

View File

@@ -1,14 +1,14 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import LobsterDetail from './components/LobsterDetail';
import AgentDetail from './components/AgentDetail';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
<Route path="/agent/:agentId" element={<AgentDetail />} />
</Routes>
</Router>
);

View File

@@ -5,24 +5,24 @@ import MemoryModal from '../MemoryModal';
const API_BASE = 'http://localhost:8000/api';
function LobsterDetail() {
const { lobsterId } = useParams();
function AgentDetail() {
const { agentId } = useParams();
const navigate = useNavigate();
const [lobster, setLobster] = useState(null);
const [agent, setAgent] = useState(null);
const [loading, setLoading] = useState(true);
const [showMemory, setShowMemory] = useState(false);
useEffect(() => {
fetchLobsterDetail();
}, [lobsterId]);
fetchAgentDetail();
}, [agentId]);
const fetchLobsterDetail = async () => {
const fetchAgentDetail = async () => {
try {
const response = await axios.get(`${API_BASE}/lobsters/${lobsterId}/`);
setLobster(response.data);
const response = await axios.get(`${API_BASE}/agents/${agentId}/`);
setAgent(response.data);
setLoading(false);
} catch (error) {
console.error('获取龙虾详情失败:', error);
console.error('获取 Agent 详情失败:', error);
setLoading(false);
}
};
@@ -49,16 +49,16 @@ function LobsterDetail() {
return (
<div className="detail-loading">
<div className="spinner"></div>
<p>正在加载龙虾信息...</p>
<p>正在加载 Agent 信息...</p>
</div>
);
}
if (!lobster) {
if (!agent) {
return (
<div className="detail-error">
<h2>😕 未找到龙虾</h2>
<p>只龙虾可能不存在或已被移除</p>
<h2>😕 未找到 Agent</h2>
<p> Agent 可能不存在或已被移除</p>
<button onClick={() => navigate('/')} className="back-btn">
返回监控中心
</button>
@@ -67,12 +67,12 @@ function LobsterDetail() {
}
return (
<div className="lobster-detail">
<div className="agent-detail">
<div className="detail-header">
<button onClick={() => navigate('/')} className="back-btn">
返回监控中心
</button>
<h1>{lobster.emoji} {lobster.name} - 详细信息</h1>
<h1>{agent.emoji} {agent.name} - 详细信息</h1>
</div>
<div className="detail-content">
@@ -80,50 +80,38 @@ function LobsterDetail() {
<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 className={`status-badge status-${agent.status}`}>
<span className="status-dot" style={{ backgroundColor: getStatusColor(agent.status) }}></span>
{getStatusText(agent.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>
<span className="info-value">{agent.emoji} {agent.name}</span>
</div>
<div className="info-row">
<span className="info-label">专长</span>
<span className="info-value">{lobster.specialty}</span>
<span className="info-value">{agent.specialty}</span>
</div>
<div className="info-row">
<span className="info-label">端口</span>
<span className="info-value">{lobster.port}</span>
<span className="info-value">{agent.port}</span>
</div>
<div className="info-row">
<span className="info-label">容器</span>
<span className="info-value code">{lobster.container}</span>
<span className="info-value code">{agent.container}</span>
</div>
{lobster.workspace && (
<div className="info-row workspace-row">
{agent.workspace && (
<div className="info-row">
<span className="info-label">工作区</span>
<div className="workspace-value">
<code>{lobster.workspace}</code>
<button
className="copy-btn"
onClick={() => {
navigator.clipboard.writeText(lobster.workspace);
alert('工作区路径已复制到剪贴板!📋');
}}
title="复制路径"
>
📋 复制
</button>
</div>
<span className="info-value code">{agent.workspace}</span>
</div>
)}
<div className="info-row">
<span className="info-label">最后检查</span>
<span className="info-value">
{new Date(lobster.last_check).toLocaleString('zh-CN')}
{new Date(agent.last_check).toLocaleString('zh-CN')}
</span>
</div>
</div>
@@ -144,14 +132,14 @@ function LobsterDetail() {
</button>
<button
className="action-btn"
onClick={() => window.open(`http://localhost:${lobster.port}`, '_blank')}
onClick={() => window.open(`http://localhost:${agent.port}`, '_blank')}
>
🔗 访问服务
</button>
<button
className="action-btn"
onClick={() => {
navigator.clipboard.writeText(`http://localhost:${lobster.port}`);
navigator.clipboard.writeText(`http://localhost:${agent.port}`);
alert('已复制访问地址到剪贴板');
}}
>
@@ -162,41 +150,6 @@ function LobsterDetail() {
</div>
{/* 状态历史卡片 */}
<div className="info-card">
<div className="card-header">
<h2>📱 外部应用</h2>
</div>
<div className="card-body">
{lobster.app_name && lobster.app_name !== '未配置' ? (
<div className="app-info">
<div className="app-icon">🪵</div>
<div className="app-details">
<div className="app-name">{lobster.app_name}</div>
<div className="app-id">
<code>{lobster.app_id}</code>
<button
className="copy-btn small"
onClick={() => {
navigator.clipboard.writeText(lobster.app_id);
alert('应用 ID 已复制到剪贴板!📋');
}}
title="复制应用 ID"
>
📋 复制
</button>
</div>
</div>
</div>
) : (
<div className="app-empty">
<p>😕 暂无外部应用</p>
<p className="app-hint">这只龙虾还没有关联外部应用哦~</p>
</div>
)}
</div>
</div>
{/* 运行统计卡片 */}
<div className="info-card">
<div className="card-header">
<h2>📊 运行统计</h2>
@@ -216,7 +169,7 @@ function LobsterDetail() {
<div className="stat-label">今日错误</div>
</div>
<div className="stat-item">
<div className="stat-value">{lobster.port}</div>
<div className="stat-value">{agent.port}</div>
<div className="stat-label">服务端口</div>
</div>
</div>
@@ -227,14 +180,14 @@ function LobsterDetail() {
{/* 日新弹窗 */}
{showMemory && (
<MemoryModal
lobsterId={lobsterId}
lobsterName={`${lobster.emoji} ${lobster.name}`}
agentId={agentId}
agentName={`${agent.emoji} ${agent.name}`}
onClose={() => setShowMemory(false)}
/>
)}
<style>{`
.lobster-detail {
.agent-detail {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
@@ -329,54 +282,6 @@ function LobsterDetail() {
border-radius: 4px;
}
.workspace-row {
align-items: flex-start;
}
.workspace-value {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
justify-content: flex-end;
}
.workspace-value code {
font-family: 'Courier New', monospace;
font-size: 0.85em;
background: #f7fafc;
padding: 6px 10px;
border-radius: 4px;
color: #2d3748;
word-break: break-all;
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
}
.copy-btn {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85em;
font-weight: 600;
white-space: nowrap;
transition: all 0.2s;
}
.copy-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(72, 187, 120, 0.3);
}
.copy-btn:active {
transform: translateY(0);
}
.status-badge {
display: flex;
align-items: center;
@@ -457,67 +362,6 @@ function LobsterDetail() {
font-size: 0.9em;
}
.app-info {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 10px 0;
}
.app-icon {
font-size: 2.5em;
line-height: 1;
}
.app-details {
flex: 1;
min-width: 0;
}
.app-name {
font-size: 1.1em;
font-weight: 600;
color: #2d3748;
margin-bottom: 8px;
}
.app-id {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.app-id code {
font-family: 'Courier New', monospace;
font-size: 0.85em;
background: #f7fafc;
padding: 6px 10px;
border-radius: 4px;
color: #4a5568;
word-break: break-all;
}
.copy-btn.small {
padding: 4px 10px;
font-size: 0.8em;
}
.app-empty {
text-align: center;
padding: 30px 20px;
color: #a0aec0;
}
.app-empty p {
margin: 8px 0;
}
.app-hint {
font-size: 0.9em;
color: #cbd5e0;
}
.detail-loading, .detail-error {
display: flex;
flex-direction: column;
@@ -565,4 +409,4 @@ function LobsterDetail() {
);
}
export default LobsterDetail;
export default AgentDetail;

View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
const API_BASE = 'http://localhost:8000/api';
function MemoryModal({ lobsterId, lobsterName, onClose }) {
function MemoryModal({ agentId, agentName, onClose }) {
const [activeTab, setActiveTab] = useState('diary'); // 'memory' 或 'diary'
const [dates, setDates] = useState([]);
const [diaryDates, setDiaryDates] = useState([]);
@@ -14,14 +14,14 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
// 加载记忆和日记的日期
useEffect(() => {
loadDates();
}, [lobsterId, activeTab]);
}, [agentId, activeTab]);
const loadDates = async () => {
setLoading(true);
try {
if (activeTab === 'memory') {
// 加载记忆日期(每日记忆文件)
const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/memory/dates/`);
const response = await fetch(`${API_BASE}/agents/${agentId}/memory/dates/`);
const data = await response.json();
setDates(data.dates || []);
if (data.dates && data.dates.length > 0) {
@@ -29,7 +29,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
}
} else {
// 加载日记日期(成才之路)
const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/diary/dates/`);
const response = await fetch(`${API_BASE}/agents/${agentId}/diary/dates/`);
const data = await response.json();
setDiaryDates(data.dates || []);
if (data.dates && data.dates.length > 0) {
@@ -48,17 +48,17 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
if (selectedDate) {
loadContent(selectedDate);
}
}, [selectedDate, activeTab, lobsterId]);
}, [selectedDate, activeTab, agentId]);
const loadContent = async (date) => {
setLoading(true);
try {
if (activeTab === 'memory') {
const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/memory/${date}/`);
const response = await fetch(`${API_BASE}/agents/${agentId}/memory/${date}/`);
const data = await response.json();
setContent(data.content || '');
} else {
const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/diary/${date}/`);
const response = await fetch(`${API_BASE}/agents/${agentId}/diary/${date}/`);
const data = await response.json();
setContent(data.content || '');
}
@@ -112,14 +112,14 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
};
const currentDates = activeTab === 'memory' ? dates : diaryDates;
const title = activeTab === 'memory' ? '📔 工作记忆' : '📖 成之路';
const title = activeTab === 'memory' ? '📔 工作记忆' : '📖 成之路';
const emptyText = activeTab === 'memory' ? '这一天还没有工作记忆' : '这一天还没有日记';
return (
<div className="memory-modal-overlay" onClick={onClose}>
<div className="memory-modal" onClick={e => e.stopPropagation()}>
<div className="memory-modal-header">
<h2>{title} - {lobsterName}</h2>
<h2>{title} - {agentName}</h2>
<button className="close-btn" onClick={onClose}>×</button>
</div>
@@ -129,7 +129,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
className={`tab-btn ${activeTab === 'diary' ? 'active' : ''}`}
onClick={() => setActiveTab('diary')}
>
📖 之路
📖 之路
</button>
<button
className={`tab-btn ${activeTab === 'memory' ? 'active' : ''}`}
@@ -315,35 +315,27 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
.memory-calendar-panel {
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 10px;
border-radius: 8px;
padding: 15px;
background: white;
display: flex;
flex-direction: column;
width: 260px;
min-width: 260px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
margin-bottom: 15px;
}
.calendar-header button {
background: #4299e1;
color: white;
border: none;
padding: 3px 6px;
border-radius: 3px;
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85em;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.calendar-header button:hover {
@@ -353,29 +345,30 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
gap: 4px;
flex: 1;
}
.calendar-weekday {
text-align: center;
font-size: 0.75em;
font-size: 0.8em;
color: #718096;
padding: 6px 0;
padding: 8px 0;
font-weight: 500;
}
.calendar-day {
width: 100%;
height: 32px;
width: 100% !important;
height: 36px !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
font-size: 0.75em;
border-radius: 4px;
font-size: 0.85em;
cursor: pointer;
transition: all 0.2s;
padding: 0;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
@@ -388,27 +381,23 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
}
.calendar-day.has-memory {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: bold;
width: 100%;
height: 32px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
font-weight: bold !important;
}
.calendar-day.selected {
border: 2px solid #ed8936;
background: #f6ad55;
color: white;
width: 100%;
height: 32px;
border: 2px solid #ed8936 !important;
background: #f6ad55 !important;
color: white !important;
}
.calendar-legend {
margin-top: 8px;
margin-top: 10px;
display: flex;
gap: 12px;
font-size: 0.75em;
padding-top: 8px;
gap: 20px;
font-size: 0.85em;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
}
@@ -439,9 +428,9 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
.stat-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4px 10px;
border-radius: 16px;
font-size: 0.75em;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.9em;
font-weight: 600;
}

View File

@@ -5,23 +5,23 @@ import axios from 'axios';
const API_BASE = 'http://localhost:8000/api';
function Dashboard() {
const [lobsters, setLobsters] = useState([]);
const [agents, setAgents] = useState([]);
const [loading, setLoading] = useState(true);
const navigate = useNavigate();
useEffect(() => {
fetchLobsters();
const interval = setInterval(fetchLobsters, 5000);
fetchAgents();
const interval = setInterval(fetchAgents, 5000);
return () => clearInterval(interval);
}, []);
const fetchLobsters = async () => {
const fetchAgents = async () => {
try {
const response = await axios.get(`${API_BASE}/lobsters/`);
setLobsters(response.data);
const response = await axios.get(`${API_BASE}/agents/`);
setAgents(response.data);
setLoading(false);
} catch (error) {
console.error('获取龙虾状态失败:', error);
console.error('获取 Agent 状态失败:', error);
}
};
@@ -31,22 +31,22 @@ function Dashboard() {
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>
<h1>🤖 Agent 舰队监控中心</h1>
<div className="agent-grid">
{agents.map(agent => (
<div key={agent.id} className="agent-card">
<div className="agent-header">
<span className="agent-name">{agent.emoji} {agent.name}</span>
<span className={`status status-${agent.status}`}>{agent.status}</span>
</div>
<div className="lobster-info">
<p>专长{lobster.specialty}</p>
<p>端口{lobster.port}</p>
<p>容器{lobster.container}</p>
<div className="agent-info">
<p>专长{agent.specialty}</p>
<p>端口{agent.port}</p>
<p>容器{agent.container}</p>
</div>
<div className="lobster-actions">
<button className="detail-btn" onClick={() => navigate(`/lobster/${lobster.id}`)}>
📊 详情
<div className="agent-actions">
<button className="detail-btn" onClick={() => navigate(`/agent/${agent.id}`)}>
📊 Agent 详情
</button>
</div>
</div>
@@ -72,13 +72,13 @@ const styles = `
text-align: center;
}
.lobster-grid {
.agent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.lobster-card {
.agent-card {
background: white;
border-radius: 12px;
padding: 20px;
@@ -86,12 +86,12 @@ const styles = `
transition: transform 0.2s;
}
.lobster-card:hover {
.agent-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.lobster-header {
.agent-header {
display: flex;
justify-content: space-between;
align-items: center;
@@ -100,7 +100,7 @@ const styles = `
border-bottom: 2px solid #e2e8f0;
}
.lobster-name {
.agent-name {
font-size: 1.3em;
font-weight: bold;
color: #2d3748;
@@ -128,23 +128,23 @@ const styles = `
color: #742a2a;
}
.lobster-info {
.agent-info {
margin-bottom: 20px;
}
.lobster-info p {
.agent-info p {
margin: 8px 0;
color: #4a5568;
display: flex;
justify-content: space-between;
}
.lobster-actions {
.agent-actions {
display: flex;
gap: 10px;
}
.lobster-actions button {
.agent-actions button {
flex: 1;
padding: 10px 16px;
border: none;