's'

app/components/AuthModal.tsx

@@ -44,6 +44,15 @@ export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps
         result = await pbLogin(email, password);
       }
       pbSaveAuth(result.token, result.record);
+      try {
+        await fetch("/api/auth/sync-session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token: result.token, record: result.record }),
+        });
+      } catch {
+        /* ignore */
+      }
       onSuccess(email);
       onClose();
       setEmail("");

app/components/Header.tsx

@@ -25,11 +25,28 @@ export default function Header() {
   const [userEmail, setUserEmail] = useState<string | null>(null);
 
   useEffect(() => {
-    setUserEmail(getStoredUserEmail());
+    let mounted = true;
+    (async () => {
+      try {
+        const res = await fetch("/api/auth/me");
+        const data = await res.json();
+        if (!mounted) return;
+        if (data?.user && data?.token) {
+          const { pbSaveAuth } = await import("@/app/lib/pocketbase");
+          pbSaveAuth(data.token, { id: data.user.id, email: data.user.email });
+          setUserEmail(data.user.email);
+          return;
+        }
+      } catch {
+        /* ignore */
+      }
+      if (mounted) setUserEmail(getStoredUserEmail());
+    })();
+    return () => { mounted = false; };
   }, []);
 
-  const handleLogout = () => {
-    pbLogout();
+  const handleLogout = async () => {
+    await pbLogout();
     setUserEmail(null);
   };
 

app/components/Roadmap.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { Link, useTranslation } from "@/i18n/navigation";
+import { Link, useTranslation, useRouter } from "@/i18n/navigation";
+import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
+import AuthModal from "@/app/components/AuthModal";
 
 const days = [
   { day: 1, icon: "👋", color: "bg-sky-500" },
@@ -15,7 +17,9 @@ const days = [
 
 export default function Roadmap() {
   const { t } = useTranslation("roadmap");
-  const [courseToast, setCourseToast] = useState(false);
+  const router = useRouter();
+  const { user, vip, loading, refetch } = useAuthAndVip();
+  const [authOpen, setAuthOpen] = useState(false);
   return (
     <section id="roadmap" className="bg-slate-50 py-20 sm:py-28 dark:bg-slate-900">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -86,7 +90,22 @@ export default function Roadmap() {
               </span>
             </Link>
 
-            <div className="flex flex-col overflow-hidden rounded-2xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 p-8 shadow-md transition-all dark:border-amber-800 dark:from-amber-900/20 dark:to-orange-900/10">
+            <button
+              type="button"
+              onClick={async () => {
+                if (loading) return;
+                if (!user) {
+                  setAuthOpen(true);
+                  return;
+                }
+                if (!vip) {
+                  router.replace("/join");
+                  return;
+                }
+                router.replace("/course");
+              }}
+              className="group flex w-full flex-col overflow-hidden rounded-2xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 p-8 text-left shadow-md transition-all hover:border-amber-300 hover:shadow-lg dark:border-amber-800 dark:from-amber-900/20 dark:to-orange-900/10 dark:hover:border-amber-700"
+            >
               <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 text-3xl shadow-lg shadow-amber-200/50 dark:shadow-amber-900/30">
                 🎓
               </div>
@@ -99,28 +118,22 @@ export default function Roadmap() {
               <p className="mt-2 flex-1 text-slate-600 dark:text-slate-400">
                 {t("course.desc")}
               </p>
-              <button
-                type="button"
-                onClick={() => {
-                  setCourseToast(true);
-                  setTimeout(() => setCourseToast(false), 2000);
-                }}
-                className="mt-6 inline-flex cursor-not-allowed items-center gap-2 self-start rounded-full bg-amber-500 px-6 py-3 font-semibold text-white opacity-90 transition hover:opacity-100 dark:bg-amber-600"
-              >
+              <span className="mt-6 inline-flex items-center gap-2 self-start rounded-full bg-amber-500 px-6 py-3 font-semibold text-white transition group-hover:bg-amber-600 dark:bg-amber-600 dark:group-hover:bg-amber-500">
                 {t("course.cta")}
-              </button>
-            </div>
+              </span>
+            </button>
           </div>
         </div>
 
-        {courseToast && (
-          <div
-            className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
-            role="alert"
-          >
-            {t("course.updating")}
-          </div>
-        )}
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={async () => {
+          setAuthOpen(false);
+          const { vip: isVip } = await refetch();
+          router.replace(isVip ? "/course" : "/join");
+        }}
+      />
       </div>
     </section>
   );

app/components/course/CTASection.tsx

@@ -1,21 +1,12 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
-import { useTranslation } from "@/i18n/navigation";
 import { CTA_CONFIG } from "@/config/course";
-import { isPaid } from "@/app/lib/course-payment";
+import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
 
 export function CTASection() {
-  const { t } = useTranslation("community");
-  const [paid, setPaid] = useState(false);
-  const [toast, setToast] = useState(false);
-  useEffect(() => {
-    setPaid(isPaid());
-    const onPayUpdate = () => setPaid(isPaid());
-    window.addEventListener("pay:updated", onPayUpdate);
-    return () => window.removeEventListener("pay:updated", onPayUpdate);
-  }, []);
+  const { user, vip } = useAuthAndVip();
+  const paid = !!user && vip;
 
   return (
     <section className="border-t border-[var(--border)] py-16 sm:py-20 md:py-24">
@@ -45,26 +36,14 @@ export function CTASection() {
             开始学习 →
           </Link>
         ) : (
-          <button
-            type="button"
-            onClick={() => {
-              setToast(true);
-              setTimeout(() => setToast(false), 2000);
-            }}
-            className="inline-flex cursor-not-allowed items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] opacity-90 shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-100 sm:px-10"
+          <Link
+            href="/join"
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-95 sm:px-10"
           >
             立即加入 →
-          </button>
+          </Link>
         )}
       </div>
-      {toast && (
-        <div
-          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
-          role="alert"
-        >
-          {t("updating")}
-        </div>
-      )}
     </section>
   );
 }

app/components/course/CourseHero.tsx

@@ -2,37 +2,30 @@
 
 import { useState, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
-import { useTranslation } from "@/i18n/navigation";
 import { HERO_CONFIG, CURRICULUM_CONFIG } from "@/config/course";
-import { isPaid } from "@/app/lib/course-payment";
+import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
 import { getLastWatched, getProgress } from "@/app/lib/learning";
 
 const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
 
 export function CourseHero() {
-  const { t } = useTranslation("community");
-  const [paid, setPaid] = useState(false);
-  const [toast, setToast] = useState(false);
+  const { user, vip } = useAuthAndVip();
   const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
   const [progress, setProgress] = useState({ completed: 0, percent: 0 });
 
   useEffect(() => {
-    setPaid(isPaid());
     setLast(getLastWatched());
     setProgress(getProgress(TOTAL_LESSONS));
-    const onPay = () => setPaid(isPaid());
     const onProgress = () => {
       setLast(getLastWatched());
       setProgress(getProgress(TOTAL_LESSONS));
     };
-    window.addEventListener("pay:updated", onPay);
     window.addEventListener("learning:progress", onProgress);
-    return () => {
-      window.removeEventListener("pay:updated", onPay);
-      window.removeEventListener("learning:progress", onProgress);
-    };
+    return () => window.removeEventListener("learning:progress", onProgress);
   }, []);
 
+  const paid = !!user && vip;
+
   return (
     <section className="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--gradient-accent),transparent)] animate-gradient" />
@@ -71,16 +64,12 @@ export function CourseHero() {
               进入课程 →
             </Link>
           ) : (
-            <button
-              type="button"
-              onClick={() => {
-                setToast(true);
-                setTimeout(() => setToast(false), 2000);
-              }}
-              className="inline-flex shrink-0 cursor-not-allowed items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] opacity-90 transition hover:opacity-100 sm:px-10"
+            <Link
+              href="/join"
+              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
             >
               立即报名 →
-            </button>
+            </Link>
           )}
         </div>
         {paid && progress.completed > 0 && (
@@ -98,14 +87,6 @@ export function CourseHero() {
           </div>
         )}
       </div>
-      {toast && (
-        <div
-          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
-          role="alert"
-        >
-          {t("updating")}
-        </div>
-      )}
     </section>
   );
 }

app/components/course/CurriculumSection.tsx

@@ -5,9 +5,11 @@ import { Link } from "@/i18n/navigation";
 import { Section } from "./Section";
 import { CURRICULUM_CONFIG } from "@/config/course";
 import { canWatchLesson } from "@/app/lib/course-payment";
+import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
 import { isBookmarked, toggleBookmark, getBookmarks, getCompletedLessons } from "@/app/lib/learning";
 
 export function CurriculumSection() {
+  const { vip } = useAuthAndVip();
   const [expanded, setExpanded] = useState<Record<number, boolean>>(() =>
     Object.fromEntries(CURRICULUM_CONFIG.modules.map((_, i) => [i, i === 0]))
   );
@@ -98,7 +100,7 @@ export function CurriculumSection() {
                 <ul className="border-t border-[var(--border)]">
                   {c.lessons.map((l) => {
                     const free = l.moduleIndex === 0 && l.lessonIndex < 2;
-                    const unlocked = canWatchLesson(l.moduleIndex, l.lessonIndex);
+                    const unlocked = canWatchLesson(l.moduleIndex, l.lessonIndex, vip);
                     const key = `${l.moduleIndex}-${l.lessonIndex}`;
                     const bookmarked = isBookmarked(l.moduleIndex, l.lessonIndex);
                     const isCompleted = completed.has(key);