'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>
   );
 }