fix: use @umijs/fabric new version

package.json

@@ -55,7 +55,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-components": "1.1.0",
+    "@ant-design/pro-components": "1.1.1",
     "@umijs/route-utils": "^2.0.0",
     "antd": "^4.20.0",
     "classnames": "^2.3.0",
@@ -81,7 +81,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
-    "@umijs/fabric": "^2.8.0",
+    "@umijs/fabric": "^2.11.1",
     "@umijs/openapi": "^1.3.0",
     "@umijs/plugin-blocks": "^2.2.0",
     "@umijs/plugin-esbuild": "^1.4.0",

src/app.tsx

@@ -1,12 +1,12 @@
+import Footer from '@/components/Footer';
+import RightContent from '@/components/RightContent';
+import { BookOutlined, LinkOutlined } from '@ant-design/icons';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
-import { SettingDrawer, PageLoading } from '@ant-design/pro-components';
+import { PageLoading, SettingDrawer } from '@ant-design/pro-components';
 import type { RunTimeLayoutConfig } from 'umi';
 import { history, Link } from 'umi';
-import RightContent from '@/components/RightContent';
-import Footer from '@/components/Footer';
-import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
-import { BookOutlined, LinkOutlined } from '@ant-design/icons';
 import defaultSettings from '../config/defaultSettings';
+import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
 
 const isDev = process.env.NODE_ENV === 'development';
 const loginPath = '/user/login';

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
-import { useIntl } from 'umi';
 import { GithubOutlined } from '@ant-design/icons';
 import { DefaultFooter } from '@ant-design/pro-components';
+import { useIntl } from 'umi';
 
 const Footer: React.FC = () => {
   const intl = useIntl();

src/components/HeaderDropdown/index.tsx

@@ -1,7 +1,7 @@
-import type { DropDownProps } from 'antd/es/dropdown';
 import { Dropdown } from 'antd';
-import React from 'react';
+import type { DropDownProps } from 'antd/es/dropdown';
 import classNames from 'classnames';
+import React from 'react';
 import styles from './index.less';
 
 export type HeaderDropdownProps = {

src/components/HeaderSearch/index.tsx

@@ -1,11 +1,10 @@
 import { SearchOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
 import { AutoComplete, Input } from 'antd';
-import useMergedState from 'rc-util/es/hooks/useMergedState';
 import type { AutoCompleteProps } from 'antd/es/auto-complete';
-import React, { useRef } from 'react';
-
 import classNames from 'classnames';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import React, { useRef } from 'react';
 import styles from './index.less';
 
 export type HeaderSearchProps = {

src/components/NoticeIcon/NoticeIcon.tsx

@@ -1,12 +1,12 @@
 import { BellOutlined } from '@ant-design/icons';
 import { Badge, Spin, Tabs } from 'antd';
+import classNames from 'classnames';
 import useMergedState from 'rc-util/es/hooks/useMergedState';
 import React from 'react';
-import classNames from 'classnames';
-import type { NoticeIconTabProps } from './NoticeList';
-import NoticeList from './NoticeList';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
+import type { NoticeIconTabProps } from './NoticeList';
+import NoticeList from './NoticeList';
 
 const { TabPane } = Tabs;
 

src/components/NoticeIcon/NoticeList.tsx

@@ -1,7 +1,6 @@
 import { Avatar, List } from 'antd';
-
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import styles from './NoticeList.less';
 
 export type NoticeIconTabProps = {

src/components/NoticeIcon/index.tsx

@@ -1,12 +1,11 @@
-import { useEffect, useState } from 'react';
-import { Tag, message } from 'antd';
+import { getNotices } from '@/services/ant-design-pro/api';
+import { message, Tag } from 'antd';
 import { groupBy } from 'lodash';
 import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { useModel, useRequest } from 'umi';
-import { getNotices } from '@/services/ant-design-pro/api';
-
-import NoticeIcon from './NoticeIcon';
 import styles from './index.less';
+import NoticeIcon from './NoticeIcon';
 
 export type GlobalHeaderRightProps = {
   fetchingNotices?: boolean;

src/components/RightContent/AvatarDropdown.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback } from 'react';
+import { outLogin } from '@/services/ant-design-pro/api';
 import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Menu, Spin } from 'antd';
-import { history, useModel } from 'umi';
+import type { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { stringify } from 'querystring';
+import type { MenuInfo } from 'rc-menu/lib/interface';
+import React, { useCallback } from 'react';
+import { history, useModel } from 'umi';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
-import { outLogin } from '@/services/ant-design-pro/api';
-import type { MenuInfo } from 'rc-menu/lib/interface';
-import type { ItemType } from 'antd/lib/menu/hooks/useItems';
 
 export type GlobalHeaderRightProps = {
   menu?: boolean;

src/components/RightContent/index.tsx

@@ -1,9 +1,9 @@
-import { Space } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
 import React from 'react';
-import { useModel, SelectLang } from 'umi';
-import Avatar from './AvatarDropdown';
+import { SelectLang, useModel } from 'umi';
 import HeaderSearch from '../HeaderSearch';
+import Avatar from './AvatarDropdown';
 import styles from './index.less';
 
 export type SiderTheme = 'light' | 'dark';

src/components/index.md

@@ -17,8 +17,8 @@ sidemenu: false
 /**
  * background: '#f0f2f5'
  */
-import React from 'react';
 import Footer from '@/components/Footer';
+import React from 'react';
 
 export default () => <Footer />;
 ```
@@ -31,9 +31,9 @@ HeaderDropdown 是 antd Dropdown 的封装，但是增加了移动端的特殊
 /**
  * background: '#f0f2f5'
  */
+import HeaderDropdown from '@/components/HeaderDropdown';
 import { Button, Menu } from 'antd';
 import React from 'react';
-import HeaderDropdown from '@/components/HeaderDropdown';
 
 export default () => {
   const menuHeaderDropdown = (
@@ -60,9 +60,8 @@ export default () => {
 /**
  * background: '#f0f2f5'
  */
-import { Button, Menu } from 'antd';
-import React from 'react';
 import HeaderSearch from '@/components/HeaderSearch';
+import React from 'react';
 
 export default () => {
   return (
@@ -112,9 +111,9 @@ export default () => {
 /**
  * background: '#f0f2f5'
  */
+import NoticeIcon from '@/components/NoticeIcon/NoticeIcon';
 import { message } from 'antd';
 import React from 'react';
-import NoticeIcon from '@/components/NoticeIcon/NoticeIcon';
 
 export default () => {
   const list = [

src/e2e/baseLayout.e2e.spec.ts

@@ -1,5 +1,5 @@
 import type { Page } from '@playwright/test';
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 const { uniq } = require('lodash');
 const RouterConfig = require('../../config/routes').default;
 

src/locales/fa-IR.ts

@@ -1,10 +1,10 @@
 import component from './fa-IR/component';
 import globalHeader from './fa-IR/globalHeader';
 import menu from './fa-IR/menu';
+import pages from './fa-IR/pages';
 import pwa from './fa-IR/pwa';
 import settingDrawer from './fa-IR/settingDrawer';
 import settings from './fa-IR/settings';
-import pages from './fa-IR/pages';
 
 export default {
   'navBar.lang': 'زبان ها  ',

src/locales/id-ID.ts

@@ -1,10 +1,10 @@
 import component from './id-ID/component';
 import globalHeader from './id-ID/globalHeader';
 import menu from './id-ID/menu';
+import pages from './id-ID/pages';
 import pwa from './id-ID/pwa';
 import settingDrawer from './id-ID/settingDrawer';
 import settings from './id-ID/settings';
-import pages from './id-ID/pages';
 
 export default {
   'navbar.lang': 'Bahasa',

src/locales/ja-JP.ts

@@ -1,10 +1,10 @@
+import component from './ja-JP/component';
 import globalHeader from './ja-JP/globalHeader';
 import menu from './ja-JP/menu';
+import pages from './ja-JP/pages';
+import pwa from './ja-JP/pwa';
 import settingDrawer from './ja-JP/settingDrawer';
 import settings from './ja-JP/settings';
-import pwa from './ja-JP/pwa';
-import component from './ja-JP/component';
-import pages from './ja-JP/pages';
 
 export default {
   'navBar.lang': '言語',

src/locales/pt-BR.ts

@@ -1,10 +1,10 @@
 import component from './pt-BR/component';
 import globalHeader from './pt-BR/globalHeader';
 import menu from './pt-BR/menu';
+import pages from './pt-BR/pages';
 import pwa from './pt-BR/pwa';
 import settingDrawer from './pt-BR/settingDrawer';
 import settings from './pt-BR/settings';
-import pages from './pt-BR/pages';
 
 export default {
   'navBar.lang': 'Idiomas',

src/locales/zh-CN.ts

@@ -1,10 +1,10 @@
 import component from './zh-CN/component';
 import globalHeader from './zh-CN/globalHeader';
 import menu from './zh-CN/menu';
+import pages from './zh-CN/pages';
 import pwa from './zh-CN/pwa';
 import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/settings';
-import pages from './zh-CN/pages';
 
 export default {
   'navBar.lang': '语言',

src/pages/Admin.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
-import { Card, Typography, Alert } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-components';
+import { Alert, Card, Typography } from 'antd';
+import React from 'react';
 import { useIntl } from 'umi';
 
 const Admin: React.FC = () => {

src/pages/TableList/components/UpdateForm.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { Modal } from 'antd';
 import {
+  ProFormDateTimePicker,
+  ProFormRadio,
   ProFormSelect,
   ProFormText,
   ProFormTextArea,
   StepsForm,
-  ProFormRadio,
-  ProFormDateTimePicker,
 } from '@ant-design/pro-components';
-import { useIntl, FormattedMessage } from 'umi';
+import { Modal } from 'antd';
+import React from 'react';
+import { FormattedMessage, useIntl } from 'umi';
 
 export type FormValueType = {
   target?: string;

src/pages/TableList/index.tsx

@@ -1,20 +1,20 @@
+import { addRule, removeRule, rule, updateRule } from '@/services/ant-design-pro/api';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, message, Input, Drawer } from 'antd';
-import React, { useState, useRef } from 'react';
-import { useIntl, FormattedMessage } from 'umi';
+import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
 import {
-  PageContainer,
   FooterToolbar,
-  ProDescriptions,
-  ProTable,
   ModalForm,
+  PageContainer,
+  ProDescriptions,
   ProFormText,
   ProFormTextArea,
+  ProTable,
 } from '@ant-design/pro-components';
-import type { ProColumns, ActionType, ProDescriptionsItemProps } from '@ant-design/pro-components';
+import { Button, Drawer, Input, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import { FormattedMessage, useIntl } from 'umi';
 import type { FormValueType } from './components/UpdateForm';
 import UpdateForm from './components/UpdateForm';
-import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro/api';
 
 /**
  * @en-US Add node

src/pages/Welcome.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { PageContainer } from '@ant-design/pro-components';
-import { Card, Alert, Typography } from 'antd';
-import { useIntl, FormattedMessage } from 'umi';
+import { Alert, Card, Typography } from 'antd';
+import React from 'react';
+import { FormattedMessage, useIntl } from 'umi';
 import styles from './Welcome.less';
 
 const CodePreview: React.FC = ({ children }) => (

src/pages/user/Login/index.tsx

@@ -1,3 +1,6 @@
+import Footer from '@/components/Footer';
+import { login } from '@/services/ant-design-pro/api';
+import { getFakeCaptcha } from '@/services/ant-design-pro/login';
 import {
   AlipayCircleOutlined,
   LockOutlined,
@@ -6,19 +9,15 @@ import {
   UserOutlined,
   WeiboCircleOutlined,
 } from '@ant-design/icons';
-import { Alert, message, Tabs } from 'antd';
-import React, { useState } from 'react';
 import {
+  LoginForm,
   ProFormCaptcha,
   ProFormCheckbox,
   ProFormText,
-  LoginForm,
 } from '@ant-design/pro-components';
-import { useIntl, history, FormattedMessage, SelectLang, useModel } from 'umi';
-import Footer from '@/components/Footer';
-import { login } from '@/services/ant-design-pro/api';
-import { getFakeCaptcha } from '@/services/ant-design-pro/login';
-
+import { Alert, message, Tabs } from 'antd';
+import React, { useState } from 'react';
+import { FormattedMessage, history, SelectLang, useIntl, useModel } from 'umi';
 import styles from './index.less';
 
 const LoginMessage: React.FC<{