feat(webui): 导航合并 + 悬浮玻璃 + 页面动画 + 控件档透明度 + 圆角无条件生效

用户四封信（同一线索）提的六件事，都在这里： ## ① 导航合并（「导航栏的内容有点多了」）收件箱/发件箱/授权 → 一项「通信」，进去由**内部页签**区分（CommTabs）；新建 → 「通信」页内**悬浮圆形加号**（ComposeFab）；导航只剩通信/日历/联系人；管理 → 合进「我的」，管理员在页面**最下面**看得到（非管理员不渲染，不是禁用）。 `viewMode` 仍是原来那三个值（几十处调用点不用改），新增 `commTab` 记住上次用的子页签；通信项的徽标 = 未读 + 待决策（授权信息不能因为合并而消失）。 ## ② 窄屏底部导航：悬浮玻璃（「还是固定底部延伸，没有玻璃效果，也没有悬浮」）原来是 `border-t bg-chrome-900` 通栏贴底。改成：左右/离底各留 10px、圆角、深色半透明 + `blur(18px)`、投影，安全区并入下外边距。 ## ③ 页面动画（「页面极度缺少动画，所有页面都是直接出现」）在 `<html>` 上挂一个短命类触发外壳直接子面板的入场动画。**没有用 key 重挂载**：面板是 flex 链上的一环，套 wrapper 会改掉 flex 传递（窄屏覆盖层最先坏）。并且尊重 `prefers-reduced-motion`（关了就一点都不动）。 ## ④ 控件档透明度（「复选框和地址猜测项…他们才是真正需要拉低透明度的地方」）新增第三档 `--bg-glass-control`（0.5/0.55）：授权多选胶囊、地址建议菜单。三档递减：正文面 0.88 > 嵌套 0.82 > 控件 0.5。 ## ⑤ 打底 vs 透明（上一封「该打底的地方透了、该透的空白处糊了」）正文面回到 0.88（读得清优先）、空白/页面底透明**且不模糊**、面板模糊降到 10px。 ## ⑥ 圆角与玻璃**无条件**生效（「大面积缺失圆角与玻璃效果…都是硬截断」）根因：`.app-shell` 的留缝/圆角/投影原先全写在 `html[data-bg='on']` 里 ⇒ **没开壁纸的账号**看到的是硬边不透明面板。现在几何下沉为无条件基线，壁纸相关的加强仍叠加在上面。窄屏内容面板同样浮起来。 ## 判据 - `test/nav-merge.test.mjs` 8 条（含自检：重构前的写法必须判红）—— 改完跑老套件 254 条**全绿却一条都没测导航结构**，结构改动必须自带判据。 - `test/manual/nav-restructure-verify.mjs`：真浏览器 9 条（导航项数、页签切换真的换内容、加号 56×56 且 `elementFromPoint` 命中自己、我的页底部管理入口在退出登录之后、控件档 α=0.5 对正文面 α=0.88 的反向对照）。 - `test/manual/narrow-glass-verify.mjs` 6 条：悬浮几何（三边留缝 10px、圆角 14px、缝隙处命中的是页面底 ⇒ 真的浮着）、玻璃（α=0.82 + blur18）、触摸高度最小 49px、动画真的在跑（静止时 `animationName=none`，切换后 =pane-in）且 reduced-motion 下不动。 - `test/background.test.mjs`：把三条**过时判据**（早前那版"越透越好"）按现行契约重写 —— 旧判据留着只会把我拽回错误方向。30 条全绿。 ## 顺带窄屏探针原先只调视口、**没模拟触屏**，于是 `(hover: hover)` 仍为真，把「悬停才显形的次要动作」误报成透明 —— 差点去"修"一个本来就对的规则。已改成 hasTouch + isMobile + DPR 的触屏上下文，且收尾只关自己的 context （CDP 连的是共享 Chromium，`browser.close()` 会把别人的标签页一起关掉）。
2026-09-14 10:35:05 +08:00
parent 552fbc731e
commit 76ce201c3a
15 changed files with 911 additions and 107 deletions
--- a/client/electron/src/App.tsx
+++ b/client/electron/src/App.tsx
@ -9,6 +9,7 @@ import { useSessionStore } from './stores/sessionStore';
 import { useContactStore } from './stores/contactStore';
 import { useUIStore } from './stores/uiStore';
 import Sidebar from './components/Sidebar';
+import CommTabs, { ComposeFab } from './components/CommTabs';
 import MailList from './components/MailList';
 import PermissionList from './components/PermissionList';
 import ContactPanel from './components/ContactPanel';
@ -39,6 +40,26 @@ export default function App() {
  const resetUI = useUIStore(s => s.reset);
  const narrowPane = useUIStore(s => s.narrowPane);
  const narrow = useIsNarrow();
+  const commTab = useUIStore(s => s.commTab);
+
+  /*
+   * 视图切换动画的触发器（2026-09-14 用户：「页面极度缺少动画，所有页面都是直接出现」）。
+   *
+   * 为什么不用 key 重挂载：面板是 flex 链上的一环，套 wrapper 会改变 flex 传递，
+   * 窄屏覆盖层最先坏。这里改成在外壳上挂一个短命类，由 CSS 给直接子面板加一次
+   * 入场动画 —— DOM 结构一个字节都不动。
+   *
+   * 必须先 remove + 强制重排再 add：同一个类连着挂两次，浏览器不会重放动画。
+   */
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('view-switch');
+    // 读一次布局，强制样式失效（否则 remove/add 在同一帧里会被合并，动画不重放）
+    void root.offsetWidth;
+    root.classList.add('view-switch');
+    const t = window.setTimeout(() => root.classList.remove('view-switch'), 400);
+    return () => window.clearTimeout(t);
+  }, [viewMode, commTab, narrowPane, composing]);

  const fetchInbox = useMailStore(s => s.fetchInbox);
  const fetchSent = useMailStore(s => s.fetchSent);
@ -156,7 +177,8 @@ export default function App() {
  );

  // 列表（中栏）：收发件箱、授权、联系人视图有
-  const list =
+  const isComm = viewMode === 'inbox' || viewMode === 'sent' || viewMode === 'permissions';
+  const listBody =
    viewMode === 'contacts' ? (
      <ContactPanel />
    ) : viewMode === 'permissions' ? (
@ -165,6 +187,23 @@ export default function App() {
      <MailList />
    ) : null;

+  /*
+   * 「通信」的内部导航（收件箱 / 发件箱 / 授权）与悬浮加号都挂在中栏上。
+   *
+   * 放在这里而不是各个子页面里，是为了"只有一套"：三个页签各写一遍的话，
+   * 切换时的选中态、徽标口径迟早会分叉。
+   * 外层 `relative` 是给悬浮加号定位用的 —— 窄屏时它正好落在底部导航之上。
+   */
+  const list = isComm && listBody ? (
+    <div className="relative flex-1 min-w-0 min-h-0 flex flex-col">
+      <CommTabs />
+      {listBody}
+      <ComposeFab />
+    </div>
+  ) : (
+    listBody
+  );
+
  // 账号/管理页没有列表栏，窄屏下要直接显示主区域，
  // 否则会出现一片空白（列表为 null 而 narrowPane 还停在 'list'）
  const hasList = list !== null;
@ -218,7 +257,7 @@ function PaneLoading() {
 */
 function NarrowShell({ children }: { children: React.ReactNode }) {
  return (
-    <div className="h-full flex flex-col bg-gray-50 overflow-hidden safe-frame">
+    <div className="narrow-shell h-full flex flex-col bg-gray-50 overflow-hidden safe-frame">
      {children}
      <NarrowNav />
    </div>
--- a/client/electron/src/components/AccountPage.tsx
+++ b/client/electron/src/components/AccountPage.tsx
@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAuthStore } from '../stores/authStore';
 import * as api from '../api/client';
-import { LockIcon, LogoutIcon } from './icons';
+import { LockIcon, LogoutIcon, UsersIcon } from './icons';
+import { useUIStore } from '../stores/uiStore';
 import KeyPanel from './KeyPanel';
 import AccountList from './AccountList';
 import ThemePicker from './ThemePicker';
@ -11,6 +12,7 @@ import BackgroundPicker from './BackgroundPicker';
 export default function AccountPage() {
  const user = useAuthStore(s => s.user);
  const logout = useAuthStore(s => s.logout);
+  const setViewMode = useUIStore(s => s.setViewMode);
  const [oldPw, setOldPw] = useState('');
  const [newPw, setNewPw] = useState('');
  const [confirmPw, setConfirmPw] = useState('');
@ -240,6 +242,28 @@ export default function AccountPage() {
              退出登录
            </button>
          </section>
+
+          {/*
+            管理入口（仅管理员可见）—— 用户：「将管理和我的合并，管理员视角我的页面
+            拉到最下面有一个管理」。
+            合并的理由与通信一致：导航栏只留日常动作，低频/高危的入口下沉到「我的」。
+            非管理员看不到这一整块（不是禁用，是不渲染 —— 免得让人以为"我缺权限"）。
+          */}
+          {user?.role === 'admin' && (
+            <section className="border-t border-gray-200 pt-6">
+              <h3 className="text-xs font-medium text-gray-500 mb-3">管理</h3>
+              <button
+                onClick={() => setViewMode('admin')}
+                className="tap inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors"
+              >
+                <UsersIcon className="w-4 h-4" />
+                用户管理
+              </button>
+              <p className="mt-2 text-2xs text-gray-400">
+                创建/停用账号、查看配额与密钥。只有管理员看得到这一栏。
+              </p>
+            </section>
+          )}
        </div>
      </div>
    </div>
--- a/client/electron/src/components/AddressInput.tsx
+++ b/client/electron/src/components/AddressInput.tsx
@ -181,7 +181,7 @@ export default function AddressInput({

      {open && items.length > 0 && (
        <div
-          className={`absolute z-20 w-full overflow-y-auto bg-white border border-gray-200 rounded-lg shadow-2 ${
+          className={`absolute z-20 w-full overflow-y-auto glass-control border border-gray-200 rounded-lg shadow-2 ${
            menuLayout.flip ? 'bottom-full mb-1' : 'top-full mt-1'
          }`}
          style={{ maxHeight: menuLayout.maxHeight }}
--- a/client/electron/src/components/CommTabs.tsx
+++ b/client/electron/src/components/CommTabs.tsx
@ -0,0 +1,94 @@
+import { countPendingPermissions, splitByPermission } from '../lib/mailGroups';
+import { useMailStore } from '../stores/mailStore';
+import { type CommTab, useUIStore } from '../stores/uiStore';
+import { ComposeIcon } from './icons';
+
+/*
+ * 「通信」这一个导航项的**内部导航**。
+ *
+ * 用户（2026-09-14）：「收件发件授权改为一个导航项，通过内部导航区分，然后新建作为
+ * 他们内部的一个悬浮的圆形加号」。
+ *
+ * 于是收件箱 / 发件箱 / 授权 三个页签落在这里，而不是导航栏里。
+ * 页签上带未读/待决策徽标 —— 合并成一项之后，导航栏上看不到"授权有 3 个在等我"了，
+ * 这个信息不能丢：它是"有人被卡住"，比未读更急。
+ */
+
+const TABS: { key: CommTab; label: string }[] = [
+  { key: 'inbox', label: '收件箱' },
+  { key: 'sent', label: '发件箱' },
+  { key: 'permissions', label: '授权' }
+];
+
+export default function CommTabs() {
+  const commTab = useUIStore(s => s.commTab);
+  const setCommTab = useUIStore(s => s.setCommTab);
+  const inbox = useMailStore(s => s.inbox);
+
+  const { normal, permissions } = splitByPermission(inbox);
+  const unread = normal.filter(m => m.status === 'unread').length;
+  const pendingPerms = countPendingPermissions(permissions);
+
+  return (
+    <div
+      data-testid="comm-tabs"
+      className="shrink-0 flex items-stretch gap-0.5 px-1.5 pt-1.5 border-b border-gray-200"
+      role="tablist"
+      aria-label="通信"
+    >
+      {TABS.map(({ key, label }) => {
+        const on = commTab === key;
+        const badge = key === 'inbox' ? unread : key === 'permissions' ? pendingPerms : 0;
+        return (
+          <button
+            key={key}
+            type="button"
+            role="tab"
+            aria-selected={on}
+            onClick={() => setCommTab(key)}
+            className={`relative px-3 py-1.5 text-xs font-medium rounded-t-md transition-colors ${
+              on
+                ? 'bg-white text-gray-900 shadow-sm'
+                : 'text-gray-500 hover:text-gray-800 hover:bg-white/60'
+            }`}
+          >
+            {label}
+            {badge > 0 && (
+              <span
+                className={`ml-1.5 min-w-[16px] h-[16px] px-1 rounded-full text-3xs font-bold inline-flex items-center justify-center align-middle ${
+                  key === 'permissions' ? 'bg-orange-700 text-white' : 'bg-red-600 text-white'
+                }`}
+              >
+                {badge > 99 ? '99+' : badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * 悬浮的圆形加号 —— 「新建」从导航栏搬到这里。
+ *
+ * 放在列表栏的右下角（`absolute`），窄屏时正好在底部导航之上；宽屏时在列表栏内悬浮。
+ * 用圆形而不是胶囊：用户点名要"悬浮的圆形加号"，且圆形在窄屏下不会挤压页签。
+ */
+export function ComposeFab() {
+  const startCompose = useUIStore(s => s.startCompose);
+  const composing = useUIStore(s => s.composing);
+  if (composing) return null;
+  return (
+    <button
+      type="button"
+      data-testid="compose-fab"
+      onClick={() => startCompose()}
+      title="新建邮件"
+      aria-label="新建邮件"
+      className="absolute bottom-4 right-4 z-10 w-14 h-14 rounded-full bg-blue-600 text-white shadow-lg flex items-center justify-center hover:bg-blue-700 active:bg-blue-800 transition-colors"
+    >
+      <ComposeIcon className="w-6 h-6" />
+    </button>
+  );
+}
--- a/client/electron/src/components/MailView.tsx
+++ b/client/electron/src/components/MailView.tsx
@ -697,7 +697,7 @@ export function PermissionPanel({ mail }: { mail: Mail }) {
                  className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-colors disabled:opacity-40 ${
                    on
                      ? 'bg-blue-700 text-white border-blue-700 hover:bg-blue-800'
-                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                      : 'glass-control text-gray-700 border-gray-300 hover:bg-gray-50'
                  }`}
                >
                  {on && <CheckIcon className="w-3.5 h-3.5" />}
--- a/client/electron/src/components/NarrowNav.tsx
+++ b/client/electron/src/components/NarrowNav.tsx
@ -4,12 +4,8 @@ import { useContactStore } from '../stores/contactStore';
 import { useAuthStore } from '../stores/authStore';
 import {
  InboxIcon,
-  SentIcon,
  ContactsIcon,
-  ComposeIcon,
-  UsersIcon,
  PersonIcon,
-  ShieldIcon,
  CalendarIcon
 } from './icons';
 import { ConnectionIndicator } from './ConnectionIndicator';
@ -28,22 +24,22 @@ import { countPendingPermissions, splitByPermission } from '../lib/mailGroups';
 const items: {
  short: string;
  mode: ViewMode;
+  /** 哪些 viewMode 算这一项选中（「通信」含三个子页签） */
+  modes?: ViewMode[];
  Icon: (p: { className?: string }) => JSX.Element;
  adminOnly?: boolean;
 }[] = [
-  { short: '收件', mode: 'inbox', Icon: InboxIcon },
-  { short: '授权', mode: 'permissions', Icon: ShieldIcon },
-  { short: '发件', mode: 'sent', Icon: SentIcon },
-  { short: '日历', mode: 'calendar', Icon: CalendarIcon },
-  { short: '联系人', mode: 'contacts', Icon: ContactsIcon },
-  { short: '管理', mode: 'admin', Icon: UsersIcon, adminOnly: true }
+  // 与桌面侧栏同一套合并（用户：「导航项就只剩通信，日历，联系人」）：
+  // 收件/发件/授权 = 一项「通信」，进去由 CommTabs 区分；管理移到「我的」页底部。
+  { short: '通信', mode: 'inbox', modes: ['inbox', 'sent', 'permissions'], Icon: InboxIcon },
+    { short: '日历', mode: 'calendar', Icon: CalendarIcon },
+    { short: '联系人', mode: 'contacts', Icon: ContactsIcon }
 ];

 export default function NarrowNav() {
  const viewMode = useUIStore(s => s.viewMode);
  const setViewMode = useUIStore(s => s.setViewMode);
  const composing = useUIStore(s => s.composing);
-  const startCompose = useUIStore(s => s.startCompose);
  const narrowPane = useUIStore(s => s.narrowPane);

  const inbox = useMailStore(s => s.inbox);
@ -57,29 +53,32 @@ export default function NarrowNav() {
  const isAdmin = user?.role === 'admin';

  const visible = items.filter(n => !n.adminOnly || isAdmin);
+  // 点「通信」回到上次用的子页签（与桌面侧栏同一语义）
+  const commTab = useUIStore(s => s.commTab);

  return (
    <nav
-      className="narrow-nav shrink-0 border-t border-chrome-700 bg-chrome-900 flex items-stretch"
-      // 底部安全区：iPhone 的手势条会盖住最后一排
-      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+      // 悬浮玻璃条的样式全在 index.css 的 .narrow-nav 里（含安全区外边距）：
+      // 这里不再写 border-t/bg-chrome-900 —— 那是"贴底通栏"的写法，与悬浮冲突
+      className="narrow-nav shrink-0 flex items-stretch"
    >
-      {visible.map(({ short, mode, Icon }) => {
-        // 详情栏打开时不高亮任何导航项：此刻用户看的是某封邮件，
-        // 高亮「收件」会让人以为点它能回到列表（其实是同一项）
-        const active = viewMode === mode && !composing && narrowPane === 'list';
-        const badge =
-          mode === 'inbox'
-            ? unread
-            : mode === 'permissions'
-            ? pendingPerms
-            : mode === 'contacts'
-            ? contacts.length
-            : 0;
+      {visible.map(({ short, mode, modes, Icon }) => {
+        const itemModes = modes ?? [mode];
+        // 详情栏打开时不高亮任何导航项：此刻用户看的是某封邮件
+        const active =
+          itemModes.includes(viewMode) && !composing && narrowPane === 'list';
+        // 「通信」合并了三项：徽标 = 未读 + 待决策（授权信息不能因为合并而消失）
+        const isComm = itemModes.includes('inbox');
+        const badge = isComm
+          ? unread + pendingPerms
+          : itemModes.includes('contacts')
+          ? contacts.length
+          : 0;
+        const badgeTone = isComm && pendingPerms > 0 ? 'perm' : isComm ? 'unread' : 'plain';
        return (
          <button
-            key={mode}
-            onClick={() => setViewMode(mode)}
+            key={short}
+            onClick={() => setViewMode(isComm ? commTab : mode)}
            className={`relative flex-1 py-2 flex flex-col items-center justify-center gap-0.5 transition-colors ${
              active ? 'text-white' : 'text-chrome-400 active:bg-chrome-800'
            }`}
@ -89,9 +88,9 @@ export default function NarrowNav() {
            {badge > 0 && (
              <span
                className={`absolute top-1 right-[22%] min-w-[15px] h-[15px] px-1 rounded-full text-3xs font-bold flex items-center justify-center ${
-                  mode === 'inbox'
+                  badgeTone === 'unread'
                    ? 'bg-red-600 text-white'
-                    : mode === 'permissions'
+                    : badgeTone === 'perm'
                    ? 'bg-orange-700 text-white'
                    : 'bg-chrome-600 text-chrome-100'
                }`}
@ -103,16 +102,7 @@ export default function NarrowNav() {
          </button>
        );
      })}
-
-      <button
-        onClick={() => startCompose()}
-        className={`flex-1 py-2 flex flex-col items-center justify-center gap-0.5 ${
-          composing ? 'text-blue-300' : 'text-blue-400 active:bg-chrome-800'
-        }`}
-      >
-        <ComposeIcon />
-        <span className="text-3xs leading-none">新建</span>
-      </button>
+      {/* 新建改到列表栏的悬浮圆钮（ComposeFab），与桌面一致 */}

      <button
        onClick={() => setViewMode('account')}
--- a/client/electron/src/components/Sidebar.tsx
+++ b/client/electron/src/components/Sidebar.tsx
@ -4,12 +4,8 @@ import { useContactStore } from '../stores/contactStore';
 import { useAuthStore } from '../stores/authStore';
 import {
  InboxIcon,
-  SentIcon,
  ContactsIcon,
-  ComposeIcon,
-  UsersIcon,
  LogoutIcon,
-  ShieldIcon,
  CalendarIcon,
  BrandMarkIcon
 } from './icons';
@ -17,29 +13,39 @@ import { ConnectionIndicator } from './ConnectionIndicator';
 import { ThemeToggleButton } from './ThemePicker';
 import { countPendingPermissions, splitByPermission } from '../lib/mailGroups';

+/*
+ * 导航项只有三项（2026-09-14 用户：「导航栏的内容有点多了…这样导航项就只剩
+ * 通信，日历，联系人」）。
+ *
+ * 收件箱 / 发件箱 / 授权合并成一项「通信」，进去之后由内部页签（CommTabs）区分；
+ * 「管理」不再单列 —— 它在「我的」页面最下面（管理员才看得到）。
+ *
+ * `modes` 是"哪些 viewMode 算这一项处于选中态"，`target` 是"点它去哪"：
+ * 通信要回到上次用的那个子页签，而不是永远回收件箱。
+ */
 const navItems: {
  short: string;
  title: string;
-  mode: ViewMode;
+  modes: ViewMode[];
+  target?: ViewMode;
  Icon: (p: { className?: string }) => JSX.Element;
-  adminOnly?: boolean;
 }[] = [
-  { short: '收件', title: '收件箱', mode: 'inbox', Icon: InboxIcon },
-  // 授权紧跟收件箱：它是收件箱的「要动手」那一半，放在联系人之后会让人找不到
-  { short: '授权', title: '授权请求', mode: 'permissions', Icon: ShieldIcon },
-  { short: '发件', title: '发件箱', mode: 'sent', Icon: SentIcon },
+  {
+    short: '通信',
+    title: '通信（收件箱 / 发件箱 / 授权）',
+    modes: ['inbox', 'sent', 'permissions'],
+    Icon: InboxIcon
+  },
  // 日历排在联系人之前：它是「我要安排什么」，与收发信同属日常动作；
  // 联系人是「查谁在哪」，用得少
-  { short: '日历', title: '日历', mode: 'calendar', Icon: CalendarIcon },
-  { short: '联系', title: '联系人', mode: 'contacts', Icon: ContactsIcon },
-  { short: '用户', title: '用户管理', mode: 'admin', Icon: UsersIcon, adminOnly: true }
+  { short: '日历', title: '日历', modes: ['calendar'], Icon: CalendarIcon },
+  { short: '联系', title: '联系人', modes: ['contacts'], Icon: ContactsIcon }
 ];

 export default function Sidebar() {
  const viewMode = useUIStore(s => s.viewMode);
  const setViewMode = useUIStore(s => s.setViewMode);
  const composing = useUIStore(s => s.composing);
-  const startCompose = useUIStore(s => s.startCompose);

  const inbox = useMailStore(s => s.inbox);
  // 收件箱的未读数只算普通邮件：权限请求归「授权」那一项，
@ -50,8 +56,9 @@ export default function Sidebar() {
  const contacts = useContactStore(s => s.contacts);

  const user = useAuthStore(s => s.user);
+  // 点「通信」时回到上次用的子页签（见 uiStore.commTab）
+  const commTab = useUIStore(s => s.commTab);
  const logout = useAuthStore(s => s.logout);
-  const isAdmin = user?.role === 'admin';

  return (
    <div className="w-[60px] h-full shrink-0 flex flex-col items-center py-3 gap-1 bg-chrome-900"
@ -75,22 +82,21 @@ export default function Sidebar() {
        <BrandMarkIcon className="w-5 h-5" />
      </button>

-      {navItems
-        .filter(n => !n.adminOnly || isAdmin)
-        .map(({ short, title, mode, Icon }) => {
-          const active = viewMode === mode && !composing;
-          const badge =
-            mode === 'inbox'
-              ? unread
-              : mode === 'permissions'
-              ? pendingPerms
-              : mode === 'contacts'
+      {navItems.map(({ short, title, modes, target, Icon }) => {
+            const active = modes.includes(viewMode) && !composing;
+            // 「通信」把两类"要动手"合起来显示；有人的授权在等我时用橙色优先提示，
+            // 因为那是有人被卡住，未读只是"还没看"。
+            const isComm = modes.includes('inbox');
+            const badge = isComm
+              ? unread + pendingPerms
+              : modes.includes('contacts')
              ? contacts.length
              : 0;
-          return (
-            <button
-              key={mode}
-              onClick={() => setViewMode(mode)}
+            const badgeTone = isComm && pendingPerms > 0 ? 'perm' : isComm ? 'unread' : 'plain';
+            return (
+              <button
+                key={short}
+                onClick={() => setViewMode(target || commTab || modes[0])}
              title={title}
              className={`relative w-12 h-12 rounded-lg flex flex-col items-center justify-center gap-0.5 transition-colors ${
                active
@ -103,9 +109,9 @@ export default function Sidebar() {
              {badge > 0 && (
                <span
                  className={`absolute top-0.5 right-1 min-w-[15px] h-[15px] px-1 rounded-full text-3xs font-bold flex items-center justify-center ${
-                    mode === 'inbox'
+                    badgeTone === 'unread'
                      ? 'bg-red-600 text-white'
-                      : mode === 'permissions'
+                      : badgeTone === 'perm'
                      ? // 待决策的授权用橙色：它跟未读不是一类紧急 ——
                        // 未读是「有内容没看」，待决策是「有 Agent 卡在那儿等我」
                        'bg-orange-700 text-white'
@ -120,17 +126,10 @@ export default function Sidebar() {
        })}

      <div className="flex-1" />
-
-      <button
-        onClick={() => startCompose()}
-        title="新建邮件"
-        className={`w-12 h-12 rounded-lg flex flex-col items-center justify-center gap-0.5 text-white transition-colors ${
-          composing ? 'bg-blue-700 ring-2 ring-blue-300' : 'bg-blue-600 hover:bg-blue-700'
-        }`}
-      >
-        <ComposeIcon />
-        <span className="text-3xs leading-none">新建</span>
-      </button>
+      {/*
+        这里原本是「新建」导航项。用户要求把它变成「通信」页内悬浮的圆形加号
+        （见 App 里的 ComposeFab），导航栏就只剩三项。
+      */}

      <div className="mt-2 pt-2 w-full flex flex-col items-center gap-1 border-t border-chrome-700">
        <button
--- a/client/electron/src/index.css
+++ b/client/electron/src/index.css
@ -228,7 +228,7 @@
  --bg-dim: 12%;
  --bg-blur: 4px;
  /* 玻璃面板的不透明度：背景越花，面板需要越实才读得动。 */
-  --bg-glass: 0.45;
+  --bg-glass: 0.88;
  /*
   * 嵌套面板那一层的不透明度。
   *
@ -240,9 +240,18 @@
   * 原则是「玻璃只该出现一次」：最外层负责遮罩与模糊，里面几层只留一点点
   * 色调（保住正文对比度），第三层起直接透明（见下面 data-bg='on' 的规则）。
   */
-  --bg-glass-inner: 0.22;
+  --bg-glass-inner: 0.82;
+  /*
+   * 控件级透度：复选框、选项胶囊、地址建议菜单这类**小控件**。
+   *
+   * 用户第三轮的原话：「复选框和地址猜测项的透明度问题还没改，他们才是真正需要
+   * 拉低透明度的地方」。也就是说：承载正文的大面必须够实（读得清），
+   * 而这些小块本身没有大段文字，透一点反而好看 —— 壁纸透过它们，界面才有层次。
+   * 三档从实到透：正文面(--bg-glass) > 嵌套卡(--bg-glass-inner) > 控件(--bg-glass-control)。
+   */
+  --bg-glass-control: 0.5;
  /* 面板的朦胧感（与壁纸自身的 --bg-blur 分开：那层给照片打底，这层给面板） */
-  --bg-blur-panel: 18px;
+  --bg-blur-panel: 10px;
  /* 浮动面板之间的缝隙：壁纸从缝隙里露出来，是圆角化玻璃化的关键 */
  --pane-gap: 10px;

@ -349,8 +358,9 @@
   */
  --bg-scrim: 0 0 0;
  /* 深色下面板要更实：背景亮部与深色卡片对比过强时，文字会显得发灰。 */
-  --bg-glass: 0.5;
-  --bg-glass-inner: 0.26;
+  --bg-glass: 0.9;
+  --bg-glass-inner: 0.84;
+  --bg-glass-control: 0.55;

  /*
   * 深色下的层次靠「边框亮于底」而不是阴影。
@ -721,6 +731,21 @@ html[data-bg='on'] body,
 html[data-bg='on'] .bg-gray-50,
 html[data-bg='on'] .bg-slate-100 {
  background-color: transparent;
+  /* 空白区不模糊：壁纸在这里要清晰可辨（用户："真正该透明的地方加了很浓的模糊"） */
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/*
+ * .glass-control —— 小控件用的"更透"档。
+ *
+ * 必须显式加在元素上、并且**不要同时写 bg-white**：我的 `html[data-bg='on'] .bg-white`
+ * 接管规则会把任何 bg-white 拉回正文面那一档（0.88），写在这儿的透度会被它盖掉。
+ */
+html[data-bg='on'] .glass-control {
+  background-color: rgb(var(--c-white) / var(--bg-glass-control));
+  backdrop-filter: blur(6px) saturate(1.1);
+  -webkit-backdrop-filter: blur(6px) saturate(1.1);
 }

 html[data-bg='on'] .bg-white {
@ -769,6 +794,62 @@ html[data-bg='on'] .hover\:bg-gray-100:hover {
 *   ③ 导航栏**完全不透明**：它是框架，不该跟着壁纸一起虚化。
 *      这与内容面板要通透是**两个方向**的要求，别合并成一条规则。
 */
+/*
+ * ★ 两类面要分开处理（2026-09-14 用户第二轮批评）：
+ *
+ *   「你把大量需要打底的场景（弹窗正文等）改为了透明。真正该透明的地方（空白区域）
+ *     加了很浓的模糊」
+ *
+ * 也就是我上一版把两类搞反了：
+ *   - **承载文字的面**（正文卡、弹窗、列表、输入条）：必须够实 + 轻模糊，
+ *     否则字压在壁纸上读不动 —— 这是"打底"，不是"玻璃"；
+ *   - **空白/页面底**（详情区空态、面板缝隙、page 底）：透明且**不模糊**，
+ *     壁纸在这里应该是清晰的照片，不是一团糊。
+ *
+ * 规则落点：`--bg-glass` 只作用在 `.bg-white` 这一族（承载内容的那些面），
+ * 而 `.bg-gray-50` / 页面底保持 transparent 且不参与模糊。
+ */
+/*
+ * 浮动面板的几何 **始终生效**（圆角 + 缝隙 + 投影 + 一点朦胧），不只在壁纸模式下。
+ *
+ * 用户（2026-09-14）：「通信页面大面积缺失圆角与玻璃效果，所有有内容与无内容区域
+ * 都是硬截断」—— 根因是这些规则原先**全写在 `html[data-bg='on']` 里**：
+ * 没开壁纸的账号看到的是硬边、不透明、贴在一起的面板，硬截断就是这么来的。
+ *
+ * 所以几何部分下沉到这里（无条件的基线），壁纸相关的加强（朝向照片的透明度、
+ * 强模糊、面板间露出壁纸）仍留在下面的 data-bg 段里 —— 两者是叠加关系，不是替代。
+ */
+.app-shell {
+  padding: var(--pane-gap);
+  gap: var(--pane-gap);
+}
+
+.app-shell > * {
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgb(15 23 42 / 0.08);
+  /* 圆角处的背景不要溢出圆角外（否则边缘会出现方角残影） */
+  background-clip: padding-box;
+}
+
+/* 基线朦胧：没开壁纸时也有一点玻璃感，而不是一块硬塑料 */
+.app-shell > *,
+.narrow-shell > *:not(.narrow-nav) {
+  backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.05);
+  -webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.05);
+}
+
+/* 窄屏：内容面板同样浮起来（与底部导航那条悬浮玻璃一致） */
+.narrow-shell {
+  padding: var(--pane-gap) var(--pane-gap) 0;
+  gap: var(--pane-gap);
+}
+
+.narrow-shell > *:not(.narrow-nav) {
+  border-radius: var(--radius-card);
+  overflow: hidden;
+}
+
 html[data-bg='on'] .app-shell {
  padding: var(--pane-gap);
  gap: var(--pane-gap);
@ -869,3 +950,78 @@ select,
    transition-duration: 0.01ms !important;
  }
 }
+
+
+/*
+ * ═══════════════════════════════════════════════════════════════════
+ *  窄屏底部导航：悬浮玻璃条
+ *
+ *  用户（2026-09-14）：「窄屏布局的导航栏还是固定底部延伸，没有玻璃效果，也没有悬浮」。
+ *  原来它是 `border-t bg-chrome-900` 的通栏 —— 贴着屏幕底边铺满宽度，与宽屏那套
+ *  「浮动面板 + 留缝」的观感完全脱节（宽屏侧栏虽然不是玻璃，但内容面板是浮起来的）。
+ *
+ *  改成：离底边留 10px、左右各留 10px、圆角、深色半透明 + 背景模糊，落在壁纸之上。
+ *  安全区（iPhone 手势条）并入下外边距，否则悬浮条会被手势条压住。
+ */
+.narrow-nav {
+  margin: 0 10px calc(10px + env(safe-area-inset-bottom));
+  border-radius: var(--radius-card, 14px);
+  border: 1px solid rgb(255 255 255 / 0.12);
+  background-color: rgb(15 23 42 / 0.82);
+  backdrop-filter: blur(18px) saturate(1.5);
+  -webkit-backdrop-filter: blur(18px) saturate(1.5);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
+  overflow: hidden;
+}
+
+/*
+ * 视图切换动画。
+ *
+ * 用户：「页面极度缺少动画，所有页面都是直接出现」。
+ *
+ * 做法：只在 <html> 上挂一个短命的类（由 App 的 effect 在 viewMode/页签变化时重新触发），
+ * 由它给外壳的直接子面板加一次入场动画。**不改 DOM 结构** —— 面板本身是 flex 链上的
+ * 一环，套一层动画 wrapper 会把 flex 传递改掉（这类改动最容易把窄屏覆盖层弄坏）。
+ */
+@keyframes pane-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.995);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+html.view-switch .app-shell > *,
+html.view-switch .narrow-shell > * {
+  animation: pane-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+/* 菜单/建议列表：轻微放大淡入，避免"啪"地出现 */
+@keyframes menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+html.view-switch .glass-control,
+.animate-menu-in {
+  animation: menu-in 140ms ease-out both;
+}
+
+/* 尊重系统设置：关了动画就一点都不动（前庭功能敏感的人会被位移动画伤到） */
+@media (prefers-reduced-motion: reduce) {
+  html.view-switch .app-shell > *,
+  html.view-switch .narrow-shell > *,
+  html.view-switch .glass-control,
+  .animate-menu-in {
+    animation: none !important;
+  }
+}
--- a/client/electron/src/stores/uiStore.ts
+++ b/client/electron/src/stores/uiStore.ts
@ -2,10 +2,23 @@ import { create } from 'zustand';

 export type ViewMode = 'inbox' | 'sent' | 'permissions' | 'calendar' | 'contacts' | 'admin' | 'account';

+/**
+ * 「通信」这一个导航项内部的三个页签。
+ *
+ * 2026-09-14 用户：「导航栏的内容有点多了，收件发件授权改为一个导航项，通过内部导航区分」。
+ * 于是 `viewMode` 仍然是那三个值（几十处调用点不用改），但导航栏只画一项「通信」；
+ * 这一项点击时回到**上次用的那个页签**（`commTab`），进入后再由内部页签切换。
+ */
+export type CommTab = 'inbox' | 'sent' | 'permissions';
+
 interface UIState {
  viewMode: ViewMode;
  setViewMode: (mode: ViewMode) => void;

+  /** 「通信」导航项记忆的子页签（收件箱/发件箱/授权） */
+  commTab: CommTab;
+  setCommTab: (tab: CommTab) => void;
+
  /** 右侧主区域是否处于「新建邮件」整页编写态 */
  composing: boolean;
  composePrefill: { to?: string; cc?: string } | null;
@ -29,7 +42,7 @@ interface UIState {
  reset: () => void;
 }

-export const useUIStore = create<UIState>(set => ({
+export const useUIStore = create<UIState>((set, get) => ({
  viewMode: 'inbox',
  // 切换主视图时回到列表栏：窄屏下停在上一封邮件的详情页会让人不知道自己在哪
  setViewMode: mode =>
@ -37,9 +50,21 @@ export const useUIStore = create<UIState>(set => ({
      viewMode: mode,
      composing: false,
      composePrefill: null,
-      narrowPane: 'list'
+      narrowPane: 'list',
+      // 通信的三个子页签要记住：点「通信」时回到上次那个，而不是永远回收件箱
+      ...(mode === 'inbox' || mode === 'sent' || mode === 'permissions'
+        ? { commTab: mode as CommTab }
+        : {})
    }),

+  commTab: 'inbox',
+  // 点内部页签 = 走同一条切换路径（这样"记住上次"的语义只有一处实现）
+  setCommTab: (tab: CommTab) => {
+    const st = get();
+    if (st.viewMode === tab && !st.composing) return;
+    st.setViewMode(tab);
+  },
+
  composing: false,
  composePrefill: null,
  // 写信占满整个主区域，窄屏下等价于切到 detail 栏
@ -54,6 +79,7 @@ export const useUIStore = create<UIState>(set => ({
  reset: () =>
    set({
      viewMode: 'inbox',
+      commTab: 'inbox',
      composing: false,
      composePrefill: null,
      narrowPane: 'list'