eric/gitlab-instance-0a899031_digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-12 03:54:22 -05:00
parent 421f979e10
commit e7dde61e31
23 changed files with 876 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/course/CTASection.tsx
View File

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

37
app/components/course/CourseHero.tsx
View File

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

4
app/components/course/CurriculumSection.tsx
View File

@@ -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);