73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import type { Metadata } from 'next';
|
||
import Link from 'next/link';
|
||
import { notFound } from 'next/navigation';
|
||
import { publicApi } from '@/lib/services';
|
||
import { formatDate, resolveUploadUrl } from '@/lib/utils';
|
||
import { ContentView } from '@/components/front/ContentView';
|
||
|
||
export const revalidate = 60;
|
||
|
||
interface PageProps {
|
||
params: { id: string };
|
||
}
|
||
|
||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||
try {
|
||
const n = await publicApi.getNewsDetail(Number(params.id));
|
||
return { title: n.title, description: n.intro ?? undefined };
|
||
} catch {
|
||
return { title: '新闻详情' };
|
||
}
|
||
}
|
||
|
||
export default async function NewsDetailPage({ params }: PageProps) {
|
||
let news;
|
||
try {
|
||
news = await publicApi.getNewsDetail(Number(params.id));
|
||
} catch {
|
||
notFound();
|
||
}
|
||
|
||
return (
|
||
<article className="container-page py-12">
|
||
<nav className="mb-4 text-sm text-gray-500">
|
||
<Link href="/news" className="hover:text-brand-600">
|
||
新闻资讯
|
||
</Link>
|
||
<span className="mx-2">/</span>
|
||
<span>{news.title}</span>
|
||
</nav>
|
||
|
||
<header className="border-b border-gray-100 pb-4">
|
||
<h1 className="text-2xl font-bold text-gray-900 sm:text-3xl">
|
||
{news.title}
|
||
</h1>
|
||
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500">
|
||
{news.category?.name && (
|
||
<span className="rounded bg-brand-50 px-2 py-0.5 text-brand-700">
|
||
{news.category.name}
|
||
</span>
|
||
)}
|
||
<span>发布时间：{formatDate(news.createdAt, 'YYYY-MM-DD HH:mm')}</span>
|
||
{news.isTop === 1 && (
|
||
<span className="text-red-600">置顶</span>
|
||
)}
|
||
</div>
|
||
</header>
|
||
|
||
{news.cover && (
|
||
<div className="my-6 overflow-hidden rounded-lg">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={resolveUploadUrl(news.cover)}
|
||
alt={news.title}
|
||
className="max-h-96 w-full object-cover"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<ContentView content={news.content} className="mt-4 max-w-4xl" />
|
||
</article>
|
||
);
|
||
}
|