三、Ant Design Pro 进阶

一、图表

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的更新。

三、Ant Design Pro 进阶

一、图表

二、业务图标

三、国际化(i18n, Internationalization)

四、更换主题

五、权限管理

猜你喜欢