feat(stream_chat_demo): 添加API URL配置功能
在流式聊天测试Demo中添加API URL配置面板,支持自定义和保存API地址
This commit is contained in:
@@ -104,6 +104,77 @@
|
||||
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 {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
@@ -117,6 +188,17 @@
|
||||
<div class="container">
|
||||
<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">
|
||||
<h3>选择请求方式:</h3>
|
||||
<button class="method-btn active" data-method="eventsource">EventSource</button>
|
||||
@@ -137,7 +219,7 @@
|
||||
|
||||
<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';
|
||||
let conversationId = '';
|
||||
let currentMethod = 'eventsource';
|
||||
@@ -150,6 +232,9 @@
|
||||
const sendBtn = document.getElementById('send-btn');
|
||||
const statusText = document.getElementById('status-text');
|
||||
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) => {
|
||||
@@ -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() {
|
||||
const message = messageInput.value.trim();
|
||||
@@ -468,6 +587,7 @@
|
||||
});
|
||||
|
||||
// 初始化
|
||||
apiUrlInput.value = API_URL;
|
||||
statusText.textContent = '就绪,使用 EventSource 方式';
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user