F2.15.2one component, several container layouts设计
同一组件在不同容器宽度下可复用不同布局
别名: 组件内部变体 · container variants
概念解释
评论框在宽模态里：附件、表情、发送排成一行；在右栏里：三个控件叠起来。这是同一个组件，按自己的宽换内部模板，不是 CommentWide 和 CommentCompact 两个组件，也不是父级传来一个容易过期的 variant="compact"。容器一窄，自己改排。
容器查询提供了量尺；这一张说的是复用账：布局变体住在组件里，随可用宽切换。
机制
父级传变体，变体和真实宽度会脱节：分屏一拖，右栏从 420 变 280，父级还以为是 regular。组件自问宽度，模板（堆叠 / 横排、藏 meta、按钮变图标）跟真实空间走。复用的是这一份实现，不是「看起来差不多的两份代码」。
变体仍应少。内部两到三种结构够覆盖绝大多数槽；再多，邻近的卡会在自动填充网格里各长一张脸。那是过度细分的问题。
边界
完全不同的任务（编辑器 vs 只读引用）不该靠宽度变体硬兼，那是两个组件。服务端渲染若拿不到容器宽，首屏可能闪一下再切换，需要默认态（通常偏窄、不溢出）。邮件、PDF 等固定页宽的输出没有「容器在变」，变体也用不上。
怎么落地
- 列出该组件需要的内部结构（横排、堆叠、只留图标），把切换点写在组件内部，调用方只负责给它一个有宽度的槽。
- 删除调用方的
size/compact属性，除非它表达的是语义（强调级）而不是宽度。 - 验证：不改窗口，只拖开分屏或改网格列数。组件应自己换模板。若必须改父级传入的字符串才换，复用还绑在调用方。再在同一页放两个槽，确认两份互不干扰——窄的那份堆叠时，宽的那份仍是横排。