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
+9
View File
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useTaskStore } from '../stores/task'
import { useGenerationStore } from '../stores/generation'
import { useToastStore } from '../stores/toast'
import GenerateForm from '../components/GenerateForm'
import ProgressBar from '../components/ProgressBar'
@@ -9,6 +10,7 @@ export default function GeneratePage() {
const { projectId = 'proj-default' } = useParams()
const navigate = useNavigate()
const { assetType, reset: resetTask } = useTaskStore()
const addToast = useToastStore(s => s.addToast)
const {
status,
stage,
@@ -25,6 +27,13 @@ export default function GeneratePage() {
return () => resetGeneration()
}, [resetGeneration])
// 失败时显示 toast
useEffect(() => {
if (status === 'failed') {
addToast({ type: 'error', message: '素材生成失败,请重试' })
}
}, [status, addToast])
// 完成后自动跳转
useEffect(() => {
if (status === 'completed' && taskId) {
+6
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { useProjectStore } from '../stores/project'
import { useToastStore } from '../stores/toast'
import { getTasks } from '../api/project'
import type { Task } from '../api/types'
import StyleSelector from '../components/StyleSelector'
@@ -35,10 +36,15 @@ export default function ProjectPage() {
getTasks(projectId).then(setTasks)
}, [projectId, loadProject, loadStyle])
const addToast = useToastStore(s => s.addToast)
const handleSave = async () => {
setSaving(true)
try {
await saveStyle()
addToast({ type: 'success', message: '风格已保存' })
} catch {
addToast({ type: 'error', message: '保存失败,请重试' })
} finally {
setSaving(false)
}