@liguoshuai/pi-web-chat 1.7.3 → 1.7.4

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.7.3 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.7.4 版本）。
 
 ---
 

package/docs/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.7.4] - 2026-07-26
+
+### Added
+- **模型菜单实时搜索与过滤 (Model Search & Instant Filter)**：
+  - 顶栏模型下拉菜单增加置顶固定的搜索过滤输入框，支持根据 Provider 提供商名称、模型名称、模型 ID 进行多维度实时模糊过滤。
+  - 打开模型下拉框时自动聚焦并全选搜索框，支持一键清空（`×`）、按 `Escape` 快捷关闭、按 `Enter` 快捷选中。
+  - 优化模型列表项布局，同时展示友好显示名与底层 Model ID，解决模型列表过长时翻找困难的问题。
+  - 移动端与桌面端自适应滚动与粘性搜索栏布局。
+
+---
+
 ## [1.7.3] - 2026-07-26
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",

package/public/app.js

@@ -1439,29 +1439,112 @@ function renderModelPill() {
   pill.title = `当前模型: ${provider} / ${name} (${m.id})`;
 }
 
+let modelSearchQuery = "";
+
 function renderModelMenu() {
   const menu = $("#modelMenu");
-  menu.innerHTML = "";
-  // group by provider
+  if (!menu) return;
+
+  let searchInput = $("#modelSearchInput", menu);
+  let listContainer = $(".model-menu-list", menu);
+
+  if (!searchInput || !listContainer) {
+    menu.innerHTML = "";
+    const searchWrap = el("div", { class: "model-search-wrap" });
+    searchInput = el("input", {
+      type: "text",
+      id: "modelSearchInput",
+      class: "model-search-input",
+      placeholder: "搜索模型 (如 claude, deepseek, 4o)…",
+      autocomplete: "off",
+      spellcheck: "false",
+      value: modelSearchQuery,
+    });
+
+    searchInput.addEventListener("click", (e) => e.stopPropagation());
+    searchInput.addEventListener("input", (e) => {
+      modelSearchQuery = e.target.value;
+      renderModelList(listContainer);
+      const clearBtn = $(".btn-clear-model-search", searchWrap);
+      if (clearBtn) clearBtn.style.display = modelSearchQuery ? "block" : "none";
+    });
+    searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        menu.classList.remove("open");
+      } else if (e.key === "Enter") {
+        const visibleOpts = listContainer.querySelectorAll(".opt");
+        if (visibleOpts.length > 0) {
+          visibleOpts[0].click();
+        }
+      }
+    });
+
+    const clearBtn = el("button", {
+      class: "btn-clear-model-search",
+      text: "×",
+      type: "button",
+      title: "清空搜索",
+      style: `display: ${modelSearchQuery ? "block" : "none"}`,
+      onclick: (e) => {
+        e.stopPropagation();
+        modelSearchQuery = "";
+        searchInput.value = "";
+        clearBtn.style.display = "none";
+        searchInput.focus();
+        renderModelList(listContainer);
+      }
+    });
+
+    searchWrap.appendChild(searchInput);
+    searchWrap.appendChild(clearBtn);
+    menu.appendChild(searchWrap);
+
+    listContainer = el("div", { class: "model-menu-list" });
+    menu.appendChild(listContainer);
+  }
+
+  renderModelList(listContainer);
+}
+
+function renderModelList(listContainer) {
+  if (!listContainer) return;
+  listContainer.innerHTML = "";
+  const q = modelSearchQuery.trim().toLowerCase();
+
+  const filteredModels = state.models.filter(m => {
+    if (!q) return true;
+    const idMatch = (m.id || "").toLowerCase().includes(q);
+    const nameMatch = (m.name || "").toLowerCase().includes(q);
+    const providerMatch = (m.provider || "").toLowerCase().includes(q);
+    return idMatch || nameMatch || providerMatch;
+  });
+
+  if (filteredModels.length === 0) {
+    listContainer.appendChild(el("div", { class: "model-empty", text: "未找到匹配的模型" }));
+    return;
+  }
+
   const groups = {};
-  for (const m of state.models) {
+  for (const m of filteredModels) {
     const p = m.provider || "other";
     (groups[p] = groups[p] || []).push(m);
   }
+
   for (const [provider, items] of Object.entries(groups).sort()) {
-    menu.appendChild(el("div", { class: "group-label", text: provider }));
+    listContainer.appendChild(el("div", { class: "group-label", text: provider }));
     for (const m of items) {
       const active = state.currentModel && m.id === state.currentModel.id && m.provider === state.currentModel.provider;
-      menu.appendChild(el("div", {
+      listContainer.appendChild(el("div", {
         class: "opt" + (active ? " active" : ""),
         onclick: () => {
           $("#modelPill").textContent = "切换中…";
           sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
-          menu.classList.remove("open");
+          $("#modelMenu").classList.remove("open");
         },
       }, [
         el("span", { class: "check", html: active ? "✓ " : "" }),
-        document.createTextNode(`${m.name || m.id}`),
+        el("span", { class: "model-name", text: `${m.name || m.id}` }),
+        (m.name && m.id && m.name !== m.id) ? el("span", { class: "model-id-sub", text: m.id }) : null,
       ]));
     }
   }
@@ -1649,7 +1732,18 @@ function init() {
   $("#modelPill").addEventListener("click", (e) => {
     e.stopPropagation();
     sendWs({ type: "get_available_models" });
-    $("#modelMenu").classList.toggle("open");
+    const menu = $("#modelMenu");
+    const willOpen = !menu.classList.contains("open");
+    menu.classList.toggle("open");
+    if (willOpen) {
+      setTimeout(() => {
+        const input = $("#modelSearchInput");
+        if (input) {
+          input.focus();
+          input.select();
+        }
+      }, 50);
+    }
   });
   document.addEventListener("click", (e) => {
     if (!e.target.closest("#modelMenu") && !e.target.closest("#modelPill")) {

package/public/style.css

@@ -798,18 +798,97 @@ body {
 /* Model selector dropdown */
 .model-menu {
   position: absolute; top: 52px; right: 16px;
-  background: var(--bg-input); border: 1px solid var(--border);
-  border-radius: 12px; padding: 8px; width: 320px; max-height: 360px; overflow-y: auto;
-  box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 200; display: none;
+  background: var(--bg-sidebar); border: 1px solid var(--border);
+  border-radius: 14px; padding: 0; width: 340px; max-height: 440px;
+  box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 200; display: none;
+  flex-direction: column; overflow: hidden;
 }
-.model-menu.open { display: block; }
-.model-menu .group-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; padding: 6px 8px 2px; }
-.model-menu .opt {
-  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text);
+.model-menu.open { display: flex; }
+
+.model-search-wrap {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-sidebar);
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.model-search-input {
+  width: 100%;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 7px 12px;
+  padding-right: 28px;
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+.model-search-input:focus {
+  border-color: var(--accent);
+}
+.btn-clear-model-search {
+  position: absolute;
+  right: 18px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 2px;
+}
+.btn-clear-model-search:hover {
+  color: var(--text);
+}
+
+.model-menu-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px;
+  max-height: 360px;
+}
+.model-menu-list .group-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  padding: 6px 8px 3px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+.model-menu-list .opt {
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 0.12s;
+}
+.model-menu-list .opt:hover { background: var(--bg-hover); }
+.model-menu-list .opt.active { background: var(--bg-hover); color: var(--accent); }
+.model-menu-list .opt .check { color: var(--accent); width: 14px; flex-shrink: 0; font-size: 12px; }
+.model-menu-list .opt .model-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-menu-list .opt .model-id-sub {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-empty {
+  padding: 24px 12px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-dim);
 }
-.model-menu .opt:hover { background: var(--bg-hover); }
-.model-menu .opt.active { background: var(--bg-hover); }
-.model-menu .opt .check { color: var(--accent); margin-right: 6px; }
 
 
 /* ==========================================================================
@@ -942,6 +1021,9 @@ body {
     max-height: calc(100dvh - 70px);
     border-radius: 12px;
   }
+  .model-menu-list {
+    max-height: calc(100dvh - 130px);
+  }
 
   .mobile-toolbar-fab {
     display: flex;