330 lines
14 KiB
TypeScript
330 lines
14 KiB
TypeScript
"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, Target, TrendingUp, Search, Star } from "lucide-react"
|
||
|
||
interface CombinedAnalysisProps {
|
||
overallScore: number
|
||
logicScore: number
|
||
creativityScore: number
|
||
balanceScore: number
|
||
level: string
|
||
description: string
|
||
isTimeout?: boolean
|
||
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({
|
||
overallScore,
|
||
logicScore,
|
||
creativityScore,
|
||
balanceScore,
|
||
level,
|
||
description,
|
||
isTimeout = false,
|
||
logicBreakdown,
|
||
creativityBreakdown,
|
||
// 個別測試結果的詳細資料
|
||
logicCorrectAnswers,
|
||
logicTotalQuestions,
|
||
logicLevel,
|
||
logicDescription,
|
||
logicSuggestion,
|
||
creativityTotalScore,
|
||
creativityMaxScore,
|
||
creativityLevel,
|
||
creativityDescription,
|
||
creativitySuggestion
|
||
}: CombinedAnalysisProps) {
|
||
|
||
// 獲取等級顏色
|
||
const getLevelColor = (score: number) => {
|
||
if (score >= 90) return "bg-gradient-to-r from-purple-500 to-blue-500"
|
||
if (score >= 80) return "bg-gradient-to-r from-blue-500 to-green-500"
|
||
if (score >= 70) return "bg-gradient-to-r from-green-500 to-yellow-500"
|
||
if (score >= 60) return "bg-gradient-to-r from-yellow-500 to-orange-500"
|
||
return "bg-gradient-to-r from-orange-500 to-red-500"
|
||
}
|
||
|
||
// 獲取能力狀態
|
||
const getAbilityStatus = (score: number) => {
|
||
if (score >= 80) return { text: "表現優秀", color: "text-green-600" }
|
||
if (score >= 60) return { text: "表現良好", color: "text-blue-600" }
|
||
if (score >= 40) return { text: "需要提升", color: "text-yellow-600" }
|
||
return { text: "需要加強", color: "text-red-600" }
|
||
}
|
||
|
||
// 獲取平衡狀態
|
||
const getBalanceStatus = (score: number) => {
|
||
if (score >= 80) return { text: "非常均衡", color: "text-green-600" }
|
||
if (score >= 60) return { text: "相對均衡", color: "text-blue-600" }
|
||
if (score >= 40) return { text: "需要平衡", color: "text-yellow-600" }
|
||
return { text: "失衡嚴重", color: "text-red-600" }
|
||
}
|
||
|
||
// 生成發展建議
|
||
const getRecommendations = () => {
|
||
const recommendations = []
|
||
|
||
if (logicScore < 70) {
|
||
recommendations.push("建議加強邏輯思維訓練，多做推理題和數學題")
|
||
recommendations.push("學習系統性思維方法，如思維導圖、流程圖等")
|
||
}
|
||
|
||
if (creativityScore < 70) {
|
||
recommendations.push("建議參與更多創意活動，如頭腦風暴、設計思維工作坊")
|
||
recommendations.push("培養好奇心，多接觸不同領域的知識和經驗")
|
||
}
|
||
|
||
const scoreDiff = Math.abs(logicScore - creativityScore)
|
||
if (scoreDiff > 20) {
|
||
if (logicScore > creativityScore) {
|
||
recommendations.push("您的邏輯思維較強，建議平衡發展創意能力")
|
||
} else {
|
||
recommendations.push("您的創意能力較強，建議平衡發展邏輯思維")
|
||
}
|
||
}
|
||
|
||
if (logicScore >= 80 && creativityScore >= 80) {
|
||
recommendations.push("您具備優秀的綜合能力，建議承擔更多挑戰性工作")
|
||
recommendations.push("可以考慮擔任需要創新和分析並重的領導角色")
|
||
}
|
||
|
||
return recommendations.length > 0 ? recommendations : ["繼續保持現有的學習節奏，持續提升各方面能力"]
|
||
}
|
||
|
||
const recommendations = getRecommendations()
|
||
const logicStatus = getAbilityStatus(logicScore)
|
||
const creativityStatus = getAbilityStatus(creativityScore)
|
||
const balanceStatus = getBalanceStatus(balanceScore)
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 綜合評估概覽 */}
|
||
<Card className="text-center">
|
||
<CardHeader>
|
||
<div
|
||
className={`w-24 h-24 ${getLevelColor(overallScore)} rounded-full flex items-center justify-center mx-auto mb-4`}
|
||
>
|
||
<span className="text-3xl font-bold text-white">{overallScore}</span>
|
||
</div>
|
||
<CardTitle className="text-3xl mb-2">
|
||
綜合測試{isTimeout ? '(時間到)' : ''}完成！
|
||
</CardTitle>
|
||
<div className="flex items-center justify-center gap-2 mb-4">
|
||
<Badge variant="secondary" className="text-lg px-4 py-1 bg-gradient-to-r from-blue-500 to-teal-500 text-white">
|
||
{level}
|
||
</Badge>
|
||
{isTimeout && (
|
||
<Badge variant="destructive" className="text-lg px-4 py-1">
|
||
時間到強制提交
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<p className="text-lg text-muted-foreground mb-3">{description}</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Progress value={overallScore} className="h-3 mb-4" />
|
||
</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>
|
||
<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-4">
|
||
{/* 邏輯思維 */}
|
||
<div className="text-center p-4 border rounded-lg">
|
||
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||
<Brain className="w-6 h-6 text-blue-600" />
|
||
</div>
|
||
<h3 className="font-medium text-sm mb-2">邏輯思維</h3>
|
||
<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>
|
||
|
||
{/* 創意能力 */}
|
||
<div className="text-center p-4 border rounded-lg">
|
||
<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||
<Lightbulb className="w-6 h-6 text-orange-600" />
|
||
</div>
|
||
<h3 className="font-medium text-sm mb-2">創意能力</h3>
|
||
<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>
|
||
|
||
{/* 能力平衡 */}
|
||
<div className="text-center p-4 border rounded-lg">
|
||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||
<Target className="w-6 h-6 text-green-600" />
|
||
</div>
|
||
<h3 className="font-medium text-sm mb-2">能力平衡</h3>
|
||
<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>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 發展建議 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Search 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-3 bg-muted/50 rounded-lg">
|
||
<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<span className="text-xs font-bold text-white">{index + 1}</span>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||
{recommendation}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|