app-header-react

博睿-公共头部组件 react 版

依赖

本组件依赖react、bonree-design,在实际项目中需引入上述 2 个 npm 包，才能正常使用本组件。

组件传参

参数	解释	类型	默认	是否必须
cloudpath	cloud 项目网址	string	http://devtest.ibr.cc:20365	是
helpPath	帮助中心网址	string	无	否
officialPath	官网网址	string	https://www.bonree.com	否
appImgUrl	app 二维码图片地址	string	是	无
acountImgUrl	公众号二维码图片地址	string	是	无
local	国际化语言，目前只接受'en'或者'zh'	string	zh	是
accountInfo	用户信息，必须含有 用户等级 accountLevel,用户姓名 accountName 字段。账号等级 0-管理员 1-账号 2-用户	{accountLevel,accountName}	{}	是
productList	博睿所有产品,数组对象必须含有 产品名称 title, 产品网址 website 字段	[{title,website}]	[]	是
toIndex	点击头部组件 logo 时触发的操作	function	默认跳转到 officialPath	否
changeLanguage	改变语言	function	无	是
handleLogout	退出操作	function	无	是
menuList	右侧菜单配置项	[{label,labelEn,svg,path}]	无	否

本地调试

本地调试使用npm link方式直接在项目中引入本地 build 之后的 app-header-react 组件。使用 npm link 可能会出现的问题

使用用例

安装 npm 包

npm install app-header-react or yarn add app-header-react

引入使用

项目中按需引入 bonree-icons，按需引入方法

import PublicHeader from "app-header-react";
import {
  PersonalInformation,
  PersonalLicense,
  PersonalVisit,
  PersonalCharging,
  PersonalLogOut,
} from "bonree-icons";
import appImg from "../../../assets/images/app.jpg";
import accountImg from "../../../assets/images/account.jpg";

<PublicHeader
  cloudPath="http://devtest.ibr.cc:20365"
  officialPath="https://www.bonree.com"
  appImgUrl={appImg}
  accountImgUrl={accountImg}
  locale={i18n.language}
  accountInfo={{ accountLevel: 1, accountName: "asdad" }}
  productList={[
    { title: "mp", website: "http://devtest.ibr.cc:20365" },
    { title: "Server", website: "http://devtest.ibr.cc:203656" },
    { title: "MobileSDK", website: "http://devtest.ibr.cc:203657" },
    { title: "Browser", website: "http://devtest.ibr.cc:203658" },
    { title: "DataView", website: "http://devtest.ibr.cc:203659" },
  ]}
  toIndex={backHome}
  changeLanguage={_changeLanguage}
  handleLogout={handleQuit}
  menuList={[
    {
      label: "基本信息",
      labelEn: "Profile",
      svg: PersonalInformation,
      path: "/user/info",
    },
    {
      label: "License管理",
      labelEn: "License Management",
      svg: PersonalLicense,
      path: "/license/list",
    },
    {
      label: "访问控制",
      labelEn: "Access Control",
      svg: PersonalVisit,
      path: "/access/user/list",
    },
    {
      label: "计费管理",
      labelEn: "Billing Management",
      svg: PersonalCharging,
      path: "/charge/list",
    },
    {
      label: "退出登录",
      labelEn: "Log out",
      svg: PersonalLogOut,
      path: "/logout",
    },
  ]}
/>;

版本

V1.0.2

1. 第一版

V1.0.3

1. 修改说明文档

V2.X

1. 变更依赖，将 peerDependencies 中的antd 变更为 bonree-design

V3.X

1. 修复 bug
2. 去除默认右侧菜单项，改为通过menuList属性引入
3. 去除默认 App 图片，改为通过appImgUrl属性引入
4. 去除默认公众号二维码图片，改为通过accountImgUrl属性引入