mikemoi
78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { calculateSelfEsteemResults } from '../../test/private/SelfEsteemCalculator';
|
|
|
|
interface SelfEsteemResultProps {
|
|
answers: string[];
|
|
}
|
|
|
|
const levelText = {
|
|
low: '自尊偏低',
|
|
moderate: '自尊中等',
|
|
high: '自尊较高',
|
|
};
|
|
|
|
const levelDescription = {
|
|
low: '你当前的整体自我评价可能偏严苛，容易在挫折、人际评价或压力情境中否定自己。这个结果适合提醒你关注自我接纳、情绪状态和支持系统。',
|
|
moderate: '你的整体自尊处在较常见区间，通常能够看到自身价值，但在压力或失败体验下可能仍会有明显波动。',
|
|
high: '你对自身价值和能力通常有较稳定、积极的评价。继续保持现实、温和且有弹性的自我认识会更有帮助。',
|
|
};
|
|
|
|
function barWidth(score: number) {
|
|
return `${Math.max(0, Math.min(100, (score / 30) * 100))}%`;
|
|
}
|
|
|
|
export function SelfEsteemResult({ answers }: SelfEsteemResultProps) {
|
|
const results = calculateSelfEsteemResults(answers);
|
|
const levelClass =
|
|
results.level === 'high'
|
|
? 'border-green-200 bg-green-50 text-green-800'
|
|
: results.level === 'moderate'
|
|
? 'border-blue-200 bg-blue-50 text-blue-800'
|
|
: 'border-yellow-200 bg-yellow-50 text-yellow-800';
|
|
|
|
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.total}/30`} />
|
|
<MetricCard title="结果水平" value={levelText[results.level]} />
|
|
<MetricCard title="题目数" value="10题" />
|
|
</div>
|
|
<div className="mt-5 h-2 overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className="h-full rounded-full bg-indigo-600"
|
|
style={{ width: barWidth(results.total) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`border p-6 shadow-sm ${levelClass}`}>
|
|
<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">
|
|
注：Rosenberg 自尊量表用于自评和追踪，不是临床诊断工具。建议结合近期生活事件、情绪状态和其他量表一起理解。
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface MetricCardProps {
|
|
title: string;
|
|
value: string;
|
|
}
|
|
|
|
function MetricCard({ title, value }: MetricCardProps) {
|
|
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>
|
|
);
|
|
}
|