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

随着前端的的发展，底座已经越来越坚实，当前前端框架和工程化已经可以cover 住大部分业务场景的复杂度。前端的已经更加关注于业务，Ant Design Pro 提供了一个中后台的脚手架，为框架和工程化提供了最佳实践，但是还是有很多问题还是需要最佳实践。

🤷‍♂️ 为什么需要最佳实践

在维护 Pro 的过程中，我们遇到了很多直击灵魂的问题，什么样的代码才是最好的？应该怎么写才对？初始化用户信息在哪里请求？有的页面只有部分用户有权限该怎么处理？Layout 代码太复杂看不懂？后端接口报错应该怎么处理？

这类型的问题回答说难不难，说简单也不能算简单。不同的项目乃至不同的人都有自己的习惯，市面上存在很多的解决方案，每个项目中解决方案不尽相同，同样的脚手架我们可以选择 Mobx，redux，dva，使用 Context 的人也不在少数。这已经是选择相对比较少的数据层，我们还有网络请求，权限，Layout 等。

诚然，多个选择是好事，但是作为企业级的产品，维护才是最重要的，我们期望每个同学都可以很快的上手，而且如果每个项目都要选一次，新鲜感过去之后我们可能就会自己花费相当多的精力来封装。更加详细的论证，可以看云谦老师的文章。

🏄‍♂️ 我们的解决方案

蚂蚁金服每年都有大量的中后台项目的孵化，各种技术栈百花齐放，我们解决方案其实就是 强约束、配置化和约定化。

🕹 强约束

这方面我们做了 ProLayout ，ProTable 两个重型组件，用于封装重复的逻辑，以后可能还会添加 ProForm 等组件来提升开发项目。

• ProLayout 会提供一个标准化的布局组件，我们只需要通过插件就可以引入。
• ProTable 封装了 Table 的常用行为，可以快速的撸出来一个美观的 CRUD 界面。

🔩 配置化

 在 umi@3 中这些插件我们都将会官方提供。

• Layout
• 权限
• 国际化
• 微服务
• 主题切换，
• 极简数据流
• ....

等插件通过配置来进行使用，关闭和开启都将非常简单。umi@3 的插件体系可以让我们用体验更好的方式来实现这些功能，一些插件我们官方会整合进官方的预设中，一起打包提供出来。

🧬约定化

约定优于配置的优势自然不用多说，Spring Boot 的成功让其思想大行其道，其简化配置的优势让无数程序员脱离了繁杂的配置之苦。

在最佳实践中，我们也将践行这一思想，mock，models，pages，services，locales 每个文件夹都进行了约定，用于表示相关的功能，这样可以大大的减少学习成本和配置，让上手成本变得非常之低。我们不需要知其所以然，只需要知道这样就可以跑起来，专注于业务的发展。

🛒 其他的方案

• 代码风格与 lint： fabric
• 组件开发： father
• 文档站：dumi
• 前端微服务：乾坤

For make Ant Design Pro more flexible, we plan to start the 4th version (Why not 3, because of @chenshuai2144 don't like it). In the long-term maintenance, we found that the biggest problem with pro is that it is not pluggable. Next, our focus will make him more flexible.

• [x] transform pages to blocks so that you can add or delete a page easier, https://github.com/ant-design/ant-design-pro/issues/2809
• [x] make i18n selectable
• [ ] dark theme
• [x] More custom settings
• [x] better components
• [x] TypeScript https://github.com/ant-design/ant-design-pro/pull/3702
• [x] cli tool https://github.com/ant-design/ant-design-pro-cli/issues/20

More TodoLIst:

• [x] init v4 branch https://github.com/ant-design/ant-design-pro/issues/3357
• [x] sync master commit to v4
  • [x] revert: simplify antd-pro's boilerplate
  • [x] revert: remove SettingDrawer
  • [x] more

Add Authorized component, which contains:

• <Authorized> Can wrap any child which need to take different display strategies according to user's role.
• Authorized.create Same as <Authorized>, just for MenuItem, SubMenu and etc. which can not be wrapped by customized component. (https://github.com/ant-design/ant-design/issues/4853)
• <AuthorizedRoute> A customized component built for <Route>, based on <Authorized>.

By using of above component/function, we can get an authorized route/menu(and you need to set the acceptable roles in the menu.js/router.js).

#41

大家都是开发Facebook体量的应用吗？非要高大上的Redux？改一个isLogin要跳4到5个文件，经过7到8个函数，你们都不烦？Flux和Redux这套为了设计而设计的流程框架，真的适合大家吗？说句不好听的，真到了Facebook体量了，你还用别人家的框架？

忍不住吐槽一下是使用react体系实际项目有一年多了，antd系列是难得的高质量库。但是每次想用一下antd提供的现有demo来使用，总要花大力气来去除Flux和Redux系列的代码，真心烦。号称的解耦，其实是高度耦合。典型的理论脱离实际，搞不懂ant为什么一直大力推。别上来都以为自己是几百人团队合作，几千万用户使用。

我们自己团队只在最开始用了一次Flux和Redux流程就再也没有用过。现在使用的是MVVM架构的Mobx系列，直观高效优雅。微软的MVVM和Google的angular都是这类思想，而且都是工业化被广大使用的。真心不懂为什么react里面大家都要一股脑用什么Flux和Redux，极其难用，不说其它，项目团队里面推都推不动。

新增页面

• 对话框 (Modal)
  • [x] 分步对话框 @ddcat1115
    • 对话框一
    • 对话框二
    • 对话框三
  • [x] 信息录入对话框 @valleykid
    • 录入页
    • 结果页
• 个人设置页 @chenshuai2144
  • [x] 基本设置
  • [x] 安全设置
  • [x] 账号绑定
  • [x] 新消息通知
• [x] 个人中心页 @ddcat1115

新增模块/业务组件

• [x] 顶部导航 NavBar-Top@chenshuai2144

其他

• [x] 文档翻译
• [x] 脚手架国际化支持
• [x] 增加侧边栏配置项（支持布局、主题等配置切换）
• [x] 支持布局选择（侧边栏导航 - 顶部导航（只支持 basic 模式顶部导航））
• [x] 支持主题选择
• [x] 升级文档

以上是目前已经确定的部分，可能有变动或新增

随着 antd 正式版的发布，layout 也将迎来全新的设计风格。新的风格仍然会以科技的风格为主，在原来的基础上优化尺寸和体验细节，设计更加简洁，匹配更多业务场景。

AntDesign Pro  主要修改点

| 内容 | 修改点 | | --- | --- | | 导航尺寸 | 顶部导航高度由  AntDesign Pro 64px 改为 48px- 侧边导航宽度由 AntDesign Pro 256px 改为 208px | | 导航布局模式 | 在原来单一侧边或顶部导航模式基础上，增加一种混合模式，与 TechUI 现有模式统一 | | 顶部导航细节优化 | 全局搜索样式修改，与顶部菜单交互修改，打开搜索挤压菜单后，关闭搜索回到正常态- 实用工具区 Hover 颜色修改，由蓝色改为深黑色 #161726 | | 侧边导航细节优化 | 在侧边导航增加自定义辅助功能操作，如下拉筛选- 侧边导航展开收起图标修改，放置在侧边导航底部- 增加菜单名过长，菜单高度小信息隐藏交互 默认修改为固定模式 | | 混合模式 | 顶部导航提供自定义顶部导航与原来一致，但是增加一个通透的顶栏 |

导航菜单部分

结构与尺寸

侧边导航宽度由  256px 改为 208px，导航内容与前后边距改为 16px

自定义辅助操作

增加自定义辅助操作，如下拉筛选（业务诉求）

菜单过长过多交互

菜单名过长，缩略展示，hover 出现全部 tooltip 提示。

菜单名过多或出现折叠时，顶部标题产品标题区，辅助操作区和底部通用操作区固定，中间功能菜单区进行滑动。上下区域出现阴影分割。

顶部导航交互部分

交互和导航的改动是本次最大的改变。

结构与尺寸

顶部导航高度由 64px 改为 48px

颜色版本

继续提供暗色、亮白颜色版本，暗色颜色由 #001529 改为金融云导航（OneX）同样深色 #1F293D

搜索交互优化

搜索激活样式修改，打开搜索挤压菜单后，关闭搜索回到正常态

实用工具 Hover 效果优化

实用工具 Hover 由蓝色背景色改为深黑色 #161726

混合菜单新模式

顶部全局导航+侧边导航混合模式，支持 Ant Design Pro 已有导航模式切换到此模式。

样例

目前，脚手架中路由和导航 Menu 的生成，以及不同层级组件的渲染都是依靠 nav.js 中的配置信息，这样主要存在两个问题：

• 理论上路由应该和组件渲染没有直接关系，路由 path 并不一定代表 ui 层级，比如：/user/info 并不一定需要在 /user 对应的 layout/组件 中渲染，两个路由在ui上并不是 parent 和 children 的关系，但目前这两个绑在了一起。
• 路由和 Menu 并不一定是一一对应的，Menu 很容易出现个性化的需求，比如某个层级不展示，或者需要在不同地方分别展示不同导航层级，当需求稍微复杂一点时，共用一份配置信息有诸多限制。
• 目前的方式不太符合 react-router@4 的风格，也在一定程度上限制了它的灵活性。

所以在 1.0 发布前，考虑这部分是否可以进行重构，大致的构想是：

• 配置信息只会用来生成路由，且不再是树状，而是打平的，类似下面这样（不完整）：

  	{
  		"/": {
   		"name": "首页",
   		"component": Home,
  		},
  		"/user": {
   		"name": "用户",
   		"component": UserLayout,
  		},
  		"/user/userlist": {
   		"name": "用户列表",
   		"component": UserList,
   		"model": ["user", "loading"],
   		"auth": ["admin"],
  		},
  		"/user/userlist/:id": {
   		"name": "用户详情",
   		"component": UserDetail,
   		"model": ["user", "loading"],
   		"auth": ["admin"],
  		},
  	}
  

• 具体 ui 渲染层级由具体组件代码决定，和配置信息无关。可以提供相应的工具函数方便从配置信息中获取相关参数，如 UserLayout.js 中可以这样写：

  	<div class="content">
  		{getRoute('/user/userlist')}
  		{getRoute('/user/userlist/:id')}
  	</div>
  

  会生成带上相关配置信息的 Route

• Menu 导航不再根据配置信息生成，可以自己手动构建，或另外维护一份 Menu 信息用来生成导航。

大家看下是否可行~

为了能够让 V4 尽快达到一个可用状态，使得 V4 能够活跃起来，重点把一些影响到可用性的点处理掉，这样使得可以推动 V4 尽快向前走：

• [x] V3 以及 master 的修改合并到 pro-blocks
• [x] branch update
  • [x] v4 合并到 master，删除 v4 分支
  • [x] master 改为 v2 分支
• [x] TypeScript 完整支持，当前有部分是 JS，部分是 TS 的，最好能够全部迁移到 TS，包括 pro-blocks
• [x] 相应更新 https://pro.ant.design/ 内的所有文档
  • [x] 创建方式的变化（umi create 和 ts/js 语言可选)
  • [x] v2 -> v4 的升级文档
  • [x] pro-layout 在 pro.ant.design 上的文档（代码备注）
• [x] 老版本 https://v2-pro.ant.design/
• [x] 新网站上要有回到 v1 v2 的链接 https://beta.pro.ant.design/
• [x] 升级依赖链到最新版本
• [x] create-umi 更新 https://github.com/umijs/create-umi/pull/62
• [x] 把 TypeScript/区块 加到 README
• [x] 发布日志/软文
  • [x] README 同步更新
• [x] 现有文档排查更新
• [x] CI 要跑过

可选

• [ ] 文档如何配置 dark 主题 https://github.com/ant-design/ant-design-pro/pull/2946
  • [ ] 让设计师过一遍，现有 Dark 颜色略怪异
• [x] 部分实现用 antd 的新组件重构 PageHeader、Descriptions 等等
• [ ] 如何移除国际化和权限系统的方案 https://github.com/ant-design/ant-design-pro/issues/3775
• [ ] Bigfish 脚手架更新

We just finished most of translate jobs and published at pro.ant.design, welcome to visit it and review the translation. Give us PR if you find any typos. 🎅

Volunteer Wanted

Hey, guys! We are going to provide English documentation.

But we are short of staff :-( So, we want some volunteers to help us to translate antd's documentation into English. Every translation task needs a translator and a reviewer. Both of them are expected that they had used the component(AvatarLsit PageHeader etc...) in real world.

Translator

A translator should be familiar with both Chinese and English.

If you want to be a volunteer translator, just comment this issue. For example, "I want to be the translator of button and alert ....". And then, we will update this issue(e.g. button (translator: @afc163 , reviewer: @ddcat1115 )), and ping you.

Premise:

• ant-design-pro-site is our site of Ant Design Pro and it is repository witch docs here.
• ant-design-pro is ant-design-pro-site's submodule, it contains component's docs.

Contributing:

1. Fork
   • docs: ant-design-pro-site and git clone
   • components: ant-design-pro and git clone
2. Create a branch starting at master and name it as translation-[xxx]
3. npm install && npm start, see: Development
4. Find Markdown files and the index.md and demo/*.md use different format, see: https://github.com/ant-design/ant-design/issues/1423
   • docs: under /docs
   • components: under /scaffold/src/components/xxx(xxx is the component which you need to translate)
5. Just translate it, and you had better read our advice first.
6. Create a pull request when your translation is done, and ping your reviewer.
   • docs: request to ant-design-pro-site:master
   • components: request to ant-design-pro:master
7. PR will be merged, if your reviewer think it is OK.

See:

• https://github.com/ant-design/ant-design/tree/master/components/button
• https://github.com/ant-design/ant-design/blob/master/components/button/demo/basic.md

Reviewer

A reviewer should be a native English speaker.

If you want to be a volunteer reviewer, just comment this issue. For example, "I want to be the reviewer of button and alert...". And then, we will update this issue(e.g. button (translator: @afc163 , reviewer: @ddcat1115 )), and ping you.

After your corresponding translator finish his/her work, you should review and provide some advice.

Example

• docs: 105
• components: 123

TODOs

/docs

• [x] api-doc.md ( translator: @yesmeck )
• [ ] authority-management.md ( translator: @chenshuai2144 )
• [ ] biz-icon.md ( translator: @ddcat1115 )
• [ ] changelog.md ( translator: @ddcat1115 )
• [x] cli.md ( translator: @viztor )
• [x] deploy.md ( translator: @yesmeck )
• [ ] error.md ( translator: @nikogu )
• [ ] faq.md ( translator: null)
• [x] getting-started.md
• [x] getting-start-inner.md
• [ ] graph.md (translator: @RaoHai)
• [x] i18n.md ( translator: @viztor )
• [ ] import.md ( translator: null)
• [x] layout.md ( translator: @viztor )
• [ ] mock-api.md ( translator: @afc163 ) https://github.com/ant-design/ant-design-pro-site/pull/156
• [x] new-component.md ( translator: @afc163 ) https://github.com/ant-design/ant-design-pro-site/pull/157
• [x] new-page.md ( translator: @valleykid )
• [x] resource.md ( translator: @nikogu )
• [ ] router-and-nav.md ( translator: @ddcat1115 )
• [x] server.md ( translator: @valleykid )
• [x] style.md( translator: @yutingzhao1991 ) https://github.com/ant-design/ant-design-pro-site/pull/148
• [ ] theme.md ( translator: @nikogu )
• [ ] ui-test.md ( translator: @yutingzhao1991 ) https://github.com/ant-design/ant-design-pro-site/pull/151
• [x] use-components-alone.md ( translator: @dengfuping )

/components

• [x] AvatarList (translator: @nikogu)
• [ ] Charts (translator: @RaoHai)
• [x] CountDown (translator: @nikogu)
• [x] DescriptionList ( translator: @ddcat1115 )
• [x] Exception ( translator: @ddcat1115 )
• [x] FooterToolbar ( translator: @dengfuping )
• [ ] GlobalFooter ( translator: @MrPeak )
• [ ] HeaderSearch ( translator: @MrPeak )
• [ ] NoticeIcon ( translator: @MrPeak )
• [x] NumberInfo
• [x] Ellipsis
• [ ] PageHeader
• [ ] Result
• [ ] TagSelect
• [ ] Trend
• [ ] Authorized ( translator: @chenshuai2144 )
• [ ] Login

🐛 bug 描述

https://beta-pro.ant.design/docs/advanced-menu-cn

根据该文档的方式实现从服务端请求菜单，返回的菜单中包含 icon 信息和 accss 信息，icon 显示错误，access 不生效。

icon显示结果：

access无效。

📷 复现步骤

返回的菜单信息： path: '/system', name: 'system', icon: 'setting', access: 'noPermission',

🏞 期望结果

显示设置的icon，access 生效

💻 复现代码

© 版本信息

• Ant Design Pro 版本: 5.0.0-beta.2
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

🧐 问题描述 | Problem description

登录后不管进那个界面，刷新下浏览器，就又回到登录界面了，/api/login/account这个请求是正常的，但是/api/currentUser这个请求404了，怀疑是这个404导致的，但是不知道为啥这个请求404了，有没有大佬帮忙看看

"antd": "^5.0.0", "@umijs/max": "^4.0.33", “ant-design-pro”：6.0.0 浏览器 | browser：

🐛 bug 描述

📷 复现步骤 | Recurrence steps

🏞 期望结果 | Expected results

💻 复现代码 | Recurrence code

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

🐛 bug 描述

react和react-dom的版本均为18，但是 @types/react @types/react-dom 均是17，版本不一致。导致src/pages/User/Login/index.tsx 里面的 Helmet 标签类型错误

📷 复现步骤 | Recurrence steps

1、克隆最新代码 2、运行，切换到login/index.tsx页面，查看Helmet的ts类型

🏞 期望结果 | Expected results

没有类型错误

© 版本信息

• Ant Design Pro 版本: 6.0.0
• umi 版本: 4
• 浏览器环境: chrome
• 开发环境: linux deepin 20

🚑 其他信息

🐛 bug 描述

Warning: [antd: Dropdown] overlay is deprecated. Please use menu instead. Warning: [antd: Drawer] visible is deprecated which will be removed in next major version, please use open instead. Warning: [antd: Menu] children will be removed in next major version. Please use items instead. Warning: [antd: Tabs] Tabs.TabPane is deprecated. Please use items directly.

📷 复现步骤 | Recurrence steps

直接yarn，跑起来就可以在网页控制台看到

🏞 期望结果 | Expected results

清楚报错原因和解决方法

💻 复现代码 | Recurrence code

https://github.com/ZhiMaYiLian/Web.git

© 版本信息

• Ant Design Pro 版本: [5.2.0]
• umi 版本: [3.5.0]
• 浏览器环境: Microsoft Edge 版本 108.0.1462.54
• 开发环境 [windows 11]

🚑 其他信息