feat: 新增当前启用的AI卡片显示

master^2
Lxy 2 weeks ago
parent 82b8f859d8
commit a30144f409

@ -279,6 +279,57 @@ body {
color: var(--red); color: var(--red);
} }
/* 当前启用的AI卡片 */
.active-ai-card {
border-color: var(--green-border);
background: var(--green-bg);
}
.active-ai-card .card-header h3 {
color: var(--green);
}
.active-ai-card .card-header i {
color: var(--green);
}
.active-ai-display {
display: flex;
align-items: center;
gap: 16px;
padding: 12px;
}
.active-ai-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(34, 197, 94, 0.15);
border: 1px solid var(--green-border);
border-radius: 12px;
color: var(--green);
font-size: 24px;
}
.active-ai-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.active-ai-name {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.active-ai-model {
font-size: 13px;
color: var(--text-secondary);
}
/* 设置列表 */ /* 设置列表 */
.settings-list { .settings-list {
display: flex; display: flex;

@ -28,6 +28,22 @@
<main class="main-content"> <main class="main-content">
<div class="config-container"> <div class="config-container">
<!-- 当前启用的AI -->
<div class="config-card active-ai-card" id="active-ai-card" style="display:none;">
<div class="card-header">
<h3><i class="fas fa-check-circle"></i> 当前启用</h3>
</div>
<div class="active-ai-display">
<div class="active-ai-icon" id="active-ai-icon">
<i class="fas fa-robot"></i>
</div>
<div class="active-ai-info">
<div class="active-ai-name" id="active-ai-name">--</div>
<div class="active-ai-model" id="active-ai-model">--</div>
</div>
</div>
</div>
<!-- AI提供商选择 --> <!-- AI提供商选择 -->
<div class="config-card"> <div class="config-card">
<div class="card-header"> <div class="card-header">

@ -134,6 +134,16 @@ function populateForm(config) {
document.getElementById('temperature').value = activeModel.temperature || 0.7; document.getElementById('temperature').value = activeModel.temperature || 0.7;
document.getElementById('temp-value').textContent = activeModel.temperature || 0.7; document.getElementById('temp-value').textContent = activeModel.temperature || 0.7;
document.getElementById('max-tokens').value = activeModel.max_tokens || 2000; document.getElementById('max-tokens').value = activeModel.max_tokens || 2000;
// 选中当前启用的提供商卡片
const providerCard = document.querySelector(`.provider-card[data-provider="${activeModel.provider}"]`);
if (providerCard) {
document.querySelectorAll('.provider-card').forEach(c => c.classList.remove('active'));
providerCard.classList.add('active');
}
// 更新模型下拉框
updateProviderModels();
} }
if (config.analysis_settings) { if (config.analysis_settings) {
@ -147,11 +157,36 @@ function populateForm(config) {
function renderModelsList(models) { function renderModelsList(models) {
const list = document.getElementById('models-list'); const list = document.getElementById('models-list');
const activeCard = document.getElementById('active-ai-card');
if (!models || models.length === 0) { if (!models || models.length === 0) {
list.innerHTML = '<div class="empty-state">暂无已保存的模型</div>'; list.innerHTML = '<div class="empty-state">暂无已保存的模型</div>';
activeCard.style.display = 'none';
return; return;
} }
const activeModel = models.find(m => m.enabled);
if (activeModel) {
activeCard.style.display = 'block';
document.getElementById('active-ai-name').textContent = getProviderName(activeModel.provider || activeModel.api_base);
document.getElementById('active-ai-model').textContent = activeModel.model_name || activeModel.model_id || '--';
const iconMap = {
'openai': 'fab fa-openai',
'anthropic': 'fas fa-robot',
'google': 'fab fa-google',
'aliyun': 'fas fa-cloud',
'aliyun_coding': 'fas fa-code',
'bailian': 'fas fa-flask',
'baidu': 'fas fa-comments',
'zhipu': 'fas fa-lightbulb'
};
const icon = document.getElementById('active-ai-icon').querySelector('i');
icon.className = iconMap[activeModel.provider] || 'fas fa-robot';
} else {
activeCard.style.display = 'none';
}
list.innerHTML = models.map((model, index) => ` list.innerHTML = models.map((model, index) => `
<div class="model-item"> <div class="model-item">
<div class="model-info"> <div class="model-info">
@ -162,7 +197,7 @@ function renderModelsList(models) {
</div> </div>
</div> </div>
<div class="model-actions"> <div class="model-actions">
${!model.enabled ? `<button class="btn-set-active" onclick="setActiveModel(${index})">设为默认</button>` : '<span class="active-badge">默认</span>'} ${!model.enabled ? `<button class="btn-set-active" onclick="setActiveModel(${index})">设为默认</button>` : '<span class="active-badge">当前启用</span>'}
<button class="btn-delete" onclick="deleteModel(${index})"><i class="fas fa-trash"></i></button> <button class="btn-delete" onclick="deleteModel(${index})"><i class="fas fa-trash"></i></button>
</div> </div>
</div> </div>
@ -273,6 +308,10 @@ async function saveConfig() {
models.push(newModel); models.push(newModel);
} }
models.forEach(m => {
m.enabled = (m.provider === selectedProvider && m.model_id === modelId);
});
const config = { const config = {
models: models, models: models,
active_model: selectedProvider, active_model: selectedProvider,

Loading…
Cancel
Save