模型与思考强度选择
Model / Effort Selector
让用户选择本次任务使用的模型或推理强度。
选择控件，不在此切换真实模型。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'model-selector'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
产品确实提供这些选项，且用户能理解能力与成本差异。
什么时候不用
没有可选后端时不要展示无法兑现的模型菜单。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "示例模型" |
name | "model" |
value | "fast" |
items | [{"value":"fast","label":"模型 A：快速回答"},{"value":"deep","label":"模型 B：复杂任务"}] |
disabled | false |
note | "选择控件，不在此切换真实模型。" |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 当前值与菜单名称可读。
- 用单选语义表达互斥选择，支持键盘关闭菜单。
和相似组件的区别
模型选择改变运行配置；工具选择改变请求使用的能力，两者都需要后端兑现。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Web Components · 来源核验