shiyue/stock-scanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: API配置前端持久化保存

Browse Source
This commit is contained in:
Cassianvale
2025-03-04 16:09:12 +08:00
parent e28b1342c3
commit e9ba47c35f
2 changed files with 128 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
templates/index.html
View File

@@ -71,7 +71,12 @@
placeholder="输入您的API Key">
<p class="mt-1 text-sm text-gray-500">如不填写，将使用系统默认配置</p>
</div>
<div class="flex justify-end">
<div class="flex justify-between">
<div class="flex items-center">
<input type="checkbox" id="saveApiConfig" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="saveApiConfig" class="ml-2 block text-sm text-gray-700">保存配置到本地</label>
</div>
<div>
<button id="resetApiConfig" class="text-gray-600 hover:text-gray-800 text-sm mr-3">
重置为默认
</button>
@@ -81,6 +86,7 @@
</div>
</div>
</div>
</div>
<!-- 添加市场类型选择 -->
<div class="mb-4">
@@ -430,7 +436,7 @@
} catch (error) {
console.error('请求失败:', error);
resultContent.innerHTML = `
<div class="p-4 bg-red-50 text-red-600 rounded">
<div class="p-6 bg-yellow-50 text-yellow-600 rounded-lg text-center">
分析出错：${error.message}
</div>
`;
@@ -705,73 +711,147 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
// API配置面板切换
const toggleBtn = document.getElementById('toggleApiConfig');
const configPanel = document.getElementById('apiConfigPanel');
const toggleText = document.getElementById('toggleApiConfigText');
const toggleIcon = document.getElementById('toggleApiConfigIcon');
const toggleApiConfig = document.getElementById('toggleApiConfig');
const apiConfigPanel = document.getElementById('apiConfigPanel');
const toggleApiConfigText = document.getElementById('toggleApiConfigText');
const toggleApiConfigIcon = document.getElementById('toggleApiConfigIcon');
const apiUrl = document.getElementById('apiUrl');
const apiKey = document.getElementById('apiKey');
const apiModel = document.getElementById('apiModel');
const saveApiConfig = document.getElementById('saveApiConfig');
const resetApiConfig = document.getElementById('resetApiConfig');
const testApiConfig = document.getElementById('testApiConfig');
toggleBtn.addEventListener('click', function() {
const isHidden = configPanel.classList.contains('hidden');
configPanel.classList.toggle('hidden', !isHidden);
toggleText.textContent = isHidden ? '隐藏配置' : '显示配置';
toggleIcon.style.transform = isHidden ? 'rotate(180deg)' : '';
// 从localStorage加载保存的配置
loadApiConfig();
// 切换API配置面板显示/隐藏
toggleApiConfig.addEventListener('click', function() {
apiConfigPanel.classList.toggle('hidden');
if (apiConfigPanel.classList.contains('hidden')) {
toggleApiConfigText.textContent = '显示配置';
toggleApiConfigIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>';
} else {
toggleApiConfigText.textContent = '隐藏配置';
toggleApiConfigIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>';
}
});
// 重置API配置
document.getElementById('resetApiConfig').addEventListener('click', function() {
document.getElementById('apiUrl').value = '{{ default_api_url }}';
document.getElementById('apiModel').value = '{{ default_api_model }}';
document.getElementById('apiKey').value = '';
resetApiConfig.addEventListener('click', function() {
apiUrl.value = '{{ default_api_url }}';
apiKey.value = '';
apiModel.value = '{{ default_api_model }}';
saveApiConfig.checked = false;
// 清除localStorage中的配置
localStorage.removeItem('apiConfig');
alert('已重置为默认配置');
});
// 测试API连接
document.getElementById('testApiConfig').addEventListener('click', async function() {
const apiUrl = document.getElementById('apiUrl').value.trim();
const apiKey = document.getElementById('apiKey').value.trim();
const apiModel = document.getElementById('apiModel').value.trim();
testApiConfig.addEventListener('click', async function() {
const url = apiUrl.value.trim();
const key = apiKey.value.trim();
const model = apiModel.value.trim();
if (!apiUrl) {
if (!url) {
alert('请输入API URL');
return;
}
if (!apiKey) {
if (!key) {
alert('请输入API Key');
return;
}
this.textContent = '测试中...';
this.disabled = true;
try {
// 使用后端代理进行API测试
testApiConfig.disabled = true;
testApiConfig.textContent = '测试中...';
const response = await fetch('/test_api_connection', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
body: JSON.stringify({
api_url: apiUrl,
api_key: apiKey,
api_model: apiModel
api_url: url,
api_key: key,
api_model: model
})
});
const data = await response.json();
const result = await response.json();
if (response.ok && data.success) {
alert('API连接成功！');
if (result.success) {
alert(result.message);
// 如果勾选了保存配置，则保存到localStorage
if (saveApiConfig.checked) {
saveApiConfigToLocalStorage();
}
} else {
alert(`API连接失败: ${data.message || '未知错误'}`);
alert(result.message);
}
} catch (error) {
alert(`API连接测试失败: ${error.message}`);
alert(error.message);
} finally {
this.textContent = '测试连接';
this.disabled = false;
testApiConfig.disabled = false;
testApiConfig.textContent = '测试连接';
}
});
// 监听输入变化，自动保存配置
[apiUrl, apiKey, apiModel].forEach(input => {
input.addEventListener('change', function() {
if (saveApiConfig.checked) {
saveApiConfigToLocalStorage();
}
});
});
// 监听保存配置复选框变化
saveApiConfig.addEventListener('change', function() {
if (this.checked) {
saveApiConfigToLocalStorage();
} else {
localStorage.removeItem('apiConfig');
}
});
});
// 保存API配置到localStorage
function saveApiConfigToLocalStorage() {
const apiConfig = {
url: document.getElementById('apiUrl').value.trim(),
model: document.getElementById('apiModel').value.trim(),
key: document.getElementById('apiKey').value.trim(),
saveEnabled: true
};
localStorage.setItem('apiConfig', JSON.stringify(apiConfig));
}
// 从localStorage加载API配置
function loadApiConfig() {
const savedConfig = localStorage.getItem('apiConfig');
if (savedConfig) {
try {
const config = JSON.parse(savedConfig);
if (config.url) document.getElementById('apiUrl').value = config.url;
if (config.model) document.getElementById('apiModel').value = config.model;
if (config.key) document.getElementById('apiKey').value = config.key;
document.getElementById('saveApiConfig').checked = config.saveEnabled || false;
} catch (error) {
console.error('加载API配置时出错:', error);
}
}
}
</script>
<script>
// 添加 Markdown 样式

6
web_server.py
View File

@@ -164,11 +164,11 @@ def test_api_connection():
# 检查响应
if response.status_code == 200:
logger.info(f"API 连接测试成功: {response.status_code}")
return jsonify({'success': True, 'message': '连接成功'})
return jsonify({'success': True, 'message': 'API 连接测试成功'})
else:
error_message = response.json().get('error', {}).get('message', '未知错误')
logger.warning(f"API连接测试失败: {response.status_code} - {error_message}")
return jsonify({'success': False, 'message': f'连接失败: {error_message}', 'status_code': response.status_code}), 400
return jsonify({'success': False, 'message': f'API 连接测试失败: {error_message}', 'status_code': response.status_code}), 400
except requests.exceptions.RequestException as e:
logger.error(f"API 连接请求错误: {str(e)}")
@@ -176,7 +176,7 @@ def test_api_connection():
except Exception as e:
logger.error(f"测试 API 连接时出错: {str(e)}")
logger.exception(e)
return jsonify({'success': False, 'message': f'测试连接时出错: {str(e)}'}), 500
return jsonify({'success': False, 'message': f'API 测试连接时出错: {str(e)}'}), 500
if __name__ == '__main__':
logger.info("股票分析系统启动")