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
+92 -4
View File
@@ -248,24 +248,34 @@ body::before {
.model-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
gap: 10px;
padding: 8px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-glass);
flex-shrink: 0;
}
.model-select {
.model-select-wrap {
position: relative;
flex: 1;
padding: 6px 12px;
display: flex;
align-items: center;
}
.model-select {
width: 100%;
padding: 7px 32px 7px 12px;
background: var(--bg-glass-light);
border: 1px solid var(--border-glass);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
font-family: var(--font-sans);
outline: none;
cursor: pointer;
transition: var(--transition);
appearance: none;
-webkit-appearance: none;
}
.model-select:focus {
@@ -276,6 +286,84 @@ body::before {
.model-select option {
background: var(--bg-secondary);
color: var(--text-primary);
padding: 6px;
}
.model-select-arrow {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-muted);
display: flex;
}
.model-select-arrow svg {
width: 14px;
height: 14px;
}
.model-info-badge {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
padding: 2px 8px;
background: var(--bg-glass-light);
border-radius: 10px;
border: 1px solid var(--border-glass);
display: none;
}
/* ── Think 按钮(输入栏内) ── */
.think-toggle {
display: flex;
align-items: center;
cursor: pointer;
flex-shrink: 0;
user-select: none;
}
.think-toggle input { display: none; }
.think-btn {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background: var(--bg-glass-light);
border: 1px solid var(--border-glass);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
color: var(--text-muted);
}
.think-btn svg {
width: 18px;
height: 18px;
}
.think-toggle:not(.unavailable):hover .think-btn {
border-color: var(--accent-purple);
color: var(--accent-purple);
background: rgba(123, 47, 247, 0.08);
}
.think-toggle input:checked + .think-btn {
background: rgba(123, 47, 247, 0.15);
border-color: var(--accent-purple);
color: var(--accent-purple);
box-shadow: 0 0 10px rgba(123, 47, 247, 0.25);
}
.think-toggle.unavailable .think-btn {
opacity: 0.3;
cursor: not-allowed;
}
.think-toggle.unavailable .think-btn svg {
stroke: var(--text-muted);
}
/* ── 开关控件 ── */