上传初始版，功能未经任何测试，仅为基本框架，目前为完全不可用状态

2026-01-02 01:19:24 +08:00
parent 8c39d85831
commit 2c8afc1275
18 changed files with 2729 additions and 34 deletions
@@ -0,0 +1,157 @@
+// 消息容器
+const messagesContainer = document.getElementById('messages');
+const userInput = document.getElementById('user-input');
+const sendBtn = document.getElementById('send-btn');
+
+// API配置 - 这里将在后续连接到实际的后端API
+const API_URL = 'http://localhost:8000/api/chat';
+
+// 添加消息到聊天容器
+function addMessage(text, isUser = false) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+    
+    const avatarIcon = isUser ? 'fa-user' : 'fa-robot';
+    const avatarClass = isUser ? 'user-avatar' : 'bot-avatar';
+    
+    messageDiv.innerHTML = `
+        <div class="message-content">
+            <div class="avatar ${avatarClass}">
+                <i class="fas ${avatarIcon}"></i>
+            </div>
+            <div class="message-text">
+                <p>${text}</p>
+            </div>
+        </div>
+    `;
+    
+    messagesContainer.appendChild(messageDiv);
+    // 滚动到最新消息
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+// 发送消息到API
+async function sendMessage() {
+    const text = userInput.value.trim();
+    if (!text) return;
+    
+    // 添加用户消息
+    addMessage(text, true);
+    
+    // 清空输入框
+    userInput.value = '';
+    userInput.style.height = 'auto';
+    
+    // 添加加载状态
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'message bot-message';
+    loadingDiv.innerHTML = `
+        <div class="message-content">
+            <div class="avatar bot-avatar">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="message-text">
+                <div class="loading">
+                    <span class="loading-dot"></span>
+                    <span class="loading-dot"></span>
+                    <span class="loading-dot"></span>
+                </div>
+            </div>
+        </div>
+    `;
+    messagesContainer.appendChild(loadingDiv);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    
+    try {
+        // 调用API获取回复
+        const response = await fetch(API_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                message: text
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error('API请求失败');
+        }
+        
+        const data = await response.json();
+        
+        // 移除加载状态
+        loadingDiv.remove();
+        
+        // 添加机器人回复
+        addMessage(data.response);
+    } catch (error) {
+        // 移除加载状态
+        loadingDiv.remove();
+        
+        // 添加错误消息
+        addMessage('抱歉，暂时无法为您提供服务，请稍后重试。');
+        console.error('发送消息失败:', error);
+    }
+}
+
+// 处理输入框高度自适应
+function adjustTextareaHeight() {
+    userInput.style.height = 'auto';
+    userInput.style.height = Math.min(userInput.scrollHeight, 120) + 'px';
+}
+
+// 事件监听
+userInput.addEventListener('input', adjustTextareaHeight);
+
+// 回车键发送消息，Shift+Enter换行
+userInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+});
+
+// 发送按钮点击事件
+sendBtn.addEventListener('click', sendMessage);
+
+// 初始化 - 添加一些CSS样式到head
+const style = document.createElement('style');
+style.textContent = `
+    /* 加载动画 */
+    .loading {
+        display: flex;
+        gap: 5px;
+    }
+    
+    .loading-dot {
+        width: 8px;
+        height: 8px;
+        background-color: #1a73e8;
+        border-radius: 50%;
+        animation: loading 1.4s infinite ease-in-out both;
+    }
+    
+    .loading-dot:nth-child(1) {
+        animation-delay: -0.32s;
+    }
+    
+    .loading-dot:nth-child(2) {
+        animation-delay: -0.16s;
+    }
+    
+    @keyframes loading {
+        0%, 80%, 100% {
+            transform: scale(0);
+            opacity: 0.5;
+        }
+        40% {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+`;
+document.head.appendChild(style);
+
+// 初始欢迎消息已经在HTML中定义，这里可以添加一些示例对话
+// addMessage('你好！我是豆包AI，很高兴为你服务。有什么我可以帮助你的吗？');