From dcab55055c5bd3083f7f8cf726148537d59fec0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Thu, 15 Jun 2023 10:26:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(utils):=20=E4=BF=AE=E5=A4=8D\\$message?=
 =?UTF-8?q?=E5=90=8E=E4=BA=8E=E6=8E=A5=E5=8F=A3=E8=AF=B7=E6=B1=82=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #39
---
 src/components/common/AppProvider.vue | 43 ++-------------------------
 src/main.js                           |  2 ++
 src/utils/common/naiveTools.js        | 20 +++++++++++++
 3 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/src/components/common/AppProvider.vue b/src/components/common/AppProvider.vue
index bed856c..bdb9794 100644
--- a/src/components/common/AppProvider.vue
+++ b/src/components/common/AppProvider.vue
@@ -6,33 +6,14 @@
     :theme="appStore.isDark ? darkTheme : undefined"
     :theme-overrides="naiveThemeOverrides"
   >
-    <n-loading-bar-provider>
-      <n-dialog-provider>
-        <n-notification-provider>
-          <n-message-provider>
-            <slot></slot>
-            <NaiveProviderContent />
-          </n-message-provider>
-        </n-notification-provider>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
+    <slot />
   </n-config-provider>
 </template>
 
 <script setup>
-import { defineComponent, h } from 'vue'
-import {
-  zhCN,
-  dateZhCN,
-  darkTheme,
-  useLoadingBar,
-  useDialog,
-  useMessage,
-  useNotification,
-} from 'naive-ui'
+import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
 import { useCssVar } from '@vueuse/core'
 import { kebabCase } from 'lodash-es'
-import { setupMessage, setupDialog } from '@/utils'
 import { naiveThemeOverrides } from '~/settings'
 import { useAppStore } from '@/store'
 
@@ -45,23 +26,5 @@ function setupCssVar() {
     if (key === 'primaryColor') window.localStorage.setItem('__THEME_COLOR__', common[key] || '')
   }
 }
-
-// 挂载naive组件的方法至window, 以便在全局使用
-function setupNaiveTools() {
-  window.$loadingBar = useLoadingBar()
-  window.$notification = useNotification()
-
-  window.$message = setupMessage(useMessage())
-  window.$dialog = setupDialog(useDialog())
-}
-
-const NaiveProviderContent = defineComponent({
-  setup() {
-    setupCssVar()
-    setupNaiveTools()
-  },
-  render() {
-    return h('div')
-  },
-})
+setupCssVar()
 </script>
diff --git a/src/main.js b/src/main.js
index 7cf73f8..0690540 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,11 +9,13 @@ import { setupRouter } from '@/router'
 import { setupStore } from '@/store'
 import App from './App.vue'
 import { useResize } from '@zclzone/utils'
+import { setupNaiveDiscreteApi } from './utils'
 
 async function setupApp() {
   const app = createApp(App)
 
   setupStore(app)
+  setupNaiveDiscreteApi()
 
   await setupRouter(app)
 
diff --git a/src/utils/common/naiveTools.js b/src/utils/common/naiveTools.js
index 320acd3..9f54055 100644
--- a/src/utils/common/naiveTools.js
+++ b/src/utils/common/naiveTools.js
@@ -1,4 +1,7 @@
+import * as NaiveUI from 'naive-ui'
 import { isNullOrUndef } from '@/utils'
+import { naiveThemeOverrides as themeOverrides } from '~/settings'
+import { useAppStore } from '@/store/modules/app'
 
 export function setupMessage(NMessage) {
   let loadingMessage = null
@@ -77,3 +80,20 @@ export function setupDialog(NDialog) {
 
   return NDialog
 }
+
+export function setupNaiveDiscreteApi() {
+  const appStore = useAppStore()
+  const configProviderProps = computed(() => ({
+    theme: appStore.isDark ? NaiveUI.darkTheme : undefined,
+    themeOverrides,
+  }))
+  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
+    ['message', 'dialog', 'notification', 'loadingBar'],
+    { configProviderProps }
+  )
+
+  window.$loadingBar = loadingBar
+  window.$notification = notification
+  window.$message = setupMessage(message)
+  window.$dialog = setupDialog(dialog)
+}