101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
|
|
import { CURRICULUM_CONFIG } from "@/app/cloudphone/config/course";
|
|
import { useState, useEffect } from "react";
|
|
import styles from "../vip.module.css";
|
|
|
|
const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
|
|
|
|
export function ContinueLearning() {
|
|
const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
|
|
const [progress, setProgress] = useState({ completed: 0, percent: 0 });
|
|
|
|
useEffect(() => {
|
|
setLast(getLastWatched());
|
|
setProgress(getProgress(TOTAL_LESSONS));
|
|
const onProgress = () => {
|
|
setLast(getLastWatched());
|
|
setProgress(getProgress(TOTAL_LESSONS));
|
|
};
|
|
window.addEventListener("learning:progress", onProgress);
|
|
return () => window.removeEventListener("learning:progress", onProgress);
|
|
}, []);
|
|
|
|
if (!last || progress.completed >= TOTAL_LESSONS) {
|
|
return (
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>继续学习</h2>
|
|
<Link
|
|
href="/cloudphone/course/0/0"
|
|
className={`${styles.card} ${styles.btnPrimary}`}
|
|
style={{ display: "block", textAlign: "center" }}
|
|
>
|
|
{progress.completed >= TOTAL_LESSONS ? "复习课程" : "开始学习"} →
|
|
</Link>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const module = CURRICULUM_CONFIG.modules[last.moduleIndex];
|
|
const lesson = module?.lessons[last.lessonIndex];
|
|
const title = lesson?.name || `第 ${last.moduleIndex + 1} 章`;
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>继续学习</h2>
|
|
<Link
|
|
href={`/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`}
|
|
className={styles.card}
|
|
style={{
|
|
display: "block",
|
|
textDecoration: "none",
|
|
color: "inherit",
|
|
}}
|
|
>
|
|
<div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.5rem" }}>
|
|
{title}
|
|
</div>
|
|
<div className="animate__animated animate__fadeInUp" style={{ animationFillMode: "both" }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
fontSize: "0.8rem",
|
|
color: "var(--muted-foreground)",
|
|
marginBottom: "0.25rem",
|
|
}}
|
|
>
|
|
<span>进度</span>
|
|
<span>
|
|
{progress.completed}/{TOTAL_LESSONS} 节
|
|
</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
height: "6px",
|
|
borderRadius: "3px",
|
|
background: "var(--muted)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: `${progress.percent}%`,
|
|
background: "var(--accent)",
|
|
borderRadius: "3px",
|
|
transition: "width 0.3s",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: "0.75rem", color: "var(--accent)", fontSize: "0.9rem" }}>
|
|
继续学习 →
|
|
</div>
|
|
</Link>
|
|
</section>
|
|
);
|
|
}
|