fix: 浏览器体验验收发现的两个问题

- 移动端 (<640px) header 横向溢出 84px:语言切换器在 sm 以下隐藏,三站溢出归零
- 工具详情页 meta description 过短(36ch):改为 tagline+description 组合截断 155ch
This commit is contained in:
AI Directory Platform
2026-09-08 20:05:39 +00:00
parent 5b1c8ccdf2
commit ed64eb9e76
2 changed files with 14 additions and 2 deletions
+3
View File
@@ -105,7 +105,10 @@ export function ThemeHeader({
</div> </div>
</form> </form>
)} )}
{/* 语言切换器:小屏隐藏(避免 375-420px 视口撑破 header) */}
<div className="hidden sm:block">
<LanguageSwitcher /> <LanguageSwitcher />
</div>
<ModeToggle /> <ModeToggle />
<UserMenu /> <UserMenu />
@@ -130,11 +130,20 @@ export async function generateMetadata({ params }: ToolDetailPageProps) {
const description = const description =
locale === "zh" && tool.descriptionZh ? tool.descriptionZh : tool.descriptionEn; locale === "zh" && tool.descriptionZh ? tool.descriptionZh : tool.descriptionEn;
// meta description:tagline + 描述组合并截断到 ~155ch(SEO 最佳实践)
const metaDescBase =
[tool.taglineEn, description, tool.descriptionEn]
.filter(Boolean)
.join(". ")
.replace(/\.\s*\./g, ".") || `${t("subtitle")} - ${name}`;
const metaDescription =
metaDescBase.length > 155 ? `${metaDescBase.slice(0, 152)}...` : metaDescBase;
return generatePageMetadata({ return generatePageMetadata({
locale, locale,
path: `/tools/${slug}`, path: `/tools/${slug}`,
title: `${name} - ${t("title")}`, title: `${name} - ${t("title")}`,
description: tool.taglineEn || description || `${t("subtitle")} - ${name}`, description: metaDescription,
ogImage: tool.coverImageUrl || tool.logoUrl || undefined, ogImage: tool.coverImageUrl || tool.logoUrl || undefined,
}); });
} }