's'

2026-03-11 23:47:45 -05:00
parent 296d703307
commit 0c2ccadb6b
35 changed files with 2399 additions and 195 deletions
--- a/app/vip/components/dashboard/ContinueLearning.tsx
+++ b/app/vip/components/dashboard/ContinueLearning.tsx
@@ -0,0 +1,100 @@
+"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>
+  );
+}