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

2026-06-22 22:59:01 +02:00
commit 9227c687fc
160 changed files with 16974 additions and 0 deletions
@@ -0,0 +1,58 @@
+'use client';
+
+import { calculateDarkTriadResults } from '../../test/private/DarkTriadCalculator';
+
+interface DarkTriadResultProps {
+  answers: string[];
+}
+
+function width(value: number) {
+  return `${Math.max(0, Math.min(100, ((value - 1) / 4) * 100))}%`;
+}
+
+export function DarkTriadResult({ answers }: DarkTriadResultProps) {
+  const results = calculateDarkTriadResults(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">
+          <BarCard title="马基雅维利主义" value={results.machiavellianism} />
+          <BarCard title="自恋" value={results.narcissism} />
+          <BarCard title="冷酷冲动" value={results.psychopathy} />
+        </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">
+          这些维度描述普通人群中的人格倾向。高分可以提示策略性、优越感或低共情冲动带来的关系风险，但不能单独用于临床判断。
+        </p>
+      </div>
+
+      <div className="border bg-gray-50 p-4 text-sm text-gray-700">
+        注：黑暗三联征结果容易被误读，请结合具体行为、关系反馈和情境理解。
+      </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>
+  );
+}