jianf/MailUI4Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

鸿蒙｜图标 fill 型分族 + 页签条阴影根因修复 + 生成器入库

Browse Source 
用户逐条报的观感问题（都在"视觉观感"那一栏，不是功能缺失）：

① 侧边栏图标"莫名其妙的加粗"
   根因：43 个图标里**只有品牌标 `brandMark` 是 fill 型**
   （`fill="currentColor"` + 两个实心 `<circle r=".9">`），
   它自己的注释就写着「fill 型，与上面的描边图标集**不同族**，所以不包 Svg」。
   而 `AmIcon` 一律 `fill(Transparent) + stroke()` ⇒ 实心块只剩轮廓、
   实心眼变成小圆环、圆头端点在小尺寸下糊成一坨。
   修法：生成器自动判定两族（`is_fill_family`），产出 `FILL_ICONS` 名单，
   fill 族整块填色、不加描边。

② 详情页权限面板"左边被截断"
   `PermissionPanel` 挂在详情页外层，根部只有 `padding({top:10})` ——
   而正文 `Markdown` 与附件块**各自自带** `left/right:16`。补上同档 16。

③ 顶栏"莫名其妙的底部阴影"
   ★ 这条查错了两轮，记下来：
   · 先以为是窗格投影从半透明玻璃透上来 → 补底边、去材质 —— 都没用；
   · 几何取证才定位真因：`InboxTab` 根容器与页签条是 `Column` 里的**兄弟**
     且**绘制在后**（页签条 y 142→271，InboxTab y 271→2202），
     它的 `PaneModifier` 投影向上扩散 ~30px，正好压住页签条
     （观测到的渐变区 y 240→268，完全吻合）。
   · 双向验证：关掉所有窗格投影 → 全平（证明确实是投影）；
     只把 `InboxTab` 换 `plain` → 落差 21→8（证明是**这一层**）。
   修法：`PaneModifier` 加 `plain()`（只要背景语义、不投投影）。
   WebUI 的 `box-shadow` 只给 `.app-shell > *`（三个**并列**面板），
   面板内部不投 —— 这个结构差异就是原因。

   ★ 同时保留页签条的**悬浮玻璃**（用户 09-20 点名要的）：
   我中途一度按"跟 webui 同步"把它改成不透明实体面，
   那是**读错了**——用户指的是页面结构对齐，而玻璃是他自己定过的；
   两者不冲突（玻璃是观感选择，阴影是 bug）。已恢复并留注释。

④ 生成器入库（`client/harmony/tools/gen-icons.py`）
   它原先在仓库外（`/root/gotmp`），于是**落后生成物三次提交**没人发现：
   我手改 `Icons.ets` 修 fill 图标后重跑它，修改被**冲掉**（退回旧实现）。
   现在：路径按 `__file__` 解析（任何检出目录都能跑）、
   `is_fill_family` 自动分族、输出段与正确实现逐字一致（diff 为空）。
   `Icons.ets` 由它生成，不再手改。

判据：
· `harmony-appearance` 29 条（+1）：窗格投影只给并列窗格，
  面板内部的子 tab 不得再投。按 **struct 归属**判（第一版计数有洞，
  变异①抓不到 —— 改回 `of` 时同文件别处的 `plain` 仍让它绿）。
  两个变异都能红：① InboxTab 改回 of；② 让 plain 也投投影。
  另修一条既有判据的假红：它数 `PaneModifier.of` 出现次数，
  加 `plain` 后误报（"让出页面底"的两种合法写法都要算）。
· 套件：harmony-nav 22/22、harmony-appearance 28/28、
  harmony-logic 34/34、harmony-contacts 5/5、animation-audit 15/15。
**功能对齐状态**（回答用户"功能对齐没有"）：
  对着 `docs/DEBTS.json` 逐条核过 —— 鸿蒙侧**没有缺页面、没有缺功能**。
  授权栏历史（`harmony-permission-history`）✅ 已做、
  详情页转发/改名建议/预算（`harmony-maildetail-missing-three`）✅ 三块全做完。
  仅剩两条，都不在鸿蒙：`harmony-p4c-boundary-decls` 卡在"需真人操作系统选图器"、
  `permission-expires-at-unused` 缺的是 **WebUI 那一半**。
This commit is contained in:
JianFeeeee
2026-09-24 13:13:46 +08:00
parent 7151d3f91c
commit f0dc342c1f
8 changed files with 788 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
client/harmony/entry/src/main/ets/pages/MainPage.ets
View File

@ -624,7 +624,7 @@ struct InboxTab {
}
}
.width('100%').height('100%')
.attributeModifier(PaneModifier.of(this.bgActive))
.attributeModifier(PaneModifier.plain(this.bgActive))
}
/*
@ -1277,7 +1277,7 @@ struct SentTab {
}
}
.width('100%').height('100%')
.attributeModifier(PaneModifier.of(this.bgActive))
.attributeModifier(PaneModifier.plain(this.bgActive))
}
}
@ -1563,9 +1563,16 @@ struct CommPage {
* 于是它是整页唯一一块实心白：上一轮把列表容器、卡片、底部导航条
* 都玻璃化了，唯独漏了这条页签条 ⇒ 壁纸从四周透出来，只有它在顶上白着一横条。
*
* 现在与**底部浮动条同一族**：圆角 + 左右留白 + 系统材质。
* 三种做法各自的取舍见 `model/NavItems.ts` 的 `TAB_BAR_*` 常量注释
* （为什么选悬浮而不是 WebUI 的"通栏无底色"）。
* ★★ 2026-09-24 **推翻上述方向**（见下面 `跟 webui 同步` 那段）：
* 当时把它做成了“悬浮玻璃条”（材质 + 圆角），依据是“与底部条同一语汇”。
* 但底部条是**圆角浮条**（四周都是边），页签条是**贴顶通栏 44vp** ——
* 同一种系统材质在两种几何下表现不同：贴顶那条把材质自带的
* 方向性明暗暴露成了下缘一条暗带（用户：「顶栏莫名其妙的底部阴影」）。
* ⇒ 现在改成 WebUI 的形状：**无材质的通栏条 + 底边分隔线**。
*
* 为什么"不做成实心白"仍然成立：WebUI 那条也是**透明的**
* （`.comm-pane` 给它 `transparent`，`index.css:1641`）——
* 它只是没有**材质**，不是有实心底。两者别混。
*/
/*
* 宽度：**与窗格齐平**（`100%`）。
@ -1576,7 +1583,86 @@ struct CommPage {
* 我们内缩 + 自己带角 ⇒ 右端出现两道弧（用户：「你又在内部套了一个胶囊」）。
* ⇒ 改成与窗格齐平，右端只剩窗格那一道边。
*/
/*
* ★★ 2026-09-24 改为**照 WebUI 同步**（用户：「跟 webui 同步」，
* 上下文是他刚指出「顶栏莫名其妙的底部阴影」）。
*
* ── 那条暗带是什么（像素实测，不是猜）──
* 详情页左栏 x=500 逐像素：
* y=142 lum=244 ↓ 单调递减（没有回弹）
* y=262 lum=225 ← 落差 19
* 对照证据：
* · 同一高度的**纯壁纸区**（x=210 / x=3170）恒为 210-212，**没有任何渐变**
* ⇒ 不是“壁纸透出来”；
* · 全仓 `.shadow(` 只有两处（`PaneModifier` 与登录页），页签条自己没有
* ⇒ 不是外部投影（我先前以为是，给它加了底边 —— **渐变照旧**，
* 那个诊断当场被推翻）。
* ⇒ 渐变来自**页签条自身的 `BlurStyle.COMPONENT_THICK`**：这类系统材质自带
* 方向性明暗（顶部亮、底部暗）用来表达“浮起的立体条”。底部导航条因为是
* **圆角浮条**（四周都是边）看不出，而页签条是**贴顶通栏 44vp**，
* 就把这个渐变直接暴露成下缘一条暗带。
*
* ── 为什么“对齐 WebUI”等于**去掉材质** ──
* WebUI 的页签条根本不是浮条，是**无材质的通栏条**：
* className="shrink-0 flex items-stretch gap-1 px-3 **border-b border-gray-200**"
* （`CommTabs.tsx:40`）。它自己的注释写了两条理由：
* ① 「与**列表头**同一套观感（同内边距、同下边框）」；
* ② 用户 2026-09-14：「通信页面的二级页面与其他位置极其割裂」——
* 之前那个白胶囊带 shadow 浮在面板上，看着是硬贴上去的另一套控件。
* ⇒ “悬浮玻璃页签条”是本仓 09-20 自己的发明（当时依据是“与底部条同一语汇”），
* 而底部条是圆角浮条、页签条是贴顶通栏 —— **同材质在两种几何下表现不同**，
* 这一点当时漏了。现在回到 WebUI 的形状。
*
* ── 同时去掉：圆角、以及上一轮为诊断加的底边 ──
* WebUI 里页签条是**唯一不圆角的那一个**（其余面板各自 `radius-card`，
* 见 `index.css:1371` 的 `.comm-pane > *:not([data-testid='comm-tabs'])`）。
* 底边则**保留 WebUI 本来就有**的那条（`border-b border-gray-200`）——
* 它不是为诊断加的，是 WebUI 的分界线，对应 `Theme.border`（同为分隔线语义）。
*/
.width('100%')
/*
* ★★ 2026-09-24 **必须有底色** —— 这是“顶栏底部阴影”的真正修因。
*
* 上面那段说的是“不做成**实心白卡片**”，那是**实心 vs 玻璃**的区别；
* 而这里是另一个问题：**有底色 vs 透明**。
* 我把材质去掉之后写成了 `Color.Transparent`，于是页签条**直接压在壁纸上**
* —— 实测那条暗带仍然存在（x 250→1150 贯通、亮度恒 224-227，
* 且页签条内部从上到下 245→227 单调递减）。
*
* ── WebUI 怎么做的（关键那段注释）──
* 它明确区分了“列表容器”与“工具条/头部”（`index.css:1648`）：
*
* 列表/详情的外框在壁纸模式下让位给“每项一张卡”，但**工具条与头部**
* 仍要有底色，否则会直接压在壁纸上读不清 —— 所以只把列表容器那一层放透明。
*
* 而页签条的父层级（`.comm-pane`）是 `bg-white`（`MailList.tsx:73`），
* 所以页签条背后**是白的**，不是壁纸。
* ⇒ "不计材质" 不等于 "透明"。我上一版把这二者搞成同一件事了。
*
* `Theme.surface` = `ohos_id_color_list_card_bg`（浅色白/深色深灰，
* 自动跟随主题）—— 它就是 WebUI `--c-white`（`255 255 255` / 深色 `24 27 33`）
* 的对应物。用令牌而不是手写白：深色主题才改得动。
*/
/*
* ★★ 2026-09-24 回到**悬浮玻璃**（09-20 用户点名要的），只补一条底边。
*
* 我在这一轮中途曾把它改成 `Theme.surface + 无圆角 + 底边`，理由是
* 「跟 WebUI 同步」—— 那是**读错了**：用户当时是配着 WebUI 整体布局截图，
* 指的是页面结构对齐；而他自己 09-20 已经明确定过页签条要做成悬浮玻璃
* （`harmony-nav.test.mjs` 那条判据把原话与理由都记着）：
* 「顶部的收件箱发件箱和授权为什么不做成悬浮玻璃？」
* 两者不冲突：玻璃是**观感**选择，而那条阴影是**bug**。
*
* ── 阴影的真凶不是页签条自己 ──
* 几何取证：页签条（y 142→271）与 `InboxTab` 根容器（y 271→2202）是
* `Column` 里的**兄弟**且后者**绘制在后**，它的 `PaneModifier` 投影向上扩散
* ~30px ⇒ 压住页签条（观测到的渐变区 y 240→268，完全吻合）。
* 只把 `InboxTab` 换成 `PaneModifier.plain`（不投投影）实测落差 21→8，
* 而页签条的玻璃观感一字未动。
*
* 底边仍保留：WebUI 的页签条本来就有 `border-b border-gray-200`，
* 而且它让玻璃条与下方可滚内容有一条清晰分界（`Theme.border` = 同一个分隔线语义）。
*/
.backgroundColor(Color.Transparent)
.backgroundBlurStyle(this.bgActive ? Theme.navMaterial : BlurStyle.NONE)
/*
@ -1588,6 +1674,7 @@ struct CommPage {
* 去掉右边那一角，右端就只剩窗格自己那一道边。
*/
.borderRadius({ topLeft: Theme.glassRadius, topRight: 0 })
.border({ width: { bottom: 1 }, color: Theme.border })
}
openMail(mailId: string, accountId: string): void {
@ -1691,7 +1778,7 @@ struct CommPage {
* 卡片就成了"玻璃套玻璃"，正是 WebUI 用
* `.bg-white .bg-white { backdrop-filter: none }` 明确禁止的事。
*/
.attributeModifier(PaneModifier.of(this.bgActive))
.attributeModifier(PaneModifier.plain(this.bgActive))
/*
* ★★ 2026-09-20（用户：「邮件展示左侧没有圆角」）。
*
@ -1766,7 +1853,7 @@ struct CommPage {
* 背景开关仍在这一层（它是通信页的根）：卡不透明、容器透明，
* 壁纸才从卡片间与顶/底边缘透出来（与 WebUI 的 `.comm-pane` 同构）。
*/
.attributeModifier(PaneModifier.of(this.bgActive))
.attributeModifier(PaneModifier.plain(this.bgActive))
}
.navDestination(this.DestinationBuilder)
.mode(NavigationMode.Auto)
@ -1813,7 +1900,20 @@ struct CommPage {
* 一个不透明的 `Navigation`。此前一直在调窗格自己的 `bgActive`，
* 而真正挡住的是外面这层壳。
*/
.attributeModifier(PaneModifier.of(this.bgActive))
/*
* ★★ 2026-09-24 删掉这里**重复的** `.attributeModifier(...)`。
*
* 这个 `Navigation` 实例上原先挂了**两个** modifier（上面一个、这里一个）——
* 而 `.attributeModifier` 是**单一插槽**（本仓注释里记过：`.backgroundColor` 链在
* modifier 之后会被静默覆盖，同一形状）。两个 modifier 里只有**后者**生效，
* 于是"壳有没有投影"取决于书写顺序，而不是取决于意图。
*
* ⇒ 现在只留上面那一个（`PaneModifier.of` = 带投影）——
* `Navigation` 是**并列窗格**，对应 WebUI `.app-shell > *`（`index.css:980`）
* 那一层，是**唯一该投投影**的地方。
* 面板**内部**的子 tab 根容器（`InboxTab`/`SentTab`/`PermissionTab`/`ContactsTab`
* 的 navBar 内容）改用 `PaneModifier.plain` —— 它们不是'浮在壁纸上的板'。
*/
}
}