新闻页面增加 AI 提示

This commit is contained in:
2026-09-01 23:57:13 +08:00
parent c9a8ffba33
commit 254cfe3f61
3 changed files with 17 additions and 3 deletions
+4 -2
View File
@@ -15,9 +15,10 @@ a { color: inherit; text-decoration: none; }
.site-navigation a:hover { color: var(--blue); }.site-navigation a:hover::after { transform: scaleX(1); }
.site-header-actions { display: flex; align-items: center; gap: 24px; min-width: 180px; justify-content: flex-end; }
.site-locale { display: inline-flex; align-items: center; gap: 0; padding: 3px 4px; border-radius: 16px; background: #f1f3f5; border: 1px solid rgba(17, 24, 39, 0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
.site-locale button { appearance: none; border: 0; background: transparent; border-radius: 12px; padding: 10px 14px; min-width: 48px; color: #5d6773; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; }
.site-locale button { appearance: none; border: 0; background: transparent; border-radius: 12px; padding: 8px 10px; min-width: 52px; color: #5d6773; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.site-locale button:hover { color: var(--ink); }
.site-locale button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.locale-button-label { display: inline-flex; align-items: center; justify-content: center; }
.site-menu-button { display: none; width: 38px; border: 0; background: transparent; cursor: pointer; }
.site-menu-button span { display: block; height: 2px; margin: 5px 0; background: var(--ink); }
.home-page { padding: 0 clamp(24px, 4vw, 76px) 48px; }
@@ -66,8 +67,9 @@ a { color: inherit; text-decoration: none; }
.back-link { display: inline-block; margin-bottom: 20px; color: #0f73ff; font-weight: 700; }
.news-detail-card { background: #fff; border-radius: 26px; padding: 28px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); }
.news-detail-tag { display: inline-block; margin: 0 0 12px; padding: 6px 10px; border-radius: 999px; background: rgba(15, 115, 255, 0.08); color: #0f73ff; font-size: 12px; }
.news-detail-card h1 { margin: 0 0 10px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.06em; }
.news-detail-card h1 { margin: 0 0 10px; font-size: clamp(38px, 4vw, 62px); line-height: 1.08; letter-spacing: -0.06em; }
.news-detail-card time { display: inline-block; margin-bottom: 20px; color: #697684; }
.news-detail-ai-banner { display: flex; align-items: center; width: 100%; margin: 0 0 20px; padding: 12px 18px; border-radius: 999px; background: rgba(255, 179, 15, 0.08); color: #ff8f0f; font-size: 15px; line-height: 1.5; }
.news-detail-cover { height: 360px; border-radius: 18px; background-size: cover; background-position: center; margin-bottom: 24px; }
.news-detail-body { color: #1d2732; line-height: 1.9; font-size: 17px; }
.news-detail-body h2, .news-detail-body h3 { margin-top: 28px; }
+2 -1
View File
@@ -87,8 +87,9 @@ export function SiteHeader() {
applyLocale(item);
}}
aria-label={localeLabels[item]}
title={localeLabels[item]}
>
{localeShortLabels[item]}
<span className="locale-button-label">{localeShortLabels[item]}</span>
</button>
))}
</div>
@@ -50,6 +50,12 @@ export function NewsDetailClient({ catalog, slug }: { catalog: Record<Locale, Ne
};
}, []);
const aiNotice = locale === "zh-TW"
? "此文章由 AI 從簡體中文翻譯而成,如有任何歧義,以簡體中文版本為準。"
: locale === "en"
? "This text was translated from Simplified Chinese using AI; in the event of any discrepancies, the Simplified Chinese version prevails."
: "このテキストは簡体字中国語から AI により翻訳されています。相違がある場合は、簡体字中国語版を優先します。";
if (!item) return <main className="news-detail-page"><div className="news-detail-inner"><p>未找到该文章。</p><Link href="/news">{messages.common.backToNews}</Link></div></main>;
return <main className="news-detail-page">
@@ -59,6 +65,11 @@ export function NewsDetailClient({ catalog, slug }: { catalog: Record<Locale, Ne
<p className="news-detail-tag">{item.category}</p>
<h1>{item.title}</h1>
<time>{item.date}</time>
{locale !== "zh-CN" && (
<div className="news-detail-ai-banner" aria-label="AI translated content">
{aiNotice}
</div>
)}
<div className="news-detail-cover" style={{ backgroundImage: `url(${item.cover})` }} />
<div className="news-detail-body" dangerouslySetInnerHTML={{ __html: renderMarkdown(item.body) }} />
<NewsShare title={item.title} />