JianFeeeee
6f1b4352cd
用户：「点击回复按键与新建邮件部分的动画与 webui 不一致，动画不符合鸿蒙视觉
要求」。两个问题是分开的：结构是覆盖式弹层 vs WebUI 的内联底栏；动画则是我
单方面发明的不对称过渡 + 150ms 低于鸿蒙规范下限。
## 结构：覆盖式弹层 → 底部内联条（回复 / 转发）
WebUI `MailView.tsx:410/1057` 的 `ReplyBar`/`ForwardBar` 是 `border-t` 分出的
**内联底栏**，与正文并列（正文 `flex-1 overflow-y-auto` 保持可见可滚），高度由
内容决定。我们原先是整屏遮罩 + `height('60%')` + `position({x:0,y:0})`。
三条用户可感知的差异：弹层盖住正文（写回复时看不到原文）／固定 60% 高（写一行
也占半屏）／遮罩整屏变暗。结构不用动外层 —— 原版那两处本来就是正文 Stack 的
**兄弟**（同在 `Column` 里 ⇒ 本来竖直排列），错只错在给条加了遮罩/定高/绝对定位。
## 动画
① `paneRiseIn()` / `calendarSlide()` 去 `asymmetric`，改**对称**。
WebUI 是 `animation: rise-in 150ms … both` —— `both` 就是进出同一条关键帧。
我原先让出场只做 `opacity` 且更短（120ms），"出现时浮上来、消失时只淡出"，
正是"与 webui 不一致"的来源。当初写不对称的理由（换窗格时两层同时半透明会
"闪"）只对**换窗格**成立，对回复框/转发条不成立 —— 我把两种场景混用了。
② `durRise` 150 → **200ms**（用户选定"折中"）。WebUI 是 150（web 常规档），
鸿蒙官方「元素淡入/位移进入」建议 **200-300ms**，150 比下限还低 25%。
## 照文档纠正三处误判（本轮的真正收获）
我为了搞清"为什么动画不播"，先后编出过三个错误理论，读文档后逐条推翻：
① **不是 "NavDestination 吃掉子组件的 `.transition()`"**。
实测：`ComposeView` 根上的 `.transition()` 一直在播。我之所以连测七八轮都报
"没有中间帧"，是因为**拿平均亮度当探针** —— 白底窗格 50% 透明叠在浅色背景上
平均亮度几乎不变。换成**位移**探针后，立刻看到"整栏下移 300vp 且半透明"的
中间帧。教训：**探针对被测变化不敏感时，量的是噪声**。
② **不 `customTransition` 也能做**。`NavDestination` 确实有 `customTransition`
(API 15+)，但它是**整页转场**，我们要的只是内容块的一次上浮淡入。
（顺带记一条：`NavDestinationTransition.curve` 的类型是枚举 `Curve`，
不收 `ICurve` —— 试过用 `curves.cubicBezierCurve` 会编译报错。）
③ **`.opacity()` 在 `NavDestination` 上是生效的**。先前判定"不生效"同样是那个
废探针害的；换 `opacity(0)` 二元判定后整页消失，证明它一直生效。
## 连带修一个真 bug（判据抓的）
回复/转发改成内联后**失去了"弹层有固定高度"这层键盘保护** —— 官方默认
`KeyboardAvoidMode.OFFSET`（整页上移）会把贴底的「取消/发送/转发」顶出屏幕。
在 `EntryAbility` 里显式设 `RESIZE`（按剩余高度重排）。坑：`@kit.ArkUI` 与全局
作用域各有一个同名 `KeyboardAvoidMode`，**只有前者有 `RESIZE`**。
## 判据（4 条红全部结算，逐条说明为什么不是放宽）
· `harmony-nav` durRise：从"逐字等于 150"改为**区间 200-300**（钉住用户裁定，
退回 150 与写 800 都红，已变异验证）。
· `harmony-nav` asymmetric：**反转**为"不得 asymmetric"（旧断言把上一版设计锁住，
而 WebUI 本来就是对称的）。
· `harmony-admin` 弹层高度：原断言数的形状只属于废弃的覆盖式弹层 → 改为
**新结构下的等价不变式**（键盘避让必须 RESIZE）。这条判据当年抓的是真 bug，
该 bug 换了形态仍在，所以不能简单删。
· `cross-client-theme`：删掉我中途废弃留下的孤儿令牌 `riseCurveEnum`。
新增 4 条变异条目（全部 `红✓`）；`mutants=52 ran=52 skipped=0`。
`files=33 checks=530 pass=530 fail=0`，`baseline=7/7✓`。
设备已验：回复/转发确为内联底栏（正文可见、`border-t` 分隔）。
51 lines
2.5 KiB
JSON
51 lines
2.5 KiB
JSON
[
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/pages/MainPage.ets",
|
||
"pat": "\\.backgroundBlurStyle\\(Theme\\.navMaterial\\)",
|
||
"repl": ".backgroundBlurStyle(BlurStyle.COMPONENT_THIN)",
|
||
"test": "nav",
|
||
"why": "★ 导航条绕过 Theme.navMaterial 写死档位（判据该红）"
|
||
},
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/pages/MainPage.ets",
|
||
"pat": "\\.backgroundBlurStyle\\(Theme\\.navMaterial\\)",
|
||
"repl": ".backgroundBlurStyle(NAV_MATERIAL[this.bgPlan.blurPx])",
|
||
"test": "nav",
|
||
"why": "★ 导航条又开始跟随 bg_blur（方案 (b) 复发，判据该红）"
|
||
},
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/common/Theme.ets",
|
||
"pat": "static readonly navMaterial: BlurStyle = BlurStyle\\.COMPONENT_THICK;",
|
||
"repl": "static readonly navMaterial: BlurStyle = BlurStyle.NONE;",
|
||
"test": "nav",
|
||
"why": "★ navMaterial 变成 NONE（导航条没有材质，判据该红）"
|
||
},
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/common/Theme.ets",
|
||
"pat": "static readonly durRise: number = 200;",
|
||
"repl": "static readonly durRise: number = 150;",
|
||
"test": "nav",
|
||
"why": "★ 入场时长退回 150ms（低于鸿蒙官方 200-300 建议下限，判据该红）"
|
||
},
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/common/Theme.ets",
|
||
"pat": "static readonly durRise: number = 200;",
|
||
"repl": "static readonly durRise: number = 800;",
|
||
"test": "nav",
|
||
"why": "★ 入场时长写到区间外（800ms 拖沓，判据该红）"
|
||
},
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/common/Theme.ets",
|
||
"pat": " return TransitionEffect\\.opacity\\(0\\)\\.combine\\(\\n TransitionEffect\\.translate\\(\\{ y: Theme\\.riseInOffset \\}\\)\\n \\)\\.animation\\(\\{ duration: Motion\\.dur\\(Theme\\.durRise\\), curve: Theme\\.easeRise \\}\\);",
|
||
"repl": " return TransitionEffect.asymmetric(TransitionEffect.opacity(0).combine(TransitionEffect.translate({ y: Theme.riseInOffset })).animation({ duration: Motion.dur(Theme.durRise), curve: Theme.easeRise }), 0, 0, 0, 0);",
|
||
"test": "nav",
|
||
"why": "★ paneRiseIn 改回 asymmetric（与 WebUI 的 both 不一致，判据该红）"
|
||
},
|
||
{
|
||
"file": "client/harmony/entry/src/main/ets/entryability/EntryAbility.ets",
|
||
"pat": "setKeyboardAvoidMode\\(KeyboardAvoidMode\\.RESIZE\\)",
|
||
"repl": "setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET)",
|
||
"test": "admin",
|
||
"why": "★ 键盘避让退回 OFFSET（内联底栏的按钮会被顶出屏幕，判据该红）"
|
||
}
|
||
] |