跨端: 顶栏不再自己铺白条 + 日历改左右两栏 + 常驻窗格动画真的会播（用户三处实测指出）
用户三条反馈，逐条对应：
① 「底栏数字为什么显示在图标下面？」
WebUI 的徽标是 `absolute top-1 right-[22%]`（脱离文档流、浮在图标右上角），
我写成了 `Column` 的第三个子节点 ⇒ 参与竖向布局、掉到文字下面。
改用 `Stack({ alignContent: Alignment.TopEnd })` 锚在**图标**上。
（顺带撞了 skill 里明写的坑：Stack 没有 `.justifyContent()`。）
② 「一个横着过去的白条，我真的服了」/「期望：融进背景」
WebUI 的顶栏**自身没有底色** —— 只有 `border-b border-gray-200`
（`ContactPanel.tsx:64`、`CommTabs.tsx:40`、`CalendarView.tsx:295`），
底色由所在面板给；壁纸开启时那层面板是玻璃色（`index.css:876`）。
鸿蒙三个窗格顶栏写死了 `Theme.surface`（实心白）⇒ 无论壁纸开没开，
顶上都是一条不通明白带。改成与**页面底**同一口径
（`bgActive ? Transparent : surface`）+ 补下边框。
③ 「日历页面和webui布局完全不同」
WebUI 是**左右两栏**（`CalendarView.tsx:452-457`）：左 `flex-1` 网格、
右 `400px` 常驻面板（日程 / 编辑器 / 小时网格三态互斥）。
鸿蒙原来是**单栏竖堆**。重搭为两栏，`paneWide` 由 `.onAreaChange`
量本页**自己的**宽度（不是屏幕宽度 —— 宽屏下这一页已被侧栏占掉一截）；
编辑器改占右栏位置（不再整页盖掉正在看的那个月）。
④ 「最严重的动画问题你一点也不该改」
日历是**常驻挂载**（`visibility` 控制，因为它里面 today 要随时间重算、
也要保住"正在看哪个月"），而 `.transition()` 只在**挂载/卸载**时触发
（SDK 原话 \"when it **appears and disappears**\"）⇒ 挂在它上面的
`.transition(paneRiseIn())` **一帧也不会播**，切过去是硬弹。
WebUI 踩过同一个坑并把错法写进了 `index.css:1305-1320`
（「只挂了类，却没让触发窗口出现 ⇒ 类挂着、动画永远不播」），
它的解法是 `html.view-switch` 重放窗口。ArkUI 对应物是
`animateTo` + 显式 `calPaneIn` 属性（`opacity` + `translate`）。
★ reset 必须在 `animateTo` **外**：写进回调里会与同帧的 1 相抵，
渲染层只看得见最终值 ⇒ 动画退化成一个瞬移。
顺带修：
· 宽屏侧栏 = 3 项（通信/日历/**联系**）+ 底部一簇（头像/主题/退出），
与底栏的四项（含「我的」）**不是同一份清单** —— WebUI 的 Sidebar 与
NarrowNav 本就不同（`Sidebar.tsx:26-44` vs `NarrowNav.tsx:37-40`+143）。
新增 `NAV_SIDEBAR_ITEMS` / `ME_PANE_INDEX` / `SIDEBAR_ITEM_*`。
· 退出登录抽成 `api/Logout.ets` 的 `performLogout()`：侧栏底簇与「我的」页
两个入口必须做同一件事（尤其"先注销推送 token"那一步），复制一份就会不一致。
· 徽标 `'plain'` 档底色：WebUI 是石板灰 `--c-chrome-600`（#475569），
我写成与未读共用红色 ⇒ 「联系」的徽标看起来像"有未读"。
· 主题快捷开关（侧栏底簇）：对齐 `ThemeToggleButton` —— 从 `system` 翻转时
落到**当前生效值的反面**（不是回 system；那可能毫无变化、让按钮看起来坏了）。
· 「浓度」→「压暗」+ 数值带单位（原先屏上印 `56.000000`；WebUI 是 `suffix="%"`）。
判据（8 个套件全绿：logic 28 / nav 18 / widescreen 7 / window 9 /
arkts 5 / contacts 5 / calendar 30 / system-api 5）：
· `harmony-widescreen` ② 重写：**回读 `Sidebar.tsx` 数 `short:` 的个数**
要求鸿蒙同数，并断言底部一簇三键真的被调用（`this.onToggleTheme()` ——
第一版写成 `/onToggleTheme/`，变异测试当场证明它不咬：属性**声明**还在，
正则照样匹上）。新增 ⑧：三档色调各自底色，期望值从 `--c-chrome-600` 读出。
· `harmony-nav` 动画条重写：改判**机制真的存在且被驱动**
（旧断言 `.visibility(...).transition(...)` 锁的正是那个 bug ——
判据引自己写的注释当依据，就会把错误锁死）。新增 reset-在-animateTo-外
这条断言（否则动画退化成瞬移）。
· `harmony-nav` 设备条：`navItemsOf` 的宽屏过滤从"左边缘靠左 1/6"
改成"**整个盒子在侧栏轨道内**" —— 旧条件把日历网格的格子
（实测 `[229,511][366,794]`）也当成导航项，一屏数出 11~12 个。
新增 `navRailItemsOf`：导航轨贴顶、底部簇在屏底，按位置切一刀。
· `harmony-logic` 两处：从 `NAV_ITEMS` / `NAV_SIDEBAR_ITEMS`
**各自的数组**里取 label —— 原先把全文件 `label:` 一网打尽，
得到 7 个（4+3 混在一起），任何一边改对了它都会红。
设备实测（HATriple 三折叠，3184×2232）：侧栏 3 项 + 底簇 / 底栏徽标回到
图标右上角 / 日历左右两栏与 WebUI 并排同构。
server/go.mod：补 2da38bb 漏提交的 lunar-go 依赖。
This commit is contained in:
@ -50,7 +50,6 @@ export interface NavItem {
|
||||
|
||||
/**
|
||||
* 底栏四枚图标 = 三个内容窗格 + 一个外壳入口，与 WebUI `NarrowNav.tsx` 的四入口一一对应。
|
||||
*
|
||||
* 前**三项**是平级内容窗格：通信（内部三栏：收件箱/发件箱/授权）、日历、联系人。
|
||||
* 第**四项**「我的」也是**内容窗格**（与前三项同一套机制，`currentIndex === 3`）——
|
||||
* 它承载设置/主题/壁纸/账号。★ 2026-09-17 修正：原先它是外壳入口（`route` 走
|
||||
@ -65,6 +64,9 @@ export interface NavItem {
|
||||
* （只读月视图：`pages/CalendarPage.ets`）已经做完，所以入口**现在**上：
|
||||
* 空页签那条理由不再成立，而日历的纯逻辑（`model/Calendar.ts`）本来就是照着
|
||||
* 「顶层是 通信/日历/联系人 三个平级 pane」写判据的。
|
||||
*
|
||||
* ★ `NAV_ITEMS` 是**底栏**的清单（四项）。宽屏侧栏的清单是 `NAV_SIDEBAR_ITEMS`
|
||||
* （三项 + 底部一簇），两者**不可互相替代** —— 理由见那份的注释。
|
||||
*/
|
||||
export const NAV_ITEMS: NavItem[] = [
|
||||
{ key: 'comm', label: '通信', iconKey: 'inbox' },
|
||||
@ -144,6 +146,60 @@ export const NAV_CONTENT_COUNT: number = 4;
|
||||
*/
|
||||
export const NAV_CONTENT_ITEMS: NavItem[] = NAV_ITEMS.slice(0, NAV_CONTENT_COUNT);
|
||||
|
||||
/* ─────────────────── 宽屏侧栏（与底栏**不是同一份清单**） ─────────────────── */
|
||||
|
||||
/**
|
||||
* 宽屏**侧栏**的导航项 —— 三项，**不含「我的」**。
|
||||
*
|
||||
* ★★ 2026-09-19 修（用户：「你写的app和webui大面积不符，问题特别大」）。
|
||||
*
|
||||
* 之前侧栏直接用 `NAV_CONTENT_ITEMS`（四项，含「我的」）——
|
||||
* **那是底栏的形状**，不是侧栏的。两套导航在 WebUI 里本来就不同，证据：
|
||||
*
|
||||
* · `Sidebar.tsx:26-44` 的 `navItems` 只有 **3 项**：通信 / 日历 / **联系**；
|
||||
* 「我的」不在这里 —— 它是 `Sidebar.tsx:186` 底部那一簇里的**头像按钮**
|
||||
* （`onClick={() => setViewMode('account')}`），与主题切换、退出并列；
|
||||
* · `NarrowNav.tsx:37-40` 的 `items` 是 3 项 + 第 4 个「我的」按钮
|
||||
* （`NarrowNav.tsx:143`），所以底栏**是**四项。
|
||||
*
|
||||
* 也就是说：**四项是对的，但只对底栏**。侧栏要三项 + 底部一簇。
|
||||
* 我把底栏那份直接 `slice()` 给侧栏用，于是并排一看就多出一个「我的」，
|
||||
* 而 WebUI 那一格是头像。
|
||||
*
|
||||
* ★ 第三项的文案也不同：侧栏是「**联系**」（`Sidebar.tsx:43` `short: '联系'`），
|
||||
* 底栏是「联系人」（`NarrowNav.tsx:39`）。两处各是各的字面量，不是笔误。
|
||||
*/
|
||||
export const NAV_SIDEBAR_ITEMS: NavItem[] = [
|
||||
{ key: 'comm', label: '通信', iconKey: 'inbox' },
|
||||
{ key: 'calendar', label: '日历', iconKey: 'calendar' },
|
||||
{ key: 'contacts', label: '联系', iconKey: 'contacts' }
|
||||
];
|
||||
|
||||
/**
|
||||
* 侧栏第三项在 `NAV_CONTENT_ITEMS` 里的下标（`contacts`）。
|
||||
*
|
||||
* 侧栏只画三项，但点击要选中 `currentIndex`（内容窗格的下标，四项那套）。
|
||||
* 用具名常量而不是就地写 `2`：这一项的顺序要与 `NAV_SIDEBAR_ITEMS` 的构图一致，
|
||||
* 改顺序时只改一处。
|
||||
*/
|
||||
export function sidebarContentIndex(key: string): number {
|
||||
for (let i = 0; i < NAV_CONTENT_ITEMS.length; i++) {
|
||||
if (NAV_CONTENT_ITEMS[i].key === key) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** 「我的」内容窗格的下标（侧栏底部头像点它进账户页） */
|
||||
export const ME_PANE_INDEX: number = 3;
|
||||
|
||||
/** 侧栏底色块宽度（vp）—— WebUI `Sidebar.tsx` 的 `w-12 h-12` */
|
||||
export const SIDEBAR_ITEM_SIZE: number = 48;
|
||||
|
||||
/** 侧栏圆角（vp）—— WebUI 的 `rounded-lg` */
|
||||
export const SIDEBAR_ITEM_RADIUS: number = 12;
|
||||
|
||||
/**
|
||||
* 「我的」的路由目标（`SettingsPage` 仍然存在，供别处按需推页）。
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user