fix(harmony): 底栏黑带 / 联系人点不开 / 我的页不守导航 / 顶栏硬截断
用户（2026-09-17）连报五条：「一点动画都没有」「底部那个黑条是啥意思」
「日历页面、我的页面、联系人页面哪个跟 webui 对齐了」「联系人页面连点都点不开」
「你的顶栏为什么还是硬截断而不是渐变」。逐条查证后修：
── ① 底部黑条 = 系统导航栏区域，不是我们画的 ──
根因：窗口默认给系统导航条留位，那块在深色下是黑的；界面于是看起来底下多一条黑带。
修法：`setWindowSystemBarEnable(['status'])` 隐藏系统导航条（底部那条本就是我们自绘的
悬浮玻璃条），内容铺满全高。
★ 刻意**不用** `setWindowLayoutFullScreen(true)`：实测试过，它也能消掉黑带，但会连
状态栏区域一起吃进布局，页签栏被时钟/电量盖住（截图硬证「07:43」与「收件箱」重叠）。
── ② 联系人点不开（用户原话「连点都点不开」）──
根因：`ContactItem` / `WorkCard` **根本没有 onClick** —— 卡片画出来了，
但没有任何点击路径。当时判据只钉了"字段与 WebUI 一致"，没钉"点了会发生什么"。
修法：点卡片打开那条会话的邮件列表，就地在**本窗格内**展示（新增 `SessionMailsView`
＋ `GET /sessions/{id}/mails`），底部导航保留；每封可再点进详情。
── ③ 我的页不遵守导航规则 ──
根因：点底栏「我的」走 `pushUrl('pages/SettingsPage')` 推**独立 @Entry 页** ⇒
底部导航整条消失，要按返回才能再切窗格。WebUI 里 `account` 只是一个 `viewMode`，
与收件箱同级、导航常驻。
修法：`SettingsPage` → `SettingsPane`（去掉 @Entry 与返回键，从 main_pages.json 摘除），
作为**第 4 个内容窗格**挂到 `currentIndex === 3`；`NAV_CONTENT_COUNT` 3 → 4，
`NAV_ITEMS` 第 4 项去掉 `route`；拨动动画包 `getUIContext().animateTo`。
实测：`我的` 页底部导航可见，可滚到「退出登录」「管理」。
── ④ 顶栏硬截断 ──
根因：`Scroll` 与 `List` 都能挂 `fadingEdge`（同在 `ScrollableCommonMethod` 上），
但**只有 MainPage 的 List 挂了** —— MailDetailPage / CalendarPage / SettingsPage /
AdminUsersPage / SessionsPage / InboxPage 的滚动容器全漏。同一次滚动里
列表是渐隐、正文是硬切，看起来就是"顶栏没做渐变"。
修法：13 个容器全部补齐（LoginPage 例外：它的 Scroll 是整页根、不是列表，
写了理由）。实测：视口上沿被切断的文字最暗 170–196，而下方不透明正文是 **19**。
── ⑤ 一点动画都没有 ──
实测确认改造前全仓 `animateTo` / `transition` / `animation` **一次都没用过**。
补：Theme 加令牌（durFast 120 / durBase 180 / easeOutSoft = cubic-bezier(0.22,1,0.36,1)，
与 WebUI `--dur-*`/`--ease-out-soft` 同值同曲线）；切窗格包 `animateTo`；
导航项选中变色加 `.animation`。
判据（218 passed / 0 failed）：
· 新增「渐隐覆盖**所有**页面滚动容器」：按文件枚举 + 计数配平，
并自检扫到的容器总数（防正则写坏 ⇒ 全绿）。**这条一写就抓到 LoginPage**。
· ①/②/⑤ 与 headless 那几条按新事实改写：内容窗格 3→4、
`normalizeNavIndex(3)` 归一到自己、导航项里**禁止**再出现 `pushUrl`
（那正是导航消失的形状）。
· 修掉自己引入的两处判据缺陷：`itemCode` 未定义；以及一条**窗口式断言**
（从内容层 `}` 往后扫，靠数花括号定界，而注释里就有大量 `.padding({`，
切片长到 1700+ 字符一路扫进 `onAreaChange` ⇒ 假红），改为纯负向断言。
未验：真机观感；横屏 Auto Split 双栏；日历页深度对齐（本轮只补了渐隐）。
This commit is contained in:
@ -69,6 +69,7 @@ import { PushService, PushRoute } from '../api/PushService';
|
||||
* 这条注释留在 **import 区**而不是跟着表走，因为要守的是"import 在最前"这个位置本身。
|
||||
*/
|
||||
import { CalendarPage } from './CalendarPage';
|
||||
import { SettingsPane } from './SettingsPage';
|
||||
import { LengthMetrics } from '@kit.ArkUI';
|
||||
import {
|
||||
LIST_FADE_LENGTH,
|
||||
@ -1387,6 +1388,27 @@ struct ContactsTab {
|
||||
@State contacts: Contact[] = [];
|
||||
@State loading: boolean = false;
|
||||
@State error: string = '';
|
||||
/*
|
||||
* 打开的会话（空串 = 没开）—— 与 WebUI `ContactPanel` 的 `selectSession` 同一行为：
|
||||
* 点一条“跟谁在聊”就是打开**这条会话的邮件列表**。
|
||||
*
|
||||
* ★ 2026-09-17 用户：「联系人页面连点都点不开」。
|
||||
* 根因：`ContactItem` / `WorkCard` 两个 builder **根本没有 `onClick`** ——
|
||||
* 卡片画出来了、但没有任何点击路径（判据当时只钉了“字段与 WebUI 一致”，
|
||||
* 没钉“点了会发生什么”）。现在补上：点卡片 → 在**本 pane 内**打开会话，
|
||||
* 底部导航保留（与 WebUI 的 pane 模型一致，不跳 @Entry 页）。
|
||||
*/
|
||||
@State openSessionId: string = '';
|
||||
@State openSessionTitle: string = '';
|
||||
@State sessionMails: MailSummary[] = [];
|
||||
@State sessionLoading: boolean = false;
|
||||
/**
|
||||
* 联系人自己的导航栈 —— 与 `CommPage` 同一模式（每个有「列表→详情」的窗格自带一个
|
||||
* `Navigation`）。这样点联系人卡片打开邮件详情时，**底部导航一直可见**
|
||||
* （详情挂在窗格内部），而不是推一个盖住导航的 @Entry 页。
|
||||
* 这也正是用户说的「我的页面完全没有遵守 nav 的导航规则」那条的同源问题。
|
||||
*/
|
||||
private navPathStack: NavPathStack = new NavPathStack();
|
||||
/**
|
||||
* 视图：'list'（跟谁在聊）/ 'card'（在聊什么、进展如何）。
|
||||
*
|
||||
@ -1429,7 +1451,58 @@ struct ContactsTab {
|
||||
this.contactView = nextContactView(this.contactView);
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开一条会话的邮件列表（点联系人卡片就走这里）。
|
||||
*
|
||||
* 与 WebUI `ContactPanel.open()` 同构：`selectSession(c.session_id)` 后
|
||||
* 内容栏切到会话。这里把“会话的邮件”拉下来就地展示在**本 pane 内** ——
|
||||
* 不推 @Entry 页，因为 WebUI 的会话是**同一个 pane 的另一种内容**，
|
||||
* 底部导航一直可见（推页会把导航盖掉，那是另一种信息架构）。
|
||||
*/
|
||||
async openSession(c: Contact): Promise<void> {
|
||||
const m: MailApi | null = this.mailApi;
|
||||
if (m === null) {
|
||||
return;
|
||||
}
|
||||
this.openSessionId = c.session_id;
|
||||
this.openSessionTitle = c.subject.length > 0
|
||||
? c.subject
|
||||
: (c.session_alias.length > 0 ? c.session_alias : c.agent_name);
|
||||
this.sessionMails = [];
|
||||
this.sessionLoading = true;
|
||||
try {
|
||||
this.sessionMails = await m.sessionMails(c.session_id);
|
||||
} catch (e) {
|
||||
const ae = e as ApiError;
|
||||
this.getUIContext().getPromptAction().showToast({ message: ae.message.length > 0 ? ae.message : '打开会话失败' });
|
||||
} finally {
|
||||
this.sessionLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 回到联系人列表 */
|
||||
closeSession(): void {
|
||||
this.openSessionId = '';
|
||||
this.openSessionTitle = '';
|
||||
this.sessionMails = [];
|
||||
}
|
||||
|
||||
/** 点一封邮件 → 推进本窗格的导航栈（与收件箱同一条详情路径） */
|
||||
openMail(mailId: string, accountId: string): void {
|
||||
const params: MailDetailParams = { mail_id: mailId, account_id: accountId };
|
||||
this.navPathStack.pushPath({ name: MAIL_DETAIL_ROUTE, param: params });
|
||||
}
|
||||
|
||||
@Builder
|
||||
DestinationBuilder(name: string, param: Object) {
|
||||
if (name === MAIL_DETAIL_ROUTE) {
|
||||
MailDetailDestination({ navReserve: this.navReserve })
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
/* 本窗格自带 Navigation（与 CommPage 同一模式）：列表 → 邮件详情，底部导航始终可见 */
|
||||
Navigation(this.navPathStack) {
|
||||
Column() {
|
||||
Row() {
|
||||
Text(contactViewTitle(this.contactView)).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
|
||||
@ -1445,7 +1518,13 @@ struct ContactsTab {
|
||||
.width('100%').height(56).padding({ left: 16, right: 8 })
|
||||
.backgroundColor(Theme.surface)
|
||||
|
||||
if (this.loading) {
|
||||
/*
|
||||
* ★ 会话视图：点联系人卡片后**在本 pane 内**展示那条会话的邮件。
|
||||
* 不另开 @Entry 页 —— 与 WebUI 的 pane 模型一致（底部导航一直可见）。
|
||||
*/
|
||||
if (this.openSessionId.length > 0) {
|
||||
this.SessionMailsView()
|
||||
} else if (this.loading) {
|
||||
Column() {
|
||||
LoadingProgress().width(40).height(40)
|
||||
}
|
||||
@ -1469,6 +1548,8 @@ struct ContactsTab {
|
||||
this.WorkCard(c)
|
||||
}
|
||||
.width('100%')
|
||||
/* 点卡片 = 打开这条会话（WebUI `ContactPanel` 的 onOpen） */
|
||||
.onClick(() => { this.openSession(c); })
|
||||
}, (_c: Contact, idx: number) => idx.toString())
|
||||
}
|
||||
.width('100%').layoutWeight(1)
|
||||
@ -1486,6 +1567,8 @@ struct ContactsTab {
|
||||
.backgroundColor(Theme.surface)
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.clip(true)
|
||||
/* 点卡片 = 打开这条会话（WebUI `ContactPanel` 的 onOpen） */
|
||||
.onClick(() => { this.openSession(c); })
|
||||
}, (_c: Contact, idx: number) => idx.toString())
|
||||
}
|
||||
.width('100%').layoutWeight(1)
|
||||
@ -1496,6 +1579,91 @@ struct ContactsTab {
|
||||
}
|
||||
.width('100%').height('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
}
|
||||
.navDestination(this.DestinationBuilder)
|
||||
.mode(NavigationMode.Auto)
|
||||
/* 会话列表栏宽度与通信页同一口径（320，范围 280–360） */
|
||||
.navBarWidth(320)
|
||||
.navBarWidthRange([280, 360])
|
||||
.minContentWidth(360)
|
||||
.hideTitleBar(true)
|
||||
.width('100%').height('100%')
|
||||
}
|
||||
|
||||
/**
|
||||
* 会话视图：一条会话下的全部邮件（点联系人卡片后显示）。
|
||||
*
|
||||
* 与 WebUI 的会话内容区同构：顶部一行返回 + 会话标题，下面是那几封邮件。
|
||||
* 每封点开推进本窗格的 `Navigation`（与收件箱同一条详情路径）。
|
||||
*/
|
||||
@Builder
|
||||
SessionMailsView() {
|
||||
Column() {
|
||||
/* 返回行：与 WebUI 的 `BackButton label="会话"` 同一语义 */
|
||||
Row() {
|
||||
Text('‹').fontSize(24).fontColor(Theme.accent).width(36).height(36)
|
||||
.textAlign(TextAlign.Center)
|
||||
.onClick(() => { this.closeSession(); })
|
||||
Text(this.openSessionTitle)
|
||||
.fontSize(14).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
|
||||
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.layoutWeight(1)
|
||||
Text(this.sessionMails.length + ' 封')
|
||||
.fontSize(11).fontColor(Theme.textMuted)
|
||||
}
|
||||
.width('100%').height(44).padding({ left: 4, right: 12 })
|
||||
.backgroundColor(Theme.surface)
|
||||
|
||||
if (this.sessionLoading) {
|
||||
Column() { LoadingProgress().width(32).height(32) }
|
||||
.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)
|
||||
} else if (this.sessionMails.length === 0) {
|
||||
Column() {
|
||||
Text('这条会话没有邮件').fontSize(14).fontColor(Theme.textSubtle)
|
||||
}
|
||||
.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)
|
||||
} else {
|
||||
List({ space: 6 }) {
|
||||
ForEach(this.sessionMails, (m: MailSummary) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Row() {
|
||||
Text(m.from_name.length > 0 ? m.from_name : '—')
|
||||
.fontSize(12).fontColor(Theme.textPrimary)
|
||||
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
Blank()
|
||||
Text(compactMailTime(m.created_at))
|
||||
.fontSize(10).fontColor(Theme.textSubtle)
|
||||
}
|
||||
.width('100%')
|
||||
Text(m.subject)
|
||||
.fontSize(14)
|
||||
.fontWeight(m.status === 'unread' ? FontWeight.Bold : FontWeight.Normal)
|
||||
.fontColor(Theme.textPrimary)
|
||||
.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%').margin({ top: 4 })
|
||||
Text(m.body_preview)
|
||||
.fontSize(11).fontColor(Theme.textSubtle)
|
||||
.maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%').margin({ top: 2 })
|
||||
}
|
||||
.width('100%').alignItems(HorizontalAlign.Start)
|
||||
.padding({ left: 12, right: 12, top: 10, bottom: 10 })
|
||||
.backgroundColor(Theme.surface)
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.border({ width: 1, color: Theme.border })
|
||||
}
|
||||
.width('100%')
|
||||
.onClick(() => { this.openMail(m.mail_id, m.source_account_id); })
|
||||
}, (m: MailSummary) => m.mail_id)
|
||||
}
|
||||
.width('100%').layoutWeight(1)
|
||||
.fadingEdge(true, { fadingEdgeLength: LengthMetrics.vp(LIST_FADE_LENGTH) })
|
||||
.contentEndOffset(this.navReserve)
|
||||
.padding({ left: 12, right: 12, top: 8, bottom: 8 })
|
||||
}
|
||||
}
|
||||
.width('100%').layoutWeight(1)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1949,15 +2117,42 @@ struct MainPage {
|
||||
.height(NAV_BAR_HEIGHT)
|
||||
.constraintSize({ minHeight: NAV_ITEM_MIN_HIT, minWidth: NAV_ITEM_MIN_HIT })
|
||||
.justifyContent(FlexAlign.Center)
|
||||
// 点击：外壳入口（route 非空）直接路由到 @Entry 页（与 WideSidebar 的设置按钮同一行为）；
|
||||
// 内容窗格才进 currentIndex 分派。两者不能混：设置页是 @Entry，在内容分派里占 index
|
||||
// 会出现"点了没内容"或"每次重建都 pushUrl"（见 NavItem.route 的注释）。
|
||||
/*
|
||||
* 选中/取消选中时图标与文字**变色**要有过渡（不是硬切）。
|
||||
*
|
||||
* 用户（2026-09-17）：「一方面一点动画都没有」。
|
||||
* 与 WebUI `.nav-item { transition: color 150ms }` 同一语义；
|
||||
* 时长用令牌（120ms, `--dur-fast`），不另拍一个数。
|
||||
*/
|
||||
.animation({ duration: Theme.durFast, curve: Theme.easeOutSoft })
|
||||
.onClick(() => {
|
||||
if (item.route !== undefined && item.route.length > 0) {
|
||||
this.getUIContext().getRouter().pushUrl({ url: item.route });
|
||||
/*
|
||||
* ★ 四项**都是内容窗格**（用户 2026-09-17：「我的页面完全没有遵守 nav 的导航规则」）。
|
||||
*
|
||||
* 原先第 4 项走 `pushUrl('pages/SettingsPage')` —— 推一个独立 @Entry 页，
|
||||
* 底部导航整条消失。WebUI 的 `account` 只是一个 `viewMode`，与收件箱同级、
|
||||
* 导航常驻。所以现在统一按 `currentIndex` 分派（normalizeNavIndex 的上界
|
||||
* 也跟着放宽到四项）。
|
||||
*
|
||||
* ★ 切窗格走 `animateTo`：用户（2026-09-17）「一方面一点动画都没有」。
|
||||
* 改 `currentIndex` 会换掉整块内容 —— 不包一层过渡就是硬切。
|
||||
* WebUI 的对应物是 `html.view-switch .pane-rise { animation: rise-in 150ms }`
|
||||
* （只给**刚出现的面板**做 4px 上浮 + 淡入，骨架不动 —— 用户对"闪"很敏感，
|
||||
* 所以不做整屏淡入、不做缩放）。
|
||||
* 时长/曲线用令牌（180ms + cubic-bezier(0.22,1,0.36,1)），与 WebUI 同一根尺子。
|
||||
* 必须走 `getUIContext().animateTo`：全局 `animateTo` 已被 SDK 标废弃，
|
||||
* 判据（harmony-system-api）对全局调用默认判红。
|
||||
*/
|
||||
const target: number = normalizeNavIndex(index);
|
||||
if (target === this.currentIndex) {
|
||||
return;
|
||||
}
|
||||
this.currentIndex = normalizeNavIndex(index);
|
||||
this.getUIContext().animateTo({
|
||||
duration: Theme.durBase,
|
||||
curve: Theme.easeOutSoft
|
||||
}, () => {
|
||||
this.currentIndex = target;
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
@ -2091,6 +2286,17 @@ struct MainPage {
|
||||
CommPage({ bgActive: this.bgActive, navReserve: this.navReserve })
|
||||
} else if (this.currentIndex === 2) {
|
||||
ContactsTab({ bgActive: this.bgActive, navReserve: this.navReserve })
|
||||
} else if (this.currentIndex === 3) {
|
||||
/*
|
||||
* ★ 第四项「我的」现在是**内容窗格**（不再是 push 出去的 @Entry 页）。
|
||||
*
|
||||
* 用户 2026-09-17：「我的页面完全没有遵守 nav 的导航规则」。
|
||||
* 原形状：点底栏「我的」→ `pushUrl('pages/SettingsPage')` 推开一个独立页面
|
||||
* ⇒ 底部导航整条消失，要按「返回」才能再切窗格。
|
||||
* WebUI 里 `account` 只是一个 `viewMode`，与收件箱/日历同级、导航常驻。
|
||||
* 所以这里按窗格挂载（与前三项同一套机制）。
|
||||
*/
|
||||
SettingsPane({ bgActive: this.bgActive, navReserve: this.navReserve })
|
||||
}
|
||||
/*
|
||||
* 日历与另外两个 pane 不同：**常驻挂载**，用 `visibility` 控制显示。
|
||||
|
||||
Reference in New Issue
Block a user