Ant Design Pro V5 已经支持预览

[chenshuai2144]

在经过了很长时间的准备下，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 (
    <div>
      <Access accessible={access.canAdmin} fallback={<div>Can not read foo content.</div>}>
        Foo content.
      </Access>
      <Access accessible={access.canDeleteFoo(foo)} fallback={<div>Can not delete foo.</div>}>
        Delete foo.
      </Access>
    </div>
  );
};

🎯  网络请求

request 是新架构中的大改变之一，我们可以从 umi 中 import request 使用方式与原来相同，各种配置可以在 src/app.tsx 中进行配置。代码示例如下：

import { RequestConfig } from 'umi';

export const request: RequestConfig = {
  timeout: 1000,
  errorConfig: {},
  middlewares: [],
  requestInterceptors: [],
  responseInterceptors: [],
  errorHandler,
};

在一个中后台中很多页面并不需要跨页面的信息流，也不需要把信息放入 model 中，所以我们提供了  useRequest  hooks， useRequest 提供了一些快捷的操作和状态，可以大大的节省我们的代码。

🛫  如何升级到 umi@3 架构

既然新的架构这么优秀，那么怎么才能升级到新的架构呢，我们是支持渐进的，只要升级到 umi@3 即可使用这些特性，新的数据流虽然简单高效但是并不能满足所有的场景，我们可以混合适应，慢慢迁移。当然我们希望可以尽早迁移来减少历史债务。详细步骤可以参阅官网的迁移指南。

详细的代码改动

🗽 Q&A

📮  为什么不发正式版

Pro v5 中使用了全新的架构，更加标准化并且自带了很多内部的最佳实践，无论代码量还是使用难度都降低了。但是标准化同时意味着失去了个性化的空间，我们希望在正式发布之前，收集一些信息，在标准化和个性化之前取得一个平衡。

📮 Pro 与 umi 是什么关系

Pro 与 umi 的关系有点像  react-scripts  与 create-react-app ，umi 提供了基础能力，而 Pro 在上层提供了更多用法，并且加入了我们对中后台项目的实践。

📮 Pro V5 不能满足我的需求怎么办

作为一个开源项目，如果你觉得某个功能不满意或者功能缺失，你可以提 issue 来参与讨论，如果得到了官方的认可，那么这个功能就会被实现。这个流程一般会很长，所以推荐你直接提 PR 来实现功能，同时可以帮助到更多同学，成为一名光荣的  contributors，走向名望程序员第一步。

如何使用

使用 yarn create umi 0.24.x 版本。出现 🧙 Be the first to experience the new umi@3 ? 时选择 PRO V5

参考资料

官网 https://beta-pro.ant.design umi 插件文档 https://umijs.org/plugins/plugin-access

[joesdu]

更新到V5了，看了一下权限的模块，感觉和V4差不多呀，还是绑定角色名称。 不能动态的创建角色，然后设置相关的菜单或者按钮权限吗？

权限很简单的,我s是用的数字来实现的,其他类型的数据都可以,只要你能判断true,false就行.至于按钮级别的权限肯定是需要你自己去判断并且做渲染了.框架层面不可能去做按钮级别的权限的.

现在还是在config.ts中提前配置了access: 'canAdmin', 实际上在使用的时候，都是在添加角色时选择可以打开的菜单。登录成功后，根据当前角色配置的可以打开的菜单，动态的加载菜单，而不是提前把能打开菜单的角色配置好吧。

权限是组合的,但是你配置的只是某个路由的权限.这些是可以确定的,比如用户A可以访问E,F,D3个页面的路由,用户B可以访问F路由.你用户A和B均存在F路由,所以F路由就都能访问,在B登陆的时候,E和D路由的菜单就不会被渲染.所以B无法访问.若是强行更改地址栏路由,就会出现403页面.

角色可以打开那些菜单是动态的，每个角色配置可以打开的菜单是不同的。 角色和资源关联 登录成功后，根据角色设置菜单。而不是先设置好所有菜单可以由哪些角色打开。

你这种可以做成动态路由,让后端返回路由列表.

[lf7817]

自定义 layout

看到一些说不想使用默认的 layout，在v5之前很方便的可以使用自定义的 layout，v5也应该给一个这样的解决方案。

V5本身就支持这样的方案,同样是在layouts文件夹下写好layout,然后在Umi的config文件中不配置layout属性就可以支持如图去掉红框中的内容.我在从V4完全升级到V5之前就是这样的.

除了config里的layout，还有app.tsx里的layout也要删掉

[lichnow]

@zhengjf1988 多标签怎么产生的？自己写的还是v5自带的？

[xiexingen]

跟v5没关系

[chz102]

@chenshuai2144 老大能不能提供个mix模式下，显示顶部菜单的写法，应该是加headerContentRender吧，不知道怎么写调菜单的样式了

[netcore-jroger]

哪位大佬说一下useModel如何替换dva的

https://github.com/joesdu/destiny-admin-flow-umi 可以看一下

大佬 你是如何解决 编辑页面 ID不同 Form 的数据 没更新的问题的

你要用Form，大概意思如下：

const [form] = Form.useForm();
form.setFieldsValue(/* 你的对象 */)

// <Form layout="vertical" form={form} initialValues={memberCard}></Form>

你直接用 setMemberCard(/* 你的对象 */) UI是不更新的，但是数据是变了。我认为这应该是一个bug

[admiao]

哪位大佬说一下useModel如何替换dva的

https://github.com/joesdu/destiny-admin-flow-umi 可以看一下

大佬 你是如何解决 编辑页面 ID不同 Form 的数据 没更新的问题的

你要用Form，大概意思如下：

const [form] = Form.useForm();
form.setFieldsValue(/* 你的对象 */)

// <Form layout="vertical" form={form} initialValues={memberCard}></Form>

你直接用 setMemberCard(/* 你的对象 */) UI是不更新的，但是数据是变了。我认为这应该是一个bug

这不是一个bug 这个是初始化的值 值做一次渲染，官方有说明。在hooks中设置一个时机来用setFieldsValue来设置异步值可以解决。

[joesdu]

各位大佬们，有个权限相关的问题想问一下，我在登录接口调用后再调用拉取权限的API，拿到权限后再跳转到主页，主页的菜单并没有刷新，需要重新点一下浏览器的刷新按钮，这个应该怎么解决哦😶😶

[xiexingen]

各位大佬们，有个权限相关的问题想问一下，我在登录接口调用后再调用拉取权限的API，拿到权限后再跳转到主页，主页的菜单并没有刷新，需要重新点一下浏览器的刷新按钮，这个应该怎么解决哦😶😶

登录后 使用location.href形式跳到主页；或者history.push主页之前先调用 const { refresh } = useModel('@@initialstate'); 的refresh方法

[joesdu]

各位大佬们，有个权限相关的问题想问一下，我在登录接口调用后再调用拉取权限的API，拿到权限后再跳转到主页，主页的菜单并没有刷新，需要重新点一下浏览器的刷新按钮，这个应该怎么解决哦😶😶

登录后 使用location.href形式跳到主页；或者history.push主页之前先调用 const { refresh } = useModel('@@initialstate'); 的refresh方法

我就是用的官方的方法跳转的.不太好使.

[joesdu]

各位大佬们，有个权限相关的问题想问一下，我在登录接口调用后再调用拉取权限的API，拿到权限后再跳转到主页，主页的菜单并没有刷新，需要重新点一下浏览器的刷新按钮，这个应该怎么解决哦😶😶

登录后 使用location.href形式跳到主页；或者history.push主页之前先调用 const { refresh } = useModel('@@initialstate'); 的refresh方法

没办法,我目前只能用location.reload()自己再刷新一下了.

[xiexingen]

各位大佬们，有个权限相关的问题想问一下，我在登录接口调用后再调用拉取权限的API，拿到权限后再跳转到主页，主页的菜单并没有刷新，需要重新点一下浏览器的刷新按钮，这个应该怎么解决哦😶😶

登录后 使用location.href形式跳到主页；或者history.push主页之前先调用 const { refresh } = useModel('@@initialstate'); 的refresh方法

没办法,我目前只能用location.reload()自己再刷新一下了.

是await refresh() ；你得确保getInitialState执行完了才跳转

[joesdu]

各位大佬们，有个权限相关的问题想问一下，我在登录接口调用后再调用拉取权限的API，拿到权限后再跳转到主页，主页的菜单并没有刷新，需要重新点一下浏览器的刷新按钮，这个应该怎么解决哦😶😶

登录后 使用location.href形式跳到主页；或者history.push主页之前先调用 const { refresh } = useModel('@@initialstate'); 的refresh方法

没办法,我目前只能用location.reload()自己再刷新一下了.

是await refresh() ；你得确保getInitialState执行完了才跳转

我用promise写到then里边还是不好使，我下午试试await

[netcore-jroger]

现在用的 ant-design-pro@5.0.0-alpha.0 ，如何升级呢？

[crashsol]

V5有没有正式发版的时间啊?

[joesdu]

V5有没有正式发版的时间啊?

估计没有，5.1已经在路上了，5估计就是过渡一下，目前5已经正常使用在生产环境中，没啥毛病

[netcore-jroger]

V5有没有正式发版的时间啊?

估计没有，5.1已经在路上了，5估计就是过渡一下，目前5已经正常使用在生产环境中，没啥毛病

你在哪儿看的5.1?

[Lind-pro]

V5有没有正式发版的时间啊?

估计没有，5.1已经在路上了，5估计就是过渡一下，目前5已经正常使用在生产环境中，没啥毛病

你在哪儿看的5.1?

有个5.1分支

[netcore-jroger]

好吧

[xyy7260]

@Lind-pro 数据状态管理你用第三方没呢？

[Lind-pro]

@Lind-pro 数据状态管理你用第三方没呢？

rxjs

[xyy7260]

@Lind-pro 没用过你这个， 为什么不使用useModel 呢

[Lind-pro]

@Lind-pro 没用过你这个， 为什么不使用useModel 呢

喜欢用哪个就哪个。各有优势

[xyy7260]

@Lind-pro 在问一下，就是这个v5版本的文档貌似还没出来对吧？ 刚刚看了一下没找到useModel 介绍？

[joesdu]

@Lind-pro 在问一下，就是这个v5版本的文档貌似还没出来对吧？ 刚刚看了一下没找到useModel 介绍？

这个就是umi3的文档

[zoeykk]

对于网络请求，不同的前缀指向不同的后端接口，比如/api/xx 请求xx.xx.xx.x, /interface/xx请求yy.yy.yy.yy 怎么统一简单封装下request，request1（api前缀）request2（interface前缀），然后不同的后端接口页面只需调用不同的request ，要向V4那样写个util工具函数吗 不然只好在每个service里都加上指定的前缀了

[xiexingen]

开发模式下 不是有proxy么；

[zoeykk]

开发模式下 不是有proxy么；

proxy里的prefix是匹配已经在service里定义的前缀，匹配的前提要先定义， 比如有100个接口 50个是/api 50个是/interface 是不是首先要在每个service里先手动添加上

[pkaq]

v5.1已经在路上了

[rudyzou]

急需multitab，或者来个官方keep-alive

[guogeer]

怎么移除国际化。一堆错误提示： [React Intl] Missing message

[wushizhan]

multitab 同求

[lirunwin]

目前项目是一个中后台 加个两三个前台页面. 前台页面不能使用layout. 在设置成layout: false后

[xiexingen]

有一个disablepadding啥的 自己搜搜

[zoeykk]

v5打包默认会全部引入icon吗？

[crashsol]

V5感觉又没得声音了，，好久发版啊，大佬

[tombear110]

刚刚用 yarn create umi 建了一个v5，看了下乱七八糟的呢。

1. 默认请求用的 import { request } from 'umi'; 区块用的 import request from 'umi-request'; 请求没看到用hook地方(useRequest)。
2. umi ui 好像有点烂尾的感觉： 2.1. umi ui 界面里所有的图片加载不出来 2.2. package.json 内的 scripts 里面删掉了 fetch:blocks 2.2. 所有区块还是dva来做的数据。

建议你直接clone V5的源码.

刚刚用 yarn create umi 建了一个v5，看了下乱七八糟的呢。

1. 默认请求用的 import { request } from 'umi'; 区块用的 import request from 'umi-request'; 请求没看到用hook地方(useRequest)。
2. umi ui 好像有点烂尾的感觉： 2.1. umi ui 界面里所有的图片加载不出来 2.2. package.json 内的 scripts 里面删掉了 fetch:blocks 2.2. 所有区块还是dva来做的数据。

建议你直接clone V5的源码.

down了v5的源码，没找到useRequest相关内容，数据流，权限也没有，你们都在哪里看到的？

[crashsol]

下半年了，大A都上3152了，pro_layout也都6.1了，霸气的V5还迟迟不肯出山

[vearvip]

V5何时到正式？

[dsldata]

V5何时到正式？V5何时到正式？

[qietuniu]

requestInterceptors和responseInterceptors这个时怎么处理的？怎么进行拦截操作？需要增加axios吗？

[kaoding]

requestInterceptors和responseInterceptors这个时怎么处理的？怎么进行拦截操作？需要增加axios吗？

/**
 * token认证
 */
const authorization = () => {
  const token = getToken();
  return token ? { Authorization: `Bearer ${token}` } : undefined;
};

export const request: RequestConfig = {
  errorHandler,
  requestInterceptors: [
    (url, options) => {
      return { url, options: { ...options, headers: authorization() } };
    },
  ],
};

[guogeer]

使用protable，页面初始化的时候如何带上表单参数？

[BluesVN]

现在生产环境下可以用v5 了吗

[joesdu]

现在生产环境下可以用v5 了吗

都上生产环境几个月了.

[kaoding]

也不知道什么时候可以发正式版本，哎。

[hikitty2]

如何预览所以的demo呢 我本地只有个登录和welcome

[yanq]

只要在 root 中做如下配置，对于不能访问的页面，插件会将其替换为 403 页面，而无需手动支持。

这个是没有效果的，而且我觉着是不可能实现的。

[goyuanfang]

能否考虑添加主内容区域采用Tab菜单的形式

[rong12345]

multitab 同求!!!!!!