react-single-app v10.2.8

项目说明

• npm run start 启动测试
• npm run build 打包
• github: https://github.com/wenzheng1/react-single-app
• npm: https://www.npmjs.com/package/react-single-app
• Document: https://juejin.im/post/6857495360580173832

注意：启动测试，不停的跳登陆，可能是由于浏览器禁用第三方cookie导致的。本地调试解决方案。禁用第三方cookie，只要接口的主域相同，依然可以跨子域。因此，线上部署的话，可以是 前端: web.yang800.com 统一登陆: login.yang800.com 接口： api.yang800.com

简介

react-single-app是一个TOB类型的后台应用的前端框架。它基于react、react-router、antd来提供的单页多标签（类似于浏览器的多标签）应用框架。

react-single-app框架，大量使用配置来生成应用以及页面，以此来简化前端开发的工作。该应用配置可以由服务端提供，当然更多的是使用公司自研的maria系统来提供。整个架构图，如下图所示

react-single-app主要分为五个组件App ConfigCenter Uploader lib event

App

App组件，是一个应用的基类，每个应用有且仅有一个App组件。它包含了，菜单服务、风格服务、系统切换、多标签等功能。

App 配置主要包括六个参数

 * @param {menuList<Menu>} props 菜单列表
 * @param {pageMap<Page<String:Component>>} props 组件路由映射表
 * @param {configList<Config>} props 配置列表
 * @param {colStyleList} props 侧边栏样式
 * @param {topStyleList} props 顶部样式
 * @param {user} props 用户
  function Index(){
      return <App 
          user={user}
          colStyleList={mode_list.col}
          topStyleList={mode_list.top}
          menuList={menu_data}
          configList={json_data}
          pageMap={pageMap}
      />
  }

菜单

菜单通过menuList提供，App组件，为菜单提供了三种类型，大菜单、小菜单、顶部菜单。同时可以应用于多种风格。开发者，只需要提供菜单的menuList数据给到App类即可

//数据格式
 * @param {title} props 菜单标题
 * @param {url} props 菜单链接
 * @param {icon} props 菜单icon
 * @param {list} props 子菜单列表
[{id , icon , title , url ,  list[{id , title , url}]}]

//数据demo
[{
	"id": 1596094817770811,
	"icon": "",
	"title": "商品中心",
	"list": [{
		"id": 1596612963074963,
		"title": "仓库单品中心",
		"url": "/config-center?config_id=1596532526599872&page_title=仓库单品中心"
	}, {
		"id": 1596612963394346,
		"title": "店铺商品中心",
		"url": "/config-center?config_id=159661302539657&page_title=店铺商品中心"
	}],
	"url": ""
}, {
	"id": 1596613355561499,
	"icon": "",
	"title": "仓库管理",
	"url": "/warehouse?config_id=1595926825169994&page_title=仓库管理",
	"list": []
}, {
	"id": 1596622575545918,
	"icon": "",
	"title": "文档地址",
	"url": "/doc?page_title=文档地址",
	"list": []
}]

风格

App 组件提供了侧菜单及顶部菜单两种菜单模式，针对每一种菜单模式，又提供了多种风格皮肤，这里采用 colStyleList 、 topStyleList 两个数据源提供。这两个数据源都放在maria中生成，由UI配置，开发者可以不用关心，因此就不在此列出这两个字段的参数。

多标签

App 是一个单页应用，我们把每一个功能模块称之为页面。它的底层实现是基于 react-router，同时提供多标签切换页面服务。基于此，在App系统中，不允许使用 a标签，他有自己的打开页面和关闭页面的方法。该方法由 lib.openPage(url , refreshFn) 打开页面 和 lib.closePage()所提供。

lib.openPage(url , refreshFn) 打开一个页面，url的格式为 /页面地址?page_title=我的页面标题&other=其它参数 ,page_title表示新开标签的名称。refreshFn 表示本页面兼听的事件，如果新开的子页面，比如详情页，更改数据后，需要刷新当前页，则可以使用event.emit，发送一个事件，来更改当前页面的状态

'/页面地址?page_title=tab显示标题&config_id=配置中心id&other=其它参数'
'/warehouse?config_id=1595926825169994&page_title=仓库管理'
'/doc?page_title=文档地址'

lib.closePage() 关闭当前活动的页面

页面

整个应用中页面区域所展现的是页面，是通过 pageMap<{url : Component}>参数到App应用中。pageMap是一个JSON对象。其中key表示url地址， value是实际的页面组件

import {App , ConfigCenter} from 'react-single-app';
import Warehouse from './pages/warehouse';
import WarehouseDetail from './pages/warehouse-detail';
import Doc from './pages/doc';
const pageMap = {
    'config-center': ConfigCenter,
    'warehouse' : Warehouse,
    'warehouse-detail' : WarehouseDetail,
    'doc' : Doc
}

用户及系统

App组件，在设计时，就考虑到了多系统应用。每个系统属于单页应用，系统之间属于多页应用。因此。如果是多系统的话，请提供systemList。url可以直接使用a标签的链接。如果是单系统，可以不提供systemList,也可以提供只有一个元素的systemList，只有一个元素的systemList表示显示系统的名称。另外，name表示当前系统的用户，且需要提供一个logout退出系统的方法

const user = {
    name: 'admin',
    activeSystem: 0,
    systemList: [{
        name: 'OMS 小二后台',
        url: ''
    }, {
        name: 'CCS 云仓平台',
        url: ''
    }, {
        name: 'EIMS 物流平台',
        url: ''
    }, {
        name: '供俏平台',
        url: ''
    }],
    logout: () => {
        alert('退出系统方法')
    }
}

lib

lib 库主要的功能包括多标签：打开页面、关闭页面， 网关请求：request请求

     /**
     *
     * @param url /test-detail?pageTitle=测试详情页
     * @param refreshFn 回调函数，作状态更新使用
     */
    openPage({ url, refreshFn })
    
    /**
     * 关闭当前页面
     */
    closePage()
    
    /**
        字段名         类型       是否必填      说明
        url           string      是         访问的URL
        data          json        否         请求的数据
        success       function    是         请求成功回调函数
        fail          function    否         失败回调函数
        needMask      boolean     否         是否需要遮照，默认为true
        client        json<{clientId , clientSecret}>        否
    **/
    request({ url, needMask = 'false', data , success = function(){}, fail = function(){} , client})

• 多标签：打开页面、关闭页面在上面已经介绍过，此处不再叙述。

• 网关请求：目前，公司所有的系统服务端都在往网关迁移，做统一登陆，因此，lib.request 默认采用但丁云网关的加签的方式，进行加签。如果不采用网关，或者接口不一致的情况，则对lib.request方法进行更改即可。网关加签方式，可参考 https://juejin.im/post/6857440384878116872#heading-0

event

App应用为单页多标签应用，因此一定会存在页面间通信的需求。如列表页打开详情页，详情页同意了退款需求，则需要对列表页进行同步刷新，所有的通信机制即event组件。event 库主要包括事件的监听和通知机制。

/**
 * @param {*} name 监听的事件名
 * @param {*} fn 事件的回调方法
 */
on : function(name , fn)
/**
 * @param {*} name 取消监听的事件名
 * @param {*} fn 取肖监听的事件方法，省略此参数，表示取消所有为name的事件监听
 */
off : function(name , fn)
/**
 * @param {*} name 发送{name}事件
 * @param {*} entry 发送事件并带上数据{entry}，此参数可省略
 * @param {*} once once=true，表示发送{name}事件，之后立即取消监听{name}事件
 */
emit : function(name , entry , once)

ConfigCenter 配置中心

对于后台类应用，会有很多列表查询类的页面，他的格式比较固定，统一。上面是各种类型的搜索条件，下面是表格。表格列宽可拖动，列可排序，固定在左，或者右侧，也可以隐藏等。表格可带批量操作，底部可以出详情，等等，很多的操作。对于这一类共性的需求，可使用ConfigCenter快速生成页面，或者通过继承ConfigCenter,使用ConfigCenter提供的API接口，用少量代码开发来生成页面。

配置中心所提供的能力图以及API，如下图所示。

配置中心配置解析

1. 所有配置中心的配置，通过参数configList<config>传递给App组件
2. 每一个配置中心的页面，都需要用到一个参数config_id，用于在configList 中查找对类的config配置

http://admin.gongxiao.yang800.cn/order/1597742357174?config_id=1597316269951703&page_title=订单管理
http://admin.gongxiao.yang800.cn/item-center/1597742700177?config_id= 1597212444608339&page_title=商品中心

3. config配置的结构如下

	config={id ,searchKeyList , requestUrl , excel ,  tableFieldList , needBatchOperation}

搜索条件配置

searchKeyList<Search> 为搜索条件列表。Search属性如表所示

搜索条件一共支持8种类型的控件。

• string文本 | text文本域：extra的值表示文本框或文本框的placeholder
• select选择框 | searchSelect选择框-带搜索 | multiSelect选择框-多选: extra的值表示下拉框数据来源接口API。将调用自动lib.request 去请求下拉框的数据。对请求和返回格式有一定要求，请参照 接口文档
• 选择框-JSON数据来源 : extra字段为一个序列化的JSON. ConfigCenter会自动将反序列化的数据用于下拉框
• 选择框-级联 : extra字段参照select选择框，对请求和返回格式有一定要求，请参照 接口文档
• 日期 ： key的值有两个字段，以英文逗号隔开。如startDate,EndDate.

列表数据请求

列表数据请求，会自动组装用户通过searchKeyList设置的值，以及翻页组件设置的值，发送给requestUrl的接口。该接口，对请求，及响应，都有一定的格式要求，统一调用lib.request，走网关，加签名。格式要求请参数接口文档

导入 && 导出配置

excel 用于配置导入、导出

列表配置

配置中心的列表，是一个表现形式非常丰富的一个列表。它支持多选，翻页，列宽的自由调整，列排序，列显示、隐藏、左右固定，表头固定等一系统功能。列的调用，可以保存到本地。也可以只是临时性的。

表格字段 tableFieldList<TableField> 属性如下

needBatchOperation 是否支持仳量操作。如果支持批量操作，则dataList中，每一行数据有一个属性 checked=true表示选中。

配置中心API

配置中心，abstruct方法 1. renderModal:渲染自定义弹层。 2. renderLeftOperation：渲染批量操作按钮 3. renderRightOperation：渲染其它操作按钮，比如新建按钮 4. renderDetail(data)：渲染底部浮层，注意，其中data，由开发者调用 setDetailData(data)传入。在需要渲梁底部浮层的地方，调用setDetailData，传入data即可。 5. 表格字段type=function，指定的key值的函数名。

Uploader

上传组件。一般用于上传图片，当然也可以用于上传任何文件，如excel等。支持拖动上传和选择文件上传。上传图片时，可还以支持查看缩略图，删除图片等等。

/**
 * @param {style{width , height , ...}} 样式，一般指定width , height    可选   
 * @param {src} 默认图片URL                                            可选
 * @param {allowTypes[]} 允许的图片类型，数组。默认不限制                  可选
 * @param {onUploadStart} 开始上传回调                                  可选
 * @param {onUploadEnd(src)} 结束上传回调                               可选
 * @param {onRemove} 删除图片回调                                       可选
 */
 <Uploader 
    allowTypes={['png' , 'jpg']}
    onUploaderStart={() => {console.log('开始上传 ')}}
    onUploaderEnd={(src) => {
        console.log(src);
    }}
    style={{width:'160px' , height:'160px'}}
    src='https://dante-img.oss-cn-hangzhou.aliyuncs.com/28562010515.png'
/>