perf element global config

src/App.vue

@@ -1,10 +1,16 @@
 <template>
-	<router-view />
+	<el-config-provider :locale="appStore.locale" :size="size">
+		<router-view />
+	</el-config-provider>
 </template>
 
 <script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings'
 import { handleThemeStyle } from '@/utils/theme'
+import useAppStore from '@/store/modules/app';
+
+const appStore = useAppStore();
+const size = computed(() => appStore.size as any);
 
 onMounted(() => {
   nextTick(() => {

src/assets/styles/element-ui.scss

@@ -88,14 +88,10 @@
 	box-sizing: content-box;
 }
 
-.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
 	display: none;
 }
 
 .el-dropdown .el-dropdown-link {
 	color: var(--el-color-primary) !important;
-}
+}
-
-.el-dialog {
-	border-radius: 3% !important;
-}

src/assets/styles/index.scss

@@ -6,7 +6,8 @@
 @import './btn.scss';
 @import './ruoyi.scss';
 @import 'animate.css';
-//@import 'element-plus/dist/index.css';
+// @import 'element-plus/dist/index.css';
+
 body {
 	height: 100%;
 	margin: 0;
@@ -127,6 +128,7 @@ aside {
 .app-container {
 	padding: 20px;
 }
+
 // search面板样式
 .panel,
 .search {
@@ -204,4 +206,4 @@ aside {
 
 .multiselect--active {
 	z-index: 1000 !important;
-}
+}

src/components/SizeSelect/index.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import useAppStore from "@/store/modules/app";
-import { ComponentInternalInstance } from "vue";
 
 const appStore = useAppStore();
 const size = computed(() => appStore.size);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
 const sizeOptions = ref([
   { label: "较大", value: "large" },
   { label: "默认", value: "default" },
@@ -12,9 +11,7 @@ const sizeOptions = ref([
 ]);
 
 const handleSetSize = (size: string) => {
-  proxy?.$modal.loading("正在设置布局大小，请稍候...");
   appStore.setSize(size);
-  setTimeout("window.location.reload()", 1000);
 }
 </script>
 

src/layout/components/Settings/index.vue

@@ -11,6 +11,8 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
+
+
 const showSettings = ref(false);
 const theme = ref(settingsStore.theme);
 const sideTheme = ref(settingsStore.sideTheme);
@@ -99,7 +101,7 @@ defineExpose({
 </script>
 
 <template>
-	<el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
+	<el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
 		<div class="setting-drawer-title">
 			<h3 class="drawer-title">主题风格设置</h3>
 		</div>

src/main.ts

@@ -1,9 +1,4 @@
 import { createApp } from 'vue';
-import Cookies from 'js-cookie';
-// element-plus
-import ElementPlus from 'element-plus';
-import locale from 'element-plus/lib/locale/lang/zh-cn';
-
 // global css
 import 'uno.css';
 import '@/assets/styles/index.scss';
@@ -55,14 +50,4 @@ app.use(plugins);
 // 自定义指令
 directive(app);
 
-// 使用element-plus 并且设置全局的大小
-app.use(ElementPlus, {
-	locale: locale,
-	// 支持 large、default、small
-	size: Cookies.get('size') || 'default'
-});
-
-// 修改 el-dialog 默认点击遮照为不关闭
-(app._context.components.ElDialog as any).props.closeOnClickModal.default = false;
-
 app.mount('#app');

src/types/auto-imports.d.ts

@@ -8,8 +8,6 @@ declare global {
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
   const ElSelect: typeof import('element-plus/es')['ElSelect']
-  const ElTable: typeof import('element-plus/es')['ElTable']
-  const ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@@ -295,8 +293,6 @@ declare module 'vue' {
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
     readonly ElSelect: UnwrapRef<typeof import('element-plus/es')['ElSelect']>
-    readonly ElTable: UnwrapRef<typeof import('element-plus/es')['ElTable']>
-    readonly ElTreeSelect: UnwrapRef<typeof import('element-plus/es')['ElTreeSelect']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>

src/types/components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']