feat(stream_chat_demo): 添加API URL配置功能

在流式聊天测试Demo中添加API URL配置面板,支持自定义和保存API地址
This commit is contained in:
2026-01-22 10:08:11 +08:00
parent 8e32bc0d7d
commit 0fb8e62b50

View File

@@ -104,6 +104,77 @@
cursor: not-allowed; cursor: not-allowed;
} }
.api-config {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f8f9fa;
}
.api-config h3 {
margin-top: 0;
margin-bottom: 10px;
color: #333;
}
.input-group {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.input-group label {
font-size: 14px;
color: #666;
white-space: nowrap;
}
.input-group input {
flex: 1;
min-width: 300px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
#save-api-url {
padding: 8px 16px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
#save-api-url:hover {
background-color: #218838;
}
#reset-api-url {
padding: 8px 16px;
background-color: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
#reset-api-url:hover {
background-color: #5a6268;
}
.config-hint {
font-size: 12px;
color: #666;
margin-top: 5px;
margin-bottom: 0;
}
.status { .status {
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
@@ -117,6 +188,17 @@
<div class="container"> <div class="container">
<h1>流式聊天测试 Demo</h1> <h1>流式聊天测试 Demo</h1>
<div class="api-config">
<h3>API 配置</h3>
<div class="input-group">
<label for="api-url-input">API URL:</label>
<input type="text" id="api-url-input" placeholder="输入完整 API URL 或仅域名(默认添加 /api/kefu/chat">
<button id="save-api-url">保存</button>
<button id="reset-api-url">重置默认</button>
</div>
<p class="config-hint">提示:您可以只修改域名部分(如 http://localhost:8050系统会自动添加默认路径 /api/kefu/chat</p>
</div>
<div class="method-selector"> <div class="method-selector">
<h3>选择请求方式:</h3> <h3>选择请求方式:</h3>
<button class="method-btn active" data-method="eventsource">EventSource</button> <button class="method-btn active" data-method="eventsource">EventSource</button>
@@ -137,7 +219,7 @@
<script> <script>
// 配置 // 配置
const API_URL = 'http://localhost:8050/api/kefu/chat'; let API_URL = localStorage.getItem('apiUrl') || 'http://localhost:8050/api/kefu/chat';
const UNIACID = '1'; const UNIACID = '1';
let conversationId = ''; let conversationId = '';
let currentMethod = 'eventsource'; let currentMethod = 'eventsource';
@@ -150,6 +232,9 @@
const sendBtn = document.getElementById('send-btn'); const sendBtn = document.getElementById('send-btn');
const statusText = document.getElementById('status-text'); const statusText = document.getElementById('status-text');
const methodBtns = document.querySelectorAll('.method-btn'); const methodBtns = document.querySelectorAll('.method-btn');
const apiUrlInput = document.getElementById('api-url-input');
const saveApiUrlBtn = document.getElementById('save-api-url');
const resetApiUrlBtn = document.getElementById('reset-api-url');
// 事件监听 // 事件监听
messageInput.addEventListener('keypress', (e) => { messageInput.addEventListener('keypress', (e) => {
@@ -169,6 +254,40 @@
}); });
}); });
// API URL 保存事件
saveApiUrlBtn.addEventListener('click', () => {
let newApiUrl = apiUrlInput.value.trim();
if (newApiUrl) {
// 检查是否只输入了域名(没有 /api/kefu/chat 路径)
if (!newApiUrl.includes('/api/kefu/chat')) {
// 确保域名末尾没有斜杠
newApiUrl = newApiUrl.replace(/\/$/, '') + '/api/kefu/chat';
}
localStorage.setItem('apiUrl', newApiUrl);
API_URL = newApiUrl;
// 更新输入框显示完整 URL
apiUrlInput.value = newApiUrl;
statusText.textContent = 'API URL 已保存';
setTimeout(() => {
statusText.textContent = '就绪';
}, 2000);
}
});
// 重置默认 API URL
resetApiUrlBtn.addEventListener('click', () => {
const defaultApiUrl = 'http://localhost:8050/api/kefu/chat';
localStorage.setItem('apiUrl', defaultApiUrl);
API_URL = defaultApiUrl;
apiUrlInput.value = defaultApiUrl;
statusText.textContent = '已重置为默认 API URL';
setTimeout(() => {
statusText.textContent = '就绪';
}, 2000);
});
// 发送消息 // 发送消息
function sendMessage() { function sendMessage() {
const message = messageInput.value.trim(); const message = messageInput.value.trim();
@@ -468,6 +587,7 @@
}); });
// 初始化 // 初始化
apiUrlInput.value = API_URL;
statusText.textContent = '就绪,使用 EventSource 方式'; statusText.textContent = '就绪,使用 EventSource 方式';
</script> </script>
</body> </body>