's'

app/components/course/CTASection.tsx

@@ -2,11 +2,14 @@
 
 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";
 
 export function CTASection() {
+  const { t } = useTranslation("community");
   const [paid, setPaid] = useState(false);
+  const [toast, setToast] = useState(false);
   useEffect(() => {
     setPaid(isPaid());
     const onPayUpdate = () => setPaid(isPaid());
@@ -34,13 +37,34 @@ export function CTASection() {
             </span>
           ))}
         </div>
-        <Link
-          href={paid ? "/course/0/0" : "/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-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
-        >
-          {paid ? "开始学习 →" : "立即加入 →"}
-        </Link>
+        {paid ? (
+          <Link
+            href="/course/0/0"
+            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-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
+          >
+            开始学习 →
+          </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"
+          >
+            立即加入 →
+          </button>
+        )}
       </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,6 +2,7 @@
 
 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 { getLastWatched, getProgress } from "@/app/lib/learning";
@@ -9,7 +10,9 @@ 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 [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
   const [progress, setProgress] = useState({ completed: 0, percent: 0 });
 
@@ -60,13 +63,24 @@ export function CourseHero() {
             >
               继续学习 →
             </Link>
-          ) : (
+          ) : paid ? (
             <Link
-              href={paid ? "/course/0/0" : "/join"}
+              href="/course/0/0"
               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"
             >
-              {paid ? "进入课程 →" : "立即报名 →"}
+              进入课程 →
             </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"
+            >
+              立即报名 →
+            </button>
           )}
         </div>
         {paid && progress.completed > 0 && (
@@ -84,6 +98,14 @@ 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>
   );
 }