MailUI4Agents

jianf/MailUI4Agents

Fork 0

Commit Graph

Author	SHA1	Message	Date
JianFeeeee	6702cc2f5e	fix(webui): 窄屏日历/详情的圆角——圆角要给到「能裁剪的那一层」用户（2026-09-14）：「我这边看还是方角」。上一轮我只修了宽屏那条分支，窄屏（手机/平板，<1024px）当时仍然是方角 —— 这次按像素量到了。 ## 实测（真浏览器读渲染像素，不是读声明） 390x844 日历页左上角：改前 (255,255,255) 纯白 → 方角；面板 computed radius = 0px 改后 (249,250,251) 页面底色 → 圆角；上边缘内缩 8px ## 根因：圆角落在裁不住东西的那层上窄屏走 NarrowStack（`list`+`main` 的覆盖式容器，日历与收件箱详情都用它）： .narrow-shell > * ← 14px 加在这里（App.tsx 的 flex-1 min-h-0 flex） NarrowStack 根 ← overflow:hidden，但 radius 0px absolute inset-0 flex ← 透明 gridPane (bg-white) ← 0px，直角原样露出来 `overflow: visible` 的透明 flex 容器拿到圆角 = 什么也没发生。 NarrowStack 的根节点是唯一同时具备「自己 overflow:hidden」与「包住有底色那一层」的层，圆角必须加在它上面 —— 加给它，底层页与滑入的覆盖层就一起被裁到圆角里。顺带修好一处同类问题：收件箱详情在窄屏也是方角（同一个容器），以前没人报过，这次一起圆了（实测同上）。 ## 判据 narrow-layout 新增 2 条，分开钉两件事（分开一条都不算修好）： ① 那层自己带上面板圆角（类名与 CSS 规则接得上）； ② 那一层同时具备裁剪能力（overflow:hidden）。三组变异全部红在对的那条上（去掉类名 / 去掉 border-radius / 去掉 overflow-hidden）。 narrow-verify（手动探针）新增读像素的能力与两条判据 —— 这件事只有像素能回答： computed radius 是 14px、角上 2px 处"谁在画"也指着面板本身，但渲染出来仍是方的（圆角加在没底色的层上，被内层直角原地盖掉）。所以这里截 1x1 再解 PNG，只用 zlib，不引图像库。方角=255,255,255 / 圆角=249,250,251，两个数字就能分辨。	2026-09-14 16:51:31 +08:00
JianFeeeee	76ce201c3a	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
JianFeeeee	f9d757b5e5	chore: directory migration - gateway→server, web→client/electron	2026-09-08 19:16:35 +08:00

Author

SHA1

Message

Date

JianFeeeee

6702cc2f5e

fix(webui): 窄屏日历/详情的圆角——圆角要给到「能裁剪的那一层」

用户（2026-09-14）：「我这边看还是方角」。上一轮我只修了宽屏那条分支，
窄屏（手机/平板，<1024px）当时仍然是方角 —— 这次按像素量到了。

## 实测（真浏览器读渲染像素，不是读声明）

390x844 日历页左上角：
  改前 (255,255,255) 纯白 → 方角；面板 computed radius = 0px
  改后 (249,250,251) 页面底色 → 圆角；上边缘内缩 8px

## 根因：圆角落在**裁不住东西**的那层上

窄屏走 NarrowStack（`list`+`main` 的覆盖式容器，日历与收件箱详情都用它）：

    .narrow-shell > *          ← 14px 加在这里（App.tsx 的 flex-1 min-h-0 flex）
      NarrowStack 根            ← overflow:hidden，但 radius 0px
        absolute inset-0 flex   ← 透明
          gridPane (bg-white)   ← 0px，直角原样露出来

`overflow: visible` 的透明 flex 容器拿到圆角 = 什么也没发生。
NarrowStack 的根节点是**唯一**同时具备「自己 overflow:hidden」与「包住有底色那一层」
的层，圆角必须加在它上面 —— 加给它，底层页与滑入的覆盖层就一起被裁到圆角里。

顺带修好一处同类问题：**收件箱详情在窄屏也是方角**（同一个容器），
以前没人报过，这次一起圆了（实测同上）。

## 判据

narrow-layout 新增 2 条，分开钉两件事（分开一条都不算修好）：
  ① 那层自己带上面板圆角（类名与 CSS 规则接得上）；
  ② 那一层同时具备裁剪能力（overflow:hidden）。
三组变异全部红在对的那条上（去掉类名 / 去掉 border-radius / 去掉 overflow-hidden）。

narrow-verify（手动探针）新增**读像素**的能力与两条判据 —— 这件事只有像素能回答：
computed radius 是 14px、角上 2px 处"谁在画"也指着面板本身，**但渲染出来仍是方的**
（圆角加在没底色的层上，被内层直角原地盖掉）。所以这里截 1x1 再解 PNG，
只用 zlib，不引图像库。方角=255,255,255 / 圆角=249,250,251，两个数字就能分辨。

2026-09-14 16:51:31 +08:00

JianFeeeee

76ce201c3a

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

JianFeeeee

f9d757b5e5

chore: directory migration - gateway→server, web→client/electron

2026-09-08 19:16:35 +08:00

3 Commits