Update templates/index.html

templates/index.html

@@ -226,6 +226,70 @@
             <div class="bg-white p-6 rounded-lg shadow-md">
                 <h2 class="text-xl font-semibold mb-4">股票批量分析</h2>
                 
+                <!-- API配置部分 -->
+                <div class="mb-6 border-b pb-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-medium text-gray-700">API配置</h3>
+                        <button id="toggleApiConfig" class="text-blue-600 hover:text-blue-800 text-sm flex items-center">
+                            <span id="toggleApiConfigText">显示配置</span>
+                            <svg id="toggleApiConfigIcon" class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    
+                    <div id="apiConfigPanel" class="hidden space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label for="apiUrl" class="block text-sm font-medium text-gray-700 mb-1">API URL</label>
+                                <input type="text" id="apiUrl" 
+                                       class="w-full p-2 border rounded bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                       placeholder="例如: https://api.openai.com" 
+                                       value="{{ default_api_url }}"
+                                       oninput="updateFormattedUrl(this.value)">
+                                <p id="formattedUrl" class="mt-1 text-sm text-gray-500 break-all"></p>
+                            </div>
+                            <div>
+                                <label for="apiModel" class="block text-sm font-medium text-gray-700 mb-1">API 模型</label>
+                                <input type="text" id="apiModel" 
+                                       class="w-full p-2 border rounded bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                       placeholder="例如: gpt-3.5-turbo" 
+                                       value="{{ default_api_model }}">
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label for="apiKey" class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
+                                <input type="password" id="apiKey" 
+                                       class="w-full p-2 border rounded bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                       placeholder="输入您的API Key">
+                                <p class="mt-1 text-sm text-gray-500">如不填写，将使用系统默认配置</p>
+                            </div>
+                            <div>
+                                <label for="apiTimeout" class="block text-sm font-medium text-gray-700 mb-1">API 超时时间 (秒)</label>
+                                <input type="number" id="apiTimeout" 
+                                       class="w-full p-2 border rounded bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                       placeholder="例如: 60" 
+                                       value="{{ default_api_timeout }}" min="1" max="300">
+                                <p class="mt-1 text-sm text-gray-500">请求超时时间，默认60秒</p>
+                            </div>
+                        </div>
+                        <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>
+                                <button id="testApiConfig" class="bg-blue-100 text-blue-700 px-3 py-1 rounded hover:bg-blue-200 text-sm">
+                                    测试连接
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 
                 <!-- 添加市场类型选择 -->
                 <div class="mb-4">
@@ -957,6 +1021,158 @@
     <!-- 添加 marked.js 用于解析 Markdown -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     
+    <!-- API配置相关脚本 -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // API配置面板切换
+            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 apiTimeout = document.getElementById('apiTimeout');
+            const saveApiConfig = document.getElementById('saveApiConfig');
+            const resetApiConfig = document.getElementById('resetApiConfig');
+            const testApiConfig = document.getElementById('testApiConfig');
+            
+            // 从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配置
+            resetApiConfig.addEventListener('click', function() {
+                apiUrl.value = '{{ default_api_url }}';
+                apiKey.value = '';
+                apiModel.value = '{{ default_api_model }}';
+                apiTimeout.value = '{{ default_api_timeout }}';
+                saveApiConfig.checked = false;
+                
+                // 清除localStorage中的配置
+                localStorage.removeItem('apiConfig');
+                
+                alert('已重置为默认配置');
+            });
+            
+            // 测试API连接
+            testApiConfig.addEventListener('click', async function() {
+                const url = apiUrl.value.trim();
+                const key = apiKey.value.trim();
+                const model = apiModel.value.trim();
+                const timeout = apiTimeout.value.trim();
+                
+                if (!url) {
+                    alert('请输入API URL');
+                    return;
+                }
+                
+                if (!key) {
+                    alert('请输入API Key');
+                    return;
+                }
+                
+                try {
+                    testApiConfig.disabled = true;
+                    testApiConfig.textContent = '测试中...';
+                    
+                    const response = await fetch('/test_api_connection', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            api_url: url,
+                            api_key: key,
+                            api_model: model,
+                            api_timeout: timeout
+                        })
+                    });
+                    
+                    const result = await response.json();
+                    
+                    if (result.success) {
+                        alert(result.message);
+                        
+                        // 如果勾选了保存配置，则保存到localStorage
+                        if (saveApiConfig.checked) {
+                            saveApiConfigToLocalStorage();
+                        }
+                    } else {
+                        alert(result.message);
+                    }
+                } catch (error) {
+                    alert(error.message);
+                } finally {
+                    testApiConfig.disabled = false;
+                    testApiConfig.textContent = '测试连接';
+                }
+            });
+            
+            // 监听输入变化，自动保存配置
+            [apiUrl, apiKey, apiModel, apiTimeout].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(),
+                timeout: document.getElementById('apiTimeout').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;
+                    if (config.timeout) document.getElementById('apiTimeout').value = config.timeout;
+                    
+                    document.getElementById('saveApiConfig').checked = config.saveEnabled || false;
+                } catch (error) {
+                    console.error('加载API配置时出错:', error);
+                }
+            }
+        }
+    </script>
     <script>
         // 添加 Markdown 样式
         function addMarkdownStyles() {