diff --git a/static/js/settings.js b/static/js/settings.js index e0e2d27..c6947a1 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -27,6 +27,9 @@ class SettingsManager { this.setupEventListeners(); this.updateUIBasedOnModelType(); }); + + // 初始化可折叠内容逻辑 + this.initCollapsibleContent(); } // 从配置文件加载模型定义 @@ -317,30 +320,11 @@ class SettingsManager { const modelInfo = this.modelDefinitions[selectedModel]; if (!modelInfo) return; - const requiredApiKeyId = modelInfo.apiKeyId; - const providerInfo = this.providerDefinitions[modelInfo.provider]; - - // 更新API密钥标签突出显示，而不是隐藏不需要的密钥 - this.apiKeyGroups.forEach(group => { - const keyInputId = group.querySelector('input').id; - const isRequired = keyInputId === requiredApiKeyId; - - // 为需要的API密钥添加突出显示样式 - if (isRequired) { - group.classList.add('api-key-active'); - } else { - group.classList.remove('api-key-active'); - } - - // 更新Mathpix相关输入框的必要性 - if ((keyInputId === 'mathpixAppId' || keyInputId === 'mathpixAppKey') && - !modelInfo.supportsMultimodal) { - group.classList.add('api-key-active'); // 非多模态模型需要Mathpix - } - }); - - // 更新模型版本显示 + // 仅更新模型版本显示 this.updateModelVersionDisplay(selectedModel); + + // 不再需要高亮API密钥 + // 这里我们不再进行API密钥的高亮处理 } updateUIBasedOnModelType() { @@ -476,6 +460,33 @@ class SettingsManager { this.settingsPanel.classList.add('hidden'); }); } + + /** + * 初始化可折叠内容的交互逻辑 + */ + initCollapsibleContent() { + // 获取API密钥折叠切换按钮和内容 + const apiKeysToggle = document.getElementById('apiKeysCollapseToggle'); + const apiKeysContent = document.getElementById('apiKeysContent'); + + // 添加点击事件以切换折叠状态 + if (apiKeysToggle && apiKeysContent) { + apiKeysToggle.addEventListener('click', () => { + // 切换折叠状态 + apiKeysContent.classList.toggle('collapsed'); + + // 更新图标方向 + const icon = apiKeysToggle.querySelector('.fa-chevron-down, .fa-chevron-up'); + if (icon) { + if (apiKeysContent.classList.contains('collapsed')) { + icon.classList.replace('fa-chevron-up', 'fa-chevron-down'); + } else { + icon.classList.replace('fa-chevron-down', 'fa-chevron-up'); + } + } + }); + } + } } // Export for use in other modules diff --git a/static/style.css b/static/style.css index e4b1cde..204dfd2 100644 --- a/static/style.css +++ b/static/style.css @@ -1095,20 +1095,20 @@ button:disabled { } .toggle-btn { - background: transparent; + background: none; border: none; - color: var(--text-secondary); cursor: pointer; - width: 32px; - height: 32px; + color: var(--text-color); + padding: 5px; + border-radius: 50%; display: flex; align-items: center; justify-content: center; - transition: all 0.2s ease; + transition: background-color 0.3s ease; } .toggle-btn:hover { - color: var(--primary); + background-color: var(--hover-color); } .thinking-content { @@ -1311,18 +1311,33 @@ button:disabled { /* API密钥高亮显示样式 */ .api-key-group { transition: all 0.3s ease; - border-left: 3px solid transparent; - padding-left: 0.5rem; } -.api-key-active { - border-left: 3px solid var(--primary); - background-color: rgba(var(--primary-rgb), 0.05); - padding-left: 0.5rem; - border-radius: 4px; +/* 可折叠内容样式 */ +.collapsible-header { + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + padding-bottom: 1rem; } -.api-key-active label { - color: var(--primary); - font-weight: 600; +.collapsible-header h3 { + margin-bottom: 0 !important; +} + +.collapsible-content { + overflow: hidden; + transition: max-height 0.3s ease, padding-top 0.3s ease; +} + +.collapsible-content.collapsed { + max-height: 0; + padding-top: 0; +} + +.collapsible-content:not(.collapsed) { + max-height: 2000px; + padding-top: 1rem; + border-top: 1px dashed var(--border-color); } diff --git a/templates/index.html b/templates/index.html index 020678c..eefc5bb 100644 --- a/templates/index.html +++ b/templates/index.html @@ -138,50 +138,57 @@
-

API密钥设置

-
- -
- - -
+
+

API密钥设置

+
-
- -
- - + -
- -
- - +
+ +
+ + +
-
-
- -
- - +
+ +
+ + +
-
-
- -
- - +
+ +
+ + +
+
+
+ +
+ + +