Compare commits
1 Commits
853594f447
...
54d4c4379a
| Author | SHA1 | Date | |
|---|---|---|---|
| 54d4c4379a |
15
Dockerfile
15
Dockerfile
@@ -1,12 +1,17 @@
|
|||||||
|
# Build stage
|
||||||
FROM node:20-alpine AS build
|
FROM node:20-alpine AS build
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
COPY package.json ./
|
COPY package.json package-lock.json* ./
|
||||||
RUN npm install
|
RUN npm install
|
||||||
COPY . .
|
COPY . .
|
||||||
|
ARG VITE_API_BASE=/api
|
||||||
|
ENV VITE_API_BASE=$VITE_API_BASE
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
FROM nginx:alpine
|
# Production stage — lightweight static server, no nginx
|
||||||
COPY --from=build /app/dist /usr/share/nginx/html
|
FROM node:20-alpine
|
||||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
RUN npm install -g serve@14
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=build /app/dist ./dist
|
||||||
EXPOSE 3000
|
EXPOSE 3000
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
CMD ["serve", "-s", "dist", "-l", "3000"]
|
||||||
|
|||||||
15
nginx.conf
15
nginx.conf
@@ -1,15 +0,0 @@
|
|||||||
server {
|
|
||||||
listen 3000;
|
|
||||||
root /usr/share/nginx/html;
|
|
||||||
index index.html;
|
|
||||||
|
|
||||||
location /api/ {
|
|
||||||
proxy_pass http://backend:8000/;
|
|
||||||
proxy_set_header Host $host;
|
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
|
||||||
}
|
|
||||||
|
|
||||||
location / {
|
|
||||||
try_files $uri $uri/ /index.html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
10
src/App.tsx
10
src/App.tsx
@@ -6,6 +6,11 @@ import DashboardPage from '@/pages/DashboardPage'
|
|||||||
import IssuesPage from '@/pages/IssuesPage'
|
import IssuesPage from '@/pages/IssuesPage'
|
||||||
import IssueDetailPage from '@/pages/IssueDetailPage'
|
import IssueDetailPage from '@/pages/IssueDetailPage'
|
||||||
import CreateIssuePage from '@/pages/CreateIssuePage'
|
import CreateIssuePage from '@/pages/CreateIssuePage'
|
||||||
|
import ProjectsPage from '@/pages/ProjectsPage'
|
||||||
|
import ProjectDetailPage from '@/pages/ProjectDetailPage'
|
||||||
|
import MilestonesPage from '@/pages/MilestonesPage'
|
||||||
|
import MilestoneDetailPage from '@/pages/MilestoneDetailPage'
|
||||||
|
import NotificationsPage from '@/pages/NotificationsPage'
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const { user, loading, login, logout } = useAuth()
|
const { user, loading, login, logout } = useAuth()
|
||||||
@@ -30,6 +35,11 @@ export default function App() {
|
|||||||
<Route path="/issues" element={<IssuesPage />} />
|
<Route path="/issues" element={<IssuesPage />} />
|
||||||
<Route path="/issues/new" element={<CreateIssuePage />} />
|
<Route path="/issues/new" element={<CreateIssuePage />} />
|
||||||
<Route path="/issues/:id" element={<IssueDetailPage />} />
|
<Route path="/issues/:id" element={<IssueDetailPage />} />
|
||||||
|
<Route path="/projects" element={<ProjectsPage />} />
|
||||||
|
<Route path="/projects/:id" element={<ProjectDetailPage />} />
|
||||||
|
<Route path="/milestones" element={<MilestonesPage />} />
|
||||||
|
<Route path="/milestones/:id" element={<MilestoneDetailPage />} />
|
||||||
|
<Route path="/notifications" element={<NotificationsPage />} />
|
||||||
<Route path="*" element={<Navigate to="/" />} />
|
<Route path="*" element={<Navigate to="/" />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
import { Link, useLocation } from 'react-router-dom'
|
import { Link, useLocation } from 'react-router-dom'
|
||||||
|
import api from '@/services/api'
|
||||||
import type { User } from '@/types'
|
import type { User } from '@/types'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -8,10 +10,26 @@ interface Props {
|
|||||||
|
|
||||||
export default function Sidebar({ user, onLogout }: Props) {
|
export default function Sidebar({ user, onLogout }: Props) {
|
||||||
const { pathname } = useLocation()
|
const { pathname } = useLocation()
|
||||||
|
const [unreadCount, setUnreadCount] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
api.get<{ count: number }>('/notifications/count')
|
||||||
|
.then(({ data }) => setUnreadCount(data.count))
|
||||||
|
.catch(() => {})
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
api.get<{ count: number }>('/notifications/count')
|
||||||
|
.then(({ data }) => setUnreadCount(data.count))
|
||||||
|
.catch(() => {})
|
||||||
|
}, 30000)
|
||||||
|
return () => clearInterval(timer)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
{ to: '/', icon: '📊', label: '仪表盘' },
|
{ to: '/', icon: '📊', label: '仪表盘' },
|
||||||
{ to: '/issues', icon: '📋', label: 'Issues' },
|
{ to: '/issues', icon: '📋', label: 'Issues' },
|
||||||
{ to: '/projects', icon: '📁', label: '项目' },
|
{ to: '/projects', icon: '📁', label: '项目' },
|
||||||
|
{ to: '/milestones', icon: '🏁', label: '里程碑' },
|
||||||
|
{ to: '/notifications', icon: '🔔', label: `通知${unreadCount > 0 ? ` (${unreadCount})` : ''}` },
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -21,7 +39,7 @@ export default function Sidebar({ user, onLogout }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
<ul className="nav-links">
|
<ul className="nav-links">
|
||||||
{links.map((l) => (
|
{links.map((l) => (
|
||||||
<li key={l.to} className={pathname === l.to ? 'active' : ''}>
|
<li key={l.to} className={pathname === l.to || (l.to !== '/' && pathname.startsWith(l.to)) ? 'active' : ''}>
|
||||||
<Link to={l.to}>{l.icon} {l.label}</Link>
|
<Link to={l.to}>{l.icon} {l.label}</Link>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -36,7 +36,9 @@ export function useAuth() {
|
|||||||
const form = new URLSearchParams()
|
const form = new URLSearchParams()
|
||||||
form.append('username', username)
|
form.append('username', username)
|
||||||
form.append('password', password)
|
form.append('password', password)
|
||||||
const { data } = await api.post('/auth/login', form)
|
const { data } = await api.post('/auth/token', form, {
|
||||||
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||||
|
})
|
||||||
localStorage.setItem('token', data.access_token)
|
localStorage.setItem('token', data.access_token)
|
||||||
setState((s) => ({ ...s, token: data.access_token }))
|
setState((s) => ({ ...s, token: data.access_token }))
|
||||||
await fetchUser()
|
await fetchUser()
|
||||||
|
|||||||
@@ -118,3 +118,45 @@ dd { font-size: .9rem; }
|
|||||||
.create-issue label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
|
.create-issue label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
|
||||||
.create-issue input, .create-issue textarea, .create-issue select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem; }
|
.create-issue input, .create-issue textarea, .create-issue select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem; }
|
||||||
.create-issue textarea { min-height: 100px; resize: vertical; }
|
.create-issue textarea { min-height: 100px; resize: vertical; }
|
||||||
|
|
||||||
|
/* Project grid */
|
||||||
|
.project-grid, .milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
|
||||||
|
.project-card, .milestone-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; cursor: pointer; transition: .15s; }
|
||||||
|
.project-card:hover, .milestone-card:hover { border-color: var(--accent); background: var(--bg-hover); }
|
||||||
|
.project-card h3, .milestone-card h3 { margin-bottom: 8px; }
|
||||||
|
.project-desc { color: var(--text-dim); font-size: .9rem; margin-bottom: 12px; }
|
||||||
|
.project-meta { font-size: .8rem; color: var(--text-dim); display: flex; gap: 12px; }
|
||||||
|
|
||||||
|
/* Milestone card header */
|
||||||
|
.milestone-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||||
|
.milestone-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
|
||||||
|
.milestone-item:hover { background: var(--bg-hover); }
|
||||||
|
.milestone-title { font-weight: 500; }
|
||||||
|
|
||||||
|
/* Progress bar */
|
||||||
|
.progress-bar-container { width: 100%; height: 20px; background: var(--bg); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
|
||||||
|
.progress-bar { height: 100%; background: var(--success); color: #fff; font-size: .75rem; display: flex; align-items: center; justify-content: center; min-width: 30px; transition: width .3s; border-radius: 10px; }
|
||||||
|
|
||||||
|
/* Notification list */
|
||||||
|
.notification-list { margin-top: 16px; }
|
||||||
|
.notification-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .15s; }
|
||||||
|
.notification-item:hover { background: var(--bg-hover); }
|
||||||
|
.notification-item.unread { background: var(--bg-card); }
|
||||||
|
.notification-dot { width: 12px; color: var(--accent); font-size: .6rem; padding-top: 4px; }
|
||||||
|
.notification-body p { margin-bottom: 4px; }
|
||||||
|
|
||||||
|
/* Inline form */
|
||||||
|
.inline-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
|
||||||
|
.inline-form input, .inline-form select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
|
||||||
|
|
||||||
|
/* Filter checkbox */
|
||||||
|
.filter-check { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: .9rem; cursor: pointer; }
|
||||||
|
|
||||||
|
/* Member list */
|
||||||
|
.member-list { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* Empty state */
|
||||||
|
.empty { color: var(--text-dim); font-style: italic; padding: 16px 0; }
|
||||||
|
|
||||||
|
/* Text dim helper */
|
||||||
|
.text-dim { color: var(--text-dim); font-size: .85rem; }
|
||||||
|
|||||||
76
src/pages/MilestoneDetailPage.tsx
Normal file
76
src/pages/MilestoneDetailPage.tsx
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
|
import api from '@/services/api'
|
||||||
|
import type { Milestone, MilestoneProgress, Issue } from '@/types'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
export default function MilestoneDetailPage() {
|
||||||
|
const { id } = useParams()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [milestone, setMilestone] = useState<Milestone | null>(null)
|
||||||
|
const [progress, setProgress] = useState<MilestoneProgress | null>(null)
|
||||||
|
const [issues, setIssues] = useState<Issue[]>([])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
api.get<Milestone>(`/milestones/${id}`).then(({ data }) => setMilestone(data))
|
||||||
|
api.get<MilestoneProgress>(`/milestones/${id}/progress`).then(({ data }) => setProgress(data)).catch(() => {})
|
||||||
|
api.get<Issue[]>(`/milestones/${id}/issues`).then(({ data }) => setIssues(data)).catch(() => {})
|
||||||
|
}, [id])
|
||||||
|
|
||||||
|
if (!milestone) return <div className="loading">加载中...</div>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="milestone-detail">
|
||||||
|
<button className="btn-back" onClick={() => navigate('/milestones')}>← 返回里程碑列表</button>
|
||||||
|
|
||||||
|
<div className="issue-header">
|
||||||
|
<h2>🏁 {milestone.title}</h2>
|
||||||
|
<div className="issue-meta">
|
||||||
|
<span className={`badge status-${milestone.status === 'active' ? 'open' : 'closed'}`}>{milestone.status}</span>
|
||||||
|
{milestone.due_date && <span className="text-dim">截止 {dayjs(milestone.due_date).format('YYYY-MM-DD')}</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{milestone.description && (
|
||||||
|
<div className="section">
|
||||||
|
<h3>描述</h3>
|
||||||
|
<p>{milestone.description}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{progress && (
|
||||||
|
<div className="section">
|
||||||
|
<h3>进度</h3>
|
||||||
|
<div className="progress-bar-container">
|
||||||
|
<div className="progress-bar" style={{ width: `${progress.progress_percent}%` }}>
|
||||||
|
{progress.progress_percent.toFixed(0)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-dim" style={{ marginTop: 8 }}>
|
||||||
|
{progress.completed_issues} / {progress.total_issues} issues 已完成
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="section">
|
||||||
|
<h3>Issues ({issues.length})</h3>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
{issues.length === 0 && <tr><td colSpan={4} className="empty">暂无关联 issue</td></tr>}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
87
src/pages/MilestonesPage.tsx
Normal file
87
src/pages/MilestonesPage.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
69
src/pages/NotificationsPage.tsx
Normal file
69
src/pages/NotificationsPage.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import api from '@/services/api'
|
||||||
|
import type { Notification } from '@/types'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
export default function NotificationsPage() {
|
||||||
|
const [notifications, setNotifications] = useState<Notification[]>([])
|
||||||
|
const [unreadOnly, setUnreadOnly] = useState(false)
|
||||||
|
const [unreadCount, setUnreadCount] = useState(0)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const fetchNotifications = () => {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
if (unreadOnly) params.set('unread_only', 'true')
|
||||||
|
api.get<Notification[]>(`/notifications?${params}`).then(({ data }) => setNotifications(data))
|
||||||
|
api.get<{ count: number }>('/notifications/count').then(({ data }) => setUnreadCount(data.count)).catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { fetchNotifications() }, [unreadOnly])
|
||||||
|
|
||||||
|
const markRead = async (id: number) => {
|
||||||
|
await api.post(`/notifications/${id}/read`)
|
||||||
|
fetchNotifications()
|
||||||
|
}
|
||||||
|
|
||||||
|
const markAllRead = async () => {
|
||||||
|
await api.post('/notifications/read-all')
|
||||||
|
fetchNotifications()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="notifications-page">
|
||||||
|
<div className="page-header">
|
||||||
|
<h2>🔔 通知 {unreadCount > 0 && <span className="badge" style={{ background: 'var(--danger)' }}>{unreadCount}</span>}</h2>
|
||||||
|
{unreadCount > 0 && (
|
||||||
|
<button className="btn-primary" onClick={markAllRead}>全部标记已读</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="filters">
|
||||||
|
<label className="filter-check">
|
||||||
|
<input type="checkbox" checked={unreadOnly} onChange={(e) => setUnreadOnly(e.target.checked)} />
|
||||||
|
仅显示未读
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="notification-list">
|
||||||
|
{notifications.map((n) => (
|
||||||
|
<div
|
||||||
|
key={n.id}
|
||||||
|
className={`notification-item ${n.is_read ? 'read' : 'unread'}`}
|
||||||
|
onClick={() => {
|
||||||
|
if (!n.is_read) markRead(n.id)
|
||||||
|
if (n.issue_id) navigate(`/issues/${n.issue_id}`)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="notification-dot">{n.is_read ? '' : '●'}</div>
|
||||||
|
<div className="notification-body">
|
||||||
|
<p>{n.message}</p>
|
||||||
|
<span className="text-dim">{dayjs(n.created_at).format('MM-DD HH:mm')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{notifications.length === 0 && <p className="empty">暂无通知</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
105
src/pages/ProjectDetailPage.tsx
Normal file
105
src/pages/ProjectDetailPage.tsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
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: '' })
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
api.get<Project>(`/projects/${id}`).then(({ data }) => {
|
||||||
|
setProject(data)
|
||||||
|
setEditForm({ name: data.name, description: data.description || '' })
|
||||||
|
})
|
||||||
|
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="描述" />
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
64
src/pages/ProjectsPage.tsx
Normal file
64
src/pages/ProjectsPage.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import api from '@/services/api'
|
||||||
|
import type { Project } from '@/types'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
export default function ProjectsPage() {
|
||||||
|
const [projects, setProjects] = useState<Project[]>([])
|
||||||
|
const [showCreate, setShowCreate] = useState(false)
|
||||||
|
const [form, setForm] = useState({ name: '', description: '', owner_id: 1 })
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const fetchProjects = () => {
|
||||||
|
api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { fetchProjects() }, [])
|
||||||
|
|
||||||
|
const createProject = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
await api.post('/projects', form)
|
||||||
|
setForm({ name: '', description: '', owner_id: 1 })
|
||||||
|
setShowCreate(false)
|
||||||
|
fetchProjects()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="projects-page">
|
||||||
|
<div className="page-header">
|
||||||
|
<h2>📁 项目 ({projects.length})</h2>
|
||||||
|
<button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
|
||||||
|
{showCreate ? '取消' : '+ 新建项目'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showCreate && (
|
||||||
|
<form className="inline-form" onSubmit={createProject}>
|
||||||
|
<input
|
||||||
|
required placeholder="项目名称" value={form.name}
|
||||||
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
placeholder="项目描述(可选)" value={form.description}
|
||||||
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||||
|
/>
|
||||||
|
<button type="submit" className="btn-primary">创建</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="project-grid">
|
||||||
|
{projects.map((p) => (
|
||||||
|
<div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.id}`)}>
|
||||||
|
<h3>{p.name}</h3>
|
||||||
|
<p className="project-desc">{p.description || '暂无描述'}</p>
|
||||||
|
<div className="project-meta">
|
||||||
|
<span>创建于 {dayjs(p.created_at).format('YYYY-MM-DD')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{projects.length === 0 && <p className="empty">暂无项目,点击上方创建</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
const api = axios.create({
|
const api = axios.create({
|
||||||
baseURL: '/api',
|
baseURL: import.meta.env.VITE_API_BASE || '/api',
|
||||||
})
|
})
|
||||||
|
|
||||||
api.interceptors.request.use((config) => {
|
api.interceptors.request.use((config) => {
|
||||||
@@ -17,7 +17,9 @@ api.interceptors.response.use(
|
|||||||
(err) => {
|
(err) => {
|
||||||
if (err.response?.status === 401) {
|
if (err.response?.status === 401) {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token')
|
||||||
window.location.href = '/login'
|
if (window.location.pathname !== '/login') {
|
||||||
|
window.location.href = '/login'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return Promise.reject(err)
|
return Promise.reject(err)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,9 @@ export interface User {
|
|||||||
id: number
|
id: number
|
||||||
username: string
|
username: string
|
||||||
email: string
|
email: string
|
||||||
|
full_name: string | null
|
||||||
is_admin: boolean
|
is_admin: boolean
|
||||||
|
is_active: boolean
|
||||||
created_at: string
|
created_at: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -14,11 +16,18 @@ export interface Project {
|
|||||||
created_at: string
|
created_at: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ProjectMember {
|
||||||
|
id: number
|
||||||
|
user_id: number
|
||||||
|
project_id: number
|
||||||
|
role: string
|
||||||
|
}
|
||||||
|
|
||||||
export interface Issue {
|
export interface Issue {
|
||||||
id: number
|
id: number
|
||||||
title: string
|
title: string
|
||||||
description: string | null
|
description: string | null
|
||||||
issue_type: 'task' | 'bug' | 'feature' | 'resolution'
|
issue_type: 'task' | 'story' | 'test' | 'resolution'
|
||||||
status: 'open' | 'in_progress' | 'resolved' | 'closed' | 'blocked'
|
status: 'open' | 'in_progress' | 'resolved' | 'closed' | 'blocked'
|
||||||
priority: 'low' | 'medium' | 'high' | 'critical'
|
priority: 'low' | 'medium' | 'high' | 'critical'
|
||||||
project_id: number
|
project_id: number
|
||||||
@@ -27,6 +36,9 @@ export interface Issue {
|
|||||||
tags: string | null
|
tags: string | null
|
||||||
due_date: string | null
|
due_date: string | null
|
||||||
milestone_id: number | null
|
milestone_id: number | null
|
||||||
|
resolution_summary: string | null
|
||||||
|
positions: string | null
|
||||||
|
pending_matters: string | null
|
||||||
created_at: string
|
created_at: string
|
||||||
updated_at: string | null
|
updated_at: string | null
|
||||||
}
|
}
|
||||||
@@ -40,6 +52,33 @@ export interface Comment {
|
|||||||
updated_at: string | null
|
updated_at: string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Milestone {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
description: string | null
|
||||||
|
status: string
|
||||||
|
project_id: number
|
||||||
|
due_date: string | null
|
||||||
|
created_at: string
|
||||||
|
updated_at: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MilestoneProgress {
|
||||||
|
milestone_id: number
|
||||||
|
total_issues: number
|
||||||
|
completed_issues: number
|
||||||
|
progress_percent: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Notification {
|
||||||
|
id: number
|
||||||
|
user_id: number
|
||||||
|
message: string
|
||||||
|
is_read: boolean
|
||||||
|
issue_id: number | null
|
||||||
|
created_at: string
|
||||||
|
}
|
||||||
|
|
||||||
export interface PaginatedResponse<T> {
|
export interface PaginatedResponse<T> {
|
||||||
items: T[]
|
items: T[]
|
||||||
total: number
|
total: number
|
||||||
|
|||||||
Reference in New Issue
Block a user