KivotosRailway/website
1
0
Fork 0
mirror of https://github.com/KivotosRailway/website.git synced 2026-11-03 11:06:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
MisakaAkio
2026-09-17 04:14:24 +08:00
parent d76d476e75
commit 7f6323f64c
18 changed files with 443 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/news/news-detail-client.tsx
+23 -41
View File
@@ -1,50 +1,32 @@
"use client";
import { useRouteLocale } from "@/components/layout/locale-context";
import Link from "next/link";
import { useEffect, useState } from "react";
import type { NewsItem } from "@/data/news";
import { getAiTranslationNotice, getInitialLocale, withLocale, getLocaleMessages, type Locale } from "@/lib/i18n";
import { getAiTranslationNotice, getLocaleMessages, withLocale, type Locale } from "@/lib/i18n";
import { markdownToHtml } from "@/lib/markdown";
import { PageBreadcrumb } from "@/components/layout/page-breadcrumb";
import { NewsShare } from "@/components/news/news-share";
export function NewsDetailClient({ catalog, slug }: { catalog: Record<Locale, NewsItem[]>; slug: string }) {
const [locale, setLocale] = useState<Locale>(useRouteLocale());
export function NewsDetailClient({ item, locale }: { item: NewsItem | null; locale: Locale }) {
const messages = getLocaleMessages(locale);
const item = catalog[locale].find((entry) => entry.slug === slug) ?? catalog["zh-Hans"].find((entry) => entry.slug === slug);
useEffect(() => {
const syncLocale = () => setLocale(getInitialLocale());
syncLocale();
window.addEventListener("kr-locale-change", syncLocale);
window.addEventListener("storage", syncLocale);
return () => {
window.removeEventListener("kr-locale-change", syncLocale);
window.removeEventListener("storage", syncLocale);
};
}, []);
if (!item) {
return <main className="news-detail-page"><div className="news-detail-inner"><p>未找到该文章。</p><Link href={withLocale("/news", locale)}>{messages.common.backToNews}</Link></div></main>;
}
if (!item) return <main className="news-detail-page"><div className="news-detail-inner"><p>未找到该文章。</p><Link href={withLocale("/news", locale)}>{messages.common.backToNews}</Link></div></main>;
return <main className="news-detail-page">
<div className="news-detail-inner">
<Link href={withLocale("/news", locale)} className="back-link">← {messages.common.backToNews}</Link>
<article className="news-detail-card">
<p className="news-detail-tag">{item.category}</p>
<h1>{item.title}</h1>
<time>{item.date}</time>
{locale !== "zh-Hans" && (
<div className="news-detail-ai-banner" aria-label="AI translated content">
{getAiTranslationNotice(locale)}
</div>
)}
<div className="news-detail-cover" style={{ backgroundImage: `url(${item.cover})` }} />
<div className="news-detail-body" dangerouslySetInnerHTML={{ __html: markdownToHtml(item.body) }} />
<NewsShare title={item.title} />
</article>
</div>
<div className="page-bottom-nav"><div className="page-bottom-nav-inner"><PageBreadcrumb ariaLabel={messages.common.pagePosition} items={[{ label: messages.common.home, href: "/" }, { label: messages.common.news, href: "/news" }, { label: item.title }]} /></div></div>
</main>;
}
return (
<main className="news-detail-page">
<div className="news-detail-inner">
<Link href={withLocale("/news", locale)} className="back-link">← {messages.common.backToNews}</Link>
<article className="news-detail-card">
<p className="news-detail-tag">{item.category}</p>
<h1>{item.title}</h1>
<time>{item.date}</time>
{locale !== "zh-Hans" && <div className="news-detail-ai-banner" aria-label="AI translated content">{getAiTranslationNotice(locale)}</div>}
<div className="news-detail-cover" style={{ backgroundImage: `url(${item.cover})` }} />
<div className="news-detail-body" dangerouslySetInnerHTML={{ __html: markdownToHtml(item.body) }} />
<NewsShare title={item.title} />
</article>
</div>
<div className="page-bottom-nav"><div className="page-bottom-nav-inner"><PageBreadcrumb ariaLabel={messages.common.pagePosition} items={[{ label: messages.common.home, href: "/" }, { label: messages.common.news, href: "/news" }, { label: item.title }]} /></div></div>
</main>
);
}