Header 用于承载业务品牌、搜索、通知和快捷入口。
保留当前确认正确的展示样式,统一用于组件验收和后续细节微调。
当前页面仅展示单一确认版本,用于观察搜索框、提示条、头像组以及右侧图标的最终排布。
IM 房间头部变体,包含会话信息、快捷操作按钮以及右侧工具 icon。
该变体使用项目按钮组件和 iconfont,适用于私聊或 IM 会话场景的房间头部。
语音房头部变体,包含房间信息、邀请按钮、密码开关和右侧更多操作。
该变体复用项目按钮、switch 密码样式和 iconfont,适用于语音房场景的房间头部。
社区大厅头部变体,包含大厅图标、标题和邀请按钮。
该变体适用于社区大厅场景,保留左侧大厅信息和中部邀请按钮,右侧内容为空。
旗下社区头部变体,包含战队图标、标题和创建战队社区按钮。
该变体适用于旗下社区页面顶部,右侧创建入口复用项目 Button 组件。
游戏服务头部变体,包含游戏服务标题、服务入驻和联系客服操作。
该变体适用于陪玩/游戏服务页面顶部,右侧操作复用项目 Button 组件。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| variant | Header 变体类型,支持默认头部、IM 房间头部、语音房头部、社区大厅头部、旗下社区头部和游戏服务头部 | string | 'default' | 'room-header-im' | 'room-header-voice' | 'room-header-community-hall' | 'room-header-under-community' | 'room-header-play-with' | 'default' |
| width | 组件宽度,支持数字或 CSS 宽度字符串 | number | string | - | '100%' |
| brandName | 品牌名称,仅用于 logo 图片的 alt 文本 | string | - | 'NN.COM' |
| logoLightSrc | 亮色模式下的 logo 图片地址 | string | - | '../image/Header/logo-light.png' |
| logoDarkSrc | 暗色模式下的 logo 图片地址 | string | - | '../image/Header/logo-dark.png' |
| showBack | 默认头部中是否显示返回区域 | boolean | true | false | true |
| backText | 返回区域文案;传入后返回区域显示为可点击态 | string | - | '' |
| backHref | 返回区域跳转链接 | string | - | '' |
| onBackClick | 返回区域点击回调 | function | - | null |
| searchPlaceholder | 默认头部搜索输入框的原生占位文案 | string | - | '搜索社区、用户名称/ID' |
| searchKeywords | 默认头部搜索框展示文案列表,当前仅使用第一项固定展示 | string[] | - | ['搜索社区、用户名称/ID'] |
| noticeText | 默认头部中部消息条文案 | string | - | '新用户进入群时默认时默认...' |
| showNoticeDot | 默认头部消息条右上角是否显示红点徽标 | boolean | true | false | true |
| avatarItems | 默认头部右侧头像组数据,支持头像图、尺寸和徽标 | array | - | [] |
| rightIcons | 默认头部右侧消息和更多图标配置 | array | - | [] |
| showWindowControls | 默认头部是否显示最右侧系统 icon 组 | boolean | true | false | true |
| nickname | room-header-im 左侧用户昵称 | string | - | "User's nickname" |
| metaText | room-header-im 左侧辅助文案 | string | - | '临时会话' |
| actions | room-header-im 中部按钮列表,复用项目 button 组件 | array | - | [] |
| iconActions | room-header-im / room-header-voice 右侧 icon 列表 | array | - | [] |
| roomCount | room-header-voice 左侧房间计数徽标文案 | string | - | '52' |
| roomTitle | room-header-voice 房间标题 | string | - | '语音房名称多少度' |
| infoTooltip | room-header-voice 左侧整个语音房信息 box 的 tooltip 文案 | string | - | '编辑招募信息' |
| roomStats | room-header-voice 房间人数统计 | object | { current, total } | { current: '12', total: '10' } |
| passwordSwitch | room-header-voice 密码开关配置,复用 switch 组件的 password 样式 | object | { passwordState, passwordCode, hiddenCode } | { passwordState: 'filled', passwordCode: '8538', hiddenCode: '••••' } |
| rightButtons | room-header-voice 右侧更多 icon 前的按钮组,复用 System button 组件 | array | - | [] |
| hallTitle | room-header-community-hall 左侧大厅标题 | string | - | '英雄联盟社区' |
| hallIconClass | room-header-community-hall 左侧大厅 icon 的 iconfont 类名 | string | - | 'nicon-a-Lounge-Linexianliaodating-xianxing' |
| underTitle | room-header-under-community 左侧标题 | string | - | '旗下社区' |
| underIconClass | room-header-under-community 左侧战队 icon 的 iconfont 类名 | string | - | 'nicon-a-BattleTeam-Linezhandui-xianxing' |
| playTitle | room-header-play-with 左侧标题 | string | - | '游戏服务' |
| playIconClass | room-header-play-with 左侧游戏服务 icon 的 iconfont 类名 | string | - | 'nicon-a-GameswithPlay-Lineyouxidaiwan-xianxing' |
| className | 自定义类名 | string | - | '' |