MailUI4Agents

jianf/MailUI4Agents

Fork 0

Commit Graph

Author	SHA1	Message	Date
JianFeeeee	d11e6df9a8	feat(webui): 日历翻页过渡动画（方向跟随手势/按钮）用户：「日历滑动页面为什么没有切换动画？」。 ## 做法 `shift()` 里记下方向（手势与"上一页/下一页"按钮都走这一个函数 ⇒ 方向只有一个来源），容器用 key + 声明的动画类： <div key={`${anchor.getTime()}-${scale}`} className={`flex-1 min-h-0 flex ${slideClass}`}> ## 为什么不是"命令式加类" 第一版用 `el.classList.add()`（与视图切换动画同一套写法），类根本没进 DOM。原因：切月时 `loading` 会把网格整块换成加载态、再换回来，命令式加上的类会被 React 的重渲染与那次重挂载抹掉。key 变化 ⇒ 新元素自带动画类出现 ⇒ 必然重放。 ## 顺带修掉一个守卫 bug `firstRender` 守卫原先只在 `el` 存在时才消费。挂载时 `loading=true` ⇒ 容器还没渲染 ⇒ 守卫一直留着 ⇒ 用户第一次真正翻页的动画被吞掉（实测：点第一下不动、第二下才动）。现在无条件消费。 ## 判据 `test/manual/calendar-swipe-verify.mjs` 增加三条（与滑动手势同一条线索）：反向对照"刚进页面不跑动画"（animationName=none）、翻页时 `cal-slide-next` + `cal-in-next` 且时长 >0、反向翻页是 `cal-slide-prev`（方向正确性）。实测：静止 none → 点下一页 `cal-slide-next`/`cal-in-next` 0.2s → 上一页 `cal-slide-prev`/`cal-in-prev`。	2026-09-14 11:27:37 +08:00
JianFeeeee	0a4b98144c	feat(webui): 通信二级页签与列表头一体 + 沉浸式（PWA 全屏）+ 日历滑动验收脚本用户三条（同一线索）：「通信页面的二级页面与其他位置极其割裂」、「不支持沉浸式网页」、「日历页面还不支持左右滑动手势」。 ## ① 二级页签不再割裂页签原先是带 shadow 的白色胶囊浮在面板上，看起来像硬贴上去的另一套控件。改成下划线页签：与列表头同一内边距、同一条下边框，选中态用蓝色下划线 + `-mb-px` 压住分隔线（否则会出现"两条线"的接缝）。 ## ② 沉浸式根因不是 viewport（`viewport-fit=cover` 早就有了，安全区也接了 `env(safe-area-inset-)`），而是没有 Web App Manifest：手机上"添加到主屏幕"后打开仍然是带地址栏的网页。现在加了 `manifest.webmanifest`（`display: standalone`） + iOS 的 `apple-mobile-web-app-capable` / `black-translucent`（状态栏内容叠在页面上）。 manifest 放在根路径而不是 /assets/ 下：它里面的 `start_url`/`scope` 是相对 manifest 自己的 URL 解析的，挂在 /assets/ 下就得写 "../"。静态只挂了 `/` 与 `/assets/`，所以显式加了一条路由（并从 embed 读，而不是读磁盘 —— 前端产物必须与应用同源同版本）。图标由项目唯一图标源生成 192/512（尺寸与声明一致，我用 struct 读文件头核对过）。实测：`/manifest.webmanifest` → HTTP 200 `application/manifest+json`。 ## ③ 日历滑动：补上真正的验收脚本 `test/manual/calendar-swipe-verify.mjs` 四条，含反向对照（纵向拖动不得翻页）与前置断言。写它时又踩了一次自己的坑：标题真实格式是「2026 年 9 月」（数字与"年月" 之间有空格），我第一版正则按无空格写 ⇒ 匹配不到 ⇒ 三个值全是 null，看起来像"滑动没生效"，其实是探针瞎了。所以脚本里第一条就是"标题读得到"。实测：9 月 →左滑→ 10 月 →右滑→ 9 月，纵向拖动不动。 ## 顺带把我为验收造的测试数据归档（不是删除）：10 个 `/tmp/scrollprobe-*` 独立会话 + 12 封"滚动验收/窄屏验收样例"邮件。	2026-09-14 11:07:03 +08:00

Author

SHA1

Message

Date

JianFeeeee

d11e6df9a8

feat(webui): 日历翻页过渡动画（方向跟随手势/按钮）

用户：「日历滑动页面为什么没有切换动画？」。

## 做法

`shift()` 里记下方向（手势与"上一页/下一页"按钮**都走这一个函数** ⇒ 方向只有一个来源），
容器用 **key + 声明的动画类**：

    <div key={`${anchor.getTime()}-${scale}`} className={`flex-1 min-h-0 flex ${slideClass}`}>

## 为什么不是"命令式加类"

第一版用 `el.classList.add()`（与视图切换动画同一套写法），**类根本没进 DOM**。
原因：切月时 `loading` 会把网格整块换成加载态、再换回来，命令式加上的类会被
React 的重渲染与那次重挂载抹掉。key 变化 ⇒ 新元素自带动画类出现 ⇒ 必然重放。

## 顺带修掉一个守卫 bug

`firstRender` 守卫原先只在 `el` 存在时才消费。挂载时 `loading=true` ⇒ 容器还没渲染
⇒ 守卫一直留着 ⇒ **用户第一次真正翻页的动画被吞掉**（实测：点第一下不动、第二下才动）。
现在无条件消费。

## 判据

`test/manual/calendar-swipe-verify.mjs` 增加三条（与滑动手势同一条线索）：
反向对照"刚进页面不跑动画"（animationName=none）、翻页时 `cal-slide-next` +
`cal-in-next` 且时长 >0、反向翻页是 `cal-slide-prev`（方向正确性）。
**实测**：静止 none → 点下一页 `cal-slide-next`/`cal-in-next` 0.2s → 上一页 `cal-slide-prev`/`cal-in-prev`。

2026-09-14 11:27:37 +08:00

JianFeeeee

0a4b98144c

feat(webui): 通信二级页签与列表头一体 + 沉浸式（PWA 全屏）+ 日历滑动验收脚本

用户三条（同一线索）：「通信页面的二级页面与其他位置极其割裂」、
「不支持沉浸式网页」、「日历页面还不支持左右滑动手势」。

## ① 二级页签不再割裂

页签原先是**带 shadow 的白色胶囊**浮在面板上，看起来像硬贴上去的另一套控件。
改成**下划线页签**：与列表头同一内边距、同一条下边框，选中态用蓝色下划线 +
`-mb-px` 压住分隔线（否则会出现"两条线"的接缝）。

## ② 沉浸式

根因不是 viewport（`viewport-fit=cover` 早就有了，安全区也接了
`env(safe-area-inset-*)`），而是**没有 Web App Manifest**：手机上"添加到主屏幕"后
打开仍然是带地址栏的网页。现在加了 `manifest.webmanifest`（`display: standalone`）
+ iOS 的 `apple-mobile-web-app-capable` / `black-translucent`（状态栏内容叠在页面上）。

manifest 放在**根路径**而不是 /assets/ 下：它里面的 `start_url`/`scope` 是相对
manifest 自己的 URL 解析的，挂在 /assets/ 下就得写 "../"。静态只挂了 `/` 与 `/assets/*`，
所以显式加了一条路由（并从 embed 读，而不是读磁盘 —— 前端产物必须与应用同源同版本）。
图标由项目唯一图标源生成 192/512（尺寸与声明一致，我用 struct 读文件头核对过）。

**实测**：`/manifest.webmanifest` → HTTP 200 `application/manifest+json`。

## ③ 日历滑动：补上真正的验收脚本

`test/manual/calendar-swipe-verify.mjs` 四条，含**反向对照**（纵向拖动不得翻页）
与前置断言。写它时又踩了一次自己的坑：标题真实格式是「2026 年 9 月」（数字与"年月"
之间有空格），我第一版正则按无空格写 ⇒ 匹配不到 ⇒ 三个值全是 null，
**看起来像"滑动没生效"，其实是探针瞎了**。所以脚本里第一条就是"标题读得到"。

实测：9 月 →左滑→ 10 月 →右滑→ 9 月，纵向拖动不动。

## 顺带

把我为验收造的测试数据**归档**（不是删除）：10 个 `/tmp/scrollprobe-*` 独立会话 +
12 封"滚动验收/窄屏验收样例"邮件。

2026-09-14 11:07:03 +08:00

2 Commits