feat: 完善中文心理测评平台
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
'use client';
|
||||
|
||||
import { calculateMaximizerResults } from '../../test/private/MaximizerCalculator';
|
||||
|
||||
interface MaximizerResultProps {
|
||||
answers: string[];
|
||||
}
|
||||
|
||||
const levelText = {
|
||||
satisficer: '满意型选择风格',
|
||||
balanced: '平衡型选择风格',
|
||||
maximizer: '最大化选择风格',
|
||||
};
|
||||
|
||||
const levelDescription = {
|
||||
satisficer: '你更倾向于在达到标准后做决定,选择成本较低,也更容易保持行动效率。',
|
||||
balanced: '你会在重要选择中认真比较,但通常不会让比较无限扩大。这个区间相对灵活。',
|
||||
maximizer: '你更倾向于追求最优选择,会投入较多比较和信息搜集。优势是标准高,风险是决策成本和后悔感增加。',
|
||||
};
|
||||
|
||||
function width(value: number) {
|
||||
return `${Math.max(0, Math.min(100, ((value - 1) / 6) * 100))}%`;
|
||||
}
|
||||
|
||||
export function MaximizerResult({ answers }: MaximizerResultProps) {
|
||||
const results = calculateMaximizerResults(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">决策最大化倾向结果</h3>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<MetricCard title="平均分" value={`${results.average.toFixed(2)}/7`} />
|
||||
<MetricCard title="选择风格" value={levelText[results.level]} />
|
||||
<MetricCard title="题目数" value="13题" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<BarCard title="高标准" value={results.highStandards} />
|
||||
<BarCard title="选项搜索" value={results.search} />
|
||||
<BarCard title="决策困难" value={results.difficulty} />
|
||||
</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">{levelDescription[results.level]}</p>
|
||||
</div>
|
||||
|
||||
<div className="border bg-gray-50 p-4 text-sm text-gray-700">
|
||||
注:最大化倾向不是好坏判断。重要决策可以认真比较,日常低风险选择则适合设置停止规则。
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({ title, value }: { title: string; value: 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>
|
||||
);
|
||||
}
|
||||
|
||||
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)} / 7
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user