Ant Design Pro V5 已经支持预览

chenshuai2144 commented 4 years ago

在经过了很长时间的准备下，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 commented 4 years ago

终于来了！点赞支持！

birdycn commented 4 years ago

感谢老大！

liujiayii commented 4 years ago

火钳刘明

crashsol commented 4 years ago

nice，马上升级

wushizhan commented 4 years ago

Go Go Go

joesdu commented 4 years ago

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

hot588 commented 4 years ago

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

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

joesdu commented 4 years ago

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

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

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

chenshuai2144 commented 4 years ago

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

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

joesdu commented 4 years ago

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

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

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

chenshuai2144 commented 4 years ago

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

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

hot588 commented 4 years ago

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

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

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

UMI UI 坑死人啊！

chenshuai2144 commented 4 years ago

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

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

joesdu commented 4 years ago

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

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

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

liujiayii commented 4 years ago

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

afc163 commented 4 years ago

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

joesdu commented 4 years ago

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

lifegit commented 4 years ago

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

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

joesdu commented 4 years ago

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

默认请求用的 import { request } from 'umi'; 区块用的 import request from 'umi-request'; 请求没看到用hook地方(useRequest)。

umi ui 好像有点烂尾的感觉： 2.1. umi ui 界面里所有的图片加载不出来 2.2. package.json 内的 scripts 里面删掉了 fetch:blocks 2.2. 所有区块还是dva来做的数据。

建议你直接clone V5的源码.

lifegit commented 4 years ago

2.1:

ISBN9527 commented 4 years ago

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

dumplingJ commented 4 years ago

multitab 怎么说？

crashsol commented 4 years ago

multitab 怎么说？

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

dumplingJ commented 4 years ago

multitab 怎么说？

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

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

birdycn commented 4 years ago

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

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

joesdu commented 4 years ago

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

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

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

lichnow commented 4 years ago

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

xiexingen commented 4 years ago

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

infinityboy commented 4 years ago

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

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

aLIEzsss4 commented 4 years ago

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

hihuangwei commented 4 years ago

666

kaoding commented 4 years ago

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

Lind-pro commented 4 years ago

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

hot588 commented 4 years ago

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

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

joesdu commented 4 years ago

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

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

我已经上了V5了,基本OK

xiexingen commented 4 years ago

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

lichnow commented 4 years ago

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

infinityboy commented 4 years ago

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

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

Cheng007 commented 4 years ago

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

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

V5

chenshuai2144 commented 4 years ago

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

lichnow commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

chz102 commented 4 years ago

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

chenshuai2144 commented 4 years ago

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

chenshuai2144 commented 4 years ago

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

duwei54 commented 4 years ago

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

我这里也是

chz102 commented 4 years ago

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

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

infinityboy commented 4 years ago

@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 commented 4 years ago

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

ant-design / ant-design-pro