CommonHeader - 公共头部组件

公共头部组件，包含搜索框、主导航菜单、二级导航菜单、热门搜索、返回主站首页按钮、九宫格产品菜单按钮、登陆用户信息、语言切换按钮、消息中心按钮等一系列功能组件及多种布局类型的样式。

项目主页

适用范围

所有需要使用公共头部组件的页面、详情页等等，下图为各种类型的头部组件截图：

代码演示

上列组件截图中所列出的几种头部类型的关键配置属性将在下列演示代码中一一对应：

import CommonHeader from 'abc-common-header';

...

// 综搜默认头部
<CommonHeader
  userInfo={userStore.userInfo}
  userInfoLoadState={userStore.state}
  hotKeyword={suggestStore.hotKeyword}
  hotSearch={suggestStore.hotSearch.toJS()}
  searchSuggest={suggestStore.searchSuggest.toJS()}
  onSearch={this.handleSearch}
  onRequestSearchSuggest={this.handleRequestSearchSuggest}
  mainNavMenu={this.state.mainNavMenu}
  onMainNavMenuClick={this.handleMainNavMenuClick}
/>

// 综搜默认头部 - 限制主导航菜单项最大显示数量
<CommonHeader
  ...

  // 关键属性
  mainNavMenuMaxShowCount={6}
/>

// 详情页头部
<CommonHeader
  ...

  // 关键属性
  type="thin"
  title="上市公司"
/>

// 详情页头部 - 不带搜索框
<CommonHeader
  ...

  // 关键属性
  type="thin"
  title="上市公司"
  showSearchBox={false}
/>

// 子站标准头部
<CommonHeader
  ...

  // 关键属性
  type="normal"
  logoImageUrl={logoUrl}
/>

// 子站标准头部 - 不带搜索框 - 带主导航
<CommonHeader
  ...

  // 关键属性
  type="normal"
  logoImageUrl={logoUrl}
  showSearchBox={false}
  mainNavMenu={this.state.mainNavMenu}
  onMainNavMenuClick={this.handleMainNavMenuClick}
/>

// 子站头部标准 - 带热门搜索及二级导航
<CommonHeader
  ...

  // 关键属性
  type="normal"
  logoImageUrl={logoUrl}
  hotQueryMenu={this.state.hotQueryMenu}
  onHotQueryMenuClick={({key, item}) => console.log(key, item)}
  secondaryNavMenu={this.state.secondaryNavMenu}
  onSecondaryNavMenuClick={this.handleSecondaryNavMenuClick}
/>

API

|属性|说明|类型|默认值| |:--|:--|:--:|:--:| |type|头部组件类型，默认为综搜结果页头部样式，可选值：default(默认，综搜头部样式，居左对齐)，normal(子站头部样式，居中对齐)，thin(详情页头部样式，居左对齐，高度变窄)|string|default| |fixed|是否固定定位在头部|bool|true| |title|头部标题，用于详情页头部|string|undefined| |logoImageUrl|头部logo图片地址|string|主站logo| |logoLinkUrl|头部logo链接地址|string|/| |mainSiteOrigin|主站起始地址|string|https://www.analyst.ai| |autoAdjustTopPadding|当组件为固定定位在头部时，是否自动调整页面头部填充|bool|true| |mainNavMenu|主导航菜单|array|undefined| |mainNavMenuMaxShowCount|主导航菜单项最大显示个数，超出的菜单项目将显示在“更多”子菜单项中|number|7| |onMainNavMenuClick|主导航菜单点击事件回调，回调函数签名：function ({ item, key })|function|undefined| |secondaryNavMenu|二级导航菜单|array|undefined| |secondaryNavMenuMaxShowCount|二级导航菜单项最大显示个数，超出的菜单项目将显示在“更多”子菜单项中|number|7| |onSecondaryNavMenuClick|二级导航菜单点击事件回调，回调函数签名：function ({ item, key })|function|undefined| |userInfo|用户信息数据|object|undefined| |userInfoLoadState|用户信息数据的加载状态：pending / done / error|string|undefined| |hotKeyword|预制热词（搜索框placeholder）|object|undefined| |hotSearch|热门搜索列表数据|array|undefined| |hotQueryMenu|热搜语句导航菜单|array|undefined| |hotQueryMenuTitle|热搜语句导航菜单标题|string|热门搜索：| |onHotQueryMenuClick|热搜语句导航菜单项点击事件，回调函数签名：function ({ item, key })|function|undefined| |searchSuggest|搜索建议列表数据|array|undefined| |searchBoxPlaceholder|搜索框占位文本|string|""| |searchHistoryKey|搜索历史的存储Key，用于客户端存储标识|string|SEARCH_HISTORY| |searchHistoryNS|搜索历史的命名空间，用于区别搜索历史的作用域，为空则使用全局搜索历史|string|""| |onSearch|搜索事件回调，回调函数签名：function ({ keyword }, { inputFrom, suggestion? })|function|undefined| |onRequestSearchSuggest|请求搜索建议事件回调，回调函数签名：function (keyword)|function|undefined| |showSearchBox|是否显示搜索框|bool|true| |showLanguageToggle|是否显示语言切换按钮|bool|false| |languages|语言配置,有语言配置无需showLanguageToggle, icon的值覆盖flag配置['zh_cn', {key: 'zh_hk', icon:'iconurl', flag: 'mo'}, en]|array|['zh_cn', 'zh_hk', 'en']| |onLanguageChange|语言切换按回调，回调函数签名：function(language, i18n)|function|undefined| |showHomeButton|是否显示返回主站首页按钮|bool|true| |showProductMenuButton|是否显示产品菜单按钮|bool|true| |showMessageCenterButton|是否显示消息中心按钮|bool|false| |showLoginUserInfo|是否显示登陆用户信息|bool|true| |suggestCategoryInfoMap|搜索建议实体类型相关配置信息映射表，数据结构详见下文|object|综搜默认配置| |messageCenterProps|消息中心按钮组件属性，未定义或传递空对象时将不显示消息中心按钮组件，属性参数详见下表|object|undefined| |productMenuButtonProps|产品菜单按钮属性，未定义或传递空对象时将使用默认相关属性，传递的属性将覆盖默认的相关属性，属性参数详见下表|object|undefined| |productMenuLinkTarget|产品菜单链接的打开方式，同a标签的target属性，默认在当前窗口打开|string|_self| |loginUserMenuLinkTarget|登陆用户菜单项链接的打开方式，同a标签的target属性，默认在当前窗口打开|string|_self| |homeButtonProps|返回主站首页按钮链接的属性对象，用于修改链接的默认属性|object|undefined| |selectProps|搜索框下拉选择框组件属性对象，默认关闭此能力，当传递该对象时，打开此能力，属性参数详见下表|object|undefined|

消息中心按钮组件属性

|属性|说明|类型|默认值| |:--|:--|:--:|:--:| |loading|是否显示加载指示器|bool|false| |unreadCount|未读消息条数|number|0| |overflowCount|未读消息展示封顶的数字值|number|99| |messages|消息列表数据|array|undefined| |messageMaxShowCount|消息列表最大显示条数|number|3| |onMessageClick|消息点击事件回调，默认点击后跳转到对应的feed流页面，回调函数签名：function (event, message)|function|undefined| |popoverTitle|消息列表弹出层标题|string|消息中心| |popoverPlacement|消息中心弹出层内容的显示位置，默认显示在下方右对齐|string|bottomRight| |markAllReadButtonText|全部标记为已读按钮文本|string|全部标记为已读| |onMarkAllReadClick|全部标记为已读按钮点击事件回调，回调函数签名：function (event)|function|undefined| |readAllButtonText|查看全部消息按钮文本|string|查看全部消息| |onReadAllClick|查看全部消息按钮点击事件回调，默认点击后跳转到对应的feed流页面，回调函数签名：function (event)|function|undefined|

产品菜单按钮组件属性

|属性|说明|类型|默认值| |:--|:--|:--:|:--:| |loading|是否显示加载指示器|bool|false| |title|菜单标题文本|string|"全部产品"| |userInfo|用户信息数据|object|{}| |popoverPlacement|产品菜单弹出层的显示位置，默认显示在下方右对齐|string|"bottomRight"| |linkTarget|产品菜单链接的打开方式，同a标签的target属性，默认在当前窗口打开|string|_self| |onMenuItemClick|菜单项点击事件回调，回调函数签名：function (event, item)|function|undefined|

下拉选择框组件属性

|属性|说明|类型|默认值| |:--|:--|:--:|:--:| |defaultValue|默认值|string|undefined| |selectData|下拉菜单数据，结构: [{text: '', ...}]|object|[]| |handleSelectChange|选中option回调函数：function (value, option)|function|undefined|

用户信息userInfo属性的依赖数据详情请参考用户中心接口

预制热词hotKeyword与热门搜索列表hotSearch属性的依赖数据详情请参考搜索热词接口

搜索建议列表searchSuggest属性的依赖数据详情请参考搜索建议接口

主导航菜单mainNavMenu，二级导航菜单secondaryNavMenu，热搜语句导航菜单hotQueryMenu属性的依赖数据结构：

[
  {
    key: 'home',
    text: '首页',
    link: '/',
    selected: true,
  },
  {
    key: 'notice',
    text: '公告',
    link: '/notice',
    selected: false,
  },
  {
    key: 'report',
    text: '研报',
    link: '/report',
    selected: false,
  },
  ...
]

其中热搜语句导航菜单hotQueryMenu数据对象中无需selected字段。

suggestCategoryInfoMap搜索建议实体类型相关配置信息映射表的数据结构及默认配置：

// 股票市场代码对应名称映射表
export const stockMarketMap = {
  "sh": "沪市",
  "sz": "深市",
  "hk": "港股",
  "oc": "三板",
  "aon": "美股",
};

// 搜索建议实体类型相关配置信息映射表
export const suggestCategoryInfoMap = {
  // Query
  "query": {
    // 对应实体类型建议的额外说明文本
    // 值类型：string | ReactNode | function (suggestion)
    // 为false时不显示额外说明
    extra: false,

    // 对应实体类型建议的实体详情页面地址
    // 值类型：string | function (suggestion)
    // 为false时不显示详情页面链接
    detailLink: false,
  },
  
  // 股票
  "stock": {
    extra: suggestion => (
      <Fragment>
        <span>{suggestion.code}</span>
        <span>{stockMarketMap[suggestion.category_v2]}</span>
      </Fragment>
    ),
    detailLink: suggestion => (
      `/entity-search/listed-company`
      + `?stock_code=${suggestion.code}`
      + `&stock_name=${suggestion.content}`
      + `&com_uni_code=${suggestion.uni_code2}`
      + `&sec_uni_code=${suggestion.uni_code}`
    ),
  },

  // 基金
  "fund": {
    extra: suggestion => (
      <Fragment>
        <span>{suggestion.code}</span>
        <span>基金</span>
      </Fragment>
    ),
    detailLink: suggestion => (
      `/entity-search/fund/${suggestion.code}`
      + `?sec_uni_code=${suggestion.uni_code}`
    ),
  },

  // 指数
  "index": {
    extra: suggestion => (
      <Fragment>
        <span>{suggestion.code}</span>
        <span>指数</span>
      </Fragment>
    ),
    detailLink: false,
  },

  // 主题
  "plate": {
    extra: "主题",
    detailLink: suggestion => (
      `/entity-search/theme/${suggestion.uni_code2}`
      + `?name=${suggestion.content}`
    ),
  },

  // 行业
  "industry": {
    extra: "行业",
    detailLink: suggestion => (
      `/entity-search/industry/${suggestion.uni_code2}`
      + `?name=${suggestion.content}`
    ),
  },

  // 券商
  "broker": {
    extra: "券商",
    detailLink: suggestion => (
      `/entity-search/broker/${suggestion.uni_code}`
    ),
  },

  // 基金公司
  "fundcompany": {
    extra: "基金公司",
    detailLink: suggestion => (
      `/entity-search/funds-company/${suggestion.uni_code}`
      + `?name=${suggestion.content}`
    ),
  },

  // 分析师
  "analyst": {
    extra: suggestion => `${toString(suggestion.content2)}分析师`,
    detailLink: suggestion => (
      `/entity-search/analyst?id=${suggestion.uni_code}`
    ),
  },

  // 基金经理
  "fundmanager": {
    extra: suggestion => `${toString(suggestion.content2)}基金经理`,
    detailLink: suggestion => (
      `/entity-search/fund-manager/${suggestion.uni_code}`
    ),
  },

  // 公司高管
  "corporateexecutive": {
    extra: suggestion => `${toString(suggestion.content2)}高管`,
    detailLink: suggestion => (
      `/entity-search/corporate-executive/${suggestion.uni_code}`
    ),
  },

  // 金融大V
  "financevip": {
    extra: "金融大V",
    detailLink: suggestion => (
      `/entity-search/finance-vip/${suggestion.uni_code}`
    ),
  },

  // 公众号
  "wechat": {
    extra: "微信公众号",
    detailLink: suggestion => (
      `/entity-search/wechat-public/${suggestion.uni_code}`
      + `?name=${suggestion.content}`
    ),
  },
};

备注： 头部中的搜索框组件中的值value是由路由驱动的，其值将与路由中的keyword查询参数自动保持同步（在每次路由改变时），为了遵循单一来源原则，使网站数据加载统一由路由来驱动，如果需要修改搜索框的value，请通过react-router-dom的Link组件或其高阶组件withRouter配合history的push或replace方法来更改路由查询参数中的keyword字段来实现。
如果不想使用组件本身的翻译文件，可以在顶级全量配置abcCommonHeader的翻译文件。