'init'

app/certificate/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Header } from "@/app/components";
+import { getProgress } from "@/app/lib/learning";
+import { CURRICULUM_CONFIG } from "@/config/course";
+import { isPaid } from "@/app/lib/payment";
+
+const TOTAL = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
+
+export default function CertificatePage() {
+  const [progress, setProgress] = useState({ completed: 0, percent: 0 });
+  const [paid, setPaid] = useState(false);
+
+  useEffect(() => {
+    setProgress(getProgress(TOTAL));
+    setPaid(isPaid());
+  }, []);
+
+  const completed = progress.percent >= 100;
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
+      <Header />
+      <main className="pt-20 pb-16">
+        <div className="mx-auto max-w-2xl px-4 text-center">
+          {!paid ? (
+            <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8">
+              <h1 className="mb-4 text-2xl font-bold">报名后可查看证书</h1>
+              <p className="mb-6 text-[var(--muted-foreground)]">
+                完成全部 {TOTAL} 节课程后可申请结业证书
+              </p>
+              <Link
+                href="/pay"
+                className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] hover:opacity-90"
+              >
+                立即报名
+              </Link>
+            </div>
+          ) : completed ? (
+            <div className="rounded-2xl border-2 border-[var(--accent)] bg-[var(--card)] p-8">
+              <div className="mb-6 text-5xl">🎓</div>
+              <h1 className="mb-2 text-2xl font-bold">结业证书</h1>
+              <p className="mb-6 text-[var(--muted-foreground)]">
+                恭喜你完成《数字游民实战课》全部 {TOTAL} 节课程
+              </p>
+              <p className="mb-8 text-sm text-[var(--muted-foreground)]">
+                异度世界、大师兄、小美
+              </p>
+              <Link
+                href="/"
+                className="text-[var(--accent)] underline hover:no-underline"
+              >
+                返回课程
+              </Link>
+            </div>
+          ) : (
+            <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8">
+              <h1 className="mb-4 text-2xl font-bold">继续加油</h1>
+              <p className="mb-6 text-[var(--muted-foreground)]">
+                已完成 {progress.completed}/{TOTAL} 节，完成全部可解锁证书
+              </p>
+              <div className="mb-6 h-3 overflow-hidden rounded-full bg-[var(--muted)]">
+                <div
+                  className="h-full rounded-full bg-[var(--accent)] transition-all"
+                  style={{ width: `${progress.percent}%` }}
+                />
+              </div>
+              <Link
+                href="/course/0/0"
+                className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] hover:opacity-90"
+              >
+                继续学习
+              </Link>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}