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

更新日期：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` 标签和勾选图标应位于同一视觉行。