refactor: Refactor Naive UI AppProvider

src/components/AppProvider/DialogContent.vue

@@ -1,28 +0,0 @@
-<template></template>
-
-<script setup>
-import { isNullOrUndef } from '@/utils/is'
-import { useDialog } from 'naive-ui'
-
-const NDialog = useDialog()
-
-NDialog.confirm = function (option = {}) {
-  const showIcon = !isNullOrUndef(option.title)
-  return NDialog[option.type || 'warning']({
-    showIcon,
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: option.confirm,
-    onNegativeClick: option.cancel,
-    onMaskClick: option.cancel,
-    ...option,
-  })
-}
-
-window['$dialog'] = NDialog
-Object.freeze(window.$dialog)
-Object.defineProperty(window, '$dialog', {
-  configurable: false,
-  writable: false,
-})
-</script>

src/components/AppProvider/LoadingBar.vue

@@ -1,10 +0,0 @@
-<template></template>
-
-<script setup>
-import { useLoadingBar } from 'naive-ui'
-window['$loadingBar'] = useLoadingBar()
-Object.defineProperty(window, '$loadingBar', {
-  configurable: false,
-  writable: false,
-})
-</script>

src/components/AppProvider/MessageContent.vue

@@ -1,72 +0,0 @@
-<template></template>
-
-<script setup>
-import { useMessage } from 'naive-ui'
-
-const NMessage = useMessage()
-
-let loadingMessage = null
-
-class Message {
-  /**
-   * 规则：
-   * * loading message只显示一个，新的message会替换正在显示的loading message
-   * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
-   */
-
-  removeMessage(message, duration = 2000) {
-    setTimeout(() => {
-      if (message) {
-        message.destroy()
-        message = null
-      }
-    }, duration)
-  }
-
-  showMessage(type, content, option = {}) {
-    if (loadingMessage && loadingMessage.type === 'loading') {
-      // 如果存在则替换正在显示的loading message
-      loadingMessage.type = type
-      loadingMessage.content = content
-
-      if (type !== 'loading') {
-        // 非loading message需设置自动清除
-        this.removeMessage(loadingMessage, option.duration)
-      }
-    } else {
-      // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
-      let message = NMessage[type](content, option)
-      if (type === 'loading') {
-        loadingMessage = message
-      }
-    }
-  }
-
-  loading(content) {
-    this.showMessage('loading', content, { duration: 0 })
-  }
-
-  success(content, option = {}) {
-    this.showMessage('success', content, option)
-  }
-
-  error(content, option = {}) {
-    this.showMessage('error', content, option)
-  }
-
-  info(content, option = {}) {
-    this.showMessage('info', content, option)
-  }
-
-  warning(content, option = {}) {
-    this.showMessage('warning', content, option)
-  }
-}
-
-window['$message'] = new Message()
-
-Object.defineProperty(window, '$message', {
-  configurable: false,
-  writable: false,
-})
-</script>

src/components/AppProvider/NotificationContent.vue

@@ -1,10 +0,0 @@
-<template></template>
-
-<script setup>
-import { useNotification } from 'naive-ui'
-window['$notification'] = useNotification()
-Object.defineProperty(window, '$notification', {
-  configurable: false,
-  writable: false,
-})
-</script>

src/components/AppProvider/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
-    <n-loading-bar-provider>
-      <LoadingBar />
-      <n-dialog-provider>
-        <DialogContent />
-        <n-message-provider>
-          <MessageContent />
-          <n-notification-provider>
-            <NotificationContent />
-            <slot></slot>
-          </n-notification-provider>
-        </n-message-provider>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
-  </n-config-provider>
-</template>
-
-<script setup>
-import { useCssVar } from '@vueuse/core'
-import MessageContent from './MessageContent.vue'
-import DialogContent from './DialogContent.vue'
-import LoadingBar from './LoadingBar.vue'
-import NotificationContent from './NotificationContent.vue'
-import { useThemeStore } from '@/store/modules/theme'
-
-const themStore = useThemeStore()
-watch(
-  () => themStore.naiveThemeOverrides.common,
-  (vars) => {
-    for (const key in vars) {
-      useCssVar(`--${key}`, document.documentElement).value = vars[key]
-      if (key === 'primaryColor') {
-        window.localStorage.setItem('__THEME_COLOR__', vars[key])
-      }
-    }
-  },
-  { immediate: true }
-)
-</script>

src/components/Common/AppProvider.vue

@@ -0,0 +1,55 @@
+<template>
+  <n-config-provider :theme-overrides="themStore.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>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { defineComponent, h } from 'vue'
+import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
+
+import { useCssVar } from '@vueuse/core'
+import { useThemeStore } from '@/store/modules/theme'
+import { setupMessage, setupDialog } from '@/utils/common/naiveTools'
+
+const themStore = useThemeStore()
+watch(
+  () => themStore.naiveThemeOverrides.common,
+  (vars) => {
+    for (const key in vars) {
+      useCssVar(`--${key}`, document.documentElement).value = vars[key]
+      if (key === 'primaryColor') {
+        window.localStorage.setItem('__THEME_COLOR__', vars[key])
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// 挂载naive组件的方法至window, 以便在全局使用
+function setupNaiveTools() {
+  window.$loadingBar = useLoadingBar()
+  window.$notification = useNotification()
+
+  window.$message = setupMessage(useMessage())
+  window.$dialog = setupDialog(useDialog())
+}
+
+const NaiveProviderContent = defineComponent({
+  setup() {
+    setupNaiveTools()
+  },
+  render() {
+    return h('div')
+  },
+})
+</script>