feat(projects): 添加全局消息提示msg、dialog、loadingbar、notification

src/App.vue

@@ -2,6 +2,7 @@
 // import { darkTheme } from 'naive-ui';
 import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
 import json from './theme.json';
+// import NativeProvider from '@/components/NativeProvider.vue';
 
 const locale = zhCN;
 const dateLocale = dateZhCN;
@@ -10,17 +11,15 @@ const themeOverrides: GlobalThemeOverrides = {} || json;
 </script>
 
 <template>
-  <n-loading-bar-provider>
-    <n-config-provider
-      class="wh-full"
-      :theme="null"
-      :locale="locale"
-      :date-locale="dateLocale"
-      :theme-overrides="themeOverrides"
-    >
-      <router-view />
-    </n-config-provider>
-  </n-loading-bar-provider>
+  <n-config-provider
+    class="wh-full"
+    :theme="null"
+    :locale="locale"
+    :date-locale="dateLocale"
+    :theme-overrides="themeOverrides"
+  >
+    <naive-provider><router-view /></naive-provider>
+  </n-config-provider>
 </template>
 
 <style scoped></style>

src/components/NaiveProvider.vue

@@ -0,0 +1,37 @@
+<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 { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui';
+import { defineComponent, h } from 'vue';
+
+// 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
+function registerNaiveTools() {
+  window.$loadingBar = useLoadingBar();
+  window.$dialog = useDialog();
+  window.$message = useMessage();
+  window.$notification = useNotification();
+}
+
+const NaiveProviderContent = defineComponent({
+  name: 'NaiveProviderContent',
+  setup() {
+    registerNaiveTools();
+  },
+  render() {
+    return h('div');
+  },
+});
+</script>
+
+<style scoped></style>

src/store/modules/index.ts

@@ -1,3 +1,2 @@
-export * from './user';
 export * from './app';
 export * from './auth';

src/store/modules/user.ts

@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia';
-
-// useStore 可以是 useUser、useCart 之类的任何东西
-// 第一个参数是应用程序中 store 的唯一 id
-export const useStore = defineStore('user-store', {
-  // other options...
-  state: () => {
-    return {
-      name: '张三',
-    };
-  },
-});

src/types/global.d.ts

@@ -0,0 +1,6 @@
+interface Window {
+  $loadingBar?: import('naive-ui').LoadingBarApiInjection;
+  $dialog?: import('naive-ui').DialogApiInjection;
+  $message?: import('naive-ui').MessageApiInjection;
+  $notification?: import('naive-ui').NotificationApiInjection;
+}

src/views/test/test2.vue

@@ -5,9 +5,9 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { useStore } from '@/store';
+import { useAuthStore } from '@/store';
 
-const userStore = useStore();
+const userStore = useAuthStore();
 
 const router = useRouter();
 </script>

src/views/test/test3.vue

@@ -1,11 +1,12 @@
 <template>
   <div text-center c-red>I prove that you have made the jump test3.</div>
-  <n-button strong secondary type="success" @click="loadingBar.start()">loading-bar</n-button>
+  <n-button strong secondary type="success" @click="testMsg">testMsg</n-button>
 </template>
 
 <script setup lang="ts">
-import { useLoadingBar } from 'naive-ui';
-const loadingBar = useLoadingBar();
+const testMsg = () => {
+  window.$message.error('Once upon a time you dressed so fine');
+};
 </script>
 
 <style scoped></style>