JianFeeeee
fd4b475920
用户反馈：① 图标太小 ② 底部导航栏不允许有文字。 - NavItem（底部导航）：去掉 Text(item.label) 纯图标，AmIcon 22→28vp - WideSidebar（宽屏侧栏）：去掉 label 文字（WebUI Sidebar 本就是 60px 纯图标轨）， 导航图标 22→26vp、品牌标 26→30vp；NavItemBuilder 去掉 label 参数 - Theme：新增 glassRadius=14 / paneGap=10（与 WebUI app-shell CSS 变量同值， 用于宽屏玻璃面板几何；原有 radiusCard 保持系统跟随不动） - 判据同步：harmony-nav ⑤ 改纯图标（1 处三元式 + 无文字 + 28vp）+ 变异自检三项； harmony-widescreen ③ 同样改纯图标（1 处 + 无文字 + 26vp）
79 lines
2.5 KiB
Plaintext
79 lines
2.5 KiB
Plaintext
/*
|
||
* 宽屏侧栏图标轨 —— **一比一复刻 WebUI 的 `Sidebar.tsx`**。
|
||
*
|
||
* WebUI 的 `Sidebar`（60px 宽）是**纯图标轨**（无 label 文字）：
|
||
* · 品牌标（顶部）
|
||
* · 通信 / 日历 / 联系人（中部）
|
||
* · 设置（底部）
|
||
* 选中态：图标变色（`navFgActive`），**不加背景块、不加指示条、不加文字**
|
||
* （用户 2026-09-16：「底部导航栏不允许有文字」⇒ 侧栏同样按纯图标走）。
|
||
* 图标 26vp（WebUI 侧是 24，鸿蒙放大一档 —— 用户嫌 22 太小）。
|
||
*
|
||
* 鸿蒙这一侧原先**完全没有宽屏布局**（只有底部导航条），所以这个文件同时承担
|
||
* "宽屏入口"的角色。判据 `harmony-widescreen.test.mjs` 会检查：
|
||
* · 60vp 宽（与 WebUI 的 60px 一致）
|
||
* · 三项导航 + 设置按钮
|
||
* · 选中态只换颜色（与底部导航同一套纪律）
|
||
*/
|
||
|
||
import { Theme } from '../common/Theme';
|
||
import { AmIcon } from '../common/Icons';
|
||
import { NAV_ITEMS, NavItem } from '../model/NavItems';
|
||
|
||
/** 侧栏宽度（vp）。WebUI 的 `Sidebar` 用 `w-[60px]` */
|
||
export const SIDEBAR_WIDTH: number = 60;
|
||
|
||
@Component
|
||
export struct WideSidebar {
|
||
/** 当前选中的导航下标 */
|
||
@Prop currentIndex: number = 0;
|
||
/** 选中回调 */
|
||
onSelect: (index: number) => void = (): void => {};
|
||
/** 设置回调 */
|
||
onSettings: () => void = (): void => {};
|
||
|
||
@Builder
|
||
NavItemBuilder(key: string, iconKey: string, index: number) {
|
||
Column() {
|
||
AmIcon({
|
||
iconName: iconKey,
|
||
iconSize: 26,
|
||
iconColor: this.currentIndex === index ? Theme.navFgActive : Theme.navFg
|
||
})
|
||
}
|
||
.width('100%')
|
||
.layoutWeight(1)
|
||
.justifyContent(FlexAlign.Center)
|
||
.onClick(() => { this.onSelect(index); })
|
||
}
|
||
|
||
build() {
|
||
Column() {
|
||
// 品牌标
|
||
AmIcon({ iconName: 'brandMark', iconSize: 30, iconColor: Theme.accent })
|
||
.margin({ bottom: 16 })
|
||
|
||
// 导航项
|
||
ForEach(NAV_ITEMS, (item: NavItem, index: number) => {
|
||
this.NavItemBuilder(item.key, item.iconKey, index)
|
||
}, (item: NavItem) => item.key)
|
||
|
||
Blank()
|
||
|
||
// 设置
|
||
Column() {
|
||
AmIcon({ iconName: 'person', iconSize: 26, iconColor: Theme.navFg })
|
||
}
|
||
.width('100%')
|
||
.layoutWeight(1)
|
||
.justifyContent(FlexAlign.Center)
|
||
.onClick(() => { this.onSettings(); })
|
||
}
|
||
.width(SIDEBAR_WIDTH)
|
||
.height('100%')
|
||
.padding({ top: 12, bottom: 12 })
|
||
.backgroundColor(Theme.surface)
|
||
.borderRadius(Theme.glassRadius)
|
||
}
|
||
}
|