108 lines
4.7 KiB
TypeScript
108 lines
4.7 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { Project, ProjectMember, Issue, Milestone, PaginatedResponse } from '@/types'
|
|
import dayjs from 'dayjs'
|
|
|
|
export default function ProjectDetailPage() {
|
|
const { id } = useParams()
|
|
const navigate = useNavigate()
|
|
const [project, setProject] = useState<Project | null>(null)
|
|
const [members, setMembers] = useState<ProjectMember[]>([])
|
|
const [issues, setIssues] = useState<Issue[]>([])
|
|
const [milestones, setMilestones] = useState<Milestone[]>([])
|
|
const [editing, setEditing] = useState(false)
|
|
const [editForm, setEditForm] = useState({ name: '', description: '', repo: '' })
|
|
|
|
useEffect(() => {
|
|
api.get<Project>(`/projects/${id}`).then(({ data }) => {
|
|
setProject(data)
|
|
setEditForm({ name: data.name, description: data.description || '', repo: data.repo || '' })
|
|
})
|
|
api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
|
|
api.get<PaginatedResponse<Issue>>(`/issues?project_id=${id}&page_size=10`).then(({ data }) => setIssues(data.items))
|
|
api.get<Milestone[]>(`/milestones?project_id=${id}`).then(({ data }) => setMilestones(data))
|
|
}, [id])
|
|
|
|
const updateProject = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
const { data } = await api.patch<Project>(`/projects/${id}`, editForm)
|
|
setProject(data)
|
|
setEditing(false)
|
|
}
|
|
|
|
if (!project) return <div className="loading">加载中...</div>
|
|
|
|
return (
|
|
<div className="project-detail">
|
|
<button className="btn-back" onClick={() => navigate('/projects')}>← 返回项目列表</button>
|
|
|
|
<div className="issue-header">
|
|
{editing ? (
|
|
<form className="inline-form" onSubmit={updateProject}>
|
|
<input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} required />
|
|
<input value={editForm.description} onChange={(e) => setEditForm({ ...editForm, description: e.target.value })} placeholder="描述" />
|
|
<input value={editForm.repo} onChange={(e) => setEditForm({ ...editForm, repo: e.target.value })} placeholder="仓库地址" />
|
|
<button type="submit" className="btn-primary">保存</button>
|
|
<button type="button" className="btn-back" onClick={() => setEditing(false)}>取消</button>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<h2>📁 {project.name}</h2>
|
|
<p style={{ color: 'var(--text-dim)', marginTop: 4 }}>{project.description || '暂无描述'}</p>
|
|
{project.repo && <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>📦 {project.repo}</p>}
|
|
<button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setEditing(true)}>编辑</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="section">
|
|
<h3>成员 ({members.length})</h3>
|
|
{members.length > 0 ? (
|
|
<div className="member-list">
|
|
{members.map((m) => (
|
|
<span key={m.id} className="badge">{`用户 #${m.user_id} (${m.role})`}</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="empty">暂无成员</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="section">
|
|
<h3>里程碑 ({milestones.length})</h3>
|
|
{milestones.map((ms) => (
|
|
<div key={ms.id} className="milestone-item" onClick={() => navigate(`/milestones/${ms.id}`)}>
|
|
<span className={`badge status-${ms.status === 'active' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
|
|
<span className="milestone-title">{ms.title}</span>
|
|
{ms.due_date && <span className="text-dim"> · 截止 {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
|
|
</div>
|
|
))}
|
|
{milestones.length === 0 && <p className="empty">暂无里程碑</p>}
|
|
</div>
|
|
|
|
<div className="section">
|
|
<div className="page-header">
|
|
<h3>最近 Issues</h3>
|
|
<button className="btn-primary" onClick={() => navigate('/issues/new')}>+ 新建</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr><th>#</th><th>标题</th><th>状态</th><th>优先级</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{issues.map((i) => (
|
|
<tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
|
|
<td>{i.id}</td>
|
|
<td className="issue-title">{i.title}</td>
|
|
<td><span className={`badge status-${i.status}`}>{i.status}</span></td>
|
|
<td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|