From eb328c3f46007de84e2ced324d2c6d226c1db59e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com>
Date: Thu, 11 Aug 2022 23:55:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=B6=88=E6=81=AF=E6=8F=90=E7=A4=BAmsg=E3=80=81dialog?=
 =?UTF-8?q?=E3=80=81loadingbar=E3=80=81notification?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 21 +++++++++---------
 src/components/NaiveProvider.vue | 37 ++++++++++++++++++++++++++++++++
 src/store/modules/index.ts       |  1 -
 src/store/modules/user.ts        | 12 -----------
 src/types/global.d.ts            |  6 ++++++
 src/views/test/test2.vue         |  4 ++--
 src/views/test/test3.vue         |  7 +++---
 7 files changed, 59 insertions(+), 29 deletions(-)
 create mode 100644 src/components/NaiveProvider.vue
 delete mode 100644 src/store/modules/user.ts
 create mode 100644 src/types/global.d.ts

diff --git a/src/App.vue b/src/App.vue
index 5f829ae..a36964d 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/NaiveProvider.vue b/src/components/NaiveProvider.vue
new file mode 100644
index 0000000..4cb3681
--- /dev/null
+++ b/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>
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
index c35e556..8bb08fd 100644
--- a/src/store/modules/index.ts
+++ b/src/store/modules/index.ts
@@ -1,3 +1,2 @@
-export * from './user';
 export * from './app';
 export * from './auth';
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
deleted file mode 100644
index b4e307d..0000000
--- a/src/store/modules/user.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia';
-
-// useStore 可以是 useUser、useCart 之类的任何东西
-// 第一个参数是应用程序中 store 的唯一 id
-export const useStore = defineStore('user-store', {
-  // other options...
-  state: () => {
-    return {
-      name: '张三',
-    };
-  },
-});
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000..9b24e4f
--- /dev/null
+++ b/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;
+}
diff --git a/src/views/test/test2.vue b/src/views/test/test2.vue
index 4603ad1..835de51 100644
--- a/src/views/test/test2.vue
+++ b/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>
diff --git a/src/views/test/test3.vue b/src/views/test/test3.vue
index 699c5d8..8e5afed 100644
--- a/src/views/test/test3.vue
+++ b/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>