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:
@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user