abc-common-header v1.2.10

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

消息中心按钮组件属性

产品菜单按钮组件属性

下拉选择框组件属性

用户信息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的翻译文件。