refactor(components): 重构AppProvider

src/AppProvider.vue

@@ -7,32 +7,16 @@
     :theme-overrides="theme.themeOverrids"
   >
     <n-element class="h-full">
-      <n-loading-bar-provider>
-        <n-dialog-provider>
-          <n-notification-provider>
-            <n-message-provider>
+      <naive-provider>
         <slot></slot>
-              <app-provider-content />
-            </n-message-provider>
-          </n-notification-provider>
-        </n-dialog-provider>
-      </n-loading-bar-provider>
+      </naive-provider>
     </n-element>
   </n-config-provider>
 </template>
 
 <script lang="ts" setup>
-import {
-  NConfigProvider,
-  NElement,
-  NLoadingBarProvider,
-  NDialogProvider,
-  NNotificationProvider,
-  NMessageProvider,
-  zhCN,
-  dateZhCN
-} from 'naive-ui';
-import { AppProviderContent } from '@/components';
+import { NConfigProvider, NElement, zhCN, dateZhCN } from 'naive-ui';
+import { NaiveProvider } from '@/components';
 import { useThemeStore } from '@/store';
 import { useDarkMode } from '@/composables';
 

src/components/common/NaiveProvider/components/NaiveProviderContent.vue

@@ -6,13 +6,13 @@
 import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui';
 
 // 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
-function registerNaiveUiTools() {
+function registerNaiveTools() {
   window.$loadingBar = useLoadingBar();
   window.$dialog = useDialog();
   window.$message = useMessage();
   window.$notification = useNotification();
 }
 
-registerNaiveUiTools();
+registerNaiveTools();
 </script>
 <style scoped></style>

src/components/common/NaiveProvider/components/index.ts

@@ -0,0 +1,3 @@
+import NaiveProviderContent from './NaiveProviderContent.vue';
+
+export { NaiveProviderContent };

src/components/common/NaiveProvider/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <n-loading-bar-provider>
+    <n-dialog-provider>
+      <n-notification-provider>
+        <n-message-provider>
+          <slot></slot>
+          <naive-provider-content />
+        </n-message-provider>
+      </n-notification-provider>
+    </n-dialog-provider>
+  </n-loading-bar-provider>
+</template>
+
+<script setup lang="ts">
+import { NLoadingBarProvider, NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui';
+import { NaiveProviderContent } from './components';
+</script>
+<style scoped></style>

src/components/common/index.ts

@@ -1,8 +1,8 @@
-import AppProviderContent from './AppProviderContent/index.vue';
+import NaiveProvider from './NaiveProvider/index.vue';
 import SystemLogo from './SystemLogo/index.vue';
 import ExceptionSvg from './ExceptionSvg/index.vue';
 import LoginBg from './LoginBg/index.vue';
 import BannerSvg from './BannerSvg/index.vue';
 import HoverContainer from './HoverContainer/index.vue';
 
-export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer };
+export { NaiveProvider, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer };