92 lines
3.8 KiB
TypeScript
92 lines
3.8 KiB
TypeScript
import { notFound } from "next/navigation";
|
||
import { AppMetaInfo, ChangelogTimeline, DownloadButtons, QRCodeSection, VersionHistory } from "@/components/app-detail";
|
||
import { AppGrid, UnlockSection } from "@/components/sections";
|
||
import { ScrollReveal } from "@/components/scroll-reveal";
|
||
import { DetailScrollShowcase } from "@/components/detail-scroll-showcase";
|
||
import { getAppBySlug, getApps } from "@/services/apps.service";
|
||
import { ScreenshotGallery } from "@/components/screenshot-gallery";
|
||
import { AccessGate } from "@/components/access-gate";
|
||
|
||
export default async function AppDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
||
const { slug } = await params;
|
||
const app = await getAppBySlug(slug);
|
||
if (!app) return notFound();
|
||
|
||
const appResources = await getApps();
|
||
const related = appResources.filter((i) => i.slug !== slug).slice(0, 3);
|
||
return (
|
||
<div className="space-y-5 py-6 md:space-y-6 md:py-8">
|
||
<ScrollReveal>
|
||
<section className="panel-strong">
|
||
<div className="grid gap-4 md:grid-cols-12 md:items-center">
|
||
<div className="md:col-span-8">
|
||
<div className="flex items-center gap-4">
|
||
<div className="grid h-14 w-14 place-items-center rounded-2xl border border-white/10 bg-slate-900/45 text-3xl">{app.icon}</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold md:text-3xl">{app.name}</h1>
|
||
<p className="text-sm text-slate-300 md:text-base">{app.subtitle}</p>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{app.tags.map((t) => <span key={t} className="pill">{t}</span>)}
|
||
</div>
|
||
</div>
|
||
<div className="md:col-span-4">
|
||
<div className="rounded-xl border border-cyan-300/25 bg-cyan-400/10 p-3 text-sm">
|
||
<p className="text-xs uppercase tracking-wide text-cyan-200/80">下载提示</p>
|
||
<p className="mt-2 text-slate-100">建议优先使用主线路，若下载慢可切换备用源或历史版本。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</ScrollReveal>
|
||
<ScrollReveal delay={0.03}>
|
||
<AppMetaInfo app={app} />
|
||
</ScrollReveal>
|
||
<ScrollReveal delay={0.06}>
|
||
<AccessGate slug={app.slug}>
|
||
<DownloadButtons app={app} />
|
||
</AccessGate>
|
||
</ScrollReveal>
|
||
<DetailScrollShowcase name={app.name} />
|
||
<ScrollReveal delay={0.08}>
|
||
<VersionHistory app={app} />
|
||
</ScrollReveal>
|
||
<ScrollReveal delay={0.1}>
|
||
<ChangelogTimeline app={app} />
|
||
</ScrollReveal>
|
||
<section className="grid gap-4 lg:grid-cols-12">
|
||
<div className="space-y-4 lg:col-span-8">
|
||
<ScrollReveal delay={0.12}>
|
||
<section className="panel">
|
||
<h3 className="text-base font-semibold">软件介绍</h3>
|
||
<p className="mt-2 text-sm text-slate-300">{app.description}</p>
|
||
<h4 className="mt-4 text-sm font-medium">使用说明</h4>
|
||
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
|
||
{app.usage.map((u) => <li key={u}>{u}</li>)}
|
||
</ul>
|
||
</section>
|
||
</ScrollReveal>
|
||
<ScrollReveal delay={0.14}>
|
||
<ScreenshotGallery slug={app.slug} shots={app.screenshots} />
|
||
</ScrollReveal>
|
||
</div>
|
||
<div className="space-y-4 lg:col-span-4">
|
||
<ScrollReveal delay={0.16}>
|
||
<QRCodeSection />
|
||
</ScrollReveal>
|
||
<ScrollReveal delay={0.18}>
|
||
<UnlockSection />
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
<ScrollReveal delay={0.2}>
|
||
<section className="space-y-3">
|
||
<h3 className="text-base font-semibold">相关推荐</h3>
|
||
<AppGrid apps={related} />
|
||
</section>
|
||
</ScrollReveal>
|
||
</div>
|
||
);
|
||
}
|