mikemoi
80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { calculateFisherResults, FisherDimension } from '../../test/private/FisherCalculator';
|
|
|
|
interface FisherResultProps {
|
|
answers: string[];
|
|
}
|
|
|
|
const descriptions: Record<FisherDimension, string> = {
|
|
explorer: '偏好新鲜体验、自由探索和灵活变化，适合开放、变化快、允许试错的环境。',
|
|
builder: '重视秩序、责任和稳定关系，适合目标清楚、节奏可靠、需要长期维护的环境。',
|
|
director: '偏好逻辑、效率和直接决策，适合需要分析、判断、系统设计和明确目标的环境。',
|
|
negotiator: '重视共情、意义和关系协调，适合需要理解人、连接观点和处理复杂情境的环境。',
|
|
};
|
|
|
|
const colorClass: Record<FisherDimension, string> = {
|
|
explorer: 'bg-emerald-500',
|
|
builder: 'bg-blue-500',
|
|
director: 'bg-indigo-500',
|
|
negotiator: 'bg-rose-500',
|
|
};
|
|
|
|
export function FisherResult({ answers }: FisherResultProps) {
|
|
const results = calculateFisherResults(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">Fisher 气质结果</h3>
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<MetricCard title="主要气质" value={results.primary.name} score={`${results.primary.score}/40`} />
|
|
<MetricCard title="辅助气质" value={results.secondary.name} score={`${results.secondary.score}/40`} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border bg-blue-50 p-6 text-blue-900 shadow-sm">
|
|
<h3 className="text-lg font-semibold mb-3">
|
|
{results.primary.name} + {results.secondary.name}
|
|
</h3>
|
|
<p className="text-sm">
|
|
你的结果以{results.primary.name}为主，{results.secondary.name}为辅助。Fisher模型更适合看“人格签名”：
|
|
最高分说明你最自然调用的风格，第二高分说明你常用的补充策略。
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
{results.ranked.map((item) => (
|
|
<div key={item.id} className="border bg-white p-5 shadow-sm">
|
|
<div className="mb-3 flex items-center justify-between gap-3">
|
|
<h4 className="font-semibold">{item.name}</h4>
|
|
<span className="text-sm text-muted-foreground">{item.score}/40</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className={`h-full rounded-full ${colorClass[item.id]}`}
|
|
style={{ width: `${item.percentage}%` }}
|
|
/>
|
|
</div>
|
|
<p className="mt-3 text-sm text-gray-700">{descriptions[item.id]}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border bg-gray-50 p-4 text-sm text-gray-700">
|
|
注：Fisher气质量表用于人格风格参考，不是临床诊断。分数差距很小时，说明多个风格都比较常被你使用。
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MetricCard({ title, value, score }: { title: string; value: string; score: string }) {
|
|
return (
|
|
<div className="rounded-lg bg-gray-50 p-4 text-center">
|
|
<div className="text-sm text-muted-foreground">{title}</div>
|
|
<div className="mt-1 text-2xl font-semibold text-indigo-600">{value}</div>
|
|
<div className="text-xs text-muted-foreground">{score}</div>
|
|
</div>
|
|
);
|
|
}
|