From 6088ea4629ee3560f96e6116f74a5235664d8963 Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@users.noreply.gitee.com>
Date: Fri, 3 Apr 2026 11:46:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E9=80=89=E6=8B=A9=E6=A0=8F=E4=B8=8E=20Think?=
 =?UTF-8?q?=20=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Think 模式:
- 从模型栏移至输入区域，紧邻发送按钮
- 使用灯泡图标按钮替代原来的 toggle 开关
- 默认 disabled，切换模型时调用 /api/show 检测 capabilities
- capabilities 包含 'thinking' 时才启用，否则禁用并灰显
- 模型能力结果缓存，避免重复请求
---
 css/style.css              |  96 +++++++++++++++++++++++++++--
 index.html                 |  26 +++++---
 js/components/model-bar.js | 123 ++++++++++++++++++++++++++++++++-----
 3 files changed, 217 insertions(+), 28 deletions(-)

diff --git a/css/style.css b/css/style.css
index d1b8404..32c961a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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);
 }
 
 /* ── 开关控件 ── */
diff --git a/index.html b/index.html
index ab7e297..bd1cf2d 100644
--- a/index.html
+++ b/index.html
@@ -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"/>
diff --git a/js/components/model-bar.js b/js/components/model-bar.js
index befa501..80966d0 100644
--- a/js/components/model-bar.js
+++ b/js/components/model-bar.js
@@ -1,61 +1,152 @@
 /**
  * ModelBar - 模型选择栏组件
+ * 包含模型下拉选择、Think 能力检测、模型信息展示
  */
 
 import { state, KEYS } from '../state.js';
 import { formatSize } from '../utils.js';
-import { showToast } from './toast.js';
 
-let modelSelectEl, toggleThinkEl;
+let modelSelectEl, modelInfoBadgeEl, thinkCheckbox, thinkWrap;
+
+/** 缓存模型能力 { modelName: { think: bool, vision: bool } } */
+const modelCapabilityCache = new Map();
 
 export function initModelBar() {
     modelSelectEl = document.querySelector('#modelSelect');
-    toggleThinkEl = document.querySelector('#toggleThink');
+    modelInfoBadgeEl = document.querySelector('#modelInfoBadge');
+    thinkCheckbox = document.querySelector('#toggleThink');
+    thinkWrap = document.querySelector('#thinkToggleWrap');
 
-    // 模型选择变化 → 保存到设置
+    // 模型切换 → 检测能力 + 保存设置
     modelSelectEl.addEventListener('change', async () => {
-        const db = state.get(KEYS.DB);
-        if (db) await db.saveSetting('selectedModel', modelSelectEl.value);
+        const model = modelSelectEl.value;
+        if (db()) await db().saveSetting('selectedModel', model);
+        if (model) {
+            await checkModelCapability(model);
+        } else {
+            setThinkAvailable(false);
+            setModelBadge('');
+        }
     });
 }
 
+function db() { return state.get(KEYS.DB); }
+function api() { return state.get(KEYS.API); }
+
 /**
  * 加载模型列表
  */
 export async function loadModels() {
-    const api = state.get(KEYS.API);
-    const db = state.get(KEYS.DB);
-    const currentSession = state.get(KEYS.CURRENT_SESSION);
-
-    if (!api) return;
+    if (!api()) return;
 
     try {
-        const data = await api.listModels();
+        const data = await api().listModels();
         modelSelectEl.innerHTML = '';
+
         if (!data.models || data.models.length === 0) {
             modelSelectEl.innerHTML = '<option value="">未安装任何模型</option>';
+            setModelBadge('');
             return;
         }
 
         data.models.forEach(m => {
             const opt = document.createElement('option');
             opt.value = m.name;
-            opt.textContent = `${m.name} (${formatSize(m.size)})`;
+            const paramSize = m.details?.parameter_size || '';
+            const family = m.details?.family || '';
+            const label = paramSize ? `${m.name} · ${paramSize}` : m.name;
+            opt.textContent = label;
             modelSelectEl.appendChild(opt);
         });
 
         // 恢复上次选择的模型
-        if (currentSession && currentSession.model) {
+        const currentSession = state.get(KEYS.CURRENT_SESSION);
+        if (currentSession?.model) {
             modelSelectEl.value = currentSession.model;
         }
 
-        if (db) await db.saveSetting('selectedModel', modelSelectEl.value);
+        if (db()) await db().saveSetting('selectedModel', modelSelectEl.value);
+
+        // 检测当前选中模型的能力
+        if (modelSelectEl.value) {
+            await checkModelCapability(modelSelectEl.value);
+        }
     } catch (err) {
         console.error('[ModelBar] 加载模型失败:', err);
         modelSelectEl.innerHTML = '<option value="">加载失败 - 检查连接</option>';
+        setModelBadge('');
     }
 }
 
+/**
+ * 调用 /api/show 检测模型能力
+ * @param {string} modelName
+ */
+async function checkModelCapability(modelName) {
+    // 命中缓存
+    if (modelCapabilityCache.has(modelName)) {
+        applyCapability(modelName, modelCapabilityCache.get(modelName));
+        return;
+    }
+
+    if (!api()) return;
+
+    try {
+        const info = await api().showModel(modelName);
+        const capabilities = info.capabilities || [];
+        const caps = {
+            think: capabilities.includes('thinking'),
+            vision: capabilities.includes('vision'),
+            completion: capabilities.includes('completion'),
+        };
+        modelCapabilityCache.set(modelName, caps);
+        applyCapability(modelName, caps);
+    } catch (err) {
+        console.warn('[ModelBar] 获取模型能力失败:', err);
+        // 降级：不支持 think
+        const fallback = { think: false, vision: false, completion: true };
+        modelCapabilityCache.set(modelName, fallback);
+        applyCapability(modelName, fallback);
+    }
+}
+
+/**
+ * 根据能力设置 UI 状态
+ */
+function applyCapability(modelName, caps) {
+    setThinkAvailable(caps.think);
+
+    // 更新信息标签
+    const tags = [];
+    if (caps.think) tags.push('🧠 Think');
+    if (caps.vision) tags.push('👁️ Vision');
+    setModelBadge(tags.join('  '));
+}
+
+/**
+ * 设置 Think 开关是否可用
+ */
+function setThinkAvailable(available) {
+    if (available) {
+        thinkCheckbox.disabled = false;
+        thinkWrap.title = 'Think 模式：启用深度推理';
+        thinkWrap.classList.remove('unavailable');
+    } else {
+        thinkCheckbox.checked = false;
+        thinkCheckbox.disabled = true;
+        thinkWrap.title = '当前模型不支持 Think 模式';
+        thinkWrap.classList.add('unavailable');
+    }
+}
+
+/**
+ * 更新模型信息标签
+ */
+function setModelBadge(text) {
+    modelInfoBadgeEl.textContent = text;
+    modelInfoBadgeEl.style.display = text ? '' : 'none';
+}
+
 /**
  * 获取当前选择的模型
  */
@@ -74,5 +165,5 @@ export function setSelectedModel(modelName) {
  * Think 模式是否开启
  */
 export function isThinkEnabled() {
-    return toggleThinkEl.checked;
+    return thinkCheckbox.checked && !thinkCheckbox.disabled;
 }