❤
npm
Sign UpSign In

abc-common-header

1.2.10 • Public • Published

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的翻译文件。

Readme

Keywords

none

Package Sidebar

Install

npm i abc-common-header

Weekly Downloads

2

Version

1.2.10

License

none

Unpacked Size

1.86 MB

Total Files

80

Last publish

Collaborators

  • huangteacher
Try on RunKit
Report malware