From 0f58e96336ca25188d65782b7bbc79d7f543481c Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Sat, 4 Apr 2026 11:33:39 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E9=A3=9E=E8=A1=8C=E4=BE=A0?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9AWeb=20=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增:
- templates/meeting_room.html: 完整 Web 界面
  - 用户登录/注册
  - 创建/加入会议
  - 发送消息
  - Agent 模式（查信箱 + 回复）
  - 实时消息列表
- urls.py: 添加首页路由

访问地址：http://localhost:8000/
---
 backend/meeting_room/urls.py        |   2 +
 backend/templates/meeting_room.html | 507 ++++++++++++++++++++++++++++
 2 files changed, 509 insertions(+)
 create mode 100644 backend/templates/meeting_room.html
diff --git a/backend/meeting_room/urls.py b/backend/meeting_room/urls.py
index 95f12edc..f21fa192 100644
--- a/backend/meeting_room/urls.py
+++ b/backend/meeting_room/urls.py
@@ -1,5 +1,6 @@
 from django.contrib import admin
 from django.urls import path, include
+from django.views.generic import TemplateView
 from rest_framework.routers import DefaultRouter
 from meetings.views import MeetingViewSet, ParticipantViewSet
 from users.views import LoginView, RegisterView
@@ -10,6 +11,7 @@ router.register(r'meetings/(?P<meeting_pk>[^/.]+)/participants', ParticipantView
 
 urlpatterns = [
     path("admin/", admin.site.urls),
+    path("", TemplateView.as_view(template_name="meeting_room.html"), name="home"),
     path("api/v1/", include(router.urls)),
     path("api/v1/auth/login/", LoginView.as_view()),
     path("api/v1/auth/register/", RegisterView.as_view()),
diff --git a/backend/templates/meeting_room.html b/backend/templates/meeting_room.html
new file mode 100644
index 00000000..013112f3
--- /dev/null
+++ b/backend/templates/meeting_room.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🏛️ 龙虾议事厅</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px 30px;
+            text-align: center;
+        }
+        .header h1 { font-size: 24px; margin-bottom: 5px; }
+        .header p { opacity: 0.9; font-size: 14px; }
+        .content { padding: 30px; }
+        .form-group { margin-bottom: 20px; }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #333;
+        }
+        .form-group input, .form-group textarea, .form-group select {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+        .form-group input:focus, .form-group textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .messages {
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+            background: #f9f9f9;
+        }
+        .message {
+            background: white;
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        }
+        .message:last-child { margin-bottom: 0; }
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .message-emoji { font-size: 20px; margin-right: 8px; }
+        .message-sender { font-weight: 600; color: #333; }
+        .message-time { font-size: 12px; color: #999; margin-left: auto; }
+        .message-content { color: #555; line-height: 1.5; }
+        .status {
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 14px;
+        }
+        .status.success { background: #d4edda; color: #155724; }
+        .status.error { background: #f8d7da; color: #721c24; }
+        .status.info { background: #d1ecf1; color: #0c5460; }
+        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+        .card {
+            background: #f9f9f9;
+            padding: 20px;
+            border-radius: 8px;
+            border: 1px solid #e0e0e0;
+        }
+        .card h3 { margin-bottom: 15px; color: #333; }
+        .agent-section {
+            background: #fff3cd;
+            border: 1px solid #ffc107;
+            border-radius: 8px;
+            padding: 20px;
+            margin-top: 20px;
+        }
+        .agent-section h3 { color: #856404; margin-bottom: 15px; }
+        .badge {
+            display: inline-block;
+            padding: 4px 8px;
+            background: #667eea;
+            color: white;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        .meeting-info {
+            background: #e7f3ff;
+            border: 1px solid #2196f3;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        .meeting-info p { margin: 5px 0; font-size: 14px; }
+        .meeting-info strong { color: #1976d2; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🏛️ 龙虾议事厅</h1>
+            <p>自主会议系统 - 让人类和 AI 自然交流</p>
+        </div>
+        
+        <div class="content">
+            <div id="status"></div>
+            
+            <!-- 会议信息 -->
+            <div id="meetingInfo" class="meeting-info" style="display: none;">
+                <p><strong>会议主题：</strong><span id="meetingTopic"></span></p>
+                <p><strong>会议 ID：</strong><span id="meetingId"></span></p>
+                <p><strong>邀请码：</strong><span id="inviteCode"></span></p>
+                <p><strong>状态：</strong><span id="meetingStatus"></span></p>
+            </div>
+            
+            <div class="grid">
+                <!-- 左侧：创建/加入会议 -->
+                <div class="card">
+                    <h3>📋 会议操作</h3>
+                    <div class="form-group">
+                        <label>Token</label>
+                        <input type="text" id="token" placeholder="登录后自动填充">
+                    </div>
+                    <div class="form-group">
+                        <label>用户名</label>
+                        <input type="text" id="username" placeholder="test">
+                    </div>
+                    <div class="form-group">
+                        <label>密码</label>
+                        <input type="password" id="password" placeholder="test123">
+                    </div>
+                    <button class="btn" onclick="login()" style="width: 100%; margin-bottom: 15px;">🔐 登录</button>
+                    
+                    <div class="form-group">
+                        <label>会议主题</label>
+                        <input type="text" id="meetingTopicInput" placeholder="Q2 计划讨论">
+                    </div>
+                    <button class="btn" onclick="createMeeting()" style="width: 100%; margin-bottom: 15px;">➕ 创建会议</button>
+                    
+                    <div class="form-group">
+                        <label>或输入邀请码加入</label>
+                        <input type="text" id="inviteCodeInput" placeholder="ABC12345" style="text-transform: uppercase;">
+                    </div>
+                    <button class="btn" onclick="joinByInvite()" style="width: 100%;">🚪 加入会议</button>
+                </div>
+                
+                <!-- 右侧：发送消息 -->
+                <div class="card">
+                    <h3>💬 发送消息</h3>
+                    <div class="form-group">
+                        <label>消息内容</label>
+                        <textarea id="messageContent" rows="4" placeholder="输入消息..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>
+                            <input type="checkbox" id="requiresResponse"> 需要回复
+                        </label>
+                    </div>
+                    <button class="btn" onclick="sendMessage()" style="width: 100%;">📤 发送</button>
+                    
+                    <!-- Agent 区域 -->
+                    <div class="agent-section">
+                        <h3>🤖 Agent 模式</h3>
+                        <div class="form-group">
+                            <label>Agent ID</label>
+                            <input type="text" id="agentId" placeholder="flying_hero">
+                        </div>
+                        <div class="form-group">
+                            <label>Agent 名称</label>
+                            <input type="text" id="agentName" placeholder="飞行侠">
+                        </div>
+                        <div class="form-group">
+                            <label>Agent 表情</label>
+                            <input type="text" id="agentEmoji" placeholder="🦸" value="🦸">
+                        </div>
+                        <button class="btn" onclick="checkInbox()" style="width: 100%; margin-bottom: 10px;">📬 查阅信箱</button>
+                        <button class="btn" onclick="agentReply()" style="width: 100%;">💬 回复消息</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 消息列表 -->
+            <div style="margin-top: 20px;">
+                <h3 style="margin-bottom: 15px;">💬 消息列表 <span id="messageCount" class="badge">0</span></h3>
+                <div class="messages" id="messageList">
+                    <p style="text-align: center; color: #999; padding: 40px;">暂无消息，开始聊天吧！</p>
+                </div>
+                <button class="btn" onclick="loadMessages()" style="margin-top: 15px;">🔄 刷新消息</button>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        const API_BASE = '/api/v1';
+        let currentMeetingId = null;
+        let lastMessageId = 0;
+        
+        function showStatus(message, type = 'info') {
+            const el = document.getElementById('status');
+            el.innerHTML = `<div class="status ${type}">${message}</div>`;
+            setTimeout(() => el.innerHTML = '', 5000);
+        }
+        
+        async function login() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            
+            try {
+                const res = await fetch(`${API_BASE}/auth/login/`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+                const data = await res.json();
+                
+                if (res.ok) {
+                    document.getElementById('token').value = data.token;
+                    showStatus('✅ 登录成功！', 'success');
+                } else {
+                    showStatus(`❌ ${data.detail || '登录失败'}`, 'error');
+                }
+            } catch (e) {
+                showStatus(`❌ 请求失败：${e.message}`, 'error');
+            }
+        }
+        
+        async function createMeeting() {
+            const token = document.getElementById('token').value;
+            const topic = document.getElementById('meetingTopicInput').value || '新会议';
+            
+            if (!token) {
+                showStatus('❌ 请先登录', 'error');
+                return;
+            }
+            
+            try {
+                const res = await fetch(`${API_BASE}/meetings/`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token}`
+                    },
+                    body: JSON.stringify({ topic })
+                });
+                const data = await res.json();
+                
+                if (res.ok) {
+                    currentMeetingId = data.id;
+                    showMeetingInfo(data);
+                    showStatus('✅ 会议创建成功！', 'success');
+                    loadMessages();
+                } else {
+                    showStatus(`❌ ${data.error || '创建失败'}`, 'error');
+                }
+            } catch (e) {
+                showStatus(`❌ 请求失败：${e.message}`, 'error');
+            }
+        }
+        
+        async function joinByInvite() {
+            const token = document.getElementById('token').value;
+            const inviteCode = document.getElementById('inviteCodeInput').value.toUpperCase();
+            
+            if (!token || !inviteCode) {
+                showStatus('❌ 请填写 Token 和邀请码', 'error');
+                return;
+            }
+            
+            // 先获取会议列表找到对应会议
+            try {
+                const res = await fetch(`${API_BASE}/meetings/`, {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                const meetings = await res.json();
+                
+                const meeting = meetings.find(m => m.invite_code === inviteCode);
+                if (meeting) {
+                    currentMeetingId = meeting.id;
+                    showMeetingInfo(meeting);
+                    showStatus(`✅ 已加入会议：${meeting.topic}`, 'success');
+                    loadMessages();
+                } else {
+                    showStatus('❌ 未找到该邀请码的会议', 'error');
+                }
+            } catch (e) {
+                showStatus(`❌ 请求失败：${e.message}`, 'error');
+            }
+        }
+        
+        function showMeetingInfo(meeting) {
+            document.getElementById('meetingInfo').style.display = 'block';
+            document.getElementById('meetingTopic').textContent = meeting.topic;
+            document.getElementById('meetingId').textContent = meeting.id;
+            document.getElementById('inviteCode').textContent = meeting.invite_code;
+            document.getElementById('meetingStatus').textContent = meeting.status;
+        }
+        
+        async function sendMessage() {
+            const token = document.getElementById('token').value;
+            const content = document.getElementById('messageContent').value;
+            
+            if (!token || !currentMeetingId) {
+                showStatus('❌ 请先登录并创建/加入会议', 'error');
+                return;
+            }
+            
+            if (!content.trim()) {
+                showStatus('❌ 消息内容不能为空', 'error');
+                return;
+            }
+            
+            try {
+                const res = await fetch(`${API_BASE}/meetings/${currentMeetingId}/send_message/`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token}`
+                    },
+                    body: JSON.stringify({
+                        content,
+                        requires_response: document.getElementById('requiresResponse').checked
+                    })
+                });
+                const data = await res.json();
+                
+                if (res.ok) {
+                    document.getElementById('messageContent').value = '';
+                    showStatus('✅ 消息已发送！', 'success');
+                    loadMessages();
+                } else {
+                    showStatus(`❌ ${data.error || '发送失败'}`, 'error');
+                }
+            } catch (e) {
+                showStatus(`❌ 请求失败：${e.message}`, 'error');
+            }
+        }
+        
+        async function loadMessages() {
+            if (!currentMeetingId) {
+                showStatus('❌ 请先创建或加入会议', 'error');
+                return;
+            }
+            
+            try {
+                const res = await fetch(`${API_BASE}/meetings/${currentMeetingId}/messages/?last_id=0`);
+                const data = await res.json();
+                
+                const messages = data.messages || [];
+                document.getElementById('messageCount').textContent = messages.length;
+                
+                if (messages.length === 0) {
+                    document.getElementById('messageList').innerHTML = 
+                        '<p style="text-align: center; color: #999; padding: 40px;">暂无消息，开始聊天吧！</p>';
+                } else {
+                    document.getElementById('messageList').innerHTML = messages.map(msg => `
+                        <div class="message">
+                            <div class="message-header">
+                                <span class="message-emoji">${msg.sender_emoji || '🤖'}</span>
+                                <span class="message-sender">${msg.sender_name}</span>
+                                <span class="message-time">${new Date(msg.created_at).toLocaleString('zh-CN')}</span>
+                            </div>
+                            <div class="message-content">${msg.content}</div>
+                            ${msg.in_reply_to ? '<div style="font-size: 12px; color: #999; margin-top: 5px;">↩️ 回复消息 #' + msg.in_reply_to + '</div>' : ''}
+                        </div>
+                    `).join('');
+                    lastMessageId = messages[messages.length - 1]?.id || 0;
+                }
+            } catch (e) {
+                showStatus(`❌ 加载消息失败：${e.message}`, 'error');
+            }
+        }
+        
+        async function checkInbox() {
+            const meetingId = currentMeetingId || prompt('请输入会议 ID:');
+            const agentId = document.getElementById('agentId').value || 'flying_hero';
+            const agentName = document.getElementById('agentName').value || '飞行侠';
+            const agentEmoji = document.getElementById('agentEmoji').value || '🦸';
+            
+            if (!meetingId) {
+                showStatus('❌ 请提供会议 ID', 'error');
+                return;
+            }
+            
+            try {
+                const res = await fetch(
+                    `${API_BASE}/meetings/${meetingId}/inbox/?agent_id=${agentId}&agent_name=${agentName}&agent_emoji=${encodeURIComponent(agentEmoji)}`
+                );
+                const data = await res.json();
+                
+                if (res.ok) {
+                    currentMeetingId = meetingId;
+                    showStatus(`✅ 收到 ${data.unread_count} 条未读消息`, 'success');
+                    
+                    if (data.participant) {
+                        showStatus(`✅ Agent 已加入会议！API Key: ${data.participant.api_key}`, 'info');
+                    }
+                    
+                    if (data.messages && data.messages.length > 0) {
+                        document.getElementById('messageList').innerHTML = data.messages.map(msg => `
+                            <div class="message" style="border-left: 3px solid #ffc107;">
+                                <div class="message-header">
+                                    <span class="message-emoji">${msg.sender_emoji || '🤖'}</span>
+                                    <span class="message-sender">${msg.sender_name}</span>
+                                    <span class="message-time">${new Date(msg.created_at).toLocaleString('zh-CN')}</span>
+                                    ${msg.requires_response ? '<span class="badge" style="background: #ffc107; margin-left: 8px;">待回复</span>' : ''}
+                                </div>
+                                <div class="message-content">${msg.content}</div>
+                                <div style="font-size: 12px; color: #999; margin-top: 5px;">消息 ID: ${msg.id}</div>
+                            </div>
+                        `).join('');
+                    }
+                } else {
+                    showStatus(`❌ ${data.error || '查阅失败'}`, 'error');
+                }
+            } catch (e) {
+                showStatus(`❌ 请求失败：${e.message}`, 'error');
+            }
+        }
+        
+        async function agentReply() {
+            const meetingId = currentMeetingId || prompt('请输入会议 ID:');
+            const agentId = document.getElementById('agentId').value || 'flying_hero';
+            const agentName = document.getElementById('agentName').value || '飞行侠';
+            const agentEmoji = document.getElementById('agentEmoji').value || '🦸';
+            const content = document.getElementById('messageContent').value;
+            const inReplyTo = prompt('回复哪条消息？输入消息 ID:');
+            
+            if (!meetingId || !content) {
+                showStatus('❌ 请提供会议 ID 和消息内容', 'error');
+                return;
+            }
+            
+            try {
+                const res = await fetch(`${API_BASE}/meetings/${meetingId}/agent_reply/`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        agent_id: agentId,
+                        agent_name: agentName,
+                        agent_emoji: agentEmoji,
+                        content: content,
+                        in_reply_to: inReplyTo ? parseInt(inReplyTo) : null
+                    })
+                });
+                const data = await res.json();
+                
+                if (res.ok) {
+                    document.getElementById('messageContent').value = '';
+                    showStatus('✅ Agent 回复成功！', 'success');
+                    loadMessages();
+                } else {
+                    showStatus(`❌ ${data.error || '回复失败'}`, 'error');
+                }
+            } catch (e) {
+                showStatus(`❌ 请求失败：${e.message}`, 'error');
+            }
+        }
+        
+        // 自动登录（如果记得凭证）
+        document.getElementById('username').value = 'test';
+        document.getElementById('password').value = 'test123';
+    </script>
+</body>
+</html>
