修正完整的管理者查看詳細功能

This commit is contained in:
2025-10-04 21:23:43 +08:00
parent 8965ec85f7
commit 40562c1bbd
3 changed files with 415 additions and 79 deletions

View File

@@ -55,6 +55,7 @@ interface Question {
userAnswer?: string | number
isCorrect?: boolean
score?: number
category?: 'innovation' | 'imagination' | 'flexibility' | 'originality'
created_at: string
}
@@ -394,15 +395,16 @@ function AdminResultDetailContent() {
</CardContent>
</Card>
{/* Score Overview */}
<Card className="text-center">
{/* Logic Test Overview */}
{result.type === 'logic' && (
<Card className="text-center mb-6">
<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">{result.score}</span>
</div>
<CardTitle className="text-3xl mb-2"></CardTitle>
<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}
@@ -418,25 +420,6 @@ function AdminResultDetailContent() {
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4 mb-6">
{result.type === 'creative' ? (
<>
<div className="text-center">
<div className="text-2xl font-bold text-green-600 mb-1">{displayTotalScore}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-primary mb-1">{displayMaxScore}</div>
<div className="text-xs text-muted-foreground">滿</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-accent mb-1">
{displayScorePercentage}%
</div>
<div className="text-xs text-muted-foreground"></div>
</div>
</>
) : (
<>
<div className="text-center">
<div className="text-2xl font-bold text-green-600 mb-1">{correctAnswers}</div>
<div className="text-xs text-muted-foreground"></div>
@@ -451,25 +434,55 @@ function AdminResultDetailContent() {
</div>
<div className="text-xs text-muted-foreground"></div>
</div>
</>
)}
</div>
<Progress value={result.score} className="h-3 mb-4" />
</CardContent>
</Card>
)}
{/* Combined Test Analysis */}
{result.type === 'combined' && result.details && (
<CombinedAnalysis
overallScore={result.score}
logicScore={result.details.logicScore}
creativityScore={result.details.creativeScore}
balanceScore={result.details.abilityBalance}
level={getScoreLevel(result.score, result.type).level}
description={getScoreLevel(result.score, result.type).description}
logicBreakdown={result.details.breakdown}
creativityBreakdown={result.details.breakdown}
/>
{/* Creative Test Overview */}
{result.type === 'creative' && (
<Card className="text-center mb-6">
<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">{result.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 mb-3">{scoreLevel.description}</p>
<div className="bg-muted/50 rounded-lg p-4 text-sm">
<p className="text-muted-foreground">
<span className="font-medium">👉 </span>
{scoreLevel.suggestion}
</p>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4 mb-6">
<div className="text-center">
<div className="text-2xl font-bold text-green-600 mb-1">{displayTotalScore}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-primary mb-1">{displayMaxScore}</div>
<div className="text-xs text-muted-foreground">滿</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-accent mb-1">
{displayScorePercentage}%
</div>
<div className="text-xs text-muted-foreground"></div>
</div>
</div>
<Progress value={result.score} className="h-3 mb-4" />
</CardContent>
</Card>
)}
{/* Creative Analysis for Creative Tests */}
@@ -483,6 +496,31 @@ function AdminResultDetailContent() {
/>
)}
{/* Combined Test Analysis */}
{result.type === 'combined' && result.details && (
<CombinedAnalysis
overallScore={result.score}
logicScore={result.details.logicScore || 0}
creativityScore={result.details.creativeScore || 0}
balanceScore={result.details.abilityBalance || 0}
level={getScoreLevel(result.score, result.type).level}
description={getScoreLevel(result.score, result.type).description}
logicBreakdown={result.details.breakdown}
creativityBreakdown={result.details.breakdown}
// 個別測試結果的詳細資料
logicCorrectAnswers={logicQuestions.filter(q => q.isCorrect).length}
logicTotalQuestions={logicQuestions.length}
logicLevel={getScoreLevel(result.details.logicScore || 0, 'logic').level}
logicDescription={getScoreLevel(result.details.logicScore || 0, 'logic').description}
logicSuggestion={getScoreLevel(result.details.logicScore || 0, 'logic').suggestion}
creativityTotalScore={creativeQuestions.reduce((sum, q) => sum + (q.score || 0), 0)}
creativityMaxScore={creativeQuestions.length * 5}
creativityLevel={getScoreLevel(result.details.creativeScore || 0, 'creative').level}
creativityDescription={getScoreLevel(result.details.creativeScore || 0, 'creative').description}
creativitySuggestion={getScoreLevel(result.details.creativeScore || 0, 'creative').suggestion}
/>
)}
{/* Detailed Results */}
{questions.length > 0 && (
<Card>
@@ -571,7 +609,7 @@ function AdminResultDetailContent() {
</h3>
<div className="space-y-4">
{creativeQuestions.map((question, index) => {
const dimensionInfo = getDimensionInfo(question.category)
const dimensionInfo = getDimensionInfo(question.category || 'innovation')
return (
<div key={question.id} className={`border rounded-lg p-3 sm:p-4 ${dimensionInfo.borderColor} bg-opacity-30`} style={{ backgroundColor: `${dimensionInfo.color.replace('bg-', '')}10` }}>
<div className="flex items-start justify-between mb-2 sm:mb-3">

View File

@@ -14,6 +14,17 @@ interface CombinedAnalysisProps {
description: string
logicBreakdown?: any
creativityBreakdown?: any
// 個別測試結果的詳細資料
logicCorrectAnswers?: number
logicTotalQuestions?: number
logicLevel?: string
logicDescription?: string
logicSuggestion?: string
creativityTotalScore?: number
creativityMaxScore?: number
creativityLevel?: string
creativityDescription?: string
creativitySuggestion?: string
}
export function CombinedAnalysis({
@@ -24,7 +35,18 @@ export function CombinedAnalysis({
level,
description,
logicBreakdown,
creativityBreakdown
creativityBreakdown,
// 個別測試結果的詳細資料
logicCorrectAnswers,
logicTotalQuestions,
logicLevel,
logicDescription,
logicSuggestion,
creativityTotalScore,
creativityMaxScore,
creativityLevel,
creativityDescription,
creativitySuggestion
}: CombinedAnalysisProps) {
// 獲取等級顏色
@@ -111,6 +133,119 @@ export function CombinedAnalysis({
</CardContent>
</Card>
{/* 個別測試結果 */}
{(logicCorrectAnswers !== undefined || creativityTotalScore !== undefined) && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 邏輯思維測試 */}
{logicCorrectAnswers !== undefined && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Brain className="w-5 h-5 text-blue-600" />
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* 分數顯示 */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground"></span>
<div className="flex items-center gap-3">
<Progress value={logicScore} className="w-24 h-2" />
<span className="text-2xl font-bold text-red-600">{logicScore}</span>
</div>
</div>
{/* 統計數據 */}
<div className="grid grid-cols-2 gap-3">
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-green-600">{logicCorrectAnswers}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-blue-600">{logicTotalQuestions}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
</div>
{/* 等級和描述 */}
<div className="space-y-3">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-purple-500"></div>
<span className="font-medium text-sm">{logicLevel}</span>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
{logicDescription}
</p>
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
<div>
<span className="text-sm font-medium text-muted-foreground"></span>
<p className="text-sm text-muted-foreground mt-1">{logicSuggestion}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
)}
{/* 創意能力測試 */}
{creativityTotalScore !== undefined && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Lightbulb className="w-5 h-5 text-orange-600" />
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* 分數顯示 */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground"></span>
<div className="flex items-center gap-3">
<Progress value={creativityScore} className="w-24 h-2" />
<span className="text-2xl font-bold text-orange-600">{creativityScore}</span>
</div>
</div>
{/* 統計數據 */}
<div className="grid grid-cols-2 gap-3">
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-green-600">{creativityTotalScore}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-blue-600">{creativityMaxScore}</div>
<div className="text-xs text-muted-foreground">滿</div>
</div>
</div>
{/* 等級和描述 */}
<div className="space-y-3">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-purple-500"></div>
<span className="font-medium text-sm">{creativityLevel}</span>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
{creativityDescription}
</p>
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
<div>
<span className="text-sm font-medium text-muted-foreground"></span>
<p className="text-sm text-muted-foreground mt-1">{creativitySuggestion}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
)}
</div>
)}
{/* 能力分析 */}
<Card>
<CardHeader>
@@ -127,7 +262,7 @@ export function CombinedAnalysis({
<Brain className="w-6 h-6 text-blue-600" />
</div>
<h3 className="font-medium text-sm mb-2"></h3>
<div className="text-2xl font-bold text-red-600 mb-1">{logicScore}</div>
<div className="text-3xl font-bold text-red-600 mb-1">{logicScore}</div>
<div className={`text-xs ${logicStatus.color} mb-2`}>{logicStatus.text}</div>
<Progress value={logicScore} className="h-2" />
</div>
@@ -138,7 +273,7 @@ export function CombinedAnalysis({
<Lightbulb className="w-6 h-6 text-orange-600" />
</div>
<h3 className="font-medium text-sm mb-2"></h3>
<div className="text-2xl font-bold text-orange-600 mb-1">{creativityScore}</div>
<div className="text-3xl font-bold text-orange-600 mb-1">{creativityScore}</div>
<div className={`text-xs ${creativityStatus.color} mb-2`}>{creativityStatus.text}</div>
<Progress value={creativityScore} className="h-2" />
</div>
@@ -149,7 +284,7 @@ export function CombinedAnalysis({
<Target className="w-6 h-6 text-green-600" />
</div>
<h3 className="font-medium text-sm mb-2"></h3>
<div className="text-2xl font-bold text-orange-600 mb-1">{balanceScore}</div>
<div className="text-3xl font-bold text-orange-600 mb-1">{balanceScore}</div>
<div className={`text-xs ${balanceStatus.color} mb-2`}>{balanceStatus.text}</div>
<Progress value={balanceScore} className="h-2" />
</div>

View File

@@ -0,0 +1,163 @@
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Brain, Lightbulb, CheckCircle, Star } from "lucide-react"
interface IndividualTestResultsProps {
logicScore: number
logicCorrectAnswers: number
logicTotalQuestions: number
logicLevel: string
logicDescription: string
logicSuggestion: string
creativityScore: number
creativityTotalScore: number
creativityMaxScore: number
creativityLevel: string
creativityDescription: string
creativitySuggestion: string
}
export function IndividualTestResults({
logicScore,
logicCorrectAnswers,
logicTotalQuestions,
logicLevel,
logicDescription,
logicSuggestion,
creativityScore,
creativityTotalScore,
creativityMaxScore,
creativityLevel,
creativityDescription,
creativitySuggestion
}: IndividualTestResultsProps) {
// 獲取邏輯測試等級顏色
const getLogicLevelColor = (score: number) => {
if (score >= 90) return "bg-purple-600"
if (score >= 80) return "bg-green-500"
if (score >= 60) return "bg-blue-500"
if (score >= 30) return "bg-yellow-500"
return "bg-red-500"
}
// 獲取創意測試等級顏色
const getCreativityLevelColor = (score: number) => {
if (score >= 90) return "bg-purple-600"
if (score >= 75) return "bg-blue-500"
if (score >= 55) return "bg-green-500"
if (score >= 35) return "bg-yellow-500"
return "bg-red-500"
}
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 邏輯思維測試 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Brain className="w-5 h-5 text-blue-600" />
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* 分數顯示 */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground"></span>
<div className="flex items-center gap-3">
<Progress value={logicScore} className="w-24 h-2" />
<span className="text-2xl font-bold text-red-600">{logicScore}</span>
</div>
</div>
{/* 統計數據 */}
<div className="grid grid-cols-2 gap-3">
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-green-600">{logicCorrectAnswers}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-blue-600">{logicTotalQuestions}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
</div>
{/* 等級和描述 */}
<div className="space-y-3">
<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${getLogicLevelColor(logicScore)}`}></div>
<span className="font-medium text-sm">{logicLevel}</span>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
{logicDescription}
</p>
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
<div>
<span className="text-sm font-medium text-muted-foreground"></span>
<p className="text-sm text-muted-foreground mt-1">{logicSuggestion}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
{/* 創意能力測試 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Lightbulb className="w-5 h-5 text-orange-600" />
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* 分數顯示 */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground"></span>
<div className="flex items-center gap-3">
<Progress value={creativityScore} className="w-24 h-2" />
<span className="text-2xl font-bold text-orange-600">{creativityScore}</span>
</div>
</div>
{/* 統計數據 */}
<div className="grid grid-cols-2 gap-3">
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-green-600">{creativityTotalScore}</div>
<div className="text-xs text-muted-foreground"></div>
</div>
<div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-lg font-bold text-blue-600">{creativityMaxScore}</div>
<div className="text-xs text-muted-foreground">滿</div>
</div>
</div>
{/* 等級和描述 */}
<div className="space-y-3">
<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${getCreativityLevelColor(creativityScore)}`}></div>
<span className="font-medium text-sm">{creativityLevel}</span>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
{creativityDescription}
</p>
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
<div>
<span className="text-sm font-medium text-muted-foreground"></span>
<p className="text-sm text-muted-foreground mt-1">{creativitySuggestion}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
)
}