跨端: 补「当前选中邮件」高亮 —— 鸿蒙原来完全没有这个概念
用户:「你自己看看跟 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:
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 按当前主题给品牌浅底。
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user