Back to Aionui

对话 - 模型选择器(父级 + 二级子菜单)

docs/prds/conversations/model-selector.md

2.1.337.5 KB
Original Source

对话 - 模型选择器(父级 + 二级子菜单)

本文档聚焦「模型选择器」的下拉交互重构。 涉及范围:对话面板(单聊 + 群聊,含 Claude/Codex 等 ACP 平台与 Aion CLI/aionrs 平台)以及首页新建对话页的模型选择器。不改后端,全部在渲染层完成。


背景与目标

现状:模型选择器承载两组配置——「模型」和「推理强度」(thought level / reasoning effort)。当前下拉把两组竖着堆在同一个菜单里(上面一组推理强度,分隔线,下面一组模型)。

问题:当模型列表很长时,加上推理强度那一组,整个下拉菜单被撑得很长,需要大量滚动,不好用。模型越多越明显。

目标:把下拉改成一级菜单 + 二级子菜单的结构。一级菜单永远只有两行(模型、推理强度),各组的完整选项收进各自的二级子菜单(hover 展开)。这样无论模型多少,一级菜单都不会被撑长。

名词说明

  • 模型选择器:对话输入区/面板右上角,显示当前模型与推理强度的按钮(pill),点击展开下拉。
  • 推理强度:部分 Agent 支持的思考程度配置(如 轻度 / 中 / 高 / 极高)。并非所有 Agent 都有。
  • 一级菜单 / 二级子菜单:点击 pill 后先看到的是一级菜单;hover 一级菜单某行后,在其一侧弹出的是二级子菜单。

(F-MODEL-01) 只有模型、无推理强度 → 保持现状 [不变]

用户故事:作为使用不支持推理强度的 Agent 的用户,我点击模型选择器时希望直接看到模型列表,简单直接。

正常流程(用户视角):

  1. 点击 pill,下拉直接展开模型列表(无一级/二级结构)。
  2. 选中某个模型即切换,当前模型打勾。

验收标准

  • 无推理强度的 Agent,下拉直接是模型列表,交互与当前版本一致。
  • 模型数量超过阈值时,列表顶部出现搜索框(见 F-MODEL-04)。

(F-MODEL-02) 有模型 + 推理强度 → 一级菜单两行 [新增]

用户故事:作为使用支持推理强度的 Agent 的用户,我点开选择器时希望先看到简洁的两行概览,而不是一长串选项。

正常流程(用户视角):

  1. 点击 pill,一级菜单展开,只有两行,自上而下:
    • 模型:右侧显示当前模型名 + 箭头。
    • 推理强度:右侧显示当前强度 + 箭头。
  2. 顺序固定为模型在上、推理强度在下,与 pill 上「模型 · 推理强度」的显示顺序一致。
  3. hover(或点击)任一行,在其一侧弹出对应的二级子菜单。

验收标准

  • 有推理强度时,一级菜单固定两行,模型在上、推理强度在下。
  • 每行显示对应的当前值和 箭头。
  • hover 一级菜单某行时该行高亮并弹出二级子菜单。
  • 一级菜单高度不随模型数量变化。

(F-MODEL-03) 二级子菜单:选项列表 [新增]

用户故事:作为用户,我 hover 到「模型」或「推理强度」后,希望在弹出的子菜单里看到完整选项并选择。

正常流程(用户视角):

  1. hover(或点击)「模型」→ 弹出模型列表;「推理强度」→ 弹出强度列表。
  2. 每个选项:当前选中项左侧打 ✓。选项若带说明,通过 hover Tooltip 展示(并非所有选项都有说明,用 Tooltip 保持列表对齐整齐,不做参差的副标题)。
  3. 点击某选项即切换,pill 与一级菜单的当前值同步更新。

弹出方向

  • 子菜单默认往弹出(模型选择器位于对话面板右上角,右侧空间不足)。
  • 当左侧空间也不足时,自动翻向可容纳的一侧。

验收标准

  • hover 或点击一级行弹出对应二级子菜单,内容正确。
  • 当前项打 ✓,有说明的选项通过 hover Tooltip 展示,列表保持对齐。
  • 点击选项即切换并同步 pill / 一级菜单显示。
  • 子菜单默认向左弹出,空间不足时自动翻向另一侧,不被窗口边缘截断。

(F-MODEL-04) 模型二级子菜单:搜索 + 固定高度滚动 [新增]

用户故事:作为模型很多的用户,我希望能在子菜单里搜到目标模型,并且列表再长也不会撑爆屏幕。

正常流程(用户视角):

  1. 模型二级子菜单在**模型数量超过阈值(5 个)**时,顶部显示搜索框。
  2. 输入关键字即时过滤模型(按模型名匹配,忽略大小写)。
  3. 模型列表有固定最大高度,超出时在子菜单内部滚动,不影响菜单整体尺寸。
  4. 无匹配结果时给出空状态提示。

范围一致性

  • 搜索能力跟随「模型列表」本身,而非「是否有二级菜单」。即无推理强度时(F-MODEL-01 的直接列表)同样按阈值显示搜索框,两种情况逻辑一致。
  • 推理强度选项通常很少,不加搜索

验收标准

  • 模型数 > 5 时,模型列表顶部显示搜索框;≤ 5 不显示。
  • 输入即时过滤,按模型名忽略大小写匹配。
  • 模型列表固定最大高度 + 内部滚动,菜单整体尺寸不被撑大。
  • 无匹配时显示空状态。
  • F-MODEL-01 的直接模型列表遵循同一搜索显示规则。

(F-MODEL-05) 各入口场景一致 [新增]

用户故事:作为用户,我希望不管在哪里选模型,交互都一致。

覆盖入口

  • ACP 平台(Claude / Codex 等)单聊与群聊 —— 扁平模型列表。
  • 首页新建对话页 —— ACP agent 扁平模型列表;aionrs 走 provider 分组(见 F-MODEL-06)。
  • Aion CLI(aionrs)平台 —— 见 F-MODEL-06(模型按 provider 分组)。

正常流程(用户视角):

  1. 各入口共用同一套一级/二级菜单结构、搜索/滚动逻辑与向左弹出方向。
  2. 位于面板右上角的选择器,二级子菜单一律向左弹出。

验收标准

  • ACP 单聊、群聊、首页三处交互一致。
  • 二级子菜单弹出方向正确、不被窗口边缘截断。

(F-MODEL-06) Aion CLI 平台:模型按 provider 分组 [新增]

用户故事:作为使用 Aion CLI 的用户,我的模型是按 provider(如 Anthropic / OpenAI)组织的,我希望在二级子菜单里仍按 provider 分组查看,同时能搜索。

正常流程(用户视角):

  1. 一级/二级结构与其它入口一致:一级两行(模型、推理强度),hover 弹出二级。
  2. 模型二级子菜单里保留 provider 分组标题(不显示健康状态圆点,各入口样式统一)。
  3. 顶部搜索框跨所有分组过滤模型名;只显示有命中的分组,无命中时显示空状态。
  4. 搜索框按总模型数超过阈值时显示。

验收标准

  • Aion CLI 模型二级子菜单按 provider 分组(不显示健康圆点)。
  • 搜索跨分组过滤,仅显示命中的分组,无命中显示空状态。
  • 一级两行结构与向左弹出与其它入口一致。

待讨论模块

  • 搜索组件复用:搜索框计划复用已抽离的 AionInlineSearchInput(下拉列表专用轻量搜索框,见 PR #3532)。开发时该组件尚未合并到主干,已按其相同接口内联一份等价组件(同名同路径),待 #3532 合并后可直接合并、无需改调用方。
  • 搜索阈值:当前定为模型数 > 5 才显示搜索框。后续可根据反馈调整。