From a456d2127e06cedf36a4cb70f337114b87cf6c18 Mon Sep 17 00:00:00 2001
From: JianFeeeee <jianf@noreply.localhost>
Date: Mon, 14 Sep 2026 11:30:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(webui):=20=E6=A8=AA=E5=B1=8F=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=94=B9=E4=B8=BA=E4=BE=A7=E8=BE=B9=EF=BC=88=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E5=8E=8B=E5=BA=95=E9=83=A8=EF=BC=89=EF=BC=8C=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=8F=E5=9B=BA=E5=AE=9A=20320?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户：「导航栏在窄屏横屏情况下不也应当是在侧边吗？」。

横屏缺的是**竖向**空间：底部导航吃掉本就不多的高度（844×390 里它占了 61px），
而横向反而有余（824px）。所以在紧凑双栏下复用桌面那条 60px 图标栏，去掉底部导航。

## 顺带修掉"横屏没自适应"的另一半原因

列表栏宽度写的是 `lg:w-[320px]`，而 lg 断点是 **1024px** —— 844 宽的横屏不满足
⇒ 它退回 `w-full` ⇒ **列表吃掉整宽、详情被挤成一条缝**。之前我只改了排布方式，
没管这件事，所以横屏仍然不好用。现在按"紧凑双栏"这个**语义条件**给宽度
（`.compact-2pane .comm-pane { flex: 0 0 320px }`），而不是再猜一个像素断点。

**实测**（844×390）：侧栏 60×380 在左侧；导航项 = 通信/日历/联系/我；底部导航**不存在**；
列表栏 x=80 宽 **320**；详情 434；无横向溢出。
---
 client/electron/src/App.tsx   | 25 +++++++++++++++++++++++--
 client/electron/src/index.css | 20 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/client/electron/src/App.tsx b/client/electron/src/App.tsx
index 23df23f..1dbe729 100644
--- a/client/electron/src/App.tsx
+++ b/client/electron/src/App.tsx
@@ -225,7 +225,7 @@ export default function App() {
     // 它们已经是紧凑外壳的一部分，换的只是内容区的排布方式。
     if (compactTwoPane && hasList) {
       return (
-        <NarrowShell>
+        <NarrowShell sideNav>
           <div className="flex-1 min-h-0 flex">{list}{main}</div>
         </NarrowShell>
       );
@@ -266,7 +266,28 @@ function PaneLoading() {
  * fixed 层级 + 遮罩的代价是：抽屉 `z-50` 铺满视口高度，把底部导航
  * 最左那一项盖住点不到（实测 elementFromPoint 命中抽屉里的 SVG）。
  */
-function NarrowShell({ children }: { children: React.ReactNode }) {
+function NarrowShell({
+  children,
+  sideNav = false
+}: {
+  children: React.ReactNode;
+  /**
+   * 导航放侧边而不是底边（紧凑横屏用）。
+   *
+   * 用户（2026-09-14）：「导航栏在窄屏横屏情况下不也应当是在侧边吗？」——
+   * 横屏缺的是**竖向**空间：底部导航会吃掉本就不多的高度，而横向反而有余。
+   * 复用桌面那条 60px 图标栏，而不是为横屏再写一套导航。
+   */
+  sideNav?: boolean;
+}) {
+  if (sideNav) {
+    return (
+      <div className="narrow-shell compact-2pane h-full flex bg-gray-50 overflow-hidden safe-frame">
+        <Sidebar />
+        {children}
+      </div>
+    );
+  }
   return (
     <div className="narrow-shell h-full flex flex-col bg-gray-50 overflow-hidden safe-frame">
       {children}
diff --git a/client/electron/src/index.css b/client/electron/src/index.css
index d823d2c..e7abcc4 100644
--- a/client/electron/src/index.css
+++ b/client/electron/src/index.css
@@ -1131,3 +1131,23 @@ html.view-switch .glass-control,
     animation: none;
   }
 }
+
+
+/*
+ * 紧凑双栏（手机横屏）下，列表栏固定 320px。
+ *
+ * 为什么不能靠 Tailwind：列表栏的宽度写的是 `lg:w-[320px]`，而 lg 断点是 1024px ——
+ * 844 宽的横屏**不满足** ⇒ 它退回 `w-full` ⇒ 列表吃掉整宽、详情被挤成一条缝
+ * （这正是用户最早说"横屏没自适应"背后的一半原因）。
+ * 这里按"紧凑双栏"这个语义条件给宽度，而不是再猜一个像素断点。
+ */
+.compact-2pane .comm-pane {
+  flex: 0 0 320px;
+  max-width: 320px;
+}
+
+/* 详情栏占满剩下的宽度 */
+.compact-2pane > .flex-1 > :last-child {
+  flex: 1 1 0%;
+  min-width: 0;
+}