ant design 预览图片_Ant Design Pro V5 已经支持预览

在经过了很长时间的准备下，Pro V5 已经基本完成， 但是仍然有很多地方不是很完善，在新版本中我们进行了很多预设，对于数据流和布局更是进行了大刀阔斧的改进。虽然底层仍然基于 umi@3 来实现的，但是在应用层做了很多改动，接下来我们会展示一下我们的主要改动。

Layout 的更新

layout 是这次的最大改动，首先是进行了样式上的更新，支持混合模式来期望适应更多的场景。新的风格仍然会以科技的风格为主，在原来的基础上优化尺寸和体验细节，设计更加简洁，匹配更多业务场景，具体的改动可以看这里。

对于开发者也迎来了很多改动，首先是配置层面，layout 属性变为 'side' | 'top' | 'mix'

新增了 headerTitleRender 和 headerContentRender 用于自定义混合模式下的头信息

新增了 menuExtraRender 来自定义 标题和菜单之间的区域。

PageHeaderWrapper 改名为 PageContainer, 也方便未来提供更多的功能

对于 SettingDrawer，为了方便集成和部署，我们开发了 umi-plugin-setting-drawer ,只要在项目中安装这个即可快速使用。umi-plugin-setting-drawer 依赖 @umijs/plugin-initial-state 和 @umijs/plugin-layout， 如果要自己实现需要自动绑定 @umijs/plugin-initial-state 中的数据。

架构改动

Pro V5 中的架构做了全新的改动，全部修改为全新的 umi@3 架构, 对于数据流，权限，布局都进行了内置，修改为了全新的插件。这些改进都是渐进式的，只要你升级为 umi@3 ，是可以兼容两种开发模式的。

数据流方案

我们在过去尝试了很多数据流方案，并且随着 dva 的出现稳定了下来，但是在 hooks 到来之后我们看到了机会来解决 dva 实践中遇到的问题。在一个标准的 dva 应用中我们需要写很多的样板文件，做了很多重复劳动。尤其是 它有很多概念，effects，state , reducers ，为了解决异步的问题又带了很多的新的 api，构建了一个非常复杂的体系，但是在很多应用中其实是不需要这个复杂的功能，而且即使是很大的项目，他对 TypeScript 不友好的问题也导致我们在使用时各种链路不同，并且没有良好的类型指示，在重构时经常需要搜来搜去而不能的跳转。 @umijs/plugin-model 解决了上述的 dva 的问题，同时也足够小，使用者书写的就是一个普通的自定义 hooks，但 @umijs/plugin-model 把其中的状态变成了『全局状态』，多个组件中使用该 model 时，拿到的同一份状态。没有更多的心智负担。使用起来就像定义一个 state 那么简单。我们可以在新建一个 src/models/user.ts 文件。

import { useState, useCallback } from 'react';

export default function useAuthModel() {

const [user, setUser] = useState(null);

const signout = useCallback(() => {

// signout implementation

setUser(null);

}, []);

return {

user,

signout,

};

}

在使用时也会非常简单，使用应用 hooks 即可, 这样使用包含了所有的 TypeScript 信息， useModel 的 key 就是在 models 中的文件名。

import { useModel } from 'umi';

const { user, signout } = useModel('user');

对于轻量级的数据流我们都推荐这种方案。

权限方案

权限一直时 Pro 的弱项，在 Pro 中我们自研了一个权限组件但是表现不尽如人意。趁着这次机会我们升级了权限组件，无论使用方式和 API 都变得更加的简单，并且和我们的插件结合的更加完美。光商业吹捧是没有意义的，我们来看看代码。

// src/access.ts

export default function (initialState: { currentUser?: API.CurrentUser | undefined }) {

const { currentUser } = initialState || {};

return {

canAdmin: currentUser && currentUser.access === 'admin',

canDeleteFoo: (foo) => {

return foo.ownerId === currentUser.userId;

},

};

}

我们可以看到这个是非常简单的，initialState 是一个默认的 model , 每次 initialState 的改变都会触发权限的重新计算，我们可以像 setState 一样触发它。在使用上我们使用了 umi@3 的能力让我们用起来更加的简单，只要在 root 中做如下配置，对于不能访问的页面，插件会将其替换为 403 页面，而无需手动支持。

export const routes = [

{

path: '/pageA',

component: 'PageA',

access: 'canAdmin', // 权限定义返回值的某个 key

},

];

对于运行时的代码，我们提供了两个 API 来帮助我们自定义任何形态的 UI 和逻辑， 这里有个一看就懂的 demo。

import React from 'react';

import { useAccess, Access } from 'umi';

const PageA = (props) => {

const { foo } = props;

const access = useAccess(); // access 的成员: canAdmin

if (access.canReadFoo) {

// 如果可以读取 Foo，则...

}

return (

Can not read foo content.

}>

Foo content.

Can not delete foo.

}>