From ac5dd3a91e353a0b1fba5afb402569ba807d31d6 Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Fri, 3 Apr 2026 21:14:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=94=BE=E8=99=BE?=
 =?UTF-8?q?=E5=BD=92=E6=B5=B7=E4=BA=A4=E4=BA=92=20-=20=E6=96=B9=E5=9D=97?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=98=BE=E7=A4=BA=20=F0=9F=A6=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ 新特性：
- 拖入河中：下方龙虾卡片自动消失
- 拖出河水：下方龙虾卡片重新出现
- 动态过滤：根据河中状态实时更新列表

🎨 界面优化：
- 移除标题文字，更简洁
- 鼠标移入河水显示使用提示
- 提示内容：'放虾' 和 '用虾'
- 空状态显示波浪 emoji 🌊

🎮 完整玩法：
1. 🦐 捞虾 - 从 Docker 海洋捞到龙虾
2. 🌊 放虾 - 拖到河水中消失，变成游动的 emoji
3. 🔍 观察 - 悬停显示龙虾名字
4. 🦐 用虾 - 拖出河水，卡片重新出现
5. 🔄 循环 - 可以反复拖入拖出

💡 智能提示：
- 鼠标移入河水区域时显示
- 指导用户如何'放虾'和'用虾'
- 鼠标移出时自动隐藏

🦀 Logo 已集成：
- 浏览器 favicon
- Dashboard 顶部显示
- 标题 emoji

🦸 感谢北极星 ⭐ 的创意和耐心！
'放虾归海' - 从想法到现实，太好玩了！😄
---
 .../src/components/LobsterRiver/index.js      | 155 ++++++++++++------
 code/frontend/src/pages/Dashboard/index.js    |  40 +++--
 2 files changed, 137 insertions(+), 58 deletions(-)

diff --git a/code/frontend/src/components/LobsterRiver/index.js b/code/frontend/src/components/LobsterRiver/index.js
index a617801..1fe1e2a 100644
--- a/code/frontend/src/components/LobsterRiver/index.js
+++ b/code/frontend/src/components/LobsterRiver/index.js
@@ -2,10 +2,11 @@ import React, { useState } from 'react';
 
 const API_BASE = 'http://localhost:8000/api';
 
-function LobsterRiver({ agents, onRefresh }) {
+function LobsterRiver({ agents, onRefresh, onAgentToRiver, onAgentFromRiver }) {
   const [isOverRiver, setIsOverRiver] = useState(false);
   const [riverAgents, setRiverAgents] = useState([]);
   const [hoveredAgent, setHoveredAgent] = useState(null);
+  const [showHint, setShowHint] = useState(false);
 
   // 拖拽进入河水
   const handleDragOver = (e) => {
@@ -39,6 +40,12 @@ function LobsterRiver({ agents, onRefresh }) {
       // 添加到河中
       if (!riverAgents.find(a => a.id === agent.id)) {
         setRiverAgents([...riverAgents, agent]);
+        
+        // 通知父组件：龙虾已入河
+        if (onAgentToRiver) {
+          onAgentToRiver(parseInt(agentId));
+        }
+        
         alert(`🦐 ${agentName} 已放归河水中！🌊`);
       }
       
@@ -58,18 +65,33 @@ function LobsterRiver({ agents, onRefresh }) {
     
     // 从河中移除
     setRiverAgents(riverAgents.filter(a => a.id !== agent.id));
+    
+    // 通知父组件：龙虾已出河
+    if (onAgentFromRiver) {
+      onAgentFromRiver(agent.id);
+    }
+  };
+
+  // 鼠标移入河水区域
+  const handleMouseEnter = () => {
+    setShowHint(true);
+  };
+
+  // 鼠标离开河水区域
+  const handleMouseLeave = () => {
+    setShowHint(false);
   };
 
   return (
     <div className="lobster-river-container">
-      <h2 className="river-title">🌊 龙虾池 - 放虾归海</h2>
-      
       {/* 河水区域 */}
       <div 
         className={`lobster-river ${isOverRiver ? 'river-active' : ''}`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
         {/* 波浪动画 */}
         <div className="river-waves">
@@ -102,13 +124,21 @@ function LobsterRiver({ agents, onRefresh }) {
           ))}
         </div>
         
-        {/* 提示文字 */}
-        {riverAgents.length === 0 && (
-          <div className="river-hint">
-            <p className="hint-main">
-              {isOverRiver ? '🦐 松开手，放虾归海！' : '拖拽龙虾到河水中'}
-            </p>
-            <p className="hint-sub">将左侧的龙虾拖到这里，放虾归海</p>
+        {/* 提示文字（鼠标悬停时显示） */}
+        {showHint && riverAgents.length === 0 && (
+          <div className="river-hint-overlay">
+            <div className="hint-box">
+              <p className="hint-title">💡 使用提示</p>
+              <p className="hint-text">🖱️ 拖动展示方块到水池中 <strong>'放虾'</strong></p>
+              <p className="hint-text">🦐 拖动虾到池子 <strong>'用虾'</strong></p>
+            </div>
+          </div>
+        )}
+        
+        {/* 空状态提示 */}
+        {!showHint && riverAgents.length === 0 && (
+          <div className="river-empty-state">
+            <span className="empty-emoji">🌊</span>
           </div>
         )}
       </div>
@@ -116,8 +146,6 @@ function LobsterRiver({ agents, onRefresh }) {
       {/* 河水分界线 */}
       <div className="river-divider">
         <div className="divider-line"></div>
-        <div className="divider-text">══════ 河岸 ══════</div>
-        <div className="divider-line"></div>
       </div>
 
       <style>{`
@@ -126,12 +154,6 @@ function LobsterRiver({ agents, onRefresh }) {
           text-align: center;
         }
 
-        .river-title {
-          color: #1a365d;
-          font-size: 1.5em;
-          margin-bottom: 15px;
-        }
-
         .lobster-river {
           width: 100%;
           max-width: 1000px;
@@ -139,7 +161,7 @@ function LobsterRiver({ agents, onRefresh }) {
           margin: 0 auto;
           position: relative;
           overflow: hidden;
-          border-radius: 12px 12px 0 0;
+          border-radius: 12px;
           background: linear-gradient(180deg, #4299e1 0%, #2b6cb0 50%, #1a365d 100%);
           transition: all 0.3s;
           cursor: pointer;
@@ -248,47 +270,75 @@ function LobsterRiver({ agents, onRefresh }) {
           z-index: 30;
         }
 
-        .river-hint {
+        .river-hint-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.7);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 20;
+          animation: fadeIn 0.3s ease-in;
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        .hint-box {
+          background: rgba(255, 255, 255, 0.95);
+          padding: 30px 40px;
+          border-radius: 12px;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .hint-title {
+          color: #1a365d;
+          font-size: 1.3em;
+          font-weight: bold;
+          margin-bottom: 15px;
+        }
+
+        .hint-text {
+          color: #4a5568;
+          font-size: 1em;
+          margin: 10px 0;
+          line-height: 1.6;
+        }
+
+        .hint-text strong {
+          color: #4299e1;
+          font-weight: 600;
+        }
+
+        .river-empty-state {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           z-index: 10;
-          color: white;
-          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-        }
-
-        .hint-main {
-          font-size: 1.5em;
-          font-weight: bold;
-          margin-bottom: 10px;
-        }
-
-        .hint-sub {
-          font-size: 1em;
-          opacity: 0.9;
+          font-size: 3em;
+          opacity: 0.5;
         }
 
         .river-divider {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 20px;
-          margin: 0 auto;
+          width: 100%;
           max-width: 1000px;
+          margin: 0 auto;
         }
 
         .divider-line {
-          flex: 1;
           height: 3px;
           background: linear-gradient(90deg, transparent, #4299e1, transparent);
-        }
-
-        .divider-text {
-          color: #4299e1;
-          font-size: 1.2em;
-          font-weight: bold;
-          letter-spacing: 2px;
+          margin-top: -3px;
         }
 
         @media (max-width: 768px) {
@@ -300,8 +350,17 @@ function LobsterRiver({ agents, onRefresh }) {
             font-size: 1.5em;
           }
 
-          .hint-main {
-            font-size: 1.2em;
+          .hint-box {
+            padding: 20px;
+            margin: 0 20px;
+          }
+
+          .hint-title {
+            font-size: 1.1em;
+          }
+
+          .hint-text {
+            font-size: 0.9em;
           }
         }
       `}</style>
diff --git a/code/frontend/src/pages/Dashboard/index.js b/code/frontend/src/pages/Dashboard/index.js
index 0c8818e..02a149a 100644
--- a/code/frontend/src/pages/Dashboard/index.js
+++ b/code/frontend/src/pages/Dashboard/index.js
@@ -9,6 +9,7 @@ function Dashboard() {
   const [agents, setAgents] = useState([]);
   const [loading, setLoading] = useState(true);
   const [scanning, setScanning] = useState(false);
+  const [riverAgentIds, setRiverAgentIds] = useState([]); // 河中的龙虾 ID
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -57,6 +58,18 @@ function Dashboard() {
     e.target.style.opacity = '1';
   };
 
+  // 龙虾放入河中
+  const handleAgentToRiver = (agentId) => {
+    if (!riverAgentIds.includes(agentId)) {
+      setRiverAgentIds([...riverAgentIds, agentId]);
+    }
+  };
+
+  // 龙虾从河中拖出
+  const handleAgentFromRiver = (agentId) => {
+    setRiverAgentIds(riverAgentIds.filter(id => id !== agentId));
+  };
+
   if (loading) {
     return <div className="loading">加载中...</div>;
   }
@@ -78,19 +91,26 @@ function Dashboard() {
       </div>
       
       {/* 龙虾池 - 放虾归海 */}
-      <LobsterRiver agents={agents} onRefresh={fetchAgents} />
+      <LobsterRiver 
+        agents={agents} 
+        onRefresh={fetchAgents}
+        onAgentToRiver={handleAgentToRiver}
+        onAgentFromRiver={handleAgentFromRiver}
+      />
       
       <h2 className="section-title">🦐 待归海的龙虾</h2>
       <div className="agent-grid">
-        {agents.map(agent => (
-          <div 
-            key={agent.id} 
-            className="agent-card draggable-card"
-            draggable
-            onDragStart={(e) => handleDragStart(e, agent)}
-            onDragEnd={handleDragEnd}
-            title="拖拽我到龙虾池"
-          >
+        {agents
+          .filter(agent => !riverAgentIds.includes(agent.id)) // 过滤掉已在河中的龙虾
+          .map(agent => (
+            <div 
+              key={agent.id} 
+              className="agent-card draggable-card"
+              draggable
+              onDragStart={(e) => handleDragStart(e, agent)}
+              onDragEnd={handleDragEnd}
+              title="拖拽我到龙虾池"
+            >
             <div className="agent-header">
               <span className="agent-name">{agent.emoji} {agent.name}</span>
               <span className={`status status-${agent.status}`}>{agent.status}</span>