<!--
 * @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 上。
