From 09f2bb9b6c41593a44892a2cce074552a2a95f54 Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Sat, 4 Apr 2026 11:53:20 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E9=A3=9E=E8=A1=8C=E4=BE=A0?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E7=82=B9=E5=87=BB=E5=BA=A7=E4=BD=8D?=
 =?UTF-8?q?=20@Agent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

功能:
- 点击座位自动填充 @消息
- 鼠标悬停放大效果
- 自动聚焦输入框

体验优化:
- 悬停视觉反馈
- 点击即可 @ 该参会者
- 无需手动输入 agent_id
---
 frontend/src/App.js | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index cf76a624..bfd39190 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -108,6 +108,7 @@ function MeetingRoom() {
   const [content, setContent] = useState('');
   const [participants, setParticipants] = useState([]);
   const [meeting, setMeeting] = useState(null);
+  const [hoveredSeat, setHoveredSeat] = useState(null);
   const token = localStorage.getItem('token');
 
   useEffect(() => {
@@ -152,17 +153,18 @@ function MeetingRoom() {
     }
   };
 
-  const mentionAgent = async () => {
-    const targetAgentId = prompt('@哪个 Agent？输入 agent_id:');
-    if (!targetAgentId || !content.trim()) return;
+  const mentionAgent = async (targetAgentId, agentName) => {
+    const target = targetAgentId || prompt('@哪个 Agent？输入 agent_id:');
+    if (!target || !content.trim()) return;
+    const name = agentName || target;
     try {
       await axios.post(`${API_BASE}/meetings/${id}/mention_agent/`, {
-        target_agent_id: targetAgentId, content,
+        target_agent_id: target, content,
         sender_name: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).username : 'User'
       });
       setContent('');
       fetchMessages();
-      alert(`✅ 已 @${targetAgentId}`);
+      alert(`✅ 已 @${name}`);
     } catch (error) {
       alert('发送失败：' + (error.response?.data?.error || error.message));
     }
@@ -230,7 +232,19 @@ function MeetingRoom() {
         <h2>🪑 座位图 <span style={styles.badge}>{participants.length}</span></h2>
         <div style={styles.seats}>
           {participants.map(p => (
-            <div key={p.id} style={styles.seat}>
+            <div 
+              key={p.id} 
+              style={{...styles.seat, ...(hoveredSeat === p.id ? styles.seatHover : {})}} 
+              onClick={() => {
+                if (p.agent_id) {
+                  setContent(`@${p.nickname} `);
+                  document.querySelector('input[placeholder="输入消息..."]')?.focus();
+                }
+              }}
+              onMouseEnter={() => setHoveredSeat(p.id)}
+              onMouseLeave={() => setHoveredSeat(null)}
+              title={p.agent_id ? '点击 @ 此人' : ''}
+            >
               <div style={styles.seatEmoji}>{p.agent_emoji || '👤'}</div>
               <div style={styles.seatName}>{p.nickname}</div>
               {p.is_host && <div style={styles.hostBadge}>👑</div>}
@@ -300,7 +314,8 @@ const styles = {
   badge: { background: '#667eea', color: 'white', padding: '4px 10px', borderRadius: '20px', fontSize: '12px', fontWeight: '600' },
   btnGroup: { display: 'flex', marginTop: '10px' },
   seats: { display: 'flex', flexWrap: 'wrap', gap: '15px', justifyContent: 'center' },
-  seat: { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', padding: '15px', borderRadius: '50%', width: '90px', height: '90px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' },
+  seat: { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', padding: '15px', borderRadius: '50%', width: '90px', height: '90px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', cursor: 'pointer', transition: 'transform 0.2s', ':hover': { transform: 'scale(1.1)' } },
+  seatHover: { transform: 'scale(1.05)' },
   seatEmoji: { fontSize: '28px', marginBottom: '5px' },
   seatName: { fontSize: '12px', fontWeight: '600' },
   hostBadge: { fontSize: '10px', opacity: '0.8' },