fix(utils): 修复\\$message后于接口请求定义问题

ISSUES CLOSED: #39

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>

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)
 

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)
+}