feat: remove nginx, add projects/milestones/notifications pages

- 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
2026-03-06 13:05:19 +00:00
parent 853594f447
commit 54d4c4379a
13 changed files with 529 additions and 25 deletions
--- a/src/pages/MilestonesPage.tsx
+++ b/src/pages/MilestonesPage.tsx
@@ -0,0 +1,87 @@
+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>
+  )
+}