ai-chatbot/app/layout.tsx
Your Name 7cab15b936
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled
强化favicon缓存穿透避免浏览器顽固缓存
2026-02-14 21:48:25 +08:00

180 lines
5.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Toaster } from "sonner";
import { ThemeProvider } from "@/components/theme-provider";
import { FaviconUpdater } from "@/components/favicon-updater";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { getSiteSettings } from "@/lib/db/queries";
export async function generateMetadata(): Promise<Metadata> {
const settings = await getSiteSettings();
const updatedAt =
"updatedAt" in settings && settings.updatedAt
? new Date(settings.updatedAt).getTime()
: Date.now();
const faviconUrl = `/api/favicon?v=${updatedAt}-${Date.now()}`;
const metadataBase = process.env.AUTH_URL
? new URL(process.env.AUTH_URL)
: undefined;
return {
metadataBase,
title: {
template: `%s | ${settings.siteName}`,
default: settings.siteName,
},
description: settings.siteName,
icons: {
icon: [
{ url: faviconUrl, sizes: "any" },
{ url: faviconUrl, type: "image/x-icon" },
],
apple: faviconUrl,
shortcut: faviconUrl,
},
};
}
export const viewport = {
maximumScale: 1, // Disable auto-zoom on mobile Safari
};
const geist = Geist({
subsets: ["latin"],
display: "swap",
variable: "--font-geist",
});
const geistMono = Geist_Mono({
subsets: ["latin"],
display: "swap",
variable: "--font-geist-mono",
});
const LIGHT_THEME_COLOR = "hsl(0 0% 100%)";
const DARK_THEME_COLOR = "hsl(240deg 10% 3.92%)";
const THEME_COLOR_SCRIPT = `\
(function() {
var html = document.documentElement;
var meta = document.querySelector('meta[name="theme-color"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
document.head.appendChild(meta);
}
function updateThemeColor() {
var isDark = html.classList.contains('dark');
meta.setAttribute('content', isDark ? '${DARK_THEME_COLOR}' : '${LIGHT_THEME_COLOR}');
}
var observer = new MutationObserver(updateThemeColor);
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
updateThemeColor();
})();`;
const CHUNK_ERROR_RECOVERY_SCRIPT = `\
(function() {
// 安全地访问sessionStorage(某些浏览器设置可能禁止访问)
function safeGetSessionStorage(key) {
try {
return sessionStorage.getItem(key);
} catch (e) {
return null;
}
}
function safeSetSessionStorage(key, value) {
try {
sessionStorage.setItem(key, value);
return true;
} catch (e) {
return false;
}
}
function safeRemoveSessionStorage(key) {
try {
sessionStorage.removeItem(key);
return true;
} catch (e) {
return false;
}
}
var hasReloaded = safeGetSessionStorage('chunk-reload-attempted');
window.addEventListener('error', function(event) {
var isChunkError = event.message && (
event.message.includes('Failed to load chunk') ||
event.message.includes('Loading chunk') ||
event.message.includes('/_next/static/chunks/')
);
if (isChunkError && !hasReloaded) {
console.warn('[ChunkError] 检测到chunk加载失败,自动刷新页面...');
safeSetSessionStorage('chunk-reload-attempted', 'true');
setTimeout(function() {
window.location.reload();
}, 1000);
}
}, true);
// 页面加载成功后清除标记
window.addEventListener('load', function() {
setTimeout(function() {
safeRemoveSessionStorage('chunk-reload-attempted');
}, 2000);
});
})();`;
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// 获取网站设置中的默认主题
const settings = await getSiteSettings();
const defaultTheme = settings.defaultTheme || "system";
return (
<html
className={`${geist.variable} ${geistMono.variable}`}
// `next-themes` injects an extra classname to the body element to avoid
// visual flicker before hydration. Hence the `suppressHydrationWarning`
// prop is necessary to avoid the React hydration mismatch warning.
// https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
lang="zh-CN"
suppressHydrationWarning
>
<head>
<script
// biome-ignore lint/security/noDangerouslySetInnerHtml: "Required"
dangerouslySetInnerHTML={{
__html: THEME_COLOR_SCRIPT,
}}
/>
<script
// biome-ignore lint/security/noDangerouslySetInnerHtml: "Required"
dangerouslySetInnerHTML={{
__html: CHUNK_ERROR_RECOVERY_SCRIPT,
}}
/>
</head>
<body className="antialiased">
<FaviconUpdater />
<ThemeProvider
attribute="class"
defaultTheme={defaultTheme}
disableTransitionOnChange
enableSystem
>
<Toaster position="top-center" />
<SessionProvider>{children}</SessionProvider>
</ThemeProvider>
</body>
</html>
);
}