feat: 完善中文心理测评平台

2026-06-22 22:59:01 +02:00
commit 9227c687fc
160 changed files with 16974 additions and 0 deletions
@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { calculateISIResults } from '../../test/private/ISICalculator';
+import { useScopedI18n } from '@/locales/client';
+
+interface ISIResultProps {
+  answers: string[];
+}
+
+export function ISIResult({ answers }: ISIResultProps) {
+  const t = useScopedI18n('components.isiResult');
+  
+  const answersMap: { [key: number]: string } = {};
+  answers.forEach((answer, index) => {
+    answersMap[index + 1] = answer;
+  });
+
+  const results = calculateISIResults({ 
+    answers: answersMap, 
+    questions: [] 
+  });
+
+  const severityNames = {
+    no_insomnia: t('severity.no_insomnia'),
+    subthreshold: t('severity.subthreshold'),
+    moderate: t('severity.moderate'),
+    severe: t('severity.severe')
+  };
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case "no_insomnia": return "text-green-600 bg-green-50 border-green-200";
+      case "subthreshold": return "text-yellow-600 bg-yellow-50 border-yellow-200";
+      case "moderate": return "text-orange-600 bg-orange-50 border-orange-200";
+      case "severe": return "text-red-600 bg-red-50 border-red-200";
+      default: return "text-gray-600 bg-gray-50 border-gray-200";
+    }
+  };
+
+  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">{t('title')}</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <MetricCard title={t('labels.total_score')} value={`${results.totalScore}/28`} />
+          <MetricCard title={t('labels.high_score_items')} value={`${results.highScoreItemCount}/7`} />
+          <MetricCard 
+            title={t('labels.insomnia_level')} 
+            value={severityNames[results.severity as keyof typeof severityNames] || t('labels.unknown')}
+            className={getSeverityColor(results.severity).split(' ')[0]}
+          />
+        </div>
+      </div>
+
+      <div className={`border rounded-lg p-6 shadow-sm ${getSeverityColor(results.severity)}`}>
+        <h3 className="text-lg font-semibold mb-3">{t('labels.result_interpretation')}</h3>
+        <div className="space-y-2 text-sm">
+          <div><strong>{t('labels.scoring_criteria')}：</strong></div>
+          <ul className="ml-4 space-y-1">
+            <li>{t('scoring.range_0_7')}</li>
+            <li>{t('scoring.range_8_14')}</li>
+            <li>{t('scoring.range_15_21')}</li>
+            <li>{t('scoring.range_22_28')}</li>
+          </ul>
+        </div>
+      </div>
+
+      {results.isSevere && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="text-sm font-medium text-red-800">
+            {t('advice.sleep_specialist_message')}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface MetricCardProps {
+  title: string;
+  value: React.ReactNode;
+  className?: string;
+}
+
+function MetricCard({ title, value, className = '' }: 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 ${className || 'text-indigo-600'}`}>
+        {value}
+      </span>
+    </div>
+  );
+}