From d10c641e411ee0f97dd37229c1f1fdca349c6625 Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Sun, 20 Sep 2026 12:12:08 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B7=A8=E7=AB=AF:=20=E8=B4=A6=E5=8F=B7?= =?UTF-8?q?=E5=BE=BD=E6=A0=87=E5=AF=B9=E9=BD=90=20WebUI=EF=BC=88=E4=B8=AD?= =?UTF-8?q?=E6=80=A7=E7=81=B0=E8=83=B6=E5=9B=8A=20+=2080px=20=E6=88=AA?= =?UTF-8?q?=E6=96=AD=EF=BC=8C=E5=8E=9F=E6=9D=A5=E6=98=AF=E8=A2=AB=E6=9F=93?= =?UTF-8?q?=E6=88=90=E5=93=81=E7=89=8C=E8=93=9D=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「你自己看看跟 webui 相比，观感真的差很多」。逐字段对比卡片后找到这一处。 WebUI（`MailList.tsx:303-310`）： className="text-[10px] leading-4 px-1.5 rounded-full bg-gray-100 text-gray-600 shrink-0 max-w-[80px] truncate" 我们原来： .fontColor(Theme.accentFor()) .backgroundColor(Theme.accentSoftFor(this.isDarkNow)).borderRadius(4) （没有 maxWidth） **三处都不一样**： · 底色/字色：品牌浅蓝 + 品牌蓝 vs **中性灰**。徽标表达的是"这条来自哪个账号"， 是**中性的元信息**，不该与主操作抢注意力 —— WebUI 选 gray-100 正是这个意思。 我们把品牌色用在元信息上，等于把每一行的副标题都标成了"主操作"。 · 形状：圆角方(4) vs 全圆胶囊(rounded-full) · 截断：原来没有 `maxWidth` —— 账号名一长就把主题挤没了（WebUI 有 `max-w-[80px]`， 而多账号正是这个徽标存在的场景，名字长是常态）。 措辞上保持"用户看到什么"这个层次：这条判的是**渲染结果**， 不是"有没有这个字段"（两端字段集本来就是一致的）。 --- .../entry/src/main/ets/pages/MainPage.ets | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/client/harmony/entry/src/main/ets/pages/MainPage.ets b/client/harmony/entry/src/main/ets/pages/MainPage.ets index f28da46..ff8c9f6 100644 --- a/client/harmony/entry/src/main/ets/pages/MainPage.ets +++ b/client/harmony/entry/src/main/ets/pages/MainPage.ets @@ -688,10 +688,28 @@ struct InboxTab { Row() { Text(mail.from_name).fontSize(14).fontWeight(mail.status === 'unread' ? FontWeight.Bold : FontWeight.Normal).fontColor(Theme.textPrimary) if (this.accountFilter === 'all' && mail.source_account_name.length > 0) { + /* + * 账号徽标（聚合模式下才显示）—— **逐项对齐 WebUI**（`MailList.tsx:303-310`）： + * + * className="text-[10px] leading-4 px-1.5 rounded-full + * bg-gray-100 text-gray-600 shrink-0 max-w-[80px] truncate" + * + * 即：**中性灰底 + 灰字 + 全圆胶囊 + 最多 80px 截断**。 + * + * ★ 原来写的是 `accentSoftFor`（品牌浅蓝底）+ `accentFor`（品牌蓝字） + * + `borderRadius(4)`（圆角方）。三处都不一样： + * · 底色：品牌浅蓝 vs 中性灰 —— 徽标被染成了"我们家的"颜色， + * 而它表达的是"这条来自哪个账号"，是**中性的元信息**， + * 不该与主操作抢注意力（WebUI 选 gray-100 就是这个意思）； + * · 形状：圆角方 vs 全圆胶囊； + * · 截断：原来没有 maxWidth —— 账号名一长就把主题挤没了。 + */ Text(mail.source_account_name) - .fontSize(10).fontColor(Theme.accentFor()) - .backgroundColor(Theme.accentSoftFor(this.isDarkNow)).borderRadius(4) - .padding({ left: 5, right: 5, top: 1, bottom: 1 }) + .fontSize(10).fontColor(Theme.textMuted) + .backgroundColor(Theme.surfaceMuted).borderRadius(8) + .padding({ left: 6, right: 6, top: 1, bottom: 1 }) + .constraintSize({ maxWidth: 80 }) + .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }) .margin({ left: 6 }) } Blank()