优化 pwa 文案

This commit is contained in:
2026-04-17 14:06:53 +08:00
parent a255b23be3
commit 2cf1fae21d
4 changed files with 50 additions and 35 deletions
+45 -30
View File
@@ -73,6 +73,13 @@ export function PwaControls() {
const [notificationState, setNotificationState] =
useState<NotificationState>("checking");
const [notice, setNotice] = useState<string | null>(null);
const isInstalled = hasInstalledHint || isStandalone;
const notificationLabel =
notificationState === "enabled"
? "消息提醒已开启"
: notificationState === "blocked"
? "通知权限已被拒绝"
: "消息提醒未开启";
useEffect(() => {
let active = true;
@@ -309,48 +316,56 @@ export function PwaControls() {
return (
<section className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_22px_55px_rgba(53,84,141,0.12)]">
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
快捷设置
{isInstalled ? "桌面版" : "快捷设置"}
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
安装到桌面,随时收到长辈的消息
{isInstalled
? isStandalone
? "已从桌面版打开"
: "这台设备已添加到主屏幕"
: "安装到桌面,随时收到长辈的消息"}
</h2>
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">
安装后打开更快,开启提醒后,长辈每次留言都能立刻收到通知。
{isInstalled
? notificationState === "enabled"
? "新留言会直接推送到这台设备。"
: "如需新留言提醒,可在下方开启通知。"
: "安装后打开更快,开启提醒后,长辈每次留言都能立刻收到通知。"}
</p>
<div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--muted)]">
{isInstalled ? (
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
{isStandalone ? "桌面版运行中" : "已添加到主屏幕"}
</span>
) : (
<>
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
{isStandalone ? "当前正以桌面应用方式运行" : "当前正以浏览器方式运行"}
</span>
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
{hasInstalledHint ? "这台设备已有主屏幕安装记录" : "暂未检测到主屏幕安装记录"}
</span>
</>
)}
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
{isStandalone ? "当前正以桌面应用方式运行" : "当前正以浏览器方式运行"}
</span>
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
{hasInstalledHint ? "这台设备已有主屏幕安装记录" : "暂未检测到主屏幕安装记录"}
</span>
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
{notificationState === "enabled"
? "消息提醒已开启"
: notificationState === "blocked"
? "通知权限已被拒绝"
: "消息提醒未开启"}
{notificationLabel}
</span>
</div>
<div className="mt-5 flex flex-wrap gap-3">
<button
type="button"
onClick={() => {
void installApp();
}}
disabled={installing || isStandalone}
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--ink)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--ink-soft)] disabled:cursor-not-allowed disabled:opacity-60"
>
{isStandalone
? "已从桌面版打开"
: installing
? "正在呼起安装"
: hasInstalledHint
? "查看安装说明"
: "安装到桌面"}
</button>
{!isInstalled ? (
<button
type="button"
onClick={() => {
void installApp();
}}
disabled={installing || isStandalone}
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--ink)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--ink-soft)] disabled:cursor-not-allowed disabled:opacity-60"
>
{installing ? "正在呼起安装" : "安装到桌面"}
</button>
) : null}
{notificationState === "enabled" ? (
<button