36 lines
1.6 KiB
Markdown
36 lines
1.6 KiB
Markdown
# 模型下拉选中标记对齐经验
|
||
|
||
更新日期：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` 标签和勾选图标应位于同一视觉行。
|