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

2026-06-22 22:59:01 +02:00
commit 9227c687fc
160 changed files with 16974 additions and 0 deletions
@@ -0,0 +1,67 @@
+'use client';
+
+import { calculateHEXACOResults } from '../../test/private/HEXACOCalculator';
+
+interface HEXACOResultProps {
+  answers: string[];
+}
+
+const labels = [
+  ['诚实谦逊', 'honestyHumility'],
+  ['情绪性', 'emotionality'],
+  ['外向性', 'extraversion'],
+  ['宜人性', 'agreeableness'],
+  ['尽责性', 'conscientiousness'],
+  ['开放性', 'openness'],
+] as const;
+
+function width(value: number) {
+  return `${Math.max(0, Math.min(100, ((value - 1) / 4) * 100))}%`;
+}
+
+export function HEXACOResult({ answers }: HEXACOResultProps) {
+  const results = calculateHEXACOResults(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">HEXACO 六因素结果</h3>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {labels.map(([label, key]) => (
+            <BarCard key={key} title={label} value={results[key]} />
+          ))}
+        </div>
+      </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">
+          HEXACO 结果应按六个维度分别理解。它和 Big Five 接近，但额外强调诚实谦逊，有助于观察公平、真诚、地位追求和自我中心相关倾向。
+        </p>
+      </div>
+
+      <div className="border bg-gray-50 p-4 text-sm text-gray-700">
+        注：人格分数是长期倾向的近似画像，不是固定标签。建议结合 Big Five、RIASEC 和实际生活反馈综合理解。
+      </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)} / 5
+        </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>
+  );
+}