fix: force dynamic for meeting page
This commit is contained in:
李超14pro
546
app/projects/[id]/client-page.tsx
Normal file
546
app/projects/[id]/client-page.tsx
Normal file
@@ -0,0 +1,546 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { StatusBadge, StatusDot } from '@/components/status-badge';
|
||||
import { ProgressRing } from '@/components/progress-ring';
|
||||
import { useUser } from '@/components/user-context';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog';
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { calculateProgress, getDaysRemaining, formatDateRange, isKRActive } from '@/lib/kr-utils';
|
||||
import { REASON_CODES, PERIOD_TYPES } from '@/lib/constants';
|
||||
import type { Project, User, Objective, KR } from '@/types/database';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
Target,
|
||||
Calendar,
|
||||
Users,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Loader2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ProjectWithRelations extends Project {
|
||||
owner: User | null;
|
||||
pm: User | null;
|
||||
members: { user_id: string; users: User }[];
|
||||
}
|
||||
|
||||
interface KRWithRelations extends KR {
|
||||
owner: User | null;
|
||||
}
|
||||
|
||||
export default function ProjectDetailPage({ projectId }: { projectId: string }) {
|
||||
// Force re-compile
|
||||
const { currentUser } = useUser();
|
||||
const router = useRouter();
|
||||
|
||||
const [project, setProject] = useState<ProjectWithRelations | null>(null);
|
||||
const [objectives, setObjectives] = useState<Objective[]>([]);
|
||||
const [krs, setKRs] = useState<KRWithRelations[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isObjectiveDialogOpen, setIsObjectiveDialogOpen] = useState(false);
|
||||
const [editingObjective, setEditingObjective] = useState<Objective | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
const [projectRes, objectivesRes, krsRes] = await Promise.all([
|
||||
fetch(`/api/projects/${projectId}`),
|
||||
fetch(`/api/objectives?project_id=${projectId}`),
|
||||
fetch(`/api/krs?project_id=${projectId}`),
|
||||
]);
|
||||
|
||||
if (projectRes.ok) {
|
||||
const projectData = await projectRes.json();
|
||||
setProject(projectData);
|
||||
}
|
||||
|
||||
if (objectivesRes.ok) {
|
||||
const objectivesData = await objectivesRes.json();
|
||||
setObjectives(objectivesData);
|
||||
}
|
||||
|
||||
if (krsRes.ok) {
|
||||
const krsData = await krsRes.json();
|
||||
setKRs(krsData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch project data:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const canEdit = currentUser?.role === 'owner' || currentUser?.id === project?.pm_id;
|
||||
|
||||
const handleDeleteProject = async () => {
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('删除失败');
|
||||
toast.success('项目已删除');
|
||||
router.push('/projects');
|
||||
} catch (error) {
|
||||
toast.error('删除失败');
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditProject = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsEditing(true);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: formData.get('name'),
|
||||
description: formData.get('description'),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('更新失败');
|
||||
|
||||
toast.success('项目已更新');
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
toast.error('更新失败');
|
||||
} finally {
|
||||
setIsEditing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteObjective = async (objectiveId: string) => {
|
||||
if (!confirm('确定要删除此目标吗？关联的 KR 也会被解除关联。')) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/objectives/${objectiveId}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('删除失败');
|
||||
toast.success('目标已删除');
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
toast.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditObjective = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (!editingObjective) return;
|
||||
|
||||
setIsEditing(true);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/objectives/${editingObjective.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: formData.get('title'),
|
||||
description: formData.get('description'),
|
||||
period_start: formData.get('period_start'),
|
||||
period_end: formData.get('period_end'),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('更新失败');
|
||||
|
||||
toast.success('目标已更新');
|
||||
setIsObjectiveDialogOpen(false);
|
||||
setEditingObjective(null);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
toast.error('更新失败');
|
||||
} finally {
|
||||
setIsEditing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const activeKRs = krs.filter(isKRActive);
|
||||
const completedKRs = activeKRs.filter(kr => calculateProgress(kr) >= 1);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-6 bg-slate-200 rounded w-24" />
|
||||
<div className="h-8 bg-slate-200 rounded w-64" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-32 bg-slate-200 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
<div className="h-64 bg-slate-200 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8 text-center">
|
||||
<p className="text-muted-foreground">项目不存在</p>
|
||||
<Button asChild className="mt-4" variant="outline">
|
||||
<Link href="/projects">返回项目列表</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-slate-800 mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
返回项目列表
|
||||
</Link>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-slate-800">{project.name}</h1>
|
||||
<StatusBadge status={project.status} />
|
||||
</div>
|
||||
{project.description && (
|
||||
<p className="text-muted-foreground mt-2">{project.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canEdit && (
|
||||
<div className="flex gap-2">
|
||||
{currentUser?.role === 'owner' && (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑项目</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleEditProject} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">项目名称</Label>
|
||||
<Input id="name" name="name" defaultValue={project.name} required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="description">项目描述</Label>
|
||||
<Textarea id="description" name="description" defaultValue={project.description || ''} />
|
||||
</div>
|
||||
<Button type="submit" disabled={isEditing} className="w-full">
|
||||
{isEditing && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
保存修改
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="text-rose-500 hover:text-rose-600">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确定要删除项目吗？</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
此操作无法撤销。这将永久删除项目及其所有关联的目标、KR 和打卡记录。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteProject}
|
||||
className="bg-rose-600 hover:bg-rose-700"
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
删除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)}
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/projects/${projectId}/objectives/new`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建目标
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild className="bg-teal-600 hover:bg-teal-700">
|
||||
<Link href={`/projects/${projectId}/krs/new`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建 KR
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Dialog open={isObjectiveDialogOpen} onOpenChange={setIsObjectiveDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑目标</DialogTitle>
|
||||
</DialogHeader>
|
||||
{editingObjective && (
|
||||
<form onSubmit={handleEditObjective} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="obj-title">目标标题</Label>
|
||||
<Input id="obj-title" name="title" defaultValue={editingObjective.title} required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="obj-desc">描述</Label>
|
||||
<Textarea id="obj-desc" name="description" defaultValue={editingObjective.description || ''} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="obj-start">开始日期</Label>
|
||||
<Input type="date" id="obj-start" name="period_start" defaultValue={editingObjective.period_start} required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="obj-end">结束日期</Label>
|
||||
<Input type="date" id="obj-end" name="period_end" defaultValue={editingObjective.period_end} required />
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" disabled={isEditing} className="w-full">
|
||||
{isEditing && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
保存修改
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-3xl font-bold text-slate-800">{activeKRs.length}</p>
|
||||
<p className="text-sm text-muted-foreground">进行中 KR</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-3xl font-bold text-emerald-600">{completedKRs.length}</p>
|
||||
<p className="text-sm text-muted-foreground">已达标</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-3xl font-bold text-rose-600">
|
||||
{activeKRs.filter(kr => kr.status === 'red').length}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">风险 KR</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{objectives.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Target className="h-5 w-5 text-teal-600" />
|
||||
阶段目标 (Objectives)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{objectives.map(obj => {
|
||||
const objKRs = krs.filter(kr => kr.objective_id === obj.id);
|
||||
return (
|
||||
<div key={obj.id} className="p-4 bg-slate-50 rounded-lg">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="font-medium text-slate-800">{obj.title}</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{formatDateRange(obj.period_start, obj.period_end)}
|
||||
</span>
|
||||
{currentUser?.role === 'owner' && (
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => {
|
||||
setEditingObjective(obj);
|
||||
setIsObjectiveDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-rose-500 hover:text-rose-600"
|
||||
onClick={() => handleDeleteObjective(obj.id)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{obj.description && (
|
||||
<p className="text-sm text-muted-foreground mb-3">{obj.description}</p>
|
||||
)}
|
||||
<div className="text-xs text-muted-foreground">
|
||||
关联 {objKRs.length} 个 KR
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">执行目标 (Key Results)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{krs.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">暂无 KR</p>
|
||||
) : (
|
||||
krs.map(kr => {
|
||||
const progress = calculateProgress(kr);
|
||||
const daysLeft = getDaysRemaining(kr.period_end);
|
||||
const isActive = isKRActive(kr);
|
||||
|
||||
return (
|
||||
<Link key={kr.id} href={`/krs/${kr.id}`} className="block">
|
||||
<div className={`flex items-center gap-4 p-4 rounded-lg border hover:bg-slate-50 transition-colors ${!isActive ? 'opacity-60' : ''}`}>
|
||||
<ProgressRing progress={progress} status={kr.status} size={56} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className="font-medium text-slate-800 truncate">{kr.title}</p>
|
||||
{!isActive && (
|
||||
<span className="text-xs bg-slate-200 text-slate-600 px-2 py-0.5 rounded">已结束</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<span>{kr.owner?.name || '未分配'}</span>
|
||||
<span className="text-xs bg-slate-100 px-2 py-0.5 rounded">
|
||||
{PERIOD_TYPES[kr.period_type]}
|
||||
</span>
|
||||
<span>{formatDateRange(kr.period_start, kr.period_end)}</span>
|
||||
</div>
|
||||
{kr.reason_code && kr.status !== 'green' && (
|
||||
<div className="flex items-center gap-1 mt-1 text-xs text-amber-600">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{REASON_CODES[kr.reason_code]}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium">
|
||||
{kr.current_value}/{kr.target_value} {kr.unit}
|
||||
</p>
|
||||
{isActive && (
|
||||
<p className={`text-xs ${daysLeft <= 3 ? 'text-amber-600' : 'text-muted-foreground'}`}>
|
||||
<Clock className="h-3 w-3 inline mr-1" />
|
||||
剩余 {daysLeft} 天
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">项目信息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">项目类型</p>
|
||||
<p className="font-medium">{project.project_type || '通用'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">负责人</p>
|
||||
<p className="font-medium">{project.owner?.name || '未指定'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">项目经理</p>
|
||||
<p className="font-medium">{project.pm?.name || '未指定'}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
团队成员
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{project.members && project.members.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{project.members.map(m => (
|
||||
<div key={m.user_id} className="flex items-center gap-2 p-2 rounded bg-slate-50">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-sm font-medium">
|
||||
{m.users.name.charAt(0)}
|
||||
</div>
|
||||
<span className="text-sm">{m.users.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">暂无成员</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">快速操作</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href={`/meeting?project_id=${projectId}`}>
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
发起例会
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
435
app/projects/[id]/krs/new/page.tsx
Normal file
435
app/projects/[id]/krs/new/page.tsx
Normal file
@@ -0,0 +1,435 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from '@/components/ui/form';
|
||||
import { useUser } from '@/components/user-context';
|
||||
import { toast } from 'sonner';
|
||||
import { PERIOD_TYPES, DIRECTION_LABELS } from '@/lib/constants';
|
||||
import type { Objective, Metric, Template } from '@/types/database';
|
||||
import { ArrowLeft, Loader2 } from 'lucide-react';
|
||||
import { getErrorMessage } from '@/lib/error-utils';
|
||||
|
||||
const formSchema = z.object({
|
||||
title: z.string().min(1, 'KR标题不能为空'),
|
||||
objective_id: z.string().optional(),
|
||||
period_type: z.enum(['custom', '3d', '1w', '2w', 'monthly']),
|
||||
period_start: z.string().min(1, '开始日期不能为空'),
|
||||
period_end: z.string().min(1, '结束日期不能为空'),
|
||||
metric_name: z.string().min(1, '指标名称不能为空'),
|
||||
unit: z.string().min(1, '单位不能为空'),
|
||||
direction: z.enum(['increase', 'decrease']),
|
||||
target_value: z.number().positive('目标值必须大于0'),
|
||||
owner_user_id: z.string().optional(),
|
||||
note: z.string().optional(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export default function NewKRPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const projectId = params.id as string;
|
||||
const { currentUser, users } = useUser();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [objectives, setObjectives] = useState<Objective[]>([]);
|
||||
const [metrics, setMetrics] = useState<Metric[]>([]);
|
||||
const [templates, setTemplates] = useState<Template[]>([]);
|
||||
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
title: '',
|
||||
objective_id: '',
|
||||
period_type: 'custom',
|
||||
period_start: today,
|
||||
period_end: today,
|
||||
metric_name: '',
|
||||
unit: '',
|
||||
direction: 'increase',
|
||||
target_value: 0,
|
||||
owner_user_id: currentUser?.id || '',
|
||||
note: '',
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const [objRes, metricsRes, templatesRes] = await Promise.all([
|
||||
fetch(`/api/objectives?project_id=${projectId}`),
|
||||
fetch('/api/metrics?active_only=true'),
|
||||
fetch('/api/templates?active_only=true'),
|
||||
]);
|
||||
|
||||
if (objRes.ok) {
|
||||
const data = await objRes.json();
|
||||
setObjectives(data);
|
||||
}
|
||||
|
||||
if (metricsRes.ok) {
|
||||
const data = await metricsRes.json();
|
||||
setMetrics(data);
|
||||
}
|
||||
|
||||
if (templatesRes.ok) {
|
||||
const data = await templatesRes.json();
|
||||
setTemplates(data);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [projectId]);
|
||||
|
||||
const handlePeriodTypeChange = (value: string) => {
|
||||
form.setValue('period_type', value as FormValues['period_type']);
|
||||
const start = new Date(form.getValues('period_start'));
|
||||
|
||||
let endDate: Date;
|
||||
switch (value) {
|
||||
case '3d':
|
||||
endDate = new Date(start);
|
||||
endDate.setDate(start.getDate() + 2);
|
||||
break;
|
||||
case '1w':
|
||||
endDate = new Date(start);
|
||||
endDate.setDate(start.getDate() + 6);
|
||||
break;
|
||||
case '2w':
|
||||
endDate = new Date(start);
|
||||
endDate.setDate(start.getDate() + 13);
|
||||
break;
|
||||
case 'monthly':
|
||||
endDate = new Date(start);
|
||||
endDate.setMonth(start.getMonth() + 1);
|
||||
endDate.setDate(endDate.getDate() - 1);
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
form.setValue('period_end', endDate.toISOString().split('T')[0]);
|
||||
};
|
||||
|
||||
const handleMetricSelect = (metricId: string) => {
|
||||
const metric = metrics.find(m => m.id === metricId);
|
||||
if (metric) {
|
||||
form.setValue('metric_name', metric.name);
|
||||
form.setValue('unit', metric.unit);
|
||||
form.setValue('direction', metric.direction);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
if (new Date(values.period_end) < new Date(values.period_start)) {
|
||||
toast.error('结束日期不能早于开始日期');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const res = await fetch('/api/krs', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
...values,
|
||||
project_id: projectId,
|
||||
objective_id: values.objective_id || null,
|
||||
owner_user_id: values.owner_user_id || currentUser?.id,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.error || '创建失败');
|
||||
}
|
||||
|
||||
const kr = await res.json();
|
||||
toast.success('KR 创建成功');
|
||||
router.push(`/krs/${kr.id}`);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto px-4 py-8">
|
||||
<Link
|
||||
href={`/projects/${projectId}`}
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-slate-800 mb-6"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
返回项目
|
||||
</Link>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>新建 KR (Key Result)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>KR 标题 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="如：完成首页加载速度优化" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{objectives.length > 0 && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="objective_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>关联目标 (Objective)</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => field.onChange(value === "unspecified" ? "" : value)}
|
||||
value={field.value || "unspecified"}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择关联的目标" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="unspecified">不关联</SelectItem>
|
||||
{objectives.map(obj => (
|
||||
<SelectItem key={obj.id} value={obj.id}>
|
||||
{obj.title}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="period_type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>周期类型</FormLabel>
|
||||
<Select onValueChange={handlePeriodTypeChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(PERIOD_TYPES).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="period_start"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>开始日期 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="period_end"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>结束日期 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{metrics.length > 0 && (
|
||||
<div>
|
||||
<FormLabel>从指标库选择</FormLabel>
|
||||
<Select onValueChange={handleMetricSelect}>
|
||||
<SelectTrigger className="mt-2">
|
||||
<SelectValue placeholder="选择预设指标" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{metrics.map(metric => (
|
||||
<SelectItem key={metric.id} value={metric.id}>
|
||||
{metric.name} ({metric.unit})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="metric_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>指标名称 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="如：页面加载时间" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="unit"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>单位 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="如：秒、个、%" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="direction"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>方向</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(DIRECTION_LABELS).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="target_value"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>目标值 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
step="any"
|
||||
{...field}
|
||||
onChange={e => field.onChange(parseFloat(e.target.value) || 0)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="owner_user_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>负责人</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择负责人" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{users.map(user => (
|
||||
<SelectItem key={user.id} value={user.id}>
|
||||
{user.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
每人每个周期最多 3 个 KR
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="note"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>备注</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea placeholder="补充说明" rows={2} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button type="submit" disabled={isSubmitting} className="bg-teal-600 hover:bg-teal-700">
|
||||
{isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
创建 KR
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => router.back()}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
app/projects/[id]/objectives/new/page.tsx
Normal file
171
app/projects/[id]/objectives/new/page.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||
import { useUser } from '@/components/user-context';
|
||||
import { toast } from 'sonner';
|
||||
import { ArrowLeft, Loader2 } from 'lucide-react';
|
||||
import { getErrorMessage } from '@/lib/error-utils';
|
||||
|
||||
const formSchema = z.object({
|
||||
title: z.string().min(1, '目标标题不能为空'),
|
||||
description: z.string().optional(),
|
||||
period_start: z.string().min(1, '开始日期不能为空'),
|
||||
period_end: z.string().min(1, '结束日期不能为空'),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export default function NewObjectivePage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const projectId = params.id as string;
|
||||
const { currentUser } = useUser();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const today = new Date();
|
||||
const nextMonth = new Date(today);
|
||||
nextMonth.setMonth(nextMonth.getMonth() + 1);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
period_start: today.toISOString().split('T')[0],
|
||||
period_end: nextMonth.toISOString().split('T')[0],
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
if (new Date(values.period_end) < new Date(values.period_start)) {
|
||||
toast.error('结束日期不能早于开始日期');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const res = await fetch('/api/objectives', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
...values,
|
||||
project_id: projectId,
|
||||
created_by: currentUser?.id,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.error || '创建失败');
|
||||
}
|
||||
|
||||
toast.success('目标创建成功');
|
||||
router.push(`/projects/${projectId}`);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto px-4 py-8">
|
||||
<Link
|
||||
href={`/projects/${projectId}`}
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-slate-800 mb-6"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
返回项目
|
||||
</Link>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>新建阶段目标 (Objective)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>目标标题 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="如：提升产品用户体验和性能" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>目标描述</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea placeholder="详细描述这个目标" rows={3} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="period_start"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>开始日期 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="period_end"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>结束日期 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button type="submit" disabled={isSubmitting} className="bg-teal-600 hover:bg-teal-700">
|
||||
{isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
创建目标
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => router.back()}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
app/projects/[id]/page.tsx
Normal file
8
app/projects/[id]/page.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
import ProjectDetailPage from './client-page';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
return <ProjectDetailPage projectId={params.id} />;
|
||||
}
|
||||
215
app/projects/new/page.tsx
Normal file
215
app/projects/new/page.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { useUser } from '@/components/user-context';
|
||||
import { toast } from 'sonner';
|
||||
import type { User } from '@/types/database';
|
||||
import { ArrowLeft, Loader2 } from 'lucide-react';
|
||||
import { getErrorMessage } from '@/lib/error-utils';
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, '项目名称不能为空'),
|
||||
description: z.string().optional(),
|
||||
project_type: z.string().optional(),
|
||||
pm_id: z.string().optional(),
|
||||
member_ids: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export default function NewProjectPage() {
|
||||
const router = useRouter();
|
||||
const { currentUser, users } = useUser();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
project_type: '',
|
||||
pm_id: '',
|
||||
member_ids: [],
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const res = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
...values,
|
||||
owner_id: currentUser?.id,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.error || '创建失败');
|
||||
}
|
||||
|
||||
const project = await res.json();
|
||||
toast.success('项目创建成功');
|
||||
router.push(`/projects/${project.id}`);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const pmCandidates = users.filter(u => u.role === 'owner' || u.role === 'pm');
|
||||
const memberCandidates = users;
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto px-4 py-8">
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-slate-800 mb-6"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
返回项目列表
|
||||
</Link>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>新建项目</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>项目名称 *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="输入项目名称" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>项目描述</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea placeholder="输入项目描述" rows={3} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="project_type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>项目类型</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="如：产品研发、市场营销" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="pm_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>项目经理</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择项目经理" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{pmCandidates.map(user => (
|
||||
<SelectItem key={user.id} value={user.id}>
|
||||
{user.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="member_ids"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<FormLabel>项目成员</FormLabel>
|
||||
<div className="space-y-2">
|
||||
{memberCandidates.map(user => (
|
||||
<FormField
|
||||
key={user.id}
|
||||
control={form.control}
|
||||
name="member_ids"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value?.includes(user.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
const current = field.value || [];
|
||||
if (checked) {
|
||||
field.onChange([...current, user.id]);
|
||||
} else {
|
||||
field.onChange(current.filter(id => id !== user.id));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<span className="text-sm">{user.name}</span>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button type="submit" disabled={isSubmitting} className="bg-teal-600 hover:bg-teal-700">
|
||||
{isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
创建项目
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => router.back()}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
app/projects/page.tsx
Normal file
129
app/projects/page.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { StatusBadge, StatusDot } from '@/components/status-badge';
|
||||
import { useUser } from '@/components/user-context';
|
||||
import type { Project, User } from '@/types/database';
|
||||
import { Plus, Users, Target, ArrowRight } from 'lucide-react';
|
||||
|
||||
interface ProjectWithRelations extends Project {
|
||||
owner: User | null;
|
||||
pm: User | null;
|
||||
}
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const { currentUser } = useUser();
|
||||
const [projects, setProjects] = useState<ProjectWithRelations[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const res = await fetch('/api/projects');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setProjects(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
const canCreate = currentUser?.role === 'owner' || currentUser?.role === 'pm';
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-8 bg-slate-200 rounded w-32" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-48 bg-slate-200 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-800">项目列表</h1>
|
||||
<p className="text-muted-foreground mt-1">共 {projects.length} 个项目</p>
|
||||
</div>
|
||||
{canCreate && (
|
||||
<Button asChild className="bg-teal-600 hover:bg-teal-700">
|
||||
<Link href="/projects/new">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建项目
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{projects.map(project => (
|
||||
<Link key={project.id} href={`/projects/${project.id}`}>
|
||||
<Card className="h-full hover:shadow-md transition-shadow cursor-pointer">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-lg">{project.name}</CardTitle>
|
||||
<StatusBadge status={project.status} size="sm" />
|
||||
</div>
|
||||
{project.project_type && (
|
||||
<span className="text-xs text-muted-foreground bg-slate-100 px-2 py-0.5 rounded">
|
||||
{project.project_type}
|
||||
</span>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{project.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div className="flex items-center gap-1.5 text-muted-foreground">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{project.pm?.name || '未指定PM'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-2 border-t">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
负责人: {project.owner?.name || '未指定'}
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{projects.length === 0 && (
|
||||
<div className="col-span-full text-center py-12">
|
||||
<Target className="h-12 w-12 text-slate-300 mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">暂无项目</p>
|
||||
{canCreate && (
|
||||
<Button asChild className="mt-4" variant="outline">
|
||||
<Link href="/projects/new">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建第一个项目
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user