# 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 上。