toast.md
组件 · COMPONENT

轻提示 Toast

深墨胶囊，从下方浮起，1.8 秒后消失。它不可点，所以可以是胶囊。文案说结果，不说过程：「已保存到你的笔记库」。

来源提炼自 AdmDesign 样张 · ui 为源源Feedback.jsx源extracted.css机读components/toast.md
点一下试试
import { useRef, useState } from 'react'
import { Toast } from './extracted/Feedback.jsx'
import { Btn } from './components/v4/Button.jsx'

export default function ToastDemo() {
  const [show, setShow] = useState(false)
  const timer = useRef(null)
  const fire = () => {
    clearTimeout(timer.current)
    setShow(false)
    requestAnimationFrame(() => setShow(true))
    timer.current = setTimeout(() => setShow(false), 1800)
  }
  return (
    <div style={{ position: 'relative', width: '100%', minHeight: 112, display: 'grid', placeItems: 'center' }}>
      <Btn onClick={fire}>保存笔记</Btn>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
        {show ? <Toast>✓ 已保存到你的笔记库</Toast> : null}
      </div>
    </div>
  )
}
静态样式
✓ 已保存到你的笔记库
import { Toast } from './extracted/Feedback.jsx'

export function Static() {
  return <Toast>✓ 已保存到你的笔记库</Toast>
}

定位的坑

.zzm-toast 带 zzmUp 进场动画，动画结束帧是 transform: none——如果你用 left 50% 加 translateX(-50%) 居中，动画会把 transform 覆盖掉，提示就偏到右边去了。用外层 flex 居中：

正确的居中方式
<div style="position:fixed;left:0;right:0;bottom:24px;display:flex;justify-content:center;pointer-events:none">
  <div class="zzm-toast" role="status">✓ 已保存到你的笔记库</div>
</div>

铁律

✓ 要说结果：「已保存」「已复制」「已删除」
✗ 不要说过程或道歉：「操作成功！」「抱歉，出错了」
✓ 要1.8 秒自动消失；出错要让人处理时用确认窗或内联错误