From 167726a55c734c5a597151c4b41f905f61e00fed Mon Sep 17 00:00:00 2001
From: orange <orange@users.noreply.github.com>
Date: Mon, 19 Oct 2026 00:37:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20=E6=A1=8C=E9=9D=A2=E7=89=88?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E5=9B=A0=E5=AD=97=E4=BD=93=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E6=8E=89=E8=BF=9B=E7=A7=BB=E5=8A=A8=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?PC=20=E9=9A=90=E8=97=8F=E3=80=8C=E5=B8=B8=E7=94=A8=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移动布局改由平台决定（Tauri 判定为 Android 时才启用），不再用
  (max-width: 760px) 判断。界面缩放走 WebView zoom，1100px 窗口在
  150% 时 innerWidth 只有 733px，会把桌面用户切进侧栏隐藏 + 底部导航
  的移动布局。
- Home 的「常用功能 / Quick access」只在移动布局渲染（桌面已有侧栏入口）。

验证：pnpm typecheck / pnpm build 通过；playwright 在 733px 视口
（=1100px 窗口 @150%）无底栏且无「常用功能」，android 390x844 仍保留。
---
 src/celemod-ui/src/routes/Home.tsx | 58 +++++++++++++++---------------
 src/celemod-ui/src/tauri/window.ts | 27 ++++++++------
 2 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/src/celemod-ui/src/routes/Home.tsx b/src/celemod-ui/src/routes/Home.tsx
index 945fb08..b590637 100644
--- a/src/celemod-ui/src/routes/Home.tsx
+++ b/src/celemod-ui/src/routes/Home.tsx
@@ -21,7 +21,7 @@ import {
 } from "../states";
 import "./Home.scss";
 import { useGlobalContext } from "src/App";
-import { detectDesktopPlatform } from "../tauri/window";
+import { detectDesktopPlatform, isMobileLayout } from "../tauri/window";
 import { SteamAccount } from "../components/SteamAccount";
 
 export const Home = () => {
@@ -367,33 +367,35 @@ export const Home = () => {
 
       {detectDesktopPlatform() === "android" && <SteamAccount />}
 
-      <section className="home-section home-shortcuts-section">
-        <div className="home-section-heading">
-          <Icon name="grid" />
-          <h2>{chinese ? "常用功能" : "Quick access"}</h2>
-        </div>
-        <div className="home-shortcuts">
-          {shortcuts.map((shortcut) => (
-            <button
-              type="button"
-              key={shortcut.page}
-              className={`home-shortcut tone-${shortcut.tone}`}
-              onClick={() => globalCtx.pageController.setPage(shortcut.page)}
-            >
-              <span className="shortcut-icon">
-                <Icon name={shortcut.icon} />
-              </span>
-              <span className="shortcut-copy">
-                <strong title={shortcut.title}>{shortcut.title}</strong>
-                <small title={shortcut.description}>
-                  {shortcut.description}
-                </small>
-              </span>
-              <Icon name="i-right" />
-            </button>
-          ))}
-        </div>
-      </section>
+      {isMobileLayout() && (
+        <section className="home-section home-shortcuts-section">
+          <div className="home-section-heading">
+            <Icon name="grid" />
+            <h2>{chinese ? "常用功能" : "Quick access"}</h2>
+          </div>
+          <div className="home-shortcuts">
+            {shortcuts.map((shortcut) => (
+              <button
+                type="button"
+                key={shortcut.page}
+                className={`home-shortcut tone-${shortcut.tone}`}
+                onClick={() => globalCtx.pageController.setPage(shortcut.page)}
+              >
+                <span className="shortcut-icon">
+                  <Icon name={shortcut.icon} />
+                </span>
+                <span className="shortcut-copy">
+                  <strong title={shortcut.title}>{shortcut.title}</strong>
+                  <small title={shortcut.description}>
+                    {shortcut.description}
+                  </small>
+                </span>
+                <Icon name="i-right" />
+              </button>
+            ))}
+          </div>
+        </section>
+      )}
 
       {profileEnabled && (
         <section className="home-section home-profiles-section">
diff --git a/src/celemod-ui/src/tauri/window.ts b/src/celemod-ui/src/tauri/window.ts
index b551b97..8e568fe 100644
--- a/src/celemod-ui/src/tauri/window.ts
+++ b/src/celemod-ui/src/tauri/window.ts
@@ -14,15 +14,22 @@ export function detectDesktopPlatform(): DesktopPlatform {
   return "linux";
 }
 
+/**
+ * Mobile layout is a property of the platform, not of the window width.
+ *
+ * The interface scale is applied with WebView zoom (`setZoom`), which shrinks
+ * the CSS viewport: a 1100px window at 150% reports `innerWidth === 733`, so a
+ * `(max-width: 760px)` check switched desktop users to the Android layout
+ * (sidebar hidden, bottom navigation shown). Desktop windows also cannot get
+ * narrower than `minWidth` (800px), so the width check only ever fired because
+ * of that zoom.
+ */
+export function isMobileLayout(): boolean {
+  return detectDesktopPlatform() === "android";
+}
+
 export function initializeWindowChrome() {
-  document.documentElement.dataset.platform = detectDesktopPlatform();
-  const compact = window.matchMedia("(max-width: 760px)");
-  const updateLayout = () => {
-    document.documentElement.toggleAttribute(
-      "data-mobile-layout",
-      detectDesktopPlatform() === "android" || compact.matches,
-    );
-  };
-  updateLayout();
-  compact.addEventListener("change", updateLayout);
+  const platform = detectDesktopPlatform();
+  document.documentElement.dataset.platform = platform;
+  document.documentElement.toggleAttribute("data-mobile-layout", isMobileLayout());
 }