chore: fix lint (#43873)

* chore: fix lint

* chore: fix lint

* test: fix 16

* fix: lint

.dumi/hooks/useMenu.tsx

@@ -1,7 +1,7 @@
-import type { MenuProps } from 'antd';
-import { Tag, theme } from 'antd';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 import React, { useMemo } from 'react';
+import type { MenuProps } from 'antd';
+import { Tag, theme } from 'antd';
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 

.dumi/pages/404/index.tsx

@@ -1,7 +1,7 @@
 import { HomeOutlined } from '@ant-design/icons';
-import { Button, Result } from 'antd';
 import { Link, useLocation } from 'dumi';
 import React, { useEffect } from 'react';
+import { Button, Result } from 'antd';
 import * as utils from '../../theme/utils';
 
 export interface NotFoundProps {

.dumi/pages/index/components/Banner.tsx

@@ -1,8 +1,8 @@
 import { createStyles, css, useTheme } from 'antd-style';
-import { Button, Space, Typography } from 'antd';
 import { Link, useLocation } from 'dumi';
 import * as React from 'react';
 import classNames from 'classnames';
+import { Button, Space, Typography } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
 import * as utils from '../../../theme/utils';

.dumi/pages/index/components/BannerRecommends.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Typography, Skeleton, Carousel } from 'antd';
 import { createStyles, css, useTheme } from 'antd-style';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import { useContext } from 'react';
+import { Typography, Skeleton, Carousel } from 'antd';
 import type { Extra, Icon } from './util';
 import SiteContext from '../../../theme/slots/SiteContext';
 import { getCarouselStyle, useSiteData } from './util';

.dumi/pages/index/components/ComponentsList.tsx

@@ -1,5 +1,9 @@
 /* eslint-disable react/jsx-pascal-case */
 import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
+import { createStyles, css, useTheme } from 'antd-style';
+import classNames from 'classnames';
 import {
   Space,
   Typography,
@@ -12,10 +16,6 @@ import {
   Progress,
   Carousel,
 } from 'antd';
-import dayjs from 'dayjs';
-import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
-import { createStyles, css, useTheme } from 'antd-style';
-import classNames from 'classnames';
 import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
 import { getCarouselStyle } from './util';

.dumi/pages/index/components/DesignFramework.tsx

@@ -1,7 +1,7 @@
-import { Col, Row, Typography } from 'antd';
 import React, { useContext } from 'react';
 import { createStyles, useTheme } from 'antd-style';
 import { Link, useLocation } from 'dumi';
+import { Col, Row, Typography } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import * as utils from '../../../theme/utils';
 import SiteContext from '../../../theme/slots/SiteContext';

.dumi/pages/index/components/Group.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useContext } from 'react';
-import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
+import { Typography } from 'antd';
 import SiteContext from '../../../theme/slots/SiteContext';
 
 export interface GroupMaskProps {

.dumi/pages/index/components/RecommendsOld.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Row, Col, Typography } from 'antd';
 import { createStyles, css, useTheme } from 'antd-style';
+import { Row, Col, Typography } from 'antd';
 import type { Recommendation } from './util';
 
 const useStyle = createStyles(({ token }) => ({

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -1,10 +1,10 @@
 import { createStyles } from 'antd-style';
-import { ColorPicker, Input, Space } from 'antd';
-import type { Color, ColorPickerProps } from 'antd/es/color-picker';
-import { generateColor } from 'antd/es/color-picker/util';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { ColorPicker, Input, Space } from 'antd';
+import type { Color, ColorPickerProps } from 'antd/es/color-picker';
+import { generateColor } from 'antd/es/color-picker/util';
 import { PRESET_COLORS } from './colorUtil';
 
 const useStyle = createStyles(({ token, css }) => ({

.dumi/pages/index/components/Theme/RadiusPicker.tsx

@@ -1,5 +1,5 @@
-import { InputNumber, Space, Slider } from 'antd';
 import React from 'react';
+import { InputNumber, Space, Slider } from 'antd';
 
 export interface RadiusPickerProps {
   value?: number;

.dumi/pages/index/components/Theme/ThemePicker.tsx

@@ -1,7 +1,7 @@
 import { createStyles, useTheme } from 'antd-style';
-import { Space } from 'antd';
 import * as React from 'react';
 import classNames from 'classnames';
+import { Space } from 'antd';
 import useLocale from '../../../../hooks/useLocale';
 
 export const THEMES = {

.dumi/pages/index/components/Theme/index.tsx

@@ -6,6 +6,8 @@ import {
   QuestionCircleOutlined,
 } from '@ant-design/icons';
 import { createStyles, css, useTheme } from 'antd-style';
+import * as React from 'react';
+import classNames from 'classnames';
 import type { MenuProps } from 'antd';
 import {
   Breadcrumb,
@@ -22,8 +24,6 @@ import {
 } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import { generateColor } from 'antd/es/color-picker/util';
-import * as React from 'react';
-import classNames from 'classnames';
 import useLocale from '../../../../hooks/useLocale';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import Group from '../Group';

.dumi/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import { createStyles, css } from 'antd-style';
-import { ConfigProvider } from 'antd';
 import React, { Suspense } from 'react';
+import { ConfigProvider } from 'antd';
 import useLocale from '../../hooks/useLocale';
 import Banner from './components/Banner';
 import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';

.dumi/pages/theme-editor/index.tsx

@@ -1,10 +1,10 @@
 import { createStyles } from 'antd-style';
-import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd';
 import { ThemeEditor, enUS, zhCN } from 'antd-token-previewer';
-import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
 import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import type { JSONContent, TextContent } from 'vanilla-jsoneditor';
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd';
 import useLocale from '../../hooks/useLocale';
 
 const JSONEditor = React.lazy(() => import('../../theme/common/JSONEditor'));

.dumi/theme/SiteThemeProvider.tsx

@@ -1,8 +1,8 @@
-import { ConfigProvider, theme as antdTheme } from 'antd';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
 import type { FC } from 'react';
 import React, { useContext } from 'react';
+import { ConfigProvider, theme as antdTheme } from 'antd';
 
 interface NewToken {
   headerHeight: number;

.dumi/theme/builtins/Alert/index.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { AlertProps } from 'antd';
 import { Alert } from 'antd';
-import React from 'react';
 
 const MdAlert: React.FC<AlertProps> = ({ style, ...props }) => (
   <Alert {...props} style={{ margin: '24px 0', ...style }} />

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -3,8 +3,8 @@ import type { CSSProperties } from 'react';
 import { Link, useIntl, useSidebarData, useLocation } from 'dumi';
 import { createStyles, useTheme } from 'antd-style';
 import debounce from 'lodash/debounce';
-import { Card, Col, Divider, Input, Row, Space, Tag, Typography, Affix } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
+import { Card, Col, Divider, Input, Row, Space, Tag, Typography, Affix } from 'antd';
 import type { Component } from './ProComponentsList';
 import proComponentsList from './ProComponentsList';
 import SiteContext from '../../slots/SiteContext';

.dumi/theme/builtins/ComponentTokenTable/index.tsx

@@ -1,10 +1,10 @@
 import { RightOutlined } from '@ant-design/icons';
 import { createStyles, css, useTheme } from 'antd-style';
-import { ConfigProvider, Table } from 'antd';
 import { getDesignToken } from 'antd-token-previewer';
+import React, { useMemo, useState } from 'react';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import tokenData from 'antd/es/version/token.json';
-import React, { useMemo, useState } from 'react';
+import { ConfigProvider, Table } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import { useColumns } from '../TokenTable';
 

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
-import { Tooltip } from 'antd';
 import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
+import { Tooltip } from 'antd';
 import DemoContext from '../../slots/DemoContext';
 import useLayoutState from '../../../hooks/useLayoutState';
 

.dumi/theme/builtins/IconSearch/Category.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { message } from 'antd';
 import { useIntl } from 'dumi';
+import { message } from 'antd';
 import CopyableIcon from './CopyableIcon';
 import type { ThemeType } from './index';
 import type { CategoriesKeys } from './fields';

.dumi/theme/builtins/IconSearch/CopyableIcon.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Badge, message } from 'antd';
 import classNames from 'classnames';
 import * as AntdIcons from '@ant-design/icons';
+import { Badge, message } from 'antd';
 import type { ThemeType } from './index';
 
 const allIcons: {

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import type { CSSProperties } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
-import type { SegmentedProps } from 'antd';
 import type { IntlShape } from 'react-intl';
-import { Segmented, Input, Empty, Affix } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { useIntl } from 'dumi';
 import debounce from 'lodash/debounce';
+import { Segmented, Input, Empty, Affix } from 'antd';
+import type { SegmentedProps } from 'antd';
 import Category from './Category';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import type { CategoriesKeys } from './fields';

.dumi/theme/builtins/IconSearch/index.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
-import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
+import { Skeleton } from 'antd';
 
 const IconSearch = React.lazy(() => import('./IconSearch'));
 

.dumi/theme/builtins/ImagePreview/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Image } from 'antd';
 import toArray from 'rc-util/lib/Children/toArray';
+import { Image } from 'antd';
 
 interface ImagePreviewProps {
   children: React.ReactNode[];

.dumi/theme/builtins/InlinePopover/index.tsx

@@ -1,6 +1,6 @@
 import { PictureOutlined } from '@ant-design/icons';
-import { Image, Tooltip, Typography } from 'antd';
 import React from 'react';
+import { Image, Tooltip, Typography } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 
 const locales = {

.dumi/theme/builtins/InstallDependencies/index.tsx

@@ -1,7 +1,7 @@
-import type { TabsProps } from 'antd';
-import { Tabs } from 'antd';
 import SourceCode from 'dumi/theme-default/builtins/SourceCode';
 import React from 'react';
+import type { TabsProps } from 'antd';
+import { Tabs } from 'antd';
 import NpmLogo from './npm';
 import PnpmLogo from './pnpm';
 import YarnLogo from './yarn';

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -6,7 +6,6 @@ import {
 } from '@ant-design/icons';
 import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
-import { Alert, Badge, Space, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
 import toReactElement from 'jsonml-to-react-element';
@@ -15,6 +14,7 @@ import LZString from 'lz-string';
 import Prism from 'prismjs';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { Alert, Badge, Space, Tooltip } from 'antd';
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';

.dumi/theme/builtins/ResourceArticles/index.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { Suspense } from 'react';
 import dayjs from 'dayjs';
 import { FormattedMessage } from 'dumi';
-import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
 import { createStyles } from 'antd-style';
+import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
 import type { Article, Authors } from '../../../pages/index/components/util';
 import { useSiteData } from '../../../pages/index/components/util';
 import useLocale from '../../../hooks/useLocale';

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Col, Row, Tooltip } from 'antd';
 import { createStyles } from 'antd-style';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Col, Row, Tooltip } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 
 const useStyle = createStyles(({ token, css }) => {

.dumi/theme/builtins/TokenCompare/index.tsx

@@ -1,10 +1,10 @@
 // 用于 color.md 中的颜色对比
 import React from 'react';
 import classNames from 'classnames';
-import { theme, Space } from 'antd';
 import { TinyColor } from '@ctrl/tinycolor';
-import tokenMeta from 'antd/es/version/token-meta.json';
 import { createStyles } from 'antd-style';
+import tokenMeta from 'antd/es/version/token-meta.json';
+import { theme, Space } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 
 const useStyle = createStyles(({ token, css }) => {

.dumi/theme/builtins/TokenTable/index.tsx

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
 import * as React from 'react';
 import { createStyles } from 'antd-style';
-import type { TableProps } from 'antd';
-import { Table } from 'antd';
 import { getDesignToken } from 'antd-token-previewer';
 import tokenMeta from 'antd/es/version/token-meta.json';
+import type { TableProps } from 'antd';
+import { Table } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import ColorChunk from '../ColorChunk';
 

.dumi/theme/common/BehaviorMap/index.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { Suspense } from 'react';
-import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
+import { Skeleton } from 'antd';
 import type { BehaviorMapProps } from './BehaviorMap';
 
 const InternalBehaviorMap = React.lazy(() => import('./BehaviorMap'));

.dumi/theme/common/Color/ColorPaletteTool.tsx

@@ -1,7 +1,7 @@
-import { ColorPicker } from 'antd';
-import type { Color } from 'antd/es/color-picker';
 import { FormattedMessage } from 'dumi';
 import React, { useMemo, useState } from 'react';
+import { ColorPicker } from 'antd';
+import type { Color } from 'antd/es/color-picker';
 import ColorPatterns from './ColorPatterns';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度

.dumi/theme/common/Color/ColorPaletteToolDark.tsx

@@ -1,6 +1,6 @@
-import { Col, ColorPicker, Row } from 'antd';
 import { FormattedMessage } from 'dumi';
 import React, { useMemo, useState } from 'react';
+import { Col, ColorPicker, Row } from 'antd';
 import ColorPatterns from './ColorPatterns';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度

.dumi/theme/common/Color/Palette.tsx

@@ -1,7 +1,7 @@
 import { presetDarkPalettes } from '@ant-design/colors';
-import { message } from 'antd';
 import React, { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { message } from 'antd';
 
 const rgbToHex = (rgbString: string): string => {
   const rgb = rgbString.match(/\d+/g);

.dumi/theme/common/DirectionIcon.tsx

@@ -1,6 +1,6 @@
 import Icon from '@ant-design/icons';
-import type { DirectionType } from 'antd/es/config-provider';
 import React from 'react';
+import type { DirectionType } from 'antd/es/config-provider';
 
 const ltrD =
   'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';

.dumi/theme/common/EditButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Tooltip } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
+import { Tooltip } from 'antd';
 
 const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/';
 

.dumi/theme/common/Loading.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Skeleton, Space, Spin } from 'antd';
 import { useLocation } from 'dumi';
+import { Skeleton, Space, Spin } from 'antd';
 
 const Loading: React.FC = () => {
   const { pathname } = useLocation();

.dumi/theme/common/PrevAndNext.tsx

@@ -1,10 +1,10 @@
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
-import type { MenuProps } from 'antd';
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
+import type { MenuProps } from 'antd';
 import useMenu from '../../hooks/useMenu';
 
 const useStyle = createStyles(({ token, css }) => {

.dumi/theme/common/ThemeSwitch/index.tsx

@@ -1,9 +1,9 @@
 import { BgColorsOutlined } from '@ant-design/icons';
-import { FloatButton } from 'antd';
 import { CompactTheme, DarkTheme, Motion } from 'antd-token-previewer/es/icons';
 import { FormattedMessage, Link, useLocation } from 'dumi';
 import React from 'react';
 import { useTheme } from 'antd-style';
+import { FloatButton } from 'antd';
 import { getLocalizedPathname, isZhCN } from '../../utils';
 import ThemeIcon from './ThemeIcon';
 

.dumi/theme/layouts/DocLayout/index.tsx

@@ -1,10 +1,10 @@
-import ConfigProvider from 'antd/es/config-provider';
-import zhCN from 'antd/es/locale/zh_CN';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { Helmet, useOutlet, useSiteData } from 'dumi';
 import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import zhCN from 'antd/es/locale/zh_CN';
+import ConfigProvider from 'antd/es/config-provider';
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
 import GlobalStyles from '../../common/GlobalStyles';

.dumi/theme/layouts/GlobalLayout.tsx

@@ -6,11 +6,11 @@ import {
   StyleProvider,
   extractStyle,
 } from '@ant-design/cssinjs';
-import { App, theme as antdTheme } from 'antd';
-import type { DirectionType } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
 import { useServerInsertedHTML } from 'umi';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import type { DirectionType } from 'antd/es/config-provider';
+import { App, theme as antdTheme } from 'antd';
 import useLayoutState from '../../hooks/useLayoutState';
 import SiteThemeProvider from '../SiteThemeProvider';
 import useLocation from '../../hooks/useLocation';

.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx

@@ -1,8 +1,8 @@
 import { createStyles } from 'antd-style';
-import { Tabs } from 'antd';
 import throttle from 'lodash/throttle';
 import * as React from 'react';
 import classNames from 'classnames';
+import { Tabs } from 'antd';
 import scrollTo from '../../../../components/_util/scrollTo';
 
 const listenerEvents = ['scroll', 'resize'] as const;

.dumi/theme/layouts/ResourceLayout/index.tsx

@@ -1,8 +1,8 @@
 import { createStyles } from 'antd-style';
-import { ConfigProvider, Layout, Typography } from 'antd';
 import { FormattedMessage, useRouteMeta } from 'dumi';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { ConfigProvider, Layout, Typography } from 'antd';
 import CommonHelmet from '../../common/CommonHelmet';
 import EditButton from '../../common/EditButton';
 import Footer from '../../slots/Footer';

.dumi/theme/plugin.ts

@@ -1,11 +1,11 @@
-import type { IApi, IRoute } from 'dumi';
-import ReactTechStack from 'dumi/dist/techStacks/react';
 import fs from 'fs';
 import path from 'path';
+import { createHash } from 'crypto';
+import type { IApi, IRoute } from 'dumi';
+import ReactTechStack from 'dumi/dist/techStacks/react';
 import chalk from 'chalk';
 import sylvanas from 'sylvanas';
 import { extractStaticStyle } from 'antd-style';
-import { createHash } from 'crypto';
 import localPackage from '../../package.json';
 
 export const getHash = (str: string, length = 8) =>

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -1,7 +1,7 @@
 import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
-import { Button, Card, Divider } from 'antd';
 import React from 'react';
+import { Button, Card, Divider } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import JuejinLogo from './JuejinLogo';
 

.dumi/theme/slots/Content/index.tsx

@@ -1,12 +1,12 @@
 import { CalendarOutlined } from '@ant-design/icons';
 import { createStyles, useTheme } from 'antd-style';
 import ContributorsList from '@qixian.cs/github-contributors-list';
-import { Affix, Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import DayJS from 'dayjs';
 import { FormattedMessage, useIntl, useRouteMeta, useTabMeta } from 'dumi';
 import type { ReactNode } from 'react';
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { Affix, Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocation from '../../../hooks/useLocation';
 import EditButton from '../../common/EditButton';

.dumi/theme/slots/ContentTabs/index.tsx

@@ -1,10 +1,10 @@
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 import { CodeOutlined, SkinOutlined } from '@ant-design/icons';
-import { Tabs } from 'antd';
 import { useRouteMeta } from 'dumi';
 import type { IContentTabsProps } from 'dumi/theme-default/slots/ContentTabs';
 import type { TabsProps } from 'rc-tabs';
+import { Tabs } from 'antd';
 
 const titleMap: Record<string, string> = {
   design: '设计',

.dumi/theme/slots/Footer/index.tsx

@@ -14,11 +14,11 @@ import {
 } from '@ant-design/icons';
 import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
-import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
 import { FormattedMessage, Link } from 'dumi';
 import RcFooter from 'rc-footer';
 import type { FooterColumn } from 'rc-footer/lib/column';
 import React, { useContext } from 'react';
+import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
 import SiteContext from '../SiteContext';

.dumi/theme/slots/Header/More.tsx

@@ -1,9 +1,9 @@
 import { DownOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
-import type { MenuProps } from 'antd';
-import { Button, Dropdown } from 'antd';
 import { FormattedMessage } from 'dumi';
 import React from 'react';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown } from 'antd';
 import type { SharedProps } from './interface';
 
 const useStyle = createStyles(({ css }) => ({

.dumi/theme/slots/Header/Navigation.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { FormattedMessage, Link, useFullSidebarData, useLocation } from 'dumi';
-import type { MenuProps } from 'antd';
-import { Menu } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import { createStyles, css } from 'antd-style';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
 import { getEcosystemGroup } from './More';
 import * as utils from '../../utils';
 import type { SharedProps } from './interface';

.dumi/theme/slots/Header/SwitchBtn.tsx

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
-import { Tooltip } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
+import { Tooltip } from 'antd';
 
 export interface LangBtnProps {
   label1: React.ReactNode;

.dumi/theme/slots/Header/index.tsx

@@ -1,10 +1,10 @@
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
-import { Col, Modal, Popover, Row, Select } from 'antd';
 import classNames from 'classnames';
 import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Col, Modal, Popover, Row, Select } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import DirectionIcon from '../../common/DirectionIcon';
 import * as utils from '../../utils';

.dumi/theme/slots/Sidebar/index.tsx

@@ -1,8 +1,8 @@
 import { createStyles, useTheme } from 'antd-style';
-import { Col, ConfigProvider, Menu } from 'antd';
 import { useSidebarData } from 'dumi';
 import MobileMenu from 'rc-drawer';
 import React, { useContext } from 'react';
+import { Col, ConfigProvider, Menu } from 'antd';
 import useMenu from '../../../hooks/useMenu';
 import SiteContext from '../SiteContext';
 

components/alert/demo/closable.tsx

@@ -1,5 +1,5 @@
-import { Alert, Space } from 'antd';
 import React from 'react';
+import { Alert, Space } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');

components/alert/demo/loop-banner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Alert } from 'antd';
 import Marquee from 'react-fast-marquee';
+import { Alert } from 'antd';
 
 const App: React.FC = () => (
   <Alert

components/anchor/demo/component-token.tsx

@@ -1,5 +1,5 @@
-import { Anchor, Col, ConfigProvider, Row } from 'antd';
 import React from 'react';
+import { Anchor, Col, ConfigProvider, Row } from 'antd';
 
 /** Test usage. Do not use in your production. */
 

components/anchor/demo/replace.tsx

@@ -1,5 +1,5 @@
-import { Anchor, Col, Row } from 'antd';
 import React from 'react';
+import { Anchor, Col, Row } from 'antd';
 
 const App: React.FC = () => (
   <Row>

components/auto-complete/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete } from 'antd';
 import React, { useState } from 'react';
+import { AutoComplete } from 'antd';
 
 const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),

components/auto-complete/demo/borderless.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete } from 'antd';
 import React, { useState } from 'react';
+import { AutoComplete } from 'antd';
 
 const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),

components/auto-complete/demo/status.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete, Space } from 'antd';
 import React, { useState } from 'react';
+import { AutoComplete, Space } from 'antd';
 
 const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),

components/avatar/demo/badge.tsx

@@ -1,6 +1,6 @@
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Badge, Space } from 'antd';
 import React from 'react';
+import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space size={24}>

components/avatar/demo/basic.tsx

@@ -1,6 +1,6 @@
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Space } from 'antd';
 import React from 'react';
+import { Avatar, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space direction="vertical" size={16}>

components/avatar/demo/component-token.tsx

@@ -1,6 +1,6 @@
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Badge, ConfigProvider, Space, Tooltip } from 'antd';
 import React from 'react';
+import { Avatar, Badge, ConfigProvider, Space, Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <ConfigProvider

components/avatar/demo/fallback.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Space } from 'antd';
 import React from 'react';
+import { Avatar, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space>

components/avatar/demo/group.tsx

@@ -1,6 +1,6 @@
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Divider, Tooltip } from 'antd';
 import React from 'react';
+import { Avatar, Divider, Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/toggle-debug.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Button, Space } from 'antd';
 import React, { useState } from 'react';
+import { Avatar, Button, Space } from 'antd';
 
 type SizeType = 'large' | 'small' | 'default' | number;
 

components/avatar/demo/type.tsx

@@ -1,6 +1,6 @@
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Space } from 'antd';
 import React from 'react';
+import { Avatar, Space } from 'antd';
 
 const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
 

components/badge/demo/colorful-with-count-debug.tsx

@@ -1,5 +1,5 @@
-import { Badge, Space } from 'antd';
 import React from 'react';
+import { Badge, Space } from 'antd';
 
 const colors = [
   'pink',

components/badge/demo/ribbon.tsx

@@ -1,5 +1,5 @@
-import { Badge, Card, Space } from 'antd';
 import React from 'react';
+import { Badge, Card, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space direction="vertical" size="middle" style={{ width: '100%' }}>

components/breadcrumb/demo/component-token.tsx

@@ -1,6 +1,6 @@
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
-import { Breadcrumb, ConfigProvider } from 'antd';
 import React from 'react';
+import { Breadcrumb, ConfigProvider } from 'antd';
 
 const menuItems = [
   {

components/breadcrumb/demo/debug-routes.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 export default () => (
   <Breadcrumb

components/breadcrumb/demo/overlay.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 const menuItems = [
   {

components/breadcrumb/demo/react-router.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Alert, Breadcrumb } from 'antd';
 import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
+import { Alert, Breadcrumb } from 'antd';
 
 const Apps = () => (
   <ul className="app-list">

components/breadcrumb/demo/separator-component.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
   <Breadcrumb

components/breadcrumb/demo/withIcon.tsx

@@ -1,6 +1,6 @@
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
   <Breadcrumb

components/button/demo/chinese-chars-loading.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { PoweroffOutlined } from '@ant-design/icons';
-import { Button, Space } from 'antd';
 import React from 'react';
+import { Button, Space } from 'antd';
 
 const Text1 = () => '部署';
 const Text2 = () => <span>部署</span>;

components/button/demo/debug-block.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Form, Button } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
+import { Form, Button } from 'antd';
 
 const App: React.FC = () => (
   <Form.Item>

components/button/demo/debug-icon.tsx

@@ -1,7 +1,7 @@
 import { SearchOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
 import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('large');

components/button/demo/legacy-group.tsx

@@ -1,7 +1,7 @@
 import { DownloadOutlined } from '@ant-design/icons';
+import React from 'react';
 import { Button, Tooltip } from 'antd';
 import type { ButtonGroupProps } from 'antd/es/button';
-import React from 'react';
 
 const CustomGroup: React.FC<ButtonGroupProps> = (props) => (
   <Button.Group {...props}>

components/calendar/demo/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
+import { Calendar } from 'antd';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
 
 const App: React.FC = () => {

components/calendar/demo/card.tsx

@@ -1,7 +1,7 @@
-import { Calendar, theme } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
 import type { Dayjs } from 'dayjs';
 import React from 'react';
+import { Calendar, theme } from 'antd';
+import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
 
 const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
   console.log(value.format('YYYY-MM-DD'), mode);

components/calendar/demo/component-token.tsx

@@ -1,7 +1,7 @@
-import { Calendar, ConfigProvider } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
 import type { Dayjs } from 'dayjs';
 import React from 'react';
+import { Calendar, ConfigProvider } from 'antd';
+import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
 
 /** Test usage. Do not use in your production. */
 export default () => {

components/calendar/demo/notice-calendar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { BadgeProps } from 'antd';
-import { Badge, Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
 import type { CellRenderInfo } from 'rc-picker/lib/interface';
+import type { BadgeProps } from 'antd';
+import { Badge, Calendar } from 'antd';
 
 const getListData = (value: Dayjs) => {
   let listData;

components/calendar/demo/select.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Alert, Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import { Alert, Calendar } from 'antd';
 
 const App: React.FC = () => {
   const [value, setValue] = useState(() => dayjs('2017-01-25'));

components/card/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { Card, Space } from 'antd';
 import React from 'react';
+import { Card, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space direction="vertical" size={16}>

components/card/demo/border-less.tsx

@@ -1,5 +1,5 @@
-import { Card } from 'antd';
 import React from 'react';
+import { Card } from 'antd';
 
 const App: React.FC = () => (
   <Card title="Card title" bordered={false} style={{ width: 300 }}>

components/card/demo/component-token.tsx

@@ -1,6 +1,6 @@
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
-import { Card, ConfigProvider } from 'antd';
 import React from 'react';
+import { Card, ConfigProvider } from 'antd';
 
 export default () => (
   <ConfigProvider

components/card/demo/in-column.tsx

@@ -1,5 +1,5 @@
-import { Card, Col, Row } from 'antd';
 import React from 'react';
+import { Card, Col, Row } from 'antd';
 
 const App: React.FC = () => (
   <Row gutter={16}>

components/card/demo/loading.tsx

@@ -1,6 +1,6 @@
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
-import { Avatar, Card, Skeleton, Switch } from 'antd';
 import React, { useState } from 'react';
+import { Avatar, Card, Skeleton, Switch } from 'antd';
 
 const { Meta } = Card;
 

components/card/demo/tabs.tsx

@@ -1,5 +1,5 @@
-import { Card } from 'antd';
 import React, { useState } from 'react';
+import { Card } from 'antd';
 
 const tabList = [
   {

components/carousel/demo/component-token.tsx

@@ -1,5 +1,5 @@
-import { Carousel, ConfigProvider } from 'antd';
 import React from 'react';
+import { Carousel, ConfigProvider } from 'antd';
 
 /** Test usage. Do not use in your production. */
 const contentStyle: React.CSSProperties = {

components/cascader/demo/lazy.tsx

@@ -1,5 +1,5 @@
-import { Cascader } from 'antd';
 import React, { useState } from 'react';
+import { Cascader } from 'antd';
 
 interface Option {
   value?: string | number | null;

components/cascader/demo/multiple.tsx

@@ -1,5 +1,5 @@
-import { Cascader } from 'antd';
 import React from 'react';
+import { Cascader } from 'antd';
 
 interface Option {
   value: string | number;

components/checkbox/demo/debug-line.tsx

@@ -1,5 +1,5 @@
-import { Checkbox, ConfigProvider, Radio, Space } from 'antd';
 import React from 'react';
+import { Checkbox, ConfigProvider, Radio, Space } from 'antd';
 
 const sharedStyle: React.CSSProperties = {
   border: '1px solid red',

components/checkbox/demo/group.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { Checkbox } from 'antd';
 import type { CheckboxValueType } from 'antd/es/checkbox/Group';
-import React from 'react';
 
 const onChange = (checkedValues: CheckboxValueType[]) => {
   console.log('checked = ', checkedValues);

components/collapse/demo/accordion.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { CollapseProps } from 'antd';
 import { Collapse } from 'antd';
-import React from 'react';
 
 const text = `
   A dog is a type of domesticated animal.

components/collapse/demo/basic.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { CollapseProps } from 'antd';
 import { Collapse } from 'antd';
-import React from 'react';
 
 const text = `
   A dog is a type of domesticated animal.

components/collapse/demo/borderless.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { CollapseProps } from 'antd';
 import { Collapse } from 'antd';
-import React from 'react';
 
 const text = (
   <p style={{ paddingLeft: 24 }}>

components/collapse/demo/collapsible.tsx

@@ -1,5 +1,5 @@
-import { Collapse, Space } from 'antd';
 import React from 'react';
+import { Collapse, Space } from 'antd';
 
 const text = `
   A dog is a type of domesticated animal.