From aaf846a60d80212db3ec563011ddce7fc517aa8f Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sun, 24 May 2026 21:23:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(ux):=20=E7=A9=BA=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=BF=E6=8D=A2=E5=90=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=A9=BA=E7=99=BD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 EmptyState 组件，ProjectPage 暂无任务时显示带操作按钮的
友好提示，AssetPreview 暂无素材时显示引导文案。
---
 frontend/src/components/AssetPreview.tsx |  7 ++--
 frontend/src/components/EmptyState.tsx   | 43 ++++++++++++++++++++++++
 frontend/src/pages/ProjectPage.tsx       | 12 ++++---
 3 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/EmptyState.tsx

diff --git a/frontend/src/components/AssetPreview.tsx b/frontend/src/components/AssetPreview.tsx
index 5686d7a..e983f78 100644
--- a/frontend/src/components/AssetPreview.tsx
+++ b/frontend/src/components/AssetPreview.tsx
@@ -1,4 +1,5 @@
 import type { Asset } from '../api/types'
+import EmptyState from './EmptyState'
 
 interface AssetPreviewProps {
   assets: Asset[]
@@ -6,11 +7,7 @@ interface AssetPreviewProps {
 
 export default function AssetPreview({ assets }: AssetPreviewProps) {
   if (assets.length === 0) {
-    return (
-      <div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: 40 }}>
-        暂无素材
-      </div>
-    )
+    return <EmptyState title="暂无素材" description="生成完成后，素材将在这里展示" />
   }
 
   return (
diff --git a/frontend/src/components/EmptyState.tsx b/frontend/src/components/EmptyState.tsx
new file mode 100644
index 0000000..d21c457
--- /dev/null
+++ b/frontend/src/components/EmptyState.tsx
@@ -0,0 +1,43 @@
+interface EmptyStateProps {
+  icon?: string
+  title: string
+  description?: string
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+export default function EmptyState({ icon = '📭', title, description, action }: EmptyStateProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 24px',
+        textAlign: 'center',
+      }}
+    >
+      <span style={{ fontSize: 48, marginBottom: 16, opacity: 0.6 }}>{icon}</span>
+      <h3 style={{ fontSize: 16, color: 'var(--text-secondary)', marginBottom: 8 }}>
+        {title}
+      </h3>
+      {description && (
+        <p style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: action ? 20 : 0 }}>
+          {description}
+        </p>
+      )}
+      {action && (
+        <button
+          className="btn-primary"
+          onClick={action.onClick}
+          style={{ padding: '8px 24px', fontSize: 13 }}
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/pages/ProjectPage.tsx b/frontend/src/pages/ProjectPage.tsx
index 0755997..70c21e6 100644
--- a/frontend/src/pages/ProjectPage.tsx
+++ b/frontend/src/pages/ProjectPage.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import { useProjectStore } from '../stores/project'
 import { getTasks } from '../api/project'
 import type { Task } from '../api/types'
 import StyleSelector from '../components/StyleSelector'
 import Skeleton from '../components/Skeleton'
+import EmptyState from '../components/EmptyState'
 
 const STATUS_LABELS: Record<string, { label: string; color: string }> = {
   pending: { label: '等待中', color: 'var(--text-muted)' },
@@ -15,6 +16,7 @@ const STATUS_LABELS: Record<string, { label: string; color: string }> = {
 
 export default function ProjectPage() {
   const { projectId = 'proj-default' } = useParams()
+  const navigate = useNavigate()
   const {
     name,
     style,
@@ -95,9 +97,11 @@ export default function ProjectPage() {
         </div>
 
         {tasks.length === 0 ? (
-          <p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: 32 }}>
-            暂无任务
-          </p>
+          <EmptyState
+            title="暂无任务"
+            description="点击「新建生成」开始创建你的第一个游戏素材"
+            action={{ label: '新建生成', onClick: () => navigate(`/projects/${projectId}/generate`) }}
+          />
         ) : (
           <table style={{ width: '100%', borderCollapse: 'collapse' }}>
             <thead>