fix(ui): 自动同步开关不可点、返回键热区过小、路由卡死

开关
- 我的 .toggle 类名和 Framework7 自带的 .toggle 组件撞了，元素被压成 0×0；
  另外 F7 全局给 input[type=checkbox] 加了 display:none，胜过我的 opacity:0，
  所以那个开关根本点不到。改名 set-switch 并显式恢复 input 的 display。
- 设置项改为乐观更新：先动控件，再发请求，失败回滚并报错。
  经隧道一个来回约半秒，开关在那半秒里纹丝不动会被当成坏了，
  用户再按一次，两个写入就打架了。

返回键
- 去掉导航栏毛玻璃背景时也把尺寸一起去掉了，链接缩成 44×16，
  手机上很难点中，按下也没有反馈。恢复 44px 高的热区并加按下态。

路由卡死
- F7 启动时给根节点加 framework7-initializing 来抑制动画，靠下一帧移除。
  这一帧在后台标签页或被节流的 webview 里不会到来，于是该类一直挂着，
  它的 transition-duration: 0ms !important 让过渡永远不发 transitionend，
  路由等的就是这个事件——allowPageChange 置 false 后再也没恢复，
  之后每一次导航（包括每一次返回）都被静默丢弃，只能刷新页面。
- 启动后主动清掉该类，并加一个看门狗：过渡类存活超过 1.6 秒即视为卡住，
  清理残留状态并放行路由。

进度条改用 portal 挂到 document.body。它原本是 F7 根节点的第一个子元素，
就这一个多余的节点会干扰 F7 的初始化。

部署脚本改为原子替换 static：原先 rm -rf 后再解包，中间有一段时间
文件是缺的，正好撞上就是 502。

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

client/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { App as F7App, View, Views, Toolbar, Link, f7ready } from 'framework7-react';
 import Framework7 from 'framework7/lite-bundle';
 import Framework7React from 'framework7-react';
@@ -95,12 +96,136 @@ function useNavProgress() {
   return busy;
 }
 
+/**
+ * The progress bar lives on document.body, not inside <F7App>.
+ *
+ * It was originally a child of the Framework7 root, and that single stray
+ * element broke F7's initialisation: `framework7-initializing` was never
+ * cleared, which forces `transition-duration: 0ms` on everything, so
+ * `transitionend` never fired, so the router never finished a transition —
+ * leaving every page with `pointer-events: none`. The visible symptom was
+ * back buttons that did nothing, app-wide.
+ */
+function NavProgress({ on }: { on: boolean }) {
+  return createPortal(
+    <div
+      className={`nav-progress ${on ? 'on' : ''}`}
+      role="status"
+      aria-live="polite"
+      aria-label={on ? '正在打开' : ''}
+    >
+      <span className="nav-progress-bar" />
+    </div>,
+    document.body
+  );
+}
+
+/**
+ * Clear Framework7's boot flag once the app is up.
+ *
+ * F7 puts `framework7-initializing` on its root to suppress animation during
+ * boot, and removes it on the next animation frame. When that frame does not
+ * arrive — a backgrounded tab, a throttled webview — the class stays, and its
+ * `transition-duration: 0ms !important` means transitions never emit
+ * `transitionend`. The router waits for that event to finish a page change, so
+ * it sets `allowPageChange = false` and never sets it back: every subsequent
+ * navigation, including every back button, silently does nothing.
+ *
+ * Clearing it ourselves is safe — by the time this runs the app is mounted,
+ * which is all the flag was suppressing.
+ */
+function useClearBootFlag() {
+  useEffect(() => {
+    const clear = () => document
+      .querySelector('.framework7-root')
+      ?.classList.remove('framework7-initializing');
+
+    f7ready(clear);
+    // Belt and braces: f7ready itself can be scheduled off a frame.
+    const timer = window.setTimeout(clear, 600);
+    return () => window.clearTimeout(timer);
+  }, []);
+}
+
+/**
+ * Keep the router from staying blocked.
+ *
+ * Framework7 sets `router.allowPageChange = false` when a page transition
+ * starts and restores it when the transition's `animationend` arrives. If that
+ * event never comes — a throttled or backgrounded webview, where the browser
+ * does not run CSS animations at all — the flag stays false and every later
+ * navigation is silently dropped. The visible symptom is a back button that
+ * does nothing, and the only recovery is a full reload.
+ *
+ * This releases the flag once a page has settled, which is strictly later than
+ * the transition F7 is waiting on.
+ */
+function useRouterWatchdog() {
+  useEffect(() => {
+    let timer: number | undefined;
+
+    /* Walk the DOM rather than an app-level view registry: the shape of that
+       registry differs between Framework7 versions, the view elements do not. */
+    const stuckSince = new WeakMap<Element, number>();
+
+    // A page transition is 400ms. Anything still "transitioning" well past
+    // that is not transitioning — it is waiting for an event that will never
+    // arrive, and the stale classes are themselves what block recovery.
+    const STUCK_AFTER_MS = 1600;
+
+    const release = () => {
+      document.querySelectorAll('.view').forEach((el) => {
+        const view = (el as any).f7View;
+        if (!view?.router) return;
+
+        const midTransition = el.classList.contains('router-transition');
+        if (midTransition) {
+          const since = stuckSince.get(el);
+          if (!since) { stuckSince.set(el, Date.now()); return; }
+          if (Date.now() - since < STUCK_AFTER_MS) return;
+
+          // Clear the leftovers F7 would have cleared itself.
+          el.classList.remove(
+            'router-transition', 'router-transition-forward',
+            'router-transition-backward', 'router-transition-css-forward',
+            'router-transition-css-backward'
+          );
+          el.querySelectorAll('.page').forEach((page) =>
+            page.classList.remove('page-next', 'page-previous'));
+        }
+        stuckSince.delete(el);
+
+        if (view.router.allowPageChange === false) {
+          view.router.allowPageChange = true;
+        }
+      });
+    };
+
+    f7ready((app) => {
+      app.on('pageAfterIn', () => {
+        window.clearTimeout(timer);
+        timer = window.setTimeout(release, 600);
+      });
+    });
+
+    // pageAfterIn is itself part of the transition pipeline, so it can be
+    // missed too. A slow poll costs nothing and guarantees recovery.
+    const poll = window.setInterval(release, 1500);
+
+    return () => { window.clearTimeout(timer); window.clearInterval(poll); };
+  }, []);
+}
+
 function App() {
   useTheme();
+  useClearBootFlag();
+  useRouterWatchdog();
   const navigating = useNavProgress();
 
   return (
-    <F7App
+    <>
+      <NavProgress on={navigating} />
+      <F7App
       name="Garmin Health Lab"
       // iOS only: the Material variants would read as a different app on the
       // same screen, and the reference this is modelled on is an iOS app.
@@ -109,15 +234,6 @@ function App() {
       routes={routes}
       touch={{ tapHold: true }}
     >
-      <div
-        className={`nav-progress ${navigating ? 'on' : ''}`}
-        role="status"
-        aria-live="polite"
-        aria-label={navigating ? '正在打开' : ''}
-      >
-        <span className="nav-progress-bar" />
-      </div>
-
       <Views tabs className="safe-areas">
         <Toolbar tabbar icons bottom>
           {TABS.map((tab) => (
@@ -151,7 +267,8 @@ function App() {
           />
         ))}
       </Views>
-    </F7App>
+      </F7App>
+    </>
   );
 }