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

修改測驗入口

Browse Source
This commit is contained in:
吳佩庭
2025-10-12 00:07:45 +08:00
parent bbe350620c
commit 967541a492
1 changed files with 103 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
app/home/page.tsx
View File

@@ -21,6 +21,11 @@ export default function HomePage() {
combined: false
})
const [isLoadingTests, setIsLoadingTests] = useState(true)
const [questionCounts, setQuestionCounts] = useState({
logic: 0,
creative: 0,
total: 0
})
const dropdownRef = useRef<HTMLDivElement>(null)
const handleLogout = () => {
@@ -28,6 +33,29 @@ export default function HomePage() {
router.push("/")
}
// 獲取題目數量
const fetchQuestionCounts = async () => {
try {
// 獲取邏輯題目數量
const logicResponse = await fetch('/api/logic-questions')
const logicData = await logicResponse.json()
const logicCount = logicData.success ? logicData.count || logicData.questions?.length || 0 : 0
// 獲取創意題目數量
const creativeResponse = await fetch('/api/creative-questions')
const creativeData = await creativeResponse.json()
const creativeCount = creativeData.success ? creativeData.questions?.length || 0 : 0
setQuestionCounts({
logic: logicCount,
creative: creativeCount,
total: logicCount + creativeCount
})
} catch (error) {
console.error('Error fetching question counts:', error)
}
}
// 檢查用戶測驗完成狀態
const checkTestCompletionStatus = async () => {
if (!user) return
@@ -62,8 +90,9 @@ export default function HomePage() {
}
}
// 檢查測驗完成狀態
// 獲取題目數量和檢查測驗完成狀態
useEffect(() => {
fetchQuestionCounts()
if (user) {
checkTestCompletionStatus()
}
@@ -290,180 +319,84 @@ export default function HomePage() {
<div className="container mx-auto">
{user?.role === "admin" ? (
// 管理者看到的介紹卡片
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 max-w-6xl mx-auto">
{/* 邏輯思維測試介紹 */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/20 transition-colors">
<Brain className="w-6 h-6 text-primary" />
</div>
<CardTitle className="text-lg">邏輯思維測試</CardTitle>
<CardDescription>評估邏輯推理、分析判斷和問題解決能力</CardDescription>
</CardHeader>
<CardContent className="text-center">
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">題目數量</span>
<span className="text-sm font-bold text-primary">10題</span>
<div className="flex justify-center mb-8">
<div className="w-full max-w-2xl">
{/* 綜合測試介紹 */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">題目類型</span>
<span className="text-sm font-bold text-primary">單選題</span>
<CardTitle className="text-xl mb-2">綜合測試</CardTitle>
<CardDescription className="text-sm mb-3">
綜合測試包含邏輯思維和創意能力，附有完整分析報告，<br />
全卷設定作答時間 30 分鐘。
</CardDescription>
</CardHeader>
<CardContent className="text-center">
<div className="flex justify-center gap-6">
<div className="flex flex-col items-center">
<span className="text-xs text-muted-foreground mb-1">總題目數</span>
<span className="text-lg font-bold text-primary">{questionCounts.total}題</span>
</div>
<div className="flex flex-col items-center">
<span className="text-xs text-muted-foreground mb-1">預計時間</span>
<span className="text-lg font-bold text-accent">30分鐘</span>
</div>
</div>
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">預計時間</span>
<span className="text-sm font-bold text-primary">15-20分鐘</span>
</div>
</div>
</CardContent>
</Card>
{/* 創意能力測試介紹 */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-accent/20">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent/20 transition-colors">
<Lightbulb className="w-6 h-6 text-accent" />
</div>
<CardTitle className="text-lg">創意能力測試</CardTitle>
<CardDescription>評估創新思維、想像力和創造性解決問題的能力</CardDescription>
</CardHeader>
<CardContent className="text-center">
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">題目數量</span>
<span className="text-sm font-bold text-accent">20題</span>
</div>
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">題目類型</span>
<span className="text-sm font-bold text-accent">5級量表</span>
</div>
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">預計時間</span>
<span className="text-sm font-bold text-accent">25-30分鐘</span>
</div>
</div>
</CardContent>
</Card>
{/* 綜合測試介紹 */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5 md:col-span-2 lg:col-span-1">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<CardTitle className="text-lg">綜合測試</CardTitle>
<CardDescription>完整的邏輯思維 + 創意能力雙重評估，獲得全面的能力報告</CardDescription>
</CardHeader>
<CardContent className="text-center">
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">總題目數</span>
<span className="text-sm font-bold text-primary">30題</span>
</div>
<div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">預計時間</span>
<span className="text-sm font-bold text-accent">45分鐘</span>
</div>
</div>
</CardContent>
</Card>
</CardContent>
</Card>
</div>
</div>
) : (
// 一般用戶看到的測試功能
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 max-w-6xl mx-auto">
{/* Logic Test */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/20 transition-colors">
<Brain className="w-6 h-6 text-primary" />
</div>
<CardTitle className="text-lg">邏輯思維測試</CardTitle>
<CardDescription>評估邏輯推理能力</CardDescription>
</CardHeader>
<CardContent className="text-center">
{isLoadingTests ? (
<Button disabled className="w-full">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
載入中...
</Button>
) : testCompletionStatus.logic ? (
<Button asChild variant="outline" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
<Link href="/tests/logic">
<CheckCircle className="w-4 h-4 mr-2" />
已完成測驗
</Link>
</Button>
) : (
<Button asChild className="w-full">
<Link href="/tests/logic">開始測試</Link>
</Button>
)}
</CardContent>
</Card>
{/* Creative Test */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-accent/20">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent/20 transition-colors">
<Lightbulb className="w-6 h-6 text-accent" />
</div>
<CardTitle className="text-lg">創意能力測試</CardTitle>
<CardDescription>評估創新思維能力</CardDescription>
</CardHeader>
<CardContent className="text-center">
{isLoadingTests ? (
<Button disabled className="w-full">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
載入中...
</Button>
) : testCompletionStatus.creative ? (
<Button asChild variant="outline" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
<Link href="/tests/creative">
<CheckCircle className="w-4 h-4 mr-2" />
已完成測驗
</Link>
</Button>
) : (
<Button
asChild
variant="outline"
className="w-full border-accent text-accent hover:bg-accent hover:text-accent-foreground bg-transparent"
>
<Link href="/tests/creative">開始測試</Link>
</Button>
)}
</CardContent>
</Card>
{/* Combined Test */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5 md:col-span-2 lg:col-span-1">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<CardTitle className="text-lg">綜合測試</CardTitle>
<CardDescription>完整能力評估</CardDescription>
</CardHeader>
<CardContent className="text-center">
{isLoadingTests ? (
<Button disabled size="lg" className="w-full">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
載入中...
</Button>
) : testCompletionStatus.combined ? (
<Button asChild variant="outline" size="lg" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
<Link href="/tests/combined">
<CheckCircle className="w-4 h-4 mr-2" />
已完成測驗
</Link>
</Button>
) : (
<Button asChild size="lg" className="w-full">
<Link href="/tests/combined">開始測試</Link>
</Button>
)}
</CardContent>
</Card>
<div className="flex justify-center mb-8">
<div className="w-full max-w-2xl">
{/* Combined Test */}
<Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5">
<CardHeader className="text-center pb-4">
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<CardTitle className="text-xl mb-2">綜合測試</CardTitle>
<CardDescription className="text-sm mb-3">
全卷設定作答時間 30 分鐘，<br />
請誠實反映您平常的思考方式與感受，不需刻意迎合特定答案。
</CardDescription>
</CardHeader>
<CardContent className="text-center">
<div className="flex justify-center gap-6">
<div className="flex flex-col items-center">
<span className="text-xs text-muted-foreground mb-1">總題目數</span>
<span className="text-lg font-bold text-primary">{questionCounts.total}題</span>
</div>
<div className="flex flex-col items-center">
<span className="text-xs text-muted-foreground mb-1">預計時間</span>
<span className="text-lg font-bold text-accent">30分鐘</span>
</div>
</div>
<div className="mt-6">
{isLoadingTests ? (
<Button disabled size="lg" className="w-full">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
載入中...
</Button>
) : testCompletionStatus.combined ? (
<Button asChild variant="outline" size="lg" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
<Link href="/tests/combined">
<CheckCircle className="w-4 h-4 mr-2" />
已完成測驗
</Link>
</Button>
) : (
<Button asChild size="lg" className="w-full">
<Link href="/tests/combined">開始測試</Link>
</Button>
)}
</div>
</CardContent>
</Card>
</div>
</div>
)}
</div>