75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
"use client";
|
|
/**
|
|
* PwaInstallDialog PWA 安装弹窗
|
|
*
|
|
*
|
|
*
|
|
* 用途：引导用户将 Web App 安装到桌面
|
|
* 触发：由 PwaInstallOverlay 在满足安装条件后延迟显示
|
|
*/
|
|
import Image from "next/image";
|
|
|
|
export interface PwaInstallDialogProps {
|
|
onClose: () => void;
|
|
onInstall?: () => void | Promise<void>;
|
|
}
|
|
|
|
export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps) {
|
|
const handleInstall = async () => {
|
|
if (onInstall) {
|
|
await onInstall();
|
|
} else {
|
|
// 提示用户使用浏览器"添加到主屏幕"功能
|
|
window.alert(
|
|
"To install: tap the browser menu, then 'Add to Home Screen'.",
|
|
);
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-60 flex items-center justify-center bg-[rgba(0,0,0,0.5)] pb-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-top,0))]"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="pwa-dialog-title"
|
|
>
|
|
<div className="flex w-full max-w-(--pwa-install-dialog-max-width,360px) flex-col items-center rounded-(--responsive-card-radius,40px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,16px) pb-(--responsive-card-padding,16px) pt-(--responsive-card-padding-lg,20px) text-center shadow-[0_10px_20px_rgba(0,0,0,0.1)]">
|
|
<Image
|
|
className="mb-(--spacing-lg,16px) size-(--icon-size-86,86px) object-contain"
|
|
src="/images/icons/icon-add-to-home.png"
|
|
alt=""
|
|
width={86}
|
|
height={86}
|
|
priority
|
|
/>
|
|
<h2
|
|
id="pwa-dialog-title"
|
|
className="m-0 mb-(--spacing-sm,8px) text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground"
|
|
>
|
|
Add to Home Screen
|
|
</h2>
|
|
<p className="mx-(--responsive-card-padding-lg,36px) mb-(--page-section-gap-lg,24px) mt-0 text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]">
|
|
Add CozSweet to Home Screen{"\n"}for the best experience
|
|
</p>
|
|
<div className="flex w-full gap-(--spacing-md,12px)">
|
|
<button
|
|
type="button"
|
|
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-(--color-text-secondary,#9e9e9e) text-(length:--responsive-body,var(--font-size-lg,16px)) font-semibold text-(--color-pwa-button-text,#ffffff)"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-(length:--responsive-body,var(--font-size-lg,16px)) font-semibold text-(--color-pwa-button-text,#ffffff)"
|
|
onClick={handleInstall}
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|