refactor(components): 重构AppProvider

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

@@ -0,0 +1,18 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup>
+import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui';
+
+// 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
+function registerNaiveTools() {
+  window.$loadingBar = useLoadingBar();
+  window.$dialog = useDialog();
+  window.$message = useMessage();
+  window.$notification = useNotification();
+}
+
+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>