41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
'use client';
|
||
import { useEffect, useState } from 'react';
|
||
|
||
export default function Shell({ title, subtitle, children }) {
|
||
const [showInstall, setShowInstall] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// 检测是否已在PWA模式，不是则提示安装
|
||
const isStandalone =
|
||
window.matchMedia('(display-mode: standalone)').matches ||
|
||
window.navigator.standalone;
|
||
if (!isStandalone) {
|
||
const timer = setTimeout(() => setShowInstall(true), 3000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<main className="flex min-h-screen min-h-dvh flex-col px-4 py-10 pb-safe">
|
||
<div className="mx-auto w-full max-w-lg">
|
||
<header className="mb-8 text-center">
|
||
<p className="mb-3 inline-block rounded-full border border-white/10 px-3 py-1 text-xs tracking-[0.2em] text-white/30">
|
||
LINGJING
|
||
</p>
|
||
<h1 className="text-2xl font-semibold tracking-tight text-white/90">{title}</h1>
|
||
{subtitle && (
|
||
<p className="mt-2 text-sm text-white/40">{subtitle}</p>
|
||
)}
|
||
</header>
|
||
{children}
|
||
</div>
|
||
|
||
{showInstall && (
|
||
<div className="install-hint" onClick={() => setShowInstall(false)}>
|
||
📲 添加到主屏幕，获得沉浸式体验 ✕
|
||
</div>
|
||
)}
|
||
</main>
|
||
);
|
||
}
|