完成評審評分機制
This commit is contained in:
@@ -13,6 +13,14 @@ interface Judge {
|
||||
id: string
|
||||
name: string
|
||||
specialty: string
|
||||
expertise?: string[]
|
||||
title?: string
|
||||
department?: string
|
||||
email?: string
|
||||
phone?: string
|
||||
organization?: string
|
||||
totalScores?: number
|
||||
completedScores?: number
|
||||
}
|
||||
|
||||
interface JudgeListDialogProps {
|
||||
@@ -54,44 +62,118 @@ export function JudgeListDialog({ open, onOpenChange, judges }: JudgeListDialogP
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{judges.map((judge) => (
|
||||
<Card key={judge.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 左側：頭像和資訊 */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarFallback className="text-sm font-semibold bg-gray-100">
|
||||
{judge.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">{judge.name}</h3>
|
||||
<p className="text-sm text-gray-600">{judge.specialty}</p>
|
||||
</div>
|
||||
</div>
|
||||
{judges.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Users className="w-12 h-12 mx-auto text-gray-400 mb-4" />
|
||||
<p className="text-gray-500">暫無評審數據</p>
|
||||
</div>
|
||||
) : (
|
||||
judges.map((judge) => (
|
||||
<Card key={judge.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
{/* 左側：頭像和基本資訊 */}
|
||||
<div className="flex items-start space-x-4">
|
||||
<Avatar className="w-14 h-14">
|
||||
<AvatarFallback className="text-lg font-semibold bg-blue-100 text-blue-700">
|
||||
{judge.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-xl mb-1">{judge.name}</h3>
|
||||
<p className="text-sm text-gray-600 mb-2">{judge.specialty}</p>
|
||||
|
||||
{/* 職位和部門 */}
|
||||
{(judge.title && judge.title !== judge.name) || judge.department ? (
|
||||
<div className="flex items-center space-x-2 mb-3">
|
||||
{judge.title && judge.title !== judge.name && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{judge.title}
|
||||
</Badge>
|
||||
)}
|
||||
{judge.department && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{judge.department}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 評審能力 */}
|
||||
{judge.expertise && judge.expertise.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">專業能力</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{judge.expertise.map((skill, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="text-xs bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 額外資訊 */}
|
||||
<div className="space-y-1 text-sm text-gray-500">
|
||||
{judge.organization && (
|
||||
<p>🏢 {judge.organization}</p>
|
||||
)}
|
||||
{judge.email && (
|
||||
<p>📧 {judge.email}</p>
|
||||
)}
|
||||
{judge.phone && (
|
||||
<p>📞 {judge.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右側：ID和複製按鈕 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-gray-100 px-3 py-1 rounded-lg">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
ID: {judge.id}
|
||||
</span>
|
||||
{/* 評分進度 */}
|
||||
{judge.totalScores !== undefined && judge.completedScores !== undefined && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-gray-600">評分進度</span>
|
||||
<span className="font-medium">
|
||||
{judge.completedScores}/{judge.totalScores}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${judge.totalScores > 0 ? (judge.completedScores / judge.totalScores) * 100 : 0}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右側：ID和操作按鈕 */}
|
||||
<div className="flex flex-col items-end space-y-3">
|
||||
<div className="bg-gray-100 px-4 py-2 rounded-lg">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
ID: {judge.id}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleCopyJudgeId(judge.id, judge.name)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
<span>複製ID</span>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleCopyJudgeId(judge.id, judge.name)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
<span>複製</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user