feat(ux): Toast 通知系统,替换内联错误/成功提示

新增 toast store 和 Toast 组件,风格保存成功/失败显示 toast,
素材生成失败显示 toast,Layout 中全局渲染。
This commit is contained in:
2026-05-24 21:26:19 +08:00
parent aaf846a60d
commit e880a80c51
6 changed files with 153 additions and 0 deletions
+32
View File
@@ -0,0 +1,32 @@
import { useToastStore } from '../stores/toast'
import type { ToastType } from '../stores/toast'
import styles from './Toast.module.css'
const TYPE_CLASS: Record<ToastType, string> = {
success: styles.toastSuccess,
error: styles.toastError,
info: styles.toastInfo,
}
export default function ToastContainer() {
const { toasts, removeToast } = useToastStore()
if (toasts.length === 0) return null
return (
<div className={styles.container}>
{toasts.map((t) => (
<div key={t.id} className={TYPE_CLASS[t.type]}>
<span>{t.message}</span>
<button
className={styles.closeBtn}
onClick={() => removeToast(t.id)}
aria-label="关闭"
>
×
</button>
</div>
))}
</div>
)
}