ant design pro梳理

1.服务器请求菜单
返回的菜单格式：
[
　　{
　　　　"path": "/dashboard",
　　　　"name": "dashboard",
　　　　"icon": "dashboard",
　　　　"children": [
　　　　　{
　　　　　　"path": "/dashboard/analysis",
　　　　　　"name": "analysis"
　　　　　}
　　　　]
　　}
]
注意 path 必须要在 config.ts 中定义。（约定式路由不需要，只需页面真实有效即可）
注意 如果没有选用 typescript，config.js 中菜单的嵌套写法，需要把 "children" 换成 "routes"。

2.动态主题切换
npm i umi-plugin-antd-theme --save-dev

3.修改样式
/* 定义全局样式 */
:global(.text) {
font-size: 16px;
}
/* 定义多个全局样式 */
:global {
　　.footer {
　　color: #ccc;
　　}
　　.sider {
　　background: #ebebeb;
　　}
}
注意：CSS Modules 只会对 className 以及 id 进行转换，其他的比如属性选择器，标签选择器都不进行处理，推荐尽量使用 className。

4.覆盖组件样式
.customSelect {
　　:global {
　　　　.ant-select-selection {
　　　　　　max-height: 51px;
　　　　　　overflow: auto;
　　　　}
　　}
}
注意：引入的 antd 组件类名没有被 CSS Modules 转化，所以被覆盖的类名 .ant-select-selection 必须放到 :global 中。
因为上一条的关系，覆盖是全局性的。为了防止对其他 Select 组件造成影响，所以需要包裹额外的 className 限制样式的生效范围。

5.前端请求流程
一个完整的前端 UI 交互到服务端处理流程是这样的：
1.UI 组件交互操作；
2.调用 model 的 effect；
3.调用统一管理的 service 请求函数；
4.使用封装的 request.ts 发送请求；
5.获取服务端返回；
6.然后调用 reducer 改变 state；
7.更新 model。