mirror of
https://github.com/Zippland/Snap-Solver.git
synced 2026-01-20 07:00:57 +08:00
优化API密钥管理界面，添加可折叠内容功能，改进按钮样式和交互逻辑，提升用户体验
This commit is contained in:
Zylan
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -138,50 +138,57 @@
|
||||
|
||||
<!-- 2. 所有API密钥集中在一个区域 -->
|
||||
<div class="settings-section">
|
||||
<h3><i class="fas fa-key"></i> API密钥设置</h3>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="AnthropicApiKey">Anthropic API Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="AnthropicApiKey" placeholder="输入 Anthropic API key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapsible-header" id="apiKeysCollapseToggle">
|
||||
<h3><i class="fas fa-key"></i> API密钥设置</h3>
|
||||
<button class="toggle-btn">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="OpenaiApiKey">OpenAI API Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="OpenaiApiKey" placeholder="输入 OpenAI API key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<div class="collapsible-content collapsed" id="apiKeysContent">
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="AnthropicApiKey">Anthropic API Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="AnthropicApiKey" placeholder="输入 Anthropic API key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="DeepseekApiKey">DeepSeek API Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="DeepseekApiKey" placeholder="输入 DeepSeek API key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="OpenaiApiKey">OpenAI API Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="OpenaiApiKey" placeholder="输入 OpenAI API key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="mathpixAppId">Mathpix App ID</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="mathpixAppId" placeholder="输入 Mathpix App ID">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="DeepseekApiKey">DeepSeek API Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="DeepseekApiKey" placeholder="输入 DeepSeek API key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="mathpixAppKey">Mathpix App Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="mathpixAppKey" placeholder="输入 Mathpix App Key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="mathpixAppId">Mathpix App ID</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="mathpixAppId" placeholder="输入 Mathpix App ID">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-group api-key-group">
|
||||
<label for="mathpixAppKey">Mathpix App Key</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="mathpixAppKey" placeholder="输入 Mathpix App Key">
|
||||
<button class="btn-icon toggle-api-key">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user