feat(projects): 添加NaiveProvider组件

src/AppProvider.vue

@@ -1,11 +1,20 @@
 <template>
-  <n-config-provider :theme="theme.naiveTheme" :theme-overrides="theme.naiveThemeOverrides" class="h-full">
-    <slot></slot>
+  <n-config-provider
+    :theme="theme.naiveTheme"
+    :theme-overrides="theme.naiveThemeOverrides"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    class="h-full"
+  >
+    <naive-provider>
+      <slot></slot>
+    </naive-provider>
   </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { NConfigProvider } from 'naive-ui';
+import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
+import { NaiveProvider } from '@/components';
 import { useThemeStore } from '@/store';
 
 const theme = useThemeStore();

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>

src/components/common/index.ts

@@ -1,4 +1,5 @@
+import NaiveProvider from './NaiveProvider/index.vue';
 import SystemLogo from './SystemLogo/index.vue';
 import DarkModeSwitch from './DarkModeSwitch/index.vue';
 
-export { SystemLogo, DarkModeSwitch };
+export { NaiveProvider, SystemLogo, DarkModeSwitch };

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './common';
+export * from './common';
 export * from './custom';
 export * from './business';