petty09190/hr-assessment-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
吳佩庭
2025-09-25 12:30:25 +08:00
commit 2765d9df54
100 changed files with 16023 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
app/results/combined/page.tsx Normal file
View File

@@ -0,0 +1,295 @@
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Brain, Lightbulb, BarChart3, Home, RotateCcw, TrendingUp, Target, Award } from "lucide-react"
import Link from "next/link"
import { getRecommendations } from "@/lib/utils/score-calculator"
interface CombinedTestResults {
type: string
logicScore: number
creativityScore: number
overallScore: number
level: string
description: string
breakdown: {
logic: number
creativity: number
balance: number
}
logicAnswers: Record<number, string>
creativeAnswers: Record<number, number>
logicCorrect: number
creativityTotal: number
creativityMaxScore: number
completedAt: string
}
export default function CombinedResultsPage() {
const [results, setResults] = useState<CombinedTestResults | null>(null)
useEffect(() => {
const savedResults = localStorage.getItem("combinedTestResults")
if (savedResults) {
setResults(JSON.parse(savedResults))
}
}, [])
if (!results) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<Card className="w-full max-w-md">
<CardContent className="text-center py-8">
<p className="text-muted-foreground mb-4">未找到测试结果</p>
<Button asChild>
<Link href="/tests/combined">重新测试</Link>
</Button>
</CardContent>
</Card>
</div>
)
}
const recommendations = getRecommendations(results.logicScore, results.creativityScore)
const getScoreColor = (score: number) => {
if (score >= 90) return "text-green-600"
if (score >= 80) return "text-blue-600"
if (score >= 70) return "text-yellow-600"
if (score >= 60) return "text-orange-600"
return "text-red-600"
}
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-lg flex items-center justify-center">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<div>
<h1 className="text-xl font-bold text-foreground">综合能力测试结果</h1>
<p className="text-sm text-muted-foreground">
完成时间：{new Date(results.completedAt).toLocaleString("zh-CN")}
</p>
</div>
</div>
</div>
</header>
<div className="container mx-auto px-4 py-8">
<div className="max-w-6xl mx-auto space-y-8">
{/* Overall Score */}
<Card className="text-center bg-gradient-to-br from-primary/5 to-accent/5 border-2 border-primary/20">
<CardHeader>
<div className="w-32 h-32 bg-gradient-to-r from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-4xl font-bold text-white">{results.overallScore}</span>
</div>
<CardTitle className="text-4xl mb-2">综合评估完成！</CardTitle>
<div className="flex items-center justify-center gap-2 mb-4">
<Badge className="bg-gradient-to-r from-primary to-accent text-white text-xl px-6 py-2">
{results.level}
</Badge>
</div>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">{results.description}</p>
</CardHeader>
<CardContent>
<Progress value={results.overallScore} className="h-4 mb-6" />
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center">
<div className={`text-3xl font-bold mb-2 ${getScoreColor(results.logicScore)}`}>
{results.logicScore}
</div>
<div className="text-sm text-muted-foreground">逻辑思维</div>
</div>
<div className="text-center">
<div className={`text-3xl font-bold mb-2 ${getScoreColor(results.creativityScore)}`}>
{results.creativityScore}
</div>
<div className="text-sm text-muted-foreground">创意能力</div>
</div>
<div className="text-center">
<div className={`text-3xl font-bold mb-2 ${getScoreColor(results.breakdown.balance)}`}>
{results.breakdown.balance}
</div>
<div className="text-sm text-muted-foreground">能力平衡</div>
</div>
</div>
</CardContent>
</Card>
{/* Detailed Breakdown */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Logic Results */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Brain className="w-5 h-5 text-primary" />
逻辑思维测试
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-muted-foreground">得分</span>
<span className={`text-2xl font-bold ${getScoreColor(results.logicScore)}`}>
{results.logicScore}
</span>
</div>
<Progress value={results.logicScore} className="h-3" />
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="text-center p-3 bg-muted/50 rounded">
<div className="font-bold text-green-600">{results.logicCorrect}</div>
<div className="text-muted-foreground">答对题数</div>
</div>
<div className="text-center p-3 bg-muted/50 rounded">
<div className="font-bold text-primary">10</div>
<div className="text-muted-foreground">总题数</div>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Creative Results */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Lightbulb className="w-5 h-5 text-accent" />
创意能力测试
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-muted-foreground">得分</span>
<span className={`text-2xl font-bold ${getScoreColor(results.creativityScore)}`}>
{results.creativityScore}
</span>
</div>
<Progress value={results.creativityScore} className="h-3" />
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="text-center p-3 bg-muted/50 rounded">
<div className="font-bold text-accent">{results.creativityTotal}</div>
<div className="text-muted-foreground">总得分</div>
</div>
<div className="text-center p-3 bg-muted/50 rounded">
<div className="font-bold text-primary">{results.creativityMaxScore}</div>
<div className="text-muted-foreground">满分</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Ability Analysis */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="w-5 h-5" />
能力分析
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center p-6 border rounded-lg">
<Brain className="w-12 h-12 text-primary mx-auto mb-4" />
<h3 className="font-semibold mb-2">逻辑思维</h3>
<div className={`text-2xl font-bold mb-2 ${getScoreColor(results.logicScore)}`}>
{results.logicScore}分
</div>
<Progress value={results.logicScore} className="h-2 mb-2" />
<p className="text-sm text-muted-foreground">
{results.logicScore >= 80 ? "表现优秀" : results.logicScore >= 60 ? "表现良好" : "需要提升"}
</p>
</div>
<div className="text-center p-6 border rounded-lg">
<Lightbulb className="w-12 h-12 text-accent mx-auto mb-4" />
<h3 className="font-semibold mb-2">创意能力</h3>
<div className={`text-2xl font-bold mb-2 ${getScoreColor(results.creativityScore)}`}>
{results.creativityScore}分
</div>
<Progress value={results.creativityScore} className="h-2 mb-2" />
<p className="text-sm text-muted-foreground">
{results.creativityScore >= 80
? "表现优秀"
: results.creativityScore >= 60
? "表现良好"
: "需要提升"}
</p>
</div>
<div className="text-center p-6 border rounded-lg">
<Target className="w-12 h-12 text-green-600 mx-auto mb-4" />
<h3 className="font-semibold mb-2">能力平衡</h3>
<div className={`text-2xl font-bold mb-2 ${getScoreColor(results.breakdown.balance)}`}>
{results.breakdown.balance}分
</div>
<Progress value={results.breakdown.balance} className="h-2 mb-2" />
<p className="text-sm text-muted-foreground">
{results.breakdown.balance >= 80
? "非常均衡"
: results.breakdown.balance >= 60
? "相对均衡"
: "发展不均"}
</p>
</div>
</div>
</CardContent>
</Card>
{/* Recommendations */}
{recommendations.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Award className="w-5 h-5" />
发展建议
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{recommendations.map((recommendation, index) => (
<div key={index} className="flex items-start gap-3 p-4 bg-muted/50 rounded-lg">
<div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs font-bold text-primary-foreground">{index + 1}</span>
</div>
<p className="text-sm leading-relaxed">{recommendation}</p>
</div>
))}
</div>
</CardContent>
</Card>
)}
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg">
<Link href="/">
<Home className="w-4 h-4 mr-2" />
返回首页
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/combined">
<RotateCcw className="w-4 h-4 mr-2" />
重新测试
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/results">查看所有成绩</Link>
</Button>
</div>
</div>
</div>
</div>
)
}

225
app/results/creative/page.tsx Normal file
View File

@@ -0,0 +1,225 @@
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Lightbulb, Home, RotateCcw, TrendingUp } from "lucide-react"
import Link from "next/link"
import { creativeQuestions } from "@/lib/questions/creative-questions"
interface CreativeTestResults {
type: string
score: number
totalScore: number
maxScore: number
answers: Record<number, number>
completedAt: string
}
export default function CreativeResultsPage() {
const [results, setResults] = useState<CreativeTestResults | null>(null)
useEffect(() => {
const savedResults = localStorage.getItem("creativeTestResults")
if (savedResults) {
setResults(JSON.parse(savedResults))
}
}, [])
if (!results) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<Card className="w-full max-w-md">
<CardContent className="text-center py-8">
<p className="text-muted-foreground mb-4">未找到测试结果</p>
<Button asChild>
<Link href="/tests/creative">重新测试</Link>
</Button>
</CardContent>
</Card>
</div>
)
}
const getCreativityLevel = (score: number) => {
if (score >= 85) return { level: "极具创意", color: "bg-purple-500", description: "拥有卓越的创新思维和想象力" }
if (score >= 75) return { level: "很有创意", color: "bg-blue-500", description: "具备较强的创造性思维能力" }
if (score >= 65) return { level: "有一定创意", color: "bg-green-500", description: "具有一定的创新潜力" }
if (score >= 50) return { level: "创意一般", color: "bg-yellow-500", description: "创造性思维有待提升" }
return { level: "缺乏创意", color: "bg-red-500", description: "需要培养创新思维能力" }
}
const creativityLevel = getCreativityLevel(results.score)
// Calculate category scores
const categoryScores = {
innovation: { total: 0, count: 0, name: "创新能力" },
imagination: { total: 0, count: 0, name: "想象力" },
flexibility: { total: 0, count: 0, name: "灵活性" },
originality: { total: 0, count: 0, name: "原创性" },
}
creativeQuestions.forEach((question, index) => {
const answer = results.answers[index] || 1
const score = question.isReverse ? 6 - answer : answer
categoryScores[question.category].total += score
categoryScores[question.category].count += 1
})
const categoryResults = Object.entries(categoryScores).map(([key, data]) => ({
category: key,
name: data.name,
score: data.count > 0 ? Math.round((data.total / (data.count * 5)) * 100) : 0,
rawScore: data.total,
maxRawScore: data.count * 5,
}))
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-accent rounded-lg flex items-center justify-center">
<Lightbulb className="w-6 h-6 text-accent-foreground" />
</div>
<div>
<h1 className="text-xl font-bold text-foreground">创意能力测试结果</h1>
<p className="text-sm text-muted-foreground">
完成时间：{new Date(results.completedAt).toLocaleString("zh-CN")}
</p>
</div>
</div>
</div>
</header>
<div className="container mx-auto px-4 py-8">
<div className="max-w-4xl mx-auto space-y-8">
{/* Score Overview */}
<Card className="text-center">
<CardHeader>
<div
className={`w-24 h-24 ${creativityLevel.color} rounded-full flex items-center justify-center mx-auto mb-4`}
>
<span className="text-3xl font-bold text-white">{results.score}</span>
</div>
<CardTitle className="text-3xl mb-2">创意测试完成！</CardTitle>
<div className="flex items-center justify-center gap-2 mb-4">
<Badge variant="secondary" className="text-lg px-4 py-1">
{creativityLevel.level}
</Badge>
</div>
<p className="text-lg text-muted-foreground">{creativityLevel.description}</p>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div className="text-center">
<div className="text-2xl font-bold text-accent mb-1">{results.totalScore}</div>
<div className="text-sm text-muted-foreground">总得分</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-primary mb-1">{results.maxScore}</div>
<div className="text-sm text-muted-foreground">满分</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600 mb-1">
{Math.round((results.totalScore / results.maxScore) * 100)}%
</div>
<div className="text-sm text-muted-foreground">得分率</div>
</div>
</div>
<Progress value={results.score} className="h-3 mb-4" />
</CardContent>
</Card>
{/* Category Analysis */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="w-5 h-5" />
能力维度分析
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{categoryResults.map((category) => (
<div key={category.category} className="space-y-3">
<div className="flex justify-between items-center">
<h3 className="font-medium">{category.name}</h3>
<Badge variant="outline">{category.score}分</Badge>
</div>
<Progress value={category.score} className="h-2" />
<p className="text-sm text-muted-foreground">
{category.rawScore} / {category.maxRawScore} 分
</p>
</div>
))}
</div>
</CardContent>
</Card>
{/* Detailed Feedback */}
<Card>
<CardHeader>
<CardTitle>详细反馈</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="p-4 bg-muted/50 rounded-lg">
<h3 className="font-medium mb-2">创意能力评估</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
基于您的测试结果，您在创意思维方面表现为"{creativityLevel.level}"水平。
{results.score >= 75 &&
"您具备出色的创新思维能力，善于从不同角度思考问题，能够产生独特的想法和解决方案。"}
{results.score >= 50 &&
results.score < 75 &&
"您具有一定的创造性思维潜力，建议多参与创新活动，培养发散性思维。"}
{results.score < 50 && "建议您多接触创新思维训练，培养好奇心和探索精神，提升创造性解决问题的能力。"}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{categoryResults.map((category) => (
<div key={category.category} className="p-4 border rounded-lg">
<h4 className="font-medium mb-2">{category.name}</h4>
<div className="flex items-center gap-2 mb-2">
<Progress value={category.score} className="flex-1 h-2" />
<span className="text-sm font-medium">{category.score}%</span>
</div>
<p className="text-xs text-muted-foreground">
{category.score >= 80 && "表现优秀，继续保持"}
{category.score >= 60 && category.score < 80 && "表现良好，有提升空间"}
{category.score < 60 && "需要重点提升"}
</p>
</div>
))}
</div>
</div>
</CardContent>
</Card>
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg">
<Link href="/">
<Home className="w-4 h-4 mr-2" />
返回首页
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/creative">
<RotateCcw className="w-4 h-4 mr-2" />
重新测试
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/logic">开始逻辑测试</Link>
</Button>
</div>
</div>
</div>
</div>
)
}

194
app/results/logic/page.tsx Normal file
View File

@@ -0,0 +1,194 @@
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { CheckCircle, XCircle, Brain, Home, RotateCcw } from "lucide-react"
import Link from "next/link"
import { logicQuestions } from "@/lib/questions/logic-questions"
interface LogicTestResults {
type: string
score: number
correctAnswers: number
totalQuestions: number
answers: Record<number, string>
completedAt: string
}
export default function LogicResultsPage() {
const [results, setResults] = useState<LogicTestResults | null>(null)
useEffect(() => {
const savedResults = localStorage.getItem("logicTestResults")
if (savedResults) {
setResults(JSON.parse(savedResults))
}
}, [])
if (!results) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<Card className="w-full max-w-md">
<CardContent className="text-center py-8">
<p className="text-muted-foreground mb-4">未找到测试结果</p>
<Button asChild>
<Link href="/tests/logic">重新测试</Link>
</Button>
</CardContent>
</Card>
</div>
)
}
const getScoreLevel = (score: number) => {
if (score >= 90) return { level: "优秀", color: "bg-green-500", description: "逻辑思维能力出色" }
if (score >= 80) return { level: "良好", color: "bg-blue-500", description: "逻辑思维能力较强" }
if (score >= 70) return { level: "中等", color: "bg-yellow-500", description: "逻辑思维能力一般" }
if (score >= 60) return { level: "及格", color: "bg-orange-500", description: "逻辑思维能力需要提升" }
return { level: "不及格", color: "bg-red-500", description: "逻辑思维能力有待加强" }
}
const scoreLevel = getScoreLevel(results.score)
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
<Brain className="w-6 h-6 text-primary-foreground" />
</div>
<div>
<h1 className="text-xl font-bold text-foreground">逻辑思维测试结果</h1>
<p className="text-sm text-muted-foreground">
完成时间：{new Date(results.completedAt).toLocaleString("zh-CN")}
</p>
</div>
</div>
</div>
</header>
<div className="container mx-auto px-4 py-8">
<div className="max-w-4xl mx-auto space-y-8">
{/* Score Overview */}
<Card className="text-center">
<CardHeader>
<div
className={`w-24 h-24 ${scoreLevel.color} rounded-full flex items-center justify-center mx-auto mb-4`}
>
<span className="text-3xl font-bold text-white">{results.score}</span>
</div>
<CardTitle className="text-3xl mb-2">测试完成！</CardTitle>
<div className="flex items-center justify-center gap-2 mb-4">
<Badge variant="secondary" className="text-lg px-4 py-1">
{scoreLevel.level}
</Badge>
</div>
<p className="text-lg text-muted-foreground">{scoreLevel.description}</p>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div className="text-center">
<div className="text-2xl font-bold text-green-600 mb-1">{results.correctAnswers}</div>
<div className="text-sm text-muted-foreground">答对题数</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-primary mb-1">{results.totalQuestions}</div>
<div className="text-sm text-muted-foreground">总题数</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-accent mb-1">
{Math.round((results.correctAnswers / results.totalQuestions) * 100)}%
</div>
<div className="text-sm text-muted-foreground">正确率</div>
</div>
</div>
<Progress value={results.score} className="h-3 mb-4" />
</CardContent>
</Card>
{/* Detailed Results */}
<Card>
<CardHeader>
<CardTitle>详细结果</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
{logicQuestions.map((question, index) => {
const userAnswer = results.answers[index]
const isCorrect = userAnswer === question.correctAnswer
const correctOption = question.options.find((opt) => opt.value === question.correctAnswer)
const userOption = question.options.find((opt) => opt.value === userAnswer)
return (
<div key={question.id} className="border rounded-lg p-4">
<div className="flex items-start gap-3 mb-3">
<div className="flex-shrink-0 mt-1">
{isCorrect ? (
<CheckCircle className="w-5 h-5 text-green-500" />
) : (
<XCircle className="w-5 h-5 text-red-500" />
)}
</div>
<div className="flex-1">
<h3 className="font-medium mb-2 text-balance">
第{index + 1}题：{question.question}
</h3>
<div className="space-y-2 text-sm">
<div className="flex items-center gap-2">
<span className="text-muted-foreground">你的答案：</span>
<Badge variant={isCorrect ? "default" : "destructive"}>
{userOption?.text || "未作答"}
</Badge>
</div>
{!isCorrect && (
<div className="flex items-center gap-2">
<span className="text-muted-foreground">正确答案：</span>
<Badge variant="outline" className="border-green-500 text-green-700">
{correctOption?.text}
</Badge>
</div>
)}
{question.explanation && !isCorrect && (
<div className="mt-2 p-3 bg-muted/50 rounded text-sm">
<strong>解析：</strong>
{question.explanation}
</div>
)}
</div>
</div>
</div>
</div>
)
})}
</div>
</CardContent>
</Card>
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg">
<Link href="/">
<Home className="w-4 h-4 mr-2" />
返回首页
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/logic">
<RotateCcw className="w-4 h-4 mr-2" />
重新测试
</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/creative">开始创意测试</Link>
</Button>
</div>
</div>
</div>
</div>
)
}

376
app/results/page.tsx Normal file
View File

@@ -0,0 +1,376 @@
"use client"
import { useEffect, useState } from "react"
import { ProtectedRoute } from "@/components/protected-route"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Brain, Lightbulb, BarChart3, Calendar, TrendingUp, Users, Eye, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useAuth } from "@/lib/hooks/use-auth"
interface TestResult {
type: "logic" | "creative" | "combined"
score: number
completedAt: string
details?: any
}
export default function ResultsPage() {
return (
<ProtectedRoute>
<ResultsContent />
</ProtectedRoute>
)
}
function ResultsContent() {
const { user } = useAuth()
const [results, setResults] = useState<TestResult[]>([])
const [stats, setStats] = useState({
totalTests: 0,
averageScore: 0,
bestScore: 0,
lastTestDate: null as string | null,
})
useEffect(() => {
// Load all test results from localStorage
const logicResults = localStorage.getItem("logicTestResults")
const creativeResults = localStorage.getItem("creativeTestResults")
const combinedResults = localStorage.getItem("combinedTestResults")
const allResults: TestResult[] = []
if (logicResults) {
const data = JSON.parse(logicResults)
allResults.push({
type: "logic",
score: data.score,
completedAt: data.completedAt,
details: data,
})
}
if (creativeResults) {
const data = JSON.parse(creativeResults)
allResults.push({
type: "creative",
score: data.score,
completedAt: data.completedAt,
details: data,
})
}
if (combinedResults) {
const data = JSON.parse(combinedResults)
allResults.push({
type: "combined",
score: data.overallScore,
completedAt: data.completedAt,
details: data,
})
}
// Sort by completion date (newest first)
allResults.sort((a, b) => new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime())
setResults(allResults)
// Calculate statistics
if (allResults.length > 0) {
const totalScore = allResults.reduce((sum, result) => sum + result.score, 0)
const averageScore = Math.round(totalScore / allResults.length)
const bestScore = Math.max(...allResults.map((r) => r.score))
const lastTestDate = allResults[0].completedAt
setStats({
totalTests: allResults.length,
averageScore,
bestScore,
lastTestDate,
})
}
}, [])
const getTestTypeInfo = (type: string) => {
switch (type) {
case "logic":
return {
name: "邏輯思維測試",
icon: Brain,
color: "bg-primary",
textColor: "text-primary",
link: "/results/logic",
}
case "creative":
return {
name: "創意能力測試",
icon: Lightbulb,
color: "bg-accent",
textColor: "text-accent",
link: "/results/creative",
}
case "combined":
return {
name: "綜合能力測試",
icon: BarChart3,
color: "bg-gradient-to-r from-primary to-accent",
textColor: "text-primary",
link: "/results/combined",
}
default:
return {
name: "未知測試",
icon: BarChart3,
color: "bg-muted",
textColor: "text-muted-foreground",
link: "#",
}
}
}
const getScoreLevel = (score: number) => {
if (score >= 90) return { level: "優秀", color: "bg-green-500" }
if (score >= 80) return { level: "良好", color: "bg-blue-500" }
if (score >= 70) return { level: "中等", color: "bg-yellow-500" }
if (score >= 60) return { level: "及格", color: "bg-orange-500" }
return { level: "不及格", color: "bg-red-500" }
}
if (results.length === 0) {
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>
<Link href="/dashboard">
<ArrowLeft className="w-4 h-4 mr-2" />
返回儀表板
</Link>
</Button>
<div>
<h1 className="text-xl font-bold text-foreground">我的測試結果</h1>
<p className="text-sm text-muted-foreground">查看您的測試歷史和成績分析</p>
</div>
</div>
</div>
</header>
<div className="container mx-auto px-4 py-16">
<div className="max-w-2xl mx-auto text-center">
<div className="w-24 h-24 bg-muted rounded-full flex items-center justify-center mx-auto mb-6">
<BarChart3 className="w-12 h-12 text-muted-foreground" />
</div>
<h2 className="text-2xl font-bold text-foreground mb-4">暫無測試記錄</h2>
<p className="text-muted-foreground mb-8">您還沒有完成任何測試，開始您的第一次評估吧！</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg">
<Link href="/tests/logic">邏輯思維測試</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/creative">創意能力測試</Link>
</Button>
<Button asChild variant="outline" size="lg">
<Link href="/tests/combined">綜合能力測試</Link>
</Button>
</div>
</div>
</div>
</div>
)
}
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>
<Link href="/dashboard">
<ArrowLeft className="w-4 h-4 mr-2" />
返回儀表板
</Link>
</Button>
<div>
<h1 className="text-xl font-bold text-foreground">我的測試結果</h1>
<p className="text-sm text-muted-foreground">查看您的測試歷史和成績分析</p>
</div>
</div>
</div>
</header>
<div className="container mx-auto px-4 py-8">
<div className="max-w-6xl mx-auto space-y-8">
{/* User Info */}
{user && (
<Card>
<CardContent className="p-6">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center">
<Users className="w-6 h-6 text-primary-foreground" />
</div>
<div>
<h2 className="text-xl font-semibold">{user.name}</h2>
<p className="text-muted-foreground">
{user.department} • {user.role === "admin" ? "管理員" : "一般用戶"}
</p>
</div>
</div>
</CardContent>
</Card>
)}
{/* Statistics Overview */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<Card>
<CardContent className="p-6 text-center">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
<Users className="w-6 h-6 text-primary" />
</div>
<div className="text-2xl font-bold text-foreground mb-1">{stats.totalTests}</div>
<div className="text-sm text-muted-foreground">完成測試</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 text-center">
<div className="w-12 h-12 bg-blue-500/10 rounded-full flex items-center justify-center mx-auto mb-3">
<TrendingUp className="w-6 h-6 text-blue-500" />
</div>
<div className="text-2xl font-bold text-foreground mb-1">{stats.averageScore}</div>
<div className="text-sm text-muted-foreground">平均分數</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 text-center">
<div className="w-12 h-12 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-3">
<BarChart3 className="w-6 h-6 text-green-500" />
</div>
<div className="text-2xl font-bold text-foreground mb-1">{stats.bestScore}</div>
<div className="text-sm text-muted-foreground">最高分數</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 text-center">
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3">
<Calendar className="w-6 h-6 text-accent" />
</div>
<div className="text-sm font-bold text-foreground mb-1">
{stats.lastTestDate ? new Date(stats.lastTestDate).toLocaleDateString("zh-TW") : "無"}
</div>
<div className="text-sm text-muted-foreground">最近測試</div>
</CardContent>
</Card>
</div>
{/* Test History */}
<Card>
<CardHeader>
<CardTitle>測試歷史</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{results.map((result, index) => {
const testInfo = getTestTypeInfo(result.type)
const scoreLevel = getScoreLevel(result.score)
const Icon = testInfo.icon
return (
<div
key={index}
className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50 transition-colors"
>
<div className="flex items-center gap-4">
<div className={`w-12 h-12 ${testInfo.color} rounded-lg flex items-center justify-center`}>
<Icon className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="font-medium text-foreground">{testInfo.name}</h3>
<p className="text-sm text-muted-foreground">
完成時間：{new Date(result.completedAt).toLocaleString("zh-TW")}
</p>
</div>
</div>
<div className="flex items-center gap-4">
<div className="text-right">
<div className="text-2xl font-bold text-foreground">{result.score}</div>
<Badge className={`${scoreLevel.color} text-white`}>{scoreLevel.level}</Badge>
</div>
<Button asChild variant="outline" size="sm">
<Link href={testInfo.link}>
<Eye className="w-4 h-4 mr-2" />
查看詳情
</Link>
</Button>
</div>
</div>
)
})}
</div>
</CardContent>
</Card>
{/* Performance Chart */}
<Card>
<CardHeader>
<CardTitle>成績趨勢</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{results.map((result, index) => {
const testInfo = getTestTypeInfo(result.type)
return (
<div key={index} className="space-y-2">
<div className="flex justify-between items-center">
<span className={`text-sm font-medium ${testInfo.textColor}`}>{testInfo.name}</span>
<span className="text-sm font-medium">{result.score}分</span>
</div>
<Progress value={result.score} className="h-2" />
</div>
)
})}
</div>
</CardContent>
</Card>
{/* Quick Actions */}
<Card>
<CardHeader>
<CardTitle>繼續測試</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Button asChild className="h-auto p-4">
<Link href="/tests/logic" className="flex flex-col items-center gap-2">
<Brain className="w-8 h-8" />
<span>邏輯思維測試</span>
</Link>
</Button>
<Button asChild variant="outline" className="h-auto p-4 bg-transparent">
<Link href="/tests/creative" className="flex flex-col items-center gap-2">
<Lightbulb className="w-8 h-8" />
<span>創意能力測試</span>
</Link>
</Button>
<Button asChild variant="outline" className="h-auto p-4 bg-transparent">
<Link href="/tests/combined" className="flex flex-col items-center gap-2">
<BarChart3 className="w-8 h-8" />
<span>綜合能力測試</span>
</Link>
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
)
}