一、图表
v4 中删除了组件库,如果你还要使用可以跳转到低版本查看
二、业务图标
如果在Ant Design 官网中没有找到合适的图标,可以到 iconfont.cn 上采集并生成自己的业务图标库
三、国际化(i18n, Internationalization)
- (1)引入国际化插件并开启:这个实际上就是给适配各种语言,可以做网站的语言切换
- 引入插件:pro 通过 umi 插件
umi-plugin-locale
来实现国际的功能,并且默认开启。umi-plugin-locale
约定 在src/locales
中引入 相应的 js,例如en-US.ts
和zh-CN.ts
,- 开启国际化插件:在
config/config.ts
中做如下配置
// 配置了就可以在代码中使用全球化的功能了
plugins:[
...,
locale: {
enable: true,
default: 'zh-CN',
baseNavigator: true,
},
...,
]
- (2)国际化插件的API: 封装了
react-intl
, api 与react-intl
基本相同,并做了封装使用起来更加方便。这些API都还是挺好用的,全部 api 如下:
- <1>FormattedMessage组件:作用为返回对应国际化文件中,id属性对应的属性值。具体是查看哪个国际化文件,就要看当前页面设置的语言,如果当前页面语言设置为zh-CN,就是查看zh-CN.ts文件。
- 这个组件有一个id属性,属性的值为
src/locales/en-US.ts
或者src/locales/zh-CN.ts
,文件中配置的属性值。<FormattedMessage id="navbar.lang" />
- <2>formatMessage()函数:作用为返回对应国际化文件中,id属性对应的属性值。具体使用和上面的FormattedMessage组件一样,唯一的差别就是这个为一个函数,接收两个参数都为对象,第一个参数对象有一个id值,第二个参数对象为传入到国际化文件中的参数。
formatMessage({id:somevar})
- <3>getLocale()函数: 作用为获取当前使用的语言,即获取当前页面对应的国际化语言文件。
getLocale()
,即当前使用的国际化语言文件,假如为en-US.ts- <4>setLocale()函数: 作用为设置当前使用的语言,即设置当前页面对应的国际化语言文件。这个函数调用了之后会刷新页面,如果当前语言就为传入的参数,则这个函数不会被调用。
setLocale('en-US')
,即当前使用的国际化语言文件为en-US.ts。 返回值为undefined
import { formatMessage, setLocale, getLocale, FormattedMessage } from 'umi/locale';
// 下面为src/locales/zh-CN.ts。这里面配置的就是FormattedMessage组件或者formatMessage函数中,对应的id的属性值
export default {
'layout.user.link.help': '帮助 {name}', // 这个name就是函数传过来的参数
}
// 下面为src/locales/en-US.ts。这里面配置的就是FormattedMessage组件或者formatMessage函数中,对应的id的属性值
export default {
'layout.user.link.help': 'Help {name}', // 这个name就是函数传过来的参数
}
// 下面为自定义的test.js组件
import React, { Component } from 'react';
import { formatMessage, FormattedMessage, setLocale, getLocale } from 'umi/locale';
class Test extends Component {
func = (pro) => {
const b = getLocale(); // 获取当前语言,如'zh-CN'
const c = setLocale('en-US'); // 设置当前语言为en-US,这个函数执行了之后会刷新页面。如果当前语言就为传入的语言,则这个函数不会被执行
const d = getLocale(); // 获取当前语言,如'en-US'
}
render() {
return (
<div onClick={()=>{this.func()}}>
<div> {formatMessage({id: 'layout.user.link.help'},{name: '我的名字'})}</div> // 如果当前语言为en-US,传入参数{name: '我的名字'},则显示在页面中的值为 Help 我的名字
<FormattedMessage id="layout.user.link.help" />// 如果当前语言为en-US,则显示在页面中的值为Help
</div>
);
}
};
export default Test;
四、更换主题
pro 中提供了一个可以在线切换主题和页面布局的 设置抽屉,使用这个抽屉可以很方便的查看更换主题的效果,无需重启脚手架
下面这下是,在
src/defaultSetting.ts
中进行配置,来改变页面基础布局的,菜单栏的一些布局
module.exports = {
navTheme: 'dark', // 菜单的主题
primaryColor: '#1890FF', // Ant Design 的主色调
layout: 'sidemenu', // 菜单的布局,值为 sidemenu 菜单显示在左侧,值为 topmenu 菜单显示在顶部
contentWidth: 'Fluid', // 内容的布局 Fixed 为定宽到1200px ,Fluid 为流式布局。
fixedHeader: false, // 固定页头
autoHideHeader: false, // 下滑时自动隐藏页头
fixSiderbar: false, // 固定菜单
};
五、权限管理
权限控制是中后台系统中常见的需求之一,你可以利用我们提供的权限控制组件,实现一些基本的权限控制功能
控制菜单的显示:这个是在路由里面加上
Routes
属性,属性的值为对应的权限js,比如['src/pages/Authorized']
// 下面为路由配置文件 config.ts
{
path: '/',
component: '../layouts/BasicLayout',
Routes: ['src/pages/Authorized'], // 加了这个
authority: ['admin', 'user'], // 还加了这个
}
还可以
在app.js
中配置,运行时配置路由,用patchRoutes()函数来实现,router的更新。