TrueGrowth/docs/MODEL_DROPDOWN_ALIGNMENT_LESSONS.md

模型下拉选中标记对齐经验

更新日期：2026-04-26

背景

模型选择下拉列表里，模型名、NEW 标签、健康状态、价格等信息位于首行，模型描述位于第二行。选中模型时，勾选图标显示在列表项右侧。

问题表现

• 带 NEW 标签的模型被选中后，右侧勾选图标按整条 item 高度居中。
• 当模型有描述文本时，item 高度变成两行，勾选图标会落在首行和描述之间。
• 视觉上 NEW 和勾选图标不在同一行，像是两个状态分裂展示。

根因

列表项容器使用横向 flex，并设置 align-items: center。这对单行 item 合理，但双行内容会让右侧状态图标按完整高度居中，而不是按模型名首行对齐。

修复思路

• 不改组件结构，不新增 wrapper，不改变模型列表数据流。
• 只调整 .model-dropdown__item-check 的自身对齐方式，让勾选图标贴近首行。
• 保留描述文本、健康状态、benchmark、价格等现有布局关系，降低回归面。

经验规则

• 双行列表项的右侧状态图标，不应默认继承父级 align-items: center。
• 如果状态表达的是“当前模型项被选中”，视觉锚点应优先对齐模型名首行，而不是整块 item 中线。
• 小 UI 瑕疵优先用局部 CSS 修正，避免为纯对齐问题新增结构层。
• 修复下拉项布局时，要同时检查：单行模型、双行描述、NEW 标签、价格标签、健康状态和深色主题。

验证

• git diff --check
• 人工检查选中项：NEW 标签和勾选图标应位于同一视觉行。