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

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# 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)
+                }
+            }
+        }
+    }
+}

package.json

@@ -12,40 +12,44 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.1.4",
+    "@ant-design/icons": "^5.2.5",
-    "antd": "^5.7.0",
+    "antd": "^5.8.5",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.14.1",
+    "react-router": "^6.15.0",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.15.0",
-    "sort-by": "^1.2.0"
+    "sort-by": "^0.0.2"
   },
   "devDependencies": {
-    "@types/jsdom": "^21.1.1",
+    "@svgr/core": "^8.1.0",
-    "@types/lodash": "^4.14.195",
+    "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^20.4.2",
+    "@types/jsdom": "^21.1.2",
-    "@types/react": "^18.2.14",
+    "@types/lodash": "^4.14.197",
-    "@types/react-dom": "^18.2.6",
+    "@types/node": "^20.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@types/react": "^18.2.21",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "eslint": "^8.44.0",
+    "@typescript-eslint/parser": "^6.5.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@vitejs/plugin-react": "^4.0.4",
-    "eslint-config-standard-with-typescript": "^36.0.0",
+    "eslint": "^8.48.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
+    "eslint-plugin-react-refresh": "^0.4.3",
     "jsdom": "^22.1.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.3",
     "stylelint-config-prettier": "^9.0.5",
-    "typescript": "^5.0.2",
+    "typescript": "^5.2.2",
-    "vite": "^4.4.0"
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-icons": "^0.16.6",
+    "vite": "^4.4.9"
   }
 }

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/assets/svg/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><path d="M11.2633,0.229798C11.6966,-0.0765992,12.3034,-0.0765992,12.7367,0.229798C12.7367,0.229798,23.5367,7.86616,23.5367,7.86616C23.829,8.07284,24,8.39063,24,8.72727C24,8.72727,24,20.7273,24,20.7273C24,21.5953,23.6207,22.4277,22.9456,23.0414C22.2704,23.6552,21.3548,24,20.4,24C20.4,24,3.6,24,3.6,24C2.64522,24,1.72955,23.6552,1.05442,23.0414C0.379284,22.4277,0,21.5953,0,20.7273C0,20.7273,0,8.72727,0,8.72727C0,8.39063,0.170968,8.07284,0.463271,7.86616C0.463271,7.86616,11.2633,0.229798,11.2633,0.229798C11.2633,0.229798,11.2633,0.229798,11.2633,0.229798ZM9.6,21.8182C9.6,21.8182,14.4,21.8182,14.4,21.8182C14.4,21.8182,14.4,13.0909,14.4,13.0909C14.4,13.0909,9.6,13.0909,9.6,13.0909C9.6,13.0909,9.6,21.8182,9.6,21.8182C9.6,21.8182,9.6,21.8182,9.6,21.8182ZM16.8,21.8182C16.8,21.8182,16.8,12,16.8,12C16.8,11.3975,16.2628,10.9091,15.6,10.9091C15.6,10.9091,8.4,10.9091,8.4,10.9091C7.73726,10.9091,7.2,11.3975,7.2,12C7.2,12,7.2,21.8182,7.2,21.8182C7.2,21.8182,3.6,21.8182,3.6,21.8182C3.28174,21.8182,2.97652,21.7032,2.75147,21.4987C2.52643,21.2941,2.4,21.0166,2.4,20.7273C2.4,20.7273,2.4,9.26081,2.4,9.26081C2.4,9.26081,12,2.47294,12,2.47294C12,2.47294,21.6,9.26081,21.6,9.26081C21.6,9.26081,21.6,20.7273,21.6,20.7273C21.6,21.0166,21.4735,21.2941,21.2485,21.4987C21.0235,21.7032,20.7182,21.8182,20.4,21.8182C20.4,21.8182,16.8,21.8182,16.8,21.8182C16.8,21.8182,16.8,21.8182,16.8,21.8182Z" fill-rule="evenodd" fill-opacity="1"/></g></g></svg>

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 React from 'react'
-import { Button, Form, Input, message } from 'antd'
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
 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>
+                            </AntdForm.Item>
-                            <Form.Item
+                            <AntdForm.Item
                                 className={'login-from-item'}
                                 name={'password'}
                                 rules={[{ required: true, message: '密码为空' }]}
                             >
-                                <Input.Password
+                                <AntdInput.Password
                                     prefix={<LockOutlined />}
                                     placeholder={'密码'}
                                     disabled={isLoggingIn}
                                 />
-                            </Form.Item>
+                            </AntdForm.Item>
-                            <Form.Item className={'login-from-item'}>
+                            <AntdForm.Item className={'login-from-item'}>
-                                <Button
+                                <AntdButton
                                     style={{ width: '100%' }}
                                     type={'primary'}
                                     htmlType={'submit'}
@@ -96,9 +93,9 @@ const Login: React.FC = () => {
                                     loading={isLoggingIn}
                                 >
                                     登&ensp;&ensp;&ensp;&ensp;录
-                                </Button>
+                                </AntdButton>
-                            </Form.Item>
+                            </AntdForm.Item>
-                        </Form>
+                        </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>
+                            </AntdButton>
-                            <Button type={'dashed'} icon={<DeleteOutlined />}>
+                            <AntdButton type={'dashed'} icon={<DeleteOutlined />}>
                                 重置
-                            </Button>
+                            </AntdButton>
                         </div>
                     </div>
                     <div className={'operation-buttons'} style={{ marginRight: '10px' }}>
-                        <Button type={'primary'}>预览</Button>
+                        <AntdButton type={'primary'}>预览</AntdButton>
-                        <Button type={'primary'}>编辑</Button>
+                        <AntdButton type={'primary'}>编辑</AntdButton>
-                        <Button type={'primary'}>颜色设置</Button>
+                        <AntdButton type={'primary'}>颜色设置</AntdButton>
-                        <Button type={'primary'}>批量提交</Button>
+                        <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 React from 'react'
-import Login from '@/pages/Login.tsx'
-import Manager from '@/pages/Manager.tsx'
-import AuthRoute from '@/AuthRoute.tsx'
 
 const routes: RouteObject[] = [
     {
         path: '/',
-        element: <AuthRoute />,
+        Component: React.lazy(() => import('@/AuthRoute')),
         children: [
             {
                 path: '/login',
-                element: <Login />,
+                id: 'login',
-                children: [
+                Component: React.lazy(() => import('@/pages/Login'))
-                    {
-                        id: 'login',
-                        path: '1',
-                        element: <Manager />
-                    }
-                ]
             },
             {
                 path: '',
-                element: <Manager />,
+                id: 'manager',
+                Component: React.lazy(() => import('@/pages/Manager')),
                 children: [
                     {
-                        id: 'manager',
+                        id: 'manager-sub',
-                        path: '1',
+                        path: 'sub',
-                        element: <Login />
+                        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": ".",
@@ -22,8 +21,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "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

@@ -1,14 +1,82 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, PluginOption } from 'vite'
 import react from '@vitejs/plugin-react'
+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({
-  plugins: [react()],
+    plugins: [
-  resolve: {
+        react(),
-    alias: {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+        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',
+            jsx: 'react',
+            autoInstall: true,
+            customCollections: {
+                framework: FileSystemIconLoader('src/assets/svg', (svg) =>
+                    svg.replace(/^svg /, '<svg fill="currentColor"')
+                )
+            }
+        })
+    ],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
     }
-  }
 })