Header 用于承载业务品牌、搜索、通知和快捷入口。
保留当前确认正确的展示样式，统一用于组件验收和后续细节微调。
当前页面仅展示单一确认版本，用于观察搜索框、提示条、头像组以及右侧图标的最终排布。
IM 房间头部变体，包含会话信息、快捷操作按钮以及右侧工具 icon。
该变体使用项目按钮组件和 iconfont，适用于私聊或 IM 会话场景的房间头部。
语音房头部变体，包含房间信息、邀请按钮、密码开关和右侧更多操作。
该变体复用项目按钮、switch 密码样式和 iconfont，适用于语音房场景的房间头部。
专属房间头部变体，包含房间入口、搜索框和创建房间按钮。
该变体复用项目 Input 和 Button 组件，适用于专属房间的检索与创建场景。
社区大厅头部变体，包含大厅图标、标题、邀请/分享按钮和公告信息。
该变体适用于社区大厅场景，保留左侧大厅信息、邀请/分享操作和公告信息。
旗下社区头部变体，包含战队图标、标题和创建战队社区按钮。
该变体适用于旗下社区页面顶部，右侧创建入口复用项目 Button 组件。
游戏服务头部变体，包含游戏服务标题、公告、订单动态和陪玩操作。
该变体适用于陪玩/游戏服务页面顶部，右侧成为陪玩和联系客服操作复用项目 Button 组件。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| variant | Header 变体类型，支持默认头部、IM 房间头部、语音房头部、专属房间头部、社区大厅头部、旗下社区头部和游戏服务头部 | string | 'default' | 'room-header-im' | 'room-header-voice' | 'room-header-exclusive-room' | '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 的操作按钮列表，复用项目 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: '8', 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 | - | [] |
| exclusiveTitle | room-header-exclusive-room 左侧标题 | string | - | '专属房间' |
| exclusiveIconClass | room-header-exclusive-room 左侧专属房间 icon 的 iconfont 类名 | string | - | 'nicon-a-Exclusiveroom-Linezhuanshufangjian-xianxing' |
| searchPlaceholder | room-header-exclusive-room 搜索框占位文案 | string | - | '搜索房间内容/房间号' |
| searchValue / onSearch | room-header-exclusive-room 搜索初始值与搜索 icon 点击回调 | string / function | - | '' / null |
| createAction | room-header-exclusive-room 创建房间按钮配置，复用项目 Button 组件 | object | { text, variant, level, size } | { text: '创建房间', variant: 'system', level: 'primary', size: 'default' } |
| hallTitle | room-header-community-hall 左侧大厅标题 | string | - | '英雄联盟社区' |
| hallIconClass | room-header-community-hall 左侧大厅 icon 的 iconfont 类名 | string | - | 'nicon-a-Lounge-Linexianliaodating-xianxing' |
| announcement | room-header-community-hall / room-header-play-with 公告文案；传入空字符串时不展示 | string | - | '新用户进入群时默认访问的频道已设置' |
| showAnnouncementDot | 公告条是否展示未读红点 | boolean | true | false | true |
| 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' |
| orderActivity | room-header-play-with 订单动态配置；传入 null 时不展示 | object | { name, text, service } | { name: 'Candice', text: '刚刚下单了', service: 'TR阳光彩虹' } |
| className | 自定义类名 | string | - | '' |