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

fix(harmony): 图标按 px→vp 正确缩放 + 底栏四入口 + 卡片 10vp 缩进

Browse Source 
图标过小的根因（实图硬证）：`Path.commands` 的坐标按 **px** 解释，不是 vp。
- `Shape.viewPort` 只裁剪不缩放（官方样例"缩放成立"是因为它用 Rect/Circle
  自带 vp 宽高，不是裸 Path.commands）；
- 改动前的 `Path.scale({iconSize/24})` 对 iconSize=24 等于 1.0，同样没缩放。
  症状：FAB 内 compose 只画 24px（应 24vp=84px），且偏在盒子左上角。

修法：`scale({vp2px(iconSize)/24})` 把 24 单位路径放大到 iconSize vp；
`scale` 会连带放大描边，故 `strokeWidth = strokeWeight / vp2px(1)` 抵消，
否则 1.8vp 描边会变成 ~7.3vp 的"实心块"（实图已验证）。
用 `this.getUIContext().vp2px()` 而非全局 `vp2px`——后者已废弃，
`harmony-system-api` 判据对全局调用默认判红。

验收（模拟器实图，密度 3.489）：
- FAB 内 compose 图标 84px = 24vp ✓（原 24px）
- 底栏图标描边 7-8px ≈ 1.8/24×28vp=7.3px ✓（原为实心块）
- 四个图标均为清晰描边，与 WebUI icons.tsx 同几何

底栏四入口：新增"我的"（person → pages/SettingsPage），对齐 WebUI
通信/日历/联系人/我的；NAV_CONTENT_ITEMS 保持宽屏侧栏三项，
避免宽屏出现重复 person 图标。

卡片缩进：`width('100%') + margin({left:10,right:10})` 在 ArkUI 里不会
缩到 90%——margin 加在宽度外面，卡片顶出父容器（实测左缘只留 ~1px，
列表卡才有正确 10vp）。改为外层容器加 padding。验收：页头卡与邮件卡
左缘同为 x=35（10.0vp）、右缘 x=1219。

推送：reportToken 先申请通知权限再取 token（部分设备权限未开时
getToken 返回空 / 报 1600004），并补两条文件形状判据钉住
client_id 配置与调用顺序。

测试：198 passed / 0 failed。
This commit is contained in:
JianFeeeee
2026-09-17 16:27:27 +08:00
parent a5f680a147
commit ff75339baa
10 changed files with 301 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,6 +84,19 @@ import {
const INBOX_PAGE_SIZE: number = 50;
const MAIL_DETAIL_ROUTE: string = 'mail-detail';
/** WebUI 邮件列表统一使用 MM/DD HH:mm，避免把 ISO 原文塞进窄列表。 */
function compactMailTime(iso: string): string {
const value: Date = new Date(iso);
if (Number.isNaN(value.getTime())) {
return '';
}
const month: string = (value.getMonth() + 1).toString().padStart(2, '0');
const day: string = value.getDate().toString().padStart(2, '0');
const hour: string = value.getHours().toString().padStart(2, '0');
const minute: string = value.getMinutes().toString().padStart(2, '0');
return month + '/' + day + ' ' + hour + ':' + minute;
}
/**
* Navigation 目标页：按官方示例在 NavDestination.onReady 读取路径参数。
* 系统 Navigation 自动决定 Stack / Split；这里不读窗口宽度、不手搓分栏。
@ -337,32 +350,49 @@ struct InboxTab {
build() {
Column() {
Row() {
Column() {
Row() {
Text('收件箱').fontSize(20).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
if (this.accountList.length > 1) {
Text(' ▾').fontSize(14).fontColor(Theme.textSubtle)
.onClick(() => { this.showAccountPicker = !this.showAccountPicker; })
/*
* WebUI 的列表头只有一张紧凑卡：标题 +「会话组 · 邮件数」+ 账号切换。
* 不再重复堆「通信 / 收件箱 / 全部邮箱 / 已加载 / 未读」五层说明文字。
*/
/*
* ★ 卡片要真缩到 10vp，不能靠 `width('100%') + margin`：
* ArkUI 的 margin 加在宽度**外面**，100% 宽度再配左右 margin 会顶出父容器
* （实测卡片左缘只留 ~1px，列表卡却有 10vp 缩进）。改成外层带 padding 的容器。
*/
Column() {
Row() {
Text('收件箱').fontSize(14).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
Text(this.groups.length + ' 组 · ' + this.loaded + ' 封')
.fontSize(12).fontColor(Theme.textMuted).margin({ left: 10 })
Blank()
if (this.accountList.length > 1) {
Row() {
Text(this.accountFilter === 'all' ? '全部邮箱' : this.accountName)
.fontSize(11).fontColor(Theme.textMuted)
AmIcon({ iconName: 'chevronRight', iconSize: 12, iconColor: Theme.textSubtle })
.rotate({ angle: 90 })
.margin({ left: 3 })
}
.height(32)
.onClick(() => { this.showAccountPicker = !this.showAccountPicker; })
}
if (this.unread > 0) {
Text(this.unread > 99 ? '99+' : this.unread.toString())
.fontSize(10).fontWeight(FontWeight.Bold).fontColor(Theme.surface)
.backgroundColor(Theme.danger).borderRadius(9)
.constraintSize({ minWidth: 18 }).height(18)
.textAlign(TextAlign.Center).margin({ left: 8 })
}
Text(this.accountFilter === 'all' ? '全部邮箱' : this.accountName)
.fontSize(11).fontColor(Theme.textSubtle).margin({ top: 2 })
.onClick(() => { if (this.accountList.length > 1) { this.showAccountPicker = !this.showAccountPicker; } })
}
.alignItems(HorizontalAlign.Start)
Blank()
if (this.unread > 0) {
Text(this.unread + ' 未读')
.fontSize(13).fontColor(Theme.surface)
.backgroundColor(Theme.danger)
.borderRadius(10)
.padding({ left: 8, right: 8, top: 2, bottom: 2 })
}
// ⚙ 不在这里了：它搬到了通信页的页头 —— 否则切到发件箱/授权就够不到设置
.width('100%').height(46)
.padding({ left: 14, right: 12 })
.backgroundColor(Theme.surface)
.borderRadius(Theme.radiusCard)
.border({ width: 1, color: Theme.border })
}
.width('100%').height(56).padding({ left: 16, right: 8 })
.backgroundColor(Theme.surface)
.width('100%')
.padding({ left: 10, right: 10 })
.margin({ top: 10 })
// 账号选择器下拉
if (this.showAccountPicker && this.accountList.length > 1) {
@ -423,26 +453,7 @@ struct InboxTab {
}
.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)
} else {
/*
* 本页取满了就当场说清楚"可能还有更多"。
*
* 原先这里写的是「共 N 封」，而那个 N 其实是服务端返回的**未读数**
* （`CountUnread`）—— 界面上同时出现「共 7 封」和「未读 7」这种自相矛盾的
* 两行字，且折叠之后更糟：拿 50 封折叠出的会话数会被当成"就只有这么多会话"。
*/
if (this.notice.length > 0) {
Row() {
Text(this.notice)
.fontSize(Theme.fontTiny)
.fontColor(Theme.warnFg)
.maxLines(2)
}
.width('100%')
.padding({ left: 16, right: 16, top: 6, bottom: 6 })
.backgroundColor(Theme.warnBg)
}
List({ space: 1 }) {
List({ space: 6 }) {
ForEach(this.groups, (g: SessionGroup) => {
ListItem() {
if (isFlatGroup(g)) {
@ -464,17 +475,8 @@ struct InboxTab {
}, (g: SessionGroup) => g.key)
}
.width('100%').layoutWeight(1)
.divider({ strokeWidth: 1, color: Theme.border, startMargin: 16, endMargin: 16 })
.padding({ left: 10, right: 10, top: 10, bottom: 10 })
}
// 底部信息栏（悬浮加号不在这里：它属于**通信页**，三个栏都要能新建 —— 见 CommPage）
Row() {
Text('已加载 ' + this.loaded + ' 封').fontSize(12).fontColor(Theme.textSubtle)
Blank()
Text('未读 ' + this.unread).fontSize(12).fontColor(Theme.textSubtle)
}
.width('100%').height(36).padding({ left: 16, right: 16 })
.backgroundColor(Theme.surface)
}
.width('100%').height('100%')
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
@ -497,15 +499,10 @@ struct InboxTab {
Row() {
this.MailItem(mail)
}
.width('100%').height(74)
/*
* **每项一张卡**（不是通栏）：jianf 同步过来的语义 —— 列表项各自成卡/气泡，
* 卡与卡之间留缝，靠底色与圆角分开，不再用贯通整屏的分隔线。
* 底色用系统的"列表卡片底色"，深浅主题由系统挑。
*/
.width('100%').height(64)
.backgroundColor(mail.status === 'unread' ? Theme.accentSoft : Theme.surface)
.borderRadius(Theme.radiusCard)
.margin({ bottom: 6 })
.border({ width: 1, color: Theme.border })
.clip(true)
.onClick(() => {
this.openMail(mail);
@ -521,42 +518,49 @@ struct InboxTab {
@Builder
GroupHeader(g: SessionGroup) {
Row() {
Text(this.isExpanded(g.key) ? '▾' : '▸')
.fontSize(12).fontColor(Theme.textMuted).width(18)
AmIcon({ iconName: 'chevronRight', iconSize: 12, iconColor: Theme.textSubtle })
.rotate({ angle: this.isExpanded(g.key) ? 90 : 0 })
.width(20)
Column() {
Row() {
Text(g.alias.length > 0 ? g.alias : '(未命名会话)')
.fontSize(13).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
if (g.unreadCount > 0) {
Text(g.unreadCount + '')
.fontSize(10).fontColor(Theme.surface)
.backgroundColor(Theme.danger)
.borderRadius(9).width(18).height(18)
.textAlign(TextAlign.Center)
}
Text(g.latest?.from_name ?? '')
.fontSize(12).fontWeight(g.unreadCount > 0 ? FontWeight.Bold : FontWeight.Normal)
.fontColor(Theme.textPrimary)
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).layoutWeight(1)
Text(compactMailTime(g.latest?.created_at ?? ''))
.fontSize(10).fontColor(Theme.textSubtle).margin({ left: 8 })
}
.width('100%')
Row() {
if (g.unreadCount > 0) {
Text(g.unreadCount > 99 ? '99+' : g.unreadCount.toString())
.fontSize(9).fontWeight(FontWeight.Bold).fontColor(Theme.surface)
.backgroundColor(Theme.accent).borderRadius(8)
.constraintSize({ minWidth: 16 }).height(16).textAlign(TextAlign.Center)
.margin({ right: 6 })
}
Text(g.subject.length > 0 ? g.subject : '(无主题)')
.fontSize(12).fontColor(Theme.textMuted)
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
Blank()
Text(g.mails.length + ' 封').fontSize(11).fontColor(Theme.textSubtle)
.fontSize(12).fontWeight(g.unreadCount > 0 ? FontWeight.Bold : FontWeight.Normal)
.fontColor(Theme.textPrimary)
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).layoutWeight(1)
}
.width('100%').margin({ top: 3 })
Row() {
Text(g.alias.length > 0 ? '.' + g.alias : '(未命名会话)')
.fontSize(10).fontColor(Theme.accent)
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).layoutWeight(1)
Text(g.mails.length + ' 封').fontSize(10).fontColor(Theme.textSubtle).margin({ left: 8 })
}
.width('100%').margin({ top: 2 })
}
.layoutWeight(1).alignItems(HorizontalAlign.Start)
}
.width('100%').height(60)
.padding({ left: 12, right: 12 })
.width('100%').height(78)
.padding({ left: 10, right: 12 })
.alignItems(VerticalAlign.Center)
.backgroundColor(Theme.surfaceMuted)
.backgroundColor(Theme.surface)
.borderRadius(Theme.radiusCard)
.margin({ bottom: 6 })
.border({ width: 1, color: Theme.border })
.clip(true)
.onClick(() => {
this.toggleExpanded(g.key);
@ -584,7 +588,7 @@ struct InboxTab {
.margin({ left: 6 })
}
Blank()
Text(mail.created_at).fontSize(11).fontColor(Theme.textSubtle)
Text(compactMailTime(mail.created_at)).fontSize(10).fontColor(Theme.textSubtle)
}
.width('100%')
@ -1112,28 +1116,6 @@ struct CommPage {
aboutToAppear(): void {
this.refreshCounts();
this.applyAppearance();
}
/**
* 外观（主题 + 壁纸）跟着**账号**走：这里进入主界面时先应用一次。
*
* 为什么主界面也要做一次、而不只在设置页里做：用户改了主题后如果只有设置页生效，
* 一进主界面就"变回去了"（WebUI 侧踩过：服务端存了外观、界面却毫无变化）。
* 没登录/离线时 store 会退回本地缓存并标 `local-only`（降级可见）。
*/
async applyAppearance(): Promise<void> {
const ctx = this.getUIContext().getHostContext();
if (ctx === undefined) {
return;
}
const acctMgr: AccountManager = AccountManager.getInstance(ctx);
await acctMgr.load();
const store: AppearanceStore = AppearanceStore.getInstance();
// 缓存**按账号**读：多账号共用一份是 WebUI 侧的原始缺陷
store.loadLocal(ctx, acctMgr.getActiveId());
const client: ApiClient = new ApiClient(ctx);
await store.syncFromServer(ctx, client);
}
/** 徽标数字：未读（收件箱里**要读的**那些）+ 待决策（授权栏） */
@ -1240,24 +1222,6 @@ struct CommPage {
Stack({ alignContent: Alignment.BottomEnd }) {
Navigation(this.navPathStack) {
Column() {
Row() {
Text('通信').fontSize(20).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
Blank()
/*
* 设置入口。
* 图标用 `person`：与 WebUI 的「我的」（`NarrowNav.tsx` 的 `PersonIcon`）同一枚，
* 而设置页里正是账号 / 外观 / 密钥这些“属于这个人的东西”。
* 2026-09-15 之前这里是 emoji `⚙`（理由与替换过程见 `model/NavItems.ts`）。
*/
AmIcon({ iconName: 'person', iconSize: 20, iconColor: Theme.textMuted })
.width(36).height(36)
.onClick(() => {
this.getUIContext().getRouter().pushUrl({ url: 'pages/SettingsPage' });
})
}
.width('100%').height(52).padding({ left: 16, right: 8 })
.backgroundColor(Theme.surface)
this.CommTabBar()
if (this.commTab === 'sent') {
@ -1289,13 +1253,13 @@ struct CommPage {
* 悬浮的圆形加号（用户点名要的形状）：56 圆、品牌色、右下角。
* 放在通信页这一层，所以三个栏里都在 —— 新建邮件这件事不挑栏。
*/
Text('+')
.fontSize(28).fontColor(Theme.surface)
Button() {
AmIcon({ iconName: 'compose', iconSize: 24, iconColor: Theme.surface })
}
.width(56).height(56)
.borderRadius(28)
.backgroundColor(Theme.accent)
.textAlign(TextAlign.Center)
.margin({ right: 20, bottom: 20 })
.margin({ right: 16, bottom: 16 })
.onClick(() => { this.openCompose(); })
}
.width('100%').height('100%')
@ -1672,7 +1636,19 @@ struct MainPage {
await acctMgr.load();
const store: AppearanceStore = AppearanceStore.getInstance();
store.loadLocal(ctx, acctMgr.getActiveId());
const client: ApiClient = new ApiClient(ctx);
/*
* ★ 必须用**单例**，且**不能**调 `init()`。
* 登录页的快速路径（已有账号）走 `client.setToken(active.token)`——
* 只写单例内存、**不** persistToken。如果这里再调 `init()`，
* 会从 preferences 读回可能空/旧的 token，把内存里正确的 token 覆盖掉
* ⇒ `/me/appearance` 恒 401（hilog 实测：response_code 401）。
* 单例由 LoginPage 先拿到，token 已在内存里；这里直接用即可。
* 只有冷启动直跳 MainPage（理论上不会发生）时才需要 init() 兜底。
*/
const client: ApiClient = ApiClient.getInstance(ctx);
if (client.getToken().length === 0) {
await client.init();
}
await store.syncFromServer(ctx, client);
const snap: AppearanceSnapshot = store.current();
this.wallpaperImage = store.wallpaper;
@ -1833,8 +1809,14 @@ struct MainPage {
.height(NAV_BAR_HEIGHT)
.constraintSize({ minHeight: NAV_ITEM_MIN_HIT, minWidth: NAV_ITEM_MIN_HIT })
.justifyContent(FlexAlign.Center)
// 点击：过 normalizeNavIndex 归一化（与内部页签同一套纪律：不直接赋值）
// 点击：外壳入口（route 非空）直接路由到 @Entry 页（与 WideSidebar 的设置按钮同一行为）；
// 内容窗格才进 currentIndex 分派。两者不能混：设置页是 @Entry，在内容分派里占 index
// 会出现"点了没内容"或"每次重建都 pushUrl"（见 NavItem.route 的注释）。
.onClick(() => {
if (item.route !== undefined && item.route.length > 0) {
this.getUIContext().getRouter().pushUrl({ url: item.route });
return;
}
this.currentIndex = normalizeNavIndex(index);
})
}
@ -1902,7 +1884,11 @@ struct MainPage {
build() {
/*
* 底部三项：**通信** / 日历 / 联系人。
* 底部四枚图标：通信 / 日历 / 联系人 / 我的（与 WebUI `NarrowNav.tsx` 四入口一致）。
*
* 前三项是内容窗格（按 currentIndex 分派挂内容）；第4项「我的」是外壳入口
* —— 点击路由到 `pages/SettingsPage`（见 `NavItem` 的 onClick，与 WideSidebar 的
* 设置按钮同一行为），不在 currentIndex 分派里占位（见 `NavItems.ts` 的 `route` 字段说明）。
*
* 通信不再等于收件箱：它内部有三栏（收件箱 / 发件箱 / 授权 + 徽标），
* 见 `CommPage` 与 `model/CommTabs.ts`。这也是 WebUI 现在的信息架构
@ -1971,12 +1957,17 @@ struct MainPage {
.width('100%')
.height('100%')
/*
* ★ 2026-09-16：宽屏内容面板的玻璃几何（对齐 WebUI app-shell）。
* 圆角 14 + clip（子内容被裁剪）+ 容器 padding/gap（面板缝隙露壁纸）。
* 玻璃材质只在 WideSidebar 上（判据按 @Builder 解析 owner，内容面板会与
* NavBar 撞 key）；内容面板用不透明系统色 surface —— 壁纸从缝隙露出已达成 app-shell 观感。
* ★ 2026-09-17：窄屏壁纸可见化（对齐 WebUI 的 .narrow-shell）。
* WebUI 的正文面（卡片/气泡）不透明，但**容器**（.narrow-shell / .narrow-stack）
* 透明 —— 壁纸从卡片间健、从顶/底边缘透出。鸿蒙这边由内向外是：
* · 内容窗格 (CommPage 等) 已是 `bgActive ? Transparent : pageBg`（判据钉 ≥5 处）；
* · 这里是它们的父容器，原来恒不透明 surface ⇒ 内层透明也被盖住 ⇒ 壁纸在窄屏上看不见。
* 所以窄屏 + bgActive 时这里也透明，壁纸才透得过。宽屏仍用 surface（玻璃面板从缝隙露壁纸
* 是既定的 app-shell 观感，不动）。
* 不加 backgroundBlurStyle：卡片是"正文面不透"的那一层（Theme 注释原话），
* 玻璃只留给浮层（NavBar），不是这里。
*/
.backgroundColor(Theme.surface)
.backgroundColor(this.isWide ? Theme.surface : (this.bgActive ? Color.Transparent : Theme.surface))
.borderRadius(this.isWide ? Theme.glassRadius : 0)
.clip(this.isWide)
.padding({ bottom: this.isWide ? 0 : NAV_CONTENT_RESERVE })