模型切换控件
摘要
在同时支持多个大语言模型（LLM）的应用中，模型切换控件是用户与系统交互的第一入口。它的设计质量直接影响用户对系统能力的认知：控件放在哪里、以什么形态呈现、切换后如何反馈状态，决定了用户能否快速、准确地选择到合适的模型。本文从交互位置设计、控件形态选型、状态反馈机制、并发与竞态处理、状态持久化与可访问性等维度，系统性地讨论模型切换控件的工程实现，并给出基于 React + TypeScript 的完整可运行代码示例。
引言
早期的 AI 应用往往只接入一个模型，界面上的“模型”概念是隐式的。但随着多模型路由（如同时接入 GPT、Claude、本地部署模型）成为常态，用户需要在不同能力、不同成本、不同延迟的模型之间做选择。此时，模型切换控件承担了三项职责：
- 暴露选择空间：让用户知道当前有哪些模型可用，以及各自的特性（上下文长度、是否支持视觉、计费倍率等）。
- 承载切换动作：提供低摩擦的切换路径，避免用户在多级菜单中迷路。
- 反馈切换结果：明确告知用户“当前生效的是哪个模型”“切换是否成功”“切换中发生了什么”。
很多实现只做到了第 2 点，忽略了第 1 和第 3 点，导致用户经常在错误的模型上提问，或者在切换尚未完成时发出请求，得到意料之外的结果。本文将以一个可运行的示例为主线，逐层拆解这些问题。
正文
一、控件的位置：放在哪里才合理
模型切换控件的位置不是随意决定的，它取决于切换的频率和切换对当前会话的影响范围。
常见的三种位置方案：
| 位置 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 输入框上方/内部（Composer 区域） | 切换频繁、按对话粒度选择 | 与发送动作距离近，心智负担低 | 占用输入区空间 |
| 顶部导航栏（Header） | 全局默认模型设置 | 全局可见，位置稳定 | 距离输入区远，切换成本高 |
| 侧边栏 / 设置面板 | 模型数量多、需要展示详细参数 | 可承载丰富信息 | 需要额外点击展开 |
实践中更推荐组合方案：在 Composer 区域放置一个紧凑的切换入口（高频操作），在设置面板中提供完整的模型管理（低频操作）。两者的状态需要共享同一份数据源。
下面是一个布局层面的示意实现，展示如何把切换控件锚定在输入区，同时保持与全局状态的联动：
// ModelSwitcherBar.tsx // 将模型切换控件放置在输入区上方，作为高频入口 import React from 'react'; import { ModelSelect } from './ModelSelect'; import { useModelStore } from './modelStore'; export function ModelSwitcherBar() { const { currentModelId, models, status, switchModel } = useModelStore(); return ( <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 12px', borderBottom: '1px solid #e5e7eb', background: '#fafafa', }} > {/* 左侧：模型选择器 */} <ModelSelect models={models} value={currentModelId} disabled={status === 'switching'} onChange={switchModel} /> {/* 右侧：切换状态提示，详见第三节 */} <SwitchStatusHint status={status} /> </div> ); } function SwitchStatusHint({ status }: { status: string }) { if (status === 'switching') { return <span style={{ color: '#2563eb', fontSize: 12 }}>切换中…</span>; } if (status === 'error') { return <span style={{ color: '#dc2626', fontSize: 12 }}>切换失败</span>; } return null; }关键设计点：控件位置决定了它的视觉权重。放在输入区上方意味着它会被频繁看到，因此必须保持紧凑（高度不超过 40px），详细参数应放到悬浮面板或设置页中，避免主界面信息过载。
二、控件形态：下拉、分段控件还是命令面板
形态选择取决于模型数量：
- 2～3 个模型：分段控件（Segmented Control）最优，一次点击即可切换，且当前选中态一目了然。
- 4～10 个模型：下拉选择器（Select / Combobox）更合适，配合搜索过滤。
- 10 个以上或需要按能力筛选：命令面板（Command Palette）或带分组的下拉列表。
无论哪种形态，列表项都应携带决策所需的信息，而不仅仅是一个名字。用户选择模型时真正关心的是：上下文窗口、是否支持图片、响应速度、成本倍率。
下面是一个带元信息展示的下拉选择器实现：
// ModelSelect.tsx // 带元信息与搜索过滤的模型选择器 import React, { useMemo, useState } from 'react'; import type { ModelInfo } from './types'; interface Props { models: ModelInfo[]; value: string; disabled?: boolean; onChange: (id: string) => void; } export function ModelSelect({ models, value, disabled, onChange }: Props) { const [open, setOpen] = useState(false); const [keyword, setKeyword] = useState(''); const current = models.find((m) => m.id === value); const filtered = useMemo(() => { const kw = keyword.trim().toLowerCase(); if (!kw) return models; return models.filter( (m) => m.name.toLowerCase().includes(kw) || m.provider.toLowerCase().includes(kw) || m.tags.some((t) => t.toLowerCase().includes(kw)) ); }, [models, keyword]); return ( <div style={{ position: 'relative' }}> <button type="button" disabled={disabled} onClick={() => setOpen((v) => !v)} aria-haspopup="listbox" aria-expanded={open} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 8, border: '1px solid #d1d5db', background: disabled ? '#f3f4f6' : '#fff', cursor: disabled ? 'not-allowed' : 'pointer', minWidth: 180, }} > <span style={{ fontWeight: 600 }}>{current?.name ?? '选择模型'}</span> {current?.supportsVision && <Badge>视觉</Badge>} <span style={{ marginLeft: 'auto' }}>▾</span> </button> {open && ( <div role="listbox" style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, width: 320, background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.08)', zIndex: 50, padding: 8, }} > <input autoFocus value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="搜索模型、厂商或标签" style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1px solid #e5e7eb', borderRadius: 6, marginBottom: 6, }} /> {filtered.map((m) => ( <div key={m.id} role="option" aria-selected={m.id === value} onClick={() => { onChange(m.id); setOpen(false); setKeyword(''); }} style={{ padding: '8px 10px', borderRadius: 6, cursor: 'pointer', background: m.id === value ? '#eff6ff' : 'transparent', }} > <div style={{ display: 'flex', justifyContent: 'space-between' }}> <strong>{m.name}</strong> <span style={{ color: '#6b7280', fontSize: 12 }}>{m.provider}</span> </div> <div style={{ fontSize: 12, color: '#6b7280', marginTop: 2 }}> 上下文 {(m.contextWindow / 1000).toFixed(0)}K · 延迟 {m.latencyHint} ·{' '} {m.supportsVision ? '支持图片' : '仅文本'} </div> </div> ))} {filtered.length === 0 && ( <div style={{ padding: 12, color: '#9ca3af', fontSize: 13 }}>无匹配模型</div> )} </div> )} </div> ); } function Badge({ children }: { children: React.ReactNode }) { return ( <span style={{ fontSize: 11, padding: '1px 6px', borderRadius: 999, background: '#dbeafe', color: '#1d4ed8', }} > {children} </span> ); }配套的类型定义：
// types.tsexportinterfaceModelInfo{id:string;name:string;provider:string;contextWindow:number;// 上下文窗口（token）supportsVision:boolean;// 是否支持图片输入latencyHint:string;// 延迟档位描述，如 "快" / "中" / "慢"tags:string[];// 用于搜索的标签}三、切换后的状态反馈：三态模型
切换模型往往涉及一次异步操作（校验可用性、加载配置、建立连接）。如果界面在点击瞬间就把选中态改掉，用户会误以为已经生效；如果完全不反馈，用户又不知道操作是否被接收。正确的做法是引入显式的三态模型：
idle：当前模型已生效，界面展示稳定选中态。switching：切换请求已发出，控件进入禁用或加载态，同时保留“旧模型”作为视觉锚点。error：切换失败，回滚到旧模型，并给出可重试的提示。
这里有一个容易被忽略的细节：切换中是否应该允许发送消息。推荐做法是：切换期间禁用发送按钮，或明确提示“切换完成后可发送”，避免请求被路由到不确定的模型。
以下是状态机的核心实现：
// modelStore.ts// 使用轻量的外部 store + useSyncExternalStore，避免引入额外依赖import{useSyncExternalStore}from'react';importtype{ModelInfo}from'./types';typeSwitchStatus='idle'|'switching'|'error';interfaceState{models:ModelInfo[];currentModelId:string;// 已生效的模型pendingModelId:string|null;// 切换目标status:SwitchStatus;errorMessage:string|null;}constlisteners=newSet<()=>void>();letstate:State={models:[{id:'gpt-fast',name:'Fast-8B',provider:'OpenAI',contextWindow:128000,supportsVision:false,latencyHint:'快',tags:['通用','低成本'],},{id:'claude-pro',name:'Claude-Pro',provider:'Anthropic',contextWindow:200000,supportsVision:true,latencyHint:'中',tags:['长文本','视觉'],},{id:'local-qwen',name:'Qwen-Local',provider:'Self-hosted',contextWindow:32000,supportsVision:false,latencyHint:'慢',tags:['私有部署','离线'],},],currentModelId:'gpt-fast',pendingModelId:null,status:'idle',errorMessage:null,};functionsetState(patch:Partial<State>){state={...state,...patch};listeners.forEach((l)=>l());}functionsubscribe(listener:()=>void){listeners.add(listener);return()=>listeners.delete(listener);}functiongetSnapshot(){returnstate;}// 模拟后端校验：真实场景中替换为接口调用asyncfunctionvalidateModel(id:string):Promise<void>{awaitnewPromise((resolve)=>setTimeout(resolve,800));if(id==='local-qwen'&&!navigator.onLine){thrownewError('本地模型服务不可达');}}exportasyncfunctionswitchModel(nextId:string){if(nextId===state.currentModelId)return;constprevId=state.currentModelId;setState({status:'switching',pendingModelId:nextId,errorMessage:null});try{awaitvalidateModel(nextId);setState({currentModelId:nextId,pendingModelId:null,status:'idle',errorMessage:null,});}catch(err){// 失败时回滚：currentModelId 从未被修改，天然保持一致setState({currentModelId:prevId,pendingModelId:null,status:'error',errorMessage:errinstanceofError?err.message:'未知错误',});}}exportfunctionuseModelStore(){consts=useSyncExternalStore(subscribe,getSnapshot,getSnapshot);return{...s,switchModel};}注意currentModelId在切换成功前从不被修改，这保证了任何读取该字段的组件（如消息气泡上的“由 xx 模型生成”标签）不会出现视觉抖动。
四、并发与竞态：快速连点如何不翻车
用户可能在切换尚未完成时再次点击另一个模型。如果不做处理，晚到的响应可能覆盖早到的响应，导致最终生效的模型与用户最后一次选择不一致。这是典型的竞态条件。
处理方式有两种：
- 请求序号（Sequence Token）：每次切换递增一个序号，响应返回时校验序号是否仍是最新，不是则丢弃。
- 取消前序请求：使用
AbortController中止上一次校验。
两者可以结合使用。下面是加上序号保护的版本：
// modelStore.ts（竞态保护片段）letswitchSeq=0;exportasyncfunctionswitchModel(nextId:string){if(nextId===state.currentModelId)return;constseq=++switchSeq;constprevId=state.currentModelId;setState({status:'switching',pendingModelId:nextId,errorMessage:null});try{awaitvalidateModel(nextId);// 若期间又发起了新的切换，则本次结果作废if(seq!==switchSeq)return;setState({currentModelId:nextId,pendingModelId:null,status:'idle',errorMessage:null,});}catch(err){if(seq!==switchSeq)return;setState({currentModelId:prevId,pendingModelId:null,status:'error',errorMessage:errinstanceofError?err.message:'未知错误',});}}同时，控件在switching状态下应禁用（如第二节代码中的disabled={status === 'switching'}），从交互层减少并发发生的概率；序号保护则是数据层的兜底。两层防护缺一不可——仅靠禁用 UI 无法覆盖快捷键、程序化调用等路径。
五、状态持久化与可访问性
持久化方面，用户选择的模型通常需要在刷新后保留。推荐按“用户级默认 + 会话级覆盖”两级存储：localStorage保存用户默认模型，会话对象中保存当前会话使用的模型。加载时优先读会话级，其次读用户默认，最后回退到服务端下发的首个可用模型。
// persistence.tsconstKEY='app.defaultModelId';exportfunctionloadDefaultModelId():string|null{try{returnlocalStorage.getItem(KEY);}catch{// 隐私模式等场景下 localStorage 可能抛错returnnull;}}exportfunctionsaveDefaultModelId(id:string){try{localStorage.setItem(KEY,id);}catch{/* 忽略写入失败，不影响主流程 */}}// 在 store 初始化时合并：// const preferred = loadDefaultModelId();// currentModelId = models.some(m => m.id === preferred) ? preferred! : models[0].id;注意要校验持久化的 ID 是否仍在可用模型列表中——模型下线是常态，直接信任本地存储会导致界面显示一个已不存在的模型。
可访问性方面，自定义下拉必须补齐语义：
- 触发器使用
aria-haspopup="listbox"与aria-expanded； - 列表容器使用
role="listbox"，选项使用role="option"与aria-selected； - 支持键盘操作：
↑/↓移动高亮项，Enter确认，Esc关闭并把焦点还给触发器； - 切换成功或失败时，通过
aria-live="polite"区域播报结果，让读屏用户也能感知状态变化。
// LiveAnnouncer.tsx // 切换结果的读屏播报 import React from 'react'; import { useModelStore } from './modelStore'; export function LiveAnnouncer() { const { status, currentModelId, models, errorMessage } = useModelStore(); let message = ''; if (status === 'idle') { const name = models.find((m) => m.id === currentModelId)?.name; message = name ? `当前模型已切换为 ${name}` : ''; } else if (status === 'error') { message = `模型切换失败：${errorMessage ?? '请重试'}`
