's'

app/course/VideoCard.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { generateVideoPoster } from "./videoPoster";
+
+type Lesson = {
+  id: string;
+  title: string;
+  duration: string;
+  videoUrl?: string;
+};
+
+type Props = {
+  lesson: Lesson;
+  completed?: boolean;
+  onComplete?: () => void;
+};
+
+export function VideoCard({ lesson, completed = false, onComplete }: Props) {
+  const [poster, setPoster] = useState<string | null>(null);
+
+  useEffect(() => {
+    setPoster(generateVideoPoster(lesson.title, lesson.id));
+  }, [lesson.title, lesson.id]);
+
+  const handleEnded = useCallback(() => {
+    onComplete?.();
+  }, [onComplete]);
+
+  return (
+    <article
+      className={`group overflow-hidden rounded-2xl border shadow-sm transition-all duration-200 hover:shadow-md ${
+        completed
+          ? "border-emerald-200 bg-emerald-50/50 hover:border-emerald-300"
+          : "border-slate-100 bg-white hover:border-slate-200"
+      }`}
+    >
+      {/* 三级标题：视频上方，突出显示 */}
+      <div className="flex items-center gap-3 border-b border-slate-100 bg-white/80 px-4 py-3">
+        <span
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${
+            completed ? "bg-emerald-100 text-emerald-600" : "bg-sky-50 text-sky-600"
+          }`}
+        >
+          {lesson.id}
+        </span>
+        <h4 className="min-w-0 flex-1 text-base font-semibold leading-snug text-slate-800 line-clamp-2">
+          {lesson.title}
+        </h4>
+      </div>
+      <div className="relative aspect-video overflow-hidden bg-slate-900">
+        <video
+          src={lesson.videoUrl}
+          poster={poster ?? undefined}
+          controls
+          playsInline
+          onEnded={handleEnded}
+          className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-[1.01]"
+          preload="metadata"
+        >
+          您的浏览器不支持视频播放
+        </video>
+        <span className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-0.5 text-xs font-medium tabular-nums text-white/90 backdrop-blur-sm">
+          {lesson.duration}
+        </span>
+        {completed && (
+          <span className="absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500 text-white shadow-md">
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </span>
+        )}
+      </div>
+    </article>
+  );
+}

app/course/page.tsx

@@ -1,6 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { VideoCard } from "./VideoCard";
+import { useVideoProgress } from "./useVideoProgress";
+import AuthModal from "../components/AuthModal";
+
+function getStoredUser(): string | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem("pb_user");
+    if (!raw) return null;
+    const user = JSON.parse(raw);
+    return user?.email ?? null;
+  } catch {
+    return null;
+  }
+}
 
 /* ─── data ─── */
 
@@ -61,68 +76,58 @@ const benefits = [
   },
 ];
 
+// 示例视频：w3schools 公开样本，可替换为 MinIO CDN URL（如 https://minioweb.hackrobot.cn/hackrobot/course/xxx.mp4）
+const SAMPLE_VIDEO = "https://www.w3schools.com/html/mov_bbb.mp4";
+
+// 一级：part 二级：section 三级：lesson
 const curriculum = [
   {
     emoji: "🚀",
-    chapter: "基础篇 · 认识数字游民",
-    lessons: [
-      { id: "01", title: "什么是数字游民？破除 5 个常见误解", duration: "12:30" },
-      { id: "02", title: "数字游民三种模式：蜜蜂、乌龟、候鸟", duration: "08:45" },
+    part: "基础篇",
+    sections: [
+      { name: "认识数字游民", lessons: [{ id: "01", title: "什么是数字游民？破除 5 个常见误解", duration: "12:30", videoUrl: SAMPLE_VIDEO }, { id: "02", title: "数字游民三种模式：蜜蜂、乌龟、候鸟", duration: "08:45", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
   {
     emoji: "💡",
-    chapter: "技能篇 · 远程工作能力",
-    lessons: [
-      { id: "03", title: "远程高薪技能全景图：找到你的方向", duration: "14:20" },
-      { id: "04", title: "30天技能升级路线：从评估到接单", duration: "11:15" },
-      { id: "05", title: "建立个人品牌：让客户主动找你", duration: "09:40" },
+    part: "技能篇",
+    sections: [
+      { name: "远程工作能力", lessons: [{ id: "03", title: "远程高薪技能全景图：找到你的方向", duration: "14:20", videoUrl: SAMPLE_VIDEO }, { id: "04", title: "30天技能升级路线：从评估到接单", duration: "11:15", videoUrl: SAMPLE_VIDEO }, { id: "05", title: "建立个人品牌：让客户主动找你", duration: "09:40", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
   {
     emoji: "💰",
-    chapter: "收入篇 · 构建收入体系",
-    lessons: [
-      { id: "06", title: "远程全职 vs 自由职业：选哪条路？", duration: "10:05" },
-      { id: "07", title: "自由职业平台实操：Upwork / Toptal / 电鸭", duration: "13:50" },
-      { id: "08", title: "被动收入搭建：数字产品 & 在线课程", duration: "12:20" },
-      { id: "09", title: "定价的艺术：如何报价不心虚", duration: "07:30" },
+    part: "收入篇",
+    sections: [
+      { name: "构建收入体系", lessons: [{ id: "06", title: "远程全职 vs 自由职业：选哪条路？", duration: "10:05", videoUrl: SAMPLE_VIDEO }, { id: "07", title: "自由职业平台实操：Upwork / Toptal / 电鸭", duration: "13:50", videoUrl: SAMPLE_VIDEO }, { id: "08", title: "被动收入搭建：数字产品 & 在线课程", duration: "12:20", videoUrl: SAMPLE_VIDEO }, { id: "09", title: "定价的艺术：如何报价不心虚", duration: "07:30", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
   {
     emoji: "🛠️",
-    chapter: "工具篇 · 移动办公装备",
-    lessons: [
-      { id: "10", title: "硬件极简主义：一个背包装下办公室", duration: "06:45" },
-      { id: "11", title: "远程协作工具栈：Slack / Notion / Linear", duration: "08:30" },
-      { id: "12", title: "安全必修课：VPN / 密码管理 / 2FA", duration: "05:55" },
-      { id: "13", title: "跨境财务工具：Wise / Stripe / Revolut", duration: "07:10" },
+    part: "工具篇",
+    sections: [
+      { name: "移动办公装备", lessons: [{ id: "10", title: "硬件极简主义：一个背包装下办公室", duration: "06:45", videoUrl: SAMPLE_VIDEO }, { id: "11", title: "远程协作工具栈：Slack / Notion / Linear", duration: "08:30", videoUrl: SAMPLE_VIDEO }, { id: "12", title: "安全必修课：VPN / 密码管理 / 2FA", duration: "05:55", videoUrl: SAMPLE_VIDEO }, { id: "13", title: "跨境财务工具：Wise / Stripe / Revolut", duration: "07:10", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
   {
     emoji: "📋",
-    chapter: "合规篇 · 签证税务保险",
-    lessons: [
-      { id: "14", title: "55 国数字游民签证政策全解读", duration: "15:30" },
-      { id: "15", title: "税务居民身份与合规规划", duration: "11:40" },
-      { id: "16", title: "数字游民保险选购指南", duration: "06:20" },
+    part: "合规篇",
+    sections: [
+      { name: "签证税务保险", lessons: [{ id: "14", title: "55 国数字游民签证政策全解读", duration: "15:30", videoUrl: SAMPLE_VIDEO }, { id: "15", title: "税务居民身份与合规规划", duration: "11:40", videoUrl: SAMPLE_VIDEO }, { id: "16", title: "数字游民保险选购指南", duration: "06:20", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
   {
     emoji: "🗺️",
-    chapter: "目的地篇 · 选择你的城市",
-    lessons: [
-      { id: "17", title: "亚洲三城：清迈 / 巴厘岛 / 首尔深度对比", duration: "10:50" },
-      { id: "18", title: "欧洲双雄：里斯本 / 巴塞罗那生活实录", duration: "09:25" },
-      { id: "19", title: "美洲探索：墨西哥城 / 麦德林旅居指南", duration: "08:15" },
+    part: "目的地篇",
+    sections: [
+      { name: "选择你的城市", lessons: [{ id: "17", title: "亚洲三城：清迈 / 巴厘岛 / 首尔深度对比", duration: "10:50", videoUrl: SAMPLE_VIDEO }, { id: "18", title: "欧洲双雄：里斯本 / 巴塞罗那生活实录", duration: "09:25", videoUrl: SAMPLE_VIDEO }, { id: "19", title: "美洲探索：墨西哥城 / 麦德林旅居指南", duration: "08:15", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
   {
     emoji: "🏆",
-    chapter: "实战篇 · 启程出发",
-    lessons: [
-      { id: "20", title: "出发前检查清单 & 打包哲学", duration: "07:40" },
-      { id: "21", title: "第一个月生存指南 & 长期可持续策略", duration: "13:10" },
+    part: "实战篇",
+    sections: [
+      { name: "启程出发", lessons: [{ id: "20", title: "出发前检查清单 & 打包哲学", duration: "07:40", videoUrl: SAMPLE_VIDEO }, { id: "21", title: "第一个月生存指南 & 长期可持续策略", duration: "13:10", videoUrl: SAMPLE_VIDEO }] },
     ],
   },
 ];
@@ -155,22 +160,58 @@ const instructors = [
 
 export default function CoursePage() {
   const [modalOpen, setModalOpen] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const [expandedPart, setExpandedPart] = useState<string | null>(null);
+  const { markCompleted, isCompleted, isPartCompleted } = useVideoProgress();
+
+  useEffect(() => {
+    setUserEmail(getStoredUser());
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem("pb_token");
+    localStorage.removeItem("pb_user");
+    setUserEmail(null);
+  };
 
   return (
     <div className="min-h-screen bg-white text-slate-900">
       {/* ── Nav ── */}
       <header className="sticky top-0 z-50 border-b border-slate-100 bg-white/80 backdrop-blur-lg">
-        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4 sm:px-6">
+        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between gap-3 px-4 sm:px-6">
           <a href="/" className="flex items-center gap-2 text-sm font-bold">
             <span className="text-lg">🌍</span>
             数字游民指南
           </a>
-          <button
-            onClick={() => setModalOpen(true)}
-            className="rounded-full bg-sky-500 px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-sky-600"
-          >
-            立即报名
-          </button>
+          <div className="flex items-center gap-2 sm:gap-3">
+            {userEmail ? (
+              <>
+                <span className="hidden max-w-[120px] truncate text-sm text-slate-600 sm:inline">
+                  {userEmail}
+                </span>
+                <button
+                  onClick={handleLogout}
+                  className="rounded-full border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50"
+                >
+                  退出
+                </button>
+              </>
+            ) : (
+              <button
+                onClick={() => setAuthOpen(true)}
+                className="rounded-full border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50"
+              >
+                登录 / 注册
+              </button>
+            )}
+            <button
+              onClick={() => setModalOpen(true)}
+              className="rounded-full bg-sky-500 px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-sky-600"
+            >
+              立即报名
+            </button>
+          </div>
         </div>
       </header>
 
@@ -264,55 +305,133 @@ export default function CoursePage() {
         </div>
       </section>
 
-      {/* ── Curriculum ── */}
-      <section className="py-20 sm:py-24">
-        <div className="mx-auto max-w-5xl px-4 sm:px-6">
-          <h2 className="text-center text-2xl font-bold sm:text-3xl">
-            21 节实战课程
-          </h2>
-          <p className="mx-auto mt-3 max-w-xl text-center text-slate-500">
-            从入门到启程，完整的学习路径
-          </p>
+      {/* ── Curriculum ── 参考：垂直时间线 + 学习路径视觉 */}
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-slate-50 py-24 sm:py-28">
+        <div className="mx-auto max-w-4xl px-4 sm:px-6">
+          {/* 标题区：大数字 + 学习路径感 */}
+          <div className="mb-16 text-center">
+            <div className="inline-flex items-baseline gap-2">
+              <span className="gradient-text text-6xl font-extrabold tabular-nums tracking-tight sm:text-7xl">
+                21
+              </span>
+              <span className="text-2xl font-bold text-slate-800 sm:text-3xl">
+                节实战课程
+              </span>
+            </div>
+            <p className="mt-4 text-slate-500">
+              从入门到启程 · 完整的学习路径
+            </p>
+            <div className="mx-auto mt-6 h-px w-24 rounded-full bg-gradient-to-r from-transparent via-sky-300/60 to-transparent" />
+          </div>
 
-          <div className="mt-14 space-y-6">
-            {curriculum.map((ch) => (
-              <div
-                key={ch.chapter}
-                className="overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm"
-              >
-                {/* Chapter header */}
-                <div className="flex items-center gap-3 border-b border-slate-100 bg-slate-50/80 px-6 py-4">
-                  <span className="text-xl">{ch.emoji}</span>
-                  <h3 className="font-bold text-slate-800">{ch.chapter}</h3>
-                </div>
+          {/* 垂直时间线：左侧竖线 + 节点 */}
+          <div className="relative">
+            {/* 中央竖线 */}
+            <div
+              className="absolute left-[19px] top-6 bottom-6 w-0.5 bg-gradient-to-b from-sky-200/80 via-sky-300/60 to-sky-200/80 sm:left-[23px]"
+              aria-hidden
+            />
 
-                {/* Lessons */}
-                <ul>
-                  {ch.lessons.map((lesson, i) => (
-                    <li
-                      key={lesson.id}
-                      className={`flex items-center justify-between px-6 py-3.5 transition-colors hover:bg-sky-50/40 ${
-                        i < ch.lessons.length - 1
-                          ? "border-b border-slate-50"
-                          : ""
-                      }`}
-                    >
-                      <div className="flex items-center gap-3">
-                        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-xs font-bold text-slate-500">
-                          {lesson.id}
-                        </span>
-                        <span className="text-sm font-medium text-slate-700 sm:text-base">
-                          {lesson.title}
-                        </span>
+            <div className="space-y-0">
+              {curriculum.map((ch, idx) => {
+                const allLessons = ch.sections.flatMap((s) => s.lessons);
+                const partCompleted = isPartCompleted(allLessons.map((l) => l.id));
+                const isExpanded = expandedPart === ch.part;
+                const totalLessons = allLessons.length;
+                return (
+                  <div key={ch.part} className="relative flex gap-6 pb-10 last:pb-0">
+                    {/* 左侧节点圆：完成时显示 ✓ */}
+                    <div className="relative z-10 flex shrink-0 items-start pt-0.5">
+                      <div
+                        className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold shadow-sm transition-colors sm:h-12 sm:w-12 ${
+                          partCompleted
+                            ? "border-2 border-emerald-300 bg-emerald-50 text-emerald-600"
+                            : "border-2 border-sky-200 bg-white text-sky-600"
+                        }`}
+                      >
+                        {partCompleted ? (
+                          <svg className="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                          </svg>
+                        ) : (
+                          idx + 1
+                        )}
                       </div>
-                      <span className="ml-4 shrink-0 text-xs tabular-nums text-slate-400">
-                        {lesson.duration}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
+                    </div>
+
+                    {/* 右侧内容卡片 */}
+                    <div className="min-w-0 flex-1">
+                      <div
+                        className={`overflow-hidden rounded-2xl border shadow-sm transition-colors ${
+                          partCompleted ? "border-emerald-200/80 bg-emerald-50/30" : "border-slate-200/80 bg-white"
+                        }`}
+                      >
+                        {/* 一级：Part 标题，点击展开/收起 */}
+                        <button
+                          type="button"
+                          onClick={() => setExpandedPart(isExpanded ? null : ch.part)}
+                          className="flex w-full items-center justify-between gap-3 px-5 py-4 text-left transition-colors hover:bg-slate-50/80 sm:px-6"
+                        >
+                          <div className="flex items-center gap-3">
+                            <span className="text-2xl">{ch.emoji}</span>
+                            <h3 className="font-bold text-slate-800">{ch.part}</h3>
+                            {partCompleted && (
+                              <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
+                                已完成
+                              </span>
+                            )}
+                          </div>
+                          <span className="flex items-center gap-2 text-sm text-slate-400">
+                            <span>{totalLessons} 节</span>
+                            <svg
+                              className={`h-4 w-4 shrink-0 transition-transform duration-200 ${
+                                isExpanded ? "rotate-180" : ""
+                              }`}
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                          </span>
+                        </button>
+
+                        {/* 展开后：二级 section + 三级 lesson */}
+                        {isExpanded && (
+                          <div className="border-t border-slate-100 bg-slate-50/40">
+                            {ch.sections.map((sec) => (
+                              <div key={sec.name} className="border-b border-slate-100 last:border-b-0">
+                                {/* 二级标题 */}
+                                <div className="flex items-center gap-3 border-b border-slate-100/80 bg-slate-50/60 px-5 py-3.5 sm:px-6">
+                                  <span className="flex h-6 w-1 shrink-0 rounded-full bg-gradient-to-b from-sky-400 to-sky-500" />
+                                  <h4 className="text-sm font-semibold text-slate-700">
+                                    {sec.name}
+                                  </h4>
+                                  <span className="rounded-full bg-slate-200/60 px-2 py-0.5 text-xs font-medium text-slate-500">
+                                    {sec.lessons.length} 节
+                                  </span>
+                                </div>
+                                {/* 三级：视频卡片网格 */}
+                                <div className="grid gap-5 p-5 sm:grid-cols-2 sm:p-6 lg:grid-cols-3">
+                                  {sec.lessons.map((lesson) => (
+                                    <VideoCard
+                                      key={lesson.id}
+                                      lesson={lesson as { id: string; title: string; duration: string; videoUrl?: string }}
+                                      completed={isCompleted(lesson.id)}
+                                      onComplete={() => markCompleted(lesson.id)}
+                                    />
+                                  ))}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
           </div>
         </div>
       </section>
@@ -391,7 +510,13 @@ export default function CoursePage() {
         开源免费 · 社区驱动
       </footer>
 
-      {/* ── Modal ── */}
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={(email) => setUserEmail(email)}
+      />
+
+      {/* ── 报名 Modal ── */}
       {modalOpen && (
         <div
           className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"

app/course/useVideoProgress.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+const STORAGE_KEY = "digital-course-video-completed";
+
+function loadCompleted(): Set<string> {
+  if (typeof window === "undefined") return new Set();
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return new Set();
+    const arr = JSON.parse(raw) as string[];
+    return new Set(Array.isArray(arr) ? arr : []);
+  } catch {
+    return new Set();
+  }
+}
+
+function saveCompleted(ids: Set<string>) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]));
+  } catch {
+    // ignore
+  }
+}
+
+export function useVideoProgress() {
+  const [completed, setCompleted] = useState<Set<string>>(() => new Set());
+
+  useEffect(() => {
+    setCompleted(loadCompleted());
+  }, []);
+
+  const markCompleted = useCallback((lessonId: string) => {
+    setCompleted((prev) => {
+      const next = new Set(prev);
+      next.add(lessonId);
+      saveCompleted(next);
+      return next;
+    });
+  }, []);
+
+  const isCompleted = useCallback(
+    (lessonId: string) => completed.has(lessonId),
+    [completed]
+  );
+
+  const isPartCompleted = useCallback(
+    (lessonIds: string[]) =>
+      lessonIds.length > 0 && lessonIds.every((id) => completed.has(id)),
+    [completed]
+  );
+
+  return { completed, markCompleted, isCompleted, isPartCompleted };
+}

app/course/videoPoster.ts

@@ -0,0 +1,184 @@
+/**
+ * 生成视频封面图（数字游民插画风格，无序号）
+ * 返回 data URL，可直接用作 video poster
+ */
+export function generateVideoPoster(
+  title: string,
+  _lessonId: string,
+  options?: {
+    width?: number;
+    height?: number;
+    bgGradient?: [string, string];
+    accentColor?: string;
+  }
+): string {
+  const width = options?.width ?? 640;
+  const height = options?.height ?? 360;
+  const [from, to] = options?.bgGradient ?? ["#0ea5e9", "#06b6d4"];
+  const accent = options?.accentColor ?? "#ffffff";
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  // 数字游民插画：天空渐变背景
+  const skyGrad = ctx.createLinearGradient(0, 0, 0, height);
+  skyGrad.addColorStop(0, "#87CEEB");
+  skyGrad.addColorStop(0.5, "#B8E0F0");
+  skyGrad.addColorStop(0.75, "#E8F4F8");
+  skyGrad.addColorStop(1, "#F5E6D3");
+  ctx.fillStyle = skyGrad;
+  ctx.fillRect(0, 0, width, height);
+
+  // 海洋
+  ctx.fillStyle = "rgba(14, 165, 233, 0.25)";
+  ctx.fillRect(0, height * 0.65, width, height * 0.35);
+  ctx.strokeStyle = "rgba(255,255,255,0.4)";
+  ctx.lineWidth = 2;
+  for (let i = 0; i < 6; i++) {
+    ctx.beginPath();
+    const x = (i * width) / 5;
+    ctx.moveTo(x, height * 0.72);
+    ctx.quadraticCurveTo(x + 50, height * 0.68, x + 100, height * 0.72);
+    ctx.stroke();
+  }
+
+  // 太阳
+  const sunGrad = ctx.createRadialGradient(width * 0.85, height * 0.15, 0, width * 0.85, height * 0.15, 50);
+  sunGrad.addColorStop(0, "#FEF3C7");
+  sunGrad.addColorStop(0.6, "#FCD34D");
+  sunGrad.addColorStop(1, "rgba(252, 211, 77, 0)");
+  ctx.fillStyle = sunGrad;
+  ctx.beginPath();
+  ctx.arc(width * 0.85, height * 0.15, 50, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = "#FCD34D";
+  ctx.beginPath();
+  ctx.arc(width * 0.85, height * 0.15, 18, 0, Math.PI * 2);
+  ctx.fill();
+
+  // 椰子树（简化插画）
+  const palmX = width * 0.12;
+  const palmY = height * 0.55;
+  ctx.fillStyle = "#8B7355";
+  ctx.fillRect(palmX - 4, palmY, 8, height * 0.35);
+  ctx.fillStyle = "#22C55E";
+  for (let i = 0; i < 5; i++) {
+    const a = (i / 5) * Math.PI * 0.8 - Math.PI * 0.2;
+    ctx.beginPath();
+    ctx.moveTo(palmX, palmY);
+    ctx.quadraticCurveTo(palmX + Math.cos(a) * 35, palmY - 25, palmX + Math.cos(a) * 55, palmY - 45);
+    ctx.strokeStyle = "#22C55E";
+    ctx.lineWidth = 6;
+    ctx.lineCap = "round";
+    ctx.stroke();
+  }
+
+  // 地球/ globe
+  const globeX = width * 0.78;
+  const globeY = height * 0.35;
+  ctx.strokeStyle = "rgba(255,255,255,0.6)";
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.arc(globeX, globeY, 45, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.ellipse(globeX, globeY, 45, 15, 0.3, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.ellipse(globeX, globeY, 15, 45, -0.2, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(14, 165, 233, 0.15)";
+  ctx.fill();
+
+  // 笔记本电脑（数字游民工作象征）
+  const lapX = width * 0.25;
+  const lapY = height * 0.5;
+  ctx.fillStyle = "#E5E7EB";
+  ctx.fillRect(lapX - 35, lapY - 20, 70, 45);
+  ctx.fillStyle = "#94A3B8";
+  ctx.fillRect(lapX - 32, lapY - 18, 64, 35);
+  ctx.fillStyle = "#0ea5e9";
+  ctx.globalAlpha = 0.6;
+  ctx.fillRect(lapX - 28, lapY - 14, 56, 27);
+  ctx.globalAlpha = 1;
+  ctx.fillStyle = "#64748B";
+  ctx.fillRect(lapX - 38, lapY + 22, 76, 6);
+  ctx.fillRect(lapX - 2, lapY + 18, 4, 8);
+
+  // 云朵
+  ctx.fillStyle = "rgba(255,255,255,0.7)";
+  ctx.beginPath();
+  ctx.arc(width * 0.5, height * 0.2, 25, 0, Math.PI * 2);
+  ctx.arc(width * 0.55, height * 0.18, 20, 0, Math.PI * 2);
+  ctx.arc(width * 0.6, height * 0.22, 22, 0, Math.PI * 2);
+  ctx.fill();
+
+  // 底部半透明遮罩，让标题更清晰
+  const overlay = ctx.createLinearGradient(0, height * 0.5, 0, height);
+  overlay.addColorStop(0, "rgba(0,0,0,0)");
+  overlay.addColorStop(0.5, "rgba(0,0,0,0.1)");
+  overlay.addColorStop(1, "rgba(0,0,0,0.4)");
+  ctx.fillStyle = overlay;
+  ctx.fillRect(0, 0, width, height);
+
+  // 标题：多行自动换行
+  ctx.fillStyle = accent;
+  ctx.font = `600 ${Math.min(width * 0.045, 28)}px system-ui, "PingFang SC", sans-serif`;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "top";
+
+  const maxWidth = width * 0.9;
+  const lineHeight = Math.min(width * 0.05, 32);
+  const paddingX = width * 0.06;
+  const paddingY = height * 0.68;
+
+  const words = title.split("");
+  let line = "";
+  const lines: string[] = [];
+
+  for (const char of words) {
+    const testLine = line + char;
+    const metrics = ctx.measureText(testLine);
+    if (metrics.width > maxWidth && line) {
+      lines.push(line);
+      line = char;
+    } else {
+      line = testLine;
+    }
+  }
+  if (line) lines.push(line);
+
+  ctx.shadowColor = "rgba(0,0,0,0.35)";
+  ctx.shadowBlur = 6;
+  ctx.shadowOffsetY = 1;
+
+  const maxLines = 2;
+  const startY = paddingY;
+  lines.slice(0, maxLines).forEach((ln, i) => {
+    ctx.fillText(ln, paddingX, startY + i * lineHeight);
+  });
+
+  ctx.shadowColor = "transparent";
+  ctx.shadowBlur = 0;
+
+  // 播放图标（右下角）
+  const playSize = Math.min(width, height) * 0.1;
+  const playX = width - width * 0.12;
+  const playY = height - height * 0.15;
+  ctx.fillStyle = "rgba(255,255,255,0.9)";
+  ctx.beginPath();
+  ctx.arc(playX, playY, playSize, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = from;
+  ctx.beginPath();
+  ctx.moveTo(playX - playSize * 0.3, playY - playSize * 0.5);
+  ctx.lineTo(playX - playSize * 0.3, playY + playSize * 0.5);
+  ctx.lineTo(playX + playSize * 0.5, playY);
+  ctx.closePath();
+  ctx.fill();
+
+  return canvas.toDataURL("image/jpeg", 0.92);
+}