Ant-design-pro: 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

[jing-wu]

终于来了！点赞支持！

[birdycn]

感谢老大！

[liujiayii]

火钳刘明

[crashsol]

nice，马上升级

[wushizhan]

Go Go Go

[joesdu]

其实前几天都已经用了V5,今天把前几天没有的代码补上就完成更新了.

[hot588]

对Umi UI 并没有太多的支持和更新！还不如不支持Umi UI，就像个阑尾炎，不用吧，你放上去了，用吧就一对BUG等着你！

Umi UI，真实个鸡肋！ 影响了V5的气质！拉低了V5品质！

[joesdu]

对Umi UI 并没有太多的支持和更新！还不如不支持Umi UI，就像个阑尾炎，不用吧，你放上去了，用吧就一对BUG等着你！

Umi UI，真实个鸡肋！ 影响了V5的气质！拉低了V5品质！

这个问题我以前在Umi2.x的时候就说过.我提议分开,结果3.x就分开了.
并不太建议用这个东西.反正我没有用过.

[chenshuai2144]

Umi UI，真是个鸡肋！ 影响了V5的气质！拉低了V5品质！

Umi UI 想法是很棒的，可惜因为精力原因没有做起来

[joesdu]

Umi UI，真是个鸡肋！ 影响了V5的气质！拉低了V5品质！

Umi UI 想法是很棒的，可惜因为精力原因没有做起来

我觉得这个是真的难,因为UI上虽然看起来很美好,但是真正用起来确实不如代码来的直接.

[chenshuai2144]

low code 是战未来的东西，不然也不会有这么多框架和项目前仆后继。万一找对了方向呢。

类似 UI 的项目如果成功，目标用户可能是设计师和项目经理。我们前端已经思维固化。

[hot588]

low code 是战未来的东西，不然也不会有这么多框架和项目前仆后继。万一找对了方向呢。

类似 UI 的项目如果成功，目标用户可能是设计师和项目经理。我们前端已经四位固化。

建议 轻装上阵！杀出重围！什么都想搞，什么都搞不好！最后V5正式版的发布日期都延后了！ 帅哥，你要三思了！

UMI UI 坑死人啊！

[chenshuai2144]

V5正式版的发布日期都延后了

这个是因为我去结婚了，有两三周的时间没有好好搞 pro，和 umi ui 无关的

[joesdu]

V5正式版的发布日期都延后了

这个是因为我去结婚了，有两三周的时间没有好好搞 pro，和 umi ui 无关的

结婚比较重要,毕竟并不是说没有V5就不行.

[liujiayii]

羡慕嫉妒恨 我的盖世仙女什么时候来接我

[afc163]

pro 相关记得发到知乎专栏吧。

[joesdu]

羡慕嫉妒恨 我的盖世仙女什么时候来接我

[lifegit]

刚刚用 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来做的数据。

[joesdu]

刚刚用 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的源码.

[lifegit]

2.1:

[ISBN9527]

yarn create umi myapp
选择V5版本后,他直接跳过了语言设置
怎么把默认的ts转换成js？
@chenshuai2144

[dumplingJ]

multitab 怎么说？

[crashsol]

multitab 怎么说？

如果定位后端管理系统，multitab 是必须的啊，感觉V5可以考虑一下呢

[dumplingJ]

multitab 怎么说？

如果定位后端管理系统，multitab 是必须的啊，感觉V5可以考虑一下呢

之前有说要官方实现，不知道现在怎么样了

[birdycn]

其实前几天都已经用了V5,今天把前几天没有的代码补上就完成更新了.

请问一下怎么快速补上差异部分

[joesdu]

其实前几天都已经用了V5,今天把前几天没有的代码补上就完成更新了.

请问一下怎么快速补上差异部分

先看V5源码主要改了些啥,然后分析自己需要改那些东西.

[lichnow]

一直关注antd pro这个项目，什么都好，但是有个不足之处就是跟umi.js(尤其是dva这个毒瘤。。。)强制绑定，失去了react本该有的灵活性，如果能跨出一步，放弃umi,dva做到打包工具无关性，比如支持自定义的webpack或者cra，那就很棒了

[xiexingen]

v5里面没绑定dva了吧，只用了一个全局的model 其他基本都可以通过umi/hooks来做

[infinityboy]

一直关注antd pro这个项目，什么都好，但是有个不足之处就是跟umi.js(尤其是dva这个毒瘤。。。)强制绑定，失去了react本该有的灵活性，如果能跨出一步，放弃umi,dva做到打包工具无关性，比如支持自定义的webpack或者cra，那就很棒了

请教一下，还有什么是umi没有的？但是中台里又是必须的呢？然后通过umi又搞不出来的？

[aLIEzsss4]

beta版示例怎么预览，beta文档里预览点进去是v4

[hihuangwei]

666

[zepc007]

那就很棒棒哦

[kaoding]

预览 bug 汇总：https://github.com/ant-design/ant-design-pro/issues/6621

[Lind-pro]

预计什么时候发布正式版呢？

[hot588]

V4 都还没有整好，V5也是一个备选方案！现在还不是时候！等到年底吧！

等帅哥的儿子一出生！V5也会横空出世！到时候大家一起庆祝，双喜临门！

[joesdu]

V4 都还没有整好，V5也是一个备选方案！现在还不是时候！等到年底吧！

等帅哥的儿子一出生！V5也会横空出世！到时候大家一起庆祝，双喜临门！

我已经上了V5了,基本OK

[xiexingen]

+1 表示已经上v5了，antd4.x、umi 3.x 、pro-layout6.x

[lichnow]

@infinityboy 比如状态管理，我用mobx+apollo,umi+pro就很难改，比如要增加electron支持，vue-cli是一键的，umi很麻烦，比如要和nest.js同构，需要webpack改很多配置，umi很难做到，目前我是手动配的，这些都是很麻烦的事情

[infinityboy]

@infinityboy 比如状态管理，我用mobx+apollo,umi+pro就很难改，比如要增加electron支持，vue-cli是一键的，umi很麻烦，比如要和nest.js同构，需要webpack改很多配置，umi很难做到，目前我是手动配的，这些都是很麻烦的事情

也就是说umi在这些工程集成方面还不是特别完善，如果要是用react的官方和社区提供方法去集成以上的这些就要灵活的多了吧？再请教一下 有没有比较不错的nest.js的开源学习资源和开源项目推荐一个呗

[Cheng007]

V4 都还没有整好，V5也是一个备选方案！现在还不是时候！等到年底吧！

等帅哥的儿子一出生！V5也会横空出世！到时候大家一起庆祝，双喜临门！

V5

[chenshuai2144]

@lichnow umi 出了自己的同构工具，umi ssr 试试

[lichnow]

@infinityboy Nest.js的官方文档就很不错了，英文不好直接点击chrome自动翻译基本能做到90%的人工无违和感翻译，比那个中文文档好很多，还有我自己的小博客，有空了会做一些nest.js的教程什么的。目前的做法是前台next.js,后台react+mobx+apollo,后端nest.js,然后用lerna.js做成monorepo,自己用yargs+webpack-chian写个工具在那边开发，cli以及各种类库,比如user(user-admin,user-api,user-web)等是放在libs目录下，前后端的三个应用放在apps下,整体感觉还可以，但毕竟土架子以开发效率为目的，所以还是非常简陋，尝试了一下vue-cli+nuxt替换react+next,感觉非常棒，整合起来很好用，可以跟自己写的cli配合的很好，但是因为对vue不熟悉最后还是放弃了，建议对vue熟悉的最好用vue ant pro做后台和nuxt做前台，与nest整合起来非常方便，分分钟有种稳如老狗的感觉，比这个react版强制绑定umi,dva，无法把界面单独拎出来用的好很多，非常自由

[lichnow]

@chenshuai2144 初步尝试了一下，如果做成multirepo，这个需求不大的，直接next.js+cra效果是一样的，同样可以ssr+spa，如果和fastify/nest整合成monorepo，做到一键启动打包,热更新前后端,创建各种lib,service,module什么的，还是很难，umi.js封装的太过了，缺少了灵活性，但是许多如果过度封装那预定义的功能的完善和强大就非常重要了，然而貌似目前umi还没有前后端同构的monorepo的正确实施方案，比如可以创建时选择Monorepo还是single app模式，type中可以选择electron,ant pro,ssr,nest.js api,egg.js api等等，如果这个比较难做到的话另一种更好地选择是像vue-cli那样的方式甚至cra那样捡漏也可以的，至少让用户自己可以封装。。。

[lichnow]

@chenshuai2144 不过umi有个比它本身实用很多，价值高出一个数量级的项目-dumi,比vuepress好看许多,值得点赞

[chz102]

选择了 PRO V5，安装出来咋还是V4版本

[chenshuai2144]

@lichnow umi 专注于中后台索引你说的那些功能做的不是很好。dva 的绑定也不是必须的，是可选的，只是我们的 demo 中选择了 dva

[chenshuai2144]

@chz102 从哪里看出来是 v4 的?

[duwei54]

beta版示例怎么预览，beta文档里预览点进去是v4

我这里也是

[chz102]

@chz102 从哪里看出来是 v4 的?

我截图上有版本号啊，从页面上比较明显的地方就是顶部导航logo位置，V5是横向通栏，V4是纵向通栏，我clone v5的源码启动就可以

[infinityboy]

@infinityboy Nest.js的官方文档就很不错了，英文不好直接点击chrome自动翻译基本能做到90%的人工无违和感翻译，比那个中文文档好很多，还有我自己的小博客，有空了会做一些nest.js的教程什么的。目前的做法是前台next.js,后台react+mobx+apollo,后端nest.js,然后用lerna.js做成monorepo,自己用yargs+webpack-chian写个工具在那边开发，cli以及各种类库,比如user(user-admin,user-api,user-web)等是放在libs目录下，前后端的三个应用放在apps下,整体感觉还可以，但毕竟土架子以开发效率为目的，所以还是非常简陋，尝试了一下vue-cli+nuxt替换react+next,感觉非常棒，整合起来很好用，可以跟自己写的cli配合的很好，但是因为对vue不熟悉最后还是放弃了，建议对vue熟悉的最好用vue ant pro做后台和nuxt做前台，与nest整合起来非常方便，分分钟有种稳如老狗的感觉，比这个react版强制绑定umi,dva，无法把界面单独拎出来用的好很多，非常自由

嗯嗯，感谢感谢，非常感谢！！

[chz102]

@chenshuai2144
左侧菜单和右侧头部的分割线shadow没有出来，连载一块儿了，不太美观
另外，本地如何把切换主题的功能放出来？

[joesdu]

@chenshuai2144
左侧菜单和右侧头部的分割线shadow没有出来，连载一块儿了，不太美观
另外，本地如何把切换主题的功能放出来？
本地切换主题的那个插件我试用了一下,感觉效果很不理想.官方估计还在修.

[yikyo]

最近刚开的项目，不小心用到了V5版本（没显示测试版!!!!)，已经上线了，有个问题请帮忙解决下，histroy hash模式下，菜单选中状态及二级标题显示不正确。

@chenshuai2144 大佬。。。产品那边我交待不过去。。

[admiao]

PRO 就是 蚂蚁前端圈的集合, 如果跳出来做可能对他们的意义就不大了吧 ， 起初写一些小练习 觉得dva 是非常棒的 但随着业务的增加，越来越觉得难用，至于umi 从来就没看出有什么好处

[chz102]

@chenshuai2144 大神，这个版本有没有个正式发布时间的预期啊，现在有个新的项目，有点纠结要不要用V5

[joesdu]

@chenshuai2144 大神，这个版本有没有个正式发布时间的预期啊，现在有个新的项目，有点纠结要不要用V5

感觉可以上,但是要留意官方的改动,及时跟进应该问题就不大.

[joesdu]

PRO 就是 蚂蚁前端圈的集合, 如果跳出来做可能对他们的意义就不大了吧 ， 起初写一些小练习 觉得dva 是非常棒的 但随着业务的增加，越来越觉得难用，至于umi 从来就没看出有什么好处

umi的话主要是帮忙处理了大量webpack的东西.我反正不会用webpack,整的头昏脑胀的.

[quoyi]

我就说怎么感觉就像个菜鸡作品，完全不符合 stars 该有的代码质量，都打算退回 create-react-app 了，原来是打开方式错了（选的 V4 ，手动泪奔~）一个配置文件全被 routes 占了，独立出来很难吗？就用了 uniq 和 groupBy 有必要在 dependencies 引入整个 lodash ？

[joesdu]

我就说怎么感觉就像个菜鸡作品，完全不符合 stars 该有的代码质量，都打算退回 create-react-app 了，原来是打开方式错了（选的 V4 ，手动泪奔~）一个配置文件全被 routes 占了，独立出来很难吗？

官方只是自己写了个简单的例子,自己弄出来就好了.

[kaoding]

我就说怎么感觉就像个菜鸡作品，完全不符合 stars 该有的代码质量，都打算退回 create-react-app 了，原来是打开方式错了（选的 V4 ，手动泪奔~）一个配置文件全被 routes 占了，独立出来很难吗？

如果不好，你可以提PR？开源你免费使用，没有一点开源精神，还说风凉话的，你牛，你自己写一个不是菜鸡的东西出来啊！早退回早好，走好，不送。

[quoyi]

我就说怎么感觉就像个菜鸡作品，完全不符合 stars 该有的代码质量，都打算退回 create-react-app 了，原来是打开方式错了（选的 V4 ，手动泪奔~）一个配置文件全被 routes 占了，独立出来很难吗？

官方只是自己写了个简单的例子,自己弄出来就好了.

嗯，已经自己切割出来 import [].concat(routes) 了，就是表述了一下直观感觉。也不是说要贬低作者，没有精益求精的精神还叫高手吗？个人从不盲目崇拜，谢谢。

[quoyi]

我就说怎么感觉就像个菜鸡作品，完全不符合 stars 该有的代码质量，都打算退回 create-react-app 了，原来是打开方式错了（选的 V4 ，手动泪奔~）一个配置文件全被 routes 占了，独立出来很难吗？

如果不好，你可以提PR？开源你免费使用，没有一点开源精神，还说风凉话的，你牛，你自己写一个不是菜鸡的东西出来啊！早退回早好，走好，不送。

哟，还有人来咬嗦？我不是高手，但是起码有良好的编码习惯，以及独立思考的能力。不好的地方还不让人指出来了？已经弃坑，谢谢。

[kaoding]

[kaoding]

感觉 v5 可以正式发布了，让用户早点使用起来才是王道。

[admiao]

@chenshuai2144 在dark 主题下有点丑，异步数据写到数据流中怎么写啊，权限方案的和V4没多大区别啊 ，当角色是用户自定义的话...

[kaoding]

关于 layout="mix" 的建议

• 问题：现有的 mix 还是和 side 模式差不多，只是将 title 和 logo 放到 header 上，在menu留了一块可以自定义的块（menuExtraRender），还存在不太灵活的问题（如：在dark模式下，左侧和顶部都是暗黑颜色，在light模式下，顶部还是暗黑颜色）。

• 想法：既然是叫 mix 模式，更多是将 side 和 top 模式结合现来，才能体现出mix的强大和更加实际的用途。我的想法是，使用 mix 模式是由业务模式来决定的，解决的是复杂业务（按菜单业务分类）的情况才摧荐使用的一种模式，希望可以在 top 上有菜单 ，在 side 上也有菜单，其中 top 的 菜单是主控菜单，side 的 菜单是根据 top 的菜单来变化的被控菜单（或者叫子菜单）。

• 实现：在config.ts里的routes里做文章，现在已经加了一个menu:{name="",...}，是否可以再加一个mode，mode=top、mode=side代表顶部菜单、左侧菜单。默认显示top菜单、side菜单默认是不显示（可以选择一组为默认显示），选择了top菜单后，side的菜单相应变化。（注：top和side同时存在菜单，现有的做法是layout内再套一个layout）

[liujiayii]

关于 layout="mix" 的建议

• 问题：现有的 mix 还是和 side 模式差不多，只是将 title 和 logo 放到 header 上，在menu留了一块可以自定义的块（menuExtraRender），还存在不太灵活的问题（如：在dark模式下，左侧和顶部都是暗黑颜色，在light模式下，顶部还是暗黑颜色）。
• 想法：既然是叫 mix 模式，更多是将 side 和 top 模式结合现来，才能体现出mix的强大和更加实际的用途。我的想法是，使用 mix 模式是由业务模式来决定的，解决的是复杂业务（按菜单业务分类）的情况才摧荐使用的一种模式，希望可以在 top 上有菜单 ，在 side 上也有菜单，其中 top 的 菜单是主控菜单，side 的 菜单是根据 top 的菜单来变化的被控菜单（或者叫子菜单）。
• 实现：在config.ts里的routes里做文章，现在已经加了一个menu:{name="",...}，是否可以再加一个mode，mode=top、mode=side代表顶部菜单、左侧菜单。默认显示top菜单、side菜单默认是不显示（可以选择一组为默认显示），选择了top菜单后，side的菜单相应变化。（注：top和side同时存在菜单，现有的做法是layout内再套一个layout）

还有个问题mix模式下展开的菜单页面刷新后菜单被折叠了

[infinityboy]

+1 表示已经上v5了，antd4.x、umi 3.x 、pro-layout6.x

请教一下 ts的request 拦截器部分 怎么做的？

[joesdu]

+1 表示已经上v5了，antd4.x、umi 3.x 、pro-layout6.x

请教一下 ts的request 拦截器部分 怎么做的？

import { RequestConfig, history } from 'umi';
import Cookies from 'js-cookie';
import React from 'react';
import { notification } from 'antd';

//#region Request配置
/**
 * CodeMessage
 */
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  405: '请求方法不被允许。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。'
};

/**
 * 运行时request配置
 */
export const request: RequestConfig = {
  timeout: 10000,
  // 当接口规范时,采用配置errorHandler的方式来实现错误提示.
  errorHandler: (error: { response: Response }) => {
    const { response } = error;
    if (response && response.status) {
      const errorText = codeMessage[response.status] || response.statusText;
      const { status, url } = response;
      notification.error({ message: `请求错误 ${status}: ${url}`, description: errorText });
    }
    if (!response) {
      notification.error({ description: '您的网络发生异常，无法连接服务器', message: '网络异常' });
    }
    throw error;
  },
  // 当接口不规范时,采用配置errorConfig的方式来实现错误提示.
  errorConfig: {
    adaptor: (res: any) => {
      return {
        ...res,
        success: res.ok || res.Success || res.success,
        errorMessage: res.message || res.msg || res.Message
      };
    },
    errorPage: '1'
  },
  prefix: 'http://localhost:5000/api/',
  // 中间件
  middlewares: [],
  // 请求拦截器
  requestInterceptors: [
    (url: string, options) => {
      options.headers = { Authorization: `Bearer ${Cookies.get('accessToken') ?? ''}` };
      return { url, options };
    }
  ],
  // 响应拦截器
  responseInterceptors: []
};
//#endregion

[admiao]

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

[infinityboy]

+1 表示已经上v5了，antd4.x、umi 3.x 、pro-layout6.x

请教一下 ts的request 拦截器部分 怎么做的？

import { RequestConfig, history } from 'umi';
import Cookies from 'js-cookie';
import React from 'react';
import { notification } from 'antd';

//#region Request配置
/**
 * CodeMessage
 */
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  405: '请求方法不被允许。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。'
};

/**
 * 运行时request配置
 */
export const request: RequestConfig = {
  timeout: 10000,
  // 当接口规范时,采用配置errorHandler的方式来实现错误提示.
  errorHandler: (error: { response: Response }) => {
    const { response } = error;
    if (response && response.status) {
      const errorText = codeMessage[response.status] || response.statusText;
      const { status, url } = response;
      notification.error({ message: `请求错误 ${status}: ${url}`, description: errorText });
    }
    if (!response) {
      notification.error({ description: '您的网络发生异常，无法连接服务器', message: '网络异常' });
    }
    throw error;
  },
  // 当接口不规范时,采用配置errorConfig的方式来实现错误提示.
  errorConfig: {
    adaptor: (res: any) => {
      return {
        ...res,
        success: res.ok || res.Success || res.success,
        errorMessage: res.message || res.msg || res.Message
      };
    },
    errorPage: '1'
  },
  prefix: 'http://localhost:5000/api/',
  // 中间件
  middlewares: [],
  // 请求拦截器
  requestInterceptors: [
    (url: string, options) => {
      options.headers = { Authorization: `Bearer ${Cookies.get('accessToken') ?? ''}` };
      return { url, options };
    }
  ],
  // 响应拦截器
  responseInterceptors: []
};
//#endregion

感谢感谢，更新之后umi-request就不用引进来写了。。

[joesdu]

+1 表示已经上v5了，antd4.x、umi 3.x 、pro-layout6.x

请教一下 ts的request 拦截器部分 怎么做的？

import { RequestConfig, history } from 'umi';
import Cookies from 'js-cookie';
import React from 'react';
import { notification } from 'antd';

//#region Request配置
/**
 * CodeMessage
 */
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  405: '请求方法不被允许。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。'
};

/**
 * 运行时request配置
 */
export const request: RequestConfig = {
  timeout: 10000,
  // 当接口规范时,采用配置errorHandler的方式来实现错误提示.
  errorHandler: (error: { response: Response }) => {
    const { response } = error;
    if (response && response.status) {
      const errorText = codeMessage[response.status] || response.statusText;
      const { status, url } = response;
      notification.error({ message: `请求错误 ${status}: ${url}`, description: errorText });
    }
    if (!response) {
      notification.error({ description: '您的网络发生异常，无法连接服务器', message: '网络异常' });
    }
    throw error;
  },
  // 当接口不规范时,采用配置errorConfig的方式来实现错误提示.
  errorConfig: {
    adaptor: (res: any) => {
      return {
        ...res,
        success: res.ok || res.Success || res.success,
        errorMessage: res.message || res.msg || res.Message
      };
    },
    errorPage: '1'
  },
  prefix: 'http://localhost:5000/api/',
  // 中间件
  middlewares: [],
  // 请求拦截器
  requestInterceptors: [
    (url: string, options) => {
      options.headers = { Authorization: `Bearer ${Cookies.get('accessToken') ?? ''}` };
      return { url, options };
    }
  ],
  // 响应拦截器
  responseInterceptors: []
};
//#endregion

感谢感谢，更新之后umi-request就不用引进来写了。。

对request可以通过umi直接引入

[joesdu]

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

我空了给你弄一个

[ChenWeihua123]

点赞 支持！！

[joesdu]

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

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

[GUEThe]

想问一下 v5 怎么关闭默认的layout，然后使用自定义 layout

[joesdu]

不去config里边写layout就好了

已从 Outlook Mobilehttps://aka.ms/blhgte 发送

---

From: guetHe [e-mail]
Sent: Tuesday, May 26, 2020 4:00:16 PM
To: ant-design/ant-design-pro [e-mail]
Cc: Joe Du [e-mail]; Comment [e-mail]
Subject: Re: [ant-design/ant-design-pro] Ant Design Pro V5 已经支持预览 (#6605)

想问一下 v5 怎么关闭默认的layout，然后使用自定义 layout

―
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/ant-design/ant-design-pro/issues/6605#issuecomment-633872005, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADETYSMNPJEC2YHVVNWSUYTRTNZJBANCNFSM4NDVTI7Q.

[admiao]

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

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

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

[zoeykk]

请问 V5 版本下 ant-design-pro/src/app.tsx 这个路径下
export const layout = ({ initialState, }: { initialState: { settings?: LayoutSettings }; }): BasicLayoutProps => { return { rightContentRender: () => <RightContent />, disableContentMargin: false, footerRender: () => <Footer />, menuHeaderRender: undefined, ...initialState?.settings, }; };
这段代码里的 ...initialState?.settings 这个是啥意思？

[joesdu]

请问 V5 版本下 ant-design-pro/src/app.tsx 这个路径下
export const layout = ({ initialState, }: { initialState: { settings?: LayoutSettings }; }): BasicLayoutProps => { return { rightContentRender: () => <RightContent />, disableContentMargin: false, footerRender: () => <Footer />, menuHeaderRender: undefined, ...initialState?.settings, }; };
这段代码里的 ...initialState?.settings 这个是啥意思？

这个是TS的语法,意思就是若是initialState不为空就取他的settings属性并展开

[joesdu]

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

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

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

什么意思？

[admiao]

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

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

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

什么意思？

已经解决 我一直都用Form 的initialValues 来做回填 所有有一些困扰 现在解决了 感谢

[joesdu]

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

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

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

什么意思？

已经解决 我一直都用Form 的initialValues 来做回填 所有有一些困扰 现在解决了 感谢

哦,回填的话新版Form得用setxxx那个函数

[admiao]

为什么 路由做不到按 component来加载呢,比如

这样的路由布局不是很普遍吗？按路由路径对应的component来渲染不是思路更清楚明了吗

[netcore-jroger]

为什么 路由做不到按 component来加载呢,比如

这样的路由布局不是很普遍吗？按路由路径对应的component来渲染不是思路更清楚明了吗

同问

[lf7817]

想问一下 v5 怎么关闭默认的layout，然后使用自定义 layout

默认的布局关不掉，你可以这样试试

[kaoding]

自定义 layout

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

[joesdu]

自定义 layout

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

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

[joesdu]

同样,在新版Layout中若是某些页面不希望使用默认的layout,可以使用这种方式实现部分页面不使用layout

[zhengjf1988]

更新到V5了，看了一下权限的模块，感觉和V4差不多呀，还是绑定角色名称。

不能动态的创建角色，然后设置相关的菜单或者按钮权限吗？

[zhengjf1988]

还有一个就是右边的全局设置的浮动按钮没有了，现在不支持动态修改主题了吗？

[zhengjf1988]

还有一个问题是左边的菜单收缩起来后无法打开一级菜单

已提有 Issue 了
https://github.com/ant-design/ant-design-pro/issues/6644

[kaoding]

同样,在新版Layout中若是某些页面不希望使用默认的layout,可以使用这种方式实现部分页面不使用layout

如果这种方案可以，你提一个自定义 layout 的PR（文档）就行了，这就是用户想要的解决方案。没有写出来，就各有各的用法，写出来了就是一个最佳实践。

[joesdu]

更新到V5了，看了一下权限的模块，感觉和V4差不多呀，还是绑定角色名称。

不能动态的创建角色，然后设置相关的菜单或者按钮权限吗？

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

[joesdu]

还有一个问题是左边的菜单收缩起来后无法打开一级菜单

这个bug,大佬们估计还在修.

已提有 Issue 了
https://github.com/ant-design/ant-design-pro/issues/6644

[joesdu]

同样,在新版Layout中若是某些页面不希望使用默认的layout,可以使用这种方式实现部分页面不使用layout

如果这种方案可以，你提一个自定义 layout 的PR（文档）就行了，这就是用户想要的解决方案。没有写出来，就各有各的用法，写出来了就是一个最佳实践。

这个其实就是V4的写法.这两天我空了可以去提个V5的Pr

[joesdu]

还有一个就是右边的全局设置的浮动按钮没有了，现在不支持动态修改主题了吗？

动态改主题需要安装两个插件umi-plugin-antd-theme和umi-plugin-setting-drawer,并且在app.tsx的函数中导出

export const getInitialState = async (): Promise<{
  currentUser?: Types.CurrentUser;
  settings?: LayoutSettings;
  settingDrawer?: SettingDrawerProps;
}> => {
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/login') {
    return {
      currentUser,
      settings: defaultSettings,
      settingDrawer: { hideCopyButton: true, hideHintAlert: true }
    };
  } 

[zhengjf1988]

更新到V5了，看了一下权限的模块，感觉和V4差不多呀，还是绑定角色名称。

不能动态的创建角色，然后设置相关的菜单或者按钮权限吗？

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

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

[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页面.

[zhengjf1988]

更新到V5了，看了一下权限的模块，感觉和V4差不多呀，还是绑定角色名称。

不能动态的创建角色，然后设置相关的菜单或者按钮权限吗？

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

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

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

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

[joesdu]

对于V5中使用的东西有疑问的或者想学习,或者可以带带我的大佬,可以参考下我这个练手的项目
这个项目中精简了很多依赖包,依赖包部分功能由VS Code插件支持.如下是我的插件列表,建议大家看看

https://github.com/joesdu/destiny-admin-flow-umi
我这个项目中用了新的数据请求方式,动态主题切换.权限用例.以及新版layout的用法.最好start一下,开发后端的大佬说,满100星他女装

[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]

现在用的 [email protected] ，如何升级呢？

[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 同求!!!!!!

[tianlinzx]

请问什么时候正式发布？ @chenshuai2144

[joesdu]

V5没有正式版.因为本来V5现在就没啥问题.

[ImJustAMan]

有没有人遇到过使用useModel的时候会提示 Argument of type '"login"' is not assignable to parameter of type '"@@initialState"'

[guogeer]

V5版本确实挺棒的，开发起来很方便，高效

[joesdu]

有没有人遇到过使用useModel的时候会提示 Argument of type '"login"' is not assignable to parameter of type '"@@initialState"'

写了新8你的model需要执行一个命令才能被umi识别

[ImJustAMan]

有没有人遇到过使用useModel的时候会提示 Argument of type '"login"' is not assignable to parameter of type '"@@initialState"'

写了新8你的model需要执行一个命令才能被umi识别

emmmm没读懂这句话 但是我的代码好像自己突然就好了。。。总体来说这个新的model有点懵逼

[joesdu]

有没有人遇到过使用useModel的时候会提示 Argument of type '"login"' is not assignable to parameter of type '"@@initialState"'

写了新8你的model需要执行一个命令才能被umi识别

emmmm没读懂这句话 但是我的代码好像自己突然就好了。。。总体来说这个新的model有点懵逼

也可以通过start重启来实现编译，让umi认识新的model，或者build

[ImJustAMan]

刚刚用 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相关内容，数据流，权限也没有，你们都在哪里看到的？

我好像也看见了这几种 感觉还不如v4单独创建一个request来的清晰

[ImJustAMan]

有没有人遇到过使用useModel的时候会提示 Argument of type '"login"' is not assignable to parameter of type '"@@initialState"'

写了新8你的model需要执行一个命令才能被umi识别

emmmm没读懂这句话 但是我的代码好像自己突然就好了。。。总体来说这个新的model有点懵逼

也可以通过start重启来实现编译，让umi认识新的model，或者build

get到了 感谢

[Liqiankun]

改动是不是很大的那种？

[admiao]

layout 没了 ， 深深的与Umi结合 ， 开发者能做的更少了 ， 就一句话适合你就用不适合就再见吧 ， 这种闭圈框架 慎用。

[lirunwin]

闭圈框架啥意思 不懂 发送自 Windows 10 版邮件应用 发件人: admiao发送时间: 2020年7月18日 16:18收件人: ant-design/ant-design-pro抄送: lirunwin; Comment主题: Re: [ant-design/ant-design-pro] Ant Design Pro V5 已经支持预览 (#6605) layout 没了 ， 深深的与Umi结合 ， 开发者能做的更少了 ， 就一句话适合你就用不适合就再见吧 ， 这种闭圈框架 慎用。—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe. 

[joesdu]

没有深深的绑定吧，pro也可以单独用呀😶😶

[kawaiiz]

更新到V5了，看了一下权限的模块，感觉和V4差不多呀，还是绑定角色名称。

不能动态的创建角色，然后设置相关的菜单或者按钮权限吗？

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

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

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

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

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

你好，我也遇到相同的问题，在V4里 ，我是在 SecurityLayout.tsx里，强行往routes里push后端返回的这个路由列表，勉强能实现功能。但是，不知道如何在ant design pro框架里设置动态路由，能指点一下是改哪个文件吗，官方文档里，请求列表是为了设置menu菜单的，这个达不到想要的功能。

[netcore-jroger]

@kawaiiz 这个你看看

// app.tsx
import loadMenuData from './appService';
// ...
export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: undefined,
    menuDataRender: loadMenuData, // 重点
    ...initialState?.settings,
  };
};

//  appService.ts
import { MenuDataItem } from '@ant-design/pro-layout';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function loadMenuData(menuData: MenuDataItem[]): MenuDataItem[] {
  const menus = localStorage.getItem('menus'); // 登录后获取，存入 localStorage
  const resources = menus ? JSON.parse(menus) : [];

  const routes = [
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'icon-welcome',
      component: './Welcome',
    },
    ...resources,
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ];

  return routes;
}

[netcore-jroger]

另外说一下，这楼有点儿高了 🤒

[ImJustAMan]

@kawaiiz 这个你看看

// app.tsx
import loadMenuData from './appService';
// ...
export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: undefined,
    menuDataRender: loadMenuData, // 重点
    ...initialState?.settings,
  };
};

//  appService.ts
import { MenuDataItem } from '@ant-design/pro-layout';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function loadMenuData(menuData: MenuDataItem[]): MenuDataItem[] {
  const menus = localStorage.getItem('menus'); // 登录后获取，存入 localStorage
  const resources = menus ? JSON.parse(menus) : [];

  const routes = [
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'icon-welcome',
      component: './Welcome',
    },
    ...resources,
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ];

  return routes;
}

emmm上面老哥不是v4么 app.tsx我记得不是v5才出现的？

[ImJustAMan]

@netcore-jroger 敢问你的回复去哪儿了？你想看项目截图还是访问？我服了

[liz-zhang]

我要是不用默认的layout 要怎么改啊，

[netcore-jroger]

@liz-zhang 那你还是用 antd 吧，不要用 pro 版

[pxim]

v5和v5.1有什么区别 ？

[fanhualei]

建议追加一个新的layout，当二级菜单或三级菜单过多时，可以采用这种模式。

[mleister97]

I'm really looking forward into version 5.
Is there already an approximate relase date?

[shizhanguo]

使用v5之后，面包屑导航，不好用了呀

[joesdu]

使用v5之后，面包屑导航，不好用了呀

换Pagecontainer还是叫什么的组件试试，名字忘记了

[XiaYaXia]

V5的服务器获取菜单 如何菜单传参过去呢 约定式路由的菜单

[dulumao]

umi 赶紧移除吧，简直是毒瘤

[kawaiiz]

@kawaiiz 这个你看看

// app.tsx
import loadMenuData from './appService';
// ...
export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: undefined,
    menuDataRender: loadMenuData, // 重点
    ...initialState?.settings,
  };
};

//  appService.ts
import { MenuDataItem } from '@ant-design/pro-layout';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function loadMenuData(menuData: MenuDataItem[]): MenuDataItem[] {
  const menus = localStorage.getItem('menus'); // 登录后获取，存入 localStorage
  const resources = menus ? JSON.parse(menus) : [];

  const routes = [
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'icon-welcome',
      component: './Welcome',
    },
    ...resources,
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ];

  return routes;
}

这个设置有权限的路由在左边菜单的显示与否已经做过，不满足需求。现在的问题，动态配置的路由权限，菜单可以通过请求来的路由表更新，那我直接在浏览器地址输入禁止访问的路由怎么办？（一开始config.ts里的路由全部不设置权限，等请求到路由表才知道哪些可以进去。）
不过现在我倒是有思路了，原来的鉴权组件是根据用户角色名与路由角色名比对判断是否能进，只要改成校验即将要去的路由在路由表里是否被授权，即可。

[joesdu]

umi 赶紧移除吧，简直是毒瘤

不想用Umi的大佬们,麻烦来贡献代码.https://github.com/joesdu/cra-antd-pro-template.git

[xiaoTuiMao]

请问 v5 的文档在哪呀，我看文档最新的还是v4的

[joesdu]

请问 v5 的文档在哪呀，我看文档最新的还是v4的

https://procomponents.ant.design/
https://umijs.org/zh-CN/plugins/plugin-layout
结合起来看.

[sibaiabis]

你们全局变量怎么搞的？

[joesdu]

你们全局变量怎么搞的？

写个全局model或者用那啥initstate

[joesdu]

umi 赶紧移除吧，简直是毒瘤

不想用Umi的大佬们,麻烦来贡献代码.https://github.com/joesdu/cra-antd-pro-template.git

都几天了，天天叫着移除umi的大佬一句代码也没提供😂，我也写不下去了，准备学.net core转后端了

[sibaiabis]

你们全局变量怎么搞的？

写个全局model或者用那啥initstate

复杂数据嘞，就比如，需要发请求再保存全局数据，然后保存后怎么去修改它，我写的修改不好使。淦

[joesdu]

你们全局变量怎么搞的？

写个全局model或者用那啥initstate

复杂数据嘞，就比如，需要发请求再保存全局数据，然后保存后怎么去修改它，我写的修改不好使。淦

用reducer，别用state

[netcore-jroger]

@kawaiiz 这个你看看

// app.tsx
import loadMenuData from './appService';
// ...
export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: undefined,
    menuDataRender: loadMenuData, // 重点
    ...initialState?.settings,
  };
};

//  appService.ts
import { MenuDataItem } from '@ant-design/pro-layout';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function loadMenuData(menuData: MenuDataItem[]): MenuDataItem[] {
  const menus = localStorage.getItem('menus'); // 登录后获取，存入 localStorage
  const resources = menus ? JSON.parse(menus) : [];

  const routes = [
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'icon-welcome',
      component: './Welcome',
    },
    ...resources,
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ];

  return routes;
}

这个设置有权限的路由在左边菜单的显示与否已经做过，不满足需求。现在的问题，动态配置的路由权限，菜单可以通过请求来的路由表更新，那我直接在浏览器地址输入禁止访问的路由怎么办？（一开始config.ts里的路由全部不设置权限，等请求到路由表才知道哪些可以进去。）
不过现在我倒是有思路了，原来的鉴权组件是根据用户角色名与路由角色名比对判断是否能进，只要改成校验即将要去的路由在路由表里是否被授权，即可。

我从你的回复感觉你的理解还不够，或者对后端不太了解。我那样配置，直接访问也是没数据的。页面想显示403，再多一个判断的事儿。看项目需求吧，我的是没必要。

[kawaiiz]

@kawaiiz 这个你看看

// app.tsx
import loadMenuData from './appService';
// ...
export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: undefined,
    menuDataRender: loadMenuData, // 重点
    ...initialState?.settings,
  };
};

//  appService.ts
import { MenuDataItem } from '@ant-design/pro-layout';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function loadMenuData(menuData: MenuDataItem[]): MenuDataItem[] {
  const menus = localStorage.getItem('menus'); // 登录后获取，存入 localStorage
  const resources = menus ? JSON.parse(menus) : [];

  const routes = [
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'icon-welcome',
      component: './Welcome',
    },
    ...resources,
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ];

  return routes;
}

这个设置有权限的路由在左边菜单的显示与否已经做过，不满足需求。现在的问题，动态配置的路由权限，菜单可以通过请求来的路由表更新，那我直接在浏览器地址输入禁止访问的路由怎么办？（一开始config.ts里的路由全部不设置权限，等请求到路由表才知道哪些可以进去。）
不过现在我倒是有思路了，原来的鉴权组件是根据用户角色名与路由角色名比对判断是否能进，只要改成校验即将要去的路由在路由表里是否被授权，即可。

我从你的回复感觉你的理解还不够，或者对后端不太了解。我那样配置，直接访问也是没数据的。页面想显示403，再多一个判断的事儿。看项目需求吧，我的是没必要。

我应该是没有理解透彻，走了自己的牛角尖，谢谢你的回复。

[admiao]

V5我编译一次要三秒 ， 比V4慢了不少

[meijuji202]

关于 layout="mix" 的建议

• 问题：现有的 mix 还是和 side 模式差不多，只是将 title 和 logo 放到 header 上，在menu留了一块可以自定义的块（menuExtraRender），还存在不太灵活的问题（如：在dark模式下，左侧和顶部都是暗黑颜色，在light模式下，顶部还是暗黑颜色）。
• 想法：既然是叫 mix 模式，更多是将 side 和 top 模式结合现来，才能体现出mix的强大和更加实际的用途。我的想法是，使用 mix 模式是由业务模式来决定的，解决的是复杂业务（按菜单业务分类）的情况才摧荐使用的一种模式，希望可以在 top 上有菜单 ，在 side 上也有菜单，其中 top 的 菜单是主控菜单，side 的 菜单是根据 top 的菜单来变化的被控菜单（或者叫子菜单）。
• 实现：在config.ts里的routes里做文章，现在已经加了一个menu:{name="",...}，是否可以再加一个mode，mode=top、mode=side代表顶部菜单、左侧菜单。默认显示top菜单、side菜单默认是不显示（可以选择一组为默认显示），选择了top菜单后，side的菜单相应变化。（注：top和side同时存在菜单，现有的做法是layout内再套一个layout）

在现有的三种模式下转换就好，在config.ts里的routes layout{layout: 'side' | 'top' | 'mix'}

[corgile]

啥时候考虑下集成

• 文字编辑组件：
  
  
  
  • 富文本
  
  
  • markdown(完美支持的那种)，
  
  
• 媒体组件：
  
  
  
  • 视频播放
  
  
  • 附件管理
  
  
• 权限模块
  
  
  
  • 权限管理
  
  

[lirenhao]

关于V5权限这一块，想问问大家都是怎么实现一个菜单可以被多个角色看到，现在提供的access如果要在routes配置上使用，只能设置access（但是access的类型是个字符串），如果我这个个菜单能被多个角色看到，那么现在我能想到的实现方式就只有在access.ts中对每个菜单设置一个返回属性，在每个返回的属性上判断当前用户的角色是否满足可查看这个菜单的角色组里，这样虽然也能实现一个菜单可以被多个角色看到，但是及其不灵活，需要我对每个菜单在access.ts文件中创建一个返回属性，所以想跟大家讨论下还有别都实现方式没

[kaoding]

关于V5权限这一块，想问问大家都是怎么实现一个菜单可以被多个角色看到，现在提供的access如果要在routes配置上使用，只能设置access（但是access的类型是个字符串），如果我这个个菜单能被多个角色看到，那么现在我能想到的实现方式就只有在access.ts中对每个菜单设置一个返回属性，在每个返回的属性上判断当前用户的角色是否满足可查看这个菜单的角色组里，这样虽然也能实现一个菜单可以被多个角色看到，但是及其不灵活，需要我对每个菜单在access.ts文件中创建一个返回属性，所以想跟大家讨论下还有别都实现方式没

可以参考这个
https://beta-pro.ant.design/docs/authority-management-cn#%E4%B8%89%E3%80%81%E8%B7%AF%E7%94%B1%E5%92%8C%E8%8F%9C%E5%8D%95%E7%9A%84%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6

[lirenhao]

关于V5权限这一块，想问问大家都是怎么实现一个菜单可以被多个角色看到，现在提供的access如果要在routes配置上使用，只能设置access（但是access的类型是个字符串），如果我这个个菜单能被多个角色看到，那么现在我能想到的实现方式就只有在access.ts中对每个菜单设置一个返回属性，在每个返回的属性上判断当前用户的角色是否满足可查看这个菜单的角色组里，这样虽然也能实现一个菜单可以被多个角色看到，但是及其不灵活，需要我对每个菜单在access.ts文件中创建一个返回属性，所以想跟大家讨论下还有别都实现方式没

可以参考这个
https://beta-pro.ant.design/docs/authority-management-cn#%E4%B8%89%E3%80%81%E8%B7%AF%E7%94%B1%E5%92%8C%E8%8F%9C%E5%8D%95%E7%9A%84%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6

我试着将access.ts的属性值设置为function，但是在我测试的时候看到的现象是这个菜单一直在加载中（我并没有去找造成这种现象的原因），比如我在access.ts中添加了一个canTest: () => false

[lirenhao]

关于V5权限这一块，想问问大家都是怎么实现一个菜单可以被多个角色看到，现在提供的access如果要在routes配置上使用，只能设置access（但是access的类型是个字符串），如果我这个个菜单能被多个角色看到，那么现在我能想到的实现方式就只有在access.ts中对每个菜单设置一个返回属性，在每个返回的属性上判断当前用户的角色是否满足可查看这个菜单的角色组里，这样虽然也能实现一个菜单可以被多个角色看到，但是及其不灵活，需要我对每个菜单在access.ts文件中创建一个返回属性，所以想跟大家讨论下还有别都实现方式没

可以参考这个
https://beta-pro.ant.design/docs/authority-management-cn#%E4%B8%89%E3%80%81%E8%B7%AF%E7%94%B1%E5%92%8C%E8%8F%9C%E5%8D%95%E7%9A%84%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6

在https://umijs.org/zh-CN/plugins/plugin-access中也并没有看到你回复链接中在routes的配置上直接使用access.ts中function属性值的用法，我理解的是routes只能配置属性值类型为boolean的属性，function的属性值是在组件内需要执行的

[mytheshow]

请问怎么下载js版本？ npm create umi 安装没有选择JavaScript的选项了

[lirenhao]

关于V5权限这一块，想问问大家都是怎么实现一个菜单可以被多个角色看到，现在提供的access如果要在routes配置上使用，只能设置access（但是access的类型是个字符串），如果我这个个菜单能被多个角色看到，那么现在我能想到的实现方式就只有在access.ts中对每个菜单设置一个返回属性，在每个返回的属性上判断当前用户的角色是否满足可查看这个菜单的角色组里，这样虽然也能实现一个菜单可以被多个角色看到，但是及其不灵活，需要我对每个菜单在access.ts文件中创建一个返回属性，所以想跟大家讨论下还有别都实现方式没

可以参考这个
https://beta-pro.ant.design/docs/authority-management-cn#%E4%B8%89%E3%80%81%E8%B7%AF%E7%94%B1%E5%92%8C%E8%8F%9C%E5%8D%95%E7%9A%84%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6

我试着将access.ts的属性值设置为function，但是在我测试的时候看到的现象是这个菜单一直在加载中（我并没有去找造成这种现象的原因），比如我在access.ts中添加了一个canTest: () => false

access.ts的属性值设置为function是没问题的，刚才我应该是某个地方出问题，现在是可以了

[lirenhao]

关于V5权限这一块，想问问大家都是怎么实现一个菜单可以被多个角色看到，现在提供的access如果要在routes配置上使用，只能设置access（但是access的类型是个字符串），如果我这个个菜单能被多个角色看到，那么现在我能想到的实现方式就只有在access.ts中对每个菜单设置一个返回属性，在每个返回的属性上判断当前用户的角色是否满足可查看这个菜单的角色组里，这样虽然也能实现一个菜单可以被多个角色看到，但是及其不灵活，需要我对每个菜单在access.ts文件中创建一个返回属性，所以想跟大家讨论下还有别都实现方式没

可以参考这个
https://beta-pro.ant.design/docs/authority-management-cn#%E4%B8%89%E3%80%81%E8%B7%AF%E7%94%B1%E5%92%8C%E8%8F%9C%E5%8D%95%E7%9A%84%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6

在https://umijs.org/zh-CN/plugins/plugin-access中也并没有看到你回复链接中在routes的配置上直接使用access.ts中function属性值的用法，我理解的是routes只能配置属性值类型为boolean的属性，function的属性值是在组件内需要执行的

这一块关于access的属性值，umi的文档描述的还是不够清楚

[sibaiabis]

官网demo的源码在哪里，就是这个地址https://preview.pro.ant.design/

[lishaoh]

@kawaiiz
loadMenuData动态设置路由后，遇到过菜单icon不能正确渲染吗

[joesdu]

@kawaiiz
loadMenuData动态设置路由后，遇到过菜单icon不能正确渲染吗

这个需要你自己绑定图标。umi没办法帮你绑定。

[joesdu]

@umijs/plugin-model更新了,用V5 使用Hooks的同学们注意了,以前在Windows中非全局models使用文件名的引用方式是个bug,现在修复了.大家需要使用名称空间+文件名的方式使用usemodel,全局models的使用方式未变.
参考例子:
src/login/models/index.ts
使用方式:
const { signIn, loading } = useModel('login.index');
在Mac OS没有这个问题.

[lirenhao]

hash模式面包屑导航栏跳转错误，当history设置为hash时，点击面包屑导航栏跳转的地址是错误（缺少了#），这个问题应该怎么解决？

[LIPSong]

这个感觉非常资深

[wushizhan]

V5 怎么下载对应的block

[admiao]

更优秀的后台方案 vue-antd-admin 无论是结构或流畅度或体验都比umi的pro v5优秀很多 ， 推荐一下。

[joesdu]

更优秀的后台方案 vue-antd-admin 无论是结构或流畅度或体验都比umi的pro v5优秀很多 ， 推荐一下。

别人react，你来推vue😶

[linxinqiang90]

只想说，能把一小部分做好就很棒了。
umi太多余了

[netcore-jroger]

好多人都觉得umi多余。而且好像也没啥用

[liujiayii]

觉得多余可以用cra+pro-component啊，何必来这吐槽，

[netcore-jroger]

这是给作者提建议呀，怎么能说是吐槽呢 🈂️

[wushizhan]

在哪来关闭自动登录啊 找不到

[admiao]

更优秀的后台方案 vue-antd-admin 无论是结构或流畅度或体验都比umi的pro v5优秀很多 ， 推荐一下。

别人react，你来推vue😶
哪个方案好就用哪个 ？ 至于站阵营的都是弱鸡

[lei-cao]

使用 useModel 管理了用户信息权限之后，同时在使用 dva 管理其他复杂逻辑和状态。dva中需要用到 currentUser， 在 dva 中无法直接用 hooks， 如何获取这个信息最好呢？

[xiexingen]

可以在init里面吧需要的数据存起来 然后dva中再获取

[roytan883]

一直关注antd pro这个项目，什么都好，但是有个不足之处就是跟umi.js(尤其是dva这个毒瘤。。。)强制绑定，失去了react本该有的灵活性，如果能跨出一步，放弃umi,dva做到打包工具无关性，比如支持自定义的webpack或者cra，那就很棒了

同感，我也是一直因为dva这个毒瘤没用使用pro，等到这次v5发布后，终于可以尝试使用了
https://github.com/ant-design/ant-design-pro/issues/1516

[takeitforwardsolutions]

Anyone have luck changing the logo via BasicLayoutProps in app.tsx.
I have tried various attempts and no luck > logo:{logo}

import logo from '@/assets/logo.svg'; seems that its not converting to webpack path static >
html is rendering as >
<a><div class="ant-image ant-image-error"><img class="ant-image-img" src="./assets/logo.svg"></div><h1>NYB</h1></a>
So passing {logo} into logo: doesn't work but this does work >
logo:() => <img alt="logo" src={logo} />,

[li515422618]

有没有基于V5版本的多标签页功能，哪位大佬能给搞一下，在公司用v5开发个后台系统，没有多标签很多功能不好搞，跪求

[okwen5566]

请问V5正式版有大概的发布时间计划吗？

[IsaacHo]

谢谢代码贡献。

[yuandalu]

现在能线上使用不，

[joesdu]

现在能线上使用不，

都用了快一年多了.

[yuandalu]

现在能线上使用不，

都用了快一年多了.

恩恩，我问的是v5版本，你那个一年多的产品是v5版本不

[arpanEnbake]

I have been looking forward for v5 official release and playing a lot around it. Amazing job by each of you.

One serious concern is internationlization issue.
Ant-design-pro tables i18n does not work with Pro. This works very well if we integrate pro tables in a stand alone project.

Some thing that needs urgent attention to be used globally.

[holiday12138]

@chenshuai2144 请教一下 约定式路由可以用 plugin-access 的权限控制吗

[joesdu]

@chenshuai2144 请教一下 约定式路由可以用 plugin-access 的权限控制吗

是，从V4升V5，antd3到antd4，js到ts，class到hooks完全转化我一个人干了15天。

[jing-wu]

请问 v5 怎么开启 dva

[joesdu]

请问 v5 怎么开启 dva

引入umi-dva的插件.

[wushizhan]

在 mac 环境下 修改代码不会自动重新编译 刷新网站 windows下正常 是我安装的模块有问题吗 还有就是有些样式 有问题 是antd的锅吗？

[kaoding]

v5 需要同步到 gitee (yarn create umi my-app 优先使用的是gitee) @chenshuai2144

[hq22]

请问V5正式版有发布时间计划吗？5月份放出来，事件也挺长了

[ChenWeihua123]

我现在怎么能拉取到v5的全部代码 跟pro预览的页面一致的，求大佬们指教下 谢谢

[iloveip]

Hi there, is V5 available in JavaScript? Or only in TypeScript?

[netcore-jroger]

Hi there, is V5 available in JavaScript? Or only in TypeScript?

only typescript.

[smddzcy]

Any plans to have RTL support in v5? (https://github.com/ant-design/ant-design-pro/issues/6880)

[xiak]

更优秀的后台方案 vue-antd-admin 无论是结构或流畅度或体验都比umi的pro v5优秀很多 ， 推荐一下。

说实话，不太喜欢 vue-antd-admin 切换页面那个动画，有强迫症的看不下去

[wangJacker]

弄下来看了哈感觉很强大啊，可以不再使用dva，使用比起V4来说很简单，只是现在集成了layout 如果我想再现有的layout添加multitab 的组件， 目前没研究出来，目前用了umi-plugin-keep-alive这个插件 不知道在哪里放置KeepAlive, AliveScope标签，还有就是我想生产环境用目前V5 以后正式发布了 能升级 或者平滑度过么，烦请大佬告知一些 谢谢 ！

[wangJacker]

@xiaohuoni 灰常感谢你们这么忙碌还帮我们解决问题 谢谢！ 弱弱问下以后能平滑升级嘛 ！然后今天去.umi文件看了下有个配置项childrenRender，但是TS BasicLayoutProps声明没有这个，不晓得是不是遗漏了呀！

[wangJacker]

pro V5 热更新现在是全局的啊ctrs+s就全部刷新浏览器了，如何配置局部刷新呢？

[uuxia]

Hi there, is V5 available in JavaScript? Or only in TypeScript?

V5 only in TS，you can choose JS in V4 .

[beevivo6]

羡慕嫉妒恨 我的盖世仙女什么时候来接我

马马马上来找你...

[luzhaoren]

multitab啊，苦苦苛求了几个版本了，跪求官方出一个multitab标准实现方案啊

[laolaolulu]

原来prov5默认不用dva了?我寻思了半天这个model应该怎么写

[gamemore]

branch v5 下載回來之後 會發生 build fail 的情況
```
D:workspaceant-design-pro-5>npm run build

[email protected] build D:workspaceant-design-pro-5
umi build

WARN [WARN] update jsx: "react" into jsx: "react-jsx" to suport the new JSX transform in React 17 in tsconfig.json

• Webpack █████████████████████████ chunk asset optimization (92%) ESBuild Plugin

Error: Valid targets: es6, es2015, es2016, es2017, es2018, es2019, es2020, esnext
at handleResponse (D:workspaceant-design-pro-5node_modulesesbuildlibmain.js:261:34)
at Socket. (D:workspaceant-design-pro-5node_modulesesbuildlibmain.js:183:9)
at Socket.emit (events.js:311:20)
at addChunk (_stream_readable.js:294:12)
at readableAddChunk (_stream_readable.js:275:11)
at Socket.Readable.push (_stream_readable.js:209:10)
at Pipe.onStreamRead (internal/stream_base_commons.js:186:23)
build failed
Error: build failed
at D:[e-mail]:108:27
at finalCallback (D:workspaceant-design-pro-5node_moduleswebpacklibMultiCompiler.js:254:12)
at D:workspaceant-design-pro-5node_moduleswebpacklibMultiCompiler.js:275:14
at D:workspaceant-design-pro-5node_modulesneo-asyncasync.js:2830:7
at done (D:workspaceant-design-pro-5node_modulesneo-asyncasync.js:2925:13)
at D:workspaceant-design-pro-5node_moduleswebpacklibMultiCompiler.js:186:23
at D:workspaceant-design-pro-5node_moduleswebpacklibMultiCompiler.js:267:15
at finalCallback (D:workspaceant-design-pro-5node_moduleswebpacklibCompiler.js:257:39)
at onCompiled (D:workspaceant-design-pro-5node_moduleswebpacklibCompiler.js:265:20)
at D:workspaceant-design-pro-5node_moduleswebpacklibCompiler.js:676:23
at D:workspaceant-design-pro-5node_moduleswebpacklibCompilation.js:1411:14
at eval (eval at create (D:workspaceant-design-pro-5node_modulestapablelibHookCodeFactory.js:33:10), :20:1)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: umi build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! c:Npm_cache_logs2020-12-04T08_18_58_925Z-debug.log

[gamemore]

branch v5 下載回來之後 會發生 build fail 的情況

D:\workspace\ant-design-pro-5>npm run build

> [email protected] build D:\workspace\ant-design-pro-5
> umi build

WARN [WARN] update `jsx: "react"` into `jsx: "react-jsx"` to suport the new JSX transform in React 17 in tsconfig.json

* Webpack █████████████████████████ chunk asset optimization (92%) ESBuild Plugin


Error: Valid targets: es6, es2015, es2016, es2017, es2018, es2019, es2020, esnext
    at handleResponse (D:\workspace\ant-design-pro-5\node_modules\esbuild\lib\main.js:261:34)
    at Socket.<anonymous> (D:\workspace\ant-design-pro-5\node_modules\esbuild\lib\main.js:183:9)
    at Socket.emit (events.js:311:20)
    at addChunk (_stream_readable.js:294:12)
    at readableAddChunk (_stream_readable.js:275:11)
    at Socket.Readable.push (_stream_readable.js:209:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:186:23)
build failed
Error: build failed
    at D:\workspace\ant-design-pro-5\node_modules\@umijs\bundler-webpack\lib\index.js:108:27
    at finalCallback (D:\workspace\ant-design-pro-5\node_modules\webpack\lib\MultiCompiler.js:254:12)
    at D:\workspace\ant-design-pro-5\node_modules\webpack\lib\MultiCompiler.js:275:14
    at D:\workspace\ant-design-pro-5\node_modules\neo-async\async.js:2830:7
    at done (D:\workspace\ant-design-pro-5\node_modules\neo-async\async.js:2925:13)
    at D:\workspace\ant-design-pro-5\node_modules\webpack\lib\MultiCompiler.js:186:23
    at D:\workspace\ant-design-pro-5\node_modules\webpack\lib\MultiCompiler.js:267:15
    at finalCallback (D:\workspace\ant-design-pro-5\node_modules\webpack\lib\Compiler.js:257:39)
    at onCompiled (D:\workspace\ant-design-pro-5\node_modules\webpack\lib\Compiler.js:265:20)
    at D:\workspace\ant-design-pro-5\node_modules\webpack\lib\Compiler.js:676:23
    at D:\workspace\ant-design-pro-5\node_modules\webpack\lib\Compilation.js:1411:14
    at eval (eval at create (D:\workspace\ant-design-pro-5\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `umi build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     c:\Npm_cache\_logs\2020-12-04T08_18_58_925Z-debug.log

把 config.ts 裡面的 esbuild 移除 就可以 build 了

[lynzz]

如何在app.tsx 里配置 layout 嵌套？ @chenshuai2144

[wangJacker]

最近新项目也需要用到multitab （多标签），准备上手V5 因为觉得超级好用强大，然后基于V5、umi-plugin-keep-alive做了一个multitab 与需要的童鞋一起共勉：https://github.com/wangJacker/ant-design-pro-V5-multitab

[PathFun]

设置服务端请求的菜单格式,config/routes.ts的菜单屏蔽掉，只留user与404的， 请求回来的菜单点击总是到404页面， 我是在请求回来的时候再去把component动态引入吗