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

2026-06-22 22:59:01 +02:00
commit 9227c687fc
160 changed files with 16974 additions and 0 deletions
@@ -0,0 +1,66 @@
+'use client';
+
+import { calculateOEPSResults } from '../../test/private/OEPSCalculator';
+
+interface OEPSResultProps {
+  answers: string[];
+}
+
+function barWidth(value: number) {
+  return `${Math.max(0, Math.min(100, (value / 5) * 100))}%`;
+}
+
+export function OEPSResult({ answers }: OEPSResultProps) {
+  const result = calculateOEPSResults(answers);
+
+  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-2">九型人格结果</h3>
+        <p className="text-sm text-muted-foreground">
+          你的最高候选类型是：
+        </p>
+        <div className="mt-4 rounded-lg border bg-indigo-50 border-indigo-200 p-4">
+          <div className="text-2xl font-semibold text-indigo-700">
+            {result.top.name}
+          </div>
+          <p className="text-sm text-indigo-900 mt-2">{result.top.description}</p>
+          <p className="text-sm text-indigo-900 mt-2">
+            平均分：{result.top.average.toFixed(2)} / 5
+          </p>
+        </div>
+      </div>
+
+      <div className="bg-white border rounded-lg p-6 shadow-sm">
+        <h4 className="font-semibold mb-4">九型分数排序</h4>
+        <div className="space-y-3">
+          {result.ranked.map((item) => (
+            <div key={item.type} className="rounded border p-4">
+              <div className="flex items-start justify-between gap-4 mb-2">
+                <div>
+                  <div className="font-medium">{item.name}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {item.description}
+                  </div>
+                </div>
+                <div className="text-right font-semibold text-indigo-600">
+                  {item.average.toFixed(2)}
+                </div>
+              </div>
+              <div className="h-2 rounded-full bg-gray-100 overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-indigo-500"
+                  style={{ width: barWidth(item.average) }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-gray-50 border rounded-lg p-4 text-sm text-gray-700">
+        OEPS 和九型人格适合作为自我探索材料。若前几名分数接近，建议把它们都作为候选类型继续阅读和核对，不要只看最高分。
+      </div>
+    </div>
+  );
+}