Force portrait layout on phones instead of landscape prompt.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/pwa/portraitLock.ts

@@ -1,4 +1,8 @@
-/** 手机端尽量锁定竖屏；浏览器页用遮罩提示，已安装 PWA 由 manifest 约束。 */
+/**
+ * 手机端竖屏锁定：
+ * 1) 能锁系统方向时直接 lock（安卓 PWA / 部分全屏环境）
+ * 2) 锁不住时，横屏仍强制按竖屏布局渲染（不进入横屏 UI）
+ */
 
 type OrientationLockType =
   | "any"
@@ -12,64 +16,66 @@ type OrientationLockType =
 
 function isPhoneLike(): boolean {
   if (typeof window === "undefined") return false;
-  const coarse = window.matchMedia("(pointer: coarse)").matches;
-  const narrow = Math.min(window.screen.width, window.screen.height) <= 520;
   const ua = navigator.userAgent || "";
-  const phoneUa = /Android.+Mobile|iPhone|iPod|Windows Phone/i.test(ua);
-  return phoneUa || (coarse && narrow);
+  if (/Android.+Mobile|iPhone|iPod|Windows Phone/i.test(ua)) return true;
+  const coarse = window.matchMedia("(pointer: coarse)").matches;
+  const shortSide = Math.min(window.screen.width, window.screen.height);
+  return coarse && shortSide <= 520;
 }
 
-async function tryLockPortrait(): Promise<void> {
+function isLandscape(): boolean {
+  return window.matchMedia("(orientation: landscape)").matches;
+}
+
+async function tryLockPortrait(): Promise<boolean> {
+  if (!isPhoneLike()) return false;
   const orient = screen.orientation as ScreenOrientation & {
     lock?: (orientation: OrientationLockType) => Promise<void>;
   };
-  if (!orient?.lock) return;
+  if (!orient?.lock) return false;
   try {
     await orient.lock("portrait");
+    return true;
   } catch {
     try {
       await orient.lock("portrait-primary");
+      return true;
     } catch {
-      /* 多数浏览器仅全屏/PWA 允许 lock，失败则靠遮罩 */
+      return false;
     }
   }
 }
 
-function ensureGate(): HTMLElement {
-  let el = document.getElementById("portrait-lock-gate");
-  if (el) return el;
-  el = document.createElement("div");
-  el.id = "portrait-lock-gate";
-  el.className = "portrait-lock-gate";
-  el.setAttribute("aria-live", "polite");
-  el.innerHTML =
-    '<div class="portrait-lock-card">' +
-    '<p class="portrait-lock-title">请竖屏使用</p>' +
-    '<p class="portrait-lock-sub">手机端仅支持竖屏浏览</p>' +
-    "</div>";
-  document.body.appendChild(el);
-  return el;
-}
-
-function syncGate(): void {
+function syncForcedPortrait(): void {
+  const html = document.documentElement;
   if (!isPhoneLike()) {
-    const el = document.getElementById("portrait-lock-gate");
-    if (el) el.classList.remove("show");
+    html.classList.remove("phone-portrait-lock", "phone-landscape");
     return;
   }
-  const landscape = window.matchMedia("(orientation: landscape)").matches;
-  ensureGate().classList.toggle("show", landscape);
-  if (!landscape) void tryLockPortrait();
+  html.classList.add("phone-portrait-lock");
+  html.classList.toggle("phone-landscape", isLandscape());
 }
 
-/** 注册竖屏锁定与横屏提示遮罩。 */
+/** 手机端：系统竖屏锁 + 横屏时强制竖屏排版。 */
 export function initPortraitLock(): void {
   if (typeof window === "undefined") return;
-  syncGate();
-  window.addEventListener("orientationchange", syncGate);
-  window.addEventListener("resize", syncGate);
+
+  const sync = () => {
+    syncForcedPortrait();
+    void tryLockPortrait();
+  };
+
+  sync();
+  window.addEventListener("orientationchange", sync);
+  window.addEventListener("resize", sync);
   document.addEventListener("visibilitychange", () => {
-    if (document.visibilityState === "visible") syncGate();
+    if (document.visibilityState === "visible") sync();
   });
-  void tryLockPortrait();
+
+  // 部分浏览器要求用户手势后才能 orientation.lock
+  const onGesture = () => {
+    void tryLockPortrait().then(() => syncForcedPortrait());
+  };
+  window.addEventListener("pointerdown", onGesture, { passive: true });
+  window.addEventListener("touchstart", onGesture, { passive: true });
 }