mikemoi
105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { calculateWHO5Results } from '../../test/private/WHO5Calculator';
|
|
|
|
interface WHO5ResultProps {
|
|
answers: string[];
|
|
}
|
|
|
|
const levelText = {
|
|
high: '幸福感较好',
|
|
moderate: '幸福感中等',
|
|
low: '幸福感偏低',
|
|
very_low: '幸福感明显偏低',
|
|
};
|
|
|
|
const levelDescription = {
|
|
high: '最近两周的积极情绪、活力和生活兴趣整体较好，可以继续保持目前有帮助的生活节奏。',
|
|
moderate: '整体幸福感处在中等区间，可以留意睡眠、压力、社交和日常恢复感的变化。',
|
|
low: '幸福感偏低，建议结合PHQ-9、GAD-7或DASS-21进一步了解情绪状态。',
|
|
very_low: '幸福感明显偏低，近期可能承受了较多压力或情绪困扰，建议尽快寻求可靠支持或专业评估。',
|
|
};
|
|
|
|
const questions = [
|
|
'快乐、心情愉快',
|
|
'平静和放松',
|
|
'精力充沛、充满活力',
|
|
'醒来时清新、休息充分',
|
|
'日常生活中有感兴趣的事情',
|
|
];
|
|
|
|
export function WHO5Result({ answers }: WHO5ResultProps) {
|
|
const answersMap: { [key: number]: string } = {};
|
|
answers.forEach((answer, index) => {
|
|
answersMap[index + 1] = answer;
|
|
});
|
|
|
|
const results = calculateWHO5Results({ answers: answersMap });
|
|
|
|
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'
|
|
: results.level === 'low'
|
|
? 'border-yellow-200 bg-yellow-50 text-yellow-800'
|
|
: 'border-red-200 bg-red-50 text-red-800';
|
|
|
|
return (
|
|
<div className="mt-6 space-y-6">
|
|
<div className="bg-white border rounded-lg p-6 shadow-sm">
|
|
<h3 className="text-lg font-semibold mb-4">WHO-5 幸福感结果</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<MetricCard title="原始总分" value={`${results.rawScore}/25`} />
|
|
<MetricCard title="百分制得分" value={`${results.percentageScore}/100`} />
|
|
<MetricCard title="结果水平" value={levelText[results.level]} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`border rounded-lg p-6 shadow-sm ${levelClass}`}>
|
|
<h3 className="text-lg font-semibold mb-3">结果解释</h3>
|
|
<p className="text-sm">{levelDescription[results.level]}</p>
|
|
{results.needsAttention && (
|
|
<p className="text-sm mt-3 font-medium">
|
|
WHO-5通常建议：原始总分低于13分，或任一题为0-1分时，可以进一步做情绪筛查或寻求专业意见。
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white border rounded-lg p-6 shadow-sm">
|
|
<h3 className="text-lg font-semibold mb-4">分项情况</h3>
|
|
<div className="space-y-3">
|
|
{results.itemScores.map((score, index) => (
|
|
<div key={questions[index]} className="flex items-center justify-between gap-4 p-3 bg-gray-50 rounded-lg">
|
|
<span className="text-sm font-medium">{index + 1}. {questions[index]}</span>
|
|
<span className={`text-lg font-semibold ${score <= 1 ? 'text-red-600' : score <= 3 ? 'text-yellow-600' : 'text-green-600'}`}>
|
|
{score}/5
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<p className="text-sm text-gray-700">
|
|
注：WHO-5用于幸福感筛查和追踪，不等同于临床诊断。若结果偏低，请结合近期生活事件、睡眠、压力和其他量表综合判断。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface MetricCardProps {
|
|
title: string;
|
|
value: React.ReactNode;
|
|
}
|
|
|
|
function MetricCard({ title, value }: MetricCardProps) {
|
|
return (
|
|
<div className="bg-gray-50 rounded-lg p-4 flex flex-col items-center">
|
|
<span className="text-sm text-gray-500 mb-1">{title}</span>
|
|
<span className="text-2xl font-semibold text-indigo-600 text-center">{value}</span>
|
|
</div>
|
|
);
|
|
}
|