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。