feat(stream_chat_demo): 添加API URL配置功能
在流式聊天测试Demo中添加API URL配置面板,支持自定义和保存API地址
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user