feat(frontend): 构建前端 MVP，实现完整 UI 框架与 mock 数据层
- 安装 zustand + react-router-dom 依赖 - 修复 Vite 代理配置，添加 /auth 路由转发 - 实现 API 封装层（client.ts 统一 fetch、auth.ts 真实调用） - 实现 mock 数据层（mock.ts 模拟 WebSocket 管线进度） - 实现 4 个 zustand stores（auth/project/task/generation） - 实现 5 个组件（StyleSelector/PromptEditor/GenerateForm/ProgressBar/AssetPreview） - 实现 5 个页面（Login/Register/Project/Generate/Result） - 实现路由含 ProtectedRoute 守卫 - 添加暗色主题全局样式 - 更新前端文档与 API 文档
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { useProjectStore } from '../stores/project'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { getTasks } from '../api/project'
|
||||
import type { Task } from '../api/types'
|
||||
import StyleSelector from '../components/StyleSelector'
|
||||
|
||||
const STATUS_LABELS: Record<string, { label: string; color: string }> = {
|
||||
pending: { label: '等待中', color: 'var(--text-muted)' },
|
||||
running: { label: '运行中', color: 'var(--warning)' },
|
||||
completed: { label: '已完成', color: 'var(--success)' },
|
||||
failed: { label: '失败', color: 'var(--error)' },
|
||||
}
|
||||
|
||||
export default function ProjectPage() {
|
||||
const { projectId = 'proj-default' } = useParams()
|
||||
const { user, logout } = useAuthStore()
|
||||
const {
|
||||
name,
|
||||
style,
|
||||
loading,
|
||||
loadProject,
|
||||
loadStyle,
|
||||
updateStyle,
|
||||
saveStyle,
|
||||
} = useProjectStore()
|
||||
const [tasks, setTasks] = useState<Task[]>([])
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadProject(projectId)
|
||||
loadStyle(projectId)
|
||||
getTasks(projectId).then(setTasks)
|
||||
}, [projectId, loadProject, loadStyle])
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
try {
|
||||
await saveStyle()
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
|
||||
{/* 顶栏 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 32,
|
||||
}}
|
||||
>
|
||||
<h1 style={{ fontSize: 24 }}>{loading ? '加载中...' : name}</h1>
|
||||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||
{user?.username}
|
||||
</span>
|
||||
<button className="btn-secondary" onClick={logout} style={{ padding: '6px 16px', fontSize: 13 }}>
|
||||
退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 工程风格 */}
|
||||
<section className="card" style={{ marginBottom: 24 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
<h2 style={{ fontSize: 18 }}>工程风格</h2>
|
||||
<button
|
||||
className="btn-primary"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
style={{ padding: '8px 20px', fontSize: 13 }}
|
||||
>
|
||||
{saving ? '保存中...' : '保存风格'}
|
||||
</button>
|
||||
</div>
|
||||
<StyleSelector value={style} onChange={updateStyle} />
|
||||
</section>
|
||||
|
||||
{/* 任务列表 */}
|
||||
<section className="card">
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
<h2 style={{ fontSize: 18 }}>历史任务</h2>
|
||||
<Link
|
||||
to={`/projects/${projectId}/generate`}
|
||||
className="btn-primary"
|
||||
style={{
|
||||
padding: '8px 20px',
|
||||
fontSize: 13,
|
||||
borderRadius: 'var(--radius)',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
新建生成
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{tasks.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: 32 }}>
|
||||
暂无任务
|
||||
</p>
|
||||
) : (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<th style={thStyle}>提示词</th>
|
||||
<th style={thStyle}>类型</th>
|
||||
<th style={thStyle}>状态</th>
|
||||
<th style={thStyle}>创建时间</th>
|
||||
<th style={thStyle}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tasks.map(task => {
|
||||
const statusInfo = STATUS_LABELS[task.status] ?? STATUS_LABELS.pending
|
||||
return (
|
||||
<tr key={task.id} style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<td style={tdStyle}>{task.prompt}</td>
|
||||
<td style={tdStyle}>{task.assetType}</td>
|
||||
<td style={{ ...tdStyle, color: statusInfo.color }}>{statusInfo.label}</td>
|
||||
<td style={tdStyle}>
|
||||
{new Date(task.createdAt).toLocaleString('zh-CN')}
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
{task.status === 'completed' && (
|
||||
<Link
|
||||
to={`/projects/${projectId}/tasks/${task.id}`}
|
||||
style={{ fontSize: 13 }}
|
||||
>
|
||||
查看结果
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const thStyle: React.CSSProperties = {
|
||||
textAlign: 'left',
|
||||
padding: '10px 12px',
|
||||
fontSize: 13,
|
||||
color: 'var(--text-secondary)',
|
||||
fontWeight: 600,
|
||||
}
|
||||
|
||||
const tdStyle: React.CSSProperties = {
|
||||
padding: '10px 12px',
|
||||
fontSize: 13,
|
||||
}
|
||||
Reference in New Issue
Block a user