68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
"use client";
|
||
/**
|
||
* PwaInstallDialog PWA 安装弹窗
|
||
*
|
||
* 原始 Dart: lib/ui/chat/widgets/pwa_install_dialog.dart（145 行）
|
||
*
|
||
* 用途：引导用户将 Web App 安装到桌面
|
||
* 触发：由 PwaInstallOverlay 在延迟 3.5s 后自动显示
|
||
*/
|
||
import styles from "./pwa-install-dialog.module.css";
|
||
|
||
export interface PwaInstallDialogProps {
|
||
onClose: () => void;
|
||
onInstall?: () => void;
|
||
}
|
||
|
||
export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps) {
|
||
const handleInstall = () => {
|
||
if (onInstall) {
|
||
onInstall();
|
||
} else {
|
||
// 提示用户使用浏览器"添加到主屏幕"功能
|
||
window.alert(
|
||
"To install: tap the browser menu, then 'Add to Home Screen'.",
|
||
);
|
||
}
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={styles.overlay}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="pwa-dialog-title"
|
||
>
|
||
<div className={styles.dialog}>
|
||
<div className={styles.icon} aria-hidden="true">
|
||
📱
|
||
</div>
|
||
<h2 id="pwa-dialog-title" className={styles.title}>
|
||
Install cozsweet
|
||
</h2>
|
||
<p className={styles.content}>
|
||
Add to your home screen for the best experience. Faster loading,
|
||
full-screen mode, and offline support.
|
||
</p>
|
||
<div className={styles.actions}>
|
||
<button
|
||
type="button"
|
||
className={`${styles.btn} ${styles.btnSecondary}`}
|
||
onClick={onClose}
|
||
>
|
||
Not now
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`${styles.btn} ${styles.btnPrimary}`}
|
||
onClick={handleInstall}
|
||
>
|
||
Install
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|