Merge pull request 'Merge and pull dev branch to master' (#7) from dev into master

Reviewed-on: #7

.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-lock.json

@@ -44,6 +44,7 @@
         "prettier": "^3.0.3",
         "stylelint-config-prettier": "^9.0.5",
         "typescript": "^5.2.2",
+        "unplugin-auto-import": "^0.16.6",
         "unplugin-icons": "^0.16.6",
         "vite": "^4.4.9"
       }
@@ -1316,6 +1317,28 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
+      "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -1514,6 +1537,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "dev": true
+    },
     "node_modules/@types/jsdom": {
       "version": "21.1.2",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.2.tgz",
@@ -3339,6 +3368,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
@@ -4454,6 +4489,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
     "node_modules/jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -4590,6 +4631,18 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.3",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz",
@@ -4749,6 +4802,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.1.tgz",
+      "integrity": "sha512-SCDs78Q2o09jiZiE2WziwVBEqXQ02XkGdUy45cbJf+BpYRIjArXRJ1Wbowxkb+NaM9DWvS3UC9GiO/6eqvQ/pg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "ufo": "^1.3.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -5079,6 +5144,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -5094,6 +5165,17 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
+      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "dev": true,
+      "dependencies": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.29",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
@@ -6344,6 +6426,12 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
+    "node_modules/scule": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.0.0.tgz",
+      "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+      "dev": true
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
@@ -6643,6 +6731,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz",
+      "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0"
+      }
+    },
     "node_modules/style-search": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/style-search/-/style-search-0.1.0.tgz",
@@ -7089,6 +7186,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.3.0.tgz",
+      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
+      "dev": true
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -7101,6 +7204,34 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "node_modules/unimport": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.2.0.tgz",
+      "integrity": "sha512-9buxPxkNwxwxAlH/RfOFHxtQTUrlmBGi9Ai9HezY2yYbkoOhgJTYPI6+WqxI1EZphoM9cw1SHoCFRkXSb8/fjQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.3",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.3.1",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.3",
+        "mlly": "^1.4.0",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "scule": "^1.0.0",
+        "strip-literal": "^1.3.0",
+        "unplugin": "^1.4.0"
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
@@ -7122,6 +7253,58 @@
         "webpack-virtual-modules": "^0.5.0"
       }
     },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.6.tgz",
+      "integrity": "sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.5",
+        "@rollup/pluginutils": "^5.0.2",
+        "fast-glob": "^3.3.0",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "minimatch": "^9.0.2",
+        "unimport": "^3.0.14",
+        "unplugin": "^1.3.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.2.2",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/unplugin-icons": {
       "version": "0.16.6",
       "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.16.6.tgz",
@@ -8335,6 +8518,17 @@
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
       "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg=="
     },
+    "@rollup/pluginutils": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
+      "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -8468,6 +8662,12 @@
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true
     },
+    "@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "dev": true
+    },
     "@types/jsdom": {
       "version": "21.1.2",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.2.tgz",
@@ -9851,6 +10051,12 @@
         }
       }
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
@@ -10729,6 +10935,12 @@
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true
     },
+    "jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
     "jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -10850,6 +11062,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "magic-string": {
+      "version": "0.30.3",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz",
@@ -10978,6 +11199,18 @@
         "kind-of": "^6.0.3"
       }
     },
+    "mlly": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.1.tgz",
+      "integrity": "sha512-SCDs78Q2o09jiZiE2WziwVBEqXQ02XkGdUy45cbJf+BpYRIjArXRJ1Wbowxkb+NaM9DWvS3UC9GiO/6eqvQ/pg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.10.0",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "ufo": "^1.3.0"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -11241,6 +11474,12 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pathe": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "dev": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -11253,6 +11492,17 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pkg-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
+      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "dev": true,
+      "requires": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0"
+      }
+    },
     "postcss": {
       "version": "8.4.29",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
@@ -12156,6 +12406,12 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
+    "scule": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.0.0.tgz",
+      "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+      "dev": true
+    },
     "semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
@@ -12405,6 +12661,15 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "strip-literal": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz",
+      "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.10.0"
+      }
+    },
     "style-search": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/style-search/-/style-search-0.1.0.tgz",
@@ -12766,6 +13031,12 @@
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
       "dev": true
     },
+    "ufo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.3.0.tgz",
+      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
+      "dev": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -12778,6 +13049,33 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "unimport": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.2.0.tgz",
+      "integrity": "sha512-9buxPxkNwxwxAlH/RfOFHxtQTUrlmBGi9Ai9HezY2yYbkoOhgJTYPI6+WqxI1EZphoM9cw1SHoCFRkXSb8/fjQ==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.3",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.3.1",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.3",
+        "mlly": "^1.4.0",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "scule": "^1.0.0",
+        "strip-literal": "^1.3.0",
+        "unplugin": "^1.4.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+          "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+          "dev": true
+        }
+      }
+    },
     "universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
@@ -12796,6 +13094,42 @@
         "webpack-virtual-modules": "^0.5.0"
       }
     },
+    "unplugin-auto-import": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.6.tgz",
+      "integrity": "sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.7.5",
+        "@rollup/pluginutils": "^5.0.2",
+        "fast-glob": "^3.3.0",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "minimatch": "^9.0.2",
+        "unimport": "^3.0.14",
+        "unplugin": "^1.3.2"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.3",
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "unplugin-icons": {
       "version": "0.16.6",
       "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.16.6.tgz",

package.json

@@ -48,6 +48,7 @@
     "prettier": "^3.0.3",
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "^5.2.2",
+    "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/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": ".",
@@ -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

@@ -1,14 +1,68 @@
 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(),
+        // 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',
             jsx: 'react',