ke: 鸿蒙导航纯图标 + 图标加大 + 玻璃几何令牌
用户反馈:① 图标太小 ② 底部导航栏不允许有文字。 - 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)
This commit is contained in:
@ -1,12 +1,13 @@
|
||||
/*
|
||||
* 宽屏侧栏图标轨 —— **一比一复刻 WebUI 的 `Sidebar.tsx`**。
|
||||
*
|
||||
* WebUI 的 `Sidebar`(60px 宽)是一列图标按钮:
|
||||
* WebUI 的 `Sidebar`(60px 宽)是**纯图标轨**(无 label 文字):
|
||||
* · 品牌标(顶部)
|
||||
* · 通信 / 日历 / 联系人(中部)
|
||||
* · 设置(底部)
|
||||
* 选中态:文字/图标变色 + 品牌浅底(`nav-active-bg`),**不加背景块、不加指示条**
|
||||
* (用户 2026-09-14:「同时底部导航栏选中对应的文字和图标变色即可」)。
|
||||
* 选中态:图标变色(`navFgActive`),**不加背景块、不加指示条、不加文字**
|
||||
* (用户 2026-09-16:「底部导航栏不允许有文字」⇒ 侧栏同样按纯图标走)。
|
||||
* 图标 26vp(WebUI 侧是 24,鸿蒙放大一档 —— 用户嫌 22 太小)。
|
||||
*
|
||||
* 鸿蒙这一侧原先**完全没有宽屏布局**(只有底部导航条),所以这个文件同时承担
|
||||
* "宽屏入口"的角色。判据 `harmony-widescreen.test.mjs` 会检查:
|
||||
@ -32,19 +33,16 @@ export struct WideSidebar {
|
||||
onSettings: () => void = (): void => {};
|
||||
|
||||
@Builder
|
||||
NavItemBuilder(key: string, label: string, iconKey: string, index: number) {
|
||||
NavItemBuilder(key: string, iconKey: string, index: number) {
|
||||
Column() {
|
||||
AmIcon({
|
||||
iconName: iconKey,
|
||||
iconSize: 22,
|
||||
iconSize: 26,
|
||||
iconColor: this.currentIndex === index ? Theme.navFgActive : Theme.navFg
|
||||
})
|
||||
Text(label)
|
||||
.fontSize(Theme.fontTiny)
|
||||
.fontColor(this.currentIndex === index ? Theme.navFgActive : Theme.navFg)
|
||||
.margin({ top: 2 })
|
||||
}
|
||||
.width('100%')
|
||||
.layoutWeight(1)
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.onClick(() => { this.onSelect(index); })
|
||||
}
|
||||
@ -52,22 +50,22 @@ export struct WideSidebar {
|
||||
build() {
|
||||
Column() {
|
||||
// 品牌标
|
||||
AmIcon({ iconName: 'brandMark', iconSize: 26, iconColor: Theme.accent })
|
||||
AmIcon({ iconName: 'brandMark', iconSize: 30, iconColor: Theme.accent })
|
||||
.margin({ bottom: 16 })
|
||||
|
||||
// 导航项
|
||||
ForEach(NAV_ITEMS, (item: NavItem, index: number) => {
|
||||
this.NavItemBuilder(item.key, item.label, item.iconKey, index)
|
||||
this.NavItemBuilder(item.key, item.iconKey, index)
|
||||
}, (item: NavItem) => item.key)
|
||||
|
||||
Blank()
|
||||
|
||||
// 设置
|
||||
Column() {
|
||||
AmIcon({ iconName: 'person', iconSize: 22, iconColor: Theme.navFg })
|
||||
Text('我的').fontSize(Theme.fontTiny).fontColor(Theme.navFg).margin({ top: 2 })
|
||||
AmIcon({ iconName: 'person', iconSize: 26, iconColor: Theme.navFg })
|
||||
}
|
||||
.width('100%')
|
||||
.layoutWeight(1)
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.onClick(() => { this.onSettings(); })
|
||||
}
|
||||
@ -75,6 +73,6 @@ export struct WideSidebar {
|
||||
.height('100%')
|
||||
.padding({ top: 12, bottom: 12 })
|
||||
.backgroundColor(Theme.surface)
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.borderRadius(Theme.glassRadius)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user