From 71eef28e163361340593c433527c5bb2ee7d5ef5 Mon Sep 17 00:00:00 2001
From: hectorqin <hectorqin@163.com>
Date: Mon, 28 Sep 2026 16:40:42 +0800
Subject: [PATCH] fix(pwa): align update prompt with app button styles

---
 web/src/core/pwa.ts     |  1 +
 web/src/styles/pwa.css  | 20 +++++++++++++++-----
 web/tools/pwa/smoke.mjs |  9 +++++++++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/web/src/core/pwa.ts b/web/src/core/pwa.ts
index edae2ca..3d3addd 100644
--- a/web/src/core/pwa.ts
+++ b/web/src/core/pwa.ts
@@ -32,6 +32,7 @@ export function watchPwaUpdates(
   message.setAttribute('role', 'status');
   message.textContent = '新版本已准备好';
   const button = document.createElement('button');
+  button.className = 'button primary';
   button.type = 'button';
   button.textContent = '立即更新';
   banner.append(message, button);
diff --git a/web/src/styles/pwa.css b/web/src/styles/pwa.css
index b2b27f6..863415a 100644
--- a/web/src/styles/pwa.css
+++ b/web/src/styles/pwa.css
@@ -11,13 +11,23 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: .75rem;
-  padding: .75rem 1rem;
+  gap: 1rem;
+  padding: .625rem .625rem .625rem 1rem;
   border: 1px solid var(--reader-line);
-  border-radius: .75rem;
+  border-radius: 1rem;
   background: var(--reader-surface);
   color: var(--reader-ink);
-  box-shadow: 0 4px 20px #0002;
+  box-shadow: 0 4px 16px #0000000d;
+  font-size: .875rem;
+  line-height: 1.5;
+}
+.pwa-update .button {
+  min-height: 44px;
+  flex: none;
+  padding: .625rem 1rem;
+  border-radius: .75rem;
+  font: inherit;
+  font-weight: 600;
+  white-space: nowrap;
 }
-.pwa-update button { min-height: 44px; padding: .5rem 1rem; }
 .pwa-update button:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
diff --git a/web/tools/pwa/smoke.mjs b/web/tools/pwa/smoke.mjs
index 46a2300..89a9589 100644
--- a/web/tools/pwa/smoke.mjs
+++ b/web/tools/pwa/smoke.mjs
@@ -85,6 +85,15 @@ try {
     await page.setViewportSize({ width: 320, height: 640 });
     const updateButton = page.getByRole('button', { name: '立即更新', exact: true });
     await updateButton.waitFor();
+    if (process.env.PWA_SCREENSHOT_DIR) {
+      for (const theme of ['light', 'dark']) {
+        await page.evaluate((value) => { document.documentElement.dataset.theme = value; }, theme);
+        await page.locator('.pwa-update').screenshot({
+          path: `${process.env.PWA_SCREENSHOT_DIR}/reader-pwa-${theme}.png`,
+          style: '.notyf { visibility: hidden !important; }',
+        });
+      }
+    }
     const bounds = await page.locator('.pwa-update').boundingBox();
     assert(bounds && bounds.x >= 0 && bounds.x + bounds.width <= 320);
     await page.evaluate(() => {