's'
This commit is contained in:
27
app/topic/[topicId]/layout.tsx
Normal file
27
app/topic/[topicId]/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ topicId: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { topicId } = await params;
|
||||
const titles: Record<string, string> = {
|
||||
cloudphone: "云手机模块 | 低成本自建云手机",
|
||||
livestream: "无人直播模块 | TikTok/YouTube 24小时自动化",
|
||||
indie: "独立开发模块 | 即将上线",
|
||||
aiagent: "AI Agent 模块 | 即将上线",
|
||||
};
|
||||
return {
|
||||
title: titles[topicId] ?? "模块 | 异度星球",
|
||||
description: "异度星球 VIP 会员专属视频教程模块",
|
||||
};
|
||||
}
|
||||
|
||||
export default function TopicLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
54
app/topic/[topicId]/page.tsx
Normal file
54
app/topic/[topicId]/page.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { TopicHeader } from "../components/TopicHeader";
|
||||
import { TopicBreadcrumb } from "../components/TopicBreadcrumb";
|
||||
import { TopicHero } from "../components/TopicHero";
|
||||
import { TopicCurriculum } from "../components/TopicCurriculum";
|
||||
import { TopicComingSoon } from "../components/TopicComingSoon";
|
||||
import { TopicFooter } from "../components/TopicFooter";
|
||||
import { getTopicConfig } from "../config";
|
||||
import { ChatFloatButton } from "@/app/cloudphone/components/ChatFloatButton";
|
||||
|
||||
export default function TopicPage() {
|
||||
const params = useParams();
|
||||
const topicId = String(params?.topicId ?? "");
|
||||
const config = getTopicConfig(topicId);
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--background)]">
|
||||
<TopicHeader topicId="cloudphone" />
|
||||
<main className="pt-20 pb-16">
|
||||
<div className="mx-auto max-w-4xl px-4 py-16 text-center">
|
||||
<h1 className="mb-4 text-2xl font-bold">模块不存在</h1>
|
||||
<p className="mb-6 text-[var(--muted-foreground)]">请检查链接或返回首页</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90"
|
||||
>
|
||||
← 返回首页
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
|
||||
<TopicHeader topicId={topicId} />
|
||||
<ChatFloatButton />
|
||||
<main>
|
||||
<div className="mx-auto max-w-6xl px-4 pt-20 sm:px-6 md:px-6">
|
||||
<TopicBreadcrumb topicId={topicId} />
|
||||
</div>
|
||||
<TopicHero topicId={topicId} />
|
||||
<TopicCurriculum topicId={topicId} />
|
||||
<TopicComingSoon topicId={topicId} />
|
||||
<TopicFooter topicId={topicId} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
app/topic/components/TopicBreadcrumb.tsx
Normal file
30
app/topic/components/TopicBreadcrumb.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { getTopicConfig } from "../config";
|
||||
|
||||
type TopicBreadcrumbProps = {
|
||||
topicId: string;
|
||||
};
|
||||
|
||||
export function TopicBreadcrumb({ topicId }: TopicBreadcrumbProps) {
|
||||
const config = getTopicConfig(topicId);
|
||||
if (!config) return null;
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="mb-6 flex flex-wrap items-center gap-2 text-sm text-[var(--muted-foreground)]"
|
||||
aria-label="面包屑"
|
||||
>
|
||||
<Link href="/" className="transition hover:text-[var(--foreground)]">
|
||||
首页
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<Link href="/#topics" className="transition hover:text-[var(--foreground)]">
|
||||
模块
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-[var(--foreground)] font-medium">{config.title}</span>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
31
app/topic/components/TopicComingSoon.tsx
Normal file
31
app/topic/components/TopicComingSoon.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { getTopicConfig } from "../config";
|
||||
|
||||
type TopicComingSoonProps = {
|
||||
topicId: string;
|
||||
};
|
||||
|
||||
export function TopicComingSoon({ topicId }: TopicComingSoonProps) {
|
||||
const config = getTopicConfig(topicId);
|
||||
if (!config?.externalUrl) return null;
|
||||
|
||||
return (
|
||||
<section className="border-t border-[var(--border)] py-16 md:py-24">
|
||||
<div className="mx-auto max-w-2xl px-4 text-center sm:px-6">
|
||||
<div className="mb-6 text-6xl">{config.icon}</div>
|
||||
<h2 className="mb-4 text-xl font-bold sm:text-2xl">即将上线</h2>
|
||||
<p className="mb-8 text-[var(--muted-foreground)]">{config.desc}</p>
|
||||
<Link
|
||||
href={config.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex 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"
|
||||
>
|
||||
前往数字游民指南了解更多 →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
152
app/topic/components/TopicCurriculum.tsx
Normal file
152
app/topic/components/TopicCurriculum.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { getTopicCurriculum } from "../config";
|
||||
import { canWatchLesson } from "@/app/cloudphone/lib/payment";
|
||||
import { isBookmarked, toggleBookmark, getBookmarks, getCompletedLessons } from "@/app/cloudphone/lib/learning";
|
||||
|
||||
type TopicCurriculumProps = {
|
||||
topicId: string;
|
||||
};
|
||||
|
||||
export function TopicCurriculum({ topicId }: TopicCurriculumProps) {
|
||||
const [expanded, setExpanded] = useState<Record<number, boolean>>({});
|
||||
const [bookmarks, setBookmarks] = useState<Set<string>>(new Set());
|
||||
const [completed, setCompleted] = useState<Set<string>>(new Set());
|
||||
|
||||
const curriculum = getTopicCurriculum(topicId);
|
||||
|
||||
useEffect(() => {
|
||||
setBookmarks(getBookmarks());
|
||||
setCompleted(getCompletedLessons());
|
||||
const onB = () => setBookmarks(getBookmarks());
|
||||
const onP = () => setCompleted(getCompletedLessons());
|
||||
window.addEventListener("learning:bookmarks", onB);
|
||||
window.addEventListener("learning:progress", onP);
|
||||
return () => {
|
||||
window.removeEventListener("learning:bookmarks", onB);
|
||||
window.removeEventListener("learning:progress", onP);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const curr = getTopicCurriculum(topicId);
|
||||
if (curr?.modules?.length) {
|
||||
setExpanded((prev) => {
|
||||
const next = { ...prev };
|
||||
curr.modules.forEach((_, i) => {
|
||||
if (next[i] === undefined) next[i] = i === 0;
|
||||
});
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}, [topicId]);
|
||||
|
||||
const toggle = (i: number) => {
|
||||
setExpanded((prev) => ({ ...prev, [i]: !prev[i] }));
|
||||
};
|
||||
|
||||
if (!curriculum?.hasContent || !curriculum.modules.length) return null;
|
||||
|
||||
const modules = curriculum.modules;
|
||||
|
||||
return (
|
||||
<section className="border-t border-[var(--border)] py-12 md:py-16 lg:py-20">
|
||||
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
||||
<h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">实战课程</h2>
|
||||
<p className="mb-6 text-center text-[var(--muted-foreground)] sm:mb-8 md:mb-10">
|
||||
从入门到进阶,完整学习路径
|
||||
</p>
|
||||
<div className="space-y-2 md:space-y-3">
|
||||
{modules.map((module, i) => {
|
||||
const isOpen = expanded[i] ?? true;
|
||||
return (
|
||||
<div
|
||||
key={module.title}
|
||||
className="animate__animated animate__fadeInUp overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] shadow-sm transition-all duration-200 hover:border-[var(--accent)]/30 hover:shadow-md md:rounded-2xl"
|
||||
style={{ animationDelay: `${i * 0.06}s`, animationFillMode: "both" }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(i)}
|
||||
className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)]/50 sm:px-5 sm:py-4"
|
||||
>
|
||||
<span className="flex items-center gap-2 text-base font-semibold sm:text-lg">
|
||||
<span
|
||||
className={`inline-block transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`}
|
||||
>
|
||||
▶
|
||||
</span>
|
||||
<span>{module.emoji}</span>
|
||||
{module.title}
|
||||
</span>
|
||||
<span className="text-sm text-[var(--muted-foreground)]">{module.lessons.length} 节</span>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<ul className="border-t border-[var(--border)]">
|
||||
{module.lessons.map((lesson, li) => {
|
||||
const origMod = module.originalModuleIndex;
|
||||
const free = origMod === 0 && li < 2;
|
||||
const unlocked = canWatchLesson(origMod, li);
|
||||
const key = `${origMod}-${li}`;
|
||||
const bookmarked = isBookmarked(origMod, li);
|
||||
const isCompleted = completed.has(key);
|
||||
return (
|
||||
<li key={key}>
|
||||
<Link
|
||||
href={`/cloudphone/course/${origMod}/${li}`}
|
||||
className="flex flex-col gap-1 px-4 py-3 transition hover:bg-[var(--muted)]/50 sm:flex-row sm:items-center sm:justify-between sm:px-5 sm:py-3"
|
||||
>
|
||||
<span className="flex items-center gap-2 truncate sm:gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleBookmark(origMod, li);
|
||||
}}
|
||||
className="shrink-0 text-xs"
|
||||
aria-label={bookmarked ? "取消收藏" : "收藏"}
|
||||
>
|
||||
{bookmarked ? "⭐" : "☆"}
|
||||
</button>
|
||||
<span
|
||||
className={
|
||||
unlocked ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]"
|
||||
}
|
||||
>
|
||||
{lesson.name}
|
||||
</span>
|
||||
{free && (
|
||||
<span className="shrink-0 rounded bg-[var(--accent)]/20 px-1.5 py-0.5 text-xs text-[var(--accent)]">
|
||||
试看
|
||||
</span>
|
||||
)}
|
||||
{isCompleted && (
|
||||
<span className="shrink-0 rounded bg-green-500/20 px-1.5 py-0.5 text-xs text-green-600 dark:text-green-400">
|
||||
✓
|
||||
</span>
|
||||
)}
|
||||
{!unlocked && (
|
||||
<span className="shrink-0 text-xs text-[var(--muted-foreground)]">🔒</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-2 text-xs text-[var(--muted-foreground)] sm:text-sm">
|
||||
{lesson.duration}
|
||||
<span className="text-[var(--accent)]">→</span>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
44
app/topic/components/TopicFooter.tsx
Normal file
44
app/topic/components/TopicFooter.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { getTopicConfig } from "../config";
|
||||
|
||||
type TopicFooterProps = {
|
||||
topicId: string;
|
||||
};
|
||||
|
||||
export function TopicFooter({ topicId }: TopicFooterProps) {
|
||||
const config = getTopicConfig(topicId);
|
||||
|
||||
return (
|
||||
<footer className="border-t border-[var(--border)] py-6 sm:py-8">
|
||||
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
||||
<div className="mb-4 flex flex-wrap items-center justify-center gap-4">
|
||||
<Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
|
||||
返回首页
|
||||
</Link>
|
||||
<Link
|
||||
href="/#topics"
|
||||
className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
|
||||
>
|
||||
模块列表
|
||||
</Link>
|
||||
<a
|
||||
href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
即时问答
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-center text-sm text-[var(--muted-foreground)]">
|
||||
{config ? `${config.icon} ${config.title} · 异度星球` : "异度星球 · 数字游民社群"}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
74
app/topic/components/TopicHeader.tsx
Normal file
74
app/topic/components/TopicHeader.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ThemeToggle } from "@/app/components/ThemeToggle";
|
||||
import { getTopicConfig } from "../config";
|
||||
import { isPaid } from "@/app/cloudphone/lib/payment";
|
||||
|
||||
type TopicHeaderProps = {
|
||||
topicId: string;
|
||||
};
|
||||
|
||||
export function TopicHeader({ topicId }: TopicHeaderProps) {
|
||||
const [paid, setPaid] = useState(false);
|
||||
const config = getTopicConfig(topicId);
|
||||
|
||||
useEffect(() => {
|
||||
setPaid(isPaid());
|
||||
const onPayUpdate = () => setPaid(isPaid());
|
||||
window.addEventListener("pay:updated", onPayUpdate);
|
||||
return () => window.removeEventListener("pay:updated", onPayUpdate);
|
||||
}, []);
|
||||
|
||||
const ctaHref = config?.externalUrl
|
||||
? config.externalUrl
|
||||
: paid
|
||||
? "/cloudphone/course/0/0"
|
||||
: config?.payUrl ?? "/";
|
||||
|
||||
return (
|
||||
<header
|
||||
className="fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/95 backdrop-blur-xl"
|
||||
style={{ animationFillMode: "both" }}
|
||||
>
|
||||
<div className="mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-14 sm:gap-4 sm:px-4 md:h-16 md:px-6">
|
||||
<Link
|
||||
href="/"
|
||||
className="min-w-0 truncate text-sm font-medium text-[var(--foreground)] sm:text-base md:text-lg"
|
||||
>
|
||||
🌍 异度星球
|
||||
</Link>
|
||||
<nav className="flex shrink-0 items-center gap-1.5 sm:gap-3">
|
||||
<ThemeToggle />
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]"
|
||||
>
|
||||
首页
|
||||
</Link>
|
||||
<a
|
||||
href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
即时问答
|
||||
</a>
|
||||
<Link
|
||||
href={ctaHref}
|
||||
target={config?.externalUrl ? "_blank" : undefined}
|
||||
rel={config?.externalUrl ? "noopener noreferrer" : undefined}
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
|
||||
>
|
||||
{config?.externalUrl ? "前往了解 →" : paid ? "进入课程 →" : "立即报名 →"}
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
114
app/topic/components/TopicHero.tsx
Normal file
114
app/topic/components/TopicHero.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { getTopicConfig, getTopicCurriculum } from "../config";
|
||||
import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
|
||||
import { ParticleBackground } from "@/app/cloudphone/components/ParticleBackground";
|
||||
|
||||
type TopicHeroProps = {
|
||||
topicId: string;
|
||||
};
|
||||
|
||||
export function TopicHero({ topicId }: TopicHeroProps) {
|
||||
const config = getTopicConfig(topicId);
|
||||
const curriculum = getTopicCurriculum(topicId);
|
||||
const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
|
||||
const [progress, setProgress] = useState({ completed: 0, percent: 0 });
|
||||
|
||||
const totalLessons = curriculum?.modules.reduce((s, m) => s + m.lessons.length, 0) ?? 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (curriculum?.hasContent && totalLessons > 0) {
|
||||
setLast(getLastWatched());
|
||||
setProgress(getProgress(totalLessons));
|
||||
const onProgress = () => {
|
||||
setLast(getLastWatched());
|
||||
setProgress(getProgress(totalLessons));
|
||||
};
|
||||
window.addEventListener("learning:progress", onProgress);
|
||||
return () => window.removeEventListener("learning:progress", onProgress);
|
||||
}
|
||||
}, [curriculum?.hasContent, totalLessons]);
|
||||
|
||||
if (!config) return null;
|
||||
|
||||
const ctaHref = config.externalUrl
|
||||
? config.externalUrl
|
||||
: last
|
||||
? `/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`
|
||||
: config.payUrl;
|
||||
|
||||
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" />
|
||||
<ParticleBackground />
|
||||
<div className="relative mx-auto max-w-4xl px-4 text-center sm:px-6">
|
||||
<h1
|
||||
className="animate__animated animate__fadeInDown mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl"
|
||||
style={{ animationDelay: "0.1s", animationFillMode: "both" }}
|
||||
>
|
||||
{config.icon} {config.title}
|
||||
</h1>
|
||||
<p
|
||||
className="animate__animated animate__fadeInDown mb-6 text-lg text-[var(--muted-foreground)] sm:mb-8 sm:text-xl md:text-2xl"
|
||||
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
|
||||
>
|
||||
{config.subtitle}
|
||||
</p>
|
||||
{config.desc && (
|
||||
<p
|
||||
className="animate__animated animate__fadeInDown mx-auto mb-10 max-w-2xl text-sm text-[var(--muted-foreground)] sm:mb-12 sm:text-base"
|
||||
style={{ animationDelay: "0.25s", animationFillMode: "both" }}
|
||||
>
|
||||
{config.desc}
|
||||
</p>
|
||||
)}
|
||||
<div
|
||||
className="animate__animated animate__fadeInDown mb-10 flex flex-wrap justify-center gap-6 sm:mb-12 sm:gap-8"
|
||||
style={{ animationDelay: "0.4s", animationFillMode: "both" }}
|
||||
>
|
||||
{config.stats.map((s) => (
|
||||
<div key={s.label} className="text-center transition-transform duration-300 hover:scale-105">
|
||||
<div className="text-2xl font-bold text-[var(--accent)] sm:text-3xl md:text-4xl">
|
||||
{s.value}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-[var(--muted-foreground)] sm:text-sm">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{curriculum?.hasContent && (
|
||||
<div
|
||||
className="animate__animated animate__fadeInDown flex flex-wrap justify-center gap-3 sm:gap-4"
|
||||
style={{ animationDelay: "0.6s", animationFillMode: "both" }}
|
||||
>
|
||||
<Link
|
||||
href={ctaHref}
|
||||
target={config.externalUrl ? "_blank" : undefined}
|
||||
rel={config.externalUrl ? "noopener noreferrer" : undefined}
|
||||
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"
|
||||
>
|
||||
{config.externalUrl ? "前往了解 →" : last ? "继续学习 →" : "立即报名 →"}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{curriculum?.hasContent && progress.completed > 0 && (
|
||||
<div className="mt-6 w-full max-w-xs" style={{ animationDelay: "0.7s", animationFillMode: "both" }}>
|
||||
<div className="mb-1 flex justify-between text-xs text-[var(--muted-foreground)]">
|
||||
<span>学习进度</span>
|
||||
<span>
|
||||
{progress.completed}/{totalLessons} 节
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-[var(--muted)]">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--accent)] transition-all"
|
||||
style={{ width: `${progress.percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
92
app/topic/config.ts
Normal file
92
app/topic/config.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 模块配置 - 模块 > 视频教程 > [模块名]
|
||||
* 参考 cloudphone/nomadlms 结构
|
||||
*/
|
||||
|
||||
import { CURRICULUM_CONFIG } from "@/app/cloudphone/config/course";
|
||||
|
||||
export type TopicConfig = {
|
||||
id: string;
|
||||
icon: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
desc: string;
|
||||
stats: { value: string; label: string }[];
|
||||
/** 使用的 curriculum 模块索引,空则用全部 */
|
||||
moduleIndices?: number[];
|
||||
/** 外部链接,有则显示「前往了解」而非课程列表 */
|
||||
externalUrl?: string;
|
||||
payUrl: string;
|
||||
};
|
||||
|
||||
export const TOPIC_CONFIGS: Record<string, TopicConfig> = {
|
||||
cloudphone: {
|
||||
id: "cloudphone",
|
||||
icon: "☁️",
|
||||
title: "云手机模块",
|
||||
subtitle: "低成本自建云手机,TikTok/YouTube 运营搭建指南",
|
||||
desc: "用开源硬件打造云手机,Redroid、AOSP、ffmpeg、SRS,从零搭建无人直播工作室",
|
||||
stats: [
|
||||
{ value: "13", label: "节实战课程" },
|
||||
{ value: "170+", label: "分钟视频" },
|
||||
{ value: "5", label: "大模块" },
|
||||
],
|
||||
payUrl: "/cloudphone/pay",
|
||||
},
|
||||
livestream: {
|
||||
id: "livestream",
|
||||
icon: "📺",
|
||||
title: "无人直播模块",
|
||||
subtitle: "TikTok/YouTube 无人直播,24 小时自动化",
|
||||
desc: "ffmpeg 拉流转推、SRS 直播服务器、油猴脚本自动化,实现 24 小时无人值守推流",
|
||||
stats: [
|
||||
{ value: "7", label: "节核心课程" },
|
||||
{ value: "100+", label: "分钟视频" },
|
||||
{ value: "2", label: "大模块" },
|
||||
],
|
||||
moduleIndices: [1, 2],
|
||||
payUrl: "/cloudphone/pay",
|
||||
},
|
||||
indie: {
|
||||
id: "indie",
|
||||
icon: "🛠️",
|
||||
title: "独立开发模块",
|
||||
subtitle: "从想法到产品,独立开发者全流程指南",
|
||||
desc: "即将上线,敬请期待。可先前往数字游民指南了解更多。",
|
||||
stats: [
|
||||
{ value: "—", label: "课程筹备中" },
|
||||
{ value: "—", label: "敬请期待" },
|
||||
],
|
||||
externalUrl: "https://digital.hackrobot.cn/zh",
|
||||
payUrl: "/",
|
||||
},
|
||||
aiagent: {
|
||||
id: "aiagent",
|
||||
icon: "🤖",
|
||||
title: "AI Agent 模块",
|
||||
subtitle: "AIGC 与智能体,Vibe Coding 跨界创造",
|
||||
desc: "即将上线,敬请期待。可先前往数字游民指南了解更多。",
|
||||
stats: [
|
||||
{ value: "—", label: "课程筹备中" },
|
||||
{ value: "—", label: "敬请期待" },
|
||||
],
|
||||
externalUrl: "https://digital.hackrobot.cn/zh",
|
||||
payUrl: "/",
|
||||
},
|
||||
};
|
||||
|
||||
export function getTopicConfig(topicId: string): TopicConfig | null {
|
||||
return TOPIC_CONFIGS[topicId] ?? null;
|
||||
}
|
||||
|
||||
export function getTopicCurriculum(topicId: string) {
|
||||
const config = getTopicConfig(topicId);
|
||||
if (!config) return null;
|
||||
if (config.externalUrl) return { modules: [], hasContent: false };
|
||||
const indices = config.moduleIndices ?? CURRICULUM_CONFIG.modules.map((_, i) => i);
|
||||
const modules = indices
|
||||
.map((i) => ({ module: CURRICULUM_CONFIG.modules[i], originalIndex: i }))
|
||||
.filter((x) => x.module)
|
||||
.map(({ module: m, originalIndex }) => ({ ...m, originalModuleIndex: originalIndex }));
|
||||
return { modules, hasContent: modules.length > 0 };
|
||||
}
|
||||
Reference in New Issue
Block a user