# 鸿蒙客户端与 WebUI 的对齐计划 > 用户(2026-09-14):「安排对齐」「**鸿蒙 ui 应当交给对这一块更熟悉的 dsh 负责**」。 > 这份文档把**差距**与**分期**写清楚,免得每轮都从"感觉还差什么"重新猜。 > > **负责人:dsh**(2026-09-14 起由 jianf 指定)。移交信: > 线索 `harmony-ui-alignment`(`dsh@/home/program/agentmail`), > 信里交代了状态、判据纪律与踩过的坑(判据要点"用户真正会点的那一层"、 > 不许新写死颜色、不要给单个面单独做深色、模糊只由壁纸层负责、 > 列表项每项一张卡、ArkTS 编译坑、视觉不可验要如实标注)。 > > 我(pi)保留 WebUI/Electron 侧:需要两边一起加令牌之类的配合,回信给 pi。 ## 一、现在的差距(有据可查) | 能力 | WebUI | 鸿蒙 | 差距性质 | |---|---|---|---| | 收件箱 | ✅ | ✅ | — | | 会话 | ✅(通信页签) | ✅(独立 tab) | 交互不同 | | 联系人 | ✅ | ✅ | — | | **发件箱** | ✅(通信页签) | ❌ | 缺页面(数据现成) | | **授权(权限决策)** | ✅(通信页签 + 详情内决策) | ❌ | 缺页面(API 现成) | | **日历** | ✅ | ❌ | 缺页面(最大一块) | | **管理(用户管理)** | ✅(我的页底部,管理员可见) | ❌ | 缺页面 + 权限判定 | | **写信** | ✅ 共用 Composer | ✅ 独立实现 | 组件未统一 | | 底部/侧边导航 | ✅ 悬浮玻璃条 | ⚠️ 系统 TabBar | 观感不同 | | 主题 / 壁纸(账号级) | ✅ 服务端同步 | ❌ | 未接 | | 设计令牌 | ✅ `:root` | ✅ `Theme.ets` | **已对齐**(判据钉住) | ## 二、已经做完的(本轮之前) - **设计令牌共用**:`common/Theme.ets` 与 WebUI 的 `:root` 一一对应 (品牌蓝、圆角 14/8、导航玻璃 0.72、语义色、字号),并由 `client/electron/test/cross-client-theme.test.mjs` 钉住取值一致性。 - **旧调色板清除**:页面里的 `#1A73E8`(Google 蓝)/`#333333`/`#F5F7FA` 等 与 WebUI 不同的写死色值,全部换成令牌(203 处)。 - **修掉只剩第一个 tab 高亮的 bug**(`currentIndex === 0` 写死)。 ## 三、分期(按"能独立验收"切) **P1 设计语言(pi 已完成)** —— 令牌 + 颜色替换 + 编译通过。以下 P2–P6 归 dsh。 **P2 发件箱**:复用现有列表组件,接口 `/mail/sent`。验收:能看到已发邮件、 点开进详情;空态有说明。**为什么先做它**:与收件箱同构,风险最低。 **P3 授权页**:导航加一项「授权」,列表用 `permission_*` 字段, 决策走 `POST /permission/{id}/decide`;详情内也支持决策。 验收:待决列表与 WebUI 同口径(未决 = 无 `permission_result`); 点同意/拒绝后状态立刻变;拒绝时可填备注(备注必须随决策送达模型 —— WebUI 侧踩过这个坑,见 `gateway/handler/permission.go` 的 Note 传递)。 **P4 主题/壁纸同步**:接 `GET/PUT /me/appearance` + 图片走带认证的 fetch。 验收:换账号后外观跟随;服务端"无记录"时以本地为准(不要用默认值覆盖 —— 同 WebUI)。 **P5 玻璃悬浮导航**:自定义底栏(圆角 + 半透明 + `backgroundBlurStyle`), 取代系统 TabBar。**注意**:视觉验收需要设备或签名 HAP, 本机 `hdc list targets` 为空 ⇒ 只能保证编译与结构,观感要人眼确认。 **P6 日历**:网格 + 事件读写 + 左右滑动翻页(复用 WebUI 的手势阈值: 水平 ≥40px、≥1.5× 垂直、<600ms)。这一块最大,单独排。 ## 四、验收纪律(照 WebUI 那套) 1. 每个页面都要有**点它**的判据(WebUI 侧就是因为只验结构没验点击, 漏掉了"侧栏点了不翻页")。 2. 判据不许只看截图:要量几何/对比度/命中区。 3. 无法验证的要**如实标注**(例如"编译通过、视觉未验"),不能写成"已完成"。