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

2026-06-22 22:59:01 +02:00
commit 9227c687fc
160 changed files with 16974 additions and 0 deletions
@@ -0,0 +1,163 @@
+'use client';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, ArrowRight, Clock, FileText } from 'lucide-react';
+import { useScopedI18n } from '@/locales/client';
+import { Questionnaire } from '@/types';
+
+interface QuestionnaireDetailsPageProps {
+  questionnaire: Questionnaire;
+}
+
+export default function QuestionnaireDetailsPage({
+  questionnaire,
+}: QuestionnaireDetailsPageProps) {
+  const t = useScopedI18n('app.questionnaire.page');
+  const { title, details, evaluation, id } = questionnaire;
+
+  return (
+    <div className="container px-4 py-8 max-w-6xl mx-auto">
+      <nav className="mb-6">
+        <Link
+          href="/questionnaire"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-primary"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          返回量表列表
+        </Link>
+      </nav>
+
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-4">{title}</h1>
+
+        <div className="flex flex-wrap gap-6 text-sm text-muted-foreground mb-6">
+          <div className="flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            <span>{details.questionCount}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="w-4 h-4" />
+            <span>{details.evaluationTime}</span>
+          </div>
+        </div>
+
+        {evaluation && (
+          <dl className="mb-6 grid max-w-2xl grid-cols-1 border sm:grid-cols-3">
+            <div className="p-3">
+              <dt className="text-xs text-muted-foreground">学术认可度</dt>
+              <dd className="mt-1 font-medium">{evaluation.academicRecognition}</dd>
+            </div>
+            <div className="border-t p-3 sm:border-l sm:border-t-0">
+              <dt className="text-xs text-muted-foreground">适合重测</dt>
+              <dd className="mt-1 font-medium">
+                {evaluation.retestSuitable ? '是' : '否'}
+              </dd>
+            </div>
+            <div className="border-t p-3 sm:border-l sm:border-t-0">
+              <dt className="text-xs text-muted-foreground">推荐周期</dt>
+              <dd className="mt-1 font-medium">{evaluation.recommendedInterval}</dd>
+            </div>
+          </dl>
+        )}
+
+        <Link href={`/questionnaire/${id}`}>
+          <Button size="lg" className="px-8 py-6 text-lg gap-2">
+            开始测评 <ArrowRight className="w-5 h-5" />
+          </Button>
+        </Link>
+      </div>
+
+      <div className="prose prose-gray max-w-none">
+        <section className="mb-8">
+          <h2 className="text-xl font-semibold mb-4">{t('introduction')}</h2>
+          <p className="text-gray-700 leading-relaxed">
+            {details.introduction}
+          </p>
+        </section>
+
+        {details.instructions && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">{t('instructions')}</h2>
+            <p className="text-gray-700 leading-relaxed">
+              {details.instructions}
+            </p>
+          </section>
+        )}
+
+        {details.scoringMethod && details.scoringMethod.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">
+              {t('scoringMethod')}
+            </h2>
+            <ul className="list-disc pl-6 space-y-2 text-gray-700">
+              {details.scoringMethod.map((method) => (
+                <li key={method} className="leading-relaxed">
+                  {method}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {details.dimensions && details.dimensions.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">{t('dimensions')}</h2>
+            <ol className="list-decimal pl-6 space-y-3 text-gray-700">
+              {details.dimensions.map((dim) => (
+                <li key={dim.name} className="leading-relaxed">
+                  <strong className="text-gray-900">{dim.name}</strong>：
+                  {dim.description}
+                </li>
+              ))}
+            </ol>
+          </section>
+        )}
+
+        {details.notes && details.notes.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">{t('notes')}</h2>
+            <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+              {details.notes.map((note) => (
+                <li key={note} className="leading-relaxed">
+                  {note}
+                </li>
+              ))}
+            </ol>
+          </section>
+        )}
+
+        {details.references && details.references.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">{t('references')}</h2>
+            <ul className="list-disc pl-6 space-y-2">
+              {details.references.map((ref) => (
+                <li key={ref.text}>
+                  <a
+                    href={ref.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:text-blue-800 hover:underline"
+                  >
+                    {ref.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </div>
+
+      <div className="mt-12 pt-8 border-t">
+        <div className="text-center">
+          <p className="text-gray-600 mb-4">准备好开始测评了吗？</p>
+          <Link href={`/questionnaire/${id}`}>
+            <Button size="lg" className="px-8 py-6 text-lg gap-2">
+              开始测评 <ArrowRight className="w-5 h-5" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}