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

app/[locale]/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/[locale]/layout.tsx

@@ -0,0 +1,35 @@
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import { Navbar } from '@/components/Navbar';
+import { I18nProviderClient } from '@/locales/client';
+import { Toaster } from '@/components/ui/sonner';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <I18nProviderClient locale="zh">
+          <Navbar />
+          <main>{children}</main>
+        </I18nProviderClient>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

app/[locale]/page.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { ArrowRight, ClipboardList } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export default function Home() {
+  return (
+    <div className="min-h-[calc(100vh-3.5rem)] border-t bg-background">
+      <section className="container max-w-4xl mx-auto px-4 py-16 md:py-24">
+        <div className="space-y-8">
+          <div className="space-y-4">
+            <div className="inline-flex h-10 w-10 items-center justify-center rounded border bg-muted">
+              <ClipboardList className="h-5 w-5" />
+            </div>
+            <h1 className="text-3xl md:text-5xl font-semibold tracking-normal">
+              心理量表测试
+            </h1>
+            <p className="text-base md:text-lg text-muted-foreground max-w-2xl">
+              选择一个量表，完成答题后查看结果。数据只在当前浏览器中处理，结果仅供参考，不构成医疗诊断。
+            </p>
+          </div>
+
+          <Button size="lg" asChild>
+            <Link href="/questionnaire" className="gap-2">
+              开始测试
+              <ArrowRight className="h-5 w-5" />
+            </Link>
+          </Button>
+
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-4 text-sm text-muted-foreground">
+            <div className="border rounded p-4">人格、认知、情绪状态</div>
+            <div className="border rounded p-4">自动计算结果</div>
+            <div className="border rounded p-4">可复制完整记录</div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

app/[locale]/questionnaire/[id]/details/page.tsx

@@ -0,0 +1,35 @@
+import { notFound } from 'next/navigation';
+import QuestionnaireDetailsPage from '@/components/questionnaire/QuestionnaireDetailsPage';
+import { questionnairesZh } from '@/questionairies/zh';
+import { Questionnaire as QuestionnaireType } from '@/types';
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function QuestionnaireDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  const questionnaire = questionnairesZh.find((q) => q.id === id);
+
+  if (!questionnaire) {
+    return notFound();
+  }
+
+  const cleanQuestionnaire = {
+    id: questionnaire.id,
+    title: questionnaire.title,
+    description: questionnaire.description,
+    category: questionnaire.category,
+    tags: questionnaire.tags,
+    time: questionnaire.time,
+    evaluation: questionnaire.evaluation,
+    details: questionnaire.details,
+    questions: questionnaire.questions,
+  };
+
+  return (
+    <QuestionnaireDetailsPage
+      questionnaire={cleanQuestionnaire as QuestionnaireType}
+    />
+  );
+}

app/[locale]/questionnaire/[id]/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { notFound } from 'next/navigation';
+import { use } from 'react';
+import { Questionnaire } from '@/components/questionnaire/test/QuestionnaireTest';
+import { useQuestionnaire } from '@/hooks/useQuestionnaire';
+import { Questionnaire as QuestionnaireType } from '@/types';
+
+export default function QuestionnairePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+
+  // Get the questionnaire with specified id from questionnaire data
+  const questionnaire = useQuestionnaire(id);
+
+  // If data not found, show 404 page
+  if (!questionnaire) {
+    return notFound();
+  }
+
+  return <Questionnaire questionnaire={questionnaire as QuestionnaireType} id={id} />;
+}

app/[locale]/questionnaire/[id]/result/page.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { notFound } from 'next/navigation';
+import { useEffect, useState, useMemo, use } from 'react';
+import { Button } from '@/components/ui/button';
+import { Questionnaire } from '@/types';
+import Link from 'next/link';
+import { ResultContainer } from '@/components/questionnaire/result/public/ResultContainer';
+import { AnswerList } from '@/components/questionnaire/result/public/AnswerList';
+import { ResultAnalysis } from '@/components/questionnaire/result/analysis/ResultAnalysis';
+import { useQuestionnaire } from '@/hooks/useQuestionnaire';
+import { useScopedI18n } from '@/locales/client';
+import { loadResult } from '@/lib/result-storage';
+
+export default function QuestionnaireResultPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const [loading, setLoading] = useState(true);
+  const [decodedAnswers, setDecodedAnswers] = useState<string[] | null>(null);
+  const t = useScopedI18n('app.questionnaire.result');
+
+  // Get the questionnaire with specified id from questionnaire data
+  const questionnaire = useQuestionnaire(id) as Questionnaire;
+
+  // Load results from tab-local storage. Answers are intentionally not kept in the URL.
+  useEffect(() => {
+    if (!questionnaire || !questionnaire.details) {
+      return;
+    }
+
+    setDecodedAnswers(loadResult(id));
+    setLoading(false);
+  }, [id, questionnaire]);
+
+  // Construct question-option text pairs for copying result data
+  const questionnaireResults: Record<string, string> = useMemo(() => {
+    if (!questionnaire || !decodedAnswers) return {};
+    const obj: Record<string, string> = {};
+    questionnaire.questions.forEach((q, idx) => {
+      const val = decodedAnswers[idx];
+      if (val === undefined) return;
+      const option = questionnaire.renderOptions(q.id).find(
+        (o) => String(o.value) === String(val)
+      );
+      obj[q.content] = option ? option.content : String(val);
+    });
+    return obj;
+  }, [decodedAnswers, questionnaire]);
+
+  // If data not found, show 404 page
+  if (!questionnaire || !questionnaire.details) {
+    return notFound();
+  }
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  if (!decodedAnswers || decodedAnswers.length !== questionnaire.questions.length) {
+    return (
+      <div className="flex justify-center items-center min-h-screen  md:p-4 p-2">
+        <div className="max-w-6xl w-full bg-white rounded-lg shadow-lg md:p-8 p-4 border">
+          <h1 className="text-2xl font-bold mb-6">
+            {questionnaire.title} - {t('resultNotFoundTitle')}
+          </h1>
+          <p className="text-gray-700 mb-6">{t('resultNotFoundDesc')}</p>
+          <Button>
+            <Link href={`/questionnaire/${id}`}>{t('retryTest')}</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ResultContainer 
+      title={questionnaire.title} 
+      id={id}
+      questionnaire={questionnaire}
+      answers={decodedAnswers}
+      questionnaireResults={questionnaireResults}
+    >
+      <AnswerList
+        questions={questionnaire.questions}
+        answers={decodedAnswers}
+        renderOptions={questionnaire.renderOptions}
+      />
+      <ResultAnalysis questionnaireId={id} answers={decodedAnswers} />
+    </ResultContainer>
+  );
+}

app/[locale]/questionnaire/page.tsx

@@ -0,0 +1,5 @@
+import QuestionnaireList from '@/components/questionnaire/List';
+
+export default function QuestionnairePage() {
+  return <QuestionnaireList />;
+}