zhi
54d4c4379a
- Dockerfile: replace nginx with serve for static files - Fix auth endpoint: /auth/login → /auth/token - Add ProjectsPage, ProjectDetailPage - Add MilestonesPage, MilestoneDetailPage with progress bar - Add NotificationsPage with unread count - Sidebar: add milestones/notifications nav, live unread badge - API: configurable VITE_API_BASE for host nginx proxy - Types: add Milestone, MilestoneProgress, Notification, ProjectMember
88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { Milestone, Project } from '@/types'
|
|
import dayjs from 'dayjs'
|
|
|
|
export default function MilestonesPage() {
|
|
const [milestones, setMilestones] = useState<Milestone[]>([])
|
|
const [projects, setProjects] = useState<Project[]>([])
|
|
const [projectFilter, setProjectFilter] = useState('')
|
|
const [showCreate, setShowCreate] = useState(false)
|
|
const [form, setForm] = useState({ title: '', description: '', project_id: 0, due_date: '' })
|
|
const navigate = useNavigate()
|
|
|
|
const fetchMilestones = () => {
|
|
const params = projectFilter ? `?project_id=${projectFilter}` : ''
|
|
api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data))
|
|
}
|
|
|
|
useEffect(() => {
|
|
api.get<Project[]>('/projects').then(({ data }) => {
|
|
setProjects(data)
|
|
if (data.length) setForm((f) => ({ ...f, project_id: data[0].id }))
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => { fetchMilestones() }, [projectFilter])
|
|
|
|
const createMilestone = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
const payload: Record<string, unknown> = { ...form }
|
|
if (!form.due_date) delete payload.due_date
|
|
await api.post('/milestones', payload)
|
|
setShowCreate(false)
|
|
fetchMilestones()
|
|
}
|
|
|
|
return (
|
|
<div className="milestones-page">
|
|
<div className="page-header">
|
|
<h2>🏁 里程碑 ({milestones.length})</h2>
|
|
<button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
|
|
{showCreate ? '取消' : '+ 新建里程碑'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="filters">
|
|
<select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
|
|
<option value="">全部项目</option>
|
|
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
{showCreate && (
|
|
<form className="inline-form" onSubmit={createMilestone}>
|
|
<input required placeholder="里程碑标题" value={form.title}
|
|
onChange={(e) => setForm({ ...form, title: e.target.value })} />
|
|
<input placeholder="描述（可选）" value={form.description}
|
|
onChange={(e) => setForm({ ...form, description: e.target.value })} />
|
|
<select value={form.project_id} onChange={(e) => setForm({ ...form, project_id: Number(e.target.value) })}>
|
|
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
|
|
</select>
|
|
<input type="date" value={form.due_date}
|
|
onChange={(e) => setForm({ ...form, due_date: e.target.value })} />
|
|
<button type="submit" className="btn-primary">创建</button>
|
|
</form>
|
|
)}
|
|
|
|
<div className="milestone-grid">
|
|
{milestones.map((ms) => (
|
|
<div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.id}`)}>
|
|
<div className="milestone-card-header">
|
|
<span className={`badge status-${ms.status === 'active' ? 'open' : 'closed'}`}>{ms.status}</span>
|
|
<h3>{ms.title}</h3>
|
|
</div>
|
|
<p className="project-desc">{ms.description || '暂无描述'}</p>
|
|
<div className="project-meta">
|
|
{ms.due_date && <span>截止 {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
|
|
<span>创建于 {dayjs(ms.created_at).format('YYYY-MM-DD')}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{milestones.length === 0 && <p className="empty">暂无里程碑</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|