跨端: 写信 FAB → 写信页共享元素转场 + morph 收成单一入口（判据两版错法都记了）

用户 2026-09-21：「webui 行为是按钮变成对应的写邮件页面或输入框吧，你做的啥？」「都做啊」—— 两处 morph 现在都在了。 ## ① 写信 FAB → 写信页（跨 NavDestination）官方 FAQ `faqs-arkui-991` 给的正是"在 NavDestination 子页面里做共享元素转场" 的完整步骤，逐步照做： · 两端绑同一 id `compose-morph`（FAB / ComposeDestination 的 NavDestination）； · **`pushPath` 放进 `animateTo` 闭包**（FAQ 步骤 3 原文就是这个形状）； · `follow: false`（两端互斥出现，不是"始终在树上跟随"）。 ## ② 把 morph 收成**单一入口** `Motion.morph(ui, mutate)` 这一步不是为了少写代码，是为了**让判据能判**。过程值得记： **第一版判据** —— 全仓 `any()`： /animateTo\(/.test(allHarmony) && /durMorph/.test(allHarmony) && … 变异实测（把 morph 那处的 `animateTo` 改名、把 `Theme.durMorph` 就地写 `220`） **三条全绿** —— 因为全仓**别处**还有这些名字，"删掉这一处"永远命中不了。 **第二版判据** —— 逐站点取"文本邻域"看有没有 animateTo： **全假红**。因为 `geometryTransition(id)` 绑在**组件树**上，而 `animateTo` 写在**另一个方法**里，文本邻域取不到隔壁的方法。 ⇒ 结论不是"把判据写得更聪明"，而是**把结构改成可判的**：把"带 morph 的状态切换"收进 `Motion.morph(ui, mutate)` 一处（`animateTo` + 时长 + 曲线都在里面），调用点只剩「我要改哪个状态」。这与本仓既有解法同型（`PressEffectModifier` / `GlassCardModifier`：把"每处都得记得写"收敛成"一处定义、处处引用"）。 3 个调用点已全部改走它（`MainPage.openComposeWithMorph`、 `MailDetailPage.openReplyWithMorph` / `closeReplyWithMorph`）。 ★ `Motion.morph` 必须收 `UIContext`：全局 `animateTo` **已废弃** （编译器告警 `'animateTo' has been deprecated`），而静态方法里拿不到 `this.getUIContext()`（本仓纪律：静态方法里不用 `this`）。 ## 判据：6 条，三条变异逐个验过通过每个 id 恰好绑两处（一 in 一 out）［变异：删一端 → 红 ✓］通过 morph 只有一个入口且内部有 animateTo ［变异：换成普通调用 → 红 ✓］通过用 ui.animateTo 而非废弃的全局 animateTo 通过每个用 geometryTransition 的文件都走 helper ［变异：自己写 animateTo → 红 ✓］通过页面里不再直接出现 Theme.durMorph 通过 Theme.durMorph 存在且 = 220 ［变异：改成 450 → 红 ✓］ ★ 期间还抓到一个**判据自己的 bug**：我重写那一段时把 `themeSrc` 的定义一起删了 ⇒ 第 6 条抛 `ReferenceError`、**整条判据根本没跑** （而其余 9 条照常打印"通过"，退出码 1 但没人看得到那条）。这与"守具有齿但不在位"同形：**判据崩了不会显示成失败**。已补回定义并重跑确认。计数棘轮 4 → 10（显式编辑，理由写在 `run-all.mjs` 里）。 ## 设备验证 ✓ 点 FAB → 写信页到场、取消 → 回列表，进程存活（17827），无新 jscrash （`faultlogger` 里最新仍是 15:08 那条，即修复前的） ✗ 220ms 的**中间帧**仍看不到（`snapshot_display` 往返 1.5-3s 慢一个数量级）—— 与上一条提交同样的诚实交代：动画本体只能由用户在真机上看
2026-09-21 15:50:00 +08:00
parent ba16230a63
commit 2f80e1102d
5 changed files with 228 additions and 11 deletions
--- a/client/electron/test/animation-audit.test.mjs
+++ b/client/electron/test/animation-audit.test.mjs
@ -23,12 +23,20 @@
 *   4. 挂载即播那档（.rise-in）必须被 prefers-reduced-motion 显式关掉。
 */
 import { readdirSync } from 'node:fs';
-import { join } from 'node:path';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { check, finish } from './lib/checks.mjs';
 import { code, PKG } from './lib/read.mjs';

 // 判"规则/代码里有没有这个东西"一律走剥注释版（code）：解释性注释里会原样引用被禁的写法，
 // 读原文会把它当成"还在用"（criteria-hygiene 就是这么抓到本文件第一版裸用 readFileSync 的）。
+/*
+ * 仓库根 —— 鸿蒙侧那几个路径要从仓库根算。
+ * 本文件原先只读 WebUI 的 CSS（相对 `PKG` 就够），所以没有 ROOT；
+ * 加鸿蒙那四条之后需要它。`PKG` 仍用于 WebUI（它自带正确基准）。
+ */
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..', '..', '..');
+
 const css = code('src/index.css');

 /** 组件源码全文：判"这个类有没有人穿"必须看代码，不是看我们的记忆 */
@ -116,4 +124,124 @@ check(
  'prefers-reduced-motion 覆盖不到 .rise-in —— 关掉动画的人照样会看到它'
 );

+
+/*
+ * ══════════════════════════════════════════════════════════════════════
+ * 鸿蒙侧：**共享元素转场**（`geometryTransition`）的接线
+ * ══════════════════════════════════════════════════════════════════════
+ *
+ * 用户 2026-09-21：「我记得 webui 行为是按钮变成对应的写邮件页面或输入框吧，
+ * 你做的啥？」—— WebUI `ComposePage.tsx:57-79` 的 FLIP 就是"球长成面板"，
+ * 鸿蒙侧的对应能力是 `geometryTransition`。
+ *
+ * 它有三种**静默失效**的写法（都只会表现为"动画没播"，不报错）：
+ *   ① 只绑一端 —— 没有 in/out 配对，系统无处可插值；
+ *   ② 只绑 `geometryTransition` 却**没有 `animateTo`** ——
+ *      官方原文：「**必须配合 animateTo 使用**才有动画效果，
+ *      动效时长、曲线跟随 animateTo 中的配置，**不支持 animation 动画**」；
+ *   ③ 同一个 id 绑了**三个以上**组件 —— 官方原文：
+ *      「同一个 id 只能有**两个**组件绑定…**不能多个组件绑定同一个 id**」。
+ *
+ * 判据就钉这三条。它们全是"接线"性质，与时长/曲线无关（那两样由人看着定）——
+ * 与本文件既有四条的分寸一致（`harmony-nav` 那份注释里写过同一条理由）。
+ */
+const HARMONY_PAGES = join(ROOT, 'client/harmony/entry/src/main/ets/pages');
+function harmonySources() {
+  const out = [];
+  for (const e of readdirSync(HARMONY_PAGES, { withFileTypes: true })) {
+    if (e.isFile() && e.name.endsWith('.ets')) out.push({ name: e.name, src: code(join(HARMONY_PAGES, e.name)) });
+  }
+  return out;
+}
+const hs = harmonySources();
+const allHarmony = hs.map(h => h.src).join('\n');
+
+/* 每个 id（按文件统计，因为 id 是**字符串**，跨文件同名是合法但危险的） */
+const geomIds = new Map();      // id -> [file, ...]
+for (const h of hs) {
+  for (const m of h.src.matchAll(/geometryTransition\(\s*'([^']+)'/g)) {
+    const id = m[1];
+    if (!geomIds.has(id)) geomIds.set(id, []);
+    geomIds.get(id).push(h.name);
+  }
+}
+
+check(
+  '鸿蒙｜共享元素转场的每个 id 恰好绑**两处**（一 in 一 out）',
+  [...geomIds.values()].every(v => v.length === 2),
+  '官方约束：「同一个 id 只能有两个组件绑定，且分别作为 in（新视图）和 out（旧视图）' +
+  '两种不同类型角色，不能多个组件绑定同一个 id」；实际：' +
+  [...geomIds.entries()].map(([k, v]) => `${k}→${v.length}处(${v.join(',')})`).join(' ')
+);
+
+/*
+ * ★★ 这三条**第一版写错了**，记在这里以免重蹈（变异实测发现的）。
+ *
+ * 第一版是全仓 `any()`：
+ *     /animateTo\(/.test(allHarmony)   /durMorph/.test(allHarmony)   /easeRise/…
+ * 变异实测（把 morph 那处的 `animateTo` 改名、把 `Theme.durMorph` 就地写 `220`）
+ * ——**三条全绿**。因为全仓**别处**还有这些名字，所以"删掉这一处"永远命中不了。
+ *
+ * 第二版改成"逐站点看邻域"，又**假红**：`geometryTransition(id)` 绑在
+ * **组件树**上，而 `animateTo` 写在**另一个方法**里 —— 文本邻域取不到隔壁的方法。
+ *
+ * ⇒ 结论不是"把判据写得更聪明"，而是**把结构改成可判的**：
+ *   把"带 morph 的状态切换"收进 `Motion.morph(ui, mutate)` 一处
+ *   （`animateTo` + 时长 + 曲线都在里面），调用点只剩"我要改哪个状态"。
+ *   这与本仓既有解法同型（`PressEffectModifier` / `GlassCardModifier`：
+ *   把"每处都得记得写"收敛成"一处定义、处处引用"）。
+ *
+ * 现在判据钉的就是**这个结构**，逐条都能被变异打红：
+ */
+
+const MOTION = code(join(ROOT, 'client/harmony/entry/src/main/ets/common/Motion.ets'));
+const themeSrc = code(join(ROOT, 'client/harmony/entry/src/main/ets/common/Theme.ets'));
+
+check(
+  '鸿蒙｜morph 只有**一个**入口且它内部有 animateTo（时长/曲线同处）',
+  /static morph\(ui: UIContext, mutate: \(\) => void\): void \{/.test(MOTION) &&
+    /ui\.animateTo\(/.test(MOTION) &&
+    /duration:\s*Motion\.dur\(Theme\.durMorph\)/.test(MOTION) &&
+    /curve:\s*Theme\.easeRise/.test(MOTION),
+  '`Motion.morph` 的形状变了（少了 animateTo / 时长令牌 / 曲线）—— ' +
+  '官方：「必须配合 animateTo 使用才有动画效果，时长与曲线跟随 animateTo 的配置」；' +
+  '三者必须在**同一处**，散开就必然有人漏'
+);
+
+check(
+  '鸿蒙｜morph 用 ui.animateTo 而非已废弃的全局 animateTo',
+  !/(^|[^.\w])animateTo\(/.test(MOTION.replace(/ui\.animateTo\(/g, '')),
+  '全局 `animateTo` 已废弃（编译器告警 "has been deprecated"）—— ' +
+  '静态方法里拿不到 this.getUIContext()，所以由调用方把 UIContext 传进来'
+);
+
+/* 每一个绑了 geometryTransition 的组件，它**同一文件**里必须有 Motion.morph 调用 */
+const geomFiles = new Set();
+for (const h of hs) {
+  if (/geometryTransition\(/.test(h.src)) geomFiles.add(h.name);
+}
+const filesUsingHelper = new Set();
+for (const h of hs) {
+  if (/Motion\.morph\(/.test(h.src)) filesUsingHelper.add(h.name);
+}
+const missing = [...geomFiles].filter(f => !filesUsingHelper.has(f));
+check(
+  '鸿蒙｜每个用到 geometryTransition 的文件都走 Motion.morph（不是自己 animateTo）',
+  missing.length === 0,
+  '这些文件绑了共享元素转场却没用统一入口：' + missing.join(' ') +
+  '（自己写 animateTo 就会漏掉"时长/曲线/reduced-motion 折 0"三件里的一件）'
+);
+
+check(
+  '鸿蒙｜页面里不再直接出现 Theme.durMorph（它只属于 Motion.morph）',
+  !/Theme\.durMorph/.test(hs.map(h => h.src).join('\n')),
+  '`Theme.durMorph` 出现在页面里 = 又有人绕开 `Motion.morph` 自己写动画参数了'
+);
+
+check(
+  '鸿蒙｜Theme.durMorph 确实存在且 = 220（WebUI FLIP 的原值）',
+  /static readonly durMorph: number = 220/.test(themeSrc),
+  'durMorph 不见了或被改成别的数 —— 上面几条会因为"引了一个不存在的名字"而失去意义'
+);
+
 finish('动画盘点');
--- a/client/electron/test/run-all.mjs
+++ b/client/electron/test/run-all.mjs
@ -63,7 +63,12 @@ const SUITE = [
  ['test/markdown-xss.test.mjs', [], 9],
  ['test/narrow-layout.test.mjs', [], 88],
  ['test/nav-merge.test.mjs', [], 9],
-  ['test/animation-audit.test.mjs', [], 4],  // 动画全量盘点：死动画/过宽作用域/弹层接线/reduced-motion
+  /*
+   * 4 → 10（显式编辑）。新增 6 条是**鸿蒙侧共享元素转场**（geometryTransition）
+   * 的接线判据 —— 用户「webui 行为是按钮变成对应的写邮件页面或输入框吧」。
+   * 详细理由见该文件里那段「这三条第一版写错了」的注释（两版错法都记了）。
+   */
+  ['test/animation-audit.test.mjs', [], 10],  // 动画全量盘点：死动画/过宽作用域/弹层接线/reduced-motion
  // 深色模式：色板反转 + 玻璃 alpha 档 + 底必须是暗的（2026-09-17 那次
  // 「只有通信页深色正常」的回归锁 —— 38 条里后 8 条是这次新增）。
  ['test/theme.test.mjs', [], 38],