@digitalzz/bizui NPM

安装

使用 npm

npm install @digitalzz/bizui --D

使用 yarn

yarn add @digitalzz/bizui

如何使用

组件引入
1.1 登录组件

import React from "react";
import { Login } from "@digitalzz/bizui";
import {
  sendSmsCodeApi,
  smsLoginApi,
  pwdLoginApi,
  getZhbQrcode,
  getZhbUserInfoApi,
  zzdBindPhoneLoginApi,
  zzdLoginApi
} from "./services/login";
import "@digitalzz/bizui/dist/@digitalzz/bizui.min.css";
import styles from "./index.less";

const App = props => {
  <Login
    showHeader={true} //是否展示header
    showFooter={true} //是否展示footer
    bgColor="#002766" //背景色
    zzdIframeUrl="https://login-dingding.zhengzhou.gov.cn/oauth2/auth.htm?response_type=code&client_id=zkp_dingoa&redirect_uri=http://59.207.61.4:11373&scope=get_user_info&authType=QRCODE&embedMode=true" // 郑政钉登录码地址
    isSwitchVerCode={true} // 是否开启验证码登录
    verificationCodeApi={verificationCodeApi} // 验证码api
    sendSmsCode={sendSmsCodeApi} // 发送短信验证码api
    smsLogin={smsLoginApi} // 短信登录api
    pwdLogin={pwdLoginApi} // 账号密码登录api
    getZhbQrcode={getZhbQrcode} // 获取郑好办登陆码api
    getZhbUserInfo={getZhbUserInfoApi} // 获取郑好办用户信息api
    // zzdBindPhoneLoginApi={zzdBindPhoneLoginApi} // 郑政钉登录绑定手机信息api(1.0.5之后废弃)
    zzdLoginApi={zzdLoginApi} // 郑政钉登录api
    loginType={["zzd", "sms", "pwd"]} // 登录类型
    pwdSuccess={pwdSuccess} // 账号密码登录成功之后的回调
    zzdSuccess={zzdSuccess} // 郑政钉扫码登录成功之后的回调
    smsSuccess={smsSuccess} // 短信登录成功之后的回调
    zhbSuccess={zhbSuccess} // 郑好办登录成功之后的回调
    verificationCodeSuccess={verificationCodeSuccess} // 验证码调用成功之后的回调
  />;
};

export default App;

1.2 日志组件

import React from "react";
import { AuditLog } from "@digitalzz/bizui";
import { getLogApi } from "./services/log";
import { columns } from "./config";
import styles from "./index.less";

const App = () => {
  return (
    <div className={styles.container}>
      <AuditLog
        rowKey="id" // 表格每一行唯一标识
        columns={columns} // 表格每一列展示项
        getLogApi={getLogApi} // 获取表格数据api
      />
    </div>
  );
};

export default App;

按需引入

import Login from "@digitalzz/bizui/es/login";
import "@digitalzz/bizui/es/login/style.less";

使用 babel-plugin-import

// 单独使用在.babelrc.js中配置
module.exports = {
  plugins: [
    ["import", {
      "libraryName": "@digitalzz/bizui",
      "libraryDirectory": "es",
      "style": true'
    },'@digitalzz/bizui'],
  ]
}

// 多个组件库,例如antd
module.exports = {
  plugins: [
    ["import", {
      "libraryName": "@digitalzz/bizui",
      "libraryDirectory": "es",
      "style": true
    },'@digitalzz/bizui'],

    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    },'antd'],
  ]
}

配合 create-react-app 使用按需加载

在babel-loader的options中配置如下

 options: {
    plugins: [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        style: true
      },'antd'],
      ["import", {
        "libraryName": "@digitalzz/bizui",
        "libraryDirectory": "es",
        "style": true
      },'@digitalzz/bizui'],

开发组件

请首先安装 node(>=12.20.0),npm

安装依赖

git clone git@codeup.aliyun.com:60c866ebba7762d30bcb7604/digitalcnzz-fe/digitalcnzz-products-fe/digitalcnzz-web-bizui.git

cd digitalcnzz-web-bizui

npm install --registry https://registry.npm.taobao.org

调试组件

源码中搭建了一个react环境，在example文件夹下，使用npm run dev，即可打开调试环境，引入编写的组件即可.

 import { Login } from "../../src";
 import '../components/login/style.less';

开发一个组件以 Login 组件为例子 cd components 目录下，新建文件夹 login,在下面创建 Login.js,index.js,style.less 三个文件夹

例如 Login.js

创建login.js;
const Login = props => {
  return <div>Login</div>;
};
export default Login;

在components文件夹下index.js中导出该组件;

export { default as Login } from "./login";

4.发布

框架提供了自动化发布命令，打包，发版，lint,日志等功能，命令如下

npm run pub:prod    //自动完成css，js,es,lin,umd打包，自动生成changelog,发布npm仓库，为修订版版本号。1.0.*

npm run pub:major  //都会完成上述不同，唯一区别是，打的npm版本号不同，此命令是打主版本号，不经常用 *.0.0

npm run pub:minor  //都会完成上述不同，唯一区别是，打的npm版本号不同，此命令是打次版本号，不经常用 1.*.0

发布组件库文档，框架提供两种方式

1.执行npm run pub:docs   //采用storybook的方式去发布

2.npm run deploy  //该命令会执行脚本deploy.sh文件，打包并发布组件库文档