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。

上一篇:使用js写一个旋转大风车的案例


下一篇:CSS Modules 配置,及 Antd 组件样式重写