跳到主要内容

修复 Toast top-center 定位下 Message 形态水平偏左（WEB-1105）

版本： 0.5.0 · 类型： 🐛 缺陷修复

WEB-1105

问题​

Toaster position="top-center" 时，Message 形态（w-fit）的 toast 呈现左对齐而非居中。Alert 形态（w-[420px]，撑满容器宽度）看似正常，掩盖了根本问题。

根本原因： <ol> 容器通过 left: 50% + translateX(-50%) 正确居中于屏幕。但 <li> 使用 position: absolute 且未指定 left，浏览器将其放置在容器左边缘。对于宽度小于容器的 w-fit Message toast，出现明显的左偏。

曾尝试给 <li> 添加 left: 50%，但引入新问题：position: absolute 元素的 left: 50% 会将可用宽度压缩为 容器宽度 - left 偏移，导致 w-fit toast 从 420 px 缩减至 210 px。

改动文件​

  • packages/design/src/components/Toast/ToastItem.tsx
  • packages/design/src/components/Toast/Toaster.tsx
  • packages/design/src/components/Toast/__tests__/Toast.test.tsx

改动内容​

  1. ToastItemProps 新增 align?: 'left' | 'center' | 'right'（默认 'left'，向后兼容）。
  2. center 模式下，<li> 保持 left: 0（保留完整 420 px 可用宽度），在 transform 中使用 translateX(calc(210px - 50%))。固定值 210px 为 TOAST_WIDTH 的一半，50% 为元素自身宽度的一半，两者组合实现在容器内居中且不压缩宽度。
  3. Toaster 将解析后的 align 值传递给 ToastItem。
  4. 新增 3 条单测，覆盖 left / center / right 三种对齐模式。