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 combined: false
}) })
const [isLoadingTests, setIsLoadingTests] = useState(true) const [isLoadingTests, setIsLoadingTests] = useState(true)
const [questionCounts, setQuestionCounts] = useState({
logic: 0,
creative: 0,
total: 0
})
const dropdownRef = useRef<HTMLDivElement>(null) const dropdownRef = useRef<HTMLDivElement>(null)
const handleLogout = () => { const handleLogout = () => {
@@ -28,6 +33,29 @@ export default function HomePage() {
router.push("/") 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 () => { const checkTestCompletionStatus = async () => {
if (!user) return if (!user) return
@@ -62,8 +90,9 @@ export default function HomePage() {
} }
} }
// 檢查測驗完成狀態 // 獲取題目數量和檢查測驗完成狀態
useEffect(() => { useEffect(() => {
fetchQuestionCounts()
if (user) { if (user) {
checkTestCompletionStatus() checkTestCompletionStatus()
} }
@@ -290,180 +319,84 @@ export default function HomePage() {
<div className="container mx-auto"> <div className="container mx-auto">
{user?.role === "admin" ? ( {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"> <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 hover:border-primary/20"> {/* 綜合測試介紹 */}
<CardHeader className="text-center pb-4"> <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">
<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"> <CardHeader className="text-center pb-4">
<Brain className="w-6 h-6 text-primary" /> <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">
</div> <BarChart3 className="w-6 h-6 text-white" />
<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> </div>
<div className="flex justify-between items-center"> <CardTitle className="text-xl mb-2">綜合測試</CardTitle>
<span className="text-xs text-muted-foreground">題目類型</span> <CardDescription className="text-sm mb-3">
<span className="text-sm font-bold text-primary">單選題</span> 綜合測試包含邏輯思維和創意能力，附有完整分析報告，<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>
<div className="flex justify-between items-center"> </CardContent>
<span className="text-xs text-muted-foreground">預計時間</span> </Card>
<span className="text-sm font-bold text-primary">15-20分鐘</span> </div>
</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>
</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"> <div className="flex justify-center mb-8">
{/* Logic Test */} <div className="w-full max-w-2xl">
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20"> {/* Combined Test */}
<CardHeader className="text-center pb-4"> <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">
<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"> <CardHeader className="text-center pb-4">
<Brain className="w-6 h-6 text-primary" /> <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">
</div> <BarChart3 className="w-6 h-6 text-white" />
<CardTitle className="text-lg">邏輯思維測試</CardTitle> </div>
<CardDescription>評估邏輯推理能力</CardDescription> <CardTitle className="text-xl mb-2">綜合測試</CardTitle>
</CardHeader> <CardDescription className="text-sm mb-3">
<CardContent className="text-center"> 全卷設定作答時間 30 分鐘，<br />
{isLoadingTests ? ( 請誠實反映您平常的思考方式與感受，不需刻意迎合特定答案。
<Button disabled className="w-full"> </CardDescription>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div> </CardHeader>
載入中... <CardContent className="text-center">
</Button> <div className="flex justify-center gap-6">
) : testCompletionStatus.logic ? ( <div className="flex flex-col items-center">
<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"> <span className="text-xs text-muted-foreground mb-1">總題目數</span>
<Link href="/tests/logic"> <span className="text-lg font-bold text-primary">{questionCounts.total}題</span>
<CheckCircle className="w-4 h-4 mr-2" /> </div>
已完成測驗 <div className="flex flex-col items-center">
</Link> <span className="text-xs text-muted-foreground mb-1">預計時間</span>
</Button> <span className="text-lg font-bold text-accent">30分鐘</span>
) : ( </div>
<Button asChild className="w-full"> </div>
<Link href="/tests/logic">開始測試</Link> <div className="mt-6">
</Button> {isLoadingTests ? (
)} <Button disabled size="lg" className="w-full">
</CardContent> <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
</Card> 載入中...
</Button>
{/* Creative Test */} ) : testCompletionStatus.combined ? (
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-accent/20"> <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">
<CardHeader className="text-center pb-4"> <Link href="/tests/combined">
<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"> <CheckCircle className="w-4 h-4 mr-2" />
<Lightbulb className="w-6 h-6 text-accent" /> 已完成測驗
</div> </Link>
<CardTitle className="text-lg">創意能力測試</CardTitle> </Button>
<CardDescription>評估創新思維能力</CardDescription> ) : (
</CardHeader> <Button asChild size="lg" className="w-full">
<CardContent className="text-center"> <Link href="/tests/combined">開始測試</Link>
{isLoadingTests ? ( </Button>
<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> </div>
載入中... </CardContent>
</Button> </Card>
) : testCompletionStatus.creative ? ( </div>
<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> </div>
)} )}
</div> </div>