diff --git a/code/backend/api/views.py b/code/backend/api/views.py index c9ab96a..c8723c9 100644 --- a/code/backend/api/views.py +++ b/code/backend/api/views.py @@ -10,12 +10,12 @@ import re # 龙虾配置 LOBSTERS = [ - {'id': 1, 'name': '飞行侠', 'emoji': '🦸', 'port': 18789, 'specialty': '主力/通用', 'container': 'openclaw-instance2'}, - {'id': 2, 'name': '道童', 'emoji': '☯️', 'port': 18889, 'specialty': '道德经注解', 'container': 'openclaw-gateway-2'}, - {'id': 3, 'name': '墨子', 'emoji': '🔧', 'port': 18689, 'specialty': '代码专家', 'container': 'openclaw-coder'}, - {'id': 4, 'name': '织网者', 'emoji': '🕸️', 'port': 18589, 'specialty': '网站制作', 'container': 'openclaw-web'}, - {'id': 5, 'name': '费曼', 'emoji': '⚛️', 'port': 18989, 'specialty': '物理研究', 'container': 'openclaw-physics'}, - {'id': 6, 'name': '守望者', 'emoji': '👁️', 'port': 18080, 'specialty': '舰队监控', 'container': 'openclaw-watcher'}, + {'id': 1, 'name': '飞行侠', 'emoji': '🦸', 'port': 18789, 'specialty': '主力/通用', 'container': 'openclaw-instance2', 'app_name': 'IT 项目推广运营平台', 'app_id': 'cli_a92413cfb0791bce'}, + {'id': 2, 'name': '道童', 'emoji': '☯️', 'port': 18889, 'specialty': '道德经注解', 'container': 'openclaw-gateway-2', 'app_name': '道德经新解', 'app_id': 'cli_a9439b614f38dbd2'}, + {'id': 3, 'name': '墨子', 'emoji': '🔧', 'port': 18689, 'specialty': '代码专家', 'container': 'openclaw-coder', 'app_name': '未配置', 'app_id': ''}, + {'id': 4, 'name': '织网者', 'emoji': '🕸️', 'port': 18589, 'specialty': '网站制作', 'container': 'openclaw-web', 'app_name': '未配置', 'app_id': ''}, + {'id': 5, 'name': '费曼', 'emoji': '⚛️', 'port': 18989, 'specialty': '物理研究', 'container': 'openclaw-physics', 'app_name': '未配置', 'app_id': ''}, + {'id': 6, 'name': '守望者', 'emoji': '👁️', 'port': 18080, 'specialty': '舰队监控', 'container': 'openclaw-watcher', 'app_name': '未配置', 'app_id': ''}, ] @api_view(['GET']) diff --git a/code/frontend/src/components/LobsterDetail/index.js b/code/frontend/src/components/LobsterDetail/index.js index 0e533b1..a6af954 100644 --- a/code/frontend/src/components/LobsterDetail/index.js +++ b/code/frontend/src/components/LobsterDetail/index.js @@ -103,9 +103,21 @@ function LobsterDetail() { {lobster.container} {lobster.workspace && ( -
+
工作区 - {lobster.workspace} +
+ {lobster.workspace} + +
)}
@@ -150,6 +162,41 @@ function LobsterDetail() {
{/* 状态历史卡片 */} +
+
+

📱 外部应用

+
+
+ {lobster.app_name && lobster.app_name !== '未配置' ? ( +
+
🪵
+
+
{lobster.app_name}
+
+ {lobster.app_id} + +
+
+
+ ) : ( +
+

😕 暂无外部应用

+

这只龙虾还没有关联外部应用哦~

+
+ )} +
+
+ + {/* 运行统计卡片 */}

📊 运行统计

@@ -282,6 +329,54 @@ 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; @@ -362,6 +457,67 @@ 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;