跨端: 补「当前选中邮件」高亮 —— 鸿蒙原来完全没有这个概念

用户:「你自己看看跟 webui 相比,观感真的差很多」。逐项比对后找到的**行为缺口**
(不是配色问题,是少了一个状态)。

WebUI 一直有:`MailList.tsx:104/116/229` 把 `currentMail?.mail_id` 传进卡片,
卡片据此上 `active ? 'bg-blue-50 border-blue-200'`。
鸿蒙**一个都没有** —— 点开一封邮件后,左侧列表那一行和旁边几行长得一模一样:
你不知道自己正在读哪一封、读完了该往哪回。

修法:
· `CommPage` 拥有 `@State currentMailId`,`openMail()` 里记下,以 `@Prop` 下发给
  `InboxTab`/`SentTab`。**单点写、多点读** —— 两个 tab 各存一份必然会分叉
  (收件箱和发件箱都能触发同一个动作)。
· 存 `mail_id` 而非索引/组键:SSE 会让列表重排,索引会错位。
· 三级优先 **选中 > 未读 > 普通**。★ 这里有个必须成对的理由:
  选中与未读底色**相同**(都是 `accentSoft`),只靠底色的话
  "选中一封未读邮件"看不出任何变化 ⇒ 选中必须额外加那圈边。
  这正是 WebUI 两个 token 并存的原因,不是随手加的边框。
· 新增 `Theme.accentEdge/accentEdgeDark/accentEdgeFor()`(= tailwind blue-200
  及其深色值)——我第一版只搬了底、忘了边,选中态淡到几乎看不见。

★ 顺带记一个工具坑:`devecocli ui tap` 在这台模拟器上**点了不生效**
(截图前后一样、布局树无变化),而 `hdc shell "uitest uiInput click X Y"`
有效。以后点不动就先换这条,别以为是代码没生效 —— 我为此白跑了两轮。
This commit is contained in:
2026-09-20 12:24:17 +08:00
parent d10c641e41
commit 44e277e0b6
2 changed files with 83 additions and 2 deletions

View File

@ -464,6 +464,26 @@ export class Theme {
*/
static readonly accentSoftDark: string = '#1C2536';
/**
* 品牌浅底的**边框**(与 WebUI 的 `border-blue-200` 成对)。
*
* ★★ 2026-09-20 补。WebUI 的"选中"是**底 + 边**两个 token 一起用
* (`MailList.tsx:280`:`active ? 'bg-blue-50 border-blue-200'`):
* · 底 `#EFF6FF` = 我们的 `accentSoft`
* · 边 `#BFDBFE` = 这一条
* 我第一版只搬了底、忘了边 ⇒ 选中态只有一层很淡的蓝,
* 在浅色壁纸上几乎看不出来(实测对比 WebUI 明显更弱)。
*
* 深色取值对齐 WebUI `.dark` 段的 `--c-blue-200`。
*/
static readonly accentEdge: string = '#BFDBFE';
static readonly accentEdgeDark: string = '#2B3B57';
/** 按当前主题给品牌浅底的边框(与 `accentSoftFor` 同一纪律)。 */
static accentEdgeFor(dark?: boolean): string {
return Theme.isDarkNow(dark) ? Theme.accentEdgeDark : Theme.accentEdge;
}
/**
* 按当前主题给品牌浅底。
*