mikemoi
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { calculateHEXACOResults } from '../../test/private/HEXACOCalculator';
|
|
|
|
interface HEXACOResultProps {
|
|
answers: string[];
|
|
}
|
|
|
|
const labels = [
|
|
['诚实谦逊', 'honestyHumility'],
|
|
['情绪性', 'emotionality'],
|
|
['外向性', 'extraversion'],
|
|
['宜人性', 'agreeableness'],
|
|
['尽责性', 'conscientiousness'],
|
|
['开放性', 'openness'],
|
|
] as const;
|
|
|
|
function width(value: number) {
|
|
return `${Math.max(0, Math.min(100, ((value - 1) / 4) * 100))}%`;
|
|
}
|
|
|
|
export function HEXACOResult({ answers }: HEXACOResultProps) {
|
|
const results = calculateHEXACOResults(answers);
|
|
|
|
return (
|
|
<div className="mt-6 space-y-6">
|
|
<div className="border bg-white p-6 shadow-sm">
|
|
<h3 className="text-lg font-semibold mb-4">HEXACO 六因素结果</h3>
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
{labels.map(([label, key]) => (
|
|
<BarCard key={key} title={label} value={results[key]} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border bg-blue-50 p-6 text-blue-900 shadow-sm">
|
|
<h3 className="text-lg font-semibold mb-3">结果解释</h3>
|
|
<p className="text-sm">
|
|
HEXACO 结果应按六个维度分别理解。它和 Big Five 接近，但额外强调诚实谦逊，有助于观察公平、真诚、地位追求和自我中心相关倾向。
|
|
</p>
|
|
</div>
|
|
|
|
<div className="border bg-gray-50 p-4 text-sm text-gray-700">
|
|
注：人格分数是长期倾向的近似画像，不是固定标签。建议结合 Big Five、RIASEC 和实际生活反馈综合理解。
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BarCard({ title, value }: { title: string; value: number }) {
|
|
return (
|
|
<div className="rounded-lg border bg-white p-5 shadow-sm">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h4 className="font-semibold">{title}</h4>
|
|
<span className="text-sm text-muted-foreground">
|
|
{value.toFixed(2)} / 5
|
|
</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className="h-full rounded-full bg-emerald-500"
|
|
style={{ width: width(value) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|