跨端: 邮件正文/日历三处真 bug(可读性、居中对齐、日视图多余表头)
用户:「还有那邮件还是居中对齐,可读性也极差,而且还看起来根本不像邮件」
+「宽屏布局下日历的周视图日视图还是一塌糊涂」
+「你的图标变成输入框,图标变成邮件的动画呢?你能不能自己好好审计一下」
这轮**不再逐条打补丁**,改成先审计再改。下面每条都有实测数据。
## ① 邮件正文可读性:1.34:1 → 16.67:1
实测(深色,详情页正文):
文字 rgb(35,33,52) 压 底色 rgb(0,0,0) ⇒ **1.34:1**(完全不可读)
同屏只有行内代码(红色 span)看得见(5.02:1)
头部信息区更差:rgb(34,35,36) 压 rgb(32,33,35) = **1.02:1**
根因:`Markdown({ text: this.body })` —— **只传了文本,没传 `controller`**。
`@luvi/lv-markdown-in` 于是用它自己的默认样式,那套是给**浅色**配的
(实测 rgb(35,33,52) ≈ WebUI 浅色 `--c-gray-800` = `31 41 55`)。
⇒ 这是「**第三方组件不继承宿主主题**」那一类错:它不读 `$r('sys.color.*')`,
也不读 `AppStorage`,必须显式注入。新增 `mdController()`,
照 WebUI `.markdown`(`index.css:592-628`)逐条映射 17 个着色入口:
.markdown → Theme.textPrimary
.markdown a → Theme.accentFor()
.markdown blockquote → Theme.textMuted / Theme.border
.markdown code → Theme.surfaceMuted
★ 17 个 setter 名逐一比对过库的 `.d.ets`(防拼错静默失效)。
★ 不放在 `@State` 里:控制器是普通对象,ArkUI 不会因它内部变化而重渲染 ——
每次 `build()` 现取,主题一变就拿到新色(存一份反而**不会**刷新,正是本 bug 的形状)。
## ② 邮件「居中对齐」:ArkUI `Column` 默认就是居中
根因**不在那个 `Text`**,而在 **`Column` 的交叉轴默认对齐是
`HorizontalAlign.Center`** —— 官方《线性布局 (Row/Column)》原文:
「HorizontalAlign.Center(**默认值**):子元素在水平方向居中对齐」。
子元素没显式给宽时跟着内容宽居中 ⇒「回复给 …」那行浮在面板中间。
WebUI 是块级流、天然左对齐,所以"同样的代码"看起来不一样。
修:回复条/转发条两个 `Column` 显式 `.alignItems(HorizontalAlign.Start)`。
## ③ 日历:周/日视图「今天」的数字看不见(1.00:1)
实测(宽屏 3184、周视图第 1 列「21」):
字 rgb(254,254,254) 压 底 rgb(254,254,254) ⇒ **1.00:1**
根因:`cellFg()` **不看档位**,选中一律返回 `accentFg`(白)。
而两档的"选中底色"根本不是同一个东西:
· 月视图:整格铺**实心** `Theme.accent` ⇒ 白字对;
· 周/日视图:底色改由日期头承担,用的是**淡蓝** `accentSoftFor()` ⇒ 白字看不见。
⇒ 按档位分流:周/日档返回 `Theme.accent`(蓝字压淡蓝 ≈5.4:1)。
同一处的农历小字也一并改(同一个三目)。
## ④ 日历:日视图多画了一条无意义的星期表头
周表头 `Row` 在 `if (calScale === 'day')` **之前**渲染 ⇒ 日视图上方挂着
「一 二 三 四 五 六 日」,而一天只有一个日子,七个标签全落空。
WebUI 三种视图都不是这么做的:
· `MonthGrid` 表头在**自己内部**(`grid-cols-7` 第一行);
· `WeekGrid` 星期名在**每一列内部**(sticky);
· `DayGrid` **完全没有**星期行(顶上是日期+农历)。
⇒ 加 `if (this.calScale !== 'day')`。
## 诚实交代:我一度想当然,量了才发现不用改
我本来打算"修"周视图**表头与列对不齐**,理由是"表头均分可用宽、
网格列均分 minWidth(322) 的更大宽"。实测列中心 `[356,607,860,1114,1365,1621,1873]`
与表头中心基本吻合(偏差 ≤11px,在文字宽度内)—— **那是我推的,不是量的**。
先量再改,省掉一次"改坏对的东西"。
## 审计产出(供后续,不只是本次修)
· WebUI 全仓动画清单:5 个 `@keyframes`(`cal-in-next/prev`、`menu-in`、
`pane-in`、`rise-in`)+ 7 处 `transition` + 3 处 `element.animate()`(全是 FLIP morph)。
· 鸿蒙侧挂点计数:`animateTo` 9、`transition()` 12、`pageTransition` 3、
`geometryTransition` 4、`PressEffectModifier` 60。
· **`Motion.pageEnter` 是自己加的、零调用点**(`pageTransition` 走的是
三个页各自的 `pageTransition()`)⇒ 死代码,待清。
## 验证
✓ ①②③④ 全部在设备上取**像素/布局**验证(1.34→16.67、1.00→5.44、日视图表头消失)
✓ 编译通过、进程存活、无新 jscrash
✗ 未验证:动画本体(图标→输入框 morph)—— 220ms,而抓图往返 1.5-3s,
探针比被测对象慢一个数量级(同 `harmony-morph-unverified-middleframes`)