通过长时间的业务积累，沉淀出了一些可复用程度较高的通用组件， 该组件基于 antd

快速上手

快速开始

第一步

需要在项目的初始化的 index 文件里面首先对改组件库进行初始化，并传入必要参数

import { Configure } from 'xuanyue';
Configure.init({client:'2'});

以下是需要传入的初始化参数

// 接口地址: https://wwww.xxxxxxx.com
const origin = '';
// 项目构建部署路径(注意在最后携带斜线)：/xxxx/
const deployDirectory = '/xiaoMing-bms/';
// 项目全路径
const href = `${origin}${deployDirectory === '/' ? '' : deployDirectory}`;
// api前缀
const apiPrefix = `${href}api`;
// 下载路径
// const downloadApi = `${href}file/download`;
const downloadApi = `/xiaoMing-file/api/file/file/download`;

// /xiaoMing-file/api/file/file/download
// 上传路径
// const uploadApi = `/xiaoMing-file/api/file/file/upload`;
const uploadApi = `/xiaoMing-file/api/file/file/upload`;
// im
const socketApi = `${href}im`;
// 客户端标识
const client = '00';
// 全局配置
let configure = {
  origin,
  deployDirectory,
  href,
  apiPrefix,
  downloadApi,
  uploadApi,
  socketApi,
  client,
  api:{},
};

该 ui 库内部会获取网站 token用于请求登录状态的确定，所以请在登录结束后 存在本地localStorage.setItem('token'，'xxxx')里面一个token

第二步

在跟组价里面套上 这个 SettingProvider

import React from 'react';
import { connect } from 'umi';
import ProLayout from '../components/proLayout';
import SettingProvider from '../components/context/settingProvider';

const BasicLayoutOld = (props) => {
  return (
    <SettingProvider>
      <App {...props} />
    </SettingProvider>
  );
};

第三步

肆无忌惮的使用每个组件

举个例子

import React, { useState } from 'react';
import { InputNumberCustom } from 'xuanyue';
import './App.less';

export default () => {
  const [value, setValue] = useState('');
  return (
    <div>
      <InputNumberCustom
        style={{ width: '200px' }}
        value={value}
        onChange={(i) => {
          setValue(i);
        }}
      />
    </div>
  );
};

组件列表

export { default as TextAreaEnhance } from './Input/textAreaEnhance';
export { default as SelectCustom } from './Input/selectCustom';
export { default as InputNumberCustom } from './Input/inputNumberCustom';
export { default as TablePage } from './TablePage';
export { default as FileImport } from './file/fileImport';
export { default as FormItemUpload } from './file/formItemUpload';
export { default as FileDownload } from './file/fileDownload';
export { default as WrapTabs } from './wrapTabs';
export { default as useRequest } from './request';
export { default as request } from './request/request';
export { default as LayoutSetting } from './layoutSetting';
export { default as UseConnect } from './context/useConnect';
export { default as Connect } from './context/connect';
export { default as SettingContext } from './context/index';
export { default as SettingProvider } from './context/settingProvider'; // 必须要在最外层套这个组件
export { default as Configure } from './utils/configure'; // 初始化所有配置

// 工具函数
export { default as LocalStorage } from './utils/localStorage';
export { default as Events } from './utils/events';

注：该组件为业务内部使用

快速开始(开发组件库)

安装依赖,

$ npm i/yarn

启动服务，开发

$ npm start

打包文档,

$ npm run docs:build

打包可上传的 npm 包

$ npm run build

发布 npm 包

$ npm run release

项目目录划分

| 目录名称 | | | -------- | ---------------- | | demo | 存放组件实例代码 | | src | 组件目录 |

该项目通过 dumi 创建，详情请访问https://d.umijs.org/zh-CN