feat(menu): Avatar 领头的菜单行纳入前导图标列约定 - #27
Conversation
menu-item 的前导图标 grid 约定此前只认 svg/img,Avatar(span)领头 的行留在 flex+padding 几何里,与图标行存在 3px 错位(实测账户菜单 Team 子菜单:团队头像 x=232 vs 图标 x=229)。把 [data-slot="avatar"] 并入两条选择器,使头像行共享同一前导列、行高与文字列。 影响面:所有 Avatar 领头的菜单行都会进入该约定(图标居中于前导 列、文字列对齐),不只是账户菜单。
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fd22b9c792
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .menu-item:has(> :is(svg, img, [data-slot="avatar"]):first-child), | ||
| .menu-item:has(> [data-slot="select-item-text"] > :is(svg, img):first-child) { |
There was a problem hiding this comment.
When an Avatar is supplied to <SelectItem>, SelectItem.vue wraps the slot inside [data-slot="select-item-text"], so the changed direct-child branch cannot match and the nested branches still accept only svg/img. Those Avatar-leading Select rows therefore retain the old flex padding and 32px Avatar instead of receiving the new grid column and 16px sizing; add Avatar to the three nested SelectItemText selector lists as well.
Useful? React with 👍 / 👎.
| .menu-item > :is(svg, img, [data-slot="avatar"]):first-child, | ||
| .menu-item > [data-slot="select-item-text"] > :is(svg, img):first-child { | ||
| /* Menu geometry overrides legacy size/margin utilities at call sites. */ | ||
| width: var(--menu-leading-icon-size) !important; |
There was a problem hiding this comment.
This globally changes a menu-leading Avatar from its normally overridable 32px size to the 16px menu-icon token via !important, establishing a new cross-cutting sizing exception. Without documenting Avatar under the menu-leading contract, callers cannot know their explicit Avatar size classes are intentionally ignored and are likely to fight the rule; update the design contract alongside this selector as required.
AGENTS.md reference: AGENTS.md:L856-L861
Useful? React with 👍 / 👎.
1 participant
改动
menu-item的前导图标 grid 约定(首子元素为图标时转为 grid,图标居中于--menu-item-leading-size前导列、行高与文字列统一)此前只认svg/img。把[data-slot="avatar"]并入两条选择器,Avatar 领头的菜单行进入同一约定。动机(实测,Memoh-Cloud 账户菜单 Team 子菜单):团队行首元素是 Avatar(span),留在 flex+padding 几何里,与走 grid 的图标行错位 3px(头像 x=232 vs 图标 x=229);改动后头像与图标同列居中(均 x=229),文字列对齐(均 x=254)。
影响面
所有 Avatar 领头的菜单行都会进入该约定,不只是账户菜单。若有调用方依赖头像行不换 grid 的旧几何(如自定义列宽/行高),需复查。
验证
Memoh-Cloud dev 预览实测对齐前后几何(getBoundingClientRect)并截图确认;未跑组件墙与其他含 Avatar 菜单的页面。