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属性引入