Merge pull request 'Add auto import and route lazy load' (#6) from FatttSnake into dev

Reviewed-on: #6

.eslintrc.cjs

@@ -8,7 +8,8 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
         'plugin:react-hooks/recommended',
-        'plugin:prettier/recommended'
+        'plugin:prettier/recommended',
+        './.eslintrc-auto-import.json'
     ],
     parser: '@typescript-eslint/parser',
     parserOptions: {

.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 
 # Auto generated
 /auto-imports.d.ts
+/.eslintrc-auto-import.json

build/resolvers/antd.ts

@@ -0,0 +1,421 @@
+export function kebabCase(key: string): string {
+    const result: string = key.replace(/([A-Z])/g, ' $1').trim()
+    return result.split(' ').join('-').toLowerCase()
+}
+
+export type Awaitable<T> = T | PromiseLike<T>
+
+export interface ImportInfo {
+    as?: string
+    name?: string
+    from: string
+}
+
+export type SideEffectsInfo = (ImportInfo | string)[] | ImportInfo | string | undefined
+
+export interface ComponentInfo extends ImportInfo {
+    sideEffects?: SideEffectsInfo
+}
+
+export type ComponentResolveResult = Awaitable<string | ComponentInfo | null | undefined | void>
+
+export type ComponentResolverFunction = (name: string) => ComponentResolveResult
+
+export interface ComponentResolverObject {
+    type: 'component' | 'directive'
+    resolve: ComponentResolverFunction
+}
+
+export type ComponentResolver = ComponentResolverFunction | ComponentResolverObject
+
+interface IMatcher {
+    pattern: RegExp
+    styleDir: string
+}
+
+const matchComponents: IMatcher[] = [
+    {
+        pattern: /^Avatar/,
+        styleDir: 'avatar'
+    },
+    {
+        pattern: /^AutoComplete/,
+        styleDir: 'auto-complete'
+    },
+    {
+        pattern: /^Anchor/,
+        styleDir: 'anchor'
+    },
+
+    {
+        pattern: /^Badge/,
+        styleDir: 'badge'
+    },
+    {
+        pattern: /^Breadcrumb/,
+        styleDir: 'breadcrumb'
+    },
+    {
+        pattern: /^Button/,
+        styleDir: 'button'
+    },
+    {
+        pattern: /^Checkbox/,
+        styleDir: 'checkbox'
+    },
+    {
+        pattern: /^Card/,
+        styleDir: 'card'
+    },
+    {
+        pattern: /^Collapse/,
+        styleDir: 'collapse'
+    },
+    {
+        pattern: /^Descriptions/,
+        styleDir: 'descriptions'
+    },
+    {
+        pattern: /^RangePicker|^WeekPicker|^MonthPicker/,
+        styleDir: 'date-picker'
+    },
+    {
+        pattern: /^Dropdown/,
+        styleDir: 'dropdown'
+    },
+
+    {
+        pattern: /^Form/,
+        styleDir: 'form'
+    },
+    {
+        pattern: /^InputNumber/,
+        styleDir: 'input-number'
+    },
+
+    {
+        pattern: /^Input|^Textarea/,
+        styleDir: 'input'
+    },
+    {
+        pattern: /^Statistic/,
+        styleDir: 'statistic'
+    },
+    {
+        pattern: /^CheckableTag/,
+        styleDir: 'tag'
+    },
+    {
+        pattern: /^TimeRangePicker/,
+        styleDir: 'time-picker'
+    },
+    {
+        pattern: /^Layout/,
+        styleDir: 'layout'
+    },
+    {
+        pattern: /^Menu|^SubMenu/,
+        styleDir: 'menu'
+    },
+
+    {
+        pattern: /^Table/,
+        styleDir: 'table'
+    },
+    {
+        pattern: /^TimePicker|^TimeRangePicker/,
+        styleDir: 'time-picker'
+    },
+    {
+        pattern: /^Radio/,
+        styleDir: 'radio'
+    },
+
+    {
+        pattern: /^Image/,
+        styleDir: 'image'
+    },
+
+    {
+        pattern: /^List/,
+        styleDir: 'list'
+    },
+
+    {
+        pattern: /^Tab/,
+        styleDir: 'tabs'
+    },
+    {
+        pattern: /^Mentions/,
+        styleDir: 'mentions'
+    },
+
+    {
+        pattern: /^Step/,
+        styleDir: 'steps'
+    },
+    {
+        pattern: /^Skeleton/,
+        styleDir: 'skeleton'
+    },
+
+    {
+        pattern: /^Select/,
+        styleDir: 'select'
+    },
+    {
+        pattern: /^TreeSelect/,
+        styleDir: 'tree-select'
+    },
+    {
+        pattern: /^Tree|^DirectoryTree/,
+        styleDir: 'tree'
+    },
+    {
+        pattern: /^Typography/,
+        styleDir: 'typography'
+    },
+    {
+        pattern: /^Timeline/,
+        styleDir: 'timeline'
+    },
+    {
+        pattern: /^Upload/,
+        styleDir: 'upload'
+    }
+]
+
+export interface AntDesignResolverOptions {
+    /**
+     * exclude components that do not require automatic import
+     *
+     * @default []
+     */
+    exclude?: string[]
+    /**
+     * import style along with components
+     *
+     * @default 'css'
+     */
+    importStyle?: boolean | 'css' | 'less'
+    /**
+     * resolve `antd' icons
+     *
+     * requires package `@ant-design/icons-vue`
+     *
+     * @default false
+     */
+    resolveIcons?: boolean
+
+    /**
+     * @deprecated use `importStyle: 'css'` instead
+     */
+    importCss?: boolean
+    /**
+     * @deprecated use `importStyle: 'less'` instead
+     */
+    importLess?: boolean
+
+    /**
+     * use commonjs build default false
+     */
+    cjs?: boolean
+
+    /**
+     * rename package
+     *
+     * @default 'antd'
+     */
+    packageName?: string
+}
+
+const getStyleDir = (compName: string): string => {
+    for (const matchComponent of matchComponents) {
+        if (compName.match(matchComponent.pattern)) {
+            return matchComponent.styleDir
+        }
+    }
+    return kebabCase(compName)
+}
+
+const getSideEffects = (compName: string, options: AntDesignResolverOptions): SideEffectsInfo => {
+    const { importStyle = true } = options
+
+    if (!importStyle) {
+        return
+    }
+
+    const lib = options.cjs ? 'lib' : 'es'
+    const packageName = options?.packageName || 'antd'
+
+    const styleDir = getStyleDir(compName)
+    return `${packageName}/${lib}/${styleDir}/style`
+}
+
+const primitiveNames = [
+    'Affix',
+    'Anchor',
+    'AnchorLink',
+    'AutoComplete',
+    'AutoCompleteOptGroup',
+    'AutoCompleteOption',
+    'Alert',
+    'Avatar',
+    'AvatarGroup',
+    'BackTop',
+    'Badge',
+    'BadgeRibbon',
+    'Breadcrumb',
+    'BreadcrumbItem',
+    'BreadcrumbSeparator',
+    'Button',
+    'ButtonGroup',
+    'Calendar',
+    'Card',
+    'CardGrid',
+    'CardMeta',
+    'Collapse',
+    'CollapsePanel',
+    'Carousel',
+    'Cascader',
+    'Checkbox',
+    'CheckboxGroup',
+    'Col',
+    'Comment',
+    'ConfigProvider',
+    'DatePicker',
+    'MonthPicker',
+    'WeekPicker',
+    'RangePicker',
+    'QuarterPicker',
+    'Descriptions',
+    'DescriptionsItem',
+    'Divider',
+    'Dropdown',
+    'DropdownButton',
+    'Drawer',
+    'Empty',
+    'Form',
+    'FormItem',
+    'FormItemRest',
+    'Grid',
+    'Input',
+    'InputGroup',
+    'InputPassword',
+    'InputSearch',
+    'Textarea',
+    'Image',
+    'ImagePreviewGroup',
+    'InputNumber',
+    'Layout',
+    'LayoutHeader',
+    'LayoutSider',
+    'LayoutFooter',
+    'LayoutContent',
+    'List',
+    'ListItem',
+    'ListItemMeta',
+    'Menu',
+    'MenuDivider',
+    'MenuItem',
+    'MenuItemGroup',
+    'SubMenu',
+    'Mentions',
+    'MentionsOption',
+    'Modal',
+    'Statistic',
+    'StatisticCountdown',
+    'PageHeader',
+    'Pagination',
+    'Popconfirm',
+    'Popover',
+    'Progress',
+    'Radio',
+    'RadioButton',
+    'RadioGroup',
+    'Rate',
+    'Result',
+    'Row',
+    'Select',
+    'SelectOptGroup',
+    'SelectOption',
+    'Skeleton',
+    'SkeletonButton',
+    'SkeletonAvatar',
+    'SkeletonInput',
+    'SkeletonImage',
+    'Slider',
+    'Space',
+    'Spin',
+    'Steps',
+    'Step',
+    'Switch',
+    'Table',
+    'TableColumn',
+    'TableColumnGroup',
+    'TableSummary',
+    'TableSummaryRow',
+    'TableSummaryCell',
+    'Transfer',
+    'Tree',
+    'TreeNode',
+    'DirectoryTree',
+    'TreeSelect',
+    'TreeSelectNode',
+    'Tabs',
+    'TabPane',
+    'Tag',
+    'CheckableTag',
+    'TimePicker',
+    'TimeRangePicker',
+    'Timeline',
+    'TimelineItem',
+    'Tooltip',
+    'Typography',
+    'TypographyLink',
+    'TypographyParagraph',
+    'TypographyText',
+    'TypographyTitle',
+    'Upload',
+    'UploadDragger',
+    'LocaleProvider'
+]
+
+const prefix = 'Antd'
+
+let antdNames: Set<string>
+
+const genAntdNames = (primitiveNames: string[]): void => {
+    antdNames = new Set(primitiveNames.map((name) => `${prefix}${name}`))
+}
+
+genAntdNames(primitiveNames)
+
+const isAntd = (compName: string): boolean => {
+    return antdNames.has(compName)
+}
+
+export function AntDesignResolver(options: AntDesignResolverOptions = {}): ComponentResolver {
+    return {
+        type: 'component',
+        resolve: (name: string) => {
+            if (options.resolveIcons && name.match(/(Outlined|Filled|TwoTone)$/)) {
+                return {
+                    name,
+                    from: '@ant-design/icons'
+                }
+            }
+
+            if (isAntd(name) && !options?.exclude?.includes(name)) {
+                const importName = name.slice(prefix.length)
+                const { cjs = false, packageName = 'antd' } = options
+                const path = `${packageName}/${cjs ? 'lib' : 'es'}`
+                return {
+                    name: importName,
+                    from: path,
+                    sideEffects: getSideEffects(importName, options)
+                }
+            }
+        }
+    }
+}

src/App.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { RouterProvider } from 'react-router'
 import router from '@/router'
 
 const App: React.FC = () => {

src/AuthRoute.tsx

@@ -1,6 +1,3 @@
-import { useMatches, useOutlet } from 'react-router'
-import { useMemo } from 'react'
-import { Navigate } from 'react-router-dom'
 import { getLoginStatus } from '@/utils/auth.ts'
 
 const AuthRoute = () => {

src/main.tsx

@@ -3,13 +3,12 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import '@/assets/css/base.css'
 import '@/assets/css/common.css'
-import { ConfigProvider } from 'antd'
 import zh_CN from 'antd/locale/zh_CN'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <ConfigProvider locale={zh_CN}>
+        <AntdConfigProvider locale={zh_CN}>
             <App />
-        </ConfigProvider>
+        </AntdConfigProvider>
     </React.StrictMode>
 )

src/pages/Login.tsx

@@ -1,10 +1,7 @@
-import React, { useState } from 'react'
-import { Button, Form, Input, message } from 'antd'
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import React from 'react'
 import { login } from '@/utils/auth.ts'
 import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts'
 import { setToken } from '@/utils/common.ts'
-import { useNavigate } from 'react-router'
 import '@/assets/css/login.css'
 
 const Login: React.FC = () => {
@@ -59,36 +56,36 @@ const Login: React.FC = () => {
                         <div className={'login-from-text'}>
                             <span>登&ensp;录</span>
                         </div>
-                        <Form
+                        <AntdForm
                             name="login-form"
                             autoComplete="on"
                             onFinish={onFinish}
                             className={'login-from'}
                         >
-                            <Form.Item
+                            <AntdForm.Item
                                 className={'login-from-item'}
                                 name={'username'}
                                 rules={[{ required: true, message: '用户名为空' }]}
                             >
-                                <Input
+                                <AntdInput
                                     prefix={<UserOutlined />}
                                     placeholder={'用户名'}
                                     disabled={isLoggingIn}
                                 />
-                            </Form.Item>
-                            <Form.Item
+                            </AntdForm.Item>
+                            <AntdForm.Item
                                 className={'login-from-item'}
                                 name={'password'}
                                 rules={[{ required: true, message: '密码为空' }]}
                             >
-                                <Input.Password
+                                <AntdInput.Password
                                     prefix={<LockOutlined />}
                                     placeholder={'密码'}
                                     disabled={isLoggingIn}
                                 />
-                            </Form.Item>
-                            <Form.Item className={'login-from-item'}>
-                                <Button
+                            </AntdForm.Item>
+                            <AntdForm.Item className={'login-from-item'}>
+                                <AntdButton
                                     style={{ width: '100%' }}
                                     type={'primary'}
                                     htmlType={'submit'}
@@ -96,9 +93,9 @@ const Login: React.FC = () => {
                                     loading={isLoggingIn}
                                 >
                                     登&ensp;&ensp;&ensp;&ensp;录
-                                </Button>
-                            </Form.Item>
-                        </Form>
+                                </AntdButton>
+                            </AntdForm.Item>
+                        </AntdForm>
                     </div>
                 </div>
             </div>

src/pages/Manager.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
-import { Button, Checkbox, DatePicker, Input, Select, Space, Table } from 'antd'
 import { removeToken } from '@/utils/common.ts'
 import { logout } from '@/utils/auth.ts'
 import '@/assets/css/manager.css'
-import { DeleteOutlined, SearchOutlined } from '@ant-design/icons'
 import { ColumnsType } from 'antd/es/table'
 
 type OrderDataType = {
@@ -73,11 +71,11 @@ const columns: ColumnsType<OrderDataType> = [
         title: '操作',
         key: 'action',
         render: () => (
-            <Space size={'middle'}>
+            <AntdSpace size={'middle'}>
                 <a style={{ color: 'skyblue' }}>浏览</a>
                 <a style={{ color: 'skyblue' }}>编辑</a>
                 <a style={{ color: 'skyblue' }}>确认订单</a>
-            </Space>
+            </AntdSpace>
         )
     }
 ]
@@ -140,15 +138,15 @@ const Manager: React.FC = () => {
         <>
             <div className={'body'}>
                 <div className={'top-bar'}>
-                    <Button onClick={handleOnClick} ghost>
+                    <AntdButton onClick={handleOnClick} ghost>
                         退出登录
-                    </Button>
+                    </AntdButton>
                 </div>
                 <div className={'search-bar'}>
                     <div className={'search-row'}>
                         <label>
                             日期类型
-                            <Select
+                            <AntdSelect
                                 defaultValue={1}
                                 options={[{ value: 1, label: '创建日期' }]}
                                 showSearch
@@ -161,15 +159,15 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             开始日期
-                            <DatePicker />
+                            <AntdDatePicker />
                         </label>
                         <label>
                             结束日期
-                            <DatePicker />
+                            <AntdDatePicker />
                         </label>
                         <label>
                             所属部门
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -183,7 +181,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             操作员
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -197,7 +195,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             公司名称
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -213,23 +211,23 @@ const Manager: React.FC = () => {
                     <div className={'search-row'}>
                         <label>
                             平台单号
-                            <Input placeholder={'平台单号'} />
+                            <AntdInput placeholder={'平台单号'} />
                         </label>
                         <label>
                             系统单号
-                            <Input placeholder={'系统单号'} />
+                            <AntdInput placeholder={'系统单号'} />
                         </label>
                         <label>
                             B2B单号
-                            <Input placeholder={'B2B单号'} />
+                            <AntdInput placeholder={'B2B单号'} />
                         </label>
                         <label>
                             供应商单号
-                            <Input placeholder={'供应商单号'} />
+                            <AntdInput placeholder={'供应商单号'} />
                         </label>
                         <label>
                             国家
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -243,7 +241,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             省份
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -259,19 +257,19 @@ const Manager: React.FC = () => {
                     <div className={'search-row'}>
                         <label>
                             酒店名称
-                            <Input placeholder={'酒店名称'} />
+                            <AntdInput placeholder={'酒店名称'} />
                         </label>
                         <label>
                             客人信息
-                            <Input placeholder={'客人信息'} />
+                            <AntdInput placeholder={'客人信息'} />
                         </label>
                         <label>
                             成本总额
-                            <Input placeholder={'成本总额'} />
+                            <AntdInput placeholder={'成本总额'} />
                         </label>
                         <label>
                             客户平台
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -285,7 +283,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             客户子平台
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -297,12 +295,12 @@ const Manager: React.FC = () => {
                                 }
                             />
                         </label>
-                        <Checkbox>草稿单</Checkbox>
+                        <AntdCheckbox>草稿单</AntdCheckbox>
                     </div>
                     <div className={'search-row'}>
                         <label>
                             订单状态
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -316,7 +314,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             审批级别
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -330,7 +328,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             订单审批状态
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -344,7 +342,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             订单来源
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -358,7 +356,7 @@ const Manager: React.FC = () => {
                         </label>
                         <label>
                             颜色类型
-                            <Select
+                            <AntdSelect
                                 defaultValue={0}
                                 allowClear
                                 showSearch
@@ -371,22 +369,22 @@ const Manager: React.FC = () => {
                             />
                         </label>
                         <div className={'operation-buttons'}>
-                            <Button type={'primary'} icon={<SearchOutlined />}>
+                            <AntdButton type={'primary'} icon={<SearchOutlined />}>
                                 查询
-                            </Button>
-                            <Button type={'dashed'} icon={<DeleteOutlined />}>
+                            </AntdButton>
+                            <AntdButton type={'dashed'} icon={<DeleteOutlined />}>
                                 重置
-                            </Button>
+                            </AntdButton>
                         </div>
                     </div>
                     <div className={'operation-buttons'} style={{ marginRight: '10px' }}>
-                        <Button type={'primary'}>预览</Button>
-                        <Button type={'primary'}>编辑</Button>
-                        <Button type={'primary'}>颜色设置</Button>
-                        <Button type={'primary'}>批量提交</Button>
+                        <AntdButton type={'primary'}>预览</AntdButton>
+                        <AntdButton type={'primary'}>编辑</AntdButton>
+                        <AntdButton type={'primary'}>颜色设置</AntdButton>
+                        <AntdButton type={'primary'}>批量提交</AntdButton>
                     </div>
                 </div>
-                <Table columns={columns} dataSource={data} style={{ marginTop: '20px' }} />
+                <AntdTable columns={columns} dataSource={data} style={{ marginTop: '20px' }} />
             </div>
         </>
     )

src/router/index.tsx

@@ -1,32 +1,24 @@
-import { createBrowserRouter, Navigate, RouteObject } from 'react-router-dom'
-import Login from '@/pages/Login.tsx'
-import Manager from '@/pages/Manager.tsx'
-import AuthRoute from '@/AuthRoute.tsx'
+import React from 'react'
 
 const routes: RouteObject[] = [
     {
         path: '/',
-        element: <AuthRoute />,
+        Component: React.lazy(() => import('@/AuthRoute')),
         children: [
             {
                 path: '/login',
-                element: <Login />,
-                children: [
-                    {
-                        id: 'login',
-                        path: '1',
-                        element: <Manager />
-                    }
-                ]
+                id: 'login',
+                Component: React.lazy(() => import('@/pages/Login'))
             },
             {
                 path: '',
-                element: <Manager />,
+                id: 'manager',
+                Component: React.lazy(() => import('@/pages/Manager')),
                 children: [
                     {
-                        id: 'manager',
-                        path: '1',
-                        element: <Login />
+                        id: 'manager-sub',
+                        path: 'sub',
+                        Component: React.lazy(() => import('@/pages/Login'))
                     }
                 ],
                 handle: {

src/utils/auth.ts

@@ -12,7 +12,7 @@ export async function login(username: string, password: string) {
 }
 
 export function logout(): void {
-    request.get('/logout').finally(() => {
+    void request.get('/logout').finally(() => {
         clearLocalStorage()
     })
 }

tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": ".",
@@ -26,6 +25,6 @@
 
     "types": ["unplugin-icons/types/react"]
   },
-  "include": ["src"],
+  "include": ["src", "auto-imports.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -7,5 +7,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "build/resolvers/*"]
 }

vite.config.ts

@@ -6,6 +6,7 @@ import Icons from 'unplugin-icons/vite'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import AutoImport from 'unplugin-auto-import/vite'
+import { AntDesignResolver } from './build/resolvers/antd'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,13 +14,54 @@ export default defineConfig({
         react(),
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         AutoImport({
+            // targets to transform
+            include: [
+                /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+                /\.md$/ // .md
+            ],
+
+            // global imports to register
+            imports: [
+                'react',
+                'react-router',
+                'react-router-dom',
+                {
+                    'react-router': ['useMatches', 'RouterProvider'],
+                    'react-router-dom': ['createBrowserRouter'],
+                    antd: ['message']
+                },
+                {
+                    from: 'react-router',
+                    imports: ['RouteObject'],
+                    type: true
+                }
+            ],
+
+            // Filepath to generate corresponding .d.ts file.
+            // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
+            // Set `false` to disable.
+            dts: './auto-imports.d.ts',
+
+            // Custom resolvers, compatible with `unplugin-vue-components`
+            // see https://github.com/antfu/unplugin-auto-import/pull/23/
             resolvers: [
                 IconsResolver({
                     prefix: 'icon',
                     extension: 'jsx',
                     customCollections: ['framework']
+                }),
+                AntDesignResolver({
+                    resolveIcons: true
                 })
-            ]
+            ],
+
+            // Generate corresponding .eslintrc-auto-import.json file.
+            // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
+            eslintrc: {
+                enabled: true, // Default `false`
+                filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+                globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+            }
         }) as PluginOption,
         Icons({
             compiler: 'jsx',