feat(ux): Toast 通知系统,替换内联错误/成功提示
新增 toast store 和 Toast 组件,风格保存成功/失败显示 toast, 素材生成失败显示 toast,Layout 中全局渲染。
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user