refactor(element-plus): switch from full import to on-demand import

* refactor(element-plus): switch from full import to on-demand import

* fix(styles): prevent tooltip clipping inside el-card

* fix(element-plus): restore global styles to avoid style order conflicts

* Revert "fix(styles): prevent tooltip clipping inside el-card"

This reverts commit da2b09ed05e2bec62491168f12d717400edbf011.

build/plugins/unplugin.ts

@@ -5,6 +5,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
+import AutoImport from 'unplugin-auto-import/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 
@@ -27,11 +28,21 @@ export function setupUnplugin(viteEnv: Env.ImportMeta) {
       scale: 1,
       defaultClass: 'inline-block'
     }),
+    AutoImport({
+      dts: 'src/typings/auto-imports.d.ts',
+      resolvers: [
+        // Element Plus function APIs auto-import
+        ElementPlusResolver({
+          // no to import style, full import to see /src/plugins/assets.ts
+          importStyle: false
+        })
+      ]
+    }),
     Components({
       dts: 'src/typings/components.d.ts',
       types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
       resolvers: [
-        // auto import Element Plus components。 full import to see /src/plugins/ui.ts
+        // auto import Element Plus components
         ElementPlusResolver({
           // no to import style, full import to see /src/plugins/assets.ts
           importStyle: false

package.json

@@ -119,6 +119,7 @@
     "simple-git-hooks": "2.13.1",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
+    "unplugin-auto-import": "21.0.0",
     "unplugin-icons": "23.0.1",
     "unplugin-vue-components": "32.0.0",
     "vite": "npm:rolldown-vite@7.3.1",

pnpm-lock.yaml

@@ -216,6 +216,9 @@ importers:
       typescript:
         specifier: 5.9.3
         version: 5.9.3
+      unplugin-auto-import:
+        specifier: 21.0.0
+        version: 21.0.0(@vueuse/core@14.2.1(vue@3.5.31(typescript@5.9.3)))
       unplugin-icons:
         specifier: 23.0.1
         version: 23.0.1(@vue/compiler-sfc@3.5.31)
@@ -2963,6 +2966,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   eslint-compat-utils@0.5.1:
     resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
     engines: {node: '>=12'}
@@ -3109,6 +3116,9 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -3747,6 +3757,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
@@ -4875,6 +4888,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
   superjson@2.2.2:
     resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
     engines: {node: '>=16'}
@@ -5091,6 +5107,10 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unimport@5.7.0:
+    resolution: {integrity: sha512-njnL6sp8lEA8QQbZrt+52p/g4X0rw3bnGGmUcJnt1jeG8+iiqO779aGz0PirCtydAIVcuTBRlJ52F0u46z309Q==}
+    engines: {node: '>=18.12.0'}
+
   union-value@1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
     engines: {node: '>=0.10.0'}
@@ -5099,6 +5119,18 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unplugin-auto-import@21.0.0:
+    resolution: {integrity: sha512-vWuC8SwqJmxZFYwPojhOhOXDb5xFhNNcEVb9K/RFkyk/3VnfaOjzitWN7v+8DEKpMjSsY2AEGXNgt6I0yQrhRQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.0
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
   unplugin-icons@23.0.1:
     resolution: {integrity: sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ==}
     peerDependencies:
@@ -8427,6 +8459,8 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   eslint-compat-utils@0.5.1(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
@@ -8617,6 +8651,10 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   esutils@2.0.3: {}
 
   etag@1.8.1: {}
@@ -9244,6 +9282,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
@@ -10359,6 +10399,10 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
   superjson@2.2.2:
     dependencies:
       copy-anything: 3.0.5
@@ -10616,6 +10660,23 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
+  unimport@5.7.0:
+    dependencies:
+      acorn: 8.16.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      strip-literal: 3.1.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+
   union-value@1.0.1:
     dependencies:
       arr-union: 3.1.0
@@ -10625,6 +10686,17 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unplugin-auto-import@21.0.0(@vueuse/core@14.2.1(vue@3.5.31(typescript@5.9.3))):
+    dependencies:
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      picomatch: 4.0.3
+      unimport: 5.7.0
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      '@vueuse/core': 14.2.1(vue@3.5.31(typescript@5.9.3))
+
   unplugin-icons@23.0.1(@vue/compiler-sfc@3.5.31):
     dependencies:
       '@antfu/install-pkg': 1.1.0

src/components/common/app-provider.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { createTextVNode, defineComponent } from 'vue';
-import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
 
 defineOptions({ name: 'AppProvider' });
 

src/main.ts

@@ -1,13 +1,7 @@
 import { createApp } from 'vue';
 import './plugins/assets';
-import {
-  setupAppVersionNotification,
-  setupDayjs,
-  setupIconifyOffline,
-  setupLoading,
-  setupNProgress,
-  setupUI
-} from './plugins';
+import './plugins/ui';
+import { setupAppVersionNotification, setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
@@ -24,8 +18,6 @@ async function setupApp() {
 
   const app = createApp(App);
 
-  setupUI(app);
-
   setupStore(app);
 
   await setupRouter(app);

src/plugins/app.ts

@@ -1,6 +1,5 @@
 import { h } from 'vue';
 import type { App } from 'vue';
-import { ElButton } from 'element-plus';
 import { $t } from '@/locales';
 
 export function setupAppErrorHandle(app: App) {

src/plugins/index.ts

@@ -3,4 +3,3 @@ export * from './nprogress';
 export * from './iconify';
 export * from './dayjs';
 export * from './app';
-export * from './ui';

src/plugins/ui.ts

@@ -1,6 +1,3 @@
-import type { App } from 'vue';
-import ElementPlus, { ElCard, ElForm, ElTable } from 'element-plus';
-
 /** global table column align */
 ElTable.TableColumn.props.align = {
   type: String,
@@ -18,8 +15,3 @@ ElForm.props.requireAsteriskPosition = {
   type: String,
   default: 'right'
 };
-
-/** full import ElementPlus */
-export const setupUI = (app: App) => {
-  app.use(ElementPlus);
-};

src/typings/auto-imports.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const ElButton: typeof import('element-plus/es').ElButton
+  const ElCard: typeof import('element-plus/es').ElCard
+  const ElForm: typeof import('element-plus/es').ElForm
+  const ElMessage: typeof import('element-plus/es').ElMessage
+  const ElMessageBox: typeof import('element-plus/es').ElMessageBox
+  const ElNotification: typeof import('element-plus/es').ElNotification
+  const ElTable: typeof import('element-plus/es').ElTable
+  const ElTag: typeof import('element-plus/es').ElTag
+}

src/views/alova/user/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
 import { usePagination } from '@sa/alova/client';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
 import { batchDeleteUser, deleteUser, fetchGetUserList } from '@/service-alova/api';

src/views/manage/menu/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
 import type { Ref } from 'vue';
-import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
 import { useBoolean } from '@sa/hooks';
 import { yesOrNoRecord } from '@/constants/common';
 import { enableStatusRecord, menuTypeRecord } from '@/constants/business';

src/views/manage/role/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
 import { enableStatusRecord } from '@/constants/business';
 import { fetchGetRoleList } from '@/service/api';
 import { defaultTransform, useTableOperate, useUIPaginatedTable } from '@/hooks/common/table';

src/views/manage/user/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
 import { fetchGetUserList } from '@/service/api';
 import { defaultTransform, useTableOperate, useUIPaginatedTable } from '@/hooks/common/table';

src/views/plugin/charts/antv/modules/status.ts

@@ -1,5 +1,4 @@
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
 import type { TagProps } from 'element-plus';
 import type { CustomNodeData, NodeStatus } from './types';
 

src/views/plugin/excel/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="tsx">
 import { reactive } from 'vue';
-import { ElButton, ElTag } from 'element-plus';
 import { utils, writeFile } from 'xlsx';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
 import { fetchGetUserList } from '@/service/api';