294 lines
9.9 KiB
TypeScript
294 lines
9.9 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Sidebar } from "@/components/sidebar"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Slider } from "@/components/ui/slider"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Plus, Trash2, Save, RotateCcw, FileText } from "lucide-react"
|
||
import { useToast } from "@/hooks/use-toast"
|
||
|
||
interface CriteriaItem {
|
||
id: string
|
||
name: string
|
||
description: string
|
||
weight: number
|
||
maxScore: number
|
||
}
|
||
|
||
const defaultCriteria: CriteriaItem[] = [
|
||
{
|
||
id: "1",
|
||
name: "內容品質",
|
||
description: "內容的準確性、完整性和專業度",
|
||
weight: 25,
|
||
maxScore: 10,
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "視覺設計",
|
||
description: "版面設計、色彩搭配和視覺效果",
|
||
weight: 20,
|
||
maxScore: 10,
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "邏輯結構",
|
||
description: "內容組織的邏輯性和條理性",
|
||
weight: 20,
|
||
maxScore: 10,
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "創新性",
|
||
description: "創意思維和獨特觀點的展現",
|
||
weight: 15,
|
||
maxScore: 10,
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "實用性",
|
||
description: "內容的實際應用價值和可操作性",
|
||
weight: 20,
|
||
maxScore: 10,
|
||
},
|
||
]
|
||
|
||
export default function CriteriaPage() {
|
||
const [criteria, setCriteria] = useState<CriteriaItem[]>(defaultCriteria)
|
||
const [templateName, setTemplateName] = useState("預設評分標準")
|
||
const { toast } = useToast()
|
||
|
||
const addCriteria = () => {
|
||
const newCriteria: CriteriaItem = {
|
||
id: Date.now().toString(),
|
||
name: "",
|
||
description: "",
|
||
weight: 10,
|
||
maxScore: 10,
|
||
}
|
||
setCriteria([...criteria, newCriteria])
|
||
}
|
||
|
||
const removeCriteria = (id: string) => {
|
||
setCriteria(criteria.filter((item) => item.id !== id))
|
||
}
|
||
|
||
const updateCriteria = (id: string, field: keyof CriteriaItem, value: string | number) => {
|
||
setCriteria(criteria.map((item) => (item.id === id ? { ...item, [field]: value } : item)))
|
||
}
|
||
|
||
const updateWeight = (id: string, weight: number[]) => {
|
||
updateCriteria(id, "weight", weight[0])
|
||
}
|
||
|
||
const totalWeight = criteria.reduce((sum, item) => sum + item.weight, 0)
|
||
|
||
const saveCriteria = () => {
|
||
if (totalWeight !== 100) {
|
||
toast({
|
||
title: "權重設定錯誤",
|
||
description: "所有評分項目的權重總和必須等於 100%",
|
||
variant: "destructive",
|
||
})
|
||
return
|
||
}
|
||
|
||
if (criteria.some((item) => !item.name.trim())) {
|
||
toast({
|
||
title: "設定不完整",
|
||
description: "請填寫所有評分項目的名稱",
|
||
variant: "destructive",
|
||
})
|
||
return
|
||
}
|
||
|
||
// 這裡會連接到後端 API 儲存評分標準
|
||
toast({
|
||
title: "儲存成功",
|
||
description: "評分標準已成功儲存",
|
||
})
|
||
}
|
||
|
||
const resetToDefault = () => {
|
||
setCriteria(defaultCriteria)
|
||
setTemplateName("預設評分標準")
|
||
toast({
|
||
title: "已重置",
|
||
description: "評分標準已重置為預設值",
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<Sidebar />
|
||
|
||
<main className="md:ml-64 p-6">
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* Header */}
|
||
<div className="mb-8 pt-8 md:pt-0">
|
||
<h1 className="text-3xl font-bold text-foreground mb-2 font-[var(--font-playfair)]">評分標準設定</h1>
|
||
<p className="text-muted-foreground">自定義評分項目和權重，建立符合您需求的評審標準</p>
|
||
</div>
|
||
|
||
{/* Template Name */}
|
||
<Card className="mb-6">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<FileText className="h-5 w-5" />
|
||
標準模板名稱
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Input
|
||
value={templateName}
|
||
onChange={(e) => setTemplateName(e.target.value)}
|
||
placeholder="輸入評分標準名稱"
|
||
className="max-w-md"
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Weight Summary */}
|
||
<Card className="mb-6">
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<span className="text-sm font-medium">權重總計</span>
|
||
<Badge variant={totalWeight === 100 ? "default" : "destructive"}>{totalWeight}%</Badge>
|
||
</div>
|
||
<div className="w-full bg-muted rounded-full h-2">
|
||
<div
|
||
className={`h-2 rounded-full transition-all ${totalWeight === 100 ? "bg-primary" : "bg-destructive"}`}
|
||
style={{ width: `${Math.min(totalWeight, 100)}%` }}
|
||
/>
|
||
</div>
|
||
{totalWeight !== 100 && <p className="text-sm text-destructive mt-2">權重總和必須等於 100%</p>}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Criteria List */}
|
||
<div className="space-y-4 mb-6">
|
||
{criteria.map((item, index) => (
|
||
<Card key={item.id}>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-lg">評分項目 {index + 1}</CardTitle>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => removeCriteria(item.id)}
|
||
className="text-destructive hover:text-destructive"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div>
|
||
<Label htmlFor={`name-${item.id}`}>項目名稱</Label>
|
||
<Input
|
||
id={`name-${item.id}`}
|
||
value={item.name}
|
||
onChange={(e) => updateCriteria(item.id, "name", e.target.value)}
|
||
placeholder="例如：內容品質"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor={`maxScore-${item.id}`}>滿分</Label>
|
||
<Input
|
||
id={`maxScore-${item.id}`}
|
||
type="number"
|
||
value={item.maxScore}
|
||
onChange={(e) => updateCriteria(item.id, "maxScore", Number.parseInt(e.target.value) || 10)}
|
||
min="1"
|
||
max="100"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Label htmlFor={`description-${item.id}`}>評分說明</Label>
|
||
<Textarea
|
||
id={`description-${item.id}`}
|
||
value={item.description}
|
||
onChange={(e) => updateCriteria(item.id, "description", e.target.value)}
|
||
placeholder="描述此項目的評分標準和要求"
|
||
rows={2}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<Label>權重比例</Label>
|
||
<Badge variant="outline">{item.weight}%</Badge>
|
||
</div>
|
||
<Slider
|
||
value={[item.weight]}
|
||
onValueChange={(value) => updateWeight(item.id, value)}
|
||
max={100}
|
||
min={0}
|
||
step={5}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* Add Criteria Button */}
|
||
<Card className="mb-6">
|
||
<CardContent className="pt-6">
|
||
<Button onClick={addCriteria} variant="outline" className="w-full bg-transparent">
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
新增評分項目
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
<Button onClick={saveCriteria} className="flex-1">
|
||
<Save className="h-4 w-4 mr-2" />
|
||
儲存評分標準
|
||
</Button>
|
||
<Button onClick={resetToDefault} variant="outline">
|
||
<RotateCcw className="h-4 w-4 mr-2" />
|
||
重置為預設
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Preview */}
|
||
<Card className="mt-8">
|
||
<CardHeader>
|
||
<CardTitle>預覽</CardTitle>
|
||
<CardDescription>以下是您設定的評分標準預覽</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{criteria.map((item, index) => (
|
||
<div key={item.id} className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||
<div className="flex-1">
|
||
<div className="font-medium">{item.name || `評分項目 ${index + 1}`}</div>
|
||
{item.description && <div className="text-sm text-muted-foreground mt-1">{item.description}</div>}
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="font-medium">權重: {item.weight}%</div>
|
||
<div className="text-sm text-muted-foreground">滿分: {item.maxScore}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|