188 lines
4.3 KiB
Markdown
188 lines
4.3 KiB
Markdown
<!--
|
||
* @Author: your name
|
||
* @Date: 2022-04-29 09:23:27
|
||
* @LastEditTime: 2022-04-29 15:22:59
|
||
* @LastEditors: Please set LastEditors
|
||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
* @FilePath: \cloud-platform\README.md
|
||
-->
|
||
|
||
# Ant Design Pro
|
||
|
||
This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use.
|
||
|
||
## Environment Prepare
|
||
|
||
Install `node_modules`:
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
or
|
||
|
||
```bash
|
||
yarn
|
||
```
|
||
|
||
## Provided Scripts
|
||
|
||
Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test.
|
||
|
||
Scripts provided in `package.json`. It's safe to modify or add additional script:
|
||
|
||
### Start project
|
||
|
||
```bash
|
||
npm start
|
||
```
|
||
|
||
### Build project
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### Check code style
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
You can also use script to auto fix some lint error:
|
||
|
||
```bash
|
||
npm run lint:fix
|
||
```
|
||
|
||
### Test code
|
||
|
||
```bash
|
||
npm test
|
||
```
|
||
|
||
## More
|
||
|
||
You can view full document on our [official website](https://pro.ant.design). And welcome any feedback in our [github](https://github.com/ant-design/ant-design-pro).
|
||
|
||
# pages 页面文件
|
||
|
||
## accout 个人中心页面文件
|
||
|
||
-center 个人中心 -company 商户资料 -setting 信息设置
|
||
|
||
## basicManage 基础信息管理
|
||
|
||
-Brand 经营品牌管理 -BusniessTrade 经营业态管理 -Commdity 商品信息管理 -Merchats 商户信息管理 -Serverpart 服务区管理 -ServerpartShop 门店管理
|
||
|
||
## busniess 经营管理
|
||
|
||
-analysis 经营合同分析 -PaymentConfirm 商户欠款管理
|
||
|
||
## BussinessProject 经营项目管理
|
||
|
||
-list 列表 -detail 详情
|
||
|
||
## contract 合同管理
|
||
|
||
-list 列表
|
||
|
||
## DataVerification 数据校验
|
||
|
||
-list 列表
|
||
|
||
## merchantManagement 商家管理
|
||
|
||
-Workplace 商户工作台 -BusniessProInst 业务申请单 -commodity 商品管理 -BaseInfo 商户本地商品库 （商品云库） -Category 商户本地商品类别 -OnSale 商户在售商品 -Update 商品上架申请
|
||
|
||
-mobilePayment 移动支付管理 -bankArrival 银行到账
|
||
|
||
-reports 经营报表 -CommitySaleReport 单品报表 -RevenueSummary 门店营收报表 -SalesFlow 销售流水报表
|
||
|
||
-Shops 门店管理
|
||
|
||
-supplier 供应商管理 -Management 供应商基础信息 -Qualifications 供应商食品资质
|
||
|
||
## Setting 系统设置
|
||
|
||
-Module 菜单模块管理 -Roles 角色管理 -Users 账号管理 -UserType 账号部门管理
|
||
|
||
# 微应用改造
|
||
|
||
主要采用 qiankunjs 方案改造，因为 umijs 默认集成了 qiankunjs plugin，代码改动范围小。官网网址：https://umijs.org/docs/max/micro-frontend
|
||
|
||
## 主应用
|
||
|
||
### 启用 qiankun 插件
|
||
|
||
启用 qiankun 插件只需在 config.ts 中配置
|
||
|
||
```js
|
||
qiankun: {
|
||
master: {}
|
||
},
|
||
```
|
||
|
||
### 注册子应用
|
||
|
||
注册子应用只需在`src/app.ts`中按如下配置
|
||
|
||
```js
|
||
// 抛出qiankun插件配置
|
||
export const qiankun = {
|
||
apps: [
|
||
{
|
||
// 子应用唯一标识
|
||
name: 'merchantManagement',
|
||
// 子应用部署地址 env为development时可配置为本地地址
|
||
entry: '//dev.eshangtech.com:16060/merchantManagement/',
|
||
},
|
||
],
|
||
};
|
||
```
|
||
|
||
### 挂载子应用
|
||
|
||
挂载子应用只需要在路由配置处将对应路由下的视图使用 microApp 关键字标记，值为子应用注册时的标识
|
||
|
||
```js
|
||
{
|
||
path: '/merchantManagement/*',
|
||
name: 'merchantManagement',
|
||
icon: 'UserOutlined',
|
||
hideInMenu: true,
|
||
microApp: 'merchantManagement',
|
||
}
|
||
```
|
||
|
||
### 父子应用通信
|
||
|
||
父子应用间 state 天然隔离，所以需要在全局作用域下注册管理状态并且通过`useQiankunStateForSlave`共享给子应用全局状态采用 mobx 管理，详见`src/globalState.ts`。主应用可定制框架层的时间抛出给子应用使用，详见 `src/globalEvent`，后续可更具需要扩展使用。
|
||
|
||
## 子应用
|
||
|
||
子应用采用 umijs 技术栈，业务代码直接迁移至 src 下即可。
|
||
|
||
### 启用 qiankun 插件
|
||
|
||
```js
|
||
// .umirc.ts
|
||
qiankun: {
|
||
slave: {}
|
||
},
|
||
```
|
||
|
||
### 自定义子应用标识
|
||
|
||
子应用标识即为子应用仓库下`package.json`下的`name`属性。
|
||
|
||
### 全局状态绑定
|
||
|
||
子应用新增修饰器函数`src/hoc/globalConnect`，使用时:
|
||
|
||
```js
|
||
globalConnect(state1, state2)(ReactComponent);
|
||
```
|
||
|
||
即可将全局状态下的 state1，state2 挂载在 ReactComponent 的 props 上，全局事件`globalEvent`默认挂载在 props 上。
|