Initialized repository for project AI scoring application
Co-authored-by: 吳佩庭 <190080258+WuPeiTing0919@users.noreply.github.com>
This commit is contained in:
v0
3
app/history/loading.tsx
Normal file
3
app/history/loading.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
260
app/history/page.tsx
Normal file
260
app/history/page.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Sidebar } from "@/components/sidebar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { FileText, Calendar, Search, Eye, Download, Trash2 } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
// 模擬歷史記錄數據
|
||||
const mockHistory = [
|
||||
{
|
||||
id: "1",
|
||||
title: "產品介紹簡報",
|
||||
type: "PPT",
|
||||
score: 82,
|
||||
grade: "B+",
|
||||
date: "2024-01-15",
|
||||
status: "completed",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "市場分析報告",
|
||||
type: "Website",
|
||||
score: 76,
|
||||
grade: "B",
|
||||
date: "2024-01-12",
|
||||
status: "completed",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "產品演示影片",
|
||||
type: "Video",
|
||||
score: 88,
|
||||
grade: "A-",
|
||||
date: "2024-01-10",
|
||||
status: "completed",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "技術架構說明",
|
||||
type: "PPT",
|
||||
score: 0,
|
||||
grade: "-",
|
||||
date: "2024-01-08",
|
||||
status: "processing",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "用戶體驗設計",
|
||||
type: "Website",
|
||||
score: 91,
|
||||
grade: "A",
|
||||
date: "2024-01-05",
|
||||
status: "completed",
|
||||
},
|
||||
]
|
||||
|
||||
export default function HistoryPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [filterType, setFilterType] = useState("all")
|
||||
const [filterStatus, setFilterStatus] = useState("all")
|
||||
|
||||
const filteredHistory = mockHistory.filter((item) => {
|
||||
const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesType = filterType === "all" || item.type === filterType
|
||||
const matchesStatus = filterStatus === "all" || item.status === filterStatus
|
||||
return matchesSearch && matchesType && matchesStatus
|
||||
})
|
||||
|
||||
const getGradeColor = (grade: string) => {
|
||||
if (grade.startsWith("A")) return "bg-green-100 text-green-800"
|
||||
if (grade.startsWith("B")) return "bg-blue-100 text-blue-800"
|
||||
if (grade.startsWith("C")) return "bg-yellow-100 text-yellow-800"
|
||||
return "bg-gray-100 text-gray-800"
|
||||
}
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "PPT":
|
||||
return <FileText className="h-4 w-4" />
|
||||
case "Video":
|
||||
return <FileText className="h-4 w-4" />
|
||||
case "Website":
|
||||
return <FileText className="h-4 w-4" />
|
||||
default:
|
||||
return <FileText className="h-4 w-4" />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Sidebar />
|
||||
|
||||
<main className="md:ml-64 p-6">
|
||||
<div className="max-w-6xl 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>
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="搜尋專案標題..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Select value={filterType} onValueChange={setFilterType}>
|
||||
<SelectTrigger className="w-full sm:w-40">
|
||||
<SelectValue placeholder="類型篩選" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有類型</SelectItem>
|
||||
<SelectItem value="PPT">PPT</SelectItem>
|
||||
<SelectItem value="Video">影片</SelectItem>
|
||||
<SelectItem value="Website">網站</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={filterStatus} onValueChange={setFilterStatus}>
|
||||
<SelectTrigger className="w-full sm:w-40">
|
||||
<SelectValue placeholder="狀態篩選" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有狀態</SelectItem>
|
||||
<SelectItem value="completed">已完成</SelectItem>
|
||||
<SelectItem value="processing">處理中</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="grid md:grid-cols-4 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="text-2xl font-bold text-primary mb-1">{mockHistory.length}</div>
|
||||
<div className="text-sm text-muted-foreground">總評審數</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="text-2xl font-bold text-green-600 mb-1">
|
||||
{mockHistory.filter((item) => item.status === "completed").length}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">已完成</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="text-2xl font-bold text-blue-600 mb-1">
|
||||
{Math.round(
|
||||
mockHistory.filter((item) => item.score > 0).reduce((sum, item) => sum + item.score, 0) /
|
||||
mockHistory.filter((item) => item.score > 0).length,
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">平均分數</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="text-2xl font-bold text-yellow-600 mb-1">
|
||||
{mockHistory.filter((item) => item.status === "processing").length}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">處理中</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* History List */}
|
||||
<div className="space-y-4">
|
||||
{filteredHistory.map((item) => (
|
||||
<Card key={item.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center">
|
||||
{getTypeIcon(item.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium truncate">{item.title}</h3>
|
||||
<div className="flex items-center gap-4 mt-1">
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{item.date}
|
||||
</div>
|
||||
<Badge variant="outline">{item.type}</Badge>
|
||||
<Badge variant={item.status === "completed" ? "default" : "secondary"}>
|
||||
{item.status === "completed" ? "已完成" : "處理中"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{item.status === "completed" && (
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-primary">{item.score}</div>
|
||||
<Badge className={getGradeColor(item.grade)}>{item.grade}</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
{item.status === "completed" ? (
|
||||
<>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/results?id=${item.id}`}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
處理中...
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredHistory.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center py-12">
|
||||
<FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="font-medium mb-2">沒有找到相關記錄</h3>
|
||||
<p className="text-muted-foreground mb-4">嘗試調整搜尋條件或篩選器</p>
|
||||
<Button asChild>
|
||||
<Link href="/upload">開始新的評審</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user