优化 UI 组件库的配置和使用方式

src/App.vue

@@ -2,8 +2,8 @@
 import eruda from 'eruda'
 import VConsole from 'vconsole'
 import hotkeys from 'hotkeys-js'
-import elementPlusLocaleZhCN from 'element-plus/es/locale/lang/zh-cn.mjs'
 import eventBus from './utils/eventBus'
+import Provider from './ui-provider/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 
 const settingsStore = useSettingsStore()
@@ -59,7 +59,7 @@ import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
 </script>
 
 <template>
-  <ElConfigProvider :locale="elementPlusLocaleZhCN" :button="{ autoInsertSpace: true }">
+  <Provider>
     <RouterView
       v-slot="{ Component, route }"
       :style="{
@@ -71,5 +71,5 @@ import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
       <NotAllowed v-else />
     </RouterView>
     <SystemInfo />
-  </ElConfigProvider>
+  </Provider>
 </template>

src/main.ts

@@ -2,10 +2,6 @@ import '@/utils/baidu'
 
 import '@/utils/system.copyright'
 
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
-
 import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
 
@@ -20,6 +16,7 @@ import 'overlayscrollbars/overlayscrollbars.css'
 import App from './App.vue'
 import pinia from './store'
 import router from './router'
+import ui from './ui-provider'
 
 // 自定义指令
 import directive from '@/utils/directive'
@@ -37,7 +34,6 @@ import 'virtual:uno.css'
 import '@/assets/styles/globals.scss'
 
 const app = createApp(App)
-app.use(ElementPlus)
 app.use(FloatingVue, {
   distance: 12,
 })
@@ -45,6 +41,7 @@ app.use(Message)
 app.use(VXETable)
 app.use(pinia)
 app.use(router)
+app.use(ui)
 directive(app)
 if (icons.isOfflineUse) {
   for (const info of icons.collections) {

src/ui-provider/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
+function install(app: App) {
+  app.use(ElementPlus)
+}
+
+export default { install }

src/ui-provider/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import zhCN from 'element-plus/es/locale/lang/zh-cn.mjs'
+</script>
+
+<template>
+  <ElConfigProvider :locale="zhCN" :button="{ autoInsertSpace: true }">
+    <slot />
+  </ElConfigProvider>
+</template>