mikemoi
80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
calculateRIASECResults,
|
|
riasecTypes,
|
|
} from '../../test/private/RIASECCalculator';
|
|
|
|
interface RIASECResultProps {
|
|
answers: string[];
|
|
}
|
|
|
|
const descriptions = {
|
|
R: '动手、设备、机械、户外与具体操作',
|
|
I: '研究、分析、科学与复杂问题',
|
|
A: '创作、设计、表达与开放式任务',
|
|
S: '帮助、教学、照护与合作',
|
|
E: '领导、说服、销售与组织资源',
|
|
C: '数据、记录、流程与明确规范',
|
|
};
|
|
|
|
function barWidth(average: number) {
|
|
return `${Math.max(0, Math.min(100, ((average - 1) / 4) * 100))}%`;
|
|
}
|
|
|
|
export function RIASECResult({ answers }: RIASECResultProps) {
|
|
const { scores, ranking, hollandCode } = calculateRIASECResults(answers);
|
|
|
|
return (
|
|
<div className="mt-6 space-y-6">
|
|
<div className="border bg-white p-6 shadow-sm">
|
|
<div className="text-sm text-muted-foreground">你的 Holland Code</div>
|
|
<div className="mt-1 text-4xl font-semibold text-indigo-600">
|
|
{hollandCode}
|
|
</div>
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
前三位依次代表当前最突出的职业兴趣方向。分数接近时，不必过度强调字母顺序。
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
{ranking.map(([code]) => {
|
|
const result = scores[code] as { score: number; average: number };
|
|
const type = riasecTypes[code as keyof typeof riasecTypes];
|
|
return (
|
|
<div key={code} className="rounded-lg border bg-white p-5 shadow-sm">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h4 className="font-semibold">
|
|
{code} · {type.name}
|
|
</h4>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{descriptions[code as keyof typeof descriptions]}
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0 text-right">
|
|
<div className="text-xl font-semibold">{result.score}</div>
|
|
<div className="text-xs text-muted-foreground">/ 40</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 h-2 overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className="h-full rounded-full bg-emerald-500"
|
|
style={{ width: barWidth(result.average) }}
|
|
/>
|
|
</div>
|
|
<div className="mt-2 text-xs text-muted-foreground">
|
|
平均 {result.average.toFixed(2)} / 5
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="border bg-gray-50 p-4 text-sm text-gray-700">
|
|
兴趣高分表示更可能享受这类活动，不代表已经具备相应能力。选择职业时还应结合技能、价值观、现实机会与工作环境。
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|