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

新增 toast store 和 Toast 组件，风格保存成功/失败显示 toast，
素材生成失败显示 toast，Layout 中全局渲染。

frontend/src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { Link, Outlet } from 'react-router-dom'
 import { useAuthStore } from '../stores/auth'
 import { useThemeStore } from '../stores/theme'
+import ToastContainer from './Toast'
 
 export default function Layout() {
   const { user, logout } = useAuthStore()
@@ -59,6 +60,7 @@ export default function Layout() {
       <main>
         <Outlet />
       </main>
+      <ToastContainer />
     </>
   )
 }

frontend/src/components/Toast.module.css

@@ -0,0 +1,70 @@
+.container {
+  position: fixed;
+  top: 72px;
+  right: 24px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  background: var(--toast-bg);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+  color: var(--text-primary);
+  font-size: 13px;
+  min-width: 240px;
+  max-width: 380px;
+  pointer-events: auto;
+  animation: slideIn 0.3s ease;
+}
+
+.toastSuccess {
+  composes: toast;
+  border-left: 4px solid var(--success);
+}
+
+.toastError {
+  composes: toast;
+  border-left: 4px solid var(--error);
+}
+
+.toastInfo {
+  composes: toast;
+  border-left: 4px solid var(--accent);
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 16px;
+  padding: 2px 4px;
+  line-height: 1;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+
+.closeBtn:hover {
+  color: var(--text-primary);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

frontend/src/components/Toast.tsx

@@ -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>
+  )
+}