chore(frontend): 新增全局 Toast 通知组件与入场动画

components/ui/Toast.tsx:
- Context + Provider 模式,全局可用 useToast() hook
- 支持 success / error / info 三种类型,颜色自动适配
- 3.5s 自动消失,支持手动关闭
- 固定右下角渲染,z-[9999]

index.css:
- 新增 @keyframes slide-in 右侧滑入动画
This commit is contained in:
2026-08-04 17:30:17 +08:00
parent 2b5e3ae4c3
commit 8fcb33ab5e
2 changed files with 118 additions and 0 deletions

View File

@ -34,3 +34,22 @@ body {
width: 0;
height: 0;
}
/* ============================================================
Toast 动画
============================================================ */
@keyframes slide-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in {
animation: slide-in 0.3s ease-out;
}