feat: 重新设计模型选择栏与 Think 模式

模型选择栏:
- 去掉原生 select 样式,自定义 appearance:none + 箭头图标
- 模型列表显示参数大小 (如 qwen2.5 · 7B)
- 选中模型后展示能力标签 (🧠 Think / 👁️ Vision)

Think 模式:
- 从模型栏移至输入区域,紧邻发送按钮
- 使用灯泡图标按钮替代原来的 toggle 开关
- 默认 disabled,切换模型时调用 /api/show 检测 capabilities
- capabilities 包含 'thinking' 时才启用,否则禁用并灰显
- 模型能力结果缓存,避免重复请求
This commit is contained in:
thzxx
2026-04-03 11:46:29 +08:00
parent 41b512c779
commit 6088ea4629
3 changed files with 217 additions and 28 deletions
+18 -8
View File
@@ -47,14 +47,15 @@
<!-- ═══════════════ 模型选择栏 ═══════════════ -->
<div class="model-bar">
<select class="model-select" id="modelSelect">
<option value="">正在加载模型...</option>
</select>
<label class="toggle-label" title="Think 模式:启用深度推理">
<input type="checkbox" id="toggleThink">
<span class="toggle-slider"></span>
<span>Think</span>
</label>
<div class="model-select-wrap">
<select class="model-select" id="modelSelect">
<option value="">正在加载模型...</option>
</select>
<span class="model-select-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</span>
</div>
<span class="model-info-badge" id="modelInfoBadge" title="模型信息"></span>
</div>
<!-- ═══════════════ 聊天区域 ═══════════════ -->
@@ -94,6 +95,15 @@
</button>
<input type="file" id="fileInput" accept="image/*" multiple style="display:none;">
<textarea class="chat-input" id="chatInput" placeholder="输入消息..." rows="1"></textarea>
<label class="think-toggle" id="thinkToggleWrap" title="Think 模式未可用">
<input type="checkbox" id="toggleThink" disabled>
<span class="think-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z"/>
<line x1="9" y1="21" x2="15" y2="21"/>
</svg>
</span>
</label>
<button class="send-btn" id="btnSend">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>